🎉 TOAST UI Editor 2.0 Released! 🎉
TOAST UI Editor is a document editing library built using JavaScript, and it offers two different modes of editors, Markdown and "What You See is What You Get" (WYSIWYG), for users to choose freely which mode is the more suitable option for different users.
It has been released as opensource in 2018 and has continually evolved to receive 10k GitHub ⭐️ Stars. To carry on this momentum, the TOAST UI Editor 2.0 is released this March, 2020. (MAKE SOME NOISE 🎉)
We started concept meetings and prototyping last year's second half, and after three months of development, we proudly announce the official release today. With TOAST UI Editor v2.0, we concentrated on improving the markdown parser, scroll sync, and other core features of the markdown Editor and reducing the bundle size.
Let's explore what changes have been made in TOAST UI Editor 2.0!
🛠 2.0 What's New?
🔡 Implementation of a New Markdown Parser
The biggest change in TOAST UI Editor 2.0 is the newly implemented markdown parser. Parser is a core piece of technology for the Editor that converts markdown data inputted by the user into HTML. The parser used in the previous version, markdown-it had issues that resulted in between the actual editing area and the preview that were difficult to handle.
In order to address this, NHN Cloud's Front End Development Lab created a new markdown parser, ToastMark, for TOAST UI Editor 2.0. ToastMark is an extension of the opensource CommonMark.js which strictly adheres to the CommonMark specs, and provides an API that can directly access the abstract syntax tree, which contains the markdown documents' source mapping information, enabling us to be able to solve the previous problems. In v2.0, by replacing markdown-it with ToastMark, we unified the the segmented syntax analysis features, and as a result, were able to drastically improve the markdown editor's accuracy and stability.
ToastMark will be discussed in greater detail in future articles, so stay tuned! 🤘
The following sections enumerate what has been improved in TOAST UI Editor 2.0 by implementing ToastMark.
More Accurate Syntax Highlighting
TOAST UI Editor's markdown editor had a problem that resulted in the rendered results on the preview looking different from the editing area's syntax highlights.
In v2.0, we corrected the mistake by making it so that both the markdown editor's editing area and the preview area use the same result from a single syntax analsys through ToastMark. Now, users can see consistent results on both screens when editing documents.
v1.x
v2.0
Improved Live Preview and Scroll Sync
Because TOAST UI Editor v1.x was programmed to handle large amount of data at once when editing a document, the workflow was slowed, and it sometimes led to screen blinking.
ToastMark provides a way for the editor to gradually parse the markdown data. ToastMark allows the markdown editor to parse and update the preview that relates to what is being edited, so TOAST UI Editor v2.0 no longer has unnecessary delays or drops during the rendering process.
Furthermore, the editing area and the preview area's scroll sync has become more intricate. Both area's scrolls will now sync better regardless of the document's length, making editing more convenient.
v1.x
v2.0
Improved Cursor Location Based Toolbar Button Activation
Lastly, with TOAST UI Editor v1.x, when the cursor was at a certain location near the input text in the editing area, the Editor could not adequately display the toolbar button which was positioned near the top of the Editor.
This problem was also solved using the ToastMark API that converts the parsed markdown data into the necessary values. Editor v2.0 uses the syntax tree's node information retrieved from the markdown editing area's cursor location to display information regarding the current target text on the toolbar more accurately.
v1.x
v2.0
🐉 Mororepo Structure
Monorepo is a system that maintains multiple modules of different repositories in a single unified structure. TOAST UI Editor, starting from v2.0, uses monorepo structure with GitHub repository, and all packages related to the editor will be managed under the following structure.
- tui.editor/
├─ apps/
│ ├─ editor
│ ├─ jquery-editor
│ ├─ react-editor
│ └─ vue-editor
├─ plugins/
│ ├─ chart
│ ├─ code-syntax-highlight
│ ├─ color-syntax
│ ├─ table-merged-cell
│ └─ uml
├─ libs/
│ ├─ toastmark
│ ├─ squire
│ └─ to-markTOAST UI Editor's main app as well as the wrapper, Editor's extensible features, and library modules are maintained in the apps folder, plugins folder, and libs folder, respectively.
Now TOAST UI Editor users can find all related module information in one place. Users no longer have to look at different posts and can simply find issues and release information on the TOAST UI Editor repository.
Furthermore developers can simply clone the single TOAST UI Editor repository and perform static analysis and unit tests in a unified environment to contribute to TOAST UI Editor.
🧩 Separation of Plugin Packages
Before v2.0, extensible features like chart and cell merge table were provided as extensions. However, this included all of related codes in the bundle, resulting in a large bundle size.
In order to address such issue, TOAST UI Editor v2.0 now uses separate packages registered on npm. The previous extensible features are called plugins instead of extensions, and can be installed using npm.
As the following example demonstrates, with TOAST UI Editor v2.0, users can install only what they need and can even customize different plugins.
- Installing Plugins
$ npm install @toast-ui/editor-plugin-chart # Chart plugin
$ npm install @toast-ui/editor-plugin-uml # UML Plugin- Using the Plugins
import Editor from "@toast-ui/editor";
import chartPlugin from "@toast-ui/editor-plugin-chart"; // Chart Plugin
import umlPlugin from "@toast-ui/editor-plugin-uml"; // UML Plugin
import customPlugin from "./customPlugins"; // User custom Plugin
const editor = new Editor({
// ...
plugins: [chartPlugin, umlPlugin, customPlugin]
});Furthermore, because all plugins are maintained in a monorepo, users can find information regarding plugins much easier.
From v2.0, there are five different default pluins, and more will be provided later. More detailed information and usages of the plugins can be found in the linked pages below.
🗑 How We Reduced the Bundle Size
In order to make TOAST UI Editor v2.0 a lighter bundle, we removed the jQuery dependency as well as the following tasks.
Removed jQuery Dependency
With TOAST UI Editor v2.0, we removed dependencies that made the bundle size larger. jQuery dependency was one of them.
While jQuery was used with TOAST UI Editor to enable easy DOM manipulation, unnecessary jQuery functions included in the bundle file needlessly added to the bundle file size. Furthermore, there were users who felt uncomfortable using TOAST UI Editor due to the jQuery dependence.
In v2.0, we used our own DOM utility functions with TOAST UI CodeSnippet instead of jQuery and were able to reduce the bundle size.
Separation of Codeblock Syntax Highlighting Feature
TOAST UI Editor provides a feature that allows code highlighting feature within the codeblock area to emphasize codes. In this syntax highlighting, highlight.js library is used. However, we had to deal with increase in bundle size due to the fact that the highlight.js includes all 185 languages it supports in its bundle.
In order to address this issue, with TOAST UI Editor 2.0, the syntax highlighting feature is separated as a plugin. By using code-syntax-highlight plugin, users can selectively use the syntax highlighting feature with chosen languages.
Separation of Internationalization File
The five languages (i18n) that TOAST UI Editor supported when it was initially released as opensource has grown to twenty with the help of active contributors. However, because all internationalization files had to be built-in, these files added to the bundle size.
With v2.0, the internationalization files are offered separately by languages. Users can now choose which language to use, making the bundle lighter.
So... What's the Final Bundle Size for v2.0? 🤔
By removing jQuery, separating plugins and internationalization files, and unnecessary codes, we were able to ameliorate the problem of heavy bundle size.
The following is a comparison of bundle sizes when purely using Editor's basic functionalities by versions. Compared to previous versions, it is clear to see that the total bundle size has reduced from 1.42MB to 582KB.
Now, users can use optimized bundle files in TOAST UI Editor 2.0.
🏁 Now That 2.0 Is Out, What Now?
You (Editor)'ve got a plan! 👀
One of the reasons that TOAST UI Editor was able to experience such rise in popularity is that it supports both markdown and WYSIWYG at the same time. This is TOAST UI Editor's unique pride as well as its most important task. Therefore, it is our goal to provide an editor that has harmoniously unified the two different editors, markdown and WYSIWYG, for every version update.
Now, we are planning a minor update that, with the help of our new parser, ToastMark, reduces the CodeMirror dependencies while enhancing the markdown editor. Furthermore, the toolbar state management and the editing area's syntax highlighting features will be improved.
When the markdown editor improvements are finished, we plan on making similar internal changes to the WYSIWYG editor using ToastMark as its state manager. TOAST UI Editor aims at complete independence from WYSIWYG dependencies like Squire and ToMark to be the light yet unified dependable markdown and WYSIWYG editor.
📝 Migration Guide
That's a lot of changes! Can I just proceed with the update?
There have been monumental changes with TOAST UI Editor 2.0. Therefore, there have been numerous changes in usages, but we have prepared a easy-to-follow migration guide for you!
Click on the following link to proceed with your update while following easy step-by-step instructions and explanations.