Yoopta-Editor - open source WYSWIG editor

Editor

Akhmed Ibragimov

Product Hunt Launch

Yoopta v4

YCombinator

Yoodocs is gangsta style documentation app

Yoopta

Meetup

yoopta

yoo-logo

Welcome to Yoopta-Editor 🚀Yoopta-Editor is a free, open-source rich-text editor built for React apps (yeap, we have plans to make it framework-agnostic!). It’s packed with features that let you build an editor as powerful and user-friendly as Notion, Craft, Coda, Medium etc.
        
        
        MotivationAs a frontend developer, I've tried various WYSIWYG editors, some of them very well-known. I was looking for the best solution for my basic needs:General solved UX problems.Support for media plugins (at least images!!).The ability to easily override the logic and behavior of plugins.The ability to customize the rendering of components in plugins.
For example, it became a real pain to integrate the  component from Next.js.API for programmatically manipulating content.A user-friendly API for creating at least moderately complex plugins.
...and so on.So, these were my basic requirements. 
And do you know what my search for such an editor led to? Hair loss on my head. 
I simply couldn't find an editor that even covered basic UX issues. It was all in vain. In fact, I realized that many modern rich-text editors are actually not rich — they are still low-level, despite being written on top of other low-level libraries. This is why I started developing my own editor Yoopta. My goal is to spare developers from tears and pain. Yoopta will not only provide a high-level ready-to-use editor but will also allow you to extend and customize everything! 
        
        ConceptsLet's discuss the key concepts of the editor. Yoopta is built on top of the low-level editor SlateJS. However, instead of the typical approach offered by Slate, I have developed this editor differently. Yoopta Editor uses a block list approach where each block has its own instance of Slate.PluginsPlugin is a configuration object that sets the type and defines the elements that will be displayed within it. Within the plugin, basic settings are also established, including shortcuts, display options, custom event handlers, commands API, Slate extensitons and rules for serializing and deserializing content into various formats.BlocksBlock is an entity created from a plugin if the nodeType of the root element is defined as block or void. Blocks are equipped with a special API for convenient data handling and content manipulation. Each block contains a separate instance of Slate, which stores its state. Blocks are represented as data in editor.children, where each block is saved with information about its state and associated meta data.ElementsElement is an entity that determines what will be rendered within the block. The structure of an element and its children are determined when creating plugins. Each element can have custom props that expand its functional capabilities. Elements also have their own API for more convenient manipulation and interaction.MarksMarks are stylistic text formatters that can be applied to text nodes to alter their appearance or behavior. Each mark is applied across a range of text and can include styles such as bold, italic, underline, code among others. ToolsTools are just helpers for more convenient work with the editor.List of packagesThus, Yoopta provides the following list of packages:Core packages@yoopta/editor - the main core package@yoopta/starter-kit - starter-kit with full setup for quick start@yoopta/exports - package for exports/imports content in different formats@yoopta/renderer - package for just render without edit tools [in progress]Plugins@yoopta/paragraph - [default plugin]@yoopta/headings@yoopta/blockquote@yoopta/accordion@yoopta/code@yoopta/embed@yoopta/image@yoopta/link@yoopta/file@yoopta/callout@yoopta/video@yoopta/lists@yoopta/table @yoopta/divider @yoopta/mention - [in progress]@yoopta/grid - [in progress]@yoopta/charts - [in progress]@yoopta/emoji - [in progress]Vote for plugins Marks@yoopta/marks - text formats. It supports the next marksBold, Italic, Highlight, Code, Strike, UnderlineTools@yoopta/action-menu-list  @yoopta/toolbar  @yoopta/link-tool  FeaturesEasy setupDefault list of powerful pluginsMany typical solved problems in UX behaviour.Media plugins on steroids with optimization and lazy loadingsCode plugin on steroids with themes and languagesEach plugin can be easily customized and extensibleDrag and drop, nested dnd is supported alsoSelection box for manipulating multiple blocks at onceYou can create your own pluginA list of useful tools (ActionMenu, Toolbar etc.) for the convenience of working with the editorAutomatic lazy loading for media components (eg. embeds)Large documentsMobile friendlyIndent and outdent for every plugin by tabs and shift+tabsEditor instance to programmatically control your contentEditor events for saving to DB in real-timeExports in markdown, plain text, htmlShortcuts, hotkeys. And customization for this!Super AI tools not for HYPE, but for real useful work with editor content - [in progress]The soul invested in the development of this editor 💙... and other features that I forgot to write about in this list 😅. Just check it in examples!ExamplesFull setup - https://yoopta.dev/examples/withBaseFullSetupCustom toolbar (Medium and Notion) - https://yoopta.dev/examples/withCustomToolbarCustom ActionMenu (Notion) - https://yoopta.dev/examples/withNotionActionMenuCustom Plugin - https://yoopta.dev/examples/withCustomPluginCustom styling - https://yoopta.dev/examples/withCustomStylesExtended Plugin - https://yoopta.dev/examples/withExtendedPluginChat Slack - https://yoopta.dev/examples/withChatSlackSaving to database - https://yoopta.dev/examples/withSavingToDatabase...and many others - https://yoopta.dev/ContributionContribution guide - https://github.com/Darginec05/Yoopta-Editor/blob/master/CONTRIBUTING.mdJoin to our community - https://discord.com/invite/Dt8rhSTjsnYoopta-Editor is MIT-licensed.

Introduction

Roadmap

Get startedOkay, let'go 🚀InstallingFirst, install core package - @yoopta/editor  with default plugin @yoopta/paragraph and  peer dependenciesyarn add @yoopta/editor @yoopta/paragraph slate slate-reactUsage Initialize editor instance, import YooptaEditor component and pass list of pluginsimport { useMemo } from "react";
import YooptaEditor, { createYooptaEditor } from "@yoopta/editor";
import Paragraph from "@yoopta/paragraph";

const plugins = [Paragraph];

const Editor = () => {
  const editor = useMemo(() => createYooptaEditor(), []);

  return (
    <YooptaEditor
      editor={editor}
      plugins={plugins}
      placeholder="Type something"
    />
  );
};PluginsHere is list of available plugins@yoopta/paragraph@yoopta/blockquote@yoopta/accordion@yoopta/code@yoopta/embed@yoopta/image@yoopta/link@yoopta/file@yoopta/callout@yoopta/video@yoopta/lists@yoopta/headings@yoopta/table@yoopta/divideryarn add @yoopta/embed @yoopta/headings @yoopta/image @yoopta/link 
@yoopta/lists @yoopta/paragraph @yoopta/video @yoopta/blockquote 
@yoopta/callout @yoopta/code @yoopta/file @yoopta/accordion
@yoopta/table @yoopta/divider

// or

npm i @yoopta/embed @yoopta/headings @yoopta/image @yoopta/link 
@yoopta/lists @yoopta/paragraph @yoopta/video @yoopta/blockquote 
@yoopta/callout @yoopta/code @yoopta/file @yoopta/accordion
@yoopta/table @yoopta/dividerHow to useimport YooptaEditor, { createYooptaEditor } from '@yoopta/editor';
import Paragraph from '@yoopta/paragraph';
import Blockquote from '@yoopta/blockquote';

const plugins = [Paragraph, Blockquote];

export default function Editor() {
  const editor = useMemo(() => createYooptaEditor(), []);

  return (
    <div>
      <YooptaEditor
        editor={editor}
        placeholder="Type text.."
        // here we go
        plugins={plugins}
      />
    </div>
  );
}ToolsYoopta-Editor provides useful tools that can help you when working with the editorHere is a list of available tools@yoopta/action-menu-list@yoopta/toolbar@yoopta/link-tool@yoopta/chat-gpt-assistant - [in progress]How to use// IMPORT TOOLS
import LinkTool, { DefaultLinkToolRender } from '@yoopta/link-tool';
import ActionMenu, { DefaultActionMenuRender } from '@yoopta/action-menu-list';
import Toolbar, { DefaultToolbarRender } from '@yoopta/toolbar';

// Tools should be defined outside component
const TOOLS = {
  Toolbar: {
    tool: Toolbar,
    render: DefaultToolbarRender,
  },
  ActionMenu: {
    tool: Toolbar,
    render: DefaultActionMenuRender,
  },
  LinkTool: {
    tool: LinkTool,
    render: DefaultLinkToolRender,
  },
};

export default function Editor() {
  const editor = useMemo(() => createYooptaEditor(), []);

  return (
    <div>
      <YooptaEditor
        editor={editor}
        plugins={plugins}
        placeholder="Type text.."
        // here we go
        tools={TOOLS}
      />
    </div>
  );
}MarksMarks are simple text formatsHere is a list of available marks from @yoopta/marks packageBoldItalicCodeMarkUnderlineStrikeHighlightHow to use// IMPORT MARKS
import { Bold, Italic, CodeMark, Underline, Strike, Highlight } from '@yoopta/marks';

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

export default function Editor() {
  const editor = useMemo(() => createYooptaEditor(), []);

  return (
    <div>
      <YooptaEditor
        editor={editor}
        placeholder="Type text.."
        plugins={plugins}
        tools={TOOLS}
        // here we go
        marks={MARKS}
      />
    </div>
  );
}

Get started

TableOverviewThe Table Plugin is a powerful extension for Yoopta-Editor, designed to bring seamless table creation and editing capabilities into your workflowInstallationyarn add @yoopta/tableElementstablepropsheaderRowheaderColumnchildren elementstable-rowtable-rowpropschildren elementstable-data-celltable-data-cellprops asHeaderwidthCommandsexport type TableCommands = {
  buildTableElements: (editor: YooEditor, options?: InsertOptions) => TableElement;
  insertTable: (editor: YooEditor, options?: InsertOptions) => void;
  deleteTable: (editor: YooEditor, blockId: string) => void;
  insertTableRow: (editor: YooEditor, blockId: string, options?: Options) => void;
  deleteTableRow: (editor: YooEditor, blockId: string, options?: DeleteOptions) => void;
  moveTableRow: (editor: YooEditor, blockId: string, options: MoveTableOptions) => void;
  moveTableColumn: (editor: YooEditor, blockId: string, options: MoveTableOptions) => void;
  insertTableColumn: (editor: YooEditor, blockId: string, options?: Options) => void;
  deleteTableColumn: (editor: YooEditor, blockId: string, options?: DeleteOptions) => void;
  updateColumnWidth: (editor: YooEditor, blockId: string, columnIndex: number, width: number) => void;
  toggleHeaderRow: (editor: YooEditor, blockId: string) => void;
  toggleHeaderColumn: (editor: YooEditor, blockId: string) => void;
};buildTableElementsbuildTableElements: (editor: YooEditor, options?: InsertOptions) => TableElement;Define elements structure for slate value in your blockinsertTableeditor.methods.insertTable(blockId: string, options?: InsertOptions) => voidInsert table block in specific path with optionsOptions: rows: numbercolumns: number columnWidth?: numberheaderColumn?: booleanheaderRow?: booleandeleteTabledeleteTable: (editor: YooEditor, blockId: string) => void;Delete table blockinsertTableRow insertTableRow: (editor: YooEditor, blockId: string, options?: Options) => void;Insert table row in specific locationOptions:path?: Location & Spanselect?: booleaninsertMode?: 'before' | 'after';Hotkeys
        
        
        
        OperationHotkeyInsert row aftershift+enterInsert row beforecmd+shift+enterDelete rowcmd+shift+deleteInsert column to rightcmd+shift+→Insert column to leftcmd+shift+←Delete columncmd+alt+deleteToggle header for first rowcmd+shift+HToggle header for first columncmd+shift+Vcmd+aStyling
        
        
        
        ClassnameElementyoopta-table-blockRoot of tableyoopta-tableTable elementyoopta-table-selectingWhen table is under selectionyoopta-table-data-cellTable data cellyoopta-table-data-cell-headTable data head cellyoopta-table-data-cell-contentContent of data cell

Table

Table PluginOverviewBrief description of the Table plugin and its main features.ElementsDescription of the elements that make up the Table plugin.TableRender: TableRenderRoot Element: YesChildren: table-rowProps:
headerRow (boolean): Defines if the first row is a header. Default: falseheaderColumn (boolean): Defines if the first column is a header. Default: falseTable RowRender: TableRowChildren: table-data-cellTable Data CellRender: TableDataCellProps:
asHeader (boolean): Defines if the cell is a header cell. Default: falsewidth (number): Width of the cell in pixels. Default: 200EventsDescription of the events handled by the Table plugin.onKeyDownDescription of keyboard events handled.onBlurBehavior when the table loses focus.onBeforeCreateDefault table structure created when a new table is inserted.ParsersHow the Table plugin handles parsing and serialization.HTMLDeserialize: How HTML tables are converted to the plugin's structure.Serialize: How the plugin's structure is converted to HTML.MarkdownSerialize: How the plugin's structure is converted to Markdown.OptionsConfiguration options for the Table plugin.DisplayTitle: "Table"Description: "Add simple table"ShortcutsShortcuts to quickly insert a table: ['table', '||', '3x3']CommandsAvailable commands for manipulating tables.insertTableinsertTable: (editor: YooEditor, options?: InsertOptions) => void


File

ExportsExports is core package for exporting/importing yoopta content in different formats The package @yoopta/exports supports exporting/importing in the next formats:HTMLMarkdownPlain textInstallationyarn add @yoopta/exportsHTML HTML exports/imports exampleimport { html } from '@yoopta/exports';

const Editor = () => {
  const editor = useMemo(() => createYooptaEditor(), []);

  // from html to @yoopta content
  const deserializeHTML = () => {
    const htmlString = '<h1>First title</h1>';
    const content = html.deserialize(editor, htmlString);

    editor.setEditorValue(content);
  };

  // from @yoopta content to html string
  const serializeHTML = () => {
    const data = editor.getEditorValue();
    const htmlString = html.serialize(editor, data);
    console.log('html string', htmlString);
  };

  return (
    <div>
      <button onClick={deserializeHTML}>Deserialize from html to content</button>
      <button onClick={serializeHTML}>Serialize from content to html</button>

      <YooptaEditor editor={editor} plugins={plugins} />
    </div>
  );
};MarkdownMarkdown exports/imports exampleimport { markdown } from '@yoopta/exports';

const Editor = () => {
  const editor = useMemo(() => createYooptaEditor(), []);

  // from markdown to @yoopta content
  const deserializeMarkdown = () => {
    const markdownString = '# First title';
    const value = markdown.deserialize(editor, markdownString);

    editor.setEditorValue(value);
  };

  // from @yoopta content to markdown string
  const serializeMarkdown = () => {
    const data = editor.getEditorValue();
    const markdownString = markdown.serialize(editor, data);
    console.log('markdown string', markdownString);
  };

  return (
    <div>
      <button onClick={deserializeMarkdown}>
        Deserialize from markdown to content
      </button>

      <button onClick={serializeMarkdown}>
        Serialize from content to markdown
      </button>

      <YooptaEditor editor={editor} plugins={plugins} />
    </div>
  );
};Plain textPlain text exports/imports exampleimport { plainText } from '@yoopta/exports';

const Editor = () => {
  const editor = useMemo(() => createYooptaEditor(), []);

  // from plain text to @yoopta content
  const deserializeText = () => {
    const textString = '# First title';
    const value = plainText.deserialize(editor, textString);

    editor.setEditorValue(value);
  };

  // from @yoopta content to plain text string
  const serializeText = () => {
    const data = editor.getEditorValue();
    const textString = plainText.serialize(editor, data);
    console.log('plain text string', textString);
  };

  return (
    <div>
      <button onClick={deserializeText}>Deserialize from plain text to content</button>
      <button onClick={serializeText}>Serialize from content to plain text</button>

      <YooptaEditor editor={editor} plugins={plugins} />
    </div>
  );
};ExamplesPage - https://yoopta.dev/examples/withExportsExample with HTML - https://yoopta.dev/examples/withExports/htmlExample with Markdown - https://yoopta.dev/examples/withExports/markdown

Exports/Imports

Resources

Blockquote plugin
Blockquote is default plugin for Yoopta-Editor
Installation
yarn add @yoopta/blockquote
Usage
import Blockquote from '@yoopta/blockquote';

const plugins = [Blockquote];

const Editor = () => {
  return ;
};
Default classnames
 .yoopta-blockquote 
Default options
const Blockquote = new YooptaPlugin({
  options: {
    display: {
      title: 'Blockquote',
      description: 'Capture quote',
    },
    shortcuts: ['>'],
  },
});
How to extend
const plugins = [
  Blockquote.extend({
    renders: {
      blockquote: (props) => 
    },
    options: {
      shortcuts: [``],
      align: 'left' | 'center' | 'right',
      display: {
        title: ``,
        description: ``,
      },
      HTMLAttributes: {
        className: '',
        // ...other HTML attributes
      },
    },
  });
];


Blockquote

ContributingHi there! We're thrilled that you'd like to contribute to this project. Your help is essential for keeping it great.Please note that this project is released with a Contributor Code of Conduct. By participating in this project, you agree to abide by its terms.Issues and PRsIf you have suggestions for how this project could be improved or want to report a bug, open an issue! We'd love all and any contributions. If you have questions, too, we'd love to hear them.We'd also love PRs. If you're thinking of a large PR, we advise opening up an issue first to talk about it! Look at the links below if you're not sure how to open a PR.Starting DevelopmentTo start contributing to the project, follow these steps:Build the Project: Before beginning active development, ensure all packages are built by running:yarn buildStart Development Mode for Specific Packages: You can specify which packages to run in watch mode. This helps you focus on the specific packages you're working on. Use the following command:PACKAGES="<package names>" yarn devFor example, to run only the @yoopta/editor and @yoopta/paragraph packages:PACKAGES="@yoopta/editor @yoopta/paragraph" yarn devFind the editor initializer code in ./packages/development/src/pages/dev/index.tsx and you are ready for developmentProject structurepackages/
├── core - core components of the editor
├── marks - text marks
├── plugins - editor plugin extensions
├── tools - tools packages
└── development - developer playground
└── web/next-example - all examples

Contributing

Blocks

Elements

FAQsIs it free?Yes, the Yoopta-Editor is fully free and developed by MIT LicenseCan I create custom plugins?Sure! Check examples and read concepts. 
And of course we will improve and simplify API and make it as convenient as possible!Do you have support for Markdown, HTML exports?Yeap, it's managed by @yoopta/exports core package. 
But we have plans add support in other formats too! Do you have plans to add AI?Definitely yes. It's in progress now. We are trying research best UX approach to thisWhat about collaborative?It is also under development, we are actively working on itAny other plans for Yoopta space?Yes, we have plans to develop open-source react email builder with based on YooptaWhat is plugin marketplace?Plugin marketplace is our next goal, which will allow other developers to develop and publish powerful plugins where everyone can try it right away in the platform

FAQs

Core packageThis is core package for Yoopta-EditorInstallationyarn add @yoopta/editorUsageimport YooptaEditor, { createYooptaEditor, YooEditor } from '@yoopta/editor';
// plugins
import Paragraph from '@yoopta/paragraph';

const plugins = [Paragraph];

const Editor = () => {
  // create instance
  const editor: YooEditor = useMemo(() => createYooptaEditor(), []);

  return <YooptaEditor editor={editor} plugins={plugins} />;
}; component propstype Props = {
  /**
   * Instance of editor
   */
  editor: YooEditor;
  /**
   * Optional custom id. Useful for multiple instances
   */
  id?: string;
  /**
   * List of plugins
   */
  plugins: YooptaPlugin[];
  /**
   * List of marks from @yoopta/marks
   */
  marks?: YooptaMark<any>[];
  /**
   * Optional value of editor. DEFAULT - [undefined]
   */
  value?: YooptaContentValue;
  /**
   * Autofocus when editor is ready. DEFAULT - [true]
   */
  autoFocus?: boolean;
  /**
   * Additional className for your needs. DEFAULT - [.yoopta-editor]
   */
  className?: string;
  /**
   * Box for selection area to select by mouse several blocks. DEFAULT - [document]
   */
  selectionBoxRoot?: HTMLElement | React.MutableRefObject<HTMLElement | null> | false;
  children?: React.ReactNode;
  tools?: Partial<Tools>;
  placeholder?: string;
  readOnly?: boolean;
  /* Width. [Default] - 400px. Will be DEPRECATED, use style object  */
  width?: number | string;
  /* Style CSS Object. [Default] - { width: 400, paddingBottom: 100 }
   */
  style?: number | string;
};Editor APIexport type YooEditor<TNodes> = {
  id: string;
  readOnly: boolean;
  insertBlock: (data: YooptaBlockData, options?: YooptaEditorTransformOptions) => void;
  insertBlocks: (blocks: YooptaBlockData[], options?: YooptaEditorTransformOptions) => void;
  splitBlock: (options?: YooptaEditorTransformOptions) => void;
  updateBlock: (id: string, data: Partial<YooptaBlockData>) => void;
  deleteBlock: (options?: DeleteBlockOptions) => void;
  deleteBlocks: (options?: DeleteBlocksOptions) => void;
  duplicateBlock: (options?: DuplicateBlockOptions) => void;
  toggleBlock: (toBlockType: string, options?: ToggleBlockOptions) => void;
  increaseBlockDepth: (options?: YooptaEditorTransformOptions) => void;
  decreaseBlockDepth: (options?: YooptaEditorTransformOptions) => void;
  applyChanges: () => void;
  moveBlock: (blockId: string, to: YooptaBlockPath) => void;
  focusBlock: (id: string, options?: FocusBlockOptions) => void;
  getBlock: (options: GetBlockOptions) => YooptaBlockData | null;
  selection: YooptaBlockPath | null;
  selectedBlocks: number[] | null;
  children: Record<string, YooptaBlockData>;
  getEditorValue: () => TNodes;
  setEditorValue: (value: YooptaContentValue) => void;
  setSelection: (path: YooptaBlockPath | null, options?: SetSelectionOptions) => void;
  setBlockSelected: (path: number[] | null, options?: BlockSelectedOptions) => void;
  blockEditorsMap: YooptaPluginsEditorMap;
  blocks: YooptaBlocks;
  formats: YooptaFormats;
  shortcuts: Record<string, YooptaBlock>;
  plugins: Record<string, Plugin<string, unknown>>;

  // events handlers
  on: (event: YooEditorEvents, fn: (payload: any) => void) => void;
  once: (event: YooEditorEvents, fn: (payload: any) => void) => void;
  off: (event: YooEditorEvents, fn: (payload: any) => void) => void;
  emit: (event: YooEditorEvents, payload: any) => void;

  // focus handlers
  isFocused: () => boolean;
  blur: (options?: EditorBlurOptions) => void;
  focus: () => void;

  // parser handlers
  getHTML: (content: YooptaContentValue) => string;
  getMarkdown: (content: YooptaContentValue) => string;
  getPlainText: (content: YooptaContentValue) => string;

  // ref to editor element
  refElement: HTMLElement | null;
};Hooks from @yoopta/editor/**
 * Hook to access the Yoopta editor instance. Must be used in children components of <YooptaEditor />.
 * @returns {YooEditor} The editor instance.
 */
useYooptaEditor();

/**
 * Hook to check if the editor is in read-only mode.
 * @returns {boolean} True if the editor is read-only.
 */
useYooptaReadOnly();

/**
 * Hook to check if the editor is focused.
 * @returns {boolean} True if the editor is focused.
 */
useYooptaFocused();

/**
 * Hook to get the data for a specific block by its ID.
 * @param {string} blockId The ID of the block.
 * @returns {YooptaBlockData | undefined} The data of the block, or undefined if not found.
 */
useBlockData(blockId);

/**
 * Hook to get the options for a plugin.
 * @template TOptions The type of options expected.
 * @param {string} blockType The block type associated with the plugin.
 * @returns {PluginOptions<TOptions>} The options of the plugin.
 */
useYooptaPluginOptions<TOptions>(blockType);

Accordion

Code

Lists pluginsLists include three plugins for Yoopta-Editor:NumberedListBulletedListTodoListInstallationyarn add @yoopta/listsUsageimport { NumberedList, BulletedList, TodoList } from '@yoopta/lists';

const plugins = [NumberedList, BulletedList, TodoList];

const Editor = () => {
  return <YooptaEditor plugins={plugins} />;
};NumberedListDefault classnames.yoopta-numbered-list.yoopta-numbered-list-count.yoopta-numbered-list-contentDefault optionsconst NumberedList = new YooptaPlugin({
  options: {
    display: {
      title: 'Numbered List',
      description: 'Create list with numbering',
    },
    shortcuts: ['1.'],
  },
});Options to extendconst plugins = [
  NumberedList.extend({
    renders: {
      numbered-list: (props) => 
    },
    options: {
      shortcuts: [``],
      align: 'left' | 'center' | 'right',
      display: {
        title: ``,
        description: ``,
      },
      HTMLAttributes: {
        className: '',
        // ...other HTML attributes
      },
    },
  });
];
BulletedListDefault classnames.yoopta-bulleted-list.yoopta-bulleted-list-bullet.yoopta-bulleted-list-contentDefault optionsconst BulletedList = new YooptaPlugin({
  options: {
    display: {
      title: 'Bulleted List',
      description: 'Create bullet list',
    },
    shortcuts: ['-'],
  },
});
Options to extendconst plugins = [
  BulletedList.extend({
    renders: {
      bulleted-list: (props) => 
    },
    options: {
      shortcuts: [``],
      align: 'left' | 'center' | 'right',
      display: {
        title: ``,
        description: ``,
      },
      HTMLAttributes: {
        className: '',
        // ...other HTML attributes
      },
    },
  });
];TodoListDefault classnames.yoopta-todo-list.yoopta-todo-list-checkbox.yoopta-todo-list-checkbox-input.yoopta-todo-list-contentDefault optionsconst TodoList = new YooptaPlugin({
  options: {
    display: {
      title: 'Todo List',
      description: 'Track tasks',
    },
    shortcuts: ['[]'],
  },
});Options to extendconst plugins = [
  TodoList.extend({
    renders: {
      todo-list: (props) => <YourCustomComponent {...props} />
    },
    options: {
      shortcuts: [`<your custom shortcuts>`],
      align: 'left' | 'center' | 'right',
      display: {
        title: `<your custom title>`,
        description: `<your custom description>`,
      },
      HTMLAttributes: {
        className: '<your classname>',
        // ...other HTML attributes
      },
    },
  });
];

Lists

Marks

Headings plugins
Headings include three plugins for Yoopta-Editor:
HeadingOne
HeadingTwo
HeadingThree
Installation
yarn add @yoopta/headings
Usage
import { HeadingOne, HeadingTwo, HeadingThree } from '@yoopta/headings';

const plugins = [HeadingOne, HeadingTwo, HeadingThree];

const Editor = () => {
  return ;
};
HeadingOne
Default classnames
 .yoopta-heading-one 
Default options
const HeadingOne = new YooptaPlugin({
  options: {
    display: {
      title: 'Heading 1',
      description: 'Big section heading',
    },
    shortcuts: ['h1', '#', '*'],
  },
});
How to extend
const plugins = [
  HeadingOne.extend({
    renders: {
      heading-one: (props) => 
    },
    options: {
      shortcuts: [``],
      align: 'left' | 'center' | 'right',
      display: {
        title: ``,
        description: ``,
      },
      HTMLAttributes: {
        className: '',
        // ...other HTML attributes
      },
    },
  });
];
HeadingTwo
Default classnames
 .yoopta-heading-two 
Default options
const HeadingTwo = new YooptaPlugin({
  options: {
    display: {
      title: 'Heading 2',
      description: 'Medium section heading',
    },
    shortcuts: ['h2', '##'],
  },
});
How to extend
const plugins = [
  HeadingTwo.extend({
    renders: {
      heading-two: (props) => 
    },
    options: {
      shortcuts: [``],
      align: 'left' | 'center' | 'right',
      display: {
        title: ``,
        description: ``,
      },
      HTMLAttributes: {
        className: '',
        // ...other HTML attributes
      },
    },
  });
];
HeadingThree
Default classnames
 .yoopta-heading-three 
Default options
const HeadingThree = new YooptaPlugin({
  options: {
    display: {
      title: 'Heading 3',
      description: 'Small section heading',
    },
    shortcuts: ['h3', '###'],
  },
});
How to extend
const plugins = [
  HeadingThree.extend({
    renders: {
      heading-three: (props) => 
    },
    options: {
      shortcuts: [``],
      align: 'left' | 'center' | 'right',
      display: {
        title: ``,
        description: ``,
      },
      HTMLAttributes: {
        className: '',
        // ...other HTML attributes
      },
    },
  });
];


Headings

DividerOverviewInstallationyarn add @yoopta/dividerElementsdividerpropscolor: stringtheme: 'solid' | 'dashed' | 'dotted' | 'gradient'Commandsexport type DividerCommands = {
  buildDividerElements: (editor: YooEditor, options?: Partial<DividerElementProps>) => DividerElement;
  insertDivider: (editor: YooEditor, options?: Partial<DividerInsertOptions>) => void;
  deleteDivider: (editor: YooEditor, blockId: string) => void;
  updateDivider: (editor: YooEditor, blockId: string, props: Partial<DividerElementProps>) => void;
};buildDividerElementsbuildDividerElements: (editor: YooEditor, options?: Partial) => DividerElement;Define elements structure for slate value in your blockinsertDividereditor.methods.insertDivider(blockId: string, options?: Partial) => voidInsert divider block in specific path with optionsOptions: color: stringtheme: 'solid' | 'dashed' | 'dotted' | 'gradient' deleteDividerdeleteDivider: (editor: YooEditor, blockId: string) => void;Delete divider blockupdateDividerupdateDivider: (editor: YooEditor, blockId: string, props: Partial) => void;Update divider propsOptions: color: stringtheme: 'solid' | 'dashed' | 'dotted' | 'gradient' Hotkeys
        
        
        
        OperationHotkeySwitch themes when block is focusedcmd+shift+dStyling
        
        
        
        ClassnameElementyoopta-dividerRoot of divideryoopta-divider-[theme]Divider element with specific theme

Divider

yoodocs


        
        
        
        asdsadasdsadjhklhk

New page

﻿﻿
    To pick up a draggable item, press the space bar.
    While dragging, use the arrow keys to move the item.
    Press space again to drop the item in its new position, or press escape to cancel.
  

﻿
    To pick up a draggable item, press the space bar.
    While dragging, use the arrow keys to move the item.
    Press space again to drop the item in its new position, or press escape to cancel.
  

Plugins

ImageThe Image plugin in Yoopta Editor provides advanced features for handling images, including uploading images from devices, embedding via URLs, and extensive display settings.InstallationTo use the Image plugin, it must be included in the plugins array when initializing Yoopta Editor. The plugin is available via the @yoopta/image package.yarn add @yoopta/image
// or
npm i @yoopta/imageUsageimport YooptaEditor, { createYooptaEditor, YooEditor } from '@yoopta/editor';
import Image from '@yoopta/image';

const plugins = [
  // other plugins
  Image,
];

const Editor = () => {
  const editor: YooEditor = useMemo(() => createYooptaEditor(), []);

  return (
    <YooptaEditor
      editor={editor}
      plugins={plugins}
      // other props
    />
  );
};
Image elementsimageexport type ImageElementProps = {
  src?: string | null;
  alt?: string | null;
  srcSet?: string | null;
  bgColor?: string | null;
  fit?: 'contain' | 'cover' | 'fill' | null;
  sizes?: ImageSizes;
};CustomizingonUpload: Function to handle the upload process, should return an object with the URL, alternative text, and dimensions of the uploaded image.accept: Specifies the types of images that can be uploaded, e.g., 'image/png, image/jpeg'.maxSizes: Defines maximum image sizes to maintain layout consistency.HTMLAttributes: Additional HTML attributes that can be applied to the image element.You can extend the standard behavior of the image element:Image.extend({
  defaultProps: {
    image: (props: ImageElementProps) => ({
      ...props,
      alt: 'cloudinary',
      sizes: {
        width: 500,
        height: 500,
      },
      fit: 'contain',
    }),
  },
  options: {
    maxSizes: { maxHeight: 750, maxWidth: 750 },
    HTMLAttributes: {
      className: 'image-element-extended',
    },
    onUpload: async (file: File) => {
      const data = await uploadToCloudinary(file, 'image');
      return {
        src: data.secure_url,
        sizes: {
          width: data.width,
          height: data.height,
        },
      };
    },
  },
});
