ENG-1138 Migrate canvas shape node type to discourse-node (#894)

* Refactor Discourse Node Handling and Introduce Node Type ID

- Replaced the use of createNodeShapeUtils with DiscourseNodeUtil across components to streamline discourse node management.
- Introduced DISCOURSE_NODE_SHAPE_TYPE constant for consistent node type identification.
- Updated various components to utilize nodeTypeId for better clarity and functionality in shape creation and manipulation.
- Enhanced migration logic to accommodate new node type structure, ensuring backward compatibility and improved data integrity.

This refactor improves the maintainability and readability of the codebase while ensuring that new features can be integrated more seamlessly.

* Fix clipboard discourse node shape typing

* Fix missed discourse node type checks

* Keep legacy node shape utils for cloud sync

* Refactor Discourse Relation Shape Utilities

- Introduced utility functions to determine relation and bindable discourse node shape types for improved clarity in shape handling.
- Updated migration logic to clarify assumptions regarding node and relation type IDs.
- Added a TODO comment to rename the migration file for better organization as it serves both relation and node shapes.

* Enhance Clipboard Component with TypeId for Discourse Nodes

- Introduced a new type definition, ClipboardDiscourseNode, to include typeId for better structure and clarity.
- Updated state management in ClipboardPageSection to utilize the new type, improving type safety and consistency.
- Adjusted logic to map and retrieve typeId from discourse nodes, ensuring accurate handling of node types throughout the component.

* .

Author: mdroidian

apps/roam/src/components/Export.tsx

@@ -62,7 +62,8 @@ import {
 } from "@tldraw/editor";
 import calcCanvasNodeSizeAndImg from "~/utils/calcCanvasNodeSizeAndImg";
 import {
-  createNodeShapeUtils,
+  DiscourseNodeUtil,
+  DISCOURSE_NODE_SHAPE_TYPE,
   DiscourseNodeShape,
 } from "~/components/canvas/DiscourseNodeUtil";
 import { discourseContext, MAX_WIDTH } from "~/components/canvas/Tldraw";
@@ -362,7 +363,7 @@ const ExportDialog: ExportDialogComponent = ({
       );
 
       // UTILS
-      const discourseNodeUtils = createNodeShapeUtils(allNodes);
+      const discourseNodeUtils = [DiscourseNodeUtil];
       const discourseRelationUtils =
         createAllRelationShapeUtils(allRelationIds);
       const referencedNodeUtils = createAllReferencedNodeUtils(
@@ -552,12 +553,13 @@ const ExportDialog: ExportDialogComponent = ({
         index: currentIndex,
         rotation: 0,
         isLocked: false,
-        type: nodeType,
+        type: DISCOURSE_NODE_SHAPE_TYPE,
         props: {
           w,
           h,
           uid: r.uid,
           title: String(r[firstColumnKey]),
+          nodeTypeId: nodeType,
           imageUrl,
           size: "s",
           fontFamily: "sans",

apps/roam/src/components/canvas/CanvasDrawer.tsx

@@ -18,7 +18,11 @@ import { Editor, useEditor, TLShapeId } from "tldraw";
 import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageUid";
 import getCurrentPageUid from "roamjs-components/dom/getCurrentPageUid";
 import getDiscourseNodes from "~/utils/getDiscourseNodes";
-import { DiscourseNodeShape } from "./DiscourseNodeUtil";
+import {
+  DISCOURSE_NODE_SHAPE_TYPE,
+  DiscourseNodeShape,
+  getDiscourseNodeTypeId,
+} from "./DiscourseNodeUtil";
 import { formatHexColor } from "~/components/settings/DiscourseNodeCanvasSettings";
 import posthog from "posthog-js";
 
@@ -56,14 +60,15 @@ export const CanvasDrawerContent = ({
     const entries: NodeGroup[] = Object.entries(groupedShapes).map(
       ([uid, shapes]) => {
         const primaryShape = shapes[0];
+        const nodeTypeId = getDiscourseNodeTypeId({ shape: primaryShape });
         const typeLabel =
-          discourseNodes.find((n) => n.type === primaryShape.type)?.text ||
-          primaryShape.type ||
+          discourseNodes.find((n) => n.type === nodeTypeId)?.text ||
+          nodeTypeId ||
           "Unknown";
         return {
           uid,
           title: primaryShape.props.title,
-          type: primaryShape.type,
+          type: nodeTypeId,
           typeLabel,
           shapes,
           isDuplicate: shapes.length > 1,
@@ -400,10 +405,20 @@ export const CanvasDrawerPanel = () => {
   useEffect(() => {
     const updateGroupedShapes = () => {
       const allRecords = editor.store.allRecords();
+      const nodeTypeSet = new Set(getDiscourseNodes().map((node) => node.type));
       const shapes = allRecords.filter((record) => {
         if (record.typeName !== "shape") return false;
         const shape = record as DiscourseNodeShape;
-        return !!shape.props?.uid;
+        if (
+          record.type !== DISCOURSE_NODE_SHAPE_TYPE &&
+          !nodeTypeSet.has(record.type)
+        ) {
+          return false;
+        }
+        return (
+          !!shape.props?.uid &&
+          nodeTypeSet.has(getDiscourseNodeTypeId({ shape }))
+        );
       }) as DiscourseNodeShape[];
 
       const grouped = shapes.reduce((acc: GroupedShapes, shape) => {

apps/roam/src/components/canvas/Clipboard.tsx

@@ -40,6 +40,7 @@ import {
   TLDefaultSizeStyle,
   TLDefaultFontStyle,
   FONT_FAMILIES,
+  TLShapePartial,
 } from "tldraw";
 import { useAtom } from "@tldraw/state-react";
 import AutocompleteInput from "roamjs-components/components/AutocompleteInput";
@@ -49,7 +50,9 @@ import getAllReferencesOnPage from "~/utils/getAllReferencesOnPage";
 import {
   DiscourseNodeShape,
   DEFAULT_STYLE_PROPS,
+  DISCOURSE_NODE_SHAPE_TYPE,
   FONT_SIZES,
+  getDiscourseNodeTypeId,
 } from "./DiscourseNodeUtil";
 import { openBlockInSidebar, createBlock } from "roamjs-components/writes";
 import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageUid";
@@ -391,10 +394,18 @@ type NodeGroup = {
   uid: string;
   text: string;
   type: string;
+  typeId: string;
   shapes: DiscourseNodeShape[];
   isDuplicate: boolean;
 };
 
+type ClipboardDiscourseNode = {
+  uid: string;
+  text: string;
+  type: string;
+  typeId: string;
+};
+
 type DragState =
   | {
       name: "idle";
@@ -437,7 +448,7 @@ const ClipboardPageSection = ({
 }) => {
   const [isOpen, setIsOpen] = useState(true);
   const [discourseNodes, setDiscourseNodes] = useState<
-    Array<{ uid: string; text: string; type: string }>
+    ClipboardDiscourseNode[]
   >([]);
   const [isLoading, setIsLoading] = useState(false);
   const [openSections, setOpenSections] = useState<Record<string, boolean>>({});
@@ -469,6 +480,7 @@ const ClipboardPageSection = ({
               uid: refPage.uid,
               text: refPage.text,
               type: discourseNode.text,
+              typeId: discourseNode.type,
             },
           ];
         });
@@ -531,10 +543,18 @@ const ClipboardPageSection = ({
   const shapesByUid = useMemo(() => {
     void storeVersion;
     const groupedShapes = new Map<string, DiscourseNodeShape[]>();
+    const nodeTypeIds = new Set(discourseNodes.map((node) => node.typeId));
     const allRecords = editor.store.allRecords();
     allRecords.forEach((record) => {
       if (record.typeName !== "shape") return;
+      if (
+        record.type !== DISCOURSE_NODE_SHAPE_TYPE &&
+        !nodeTypeIds.has(record.type)
+      ) {
+        return;
+      }
       const shape = record as DiscourseNodeShape;
+      if (!nodeTypeIds.has(getDiscourseNodeTypeId({ shape }))) return;
       const uid = shape.props?.uid;
       if (!uid) return;
       const currentShapes = groupedShapes.get(uid);
@@ -545,7 +565,7 @@ const ClipboardPageSection = ({
       }
     });
     return groupedShapes;
-  }, [editor.store, storeVersion]);
+  }, [discourseNodes, editor.store, storeVersion]);
 
   const groupedNodes = useMemo(() => {
     const groups: NodeGroup[] = discourseNodes.map((node) => {
@@ -554,6 +574,7 @@ const ClipboardPageSection = ({
         uid: node.uid,
         text: node.text,
         type: node.type,
+        typeId: node.typeId,
         shapes,
         isDuplicate: shapes.length > 1,
       };
@@ -670,10 +691,20 @@ const ClipboardPageSection = ({
     async (node: { uid: string; text: string }, pagePoint: Vec) => {
       if (!extensionAPI) return;
       if (!showNodesOnCanvas) {
+        const nodeTypeIds = new Set(discourseNodes.map((node) => node.typeId));
         const nodeExistsOnCanvas = editor.store.allRecords().some((record) => {
           if (record.typeName !== "shape") return false;
+          if (
+            record.type !== DISCOURSE_NODE_SHAPE_TYPE &&
+            !nodeTypeIds.has(record.type)
+          ) {
+            return false;
+          }
           const shape = record as DiscourseNodeShape;
-          return shape.props?.uid === node.uid;
+          return (
+            nodeTypeIds.has(getDiscourseNodeTypeId({ shape })) &&
+            shape.props?.uid === node.uid
+          );
         });
         if (nodeExistsOnCanvas) return;
       }
@@ -697,9 +728,9 @@ const ClipboardPageSection = ({
       });
 
       const shapeId = createShapeId();
-      const shape = {
+      const shape: TLShapePartial<DiscourseNodeShape> = {
         id: shapeId,
-        type: nodeType.type,
+        type: DISCOURSE_NODE_SHAPE_TYPE,
         x: pagePoint.x - w / 2,
         y: pagePoint.y - h / 2,
         props: {
@@ -710,11 +741,12 @@ const ClipboardPageSection = ({
           imageUrl,
           size: "s" as TLDefaultSizeStyle,
           fontFamily: "sans" as TLDefaultFontStyle,
+          nodeTypeId: nodeType.type,
         },
       };
       editor.createShape<DiscourseNodeShape>(shape);
     },
-    [editor, extensionAPI, showNodesOnCanvas],
+    [discourseNodes, editor, extensionAPI, showNodesOnCanvas],
   );
 
   // Drag and drop handlers