Darginec05 / Yoopta-Editor

Build Notion-like, Craft-like, Coda-like, Medium-like editors with Yoopta
https://yoopta.dev/
MIT License
784 stars 61 forks source link

Add new API method Elements.updateText() to change text programmatically #193

Closed Darginec05 closed 1 week ago

Darginec05 commented 1 week ago

Discussed in https://github.com/Darginec05/Yoopta-Editor/discussions/191

Originally posted by **atorres868** June 26, 2024 Hi! I'm using version 4.6.0, I have tried to update the text of an element using the editor.updateBlock function, the "change" event tells me through the console that the change has been made, but the editor interface does not reflect the same , I share the code I'm using. ```typescript const editor = useMemo(() => createYooptaEditor(), []) const updateBlock = useCallback((text: string, focusBlockId: string) => { const block = editor.children[focusBlockId] if (block) { editor.updateBlock(focusBlockId, { type: 'Paragraph', value: [ { ...block.value[0], type: 'paragraph', props: { nodeType: 'block' }, children: [{ text }], }, ], }) } }, [editor] ) const newTextForBlock = 'Testing....' const currentBlock = findPluginBlockBySelectionPath(editor, { at: editor.selection, }) const focusBlockId = currentBlock.id updateBlock(newTextForBlock, focusBlockId) ``` This text should be replaced with "Testing...." ![image](https://github.com/Darginec05/Yoopta-Editor/assets/45054828/971def1f-e649-4a89-bf6b-a94a0278dfd3) This is what the change event shows me: ![Untitled](https://github.com/Darginec05/Yoopta-Editor/assets/45054828/cd179618-25fb-4fa0-8d93-7b0d7dac2254)