ENG-1281: Port discourse node block panel

Author: sid597

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

@@ -1,6 +1,6 @@
 import React, { useState, useMemo, useEffect, useRef } from "react";
 import { Button, Intent } from "@blueprintjs/core";
-import BlocksPanel from "roamjs-components/components/ConfigPanels/BlocksPanel";
+import DualWriteBlocksPanel from "./components/EphemeralBlocksPanel";
 import getSubTree from "roamjs-components/util/getSubTree";
 import { DiscourseNode } from "~/utils/getDiscourseNodes";
 import extractRef from "roamjs-components/util/extractRef";
@@ -82,13 +82,12 @@ const DiscourseNodeSuggestiveRules = ({
 
   return (
     <div className="flex flex-col gap-4 p-4">
-      <BlocksPanel
+      <DualWriteBlocksPanel
+        nodeType={node.type}
         title="Template"
         description={`The template that auto fills ${node.text} page when generated.`}
-        order={0}
-        parentUid={nodeUid}
+        settingKeys={["template"]}
         uid={templateUid}
-        defaultValue={node.template}
       />
 
       <DiscourseNodeTextPanel

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

@@ -7,7 +7,7 @@ import React, {
 } from "react";
 import { DiscourseNode } from "~/utils/getDiscourseNodes";
 import SelectPanel from "roamjs-components/components/ConfigPanels/SelectPanel";
-import BlocksPanel from "roamjs-components/components/ConfigPanels/BlocksPanel";
+import DualWriteBlocksPanel from "./components/EphemeralBlocksPanel";
 import { getSubTree } from "roamjs-components/util";
 import Description from "roamjs-components/components/Description";
 import { Label, Tabs, Tab, TabId, InputGroup } from "@blueprintjs/core";
@@ -342,13 +342,12 @@ const NodeConfig = ({
           title="Template"
           panel={
             <div className="flex flex-col gap-4 p-1">
-              <BlocksPanel
+              <DualWriteBlocksPanel
+                nodeType={node.type}
                 title="Template"
                 description={`The template that auto fills ${node.text} page when generated.`}
-                order={0}
-                parentUid={node.type}
+                settingKeys={["template"]}
                 uid={templateUid}
-                defaultValue={node.template}
               />
             </div>
           }

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

@@ -582,7 +582,7 @@ const createDiscourseNodeSetter =
   (keys: string[], value: json): void =>
     setDiscourseNodeSetting(nodeType, keys, value);
 
-type DiscourseNodeBaseProps = {
+export type DiscourseNodeBaseProps = {
   nodeType: string;
   title: string;
   description: string;

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

@@ -0,0 +1,107 @@
+import React, { useRef, useEffect, useCallback } from "react";
+import { Label } from "@blueprintjs/core";
+import Description from "roamjs-components/components/Description";
+import createBlock from "roamjs-components/writes/createBlock";
+import getFullTreeByParentUid from "roamjs-components/queries/getFullTreeByParentUid";
+import getFirstChildUidByBlockUid from "roamjs-components/queries/getFirstChildUidByBlockUid";
+import type { TreeNode } from "roamjs-components/types";
+import type { RoamNodeType } from "../utils/zodSchema";
+import { setDiscourseNodeSetting } from "../utils/accessors";
+import type { DiscourseNodeBaseProps } from "./BlockPropSettingPanels";
+
+const DEBOUNCE_MS = 250;
+
+type DualWriteBlocksPanelProps = DiscourseNodeBaseProps & {
+  uid: string;
+};
+
+const serializeBlockTree = (children: TreeNode[]): RoamNodeType[] =>
+  children
+    .sort((a, b) => a.order - b.order)
+    .map((child) => ({
+      text: child.text,
+      ...(child.children.length > 0 && {
+        children: serializeBlockTree(child.children),
+      }),
+    }));
+
+const DualWriteBlocksPanel = ({
+  nodeType,
+  settingKeys,
+  title,
+  description,
+  uid,
+}: DualWriteBlocksPanelProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const debounceRef = useRef(0);
+  const pullWatchArgsRef = useRef<
+    [string, string, (before: unknown, after: unknown) => void] | null
+  >(null);
+
+  const handleChange = useCallback(() => {
+    window.clearTimeout(debounceRef.current);
+    debounceRef.current = window.setTimeout(() => {
+      const tree = getFullTreeByParentUid(uid);
+      const serialized = serializeBlockTree(tree.children);
+      setDiscourseNodeSetting(nodeType, settingKeys, serialized);
+    }, DEBOUNCE_MS);
+  }, [uid, nodeType, settingKeys]);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    if (!getFirstChildUidByBlockUid(uid)) {
+      void createBlock({ node: { text: " " }, parentUid: uid }).then(() => {
+        el.innerHTML = "";
+        void window.roamAlphaAPI.ui.components.renderBlock({ uid, el });
+      });
+    } else {
+      el.innerHTML = "";
+      void window.roamAlphaAPI.ui.components.renderBlock({ uid, el });
+    }
+
+    const pattern = "[:block/string {:block/children ...}]";
+    const entityId = `[:block/uid "${uid}"]`;
+    const callback = () => handleChange();
+    pullWatchArgsRef.current = [pattern, entityId, callback];
+    window.roamAlphaAPI.data.addPullWatch(pattern, entityId, callback);
+
+    return () => {
+      window.clearTimeout(debounceRef.current);
+      if (pullWatchArgsRef.current) {
+        window.roamAlphaAPI.data.removePullWatch(...pullWatchArgsRef.current);
+        pullWatchArgsRef.current = null;
+      }
+    };
+  }, [uid, handleChange]);
+
+  return (
+    <>
+      <Label>
+        {title}
+        <Description description={description} />
+      </Label>
+      <style>{`.roamjs-dualwrite-blocks > div > .rm-block-main {
+    display: none;
+  }
+  .roamjs-dualwrite-blocks > div > .rm-block-children > .rm-multibar {
+    display: none;
+  }
+  .roamjs-dualwrite-blocks > div > .rm-block-children {
+    margin-left: -4px;
+  }`}</style>
+      <div
+        ref={containerRef}
+        style={{
+          border: "1px solid #33333333",
+          padding: "8px 0",
+          borderRadius: 4,
+        }}
+        className="roamjs-dualwrite-blocks"
+      />
+    </>
+  );
+};
+
+export default DualWriteBlocksPanel;

apps/roam/src/components/settings/utils/zodSchema.example.ts

@@ -30,10 +30,6 @@ const canvasSettings: CanvasSettings = {
 };
 
 const suggestiveRules: SuggestiveRules = {
-  template: [
-    { text: "Summary::", heading: 2 },
-    { text: "Key Points::", heading: 2, children: [{ text: "" }] },
-  ],
   embeddingRef: "((block-uid-123))",
   isFirstChild: true,
 };

apps/roam/src/components/settings/utils/zodSchema.ts

@@ -77,7 +77,6 @@ export const RoamNodeSchema: z.ZodType<RoamNode> = z.lazy(() =>
 );
 
 export const SuggestiveRulesSchema = z.object({
-  template: z.array(RoamNodeSchema).default([]),
   embeddingRef: z.string().default(""),
   isFirstChild: z.boolean().default(false),
 });