Merge branch 'main' into eng-1283-allow-node-sharing-with-groups

Author: trangdoan982

apps/obsidian/src/components/BulkIdentifyDiscourseNodesModal.tsx

@@ -6,6 +6,7 @@ import { BulkImportCandidate, BulkImportPattern } from "~/types";
 import { QueryEngine } from "~/services/QueryEngine";
 import { TFile } from "obsidian";
 import { getNodeTypeById } from "~/utils/typeUtils";
+import { FrontmatterRecord } from "./canvas/shapes/discourseNodeShapeUtils";
 
 type BulkImportModalProps = {
   plugin: DiscourseGraphPlugin;
@@ -63,7 +64,7 @@ const BulkImportContent = ({ plugin, onClose }: BulkImportModalProps) => {
     );
   };
 
-  const handleScanVault = useCallback(async () => {
+  const handleScanVault = useCallback(() => {
     const enabledPatterns = patterns.filter(
       (p) => p.enabled && p.alternativePattern.trim(),
     );
@@ -77,7 +78,7 @@ const BulkImportContent = ({ plugin, onClose }: BulkImportModalProps) => {
     try {
       const validNodeTypes = plugin.settings.nodeTypes;
       const foundCandidates =
-        await queryEngineRef.current.scanForBulkImportCandidates(
+        queryEngineRef.current.scanForBulkImportCandidates(
           enabledPatterns,
           validNodeTypes,
         );
@@ -127,7 +128,7 @@ const BulkImportContent = ({ plugin, onClose }: BulkImportModalProps) => {
       try {
         await plugin.app.fileManager.processFrontMatter(
           candidate.file,
-          (fm) => {
+          (fm: FrontmatterRecord) => {
             fm.nodeTypeId = candidate.matchedNodeType.id;
           },
         );
@@ -376,7 +377,7 @@ const BulkImportContent = ({ plugin, onClose }: BulkImportModalProps) => {
         <div className="mt-6 flex justify-between">
           <button onClick={() => setStep("patterns")}>Back</button>
           <button
-            onClick={handleBulkIdentify}
+            onClick={() => void handleBulkIdentify()}
             className="!bg-accent !text-on-accent rounded px-4 py-2"
             disabled={candidates.filter((c) => c.selected).length === 0}
           >

apps/obsidian/src/components/DiscourseContextView.tsx

@@ -248,6 +248,7 @@ export class DiscourseContextView extends ItemView {
     return "telescope";
   }
 
+  // eslint-disable-next-line @typescript-eslint/require-await -- required by obsidian
   async onOpen(): Promise<void> {
     const container = this.containerEl.children[1];
     if (container) {
@@ -279,6 +280,7 @@ export class DiscourseContextView extends ItemView {
     }
   }
 
+  // eslint-disable-next-line @typescript-eslint/require-await -- required by obsidian
   async onClose(): Promise<void> {
     if (this.root) {
       this.root.unmount();

apps/obsidian/src/components/GeneralSettings.tsx

@@ -1,38 +1,27 @@
-import { useState, useCallback, useRef, useEffect } from "react";
+import { useState, useCallback } from "react";
 import { usePlugin } from "./PluginContext";
 import { setIcon } from "obsidian";
 import SuggestInput from "./SuggestInput";
-import { SLACK_LOGO, WHITE_LOGO_SVG } from "~/icons";
+import { DiscourseGraphLogoIcon, SlackLogoIcon } from "./Icons";
 
 const DOCS_URL = "https://discoursegraphs.com/docs/obsidian";
 const COMMUNITY_URL =
   "https://join.slack.com/t/discoursegraphs/shared_invite/zt-37xklatti-cpEjgPQC0YyKYQWPNgAkEg";
 
 const InfoSection = () => {
   const plugin = usePlugin();
-  const logoRef = useRef<HTMLDivElement>(null);
-  const communityIconRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (logoRef.current) {
-      logoRef.current.innerHTML = WHITE_LOGO_SVG;
-    }
-    if (communityIconRef.current) {
-      communityIconRef.current.innerHTML = SLACK_LOGO;
-    }
-  }, []);
-
   return (
     <div className="flex justify-center">
       <div
         className="flex w-48 flex-col items-center rounded-lg p-3"
         style={{ background: "var(--tag-background)" }}
       >
         <div
-          ref={logoRef}
           className="flex h-12 w-12 items-center justify-center"
           style={{ color: "var(--interactive-accent)" }}
-        />
+        >
+          <DiscourseGraphLogoIcon />
+        </div>
         <div
           className="font-semibold"
           style={{ color: "var(--interactive-accent)" }}
@@ -48,7 +37,9 @@ const InfoSection = () => {
           rel="noopener noreferrer"
           aria-label="Community"
         >
-          <div ref={communityIconRef} className="icon" />
+          <span className="icon flex items-center">
+            <SlackLogoIcon />
+          </span>
           <span>Community</span>
           <span
             className="icon"

apps/obsidian/src/components/Icons.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+
+export const DiscourseGraphLogoIcon = (): React.ReactElement => (
+  <svg
+    width="32"
+    height="32"
+    viewBox="0 0 256 264"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M156.705 252.012C140.72 267.995 114.803 267.995 98.8183 252.012L11.9887 165.182C-3.99622 149.197 -3.99622 123.28 11.9886 107.296L55.4035 63.8807C63.3959 55.8881 76.3541 55.8881 84.3467 63.8807C92.3391 71.8731 92.3391 84.8313 84.3467 92.8239L69.8751 107.296C53.8901 123.28 53.8901 149.197 69.8751 165.182L113.29 208.596C121.282 216.589 134.241 216.589 142.233 208.596C150.225 200.604 150.225 187.646 142.233 179.653L127.761 165.182C111.777 149.197 111.777 123.28 127.761 107.296C143.746 91.3105 143.746 65.3939 127.761 49.4091L113.29 34.9375C105.297 26.9452 105.297 13.9868 113.29 5.99432C121.282 -1.99811 134.241 -1.99811 142.233 5.99434L243.533 107.296C259.519 123.28 259.519 149.197 243.533 165.182L156.705 252.012ZM200.119 121.767C192.127 113.775 179.168 113.775 171.176 121.767C163.184 129.76 163.184 142.718 171.176 150.71C179.168 158.703 192.127 158.703 200.119 150.71C208.112 142.718 208.112 129.76 200.119 121.767Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const SlackLogoIcon = (): React.ReactElement => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 127 127"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden
+  >
+    <path
+      d="M27.2 80c0 7.3-5.9 13.2-13.2 13.2C6.7 93.2.8 87.3.8 80c0-7.3 5.9-13.2 13.2-13.2h13.2V80zm6.6 0c0-7.3 5.9-13.2 13.2-13.2 7.3 0 13.2 5.9 13.2 13.2v33c0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V80z"
+      fill="currentColor"
+    />
+    <path
+      d="M47 27c-7.3 0-13.2-5.9-13.2-13.2C33.8 6.5 39.7.6 47 .6c7.3 0 13.2 5.9 13.2 13.2V27H47zm0 6.7c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H13.9C6.6 60.1.7 54.2.7 46.9c0-7.3 5.9-13.2 13.2-13.2H47z"
+      fill="currentColor"
+    />
+    <path
+      d="M99.9 46.9c0-7.3 5.9-13.2 13.2-13.2 7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H99.9V46.9zm-6.6 0c0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V13.8C66.9 6.5 72.8.6 80.1.6c7.3 0 13.2 5.9 13.2 13.2v33.1z"
+      fill="currentColor"
+    />
+    <path
+      d="M80.1 99.8c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V99.8h13.2zm0-6.6c-7.3 0-13.2-5.9-13.2-13.2 0-7.3 5.9-13.2 13.2-13.2h33.1c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H80.1z"
+      fill="currentColor"
+    />
+  </svg>
+);

apps/obsidian/src/components/InlineNodeTypePicker.ts

@@ -36,7 +36,7 @@ export class InlineNodeTypePicker {
       const rect = range.getBoundingClientRect();
 
       if (rect.width === 0 && rect.height === 0) {
-        const span = document.createElement("span");
+        const span = createSpan();
         span.textContent = "\u200B";
         range.insertNode(span);
         const spanRect = span.getBoundingClientRect();
@@ -54,10 +54,10 @@ export class InlineNodeTypePicker {
   }
 
   private createPopover(): HTMLElement {
-    const popover = document.createElement("div");
+    const popover = createDiv();
     popover.className =
       "inline-node-type-picker fixed z-[10000] bg-primary border border-modifier-border rounded-md shadow-[0_4px_12px_rgba(0,0,0,0.15)] max-h-[300px] overflow-y-auto min-w-[200px] max-w-[400px]";
-    const itemsContainer = document.createElement("div");
+    const itemsContainer = createDiv();
     itemsContainer.className = "inline-node-type-items-container";
     popover.appendChild(itemsContainer);
 
@@ -70,28 +70,28 @@ export class InlineNodeTypePicker {
     container.innerHTML = "";
 
     if (this.items.length === 0) {
-      const noResults = document.createElement("div");
+      const noResults = createDiv();
       noResults.className = "p-3 text-center text-muted text-sm";
       noResults.textContent = "No node types available";
       container.appendChild(noResults);
       return;
     }
 
     this.items.forEach((item, index) => {
-      const itemEl = document.createElement("div");
+      const itemEl = createDiv();
       itemEl.className = `inline-node-type-item px-3 py-2 cursor-pointer flex items-center gap-2 border-b border-[var(--background-modifier-border-hover)]${
         index === this.selectedIndex ? " bg-modifier-hover" : ""
       }`;
       itemEl.dataset.index = index.toString();
 
       if (item.color) {
-        const colorDot = document.createElement("div");
+        const colorDot = createDiv();
         colorDot.className = "w-3 h-3 rounded-full shrink-0";
         colorDot.style.backgroundColor = item.color;
         itemEl.appendChild(colorDot);
       }
 
-      const nameText = document.createElement("div");
+      const nameText = createDiv();
       nameText.textContent = item.name;
       nameText.className = "font-medium text-normal text-sm";
       itemEl.appendChild(nameText);
@@ -201,17 +201,25 @@ export class InlineNodeTypePicker {
       }
     };
 
-    document.addEventListener("keydown", this.keydownHandler, true);
-    document.addEventListener("mousedown", this.clickOutsideHandler, true);
+    activeDocument.addEventListener("keydown", this.keydownHandler, true);
+    activeDocument.addEventListener(
+      "mousedown",
+      this.clickOutsideHandler,
+      true,
+    );
   }
 
   private removeEventHandlers() {
     if (this.keydownHandler) {
-      document.removeEventListener("keydown", this.keydownHandler, true);
+      activeDocument.removeEventListener("keydown", this.keydownHandler, true);
       this.keydownHandler = null;
     }
     if (this.clickOutsideHandler) {
-      document.removeEventListener("mousedown", this.clickOutsideHandler, true);
+      activeDocument.removeEventListener(
+        "mousedown",
+        this.clickOutsideHandler,
+        true,
+      );
       this.clickOutsideHandler = null;
     }
   }
@@ -225,7 +233,7 @@ export class InlineNodeTypePicker {
     if (!position) return;
 
     this.popover = this.createPopover();
-    document.body.appendChild(this.popover);
+    activeDocument.body.appendChild(this.popover);
 
     const popoverRect = this.popover.getBoundingClientRect();
     const viewportWidth = window.innerWidth;

apps/obsidian/src/components/ModifyNodeModal.tsx

@@ -114,21 +114,19 @@ export const ModifyNodeForm = ({
     }
 
     if (debounceTimeoutRef.current) {
-      clearTimeout(debounceTimeoutRef.current);
+      window.clearTimeout(debounceTimeoutRef.current);
     }
 
     setIsSearching(true);
     debounceTimeoutRef.current = window.setTimeout(() => {
-      void (async () => {
+      void (() => {
         try {
           const results = selectedNodeType
-            ? await queryEngine.current.searchDiscourseNodesByTitle(
+            ? queryEngine.current.searchDiscourseNodesByTitle(
                 searchQuery,
                 selectedNodeType.id,
               )
-            : await queryEngine.current.searchDiscourseNodesByTitle(
-                searchQuery,
-              );
+            : queryEngine.current.searchDiscourseNodesByTitle(searchQuery);
           setSearchResults(results);
         } catch (error) {
           console.error("Error searching nodes:", error);
@@ -140,7 +138,7 @@ export const ModifyNodeForm = ({
     }, 250);
     return () => {
       if (debounceTimeoutRef.current) {
-        clearTimeout(debounceTimeoutRef.current);
+        window.clearTimeout(debounceTimeoutRef.current);
       }
     };
   }, [query, selectedNodeType, isEditMode, disableExistingNodeSearch]);

apps/obsidian/src/components/NodeTagSuggestModal.tsx

@@ -45,7 +45,7 @@ export class NodeTagSuggestPopover {
 
       // If the rect has no dimensions (collapsed cursor), try using a temporary span to get cursor position
       if (rect.width === 0 && rect.height === 0) {
-        const span = document.createElement("span");
+        const span = activeDocument.createElement("span");
         span.textContent = "\u200B";
         range.insertNode(span);
         const spanRect = span.getBoundingClientRect();
@@ -73,11 +73,11 @@ export class NodeTagSuggestPopover {
   }
 
   private createPopover(): HTMLElement {
-    const popover = document.createElement("div");
+    const popover = activeDocument.createElement("div");
     popover.className =
       "node-tag-suggest-popover fixed z-[10000] bg-primary border border-modifier-border rounded-md shadow-[0_4px_12px_rgba(0,0,0,0.15)] max-h-[300px] overflow-y-auto min-w-[200px] max-w-[400px]";
 
-    const itemsContainer = document.createElement("div");
+    const itemsContainer = activeDocument.createElement("div");
     itemsContainer.className = "node-tag-items-container";
     popover.appendChild(itemsContainer);
 
@@ -90,35 +90,35 @@ export class NodeTagSuggestPopover {
     container.innerHTML = "";
 
     if (this.items.length === 0) {
-      const noResults = document.createElement("div");
+      const noResults = activeDocument.createElement("div");
       noResults.className = "p-3 text-center text-muted text-sm";
       noResults.textContent = "No node tags available";
       container.appendChild(noResults);
       return;
     }
 
     this.items.forEach((item, index) => {
-      const itemEl = document.createElement("div");
+      const itemEl = activeDocument.createElement("div");
       itemEl.className = `node-tag-item px-3 py-2 cursor-pointer flex items-center gap-2 border-b border-[var(--background-modifier-border-hover)]${
         index === this.selectedIndex ? " bg-modifier-hover" : ""
       }`;
       itemEl.dataset.index = index.toString();
 
       if (item.nodeType.color) {
-        const colorDot = document.createElement("div");
+        const colorDot = activeDocument.createElement("div");
         colorDot.className = `w-3 h-3 rounded-full shrink-0`;
         colorDot.style.backgroundColor = item.nodeType.color;
         itemEl.appendChild(colorDot);
       }
 
-      const textContainer = document.createElement("div");
+      const textContainer = activeDocument.createElement("div");
       textContainer.className = "flex flex-col gap-0.5 flex-1";
 
-      const tagText = document.createElement("div");
+      const tagText = activeDocument.createElement("div");
       tagText.textContent = `#${item.tag}`;
       tagText.className = "font-medium text-normal text-sm";
 
-      const nodeTypeText = document.createElement("div");
+      const nodeTypeText = activeDocument.createElement("div");
       nodeTypeText.textContent = item.nodeType.name;
       nodeTypeText.className = "text-xs text-muted";
 
@@ -224,17 +224,25 @@ export class NodeTagSuggestPopover {
       }
     };
 
-    document.addEventListener("keydown", this.keydownHandler, true);
-    document.addEventListener("mousedown", this.clickOutsideHandler, true);
+    activeDocument.addEventListener("keydown", this.keydownHandler, true);
+    activeDocument.addEventListener(
+      "mousedown",
+      this.clickOutsideHandler,
+      true,
+    );
   }
 
   private removeEventHandlers() {
     if (this.keydownHandler) {
-      document.removeEventListener("keydown", this.keydownHandler, true);
+      activeDocument.removeEventListener("keydown", this.keydownHandler, true);
       this.keydownHandler = null;
     }
     if (this.clickOutsideHandler) {
-      document.removeEventListener("mousedown", this.clickOutsideHandler, true);
+      activeDocument.removeEventListener(
+        "mousedown",
+        this.clickOutsideHandler,
+        true,
+      );
       this.clickOutsideHandler = null;
     }
   }
@@ -251,7 +259,7 @@ export class NodeTagSuggestPopover {
     }
 
     this.popover = this.createPopover();
-    document.body.appendChild(this.popover);
+    activeDocument.body.appendChild(this.popover);
 
     const popoverRect = this.popover.getBoundingClientRect();
     const viewportWidth = window.innerWidth;