[Release News] TOAST UI Editor 3.0 is here!

TOAST UI Editor 3.0 Dark Theme

🎊 TOAST UI Editor 3.0 is here! 🎊

🧐 What Changed With 3.0?

Core Module Replacement ➔ Lighter Editor

// All nodes from the editor will take the following class structure.export class ListItem extends NodeSchema {  get name() {    return ‘listItem’;  }  get schema() {    return {      content: ‘paragraph listGroup*’,      attrs: {        task: { default: false },        checked: { default: false },        rawHTML: { default: null },      },      defining: true,      parseDOM: [        // ...      ],      toDOM({ attrs }: ProsemirrorNode): DOMOutputSpecArray {        // ...      },    };  }  commands(): EditorCommand {    // ...  }  keymaps() {    return {      Enter: this.commands()(),    };  }}
Total Bundle Size

Custom Markdown Syntax Support

Markdown Custom Block
Custom Block In WYSIWYG

Widget Node

const reWidgetRule = /\[(@\S+)\]\((\S+)\)/;const editor = new Editor({  el: document.querySelector(‘#editor’),  widgetRules: [    {      rule: reWidgetRule,      toDOM(text) {        const rule = reWidgetRule;        const matched = text.match(rule);        const span = document.createElement(‘span’);        span.innerHTML = `<a class=”widget-anchor” href=”${matched[2]}”>${matched[1]}</a>`;        return span;      },    },  ],});
Widget Example
Widget with Popup

Plugin System

export default function colorSyntaxPlugin(editor, options = {}) {  // ...  editor.eventManager.listen(‘convertorAfterHtmlToMarkdown...’, markdown => {    // …  });  if (!editor.isViewer() && editor.getUI().name === ‘default’) {    editor.addCommand(‘markdown’, {      name: ‘color’,      exec(mde, color) {        // Access the CodeMirror instance        const cm = mde.getEditor();        const rangeFrom = cm.getCursor(‘from’);        // …      }    });    editor.addCommand(‘wysiwyg’, {      name: ‘color’,      exec(wwe, color) {        if (!color) {          return;        }        // access the squire instance        const sq = wwe.getEditor();        const tableSelectionManager = wwe.componentManager.getManager(‘tableSelection’);        // …      }    });  }});
export default function colorSyntaxPlugin(context, options) {  // …  return {    markdownCommands: {      color: ({ selectedColor }, { tr, selection, schema }, dispatch) => {        if (selectedColor) {          // …          return true;        }        return false;      },    },    wysiwygCommands: {      color: ({ selectedColor }, { tr, selection, schema }, dispatch) => {        if (selectedColor) {          // …          return true;        }        return false;      },    },    toolbarItems: [      {        groupIndex: 0,        itemIndex: 3,        item: toolbarItem,      },    ],    // …  };}

Design

// …import ‘@toast-ui/editor/dist/toastui-editor.css’;import ‘@toast-ui/editor/dist/theme/toastui-editor-dark.css’;
const editor = new Editor({
// … theme: ‘dark’});
Dark Theme

📝 Migration Guide

✍ Additional Changes

🚀 What’s Next?

JavaScript UI Library Open Source by http://ui.toast.com