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>
This commit is contained in:
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user