md-editor-rt@7.0.0

Markdown Editor for React, developed in jsx and typescript, support different themes、beautify content by prettier.

This is the content that is incompatible only.

🧙🏼 Upgrade from 6.x to 7.x

💴 Config

🍤 markdownItConfig: raw HTML disabled by default

This is a breaking change: in 7.x, MdEditor and MdPreview initialize markdown-it with html set to false instead of true:

diff Copy 
- html: true
+ html: false

After upgrading, raw HTML entered in Markdown, such as <u>, <img>, <br>, <iframe>, and <details>, is displayed as text. HTML in image captions is also displayed as text. The underline toolbar button and shortcut still insert <u>text</u>, which no longer renders an underline by default.

Existing HTML images, superscripts, and subscripts can be migrated to Markdown or plugin syntax such as ![description](url), ^superscript^, and ~subscript~. HTML generated by plugins for task lists, code blocks, math, and diagrams is unaffected by this option.

To preserve the raw HTML rendering behavior from 6.x, explicitly enable it before creating an editor or preview component:

ts Copy 
import { config } from 'md-editor-rt';

config({
  markdownItConfig(mdit) {
    mdit.set({ html: true });
  },
});

html controls raw HTML parsing and does not sanitize the final output. Use sanitize when the generated HTML needs sanitization. See markdownItConfig for more details.

📊 editorExtensions.echarts.parseOption

The default parser in 6.x executes JavaScript from code blocks, so functions can be used directly:

js Copy 
{
  tooltip: {
    formatter: (params) => `${params[0].value}`,
  },
}

Starting with 7.x, the default uses JSON5.parse and requires the top-level result to be a non-array object. Update the option to JSON5 data without functions, variable references, new, or call expressions:

json5 Copy 
{
  tooltip: {
    trigger: 'axis',
  },
  series: [
    {
      type: 'line',
      data: [1, 2, 3],
    },
  ],
}

If function syntax is still required, explicitly override parseOption(code, { editorId, element }):

ts Copy 
import { config } from 'md-editor-rt';

config({
  editorExtensions: {
    echarts: {
      parseOption(code) {
        return new Function(`return (${code})`)();
      },
    },
  },
});

Only use an executable parser with fully trusted Markdown. A custom parser must enforce its own input validation and security controls.

🎨 Styles

🌗 Dark-theme selectors

Migrate dark-mode selectors as follows:

diff Copy 
-.md-editor-dark,
-.md-editor-catalog-dark {
+.md-editor[data-theme='dark'],
+.md-editor-catalog[data-theme='dark'] {
  /* Custom dark-mode styles */
}

🧙🏼 Upgrade from 5.x to 6.x

🐈 UMD

To keep pace with the evolution of the frontend ecosystem, some third-party dependencies have fully transitioned to ESM format starting from version 6.x. we will no longer provide UMD format support.

Here is the updated reference for global usage: 🤓 CDN

🔖 Props

🧷 insertLinkDirect

Removed, now the input box no longer pops up when clicking on the add link

🎱 mdHeadingId

Type changed

Now

ts Copy 
type MdHeadingId = (options: {
  text: string;
  level: number;
  index: number;
  currentToken?: Token;
  nextToken?: Token;
}) => string;

Past

ts Copy 
type MdHeadingId = (text: string, level: number, index: number) => string;

💴 Config

New:

ts Copy 
import { config, type CodeMirrorExtension, type Themes } from 'md-editor-rt';
import { type KeyBinding } from '@codemirror/view';

config({
  codeMirrorExtensions(
    extensions: Array<CodeMirrorExtension>,
    options: {
      editorId: string;
      theme: Themes;
      keyBindings: Array<KeyBinding>;
    }
  ): Array<CodeMirrorExtension> {
    return extensions;
  }
});
ts Copy 
interface CodeMirrorExtension {
  /**
   * Only used to provide developers with a basis for distinguishing between different extensions.
   */
  type: string;
  /**
   * Extensions of CodeMirror
   */
  extension: Extension | ((options: any) => Extension);
  /**
   * A Compartment wrapping the extension, which only exists for certain extensions,
   * provides the capability to update the extension.
   */
  compartment?: Compartment;
  options?: any;
}

Now you can accurately know which extension this is from extensions[i].type.

Past:

ts Copy 
import { config, type CodeMirrorExtension, type Themes } from 'md-editor-rt';
import { type KeyBinding } from '@codemirror/view';

config({
  codeMirrorExtensions(
    theme: Themes,
    extensions: Array<Extension>,
    keyBindings: Array<KeyBinding>,
    options: {
      editorId: string;
    }
  ): Array<Extension> {
    return extensions;
  }
});

🧙🏼 Upgrade from 4.x to 5.x

Version 18.0.0 or higher of react must be used now!!!

🔖 Props

name description
editorId Marked as deprecated, but still usable; it is recommended to use id instead. Note: Only the MdEditor and MdPreview components have been adjusted; other components still use editorId to identify that this is the editor's ID, not their own.
inputBoxWitdh Spelling error, corrected to: inputBoxWidth.
noIconfont Removed, and now use the open-source icon library lucide as a replacement.
customIcon Still supports custom icons, but some icon keywords have been updated. Please check CustomIcon.

Events

name description
onInputBoxWitdhChange Spelling error, corrected to: onInputBoxWidthChange

🪤 Internal Components

  1. Remove the default XSS extension. Now export the extension XSSPlugin. Please add it yourself. Example.
  2. Remove the configuration related to iconfont. Specifically, this includes: iconfontType、editorExtensions.iconfont、editorExtensions.iconfontClass、editorExtensionsAttrs.iconfont、editorExtensionsAttrs.iconfontClass.

🧙🏼 Upgrade from 3.x to 4.x

🏄🏼 Usage

Starting from version 4.0, supports on-demand importing components and no longer exporting default editor.

🏄🏼‍♂️ CDN

diff Copy 
- <script src="https://unpkg.com/md-editor-rt@latest/lib/md-editor-rt.umd.js"></script>
+ <script src="https://unpkg.com/md-editor-rt@latest/lib/umd/index.js"></script>
<script>
  ReactDOM.createRoot(document.getElementById('root')).render(
-   React.createElement(MdEditorRT, {
+    React.createElement(MdEditorRT.MdEditor, {
      modelValue: 'Hello Editor!!'
    })
  );
</script>

🏄🏼‍♀️ ES Module

diff Copy 
- import MdEditor from 'md-editor-rt';
- const NormalToolbar = MdEditor.NormalToolbar;
- const DropdownToolbar = MdEditor.DropdownToolbar;
- const ModalToolbar = MdEditor.ModalToolbar;
- const MdCatalog = MdEditor.MdCatalog;
+ import { MdEditor, NormalToolbar, DropdownToolbar, ModalToolbar, MdCatalog } from 'md-editor-rt';
import 'md-editor-rt/lib/style.css';

🔖 Props

name description
previewOnly deleted, replace with MdPreview

🪤 Internal Components

New component MdPreview and replacing the attribute previewOnly.

diff Copy 
import React, { useState } from 'react';
- import MdEditor from 'md-editor-rt';
+ import { MdPreview } from 'md-editor-rt';
- import 'md-editor-rt/lib/style.css';
+ import 'md-editor-rt/lib/preview.css';

export default () => {
  const [text] = useState('hello md-editor-rt!');
- return <MdEditor modelValue={text} previewOnly />;
+ return <MdPreview modelValue={text} />;
};

🧙🏻‍♂️ Upgrade from 2.x to 3.x

This is the content that 3.x is incompatible with version 2.x only.

🤹🏼‍♂️ Grammar

  • Strikethrough

    diff Copy 
    - ~It is a dream deeply rooted in the American dream.~
+ ~~It is a dream deeply rooted in the American dream.~~

🔩 Props

name description
markedHeadingId rename to mdHeadingId
historyLength deleted

🤿 Config

diff Copy 
MdEditor.config({
-  markedRenderer: (renderer) => renderer,
-  markedExtensions: [],
-  markedOptions,
+  codeMirrorExtensions: (theme, extensions) => extensions,
+  markdownItConfig: (mdit) { }
})

🎤 Shortcut Key

key function description
CTRL + Q quote deleted

🪤 Component

🐻 MdCatalog

  • props
    • markedHeadingId: deleted, use mdHeadingId instead of it

Upgrade from 1.x to 2.x

This is the content that 2.x is incompatible with version 1.x only.

Props

name description
editorClass rename to className
hljs removed, use MdEditor.config to config
highlightJs the same
highlightCss the same
languageUserDefined the same
prettier rename to noPrettier, default false
prettierCDN removed, use MdEditor.config to config
prettierMDCDN the same
cropperCss the same
cropperJs the same
iconfontJs the same
screenfull the same
screenfullJs the same
mermaid the same
mermaidJs the same
katex the same
katexJs the same
katexCss the same
extensions the same

Component

  • Catalog

    Editor.Catalog is renamed to Editor.MdCatalog.

    For more usage, refer to branch docs.