๐Ÿž๐Ÿ“ Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.

Overview

TOAST UI Editor v3 major update planning ๐Ÿƒ ๐Ÿƒ ๐Ÿƒ

TOAST UI Editor is planning a v3 major update for 2021. You can see our detail RoadMap here!

TOAST UI Editor

GFM Markdown and WYSIWYG Editor - Productive and Extensible

github release version npm version license PRs welcome code with hearth by NHN

๐Ÿšฉ Table of Contents

๐Ÿ“ฆ Packages

TOAST UI Editor

Name Description
@toast-ui/editor Plain JavaScript component

TOAST UI Editor's Wrappers

Name Description
@toast-ui/jquery-editor jQuery wrapper component
@toast-ui/react-editor React wrapper component
@toast-ui/vue-editor Vue wrapper component

TOAST UI Editor's Plugins

Name Description
@toast-ui/editor-plugin-chart Plugin to render chart
@toast-ui/editor-plugin-code-syntax-highlight Plugin to highlight code syntax
@toast-ui/editor-plugin-color-syntax Plugin to color editing text
@toast-ui/editor-plugin-table-merged-cell Plugin to merge table columns
@toast-ui/editor-plugin-uml Plugin to render UML

๐Ÿค– Why TOAST UI Editor?

TOAST UI Editor provides Markdown mode and WYSIWYG mode. Depending on the type of use you want like production of Markdown or maybe to just edit the Markdown. The TOAST UI Editor can be helpful for both the usage. It offers Markdown mode and WYSIWYG mode, which can be switched any point in time.

Productive Markdown Mode

markdown

CommonMark + GFM Specifications

Today CommonMark is the de-facto Markdown standard. GFM (GitHub Flavored Markdown) is another popular specification based on CommonMark - maintained by GitHub, which is the Markdown mostly used. TOAST UI Editor follows both CommonMark and GFM specifications. Write documents with ease using productive tools provided by TOAST UI Editor and you can easily open the produced document wherever the specifications are supported.

  • Live Preview : Edit Markdown while keeping an eye on the rendered HTML. Your edits will be applied immediately.
  • Scroll Sync : Synchronous scrolling between Markdown and Preview. You don't need to scroll through each one separately.
  • Auto Indent : The cursor will always be where you want it to be.
  • Syntax Highlight : You can check broken Markdown syntax immediately.

Easy WYSIWYG Mode

wysiwyg

  • Table : Through the context menu of the table, you can add or delete columns or rows of the table, and you can also arrange text in cells.
  • Code Block Editor : The code block area can be edited through the layer popup editor.

Usability Common UI

UI

  • Toolbar : Through the toolbar, you can style or add elements to the document you are editing.
  • Copy and Paste : Paste anything from browser, screenshot, excel, powerpoint, etc.

Use of Various Extended Functions - Plugins

plugin

CommonMark and GFM are great, but we often need more abstraction. The TOAST UI Editor comes with powerful Plugins in compliance with the Markdown syntax.

Five basic plugins are provided as follows, and can be downloaded and used with npm.

๐ŸŽจ Features

  • Viewer : Supports a mode to display only markdown data without an editing area.
  • Internationalization (i18n) : Supports English, Dutch, Korean, Japanese, Chinese, Spanish, German, Russian, French, Ukrainian, Turkish, Finnish, Czech, Arabic, Polish, Galician, Swedish, Italian, Norwegian, Croatian, Portuguese + language and you can extend.

๐Ÿพ Examples

Here are more examples and play with TOAST UI Editor!

๐ŸŒ Browser Support

Chrome Chrome IE Internet Explorer Edge Edge Safari Safari Firefox Firefox
Yes 10+ Yes Yes Yes

๐Ÿ”ง Pull Request Steps

TOAST UI products are open source, so you can create a pull request(PR) after you fix issues. Run npm scripts and develop yourself with the following process.

Setup

Fork master branch into your personal repository. Clone it to local computer. Install node modules. Before starting development, you should check to see if there are any errors.

$ git clone https://github.com/{your-personal-repo}/tui.editor.git
$ cd [project-name]
$ npm install
$ npm run setup:libs
$ cd ./apps/editor
$ npm install
$ npm run test

Develop

You can see your code is reflected as soon as you saving the codes by running a server. Don't miss adding test cases and then make green rights.

Run webpack-dev-server

$ npm run serve

Run karma

$ npm run test

Pull Request

Before creating a PR, test and check for any errors. If there are no errors, then commit and push.

For more information, please refer to the Contributing section.

๐Ÿ’ฌ Contributing

๐Ÿž TOAST UI Family

๐Ÿš€ Used By

๐Ÿ“œ License

This software is licensed under the MIT ยฉ NHN.

Comments
  • Uncaught TypeError: Cannot read property 'classList' of null

    Uncaught TypeError: Cannot read property 'classList' of null

    Describe the bug A clear and concise description of what the bug is. Uncaught TypeError: Cannot read property 'classList' of null

    To Reproduce Steps to reproduce the behavior:

    I use only Native HTML, CSS, JAVASCRIPT

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css" />
        <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
    </head>
    <body>
        <!-- ERROR -->
        <!--
        <form>
            <div id="editor"></div>
        </form>
        -->
        <div id="editor"></div>
    
        <script src="https://code.jquery.com/jquery-latest.min.js"></script>
        <script src="https://uicdn.toast.com/editor/latest/toastui-jquery-editor.min.js"></script>
        <!-- <script src="https://uicdn.toast.com/editor/latest/i18n/ko-kr.js"></script> -->
        <script>
            const option = {
                initialEditType: 'wysiwyg',
                height: '500px'
            };
            const editor = $('#editor').toastuiEditor(option);
        </script>
    </body>
    </html>
    

    Expected behavior A clear and concise description of what you expected to happen.

    "I cannot use editor with wrapping by <form> tag"

    Screenshots If applicable, add screenshots to help explain your problem.

    Console

    Uncaught TypeError: Cannot read property 'classList' of null
        at e.exports (toastui-jquery-editor.min.js:14)
        at r.i._updateClassByButton (toastui-jquery-editor.min.js:30)
        at r.i._activateTabByButton (toastui-jquery-editor.min.js:30)
        at r.i.activate (toastui-jquery-editor.min.js:30)
        at r.i._render (toastui-jquery-editor.min.js:30)
        at new r (toastui-jquery-editor.min.js:30)
        at r.i._initDOM (toastui-jquery-editor.min.js:30)
        at r [as constructor] (toastui-jquery-editor.min.js:30)
        at new r (toastui-jquery-editor.min.js:30)
        at e.t._initPopupAddImage (toastui-jquery-editor.min.js:30)
    

    Device Information -> SKIP

    Additional context Add any other context about the problem here.

    I want to use i18n with JQuery. But I got error When I add script line in document, ko-kr.js

    Question Wrapper: jQuery 
    opened by ybhwang 20
  • chore(deps): bump prismjs from 1.23.0 to 1.28.0

    chore(deps): bump prismjs from 1.23.0 to 1.28.0

    Bumps prismjs from 1.23.0 to 1.28.0.

    Release notes

    Sourced from prismjs's releases.

    v1.28.0

    Release 1.28.0

    v1.27.0

    Release 1.27.0

    v1.26.0

    Release 1.26.0

    v1.25.0

    Release 1.25.0

    v1.24.1

    Release 1.24.1

    v1.24.0

    Release 1.24.0

    Changelog

    Sourced from prismjs's changelog.

    1.28.0 (2022-04-17)

    New components

    Updated components

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by rundevelopment, a new releaser for prismjs since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    inactive dependencies javascript 
    opened by dependabot[bot] 16
  • Make this editor full screen.

    Make this editor full screen.

    Describe the bug

    While using the method toolbar.insertItem i am getting this error.

    TypeError
    this.el.appendChild is not a function
    

    To Reproduce

    Steps to reproduce the behavior:

    1. Go to https://codesandbox.io/s/fragrant-hooks-gr651?file=/src/App.js:393-411 and https://github.com/nhn/tui.editor/issues/1245
    2. See an error

    Expected behavior

    If I am returning the wrong value then, It should not rise this.el.appendChild is not a function. Because this. el is a class member. see this https://github.com/nhn/tui.editor/blob/3a0e0a93ae1970c2232060bf3ff747dd22413563/apps/editor/src/js/ui/uicontroller.js#L61.

    If i am doing anything wrong then please suggest me.

    Bug 
    opened by ats1999 14
  • Editor capitalizing some code blocks

    Editor capitalizing some code blocks

    hey @nhn another quick question! I can't reproduce this on my computer (I have Ubuntu 16.04 and Firefox) but some of my testers are reporting that the markdown renderer mysteriously capitalizes some code block letters. For example, take a look at the -l rendered below: image

    It of course doesn't come through in the raw text submit via the interface, but the rendering. Any ideas for what we can look for / test?

    Question Category: Style inactive 
    opened by vsoch 14
  • Adding link via toolbar is broken in 3.2.0

    Adding link via toolbar is broken in 3.2.0

    Describe the bug

    I am unable to add a link in wysiwyg mode - after typing the values into the fields and pressing "OK", I get this error in the console:

    index.js:19269 Uncaught ReferenceError: getCustomAttrs is not defined
        at Object.toDOM (index.js:19269:36)
        at MarkViewDesc.create (index.js:1118:117)
        at ViewTreeUpdater.syncToMarks (index.js:1699:45)
        at eval (index.js:1268:21)
        at iterDeco (index.js:1898:13)
        at NodeViewDesc.updateChildren (index.js:1258:9)
        at NodeViewDesc.updateInner (index.js:1355:18)
        at NodeViewDesc.update (index.js:1347:14)
        at ViewTreeUpdater.updateNextNode (index.js:1775:37)
        at eval (index.js:1276:30)
    

    And I've managed to track down the error to this file

    To Reproduce

    Steps to reproduce the behavior:

    1. Create a new editor with default options
    2. Click the toolbar button to add a link
    3. Fill out fields, press OK, observe error (link does not appear, and error appears in console)

    Expected behavior

    Link toolbar button works

    Screenshots

    I took some screenshots of index.js where the error was occurring, the issue seems to be due to compiling at some point. The defined function is getCustomAttrs$1() but is being called as getCustomAttrs() g2048 g2058

    Desktop (please complete the following information):

    • OS: Windows
    • Browser: Brave/Chromium
    • Version: Brave v1.42.88 Chromium 104.0.5112.81

    Additional context

    My environment: vuejs application Vuejs 2.6.11 I am not using the vue-editor wrapper Other toolbar buttons work as intended, I am having no other issues with the editor so far.

    Bug 
    opened by whendon 13
  • Unable to append child into editor div

    Unable to append child into editor div

    I want to insert a div, p or a in the editor with appendChild but it is not working. I can appendChild on any element but not in the editor div. (# prosemirror)

    let fileLink = document.createElement('p'); fileLink.textContent = "hello !"; document.getElementById('ProseMirrorId').appendChild(fileLink);

    Nothing happens.

    last code line works in browser console without appendChild, which means the selector is ok.

    I'm in the wysiwyg view

    editor.insertText works, I wonder if you could add another function like editor.insertElement or insertNode

    Enhancement 
    opened by ClementT3 12
  • Asking for help on the extension of the WYSIWYG rendering formula of tui.editor

    Asking for help on the extension of the WYSIWYG rendering formula of tui.editor

    Because I need to solve the problem that the WYSIWYG editor can not convert normally when it parses mathematical formulas similar to the following:

    \(\sqrt{3}\)
    \[\sqrt{3}\]
    

    Our plug-in supports the parsing of plug-ins and non-code blocks using code block mode. At present, the Review and rendered documents have been transformed and parsed directly through plug-ins, but it still can not solve the normal rendering of WYSIWYG editor. Therefore, we intend to re-encapsulate the converter and replace it with an extended way.

    But after trying, we found that we could not get the built-in converter of tui.editor directly. We asked for help and told us what we should do. Or is there another way to solve this problem perfectly? Do you need to customize the tui.editor code?

    Question Category: Extension inactive 
    opened by jack9603301 12
  • Canยดt make the editor work

    Canยดt make the editor work

    Version

    Version 1.1 from "Production" Branch

    Test Environment

    Client: Chrome 63.0.3239.13, Windows 10 64 Bits Server: Ubuntu 16.04 LTS, NGINX, PHP-FPM, PHP 7.2, Laravel 5.5

    Current Behavior

    I canยดt load the editor, using the file "tui-editor-Editor-all.min.js": gives me this error: Uncaught TypeError: Cannot read property 'WwCodeBlockManager' of undefined With this file: "tui-editor-Editor.min.js" it gives me this error: Uncaught TypeError: (0 , r.default) is not a function

    Code example

    <script src="{{ asset('/plugins/tui-editor/dist/tui-editor-Editor-all.min.js') }}" type="text/javascript"></script>    
        <link href="{{ asset('/plugins/tui-editor/dist/tui-editor.min.css') }}" rel="stylesheet" type="text/css" />
        <link href="{{ asset('/plugins/tui-editor/dist/tui-editor-contents.min.css') }}" rel="stylesheet" type="text/css" />
    
    <div id="editSection"></div>
    
    <script>
            $('#editSection').tuiEditor({
                initialEditType: 'markdown',
                previewStyle: 'vertical',
                height: '300px'
              });
            });
    </script>
    

    Expected Behavior

    Show the Editor in the div selected.

    Enhancement Question 
    opened by brunonetadmin 12
  • How to cancel auto focus after initialization?

    How to cancel auto focus after initialization?

    Summary

    Now that the TOAST UI Editor instance is created, it will automatically focus the browser on the editor, which will affect the user experience. This is not the case with the v2 version. How can I cancel the auto focus?

    Screenshots

    c0ef40d3-0eff-48f8-84fb-8a5ba3256dad

    Version

    3.0.1

    Additional context

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
        <style>
            #content {
                text-align: center;
                font-size: 10em;
                background-color: #eee;
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <div id="content">1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10</div>
        <div id="editor"></div>
        <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
        <script>
            window.onload = function() {
                const editor = new toastui.Editor({
                    el: document.querySelector('#editor'),
                    previewStyle: 'vertical',
                    height: '500px',
                    initialValue: 'hello world'
                });
            }
        </script>
    </body>
    </html>
    
    Enhancement Question 
    opened by big-dream 11
  • TOAST UI Editor `3.0.0-alpha.0` is released!

    TOAST UI Editor `3.0.0-alpha.0` is released!

    TOAST UI Editor new alpha version is released!

    TOAST UI Editor 3.0.0-alpha.0 is released. As previously shared on the roadmap, v3.0 has improved many things, including model abstraction, custom syntax support, and plug-in systems. To this end, all new structural changes were made, and it took quite a long time. In this process, we wrote all new code using typescript to gain the advantage of static type checking and prevent potential bugs. Here is the summary of some of the biggest changes in v3.0.๐Ÿ‘‡

    Model Abstraction(with ProseMirror)

    we select a Prosmirror for Model Abstraction. Because Prosmirror provides the schema to customize and provides DOM manipulation as a high-level API, it has greatly aided the maintenance of editor code and the possibility of various feature extensions.

    • Based on markdown, internal node schema were created and managed, and structurally command, keymap, and so on, making it easier to understand features and rendering structures.
    • We could remove a large amount of pre/post processing code for the DOM manipulation in the WYSIWYG editor.
    • This structural integration of core module has also eliminated many dependencies, resulting in a significant reduction in bundle capacity.(approximately 100 kb)
    • It is possible to support syntax such as custom blocks, which in turn allows plugin system to be provided as a more concise option.

    Below is an example of ListItem node. We define nodes in the form of abstracted model, and we can easily read related commands and keymaps in same domain.

    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 {
            // ...
    
            return [
              'li',
              {
                class: classNames.join(' '),
                'data-task': task,
                ...(checked && { 'data-task-checked': checked }),
              },
              0,
            ];
          },
        };
      }
    
      commands(): EditorCommand {
        // ...
      }
    
      keymaps() {
        return {
          Enter: this.commands()(),
        };
      }
    }
    
    

    Plugin Improvement

    The previous method of creating plugins by accessing the editor's internal properties or by directly manipulating DOM complicates the code and creates high level of coupling between the editor and the plugin. We removed all of these dependencies and changed the plugin to work with only a few specific information of the editor. In doing so, the plugin separated to operate with minimal information about the editor. In particular, codes that customize the toolbar or manipulate WYSIWYG's nodes can be defined much more concisely in plug-ins. If you look at the newly changed color picker or merge table plugin, you can see that it is much simpler and more readable.

    Below is an example of a color picker plugin. The option format is more concise and declarative than before.

    export default function colorSyntaxPlugin(
      context: PluginContext,
      options: PluginOptions = {}
    ): PluginInfo {
      // ...
      return {
        markdownCommands: {
          color: ({ selectedColor }, { tr, selection, schema }, dispatch) => {
            // ...
          },
        },
        wysiwygCommands: {
          color: ({ selectedColor }, { tr, selection, schema }, dispatch) => {
            // ...
          },
        },
        toolbarItems: [
          {
            groupIndex: 0,
            itemIndex: 3,
            item: toolbarItem,
          },
        ],
        toHTMLRenderers: {
          htmlInline: {
            span(node: MdLikeNode, { entering }: Context) {
              return entering
                ? { type: 'openTag', tagName: 'span', attributes: node.attrs }
                : { type: 'closeTag', tagName: 'span' };
            },
          },
        },
      };
    }
    

    UI structure

    The editor's UI was often directly exposed to the outside, and internally it was very difficult to manage due to unnecessary inheritance structures. To improve this, we introduce a declarative UI that is being adopted by modern front-end frameworks like Vue, React. The spaghetti codes inside have been reduced much more concisely due to our declarative codes based on very small virtual DOM. I and my colleagues, who are already somewhat familiar with Vue, React, were able to easily expand the UI in this structure, which gave us quite a good experience.

    Below is an example of a Link popup UI.

    export class LinkPopupBody extends Component<Props> {
      // ...
    
      mounted() {
        this.initialize();
      }
    
      render() {
        return html`
          <div>
            <label for="toastuiLinkUrlInput">${i18n.get('URL')}</label>
            <input
              id="toastuiLinkUrlInput"
              type="text"
              ref=${(el: HTMLInputElement) => (this.refs.url = el)}
            />
            <label for="toastuiLinkTextInput">${i18n.get('Link text')}</label>
            <input
              id="toastuiLinkTextInput"
              type="text"
              ref=${(el: HTMLInputElement) => (this.refs.text = el)}
            />
            <div class="${cls('button-container')}">
              <button type="button" class="${cls('close-button')}" onClick=${this.props.hidePopup}>
                ${i18n.get('Cancel')}
              </button>
              <button type="button" class="${cls('ok-button')}" onClick=${this.execCommand}>
                ${i18n.get('OK')}
              </button>
            </div>
          </div>
        `;
      }
    }
    

    Document

    Currently, documents have not yet been prepared for our new alpha version. We will update the migration guide and tutorial guide sequentially. First, a description of custom block and widget nodes can be seen briefly as below.

    Enhancement Need Discussion 
    opened by js87zz 11
  • fix: link mark no longer building with misnamed getCustomAttrs (fix #2687, #2671, #2730)

    fix: link mark no longer building with misnamed getCustomAttrs (fix #2687, #2671, #2730)

    Please check if the PR fulfills these requirements

    • [x] It's the right issue type on the title
    • [x] When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
    • [x] The commit message follows our guidelines
    • [ ] Tests for the changes have been added (for bug fixes/features)
    • [ ] Docs have been added/updated (for bug fixes/features)
    • [x] It does not introduce a breaking change or has a description of the breaking change

    I'm not fully sure why but the cast or comment on the changed lines caused the bundler to compile the code wrong. I found this fix by accident by removing the unnecessary cast.

    opened by jethrolarson 10
  • chore(deps-dev): bump @types/node from 17.0.23 to 18.11.18

    chore(deps-dev): bump @types/node from 17.0.23 to 18.11.18

    Bumps @types/node from 17.0.23 to 18.11.18.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies javascript 
    opened by dependabot[bot] 0
  • chore(deps-dev): bump lerna from 3.22.1 to 6.3.0

    chore(deps-dev): bump lerna from 3.22.1 to 6.3.0

    Bumps lerna from 3.22.1 to 6.3.0.

    Release notes

    Sourced from lerna's releases.

    v6.3.0

    6.3.0 (2022-12-26)

    Features

    • version: support custom command for git tag (#2760) (6eac92f)
    • version: use npmClientArgs in npm install after lerna version (#3434) (e019e3f)

    v6.2.0

    6.2.0 (2022-12-13)

    Bug Fixes

    • core: more detailed error message when version cannot be found (#3424) (b729b0c)
    • schema: add the other format changelogPreset can assume (#3441) (d286973)
    • utils: check validity of bundledDependencies before iteration (#2960) (2517ffb)

    Features

    v6.1.0

    6.1.0 (2022-11-29)

    Bug Fixes

    • run: detect target configuration in package.json files (#3432) (798aae1)

    Features

    • version: bump prerelease versions from conventional commits (#3362) (2288b3a)

    v6.0.3

    6.0.3 (2022-11-07)

    Bug Fixes

    • publish: support inconsistent workspace prefix usage (#3413) (da2274b)
    • version: only apply prettier if it was explicitly installed (#3406) (0161bbe)

    v6.0.2

    6.0.2 (2022-11-02)

    ... (truncated)

    Changelog

    Sourced from lerna's changelog.

    6.3.0 (2022-12-26)

    Features

    • version: use npmClientArgs in npm install after lerna version (#3434) (e019e3f)

    6.2.0 (2022-12-13)

    Bug Fixes

    • schema: add the other format changelogPreset can assume (#3441) (d286973)

    Features

    6.1.0 (2022-11-29)

    Features

    • version: bump prerelease versions from conventional commits (#3362) (2288b3a)

    6.0.3 (2022-11-07)

    Note: Version bump only for package lerna

    6.0.2 (2022-11-02)

    Note: Version bump only for package lerna

    6.0.1 (2022-10-14)

    Bug Fixes

    • run: allow for loading of env files to be skipped (#3375) (5dbd904)

    6.0.0 (2022-10-12)

    Note: Version bump only for package lerna

    6.0.0-alpha.2 (2022-10-12)

    Bug Fixes

    6.0.0-alpha.1 (2022-10-09)

    6.0.0-alpha.0 (2022-10-07)

    ... (truncated)

    Commits
    • 329eb99 chore(release): v6.3.0
    • e019e3f feat(version): use npmClientArgs in npm install after lerna version (#3434)
    • e057f56 chore(release): v6.2.0
    • 027d943 feat(publish): add --summary-file option (#2653)
    • d286973 fix(schema): add the other format changelogPreset can assume (#3441)
    • 05ad186 chore(release): v6.1.0
    • 9bb67c1 chore: refactor e2e tests to allow for DTE and caching (#3439)
    • af59f88 chore: docs improvements
    • 3a7a1ea chore(add-caching): update messages for clarity (#3435)
    • 2288b3a feat(version): bump prerelease versions from conventional commits (#3362)
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by jameshenry, a new releaser for lerna since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies javascript 
    opened by dependabot[bot] 0
  • chore(deps): bump json5 and rollup-plugin-vue

    chore(deps): bump json5 and rollup-plugin-vue

    Bumps json5 to 2.2.2 and updates ancestor dependency rollup-plugin-vue. These dependencies need to be updated together.

    Updates json5 from 2.2.1 to 2.2.2

    Release notes

    Sourced from json5's releases.

    v2.2.2

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).
    Changelog

    Sourced from json5's changelog.

    v2.2.2 [code, diff]

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).
    Commits
    • 14f8cb1 2.2.2
    • 10cc7ca docs: update CHANGELOG for v2.2.2
    • 7774c10 fix: add proto to objects and arrays
    • edde30a Readme: slight tweak to intro
    • 97286f8 Improve example in readme
    • d720b4f Improve readme (e.g. explain JSON5 better!) (#291)
    • 910ce25 docs: fix spelling of Aseem
    • 2aab4dd test: require tap as t in cli tests
    • 6d42686 test: remove mocha syntax from tests
    • 4798b9d docs: update installation and usage for modules
    • Additional commits viewable in compare view

    Updates rollup-plugin-vue from 5.1.9 to 6.0.0

    Changelog

    Sourced from rollup-plugin-vue's changelog.

    6.0.0 (2020-11-25)

    Features

    6.0.0-beta.11 (2020-11-02)

    Bug Fixes

    • add language fallback for template code (#407) (e334e8c)
    • avoid adding render function when no template in an SFC (#387) (6960203)
    • avoid conflicting filename for sourcemaps (#375) (4ec1315)
    • default render function name for ssr (#402) (714afd7)
    • support options for template block preprocessor render (#377) (3222451)

    Features

    • add watchers to imports within vue files (#385) (cd41410)

    6.0.0-beta.9 (2020-07-16)

    Features

    • distinguish options for different CSS preprocessing languages (#366) (860595e)

    6.0.0-beta.8 (2020-07-15)

    Bug Fixes

    • backwards compat with older versions of compiler-sfc (7cb9fa4)

    6.0.0-beta.7 (2020-07-15)

    Features

    ... (truncated)

    Commits

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) You can disable automated security fix PRs for this repo from the Security Alerts page.
    dependencies javascript 
    opened by dependabot[bot] 0
  • fix: use html entity for consecutive newlines (fix #2394 #2586)

    fix: use html entity for consecutive newlines (fix #2394 #2586)

    Please check if the PR fulfills these requirements

    • [X] It's the right issue type on the title
    • [X] When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
    • [X] The commit message follows our guidelines
    • [X] Tests for the changes have been added (for bug fixes/features)
    • [X] Docs have been added/updated (for bug fixes/features)
    • [X] It does not introduce a breaking change or has a description of the breaking change

    Description

    Consecutive newlines could be made by using html entities, e.g. space &#32;, which are completely compliant with the markdown spec. Current implementation with <br> breaks a lot of things.

    This PR replaces <br> with a space HTML-entity &#32;, and also reverts #2598 for the following reasons:

    1. You instantly get an invalid markdown if you add an empty line to a list item
    2. Having 2 separate lists with only a newline between them is a rare and weird case, while having a newline in a list item is much more common.

    I understand why you want markdown to reflect WYSIWYG as much as possible, but have you ever had a case when you needed 2 lists separated by an empty line? I can't imagine one, so let's consider it a feature - auto-merging of consecutive lists :)

    opened by kshnurov 0
  • <img class= has no alt option">

    has no alt option

    Summary

    Hello. I use tui-editor on React+Next.js React+Next.js ํ™˜๊ฒฝ์—์„œ tui-editor๋ฅผ ์‚ฌ์šฉ์ค‘์ž…๋‹ˆ๋‹ค.

    When I attach an image via URL, 2 lines below comes together. ์—๋””ํ„ฐ์—์„œ ์ด๋ฏธ์ง€ url๋กœ ์ถ”๊ฐ€ํ•˜๊ธฐ๋ฅผ ํ•˜๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ๋‘ ๊ฐœ์˜ ํƒœ๊ทธ๊ฐ€ ์ž๋™์œผ๋กœ ์ถ”๊ฐ€๋˜๋Š”๋ฐ image

    Because I'm modifying my web page for Web Accessibility, the blank tag must have an alt option. ํ˜„์žฌ ์›น์ ‘๊ทผ์„ฑ ์ธ์ฆ ๊ธฐ์ค€์— ๋งž์ถฐ ๊ฐœ๋ฐœ์ค‘์ธ ํ„ฐ๋ผ ๋นˆ ํƒœ๊ทธ์— alt ์˜ต์…˜์ด ๋ฐ˜๋“œ์‹œ ๋“ค์–ด๊ฐ€์•ผ ํ•ฉ๋‹ˆ๋‹ค.

    I have no idea how I fix it. Any advice please? thank you ์–ด๋–ค ๋ถ€๋ถ„์„ ํ™•์ธํ•ด๋ด์•ผ ํ• ์ง€ ์ž˜ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. ์กฐ์–ธ ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

    Screenshots

    image Sadly, at the tui-editor example page makes the alt option. ํŠœํ† ๋ฆฌ์–ผ ํŽ˜์ด์ง€์— ์žˆ๋Š” ์—๋””ํ„ฐ์—์„œ๋Š” alt๊ฐ€ ํ•จ๊ป˜ ์ƒ์„ฑ๋˜์–ด ๋‚˜์˜ค๋Š” ๊ฑธ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    Version

    Write the version of the Editor you are currently using. "@toast-ui/editor": "^3.2.1", "@toast-ui/react-editor": "^3.2.2", I have tried from ^3.1.3 ~ latest.

    "typescript": "^4.5.5" "react": "^17.0.2", "next": "^12.1.4", yarn: 3.2.0

    Additional context

    Add any other context about the problem here.

    Question 
    opened by Jan870221 0
  • fix: dropdown and popup position at small screen (fix: #2909)

    fix: dropdown and popup position at small screen (fix: #2909)

    Please check if the PR fulfills these requirements

    • [x] It's the right issue type on the title
    • [x] When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
    • [x] The commit message follows our guidelines
    • [ ] Tests for the changes have been added (for bug fixes/features)
    • [ ] Docs have been added/updated (for bug fixes/features)
    • [x] It does not introduce a breaking change or has a description of the breaking change

    Description

    Fix of #2909

    | before | after | |------|---| | ์Šคํฌ๋ฆฐ์ƒท 2022-12-28 ์˜คํ›„ 9 43 13 | ์Šคํฌ๋ฆฐ์ƒท 2022-12-28 ์˜คํ›„ 9 42 58 | | ์Šคํฌ๋ฆฐ์ƒท 2022-12-28 ์˜คํ›„ 10 14 14 | ์Šคํฌ๋ฆฐ์ƒท 2022-12-28 ์˜คํ›„ 10 14 22 |


    Thank you for your contribution to TOAST UI product. ๐ŸŽ‰ ๐Ÿ˜˜ โœจ

    opened by Jtree03 0
  • [email protected](Sep 29, 2022)

    Fixes

    • fix: link mark no longer building with misnamed getCustomAttrs (fix #2687, #2671, #2730) by @jethrolarson in https://github.com/nhn/tui.editor/pull/2729
    • docs: correct the typo(close #2743) by @D0Dam in https://github.com/nhn/tui.editor/pull/2746

    Full Changelog: https://github.com/nhn/tui.editor/compare/[email protected]@3.2.1

    Source code(tar.gz)
    Source code(zip)
  • [email protected](Aug 5, 2022)

    Features

    • feat: add plugin interface (editorCore instance, keymap) by @jwlee1108 in https://github.com/nhn/tui.editor/pull/2647

    Environments

    • env: update prosemirror versions (fix #2631) by @jajugoguma in https://github.com/nhn/tui.editor/pull/2648

    Full Changelog: https://github.com/nhn/tui.editor/compare/[email protected]@3.2.0

    Source code(tar.gz)
    Source code(zip)
  • [email protected](Jul 27, 2022)

    Fixes

    • fix: add missing type definition by @jajugoguma in https://github.com/nhn/tui.editor/pull/2628

    Environments

    • env: temporary prosemirror dependency policy changes to avoid breaking changes by @jajugoguma in https://github.com/nhn/tui.editor/pull/2627

    Full Changelog: https://github.com/nhn/tui.editor/compare/[email protected]@3.1.10

    Source code(tar.gz)
    Source code(zip)
  • [email protected](Jul 26, 2022)

  • [email protected](Jul 12, 2022)

    BugFixes

    • fix: convert by using HTML tag when it is not between spaces by @jajugoguma in https://github.com/nhn/tui.editor/pull/2572
    • fix: escape backslash in the middle of sentence by @jajugoguma in https://github.com/nhn/tui.editor/pull/2588
    • fix: keep empty line between lists by @jajugoguma in https://github.com/nhn/tui.editor/pull/2598

    Full Changelog: https://github.com/nhn/tui.editor/compare/[email protected]@3.1.8

    Source code(tar.gz)
    Source code(zip)
  • [email protected](May 19, 2022)

  • [email protected](May 19, 2022)

  • [email protected](Apr 25, 2022)

  • [email protected](Apr 25, 2022)

  • [email protected](Apr 25, 2022)

    Feature

    • Added feature that emitschange event when toggle task in viewer (#2442)
    • Expand plugin interface to containing inputRules, InputRule,undoInputRule in pmRules and PluginKey in pmState. (#2451)

    Bugfixes

    • Fixed that getHTML() API includes placeholder HTML. (#2301)
    • Fixed that typo in german translation (#2391)
    • Fixed that HTML escape is not correct when switching editing mode. (#2382)
    Source code(tar.gz)
    Source code(zip)
  • [email protected](Feb 10, 2022)

    Bugfixes

    • Fixed that addImageBlobHook is not triggered in WYSIWYG when copying the image through the browser. (#2054)
    • Fixed that users cannot exit table in wysiwyg. (#2250)
    • Fixed the miscalculated wysiwyg table mapping offset. (#2251)
    • Fixed the wrong htmlBlock converting. (#2252)
    • Fixed the wrong link, image escape when converting. (#2267)
    • Fixed that the editor cannot clear the timer in editor and chart plugin. (#2270)
    • Fixed the wrong popup widget position when scrolling. (#2271)
    • Fixed the editor cannot find the markdown node in iframe. (#2272)
    • Fixed that the editor cannot control undo, redo command using useCommandShortcut option. (#2274)
    • Fixed the script error when converting $$text$$ text. (#2275)
    • Fixed that undefined is registered as the event to editor, viewer in react wrapper. (#2292)
    • The indent, outdent toolbar items are only enabled in the list node. (#2294)
    • Fixed that the editor cannot convert html comment node. (#2297)
    • Fixed that the editor cannot find the element using document.querySelector() in case of multiple editor instances. (#2298)

    Enhancement

    • Added the customBlock command. (#2273)
    Source code(tar.gz)
    Source code(zip)
  • [email protected](Dec 27, 2021)

    Bugfixes

    • Fixed that editor cannot replace popup element when custom popup component is updated. Thanks for @PaulSchult. (#2029)
    • Fixed the unexpected dragging custom block element in wysiwyg. Thanks for @z-950. (#2049)
    • Fixed that the user cannot disable initial focus with autofocus option on markdown tab mode. Thanks for @zhousg. (#2085)
    • Fixed that the editor cannot execute markdown list command below the heading text. (#2102)
    • Fixed that Heading state remains when changed to Paragraph in WYSIWYG mode. (#2103)
    • Fixed that the editor fails to render content if table syntax is wrong. (#2104)
    • Fixed the wrong escape with link, image url when converting. (#2105)
    • Fixed onLoad event is not triggered in react wrapper. (#2107)
    • Fixed overflowing text in viewer. (#2133)
    • Fixed that the "Link Text" popup field is no filled with the current selected text when clicking 'link' button. (#2142)
    • Fixed the broken converting to markdown when the node has double quote string attribute value. (#2143)
    Source code(tar.gz)
    Source code(zip)
  • [email protected](Dec 3, 2021)

    Bugfixes

    • Checked if the mso-list attribute is available before treating a paragraph as a list item. Thanks for @paddya. (#1682)
    • Fixed frozen browser when cutting table contents. (#2055)
    Source code(tar.gz)
    Source code(zip)
  • [email protected](Oct 27, 2021)

    Bugfixes

    • Fixed that <br> operation when converting editor mode, pasting data or calling API.(#1807)
    • Fixed the vulnerability about sanitizer using DOMPurify.(#1813)
    • Fixed that the user cannot add line break in list using shift + enter key.(#1816)
    • Fixed the wrong type definition(@toast-ui/editor/dist/toastui-editor-viewer).(#1853)
    • Fixed that the line breaks are removed when pasting the viewer data to editor.(#1854)
    • Fixed that the user cannot close toolbar popup.(#1855)
    • Fixed that the table head is missing when pasting the table from ms word.(#1857)
    • Added the missing exports(toastui-editor-only.css).(#1946)
    Source code(tar.gz)
    Source code(zip)
  • [email protected](Oct 27, 2021)

  • [email protected](Oct 27, 2021)

  • [email protected](Sep 7, 2021)

    Features

    • Added autofocus option to control the focus on initial creation of the editor. Thanks for @azmeuk.(#1772)
    const editor = new Editor({
      el: document.querySelector('#editor'),
      autofocus: false,
      // ...
    });
    

    The default value of the option is true, which automatically focuses the editor.

    Bugfixes

    • Fixed that the editor breaks converting when tables have invalid list HTML.(#1780)
    • Fixed that the editor cannot apply empty string attributes to wysiwyg node.(#1781)
    • Fixed that user cannot insert the $$ text due to custom inline syntax.(#1791)
    • Fixed that the editor fails to convert list having blockQuote with spaces to wysiwyg.(#1792)
    Source code(tar.gz)
    Source code(zip)
  • [email protected](Aug 17, 2021)

    Bugfixes

    • Fixed wrong selection layer position in table popup body.(#1744)
    • Fixed that the wysiwyg editor contents disappeared in IE11.(#1745)
    • Fixed the toolbar width cannot be adjusted as resizing the container width.(#1747, #1755)

    Environment

    • Added wrapper esm bundle.(#1754)
    • Transpiled vue wrapper bundle to es5.(#1754)
    Source code(tar.gz)
    Source code(zip)
  • [email protected](Aug 5, 2021)

    Enhancement

    • Improved the translation of the Russian. Thanks for @grimalschi (#1685)
    • Added aria attributes to editor component. Thanks for @lucaslcode (#1696)

    Bugfixes

    • Improved the vulnerability of sanitizer(base tag, onload xss).(#1670)
    • Fixed exceeding toolbar popup button width in viewport.(#1671)
    • Fixed internal tag black list operation for sanitizer. Thanks for @z-950 (#1679).
    • Fixed that wysiwyg height option was not operated in table tag.(#1697)
    • Fixed exceeding toolbar popup width in viewport.(#1698)
    • Fixed parsing the br tag is broken.(#1699)
    • Fixed that the internal smart task plugin triggered script error .(#1700)
    • Fixed the wrong escape when converting wysiwyg to markdown.(#1719)
    • Fixed that user cannot import i18n bundle in webpack5 or rollup.(#1720)
    • Fixed broken parsing when removing the blank line in markdown.(#1721)

    Environment

    • added github action script for deployment automation.(#1731, #1732)

    Document

    • Fixed the typo in READMd.md. Thanks for @knightwolfjk (#1713).
    Source code(tar.gz)
    Source code(zip)
  • [email protected](Jul 14, 2021)

    Bugfixes

    • Fixed broken composition in squire selection.(#1668)
    • Fixed wrong converting bullet list item with the ordered number contents.(#1669)
    Source code(tar.gz)
    Source code(zip)
  • [email protected](Jul 7, 2021)

    Bugfixes

    • Added type="button" to file upload button.(#1585)
    • Fixed that addImageBlobHook inserts image twice.(#1623)
    • Fixed wrong parsing of html attrs.(#1630)
    • Fixed that getHTML API triggers change event.(#1632)
    • Fixed that the custom toolbar item cannot be toggled with active, disabled state.(#1639)
    • Fixed wrong customHTMLRenderer option type definition.(#1640)
    • Fixed that encode link url unnecessarily.(#1641)
    • Fixed that editor cannot parse the br tag when calling setHTML API.(#1644)

    Environment

    • added missing dev dependencies.(#1649)
    • change bundling format of the chart, uml, color-syntax plugins to umd for compatibility of the webpack4.(#1649)
    Source code(tar.gz)
    Source code(zip)
  • [email protected](Jul 5, 2021)

  • v3.0.0(Jun 17, 2021)

    ๐ŸŽŠ TOAST UI Editor 3.0 ๐ŸŽŠ

    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.

    We worked on TOAST UI 3.0 with not only markdown on our mind but also improving the overall structure of the editor and the usage. We added ways for our users to extend our editor's functionalities including custom markdown syntax support, widget node insertion, and improved plugin system and we also overhauled the design to be more sleek and modern. ๐Ÿ™Œ

    Let's take a look at the TOAST UI Editor 3.0's new changes.

    ๐Ÿง 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.

    In other words, because the two editors edited and managed data differently, the controlling structures were also completely different. Therefore, there were issues with internal code consistency and feature extension.

    • When adding or editing certain text, despite the similarity in task, the editors have to use two different APIs and options.
    • 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.

    Granted markdown is a text-based editor and WYSIWYG editor is a DOM node-based editor, so the data model structures must be different. However, if two editors were to use a singular module to manage the nodes, classes and structures of operations that abstractify data or manage data can be used uniformly.

    • Customizing the editor using options and APIs as users is a painstaking task. If a user were to customize a certain node's rendered result, the user would have to make the changes for both the markdown editor as well as the WYSIWYG editor according to their structures.

    In order to deal with this issue, we used the Prosemirror, a development tool used to build a WYSIWYG editor, for TOAST UI Editor 3.0, and we were able to unify the internal dependencies of the editors into one. The unified dependency allowed us to follow a single, internal structure, and we were able to remove the past dependencies including CodeMirror, squire, and to-mark.

    // 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()(),
        };
      }
    }
    

    Furthermore, we reduced the total file size of the bundle by about thirty percent from 602.1KB to 495.6KB.

    images

    Our decision to use Prosemirror will be discussed in a separate article.

    Since v3.0 also provides a ESM bundle, if you do not need legacy browser support, you can use the ESM bundle to use the editor more efficiently.

    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.

    Using custom syntax, users can use KaTex syntax to represent mathematical expressions as shown in the following example.

    Markdown image

    WYSIWYG image

    As you can see in the above images, you can enter any text to use custom syntax in the block surrounded by the $$ symbol. Using custom syntax, users can define their own parsing logic to render text that isn't supported by markdown.

    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;
          },
        },
      ],
    });
    

    As you can see in the example code, the widgetRules define the rules in an array, and each rule is attributed as rule and toDOM properties.

    • rule: Must be a RegExp value, and any text that fits the expression is substituted as widget node.
    • toDOM: Define the DOM node of the widget node that will be rendered.

    image

    You can also insert the widget node synced with a popup widget as shown below.

    image

    Plugin System

    TOAST UI Editor offers five plugins out of the box.

    | Plugin | Description | | --- | --- | | chart | Plugin for rendering charts | | code-syntax-highlight | Plugin for syntax highlighting | | color-syntax | Plugin for color picker | | table-merged-cell | Plugin for table merged cells | | uml | Plugin for UML |

    Aside from the five default plugins, users can also define their own plugin functions. Previously in v2.0, there was no clear format for defining plugins, and users had to access the editor instance directly as shown below. The previous method of defining plugins made it difficult for users to understand the code by creating a strong coupling between the editor and the plugin.

    v2.0

    export default function colorSyntaxPlugin(editor, options = {}) {
      // ...
      editor.eventManager.listen('convertorAfterMarkdownToHtmlConverted', html => {
        // ...
      });
    
      editor.eventManager.listen('convertorAfterHtmlToMarkdownConverted', 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');
    
            // ...
          }
        });
      }
    });
    

    The code above is a little snippet of the color-syntax plugin code from the v2.0. Without a predefined format, there was a lot of editor API dependent code, and there are even codes that have to access CodeMirror and squire directly to control the internal states.

    TOAST UI Editor 3.0 has removed all of the previous foundational structures and has made it so that users can define the plugins in a predefined format. Furthermore, the plugin is now separated to function even with a minimal access to the editor.

    v3.0

    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,
          },
        ],
        // ...
      };
    }
    

    Newly defined color-syntax plugin code is comparatively simpler and easier to read than the previous code. The object returned from the plugin function has properties (markdownCommands, wysiwygCommands, and toolbarItems) that clearly illustrate their responsibilities and controls. Moreover, the properties in this process are not dependent on the editor API or the editor's properties.

    The improved plugin system makes it easier for the users to add the v3.0's new custom markdown syntax or to register commands. Currently, the editor ships with five default plugins, but we plan on adding more plugins that support summary and details tags as well as autocomplete popup plugins.

    To apply the newly improved plugin system, check out the migration guide!

    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.

    v2.0 image

    v3.0 image

    Furthermore, the Dark Theme has been added.

    // ...
    import '@toast-ui/editor/dist/toastui-editor.css';
    import '@toast-ui/editor/dist/theme/toastui-editor-dark.css';
    
    const editor = new Editor({
      // ...
      theme: 'dark'
    });
    

    image

    ๐Ÿ“ 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.

    Migration Guide(๐Ÿ‡บ๐Ÿ‡ธ): https://github.com/nhn/tui.editor/blob/master/docs/v3.0-migration-guide.md

    The features mentioned above are explained in greater detail in the following guides.

    • Custom Syntax: https://github.com/nhn/tui.editor/tree/master/docs/en/custom-block.md
    • Widget Node: https://github.com/nhn/tui.editor/tree/master/docs/en/widget.md
    • Plugin: https://github.com/nhn/tui.editor/tree/master/docs/en/plugin.md

    โœ Additional Changes

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

    • Applying TypeScript We rewrote the entire codebase in TypeScript. This allowed us to prevent unidentified errors through static type checking and to write error proof code through type hinting.
    • Applying Virtual DOM We built our own virtual DOM and changed the original command based DOM manipulation code to be more declarative. This change was easy because we were already familiar with libraries like React and Vue.js, and through this, we were able to reduce the amount of UI component codes by nearly 40%.
    • Applying Modern Dev Tools We used dev tools with no-bundling philosophies like snowpack to increase productivity. Moreover, npm7's workspace allowed us to manage the dependencies among monorepo packages more efficiently.

    ๐Ÿš€ 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.

    For now, we are planning on following updates in the future. ๐Ÿ’ช

    • Extending the Plugin Ecosystem
    • Server Side Rendering (SSR) Support
    • Synchronous Editing Feature

    We are planning on researching and developing synchronous editing, which was not possible before, as well as extending default plugins and customizable options. Furthermore, the compatibility between two editors will be enhanced, and the performance dealing with large documents will be optimized.

    The TOAST UI Editor's Github is always open! Look forward to our future updates! ๐Ÿ˜€

    Source code(tar.gz)
    Source code(zip)
  • [email protected](Apr 16, 2021)

    Bug Fixes

    Editor

    • c7450cf incorrect type definitions in customHTMLRendererprop (#1460)
    • 11b40c3 fixed that cannot convert details, summary block using useDefaultHTMLSanitizer: false option (#1472)
    Source code(tar.gz)
    Source code(zip)
  • [email protected](Dec 23, 2020)

  • [email protected](Nov 24, 2020)

    Bug Fixes

    Editor

    • 16203d1 The list is not created in a WYSIWYG table when the editor's container is a list (#1254)
    • 65e8ee1 Incorrect pasting if data copied from MS Office has styling (#1258)
    Source code(tar.gz)
    Source code(zip)
  • [email protected](Nov 3, 2020)

  • [email protected](Oct 21, 2020)

    New Features

    Editor

    • 929dc94 [WYSIWYG] Add and edit link to image (#1208)
    • b129c66 Support Portuguese language (pt-BR) (#1220)

    Bug Fixes

    Editor

    • 90143c4 Fix a problem that when copying a child list, it was pasted in an indented state (#1230)
    • b129c66 Revised Norwegian for i18n (#1207)
    Source code(tar.gz)
    Source code(zip)
  • [email protected](Oct 21, 2020)

  • [email protected](Sep 10, 2020)

    New Features

    Editor

    const editor = new Editor({
      frontMatter: true
    });
    

    frontmatter

    • 855abe6 Support Croatian language (hr-HR) (#1162)
    • 4df75a0 [Markdown] Add key action to table in markdown (#1126)

    Case 1: tab (or shift + tab) key

    Pressing the tab key in the markdown table moves the cursor cell by cell.

    Case 2 : enter key

    Pressing the enter key in the markdown table adds the syntax for the new row.

    • 151f98e [Viewer] Add an internal attribute to disable task markers when using the customHTMLRenderer option (#1163)

    Bug Fixes

    Editor

    • 60e747a Type inference is wrong when table-merged-cell plugin is set in the plugin option (#1160)
    • b312e15 [Markdown] Syntax highlighting is broken when wrapping text containing blank lines with fence code block syntax (#1167)
    • be8f7b3 [WYSIWYG] Format is broken when copying or pasting a list in MS Office (#1153)
    Source code(tar.gz)
    Source code(zip)
A markdown editor. http://lab.lepture.com/editor/

Editor A markdown editor you really want. Sponsors Editor is sponsored by Typlog. Overview Editor is not a WYSIWYG editor, it is a plain text markdown

Hsiaoming Yang 2.8k Dec 19, 2022
The next generation Javascript WYSIWYG HTML Editor.

Froala Editor V3 Froala WYSIWYG HTML Editor is one of the most powerful JavaScript rich text editors ever. Slim - only add the plugins that you need (

Froala 5k Jan 1, 2023
A modern, simple and elegant WYSIWYG rich text editor.

jQuery-Notebook A simple, clean and elegant WYSIWYG rich text editor for web aplications Note: Check out the fully functional demo and examples here.

Raphael Cruzeiro 1.7k Dec 12, 2022
Quill is a modern WYSIWYG editor built for compatibility and extensibility.

Note: This branch and README covers the upcoming 2.0 release. View 1.x docs here. Quill Rich Text Editor Quickstart โ€ข Documentation โ€ข Development โ€ข Co

Quill 34.3k Jan 2, 2023
Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.

If you would be interested in helping to maintain one of the most successful WYSIWYG text editors on github, let us know! (See issue #1503) MediumEdit

yabwe 15.7k Jan 4, 2023
A lightweight and amazing WYSIWYG JavaScript editor - 20kB only (8kB gzip)

Supporting Trumbowyg Trumbowyg is an MIT-licensed open source project and completely free to use. However, the amount of effort needed to maintain and

Alexandre Demode 3.8k Jan 7, 2023
Simple, beautiful wysiwyg editor

This repo is no longer maintained. bootstrap3-wysiwyg is much better Overview Bootstrap-wysihtml5 is a javascript plugin that makes it easy to create

James Hollingworth 4.2k Dec 30, 2022
Raptor, an HTML5 WYSIWYG content editor!

Raptor Editor Raptor Editor is a user-focused extensible WYSIWYG website content editor - check out the Demo. It is designed to be user and developer

PANmedia 533 Sep 24, 2022
Super simple WYSIWYG editor

Summernote Super simple WYSIWYG Editor. Summernote Summernote is a JavaScript library that helps you create WYSIWYG editors online. Home page: https:/

Summernote 11k Jan 7, 2023
A powerful WYSIWYG rich text web editor by pure javascript

KothingEditor A powerful WYSIWYG rich text web editor by pure javascript Demo : kothing.github.io/editor The KothingEditor is a lightweight, flexible,

Kothing 34 Dec 25, 2022
The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.

CKEditor 4 - Smart WYSIWYG HTML editor A highly configurable WYSIWYG HTML editor with hundreds of features, from creating rich text content with capti

CKEditor Ecosystem 5.7k Dec 27, 2022
An Easy and Fast WYSIWYG Editor

Simditor Simditor is a browser-based WYSIWYG text editor. It is used by Tower -- a popular project management web application. Supported Browsers: IE1

ๅฝฉ็จ‹่ฎพ่ฎก 5k Jan 3, 2023
Pure javascript based WYSIWYG html editor, with no dependencies.

SunEditor Pure javscript based WYSIWYG web editor, with no dependencies Demo : suneditor.com The Suneditor is a lightweight, flexible, customizable WY

Yi JiHong 1.1k Jan 2, 2023
WYSIWYG editor developed as jQuery plugin

RichText WYSIWYG editor developed as jQuery plugin. Requirements jQuery (v.3+, v.3.2+ recommended) FontAwesome (v.4.7.0 / v.5+) src/jquery.richtext.mi

Bob 95 Dec 30, 2022
A lightweight HTML and BBCode WYSIWYG editor

SCEditor v3.1.1 A lightweight WYSIWYG BBCode and XHTML editor. For more information visit sceditor.com Usage Include the SCEditor JavaScript: <link re

Sam 566 Dec 23, 2022
An Open, Extensible Framework for building Web3D Engine, Editor

Meta3D (Meta3D is under development, not product ready) Meta3D is an Open, Extensible Framework for building Web3D Engine, Editor. read Meta3Dไป‹็ป for m

Wonder Technology 54 Dec 29, 2022
A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.

SimpleMDE - Markdown Editor A drop-in JavaScript textarea replacement for writing beautiful and understandable Markdown. The WYSIWYG-esque editor allo

Sparksuite 9.3k Jan 4, 2023
:notebook: Our cool, secure, and offline-first Markdown editor.

Monod Hi! I'm Monod, the Markdown Editor! Monod is a (relatively) secure and offline-first Markdown editor we have built at TailorDev in order to lear

TailorDev 877 Dec 4, 2022
In-browser Markdown editor

StackEdit Full-featured, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites

Benoit Schweblin 19.9k Jan 9, 2023