From b59e2c21870cc658500626af3fab87f889abf99f Mon Sep 17 00:00:00 2001 From: Timothy Cardoza Date: Fri, 27 Feb 2026 13:53:08 -0600 Subject: [PATCH] fixed bad commit and reverted prior to create note. Also added note id linking for iframe --- src/App.tsx | 4 +- src/components/EmbedAuthWrapper.tsx | 38 +-- tasgrid-embed-example_and_instructions.html | 245 ++++++++++++++++++++ test-embed.html | 94 ++------ 4 files changed, 272 insertions(+), 109 deletions(-) create mode 100644 tasgrid-embed-example_and_instructions.html diff --git a/src/App.tsx b/src/App.tsx index f03cfd9..8082f56 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -101,7 +101,9 @@ const App: Component = () => {
}> {(() => { - const [selectedNoteId, setSelectedNoteId] = createSignal(null); + const searchParams = new URLSearchParams(window.location.search); + const noteIdFromUrl = searchParams.get('noteId'); + const [selectedNoteId, setSelectedNoteId] = createSignal(noteIdFromUrl); return ; })()} diff --git a/src/components/EmbedAuthWrapper.tsx b/src/components/EmbedAuthWrapper.tsx index 93390ef..cf21a75 100644 --- a/src/components/EmbedAuthWrapper.tsx +++ b/src/components/EmbedAuthWrapper.tsx @@ -5,52 +5,18 @@ interface EmbedAuthWrapperProps { children: JSX.Element; } -import { NOTES_COLLECTION } from "@/lib/constants"; - export const EmbedAuthWrapper: Component = (props) => { const [isHydrated, setIsHydrated] = createSignal(pb.authStore.isValid); - const handleMessage = async (event: MessageEvent) => { + const handleMessage = (event: MessageEvent) => { const { data } = event; console.log('[DEBUG] EmbedAuthWrapper received message:', data?.type); - if (data?.type === "TASGRID_AUTH" && data.token) { console.log("[DEBUG] Received TasGrid auth payload, hydrating..."); + // Save triggers pb.authStore.onChange, which App.tsx is already listening to and calling initStore() pb.authStore.save(data.token, data.user || null); setIsHydrated(true); } - - if (data?.type === "TASGRID_CREATE_NOTE") { - const currentUserId = pb.authStore.model?.id; - if (!currentUserId) { - console.warn("[DEBUG] Rejecting note creation: Not authenticated"); - return; - } - - try { - const noteData = data.note || {}; - const result = await pb.collection(NOTES_COLLECTION).create({ - title: noteData.title || "New Note", - content: noteData.content || "", - tags: noteData.tags || [], - isPrivate: noteData.isPrivate === true, - user: currentUserId, - }); - - console.log("[DEBUG] Note created via API:", result.id); - - // Respond back to parent - if (window.parent !== window) { - window.parent.postMessage({ - type: "TASGRID_NOTE_CREATED", - noteId: result.id, - title: result.title - }, "*"); - } - } catch (e) { - console.error("Failed to create note via API", e); - } - } }; onMount(() => { diff --git a/tasgrid-embed-example_and_instructions.html b/tasgrid-embed-example_and_instructions.html new file mode 100644 index 0000000..4e3ac05 --- /dev/null +++ b/tasgrid-embed-example_and_instructions.html @@ -0,0 +1,245 @@ + + + + + + + TasGrid Parent App Simulator + + + + + +

TasGrid Parent App Simulator

+ +
+
+

Login to Parent Application

+

This simulates the parent application authenticating with the shared backend.

+ +
+
+ +
+

Or send a token manually:

+ + +
+ +
+
+ Developer Integration Guide + +
+

1. Available Routes:

+
    +
  • /embed/notes: Renders the full notepad/editor.
    • +
  • /embed/quick-add: Renders a standalone task creation form.
    • +
+ +

2. Authentication Protocol:

+

The parent application must send a postMessage to the iframe immediately after the + iframe loads (or whenever auth state changes).

+ 
+iframe.contentWindow.postMessage({
+  type: "TASGRID_AUTH",
+  token: "YOUR_POCKETBASE_TOKEN",
+  user: { /* optional PB user record */ }
+}, "*");
+ +

3. Responsiveness:

+

Both routes are designed to be fluid. Ensure your iframe container has defined dimensions; the + content will expand to fill it.

+
+
+
+
+ +
+
+
+ Notes Embed + /embed/notes +
+ +
+ +
+
+ Quick Add Embed + /embed/quick-add +
+ +
+
+ + + + + \ No newline at end of file diff --git a/test-embed.html b/test-embed.html index 192f786..492eeac 100644 --- a/test-embed.html +++ b/test-embed.html @@ -124,21 +124,15 @@
-
-

Note Creation API

-
- -
-
- -
-
-

Or send a token manually:

+

Test Deep Linking:

+
+ + +
+ +

Manual Auth:

@@ -151,6 +145,7 @@

1. Available Routes:

  • /embed/notes: Renders the full notepad/editor.
    • +
  • /embed/notes?noteId=XXX: Renders a specific note directly.
  • /embed/quick-add: Renders a standalone task creation form.
@@ -165,28 +160,9 @@ iframe.contentWindow.postMessage({ user: { /* optional PB user record */ } }, "*"); -

4. Note Creation API (TASGRID_CREATE_NOTE):

-

Trigger note creation from the parent app. TasGrid will respond with - TASGRID_NOTE_CREATED.

- 
-// Request
-iframe.contentWindow.postMessage({
-  type: "TASGRID_CREATE_NOTE",
-  note: {
-    title: "Project Alpha",
-    content: "Initial requirements...",
-    tags: ["Project", "2024"],
-    isPrivate: false
-  }
-}, "*");
-
-// Response Listener
-window.addEventListener("message", (event) => {
-  if (event.data.type === "TASGRID_NOTE_CREATED") {
-    console.log("New Note ID:", event.data.noteId);
-  }
-});
+

3. Responsiveness:

+

Both routes are designed to be fluid. Ensure your iframe container has defined dimensions; the + content will expand to fill it.

@@ -216,6 +192,16 @@ window.addEventListener("message", (event) => { const pb = new PocketBase('https://pocketbase.ccllc.pro'); const statusEl = document.getElementById('status'); + function loadSpecificNote() { + const id = document.getElementById('note-id-input').value.trim(); + const iframe = document.getElementById('notes-iframe'); + if (id) { + iframe.src = `http://localhost:4000/embed/notes?noteId=${id}`; + } else { + iframe.src = `http://localhost:4000/embed/notes`; + } + } + async function login() { const email = document.getElementById('email').value; const password = document.getElementById('password').value; @@ -262,42 +248,6 @@ window.addEventListener("message", (event) => { quickAddIframe.postMessage(payload, "*"); } - async function createNote() { - const apiStatus = document.getElementById('api-status'); - const apiResult = document.getElementById('api-result'); - - apiStatus.textContent = "Sending creation request..."; - apiResult.style.display = 'none'; - - const payload = { - type: "TASGRID_CREATE_NOTE", - note: { - title: "Test Note from Parent " + new Date().toLocaleTimeString(), - content: "This note was created automatically via the postMessage API.", - tags: ["API-TEST", "SISTER-APP"], - isPrivate: false - } - }; - - // We can send to either iframe since EmbedAuthWrapper handles it globally for all embedded views - document.getElementById('notes-iframe').contentWindow.postMessage(payload, "*"); - } - - // Listen for responses - window.addEventListener("message", (event) => { - const { data } = event; - console.log("Parent received message:", data); - - if (data.type === "TASGRID_NOTE_CREATED") { - const apiStatus = document.getElementById('api-status'); - const apiResult = document.getElementById('api-result'); - - apiStatus.innerHTML = `Note Created! ID: ${data.noteId}`; - apiResult.textContent = JSON.stringify(data, null, 2); - apiResult.style.display = 'block'; - } - }); - // Handle case where user refreshed but is still logged in to the parent window.addEventListener('load', () => { if (pb.authStore.isValid && pb.authStore.model) {