ENG-1716: Bug fix: Template does not render from block props

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

@@ -1,15 +1,20 @@
-import React, { useRef, useEffect, useCallback } from "react";
+import React, { useRef, useEffect, useCallback, useState } from "react";
 import { Label } from "@blueprintjs/core";
 import Description from "roamjs-components/components/Description";
 import createBlock from "roamjs-components/writes/createBlock";
+import deleteBlock from "roamjs-components/writes/deleteBlock";
 import getFullTreeByParentUid from "roamjs-components/queries/getFullTreeByParentUid";
 import getFirstChildUidByBlockUid from "roamjs-components/queries/getFirstChildUidByBlockUid";
 import type { InputTextNode, TreeNode } from "roamjs-components/types";
 import type { RoamNodeType } from "~/components/settings/utils/zodSchema";
-import { setDiscourseNodeSetting } from "~/components/settings/utils/accessors";
+import {
+  isNewSettingsStoreEnabled,
+  setDiscourseNodeSetting,
+} from "~/components/settings/utils/accessors";
 import type { DiscourseNodeBaseProps } from "./BlockPropSettingPanels";
 
 const DEBOUNCE_MS = 250;
+const TEMPLATE_BUFFER_TEXT = "Template-Block-props";
 
 type DualWriteBlocksPanelProps = DiscourseNodeBaseProps & {
   uid: string;
@@ -44,21 +49,46 @@ const DualWriteBlocksPanel = ({
     [string, string, (before: unknown, after: unknown) => void] | null
   >(null);
 
+  const useNewStore = isNewSettingsStoreEnabled();
+  const [bufferUid, setBufferUid] = useState<string | null>(null);
+  const renderUid = useNewStore ? bufferUid : uid;
+
+  useEffect(() => {
+    if (!useNewStore || !nodeType) return;
+    let cancelled = false;
+    const newUid = window.roamAlphaAPI.util.generateUID();
+    const dv = defaultValueRef.current;
+    const seed: InputTextNode[] = dv && dv.length > 0 ? dv : [{ text: " " }];
+    void createBlock({
+      node: { text: TEMPLATE_BUFFER_TEXT, uid: newUid, children: seed },
+      parentUid: nodeType,
+      order: "last",
+    }).then(() => {
+      if (!cancelled) setBufferUid(newUid);
+    });
+    return () => {
+      cancelled = true;
+      setBufferUid(null);
+      void deleteBlock(newUid);
+    };
+  }, [useNewStore, nodeType]);
+
   const handleChange = useCallback(() => {
+    if (!renderUid) return;
     window.clearTimeout(debounceRef.current);
     debounceRef.current = window.setTimeout(() => {
-      const tree = getFullTreeByParentUid(uid);
+      const tree = getFullTreeByParentUid(renderUid);
       const serialized = serializeBlockTree(tree.children);
       setDiscourseNodeSetting(nodeType, settingKeys, serialized);
     }, DEBOUNCE_MS);
-  }, [uid, nodeType, settingKeys]);
+  }, [renderUid, nodeType, settingKeys]);
 
   useEffect(() => {
     const el = containerRef.current;
-    if (!el || !uid) return;
+    if (!el || !renderUid) return;
 
     const pattern = "[:block/string :block/order {:block/children ...}]";
-    const entityId = `[:block/uid "${uid}"]`;
+    const entityId = `[:block/uid "${renderUid}"]`;
     const callback = () => handleChange();
 
     const registerPullWatch = () => {
@@ -67,20 +97,23 @@ const DualWriteBlocksPanel = ({
     };
 
     const dv = defaultValueRef.current;
-    const ensureChildren = getFirstChildUidByBlockUid(uid)
+    const ensureChildren = getFirstChildUidByBlockUid(renderUid)
       ? Promise.resolve()
       : (dv && dv.length > 0
           ? Promise.all(
               dv.map((node, i) =>
-                createBlock({ node, parentUid: uid, order: i }),
+                createBlock({ node, parentUid: renderUid, order: i }),
               ),
             )
-          : createBlock({ node: { text: " " }, parentUid: uid })
+          : createBlock({ node: { text: " " }, parentUid: renderUid })
         ).then(() => {});
 
     void ensureChildren.then(() => {
       el.innerHTML = "";
-      void window.roamAlphaAPI.ui.components.renderBlock({ uid, el });
+      void window.roamAlphaAPI.ui.components.renderBlock({
+        uid: renderUid,
+        el,
+      });
       registerPullWatch();
     });
 
@@ -91,7 +124,7 @@ const DualWriteBlocksPanel = ({
         pullWatchArgsRef.current = null;
       }
     };
-  }, [uid, handleChange]);
+  }, [renderUid, handleChange]);
 
   return (
     <>