Release v0.2.1

trangdoan982 · trangdoan982 · commit 8c62672869fa · 2025-10-30T08:50:43.000-04:00
diff --git a/main.js b/main.js
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
   "id": "discourse-graphs",
   "name": "Discourse Graph",
-  "version": "0.1.3",
+  "version": "0.2.1",
   "minAppVersion": "1.7.0",
   "description": "Discourse Graph Plugin for Obsidian",
   "author": "Discourse Graphs",
diff --git a/src/components/canvas/ExistingNodeSearch.tsx b/src/components/canvas/ExistingNodeSearch.tsx
@@ -66,6 +66,7 @@ export const ExistingNodeSearch = ({
           });
           editor.markHistoryStoppingPoint("add existing discourse node");
           editor.setSelectedShapes([id]);
+          editor.setCurrentTool("select");
         } catch (error) {
           console.error("Error in handleSelect:", error);
         }
diff --git a/src/components/canvas/TldrawView.tsx b/src/components/canvas/TldrawView.tsx
@@ -14,6 +14,7 @@ export class TldrawView extends TextFileView {
   private reactRoot?: Root;
   private store: TLStore | null = null;
   private assetStore: ObsidianTLAssetStore | null = null;
+  private canvasUuid: string | null = null;
   private onUnloadCallbacks: (() => void)[] = [];
 
   constructor(leaf: WorkspaceLeaf, plugin: DiscourseGraphPlugin) {
@@ -108,6 +109,11 @@ export class TldrawView extends TextFileView {
         console.warn("Invalid tldraw data format - missing raw field");
         return;
       }
+      if (data.meta?.uuid) {
+        this.canvasUuid = data.meta.uuid;
+      } else {
+        this.canvasUuid = window.crypto.randomUUID();
+      }
 
       if (!this.file) {
         console.warn("TldrawView not initialized: missing file");
@@ -142,6 +148,8 @@ export class TldrawView extends TextFileView {
       throw new Error("TldrawView not initialized: missing assetStore");
     if (!this.store)
       throw new Error("TldrawView not initialized: missing store");
+    if (!this.canvasUuid)
+      throw new Error("TldrawView not initialized: missing canvas UUID");
 
     if (!this.assetStore) {
       console.warn("Asset store is not set");
@@ -155,6 +163,7 @@ export class TldrawView extends TextFileView {
             store={store}
             file={this.file}
             assetStore={this.assetStore}
+            canvasUuid={this.canvasUuid}
           />
         </PluginProvider>
       </React.StrictMode>,
diff --git a/src/components/canvas/TldrawViewComponent.tsx b/src/components/canvas/TldrawViewComponent.tsx
@@ -55,18 +55,21 @@ type TldrawPreviewProps = {
   store: TLStore;
   file: TFile;
   assetStore: ObsidianTLAssetStore;
+  canvasUuid: string;
 };
 
 export const TldrawPreviewComponent = ({
   store,
   file,
   assetStore,
+  canvasUuid,
 }: TldrawPreviewProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [currentStore, setCurrentStore] = useState<TLStore>(store);
   const [isReady, setIsReady] = useState(false);
   const isCreatingRelationRef = useRef(false);
   const saveTimeoutRef = useRef<NodeJS.Timeout>(null);
+  const isSavingRef = useRef<boolean>(false);
   const lastShiftClickRef = useRef<number>(0);
   const SHIFT_CLICK_DEBOUNCE_MS = 300; // Prevent double clicks within 300ms
   const lastSavedDataRef = useRef<string>("");
@@ -99,10 +102,21 @@ export const TldrawPreviewComponent = ({
   }, []);
 
   const saveChanges = useCallback(async () => {
+    // Prevent concurrent saves
+    if (isSavingRef.current) {
+      return;
+    }
+
+    if (!canvasUuid) {
+      return;
+    }
+
+    isSavingRef.current = true;
+
     const newData = getTLDataTemplate({
       pluginVersion: plugin.manifest.version,
       tldrawFile: createRawTldrawFile(currentStore),
-      uuid: window.crypto.randomUUID(),
+      uuid: canvasUuid,
     });
     const stringifiedData = JSON.stringify(newData, null, "\t");
 
@@ -131,8 +145,21 @@ export const TldrawPreviewComponent = ({
         ),
       );
 
-      if (!verifyMatch || verifyMatch[1]?.trim() !== stringifiedData.trim()) {
-        throw new Error("Failed to verify saved TLDraw data");
+      if (!verifyMatch) {
+        throw new Error(
+          "Failed to verify saved TLDraw data: Could not find data block",
+        );
+      }
+
+      const savedData = JSON.parse(verifyMatch[1]?.trim() ?? "{}") as TLData;
+      const expectedData = JSON.parse(
+        stringifiedData?.trim() ?? "{}",
+      ) as TLData;
+
+      if (JSON.stringify(savedData) !== JSON.stringify(expectedData)) {
+        console.warn(
+          "Saved data differs from expected (this is normal during concurrent operations)",
+        );
       }
 
       lastSavedDataRef.current = stringifiedData;
@@ -155,18 +182,26 @@ export const TldrawPreviewComponent = ({
         setCurrentStore(newStore);
       }
     }
-  }, [file, plugin, currentStore, assetStore]);
+    isSavingRef.current = false;
+  }, [file, plugin, currentStore, assetStore, canvasUuid]);
 
   useEffect(() => {
     const unsubscribe = currentStore.listen(
       () => {
         if (saveTimeoutRef.current) {
           clearTimeout(saveTimeoutRef.current);
         }
-        saveTimeoutRef.current = setTimeout(
-          () => void saveChanges(),
-          DEFAULT_SAVE_DELAY,
-        );
+        saveTimeoutRef.current = setTimeout(() => {
+          // If a save is already in progress, schedule another save after it completes
+          if (isSavingRef.current) {
+            saveTimeoutRef.current = setTimeout(
+              () => void saveChanges(),
+              DEFAULT_SAVE_DELAY,
+            );
+          } else {
+            void saveChanges();
+          }
+        }, DEFAULT_SAVE_DELAY);
       },
       { source: "user", scope: "document" },
     );
@@ -366,7 +401,7 @@ export const TldrawPreviewComponent = ({
                     <TldrawUiMenuItem
                       id="discourse-node"
                       icon="discourseNodeIcon"
-                      label="Discourse Node"
+                      label="Discourse Graph"
                       onSelect={() => {
                         if (editorRef.current) {
                           editorRef.current.setCurrentTool("discourse-node");
diff --git a/src/components/canvas/shapes/DiscourseRelationShape.tsx b/src/components/canvas/shapes/DiscourseRelationShape.tsx
@@ -1134,7 +1134,7 @@ export class DiscourseRelationUtil extends ShapeUtil<DiscourseRelationShape> {
       }
 
       // Add the bidirectional relation to frontmatter
-      await addRelationToFrontmatter({
+      const { alreadyExisted } = await addRelationToFrontmatter({
         app: this.options.app,
         plugin: this.options.plugin,
         sourceFile,
@@ -1147,7 +1147,7 @@ export class DiscourseRelationUtil extends ShapeUtil<DiscourseRelationShape> {
         (rt) => rt.id === shape.props.relationTypeId,
       );
 
-      if (relationType) {
+      if (relationType && !alreadyExisted) {
         showToast({
           severity: "success",
           title: "Relation Created",
diff --git a/src/components/canvas/stores/assetStore.ts b/src/components/canvas/stores/assetStore.ts
@@ -41,20 +41,10 @@ export const addWikilinkBlockrefForFile = async ({
     linkedFile,
     canvasFile.path,
   );
-  const content = `[[${linkText}]]\n^${blockRefId}`;
+  const content = `[[${linkText}]]\n^${blockRefId}\n`;
 
   await app.vault.process(canvasFile, (data: string) => {
-    const fileCache = app.metadataCache.getFileCache(canvasFile);
-    const { start, end } =
-      fileCache?.frontmatterPosition ??
-      ({
-        start: { offset: 0 },
-        end: { offset: 0 },
-      } as { start: { offset: number }; end: { offset: number } });
-
-    const frontmatter = data.slice(start.offset, end.offset);
-    const rest = data.slice(end.offset);
-    return `${frontmatter}\n${content}\n${rest}`;
+    return `${data}\n${content}`;
   });
 
   return `asset:${ASSET_PREFIX}${blockRefId}`;
@@ -157,18 +147,11 @@ export const ensureBlockRefForFile = async ({
     canvasFile.path,
   );
   const internalLink = `[[${linkText}]]`;
-  const linkBlock = `${internalLink}\n^${blockRefId}`;
+  const linkBlock = `${internalLink}\n^${blockRefId}\n`;
 
-  // Insert right after frontmatter
+  // Append to end of file to avoid corrupting tldraw data
   await app.vault.process(canvasFile, (data: string) => {
-    const cache = app.metadataCache.getFileCache(canvasFile);
-    const { start, end } = cache?.frontmatterPosition ?? {
-      start: { offset: 0 },
-      end: { offset: 0 },
-    };
-    const frontmatter = data.slice(start.offset, end.offset);
-    const rest = data.slice(end.offset);
-    return `${frontmatter}\n${linkBlock}\n${rest}`;
+    return `${data}\n${linkBlock}`;
   });
 
   return blockRefId;
@@ -253,9 +236,9 @@ class ObsidianMarkdownFileTLAssetStoreProxy {
       this.file.path,
     );
     const internalLink = `[[${linkText}]]`;
-    const linkBlock = `${internalLink}\n^${blockRefId}`;
+    const linkBlock = `${internalLink}\n^${blockRefId}\n`;
 
-    await this.addToTopOfFile(linkBlock);
+    await this.appendToEndOfFile(linkBlock);
 
     const assetDataUri = URL.createObjectURL(file);
     const assetId = `${ASSET_PREFIX}${blockRefId}` as BlockRefAssetId;
@@ -292,17 +275,13 @@ class ObsidianMarkdownFileTLAssetStoreProxy {
     this.resolvedAssetDataCache.clear();
   };
 
-  private addToTopOfFile = async (content: string) => {
+  /**
+   * Append asset references to the end of the file.
+   * This avoids corrupting the tldraw JSON data block and frontmatter.
+   */
+  private appendToEndOfFile = async (content: string) => {
     await this.app.vault.process(this.file, (data: string) => {
-      const fileCache = this.app.metadataCache.getFileCache(this.file);
-      const { start, end } = fileCache?.frontmatterPosition ?? {
-        start: { offset: 0 },
-        end: { offset: 0 },
-      };
-
-      const frontmatter = data.slice(start.offset, end.offset);
-      const rest = data.slice(end.offset);
-      return `${frontmatter}\n${content}\n${rest}`;
+      return `${data}\n${content}`;
     });
   };
 
@@ -311,8 +290,10 @@ class ObsidianMarkdownFileTLAssetStoreProxy {
   ): Promise<ArrayBuffer | null> => {
     try {
       const blockRef = extractBlockRefId(blockRefAssetId);
+      if (!blockRef) return null;
+
       const canvasFileCache = this.app.metadataCache.getFileCache(this.file);
-      if (!blockRef || !canvasFileCache) return null;
+      if (!canvasFileCache) return null;
 
       const linkedFile = await resolveLinkedTFileByBlockRef({
         app: this.app,
@@ -360,6 +341,7 @@ export class ObsidianTLAssetStore implements Required<TLAssetStore> {
 
   resolve = async (
     asset: TLAsset,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
     _ctx: TLAssetContext,
   ): Promise<string | null> => {
     try {
diff --git a/src/components/canvas/utils/frontmatterUtils.ts b/src/components/canvas/utils/frontmatterUtils.ts
@@ -4,6 +4,8 @@ import type DiscourseGraphPlugin from "~/index";
 /**
  * Adds bidirectional relation links to the frontmatter of both files.
  * This follows the same pattern as RelationshipSection.tsx
+ * 
+ * @returns Object indicating whether the relation already existed
  */
 export const addRelationToFrontmatter = async ({
   app,
@@ -17,21 +19,26 @@ export const addRelationToFrontmatter = async ({
   sourceFile: TFile;
   targetFile: TFile;
   relationTypeId: string;
-}): Promise<void> => {
+}): Promise<{ alreadyExisted: boolean }> => {
   const relationType = plugin.settings.relationTypes.find(
     (r) => r.id === relationTypeId,
   );
 
   if (!relationType) {
     console.error(`Relation type ${relationTypeId} not found`);
-    return;
+    return { alreadyExisted: false };
   }
 
   try {
+    let sourceToTargetExisted = false;
+    let targetToSourceExisted = false;
+
     const appendLinkToFrontmatter = async (
       fileToMutate: TFile,
       targetFile: TFile,
-    ) => {
+    ): Promise<boolean> => {
+      let linkAlreadyExists = false;
+
       await app.fileManager.processFrontMatter(
         fileToMutate,
         (fm: FrontMatterCache) => {
@@ -67,15 +74,28 @@ export const addRelationToFrontmatter = async ({
           const normalizedExistingLinks = existingLinks.map(normalizeLink);
           const normalizedLinkToAdd = normalizeLink(linkToAdd);
 
-          if (!normalizedExistingLinks.includes(normalizedLinkToAdd)) {
-            fm[relationType.id] = [...existingLinks, linkToAdd];
-          }
+         linkAlreadyExists =
+           normalizedExistingLinks.includes(normalizedLinkToAdd);
+         if (!linkAlreadyExists) {
+           fm[relationType.id] = [...existingLinks, linkToAdd];
+         }
         },
       );
+
+      return linkAlreadyExists;
     };
 
-    await appendLinkToFrontmatter(sourceFile, targetFile);
-    await appendLinkToFrontmatter(targetFile, sourceFile);
+    sourceToTargetExisted = await appendLinkToFrontmatter(
+      sourceFile,
+      targetFile,
+    );
+    targetToSourceExisted = await appendLinkToFrontmatter(
+      targetFile,
+      sourceFile,
+    );
+
+    // Consider the relation as "already existed" if both directions existed
+    return { alreadyExisted: sourceToTargetExisted && targetToSourceExisted };
   } catch (error) {
     console.error("Failed to add relation to frontmatter:", error);
     throw error;
diff --git a/src/components/canvas/utils/nodeCreationFlow.ts b/src/components/canvas/utils/nodeCreationFlow.ts
@@ -59,6 +59,7 @@ export const openCreateDiscourseNodeAt = (args: CreateNodeAtArgs): void => {
           `create discourse node ${selectedNodeType.id}`,
         );
         tldrawEditor.setSelectedShapes([shapeId]);
+        tldrawEditor.setCurrentTool("select");
       } catch (error) {
         console.error("Error creating discourse node:", error);
         showToast({

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"id": "discourse-graphs",`
`3`	`3`	`"name": "Discourse Graph",`
`4`		`- "version": "0.1.3",`
	`4`	`+ "version": "0.2.1",`
`5`	`5`	`"minAppVersion": "1.7.0",`
`6`	`6`	`"description": "Discourse Graph Plugin for Obsidian",`
`7`	`7`	`"author": "Discourse Graphs",`
Original file line number	Diff line number	Diff line change
`@@ -66,6 +66,7 @@ export const ExistingNodeSearch = ({`
`66`	`66`	`});`
`67`	`67`	`editor.markHistoryStoppingPoint("add existing discourse node");`
`68`	`68`	`editor.setSelectedShapes([id]);`
	`69`	`+ editor.setCurrentTool("select");`
`69`	`70`	`} catch (error) {`
`70`	`71`	`console.error("Error in handleSelect:", error);`
`71`	`72`	`}`