useYooptaEditor

​

Overview

​

Usage

import { useYooptaEditor } from '@yoopta/editor';

function MyComponent() {
  const editor = useYooptaEditor();

  const handleAddBlock = () => {
    editor.insertBlock({
      type: 'Paragraph',
      focus: true,
    });
  };

  return (
    <button onClick={handleAddBlock}>
      Add Paragraph
    </button>
  );
}

​

Signature

function useYooptaEditor(): YooEditor

​

Returns

​

Editor API

​

Block Operations

• insertBlock - Insert a new block
• updateBlock - Update block properties
• deleteBlock - Remove a block
• duplicateBlock - Duplicate an existing block
• toggleBlock - Change block type while preserving content
• moveBlock - Move a block to a different position
• focusBlock - Focus a specific block
• mergeBlock - Merge blocks together
• splitBlock - Split a block into two
• increaseBlockDepth - Increase nesting level
• decreaseBlockDepth - Decrease nesting level
• getBlock - Get block data by ID or path

​

Element Operations

• insertElement - Insert element within a block
• updateElement - Update element properties
• deleteElement - Remove an element
• getElement - Get element by path
• getElements - Get all elements in a block
• getElementEntry - Get element with its path
• getElementPath - Get path to an element
• isElementEmpty - Check if element is empty

​

Content & State

• children - Current editor content as YooptaContentValue
• getEditorValue() - Get current editor content
• setEditorValue(value) - Set editor content
• isEmpty() - Check if editor is empty
• readOnly - Read-only state

​

Parsers

• getHTML(content) - Export to HTML
• getMarkdown(content) - Export to Markdown
• getPlainText(content) - Export to plain text
• getEmail(content, options) - Export for email templates

​

Events

• on(event, callback) - Listen to editor events
• once(event, callback) - Listen to event once
• off(event, callback) - Remove event listener
• emit(event, payload) - Emit custom event

​

History

• undo() - Undo last change
• redo() - Redo last undone change
• batchOperations(fn) - Batch multiple operations

​

Focus

• isFocused() - Check if editor is focused
• focus() - Focus the editor
• blur(options) - Blur the editor

​

Examples

​

Programmatically Insert Content

function InsertImageButton() {
  const editor = useYooptaEditor();

  const handleClick = () => {
    editor.insertBlock({
      type: 'Image',
      props: {
        src: 'https://example.com/image.jpg',
        alt: 'Example image',
      },
    });
  };

  return <button onClick={handleClick}>Insert Image</button>;
}

​

Export Content

function ExportButton() {
  const editor = useYooptaEditor();

  const handleExport = () => {
    const html = editor.getHTML(editor.children);
    const markdown = editor.getMarkdown(editor.children);
    
    console.log('HTML:', html);
    console.log('Markdown:', markdown);
  };

  return <button onClick={handleExport}>Export</button>;
}

​

Listen to Changes

function ChangeListener() {
  const editor = useYooptaEditor();

  useEffect(() => {
    const handleChange = (payload) => {
      console.log('Content changed:', payload.value);
      console.log('Operations:', payload.operations);
    };

    editor.on('change', handleChange);
    return () => editor.off('change', handleChange);
  }, [editor]);

  return null;
}

​

Error Handling

// ❌ Error: useYooptaEditor must be used within a YooptaEditorContext
function ComponentOutsideContext() {
  const editor = useYooptaEditor(); // throws error
}

​

See Also

• useBlockData - Get specific block data
• useYooptaFocused - Check editor focus state
• useBlockSelected - Check if block is selected