createYooptaEditor

Overview

createYooptaEditor is the factory function that creates a new Yoopta Editor instance. It initializes the editor with plugins, text formatting marks, and optional initial content.

Function Signature

function createYooptaEditor(opts: CreateYooptaEditorOptions): YooEditor

Parameters

opts

CreateYooptaEditorOptions

required

Configuration object for creating the editor

Show properties

plugins

readonly YooptaPlugin[]

required

Array of block plugins to enable in the editor. Each plugin represents a block type (paragraph, heading, image, etc.).

import { Paragraph, HeadingOne, Bold } from '@yoopta/editor';

const plugins = [Paragraph, HeadingOne, /* ... */];

marks

YooptaMark[]

Array of text formatting marks (bold, italic, underline, etc.). Optional.

import { Bold, Italic, Underline } from '@yoopta/marks';

const marks = [Bold, Italic, Underline];

value

YooptaContentValue

Initial content for the editor. Must be a valid Yoopta content value object where keys are block IDs and values are block data.

type YooptaContentValue = Record<string, YooptaBlockData>

string

Custom editor instance ID. If not provided, a unique ID will be generated automatically.

readOnly

boolean

default:"false"

Whether the editor should be read-only. When true, users cannot edit content.

Return Value

editor

YooEditor

A fully initialized YooEditor instance with all methods and properties available. See Editor Methods for the complete API.

Usage Examples

Basic Setup

import { useMemo } from 'react';
import { createYooptaEditor } from '@yoopta/editor';
import Paragraph from '@yoopta/paragraph';
import HeadingOne from '@yoopta/headings/HeadingOne';
import { Bold, Italic } from '@yoopta/marks';

function MyEditor() {
  const editor = useMemo(() => createYooptaEditor({
    plugins: [Paragraph, HeadingOne],
    marks: [Bold, Italic],
  }), []);
  
  return <YooptaEditor editor={editor} />;
}

With Initial Content

const initialContent = {
  'block-1': {
    id: 'block-1',
    type: 'Paragraph',
    value: [
      {
        id: 'element-1',
        type: 'paragraph',
        children: [{ text: 'Hello world!' }],
        props: { nodeType: 'block' }
      }
    ],
    meta: { order: 0, depth: 0 }
  }
};

const editor = createYooptaEditor({
  plugins: [Paragraph],
  value: initialContent,
});

With All Available Plugins

import { createYooptaEditor } from '@yoopta/editor';
import Paragraph from '@yoopta/paragraph';
import { HeadingOne, HeadingTwo, HeadingThree } from '@yoopta/headings';
import Blockquote from '@yoopta/blockquote';
import Code from '@yoopta/code';
import { BulletedList, NumberedList } from '@yoopta/lists';
import Image from '@yoopta/image';
import Video from '@yoopta/video';
import Link from '@yoopta/link';
import { Bold, Italic, Underline, Strike, Highlight } from '@yoopta/marks';

const PLUGINS = [
  Paragraph,
  HeadingOne,
  HeadingTwo,
  HeadingThree,
  Blockquote,
  Code,
  BulletedList,
  NumberedList,
  Image,
  Video,
  Link,
];

const MARKS = [Bold, Italic, Underline, Strike, Highlight];

const editor = createYooptaEditor({
  plugins: PLUGINS,
  marks: MARKS,
});

Read-Only Mode

const editor = createYooptaEditor({
  plugins: [Paragraph, HeadingOne],
  value: existingContent,
  readOnly: true, // Prevents editing
});

Custom Editor ID

const editor = createYooptaEditor({
  id: 'my-custom-editor-id',
  plugins: [Paragraph],
});

console.log(editor.id); // 'my-custom-editor-id'

Type Definitions