TOAST UI Editor

TOAST UI Editor is a GFM (GitHub Flavored Markdown) and WYSIWYG editor that supports both Markdown and visual editing modes. It is available as a plain JavaScript component, framework-specific wrappers, and a variety of functional plugins.

Core Package

• @toast-ui/editor: The primary plain JavaScript component.

Framework Wrappers

• @toast-ui/react-editor: A wrapper for React applications.
• @toast-ui/vue-editor: A wrapper for Vue.js applications.

Available Plugins

• @toast-ui/editor-plugin-chart: Renders charts via TOAST UI Chart.
• @toast-ui/editor-plugin-code-syntax-highlight: Provides syntax highlighting using Prism.js.
• @toast-ui/editor-plugin-color-syntax: Adds a GUI color picker to change text color.
• @toast-ui/editor-plugin-table-merged-cell: Enables merging table columns in headers and bodies.
• @toast-ui/editor-plugin-uml: Renders UML diagrams via PlantUML.

Plugins in v3.0 are defined by injecting specific option objects. Key capabilities include:

Registering Commands

Use markdownCommands and wysiwygCommands to register new commands. Each command receives (payload, state, dispatch).

return {
  markdownCommands: {
    myCommand: (payload, state, dispatch) => {
      // ...
    },
  },
  wysiwygCommands: {
    myCommand: (payload, state, dispatch) => {
      // ...
    },
  },
};

Customizing Converters

Use toHTMLRenderers (Markdown $\rightarrow$ WYSIWYG/Preview) and toMarkdownRenderers (WYSIWYG $\rightarrow$ Markdown) to intercept and modify how specific nodes are rendered during conversion.

return {
  toHTMLRenderers: {
    tableCell(node, { entering, origin }) {
      const result = origin!();
      // ...
      return result;
    },
  },
  toMarkdownRenderers: {
    tableHead(nodeInfo) {
      // ...
      return { delim };
    },
  },
};

Registering Toolbar Items

Add items to the toolbar by specifying their target group and position using groupIndex and itemIndex.

return {
  toolbarItems: [
    {
      groupIndex: 0,
      itemIndex: 3,
      item: toolbarItem,
    },
  ],
};

ToastMark differs from commonmark.js in several ways to support high-performance editing:

• GitHub Flavored Markdown (GFM) Support: Includes a custom implementation for GFM syntax.
• Source Position Information: Unlike commonmark.js which limits position data to block-level elements, ToastMark provides source position information for both block-level and inline-level elements in the Abstract Syntax Tree (AST).
• Incremental Parsing: Instead of re-parsing the entire document on every change, ToastMark parses only the modified parts and updates the existing AST. It returns information about removed and inserted nodes, enabling incremental updates for syntax highlighting and preview rendering.
• AST Searching and Editing: Provides methods to interact with the AST, such as findNodeAtPosition and findNodeById, which are useful for synchronizing scroll positions between the editor and preview or updating toolbar states based on cursor position.

When the Editor traverses the AST, it visits non-leaf nodes twice: once when entering the node and once after visiting all its children. You can use the context object to manage this lifecycle:

context.entering

Use this boolean to distinguish between the start and end of a node. This is essential for returning an openTag when entering is true and a closeTag when false.

context.origin()

If you want to extend the default behavior rather than completely replacing it, call context.origin(). This function returns the token object produced by the Editor's original converter for that node type, allowing you to modify its properties (like adding an attribute) before returning it.

// Using entering to toggle tags
heading({ level }, { entering }) {
  return {
    type: entering ? 'openTag' : 'closeTag',
    tagName: `h${level}`
  };
}

// Using origin() to extend default behavior
link(node, context) {
  const { origin, entering } = context;
  const result = origin(); // Get default token
  if (entering) {
    result.attributes.target = '_blank'; // Add custom attribute
  }
  return result;
}