[Release News] TOAST UI Editor 3.0 is here!

TOAST UI Editor 3.0 Dark Theme

🎊 TOAST UI Editor 3.0 is here! 🎊

With the release of TOAST UI Editor 2.0, we were able to improve a lot of features including the Editor’s markdown parsing accuracy, syntax highlighting feature, scroll sync accuracy, and more. All of these improvements were made possible due to the implementation of our own ToastMark markdown parser. However, because we focused mainly on the markdown editor for the 2.0, there were no further improvements on the UI like toolbars and switch tabs.

🧐 What Changed With 3.0?

Core Module Replacement ➔ Lighter Editor

The original markdown editor had both CodeMirror and ToastMark maintain text information and share changes between the two. However, for the WYSIWYG editor, we used squire to edit and manage the contents.

  • While heading, list, tables, and more are maintained as nodes, internally, the editors manage the nodes as completely different objects, making the code difficult to read.
// 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

TOAST UI Editor primarily follows the CommonMark while supporting GFM, additionally. However, what if you were to render elements like mathematical expressions or charts? TOAST UI Editor 3.0 options allow users to customize markdown syntax.

Markdown Custom Block
Custom Block In WYSIWYG

Widget Node

TOAST UI Editor 3.0 now comes with newly added widgetRules option that allows users to display plain text as a designated widget node. With this option, you can display the linked text as mention nodes or as any form of DOM node you choose.

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;      },    },  ],});
  • toDOM: Define the DOM node of the widget node that will be rendered.
Widget Example
Widget with Popup

Plugin System

TOAST UI Editor offers five plugins out of the box.

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

TOAST UI Editor 3.0 has completely reworked the designs. We have increased the sizes of UI elements like toolbars and tabs in order to increase readability, and we have also rounded out the borders to give a smoother feel.

// …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

There are still more considerable changes to the TOAST UI Editor 3.0 than we have mentioned above. With the substantial changes a lot of usages were changed as well. To help you along the way, we have prepared a migration guide.

✍ Additional Changes

Aside from the newly introduced features, there are additional, internal maintenance related changes.

🚀 What’s Next?

The main characteristic of TOAST UI Editor is that it is a markdown based editor that support WYSIWYG editor simultaneously. For the development of TOAST UI Editor 3.0, we focused on highlighting this characteristic and strove to improve compatibility between the structures of the two editors as well as the editors themselves. As a result, we were able to remove a bunch of limiting conditions that existed previously during feature extension.

  • Server Side Rendering (SSR) Support
  • Synchronous Editing Feature

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