From 2aed148dc2a6de1914facae9fef65935b3d77ef5 Mon Sep 17 00:00:00 2001
From: Antigravity <antigravity@gemini.ai>
Date: Sat, 23 May 2026 10:16:15 +0000
Subject: [PATCH] fix(chart): simplify node insertion using commands API

Use editor.commands.insertContent with JSON node definition instead of
direct transaction manipulation. This is more reliable for custom nodes.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 memento-note/components/rich-text-editor.tsx | 46 +++++++-------------
 1 file changed, 16 insertions(+), 30 deletions(-)

diff --git a/memento-note/components/rich-text-editor.tsx b/memento-note/components/rich-text-editor.tsx
index 67163ee..28733a1 100644
--- a/memento-note/components/rich-text-editor.tsx
+++ b/memento-note/components/rich-text-editor.tsx
@@ -297,37 +297,23 @@ export const RichTextEditor = forwardRef<RichTextEditorHandle, RichTextEditorPro
       try {
         console.log('[handleSelectChart] Inserting chart type:', chartContent.split('\n')[0])
 
-        const { from } = editor.state.selection
-        const { tr } = editor.state
-        const { schema } = editor.state
+        // Use TipTap's insertContent with proper JSON content
+        // This is the most reliable way to insert custom nodes
+        editor.commands.insertContent([
+          {
+            type: 'chartBlock',
+            attrs: {
+              code: chartContent,
+              language: 'chart'
+            }
+          },
+          {
+            type: 'paragraph',
+            content: []
+          }
+        ])
 
-        // Create the chartBlock node directly
-        const chartNode = schema.nodes.chartBlock.create({
-          code: chartContent,
-          language: 'chart'
-        })
-
-        if (!chartNode) {
-          console.error('[handleSelectChart] Failed to create chartBlock node')
-          toast.error('Chart extension not available')
-          return
-        }
-
-        // Insert the chart node at current position
-        const transaction = tr.insert(from, chartNode)
-
-        // Get the position after the inserted chart
-        const insertPos = transaction.mapping.map(from)
-        const chartSize = chartNode.nodeSize
-
-        // Add a paragraph after for continued typing
-        const paragraph = schema.nodes.paragraph.create()
-        transaction.insert(insertPos + chartSize, paragraph)
-
-        editor.view.dispatch(transaction)
-        editor.chain().focus().run()
-
-        console.log('[handleSelectChart] Chart inserted successfully')
+        console.log('[handleSelectChart] Chart inserted')
       } catch (error) {
         console.error('[handleSelectChart] Failed:', error)
         toast.error('Failed to insert chart: ' + (error as Error).message)