Roam: ENG-622: Node tag to node conversions

apps/roam/src/components/CreateNodeDialog.tsx

@@ -0,0 +1,177 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Dialog, Classes, InputGroup, Label, Button } from "@blueprintjs/core";
+import renderOverlay from "roamjs-components/util/renderOverlay";
+import createDiscourseNode from "~/utils/createDiscourseNode";
+import { OnloadArgs } from "roamjs-components/types";
+import updateBlock from "roamjs-components/writes/updateBlock";
+import { render as renderToast } from "roamjs-components/components/Toast";
+import getDiscourseNodes, {
+  DiscourseNode,
+  excludeDefaultNodes,
+} from "~/utils/getDiscourseNodes";
+import { getNewDiscourseNodeText } from "~/utils/formatUtils";
+import MenuItemSelect from "roamjs-components/components/MenuItemSelect";
+
+export type CreateNodeDialogProps = {
+  onClose: () => void;
+  defaultNodeTypeUid: string;
+  extensionAPI: OnloadArgs["extensionAPI"];
+  sourceBlockUid?: string;
+  initialTitle: string;
+};
+
+const CreateNodeDialog = ({
+  onClose,
+  defaultNodeTypeUid,
+  extensionAPI,
+  sourceBlockUid,
+  initialTitle,
+}: CreateNodeDialogProps) => {
+  const discourseNodes = getDiscourseNodes().filter(excludeDefaultNodes);
+  const defaultNodeType =
+    discourseNodes.find((n) => n.type === defaultNodeTypeUid) ||
+    discourseNodes[0];
+
+  const [title, setTitle] = useState(initialTitle);
+  const [selectedType, setSelectedType] =
+    useState<DiscourseNode>(defaultNodeType);
+  const [loading, setLoading] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+
+  const onCreate = async () => {
+    if (!title.trim()) return;
+    setLoading(true);
+
+    const formattedTitle = await getNewDiscourseNodeText({
+      text: title.trim(),
+      nodeType: selectedType.type,
+      blockUid: sourceBlockUid,
+    });
+
+    if (!formattedTitle) {
+      setLoading(false);
+      return;
+    }
+
+    const newPageUid = await createDiscourseNode({
+      text: formattedTitle,
+      configPageUid: selectedType.type,
+      extensionAPI,
+    });
+
+    if (sourceBlockUid) {
+      // TODO: This assumes the new node is always a page. If the specification
+      // defines it as a block (e.g., "is in page with title"), this will not create
+      // the correct reference. The reference format should be determined by the
+      // node's specification.
+      const pageRef = `[[${formattedTitle}]]`;
+      await updateBlock({ uid: sourceBlockUid, text: pageRef });
+
+      const newCursorPosition = pageRef.length;
+      const windowId =
+        window.roamAlphaAPI.ui.getFocusedBlock?.()?.["window-id"] || "main";
+
+      await window.roamAlphaAPI.ui.setBlockFocusAndSelection({
+        location: { "block-uid": sourceBlockUid, "window-id": windowId },
+        selection: { start: newCursorPosition },
+      });
+    }
+
+    renderToast({
+      id: `discourse-node-created-${Date.now()}`,
+      intent: "success",
+      timeout: 10000,
+      content: (
+        <span>
+          Created node{" "}
+          <a
+            className="cursor-pointer font-medium text-blue-500 hover:underline"
+            onClick={async (event) => {
+              if (event.shiftKey) {
+                await window.roamAlphaAPI.ui.rightSidebar.addWindow({
+                  window: {
+                    "block-uid": newPageUid,
+                    type: "outline",
+                  },
+                });
+              } else {
+                await window.roamAlphaAPI.ui.mainWindow.openPage({
+                  page: { uid: newPageUid },
+                });
+              }
+            }}
+          >
+            [[{formattedTitle}]]
+          </a>
+        </span>
+      ),
+    });
+    setLoading(false);
+    onClose();
+  };
+
+  return (
+    <Dialog
+      isOpen={true}
+      onClose={onClose}
+      title="Create Discourse Node"
+      autoFocus={false}
+    >
+      <div className={Classes.DIALOG_BODY}>
+        <div className="flex flex-col gap-4">
+          <div>
+            <label className="mb-1 block font-bold">Title</label>
+            <InputGroup
+              placeholder={`This is a potential ${selectedType.text.toLowerCase()}`}
+              value={title}
+              onChange={(e) => setTitle(e.currentTarget.value)}
+              inputRef={inputRef}
+            />
+          </div>
+
+          <Label>
+            Type
+            <MenuItemSelect
+              items={discourseNodes.map((n) => n.type)}
+              transformItem={(t) =>
+                discourseNodes.find((n) => n.type === t)?.text || t
+              }
+              activeItem={selectedType.type}
+              onItemSelect={(t) => {
+                const nt = discourseNodes.find((n) => n.type === t);
+                if (nt) setSelectedType(nt);
+              }}
+            />
+          </Label>
+        </div>
+      </div>
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button minimal onClick={onClose} disabled={loading}>
+            Cancel
+          </Button>
+          <Button
+            intent="primary"
+            onClick={onCreate}
+            disabled={!title.trim() || loading}
+            loading={loading}
+          >
+            Create
+          </Button>
+        </div>
+      </div>
+    </Dialog>
+  );
+};
+
+export const renderCreateNodeDialog = (props: CreateNodeDialogProps) =>
+  renderOverlay({
+    Overlay: CreateNodeDialog,
+    props,
+  });

apps/roam/src/components/settings/NodeConfig.tsx

@@ -33,7 +33,7 @@ const ValidatedInputPanel = ({
   error: string;
   placeholder?: string;
 }) => (
-  <>
+  <div className="flex flex-col">
     <Label>
       {label}
       <Description description={description} />
@@ -47,7 +47,7 @@ const ValidatedInputPanel = ({
     {error && (
       <div className="mt-1 text-sm font-medium text-red-600">{error}</div>
     )}
-  </>
+  </div>
 );
 
 const useDebouncedRoamUpdater = (
@@ -229,7 +229,7 @@ const NodeConfig = ({
                 onChange={handleTagChange}
                 onBlur={handleTagBlur}
                 error={tagError}
-                placeholder={`#${node.text}`}
+                placeholder={`${node.text}`}
               />
             </div>
           }

apps/roam/src/utils/initializeObserversAndListeners.ts

@@ -40,6 +40,7 @@ import {
   removeTextSelectionPopup,
   findBlockElementFromSelection,
 } from "~/utils/renderTextSelectionPopup";
+import { renderNodeTagPopupButton } from "./renderNodeTagPopup";
 
 const debounce = (fn: () => void, delay = 250) => {
   let timeout: number;
@@ -93,6 +94,14 @@ export const initObservers = async ({
     render: (b) => renderQueryBlock(b, onloadArgs),
   });
 
+  const nodeTagPopupButtonObserver = createHTMLObserver({
+    className: "rm-page-ref--tag",
+    tag: "SPAN",
+    callback: (s: HTMLSpanElement) => {
+      renderNodeTagPopupButton(s, onloadArgs.extensionAPI);
+    },
+  });
+
   const pageActionListener = ((
     e: CustomEvent<{
       action: string;
@@ -300,6 +309,7 @@ export const initObservers = async ({
       configPageObserver,
       linkedReferencesObserver,
       graphOverviewExportObserver,
+      nodeTagPopupButtonObserver,
     ].filter((o): o is MutationObserver => !!o),
     listeners: {
       pageActionListener,

apps/roam/src/utils/renderNodeTagPopup.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { Button, Popover, Position } from "@blueprintjs/core";
+import { renderCreateNodeDialog } from "~/components/CreateNodeDialog";
+import { OnloadArgs } from "roamjs-components/types";
+import getUids from "roamjs-components/dom/getUids";
+import getTextByBlockUid from "roamjs-components/queries/getTextByBlockUid";
+import getDiscourseNodes from "./getDiscourseNodes";
+
+export const renderNodeTagPopupButton = (
+  parent: HTMLSpanElement,
+  extensionAPI: OnloadArgs["extensionAPI"],
+) => {
+  if (parent.dataset.attributeButtonRendered === "true") return;
+
+  parent.dataset.attributeButtonRendered = "true";
+  const wrapper = document.createElement("span");
+  wrapper.style.position = "relative";
+  wrapper.style.display = "inline-block";
+  parent.parentNode?.insertBefore(wrapper, parent);
+  wrapper.appendChild(parent);
+
+  const reactRoot = document.createElement("span");
+  reactRoot.style.position = "absolute";
+  reactRoot.style.top = "0";
+  reactRoot.style.left = "0";
+  reactRoot.style.width = "100%";
+  reactRoot.style.height = "100%";
+  reactRoot.style.pointerEvents = "auto";
+  reactRoot.style.zIndex = "10";
+
+  wrapper.appendChild(reactRoot);
+
+  const textContent = parent.textContent?.trim() || "";
+  const tagAttr = parent.getAttribute("data-tag") || textContent;
+  const tag = tagAttr.replace(/^#/, "").toLowerCase();
+  const discourseNodes = getDiscourseNodes();
+  const discourseTagSet = new Set(
+    discourseNodes.map((n) => n.tag?.toLowerCase()).filter(Boolean),
+  );
+  if (!discourseTagSet.has(tag)) return;
+
+  const matchedNode = discourseNodes.find((n) => n.tag?.toLowerCase() === tag);
+
+  if (!matchedNode) return;
+
+  const blockInputElement = parent.closest(".rm-block__input");
+  const blockUid = blockInputElement
+    ? getUids(blockInputElement as HTMLDivElement).blockUid
+    : undefined;
+
+  const rawBlockText = blockUid ? getTextByBlockUid(blockUid) : "";
+  const cleanedBlockText = rawBlockText.replace(textContent, "").trim();
+
+  ReactDOM.render(
+    <Popover
+      content={
+        <Button
+          minimal
+          outlined
+          onClick={() => {
+            renderCreateNodeDialog({
+              onClose: () => {},
+              defaultNodeTypeUid: matchedNode.type,
+              extensionAPI,
+              sourceBlockUid: blockUid,
+              initialTitle: cleanedBlockText,
+            });
+          }}
+          text={`Create ${matchedNode.text}`}
+        />
+      }
+      target={
+        <span
+          style={{
+            display: "block",
+            width: "100%",
+            height: "100%",
+          }}
+        />
+      }
+      interactionKind="hover"
+      position={Position.TOP}
+      modifiers={{
+        offset: {
+          offset: "0, 10",
+        },
+        arrow: {
+          enabled: false,
+        },
+      }}
+    />,
+    reactRoot,
+  );
+};