Overview The YooEditor instance returned by createYooptaEditor() provides a comprehensive API for manipulating editor content, managing blocks and elements, handling focus, parsing content, and managing history.
Block Methods Methods for block-level operations (creating, updating, deleting blocks).
insertBlock Insert a new block into the editor.
editor . insertBlock ( type : string , options ?: InsertBlockOptions ): string
Block type to insert (matches plugin type, e.g., “Paragraph”, “HeadingOne”).
Position to insert block at. Defaults to editor.path.current.
Whether to focus the new block after insertion.
Partial block data to merge with defaults.
Custom element structure created with editor.y(). Overrides default block structure.
The ID of the newly inserted block.
Example: // Insert paragraph at current position const blockId = editor . insertBlock ( 'Paragraph' ); // Insert and focus editor . insertBlock ( 'HeadingOne' , { focus: true }); // Insert at specific position editor . insertBlock ( 'Paragraph' , { at: 0 }); // Insert with custom structure editor . insertBlock ( 'Accordion' , { elements: editor . y ( 'accordion-list' , { children: [ editor . y ( 'accordion-list-item' , { props: { isExpanded: false }, children: [ editor . y ( 'accordion-list-item-heading' ), editor . y ( 'accordion-list-item-content' ) ] }) ] }) });
updateBlock Update an existing block’s metadata or value.
editor . updateBlock ( blockId : string , newData : Omit < Partial < YooptaBlockData > , 'id' | 'type' > ): void
ID of the block to update.
Partial block data to merge. Can include meta or value properties.
Example: // Update block alignment editor . updateBlock ( 'block-123' , { meta: { align: 'center' } }); // Update block depth (nesting) editor . updateBlock ( 'block-123' , { meta: { depth: 1 } }); // Update block value (Slate elements) editor . updateBlock ( 'block-123' , { value: [ newSlateElement ] });
deleteBlock Delete a block from the editor.
editor . deleteBlock ( options ?: DeleteBlockOptions ): void
Position of block to delete. Defaults to current block.
ID of block to delete (alternative to at).
Whether to focus another block after deletion.
focusTarget
'previous' | 'next' | 'none'
default: "'previous'"
Which block to focus after deletion.
Example: // Delete current block editor . deleteBlock (); // Delete specific block by ID editor . deleteBlock ({ blockId: 'block-123' }); // Delete and focus next block editor . deleteBlock ({ focusTarget: 'next' }); // Delete without focusing editor . deleteBlock ({ focus: false });
duplicateBlock Duplicate an existing block.
editor . duplicateBlock ( blockId : string , options ?: { focus? : boolean }): string
ID of block to duplicate.
Example: const newBlockId = editor . duplicateBlock ( 'block-123' );
toggleBlock Change a block’s type while preserving its content.
editor . toggleBlock ( blockId : string , newType : string ): void
New block type to convert to.
Example: // Convert paragraph to heading editor . toggleBlock ( 'block-123' , 'HeadingOne' ); // Convert heading back to paragraph editor . toggleBlock ( 'block-123' , 'Paragraph' );
moveBlock Move a block to a new position.
editor . moveBlock ( blockId : string , newPath : number ): void
New order position for the block.
Example: // Move block to position 0 (top) editor . moveBlock ( 'block-123' , 0 ); // Move block to position 5 editor . moveBlock ( 'block-123' , 5 );
focusBlock Focus a specific block.
editor . focusBlock ( blockId : string , options ?: FocusBlockOptions ): void
Specific Slate path or point to focus within the block.
Whether to delay focus execution.
Delay in milliseconds before focusing.
Example: // Focus block at start editor . focusBlock ( 'block-123' ); // Focus at specific path editor . focusBlock ( 'block-123' , { focusAt: [ 0 , 0 ] });
splitBlock Split the current block at cursor position.
editor . splitBlock ( options ?: SplitBlockOptions ): string | undefined
ID of the newly created block, or undefined if split failed.
Example: const newBlockId = editor . splitBlock ();
mergeBlock Merge current block with adjacent block.
editor . mergeBlock ( blockId : string ): void
increaseBlockDepth Increase nesting level of a block.
editor . increaseBlockDepth ( blockId : string ): void
Example: // Indent block editor . increaseBlockDepth ( 'block-123' );
decreaseBlockDepth Decrease nesting level of a block.
editor . decreaseBlockDepth ( blockId : string ): void
Example: // Outdent block editor . decreaseBlockDepth ( 'block-123' );
getBlock Retrieve a block by ID or path.
editor . getBlock ( options : GetBlockOptions ): YooptaBlockData | null
Block path (order) to retrieve.
Example: // Get by ID const block = editor . getBlock ({ id: 'block-123' }); // Get by position const block = editor . getBlock ({ at: 0 });
Element Methods Methods for element-level operations within blocks.
insertElement Insert an element into a block.
editor . insertElement ( options : InsertElementOptions ): void
options
InsertElementOptions
required
ID of block to insert element into.
Element type to insert (must be defined in plugin).
at
'next' | 'prev' | 'start' | 'end' | number[]
Where to insert element.
Whether to focus after insertion.
Example: // Insert accordion item editor . insertElement ({ blockId: 'accordion-1' , type: 'accordion-list-item' , props: { isExpanded: true }, at: 'next' , focus: true });
updateElement Update element properties.
editor . updateElement ( options : UpdateElementOptions ): void
options
UpdateElementOptions
required
ID of block containing element.
Specific path to element.
Text content (for inline elements).
Example: // Update accordion item expansion state editor . updateElement ({ blockId: 'accordion-1' , type: 'accordion-list-item' , path: [ 0 , 1 ], props: { isExpanded: false } }); // Update link URL and text editor . updateElement ({ blockId: 'paragraph-1' , type: 'link' , props: { url: 'https://example.com' }, text: 'Example Link' });
deleteElement Delete an element from a block.
editor . deleteElement ( options : DeleteElementOptions ): void
getElement Get an element from a block.
editor . getElement ( options : GetElementOptions ): SlateElement | null
getElements Get all elements of a type from a block.
editor . getElements ( options : GetElementsOptions ): SlateElement []
getElementEntry Get element with its path.
editor . getElementEntry ( options : GetElementEntryOptions ): [ SlateElement , Path ] | null
getElementPath Get path to an element.
editor . getElementPath ( options : GetElementPathOptions ): Path | null
isElementEmpty Check if element has no content.
editor . isElementEmpty ( options : IsElementEmptyOptions ): boolean
Element Builder (editor.y) Create element structures programmatically.
editor.y() Create a block-level element.
editor . y ( type : string , options ?: ElementStructureOptions ): SlateElement
Example: const element = editor . y ( 'paragraph' , { props: { align: 'center' }, children: [ editor . y . text ( 'Hello world' , { bold: true }) ] });
editor.y.text() Create a text node with formatting.
editor . y . text ( text : string , marks ?: TextNodeOptions ): SlateElementTextNode
Example: const textNode = editor . y . text ( 'Bold and italic' , { bold: true , italic: true });
editor.y.inline() Create an inline element (like link or mention).
editor . y . inline ( type : string , options ?: ElementStructureOptions ): SlateElement
Example: const link = editor . y . inline ( 'link' , { props: { url: 'https://example.com' }, children: [ editor . y . text ( 'Click here' )] });
Content Methods getEditorValue Get current editor content.
editor . getEditorValue (): YooptaContentValue
Example: const content = editor . getEditorValue (); console . log ( Object . keys ( content ). length ); // Number of blocks
setEditorValue Set editor content.
editor . setEditorValue ( value : YooptaContentValue ): void
Example: editor . setEditorValue ( newContent );
isEmpty Check if editor is empty.
editor . isEmpty (): boolean
Example: if ( editor . isEmpty ()) { console . log ( 'No content yet' ); }
Parser Methods Export editor content to different formats.
getHTML Convert content to HTML.
editor . getHTML ( content : YooptaContentValue ): string
Example: const html = editor . getHTML ( editor . children );
getMarkdown Convert content to Markdown.
editor . getMarkdown ( content : YooptaContentValue ): string
Example: const markdown = editor . getMarkdown ( editor . children );
getPlainText Convert content to plain text.
editor . getPlainText ( content : YooptaContentValue ): string
Example: const text = editor . getPlainText ( editor . children );
getEmail Convert content to email-compatible HTML.
editor . getEmail ( content : YooptaContentValue , options ?: Partial < EmailTemplateOptions > ): string
Example: const emailHtml = editor . getEmail ( editor . children , { title: 'Newsletter' , styles: { width: '600px' } });
Focus Methods isFocused Check if editor has focus.
editor . isFocused (): boolean
focus Focus the editor.
blur Remove focus from editor.
editor . blur ( options ?: EditorBlurOptions ): void
Event Methods Subscribe to editor events.
editor . on < K extends keyof YooptaEventsMap > ( event : K , handler : ( payload : YooptaEventsMap [ K ]) => void ): void
Example: editor . on ( 'change' , ({ value , operations }) => { console . log ( 'Content changed:' , operations ); }); editor . on ( 'focus' , ( isFocused ) => { console . log ( 'Focus changed:' , isFocused ); });
once Subscribe to event once.
editor . once ( event , handler ): void
off Unsubscribe from event.
editor . off ( event , handler ): void
Example: const handler = () => console . log ( 'Changed' ); editor . on ( 'change' , handler ); // Later: unsubscribe editor . off ( 'change' , handler );
emit Emit custom event.
editor . emit ( event , payload ): void
History Methods undo Undo last change.
editor . undo ( options ?: UndoRedoOptions ): void
redo Redo last undone change.
editor . redo ( options ?: UndoRedoOptions ): void
batchOperations Batch multiple operations into single history entry.
editor . batchOperations ( fn : () => void ): void
Example: editor . batchOperations (() => { editor . insertBlock ( 'Paragraph' ); editor . insertBlock ( 'HeadingOne' ); editor . insertBlock ( 'Paragraph' ); // All three inserts = one undo step });
History Control Methods editor . isSavingHistory (): boolean editor . isMergingHistory (): boolean editor . withoutSavingHistory ( fn : () => void ): void editor . withSavingHistory ( fn : () => void ): void editor . withoutMergingHistory ( fn : () => void ): void editor . withMergingHistory ( fn : () => void ): void
Example: // Perform operations without saving to history editor . withoutSavingHistory (() => { editor . updateBlock ( 'block-1' , { meta: { align: 'center' } }); });
Properties editor.id Unique editor instance ID.
editor.children editor . children : YooptaContentValue
Current editor content (all blocks).
editor.path Current block path and selection state.
editor.plugins editor . plugins : Record < string , Plugin >
Registered plugins map.
editor.marks editor . marks : YooptaMark []
Registered text formatting marks.
editor.readOnly Whether editor is in read-only mode.
See Also