Roam: [Eng-621] show node tag options in inline node creation menu (#298)

* real time validation

* use on blur validation, add tag to config page, settings, extract with other data

* conditionally show node tag

* use live validation, don't save conflicting state to roam

* press down key to trigger

* coderabbit review

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* update block text

* node tage to node conversion

* Revert "node tage to node conversion"

This reverts commit 3cdac68.

* address review

* --amend

* fix arrow movement while shift, default menu selection or not

* merge conflicts prev, address review

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: sid597

apps/roam/src/components/DiscourseNodeMenu.tsx

@@ -32,18 +32,29 @@ type Props = {
   textarea: HTMLTextAreaElement;
   extensionAPI: OnloadArgs["extensionAPI"];
   trigger?: JSX.Element;
+  isShift?: boolean;
 };
 
 const NodeMenu = ({
   onClose,
   textarea,
   extensionAPI,
   trigger,
+  isShift,
 }: { onClose: () => void } & Props) => {
-  const discourseNodes = useMemo(
+  const isInitialTextSelected =
+    textarea.selectionStart !== textarea.selectionEnd;
+
+  const [showNodeTypes, setShowNodeTypes] = useState(
+    isInitialTextSelected || (isShift ?? false),
+  );
+  const userDiscourseNodes = useMemo(
     () => getDiscourseNodes().filter((n) => n.backedBy === "user"),
     [],
   );
+  const discourseNodes = userDiscourseNodes.filter(
+    (n) => showNodeTypes || n.tag,
+  );
   const indexBySC = useMemo(
     () => Object.fromEntries(discourseNodes.map((mi, i) => [mi.shortcut, i])),
     [discourseNodes],
@@ -55,52 +66,80 @@ const NodeMenu = ({
   const [isOpen, setIsOpen] = useState(!trigger);
 
   const onSelect = useCallback(
-    (index) => {
+    (index: number) => {
       const menuItem =
         menuRef.current?.children[index].querySelector(".bp3-menu-item");
       if (!menuItem) return;
-      const nodeUid = menuItem.getAttribute("data-node") || "";
-      const highlighted = textarea.value.substring(
-        textarea.selectionStart,
-        textarea.selectionEnd,
-      );
-      setTimeout(async () => {
-        const pageName = await getNewDiscourseNodeText({
-          text: highlighted,
-          nodeType: nodeUid,
-          blockUid,
-        });
 
-        if (!pageName) {
-          return;
-        }
-
-        const currentBlockText = getTextByBlockUid(blockUid);
-        const newText = `${currentBlockText.substring(
-          0,
+      if (showNodeTypes) {
+        const nodeUid = menuItem.getAttribute("data-node") || "";
+        const highlighted = textarea.value.substring(
           textarea.selectionStart,
-        )}[[${pageName}]]${currentBlockText.substring(textarea.selectionEnd)}`;
+          textarea.selectionEnd,
+        );
+        setTimeout(async () => {
+          const pageName = await getNewDiscourseNodeText({
+            text: highlighted,
+            nodeType: nodeUid,
+            blockUid,
+          });
 
-        updateBlock({ text: newText, uid: blockUid });
-        posthog.capture("Discourse Node: Created via Node Menu", {
-          nodeType: nodeUid,
-          text: pageName,
+          if (!pageName) {
+            return;
+          }
+
+          const currentBlockText = getTextByBlockUid(blockUid);
+          const newText = `${currentBlockText.substring(
+            0,
+            textarea.selectionStart,
+          )}[[${pageName}]]${currentBlockText.substring(textarea.selectionEnd)}`;
+
+          updateBlock({ text: newText, uid: blockUid });
+          posthog.capture("Discourse Node: Created via Node Menu", {
+            nodeType: nodeUid,
+            text: pageName,
+          });
+
+          createDiscourseNode({
+            text: pageName,
+            configPageUid: nodeUid,
+            extensionAPI,
+          });
         });
+      } else {
+        const tag = menuItem.getAttribute("data-tag") || "";
+        if (!tag) return;
+
+        setTimeout(() => {
+          const currentText = textarea.value;
+          const cursorPos = textarea.selectionStart;
+          const textToInsert = `#${tag} `;
+
+          const newText = `${currentText.substring(
+            0,
+            cursorPos,
+          )}${textToInsert}${currentText.substring(cursorPos)}`;
 
-        createDiscourseNode({
-          text: pageName,
-          configPageUid: nodeUid,
-          extensionAPI,
+          updateBlock({ text: newText, uid: blockUid });
+          posthog.capture("Discourse Tag: Created via Node Menu", {
+            tag,
+          });
         });
-      });
+      }
       onClose();
     },
-    [menuRef, blockUid, onClose, textarea, extensionAPI],
+    [menuRef, blockUid, onClose, textarea, extensionAPI, showNodeTypes],
   );
 
   const keydownListener = useCallback(
     (e: KeyboardEvent) => {
-      if (!isOpen || e.metaKey || e.ctrlKey || e.shiftKey) return;
+      if (!isOpen || e.metaKey || e.ctrlKey) return;
+      if (e.key === "Shift") {
+        if (!isInitialTextSelected) {
+          setShowNodeTypes(true);
+        }
+        return;
+      }
 
       if (e.key === "ArrowDown") {
         const index = Number(
@@ -134,26 +173,46 @@ const NodeMenu = ({
       e.stopPropagation();
       e.preventDefault();
     },
-    [onSelect, onClose, indexBySC, isOpen],
+    [onSelect, onClose, indexBySC, isOpen, isInitialTextSelected],
+  );
+
+  const keyupListener = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "Shift" && !isInitialTextSelected) {
+        setShowNodeTypes(false);
+      }
+    },
+    [isInitialTextSelected],
   );
+
   useEffect(() => {
     const eventTarget = trigger ? document : textarea;
     const keydownHandler = (e: Event) => {
       keydownListener(e as KeyboardEvent);
     };
+
     eventTarget.addEventListener("keydown", keydownHandler);
+    eventTarget.addEventListener("keyup", keyupListener as EventListener);
 
     if (!trigger) {
       textarea.addEventListener("input", onClose);
     }
 
     return () => {
       eventTarget.removeEventListener("keydown", keydownHandler);
+      eventTarget.removeEventListener("keyup", keyupListener as EventListener);
       if (!trigger) {
         textarea.removeEventListener("input", onClose);
       }
     };
-  }, [keydownListener, onClose, textarea, trigger]);
+  }, [
+    keydownListener,
+    keyupListener,
+    onClose,
+    textarea,
+    trigger,
+    isInitialTextSelected,
+  ]);
 
   const handlePopoverInteraction = useCallback(
     (nextOpenState: boolean) => {
@@ -190,10 +249,14 @@ const NodeMenu = ({
               <MenuItem
                 key={item.text}
                 data-node={item.type}
-                text={item.text}
+                data-tag={item.tag}
+                text={
+                  showNodeTypes ? item.text : item.tag ? `#${item.tag}` : ""
+                }
                 active={i === activeIndex}
                 onMouseEnter={() => setActiveIndex(i)}
                 onClick={() => onSelect(i)}
+                disabled={!showNodeTypes && !item.tag}
                 className="flex items-center"
                 icon={
                   <div
@@ -275,6 +338,7 @@ export const TextSelectionNodeMenu = ({
       extensionAPI={extensionAPI}
       trigger={trigger}
       onClose={onClose}
+      isShift
     />
   );
 };

apps/roam/src/utils/getDiscourseNodes.ts

@@ -33,6 +33,7 @@ const DEFAULT_NODES: DiscourseNode[] = [
     text: "Page",
     type: "page-node",
     shortcut: "p",
+    tag: "",
     format: "{content}",
     specification: [
       {
@@ -50,6 +51,7 @@ const DEFAULT_NODES: DiscourseNode[] = [
     text: "Block",
     type: "blck-node",
     shortcut: "b",
+    tag: "",
     format: "{content}",
     specification: [
       {
@@ -112,6 +114,7 @@ const getDiscourseNodes = (relations = getDiscourseRelations()) => {
           text: r.label,
           type: r.id,
           shortcut: r.label.slice(0, 1),
+          tag: "",
           specification: r.triples.map(([source, relation, target]) => ({
             type: "clause",
             source: /anchor/i.test(source) ? r.label : source,

apps/roam/src/utils/initializeObserversAndListeners.ts

@@ -167,10 +167,12 @@ export const initObservers = async ({
       target.tagName === "TEXTAREA" &&
       target.classList.contains("rm-block-input")
     ) {
+      const textarea = target as HTMLTextAreaElement;
       removeTextSelectionPopup();
       renderDiscourseNodeMenu({
-        textarea: target as HTMLTextAreaElement,
+        textarea,
         extensionAPI: onloadArgs.extensionAPI,
+        isShift: evt.shiftKey,
       });
       evt.preventDefault();
       evt.stopPropagation();