ENG-1281: Port discourse node block panel

[sid597]

https://www.loom.com/share/e4b407f50f4f47c49919a263c55ef729

---

Summary by CodeRabbit

• Refactor
  • Enhanced template settings configuration with improved synchronization mechanism ensuring more reliable updates and consistent data persistence across the system.
  • Modernized discourse node settings interface with refined configuration management capabilities for improved user control and settings management.
  • Updated settings structure and data handling architecture to provide enhanced real-time synchronization and better overall template configuration workflow performance.

[linear]

ENG-1281 Port Discourse Node block panel

[supabase]

This pull request has been ignored for the connected project zytfjzqyijgagqxrzbmz because there are no changes detected in packages/database/supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[sid597]

• ENG-1281: Port discourse node block panel #784 : 2 dependent PRs (#793 , #795 ) 👈 (View in Graphite)
• ENG-1290: Port discourse node config panel #769
• ENG-1291: Port discourse node specification #765
• ENG-1280: Port Discourse node: Query builder and editor component for block props #764
• ENG-1225: Discourse node migration simple settings #696 : 1 other dependent PR (#697 )
• ENG-1273: Migrate small personal settings #691
• ENG-1272 Migrate all small global settings components #688 : 1 other dependent PR (#690 )
• ENG-1345: Modify existing RoamJS component onChange to also change props #745 : 1 other dependent PR (#684 )
• ENG-1190 Replace existing roam-js components with blockProp based ones #689
• ENG-1188: prod: pull watchers for prop based settings #682
• ENG-1187: Prod: Implement get and set for block prop based settings #669
• ENG-1189: Prod: Init block prop based schema #666
• ENG-1330: zod schema for discourse relations #719
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[sid597]

@coderabbitai full review

[coderabbitai]

✅ Actions performed

Full review triggered.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR introduces a new DualWriteBlocksPanel component for managing template settings in discourse node configurations. It replaces the existing BlocksPanel component usage across multiple settings files, removes the template field from SuggestiveRulesSchema, and exports the DiscourseNodeBaseProps type for broader use. The new component includes debounced change handling and Roam pull-watch integration for syncing block-based template data.

Changes

Cohort / File(s)	Summary
Template Panel Replacement apps/roam/src/components/settings/DiscourseNodeSuggestiveRules.tsx, apps/roam/src/components/settings/NodeConfig.tsx	Replaced BlocksPanel with DualWriteBlocksPanel in template settings, changing props from order, parentUid, defaultValue to nodeType, settingKeys, and uid.
New DualWriteBlocksPanel Component apps/roam/src/components/settings/components/EphemeralBlocksPanel.tsx	Introduces new DualWriteBlocksPanel React component with debounced change handling, tree serialization, and Roam pull-watch integration for syncing block-based template configurations.
Type Exports apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx	Exported DiscourseNodeBaseProps type to make it available for use in other modules.
Schema Updates apps/roam/src/components/settings/utils/zodSchema.ts, apps/roam/src/components/settings/utils/zodSchema.example.ts	Removed template field from SuggestiveRulesSchema and example configuration object, simplifying the schema structure.

Sequence Diagram

sequenceDiagram
    participant React Component as DualWriteBlocksPanel
    participant Roam API as Roam DB/API
    participant Debounce Handler as Debounced Handler
    participant Settings Store as Settings Store

    React Component->>Roam API: useEffect: addPullWatch(uid)
    Note over React Component: Mount and listen for changes
    
    React Component->>Roam API: Ensure block exists at uid
    Note over React Component: Create blank block if needed
    
    Roam API->>React Component: Block modified by user
    Note over React Component: Pull-watch detects change
    
    React Component->>Debounce Handler: Trigger debounced handleChange
    Note over Debounce Handler: Wait for debounce delay
    
    Debounce Handler->>Roam API: Read full block tree by uid
    Roam API-->>Debounce Handler: Return block tree
    
    Debounce Handler->>Debounce Handler: serializeBlockTree(tree)
    Note over Debounce Handler: Convert to RoamNodeType[]
    
    Debounce Handler->>Settings Store: setDiscourseNodeSetting(nodeType, settingKey, serialized)
    Settings Store-->>Debounce Handler: Persist changes
    
    React Component->>React Component: Unmount
    React Component->>Roam API: removePullWatch() + cleanup debounce
    Note over React Component: Cleanup lifecycle

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• ENG-1105: zod schema for all the settings #664: Directly inverse relationship—this PR removes the template field from SuggestiveRulesSchema that was introduced in the prior PR.
• ENG-1190 Replace existing roam-js components with blockProp based ones #689: Modifies the same BlockPropSettingPanels.tsx infrastructure and block-prop-based panel components being used here.
• ENG-1345: Modify existing RoamJS component onChange to also change props #745: Extends the panel infrastructure with additional props and block-sync logic that builds on the settings panel pattern introduced in this PR.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: porting a discourse node block panel component, which aligns with the primary modifications across multiple settings files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into eng-1290-port-discourse-node-config-panelsv0

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[mdroidian]

[devin-ai-integration]

Devin Review found 1 new potential issue.

View 16 additional findings in Devin Review.

[devin-ai-integration]

🟡 PullWatch pattern omits :block/heading and :block/open, so changes to those attributes never trigger a sync

The DualWriteBlocksPanel registers a Roam pull watch with pattern [:block/string :block/order {:block/children ...}] (EphemeralBlocksPanel.tsx:56), but the serializeBlockTree function at EphemeralBlocksPanel.tsx:18-28 reads and serializes child.heading and child.open into the output.

Root cause and impact

The pull watch pattern determines which Datomic attribute changes trigger the callback. Since :block/heading and :block/open are absent from the pattern, changing a block's heading level (e.g. normal → H1) or toggling its open/collapsed state will not fire the callback, so setDiscourseNodeSetting is never called for those edits.

However, serializeBlockTree does include these fields:

...(child.heading && { heading: child.heading as 0 | 1 | 2 | 3 }),
...(child.open === false && { open: false }),

This means heading/open changes made in isolation are silently dropped from the block-props settings store. They would only be picked up incidentally if the user also edits text or reorders blocks in the same session. The fix is to add :block/heading and :block/open to the pull pattern:

[:block/string :block/order :block/heading :block/open {:block/children ...}]

Suggested change

	const pattern = "[:block/string :block/order {:block/children ...}]";
	const pattern = "[:block/string :block/order :block/heading :block/open {:block/children ...}]";

---

Was this helpful? React with 👍 or 👎 to provide feedback.

[mdroidian]

A few comments and minor changes.

Specifically, why is the zodSchema being removed for templates?

[mdroidian]

why is this being removed? is it being replaced with something?

[sid597]

We don't have to store the template structure explicitly for suggestiveRulesSchema because

• firstly suggestive mode shows the template not to edit it but to let the user copy a block uid from the template
• and even if the user edits it we should be doing it in one place because there is no use for a different version of template, we use the canonical template from the nodes