[ENG-1125] Add Convert to Node Type button on canvas block shapes (#867)

* [ENG-1125] Add "Convert to Node Type" button on canvas block shapes

When a blck-node shape contains a discourse node tag (e.g. #claim),
show a convert button that opens ModifyNodeDialog to formalize the
block into a proper discourse node shape.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* address PR comments

* use pattern from nodetag for regex instead

* format

* follow node tag pattern

* Update apps/roam/src/components/canvas/DiscourseNodeUtil.tsx

Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com>

* address PR comment

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com>

Author: 3 people

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

@@ -29,6 +29,8 @@ import { Button, Icon } from "@blueprintjs/core";
 import { DiscourseNode } from "~/utils/getDiscourseNodes";
 import { isPageUid } from "./Tldraw";
 import { renderModifyNodeDialog } from "~/components/ModifyNodeDialog";
+import getTextByBlockUid from "roamjs-components/queries/getTextByBlockUid";
+import { getCleanTagText } from "~/components/settings/NodeConfig";
 import { discourseContext } from "./Tldraw";
 import getDiscourseContextResults from "~/utils/getDiscourseContextResults";
 import calcCanvasNodeSizeAndImg from "~/utils/calcCanvasNodeSizeAndImg";
@@ -44,6 +46,8 @@ import DiscourseContextOverlay from "~/components/DiscourseContextOverlay";
 import { getDiscourseNodeColors } from "~/utils/getDiscourseNodeColors";
 import { render as renderToast } from "roamjs-components/components/Toast";
 
+const escapeRegExp = (s: string) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
 // TODO REPLACE WITH TLDRAW DEFAULTS
 // https://github.com/tldraw/tldraw/pull/1580/files
 const TEXT_PROPS = {
@@ -448,6 +452,33 @@ export class BaseDiscourseNodeUtil extends BaseBoxShapeUtil<DiscourseNodeShape>
     const [overlayMounted, setOverlayMounted] = useState(false);
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const dialogRenderedRef = useRef(false);
+
+    // Detect discourse node tags in block text for blck-node shapes
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const matchedNodeForConversion = useMemo(() => {
+      if (shape.type !== "blck-node") return null;
+      if (!isLiveBlock(shape.props.uid)) return null;
+      const blockText = getTextByBlockUid(shape.props.uid);
+      if (!blockText) return null;
+      const nodes = Object.values(discourseContext.nodes);
+      const tagPattern = /#(?:\[\[([^\]]*)\]\]|([^\s#[\]]+))/g;
+      for (const node of nodes) {
+        const tag = node.tag;
+        if (!tag) continue;
+        const normalizedNodeTag = getCleanTagText(tag);
+        let match;
+        tagPattern.lastIndex = 0;
+        while ((match = tagPattern.exec(blockText)) !== null) {
+          const tagFromBlock = match[1] ?? match[2] ?? "";
+          const normalizedBlockTag = getCleanTagText(tagFromBlock);
+          if (normalizedBlockTag === normalizedNodeTag) {
+            return { node, blockText };
+          }
+        }
+      }
+      return null;
+    }, [shape.type, shape.props.uid]);
+
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
       if (
@@ -589,6 +620,93 @@ export class BaseDiscourseNodeUtil extends BaseBoxShapeUtil<DiscourseNodeShape>
             title="Open in sidebar (Shift+Click)"
           />
 
+          {/* Convert to Node Type Button */}
+          {matchedNodeForConversion && (
+            <Button
+              className="absolute left-7 top-1 z-10"
+              minimal
+              small
+              icon={
+                <Icon icon="plus" color={textColor} className="opacity-50" />
+              }
+              onClick={(e) => {
+                e.stopPropagation();
+                const { node, blockText } = matchedNodeForConversion;
+                const tag = node.tag;
+                if (!tag) return;
+                const cleanTag = getCleanTagText(tag);
+                const escapedCleanTag = escapeRegExp(cleanTag);
+                // Strip the tag from block text (same pattern as detection above)
+                const cleanedText = blockText
+                  .replace(
+                    new RegExp(`#\\[\\[${escapedCleanTag}\\]\\]`, "i"),
+                    "",
+                  )
+                  .replace(new RegExp(`#${escapedCleanTag}`, "i"), "")
+                  .trim();
+                const { x, y } = shape;
+                renderModifyNodeDialog({
+                  mode: "create",
+                  nodeType: node.type,
+                  initialValue: { text: cleanedText, uid: "" },
+                  extensionAPI,
+                  includeDefaultNodes: true,
+                  onSuccess: async ({ text, uid }) => {
+                    if (!extensionAPI) return;
+                    try {
+                      const {
+                        h,
+                        w,
+                        imageUrl: nodeImageUrl,
+                      } = await calcCanvasNodeSizeAndImg({
+                        nodeText: text,
+                        extensionAPI,
+                        nodeType: node.type,
+                        uid,
+                      });
+                      editor.createShapes([
+                        {
+                          type: node.type,
+                          id: createShapeId(),
+                          props: {
+                            uid,
+                            title: text,
+                            h,
+                            w,
+                            imageUrl: nodeImageUrl,
+                            fontFamily: "sans",
+                            size: "s",
+                          },
+                          x,
+                          y,
+                        },
+                      ]);
+                      editor.deleteShapes([shape.id]);
+                    } catch (error) {
+                      renderToast({
+                        id: `discourse-node-convert-error-${Date.now()}`,
+                        intent: "danger",
+                        content: (
+                          <span>Error converting block: {String(error)}</span>
+                        ),
+                      });
+                    }
+                  },
+                  onClose: () => {},
+                });
+              }}
+              onPointerDown={(e) => e.stopPropagation()}
+              title={`Convert to ${matchedNodeForConversion.node.text}`}
+            >
+              <span
+                className="opacity-70"
+                style={{ color: textColor, fontSize: "11px" }}
+              >
+                Convert to {matchedNodeForConversion.node.text}
+              </span>
+            </Button>
+          )}
+
           {shape.props.imageUrl && isKeyImage === "true" ? (
             <div className="mt-2 flex min-h-0 w-full flex-1 items-center justify-center overflow-hidden">
               <img