### Install md-editor-rt

Source: https://github.com/imzbf/md-editor-rt/blob/develop/README.md

Install the core package using npm.

```shell
npm i md-editor-rt
```

--------------------------------

### Commit Convention Examples

Source: https://github.com/imzbf/md-editor-rt/blob/develop/README.md

Examples of commit messages following the conventional commit format for release automation.

```bash
git commit -m "feat(editor): support drag-sort toolbar items"
```

```bash
git commit -m "fix(preview): sync anchor when heading id contains emoji #1234"
```

```bash
git commit -m "fix(deps): bump @vavt/markdown-theme to fix mermaid overflow"
```

```bash
git commit -m "refactor(build): simplify dts rollup pipeline"
```

--------------------------------

### Install Japanese Extension

Source: https://github.com/imzbf/md-editor-rt/blob/develop/README.md

Install an existing language extension for Japanese using npm.

```shell
npm i @vavt/cm-extension
```

--------------------------------

### Install PDF Export Extension

Source: https://github.com/imzbf/md-editor-rt/blob/develop/README.md

Install an existing toolbar component extension for exporting content as PDF using npm.

```shell
npm i @vavt/v3-extension
```

--------------------------------

### Control MD Editor Externally with Refs

Source: https://github.com/imzbf/md-editor-rt/blob/develop/skills/md-editor-rt/references/playbook.md

Use `useRef` to get a reference to the MdEditor component and call its methods like `togglePreview`, `triggerSave`, or `insert` to control the editor's behavior programmatically.

```tsx
import { useRef } from 'react';
import { MdEditor, type ExposeParam } from 'md-editor-rt';

export default function Demo() {
  const editorRef = useRef<ExposeParam>(null);

  return (
    <>
      <button onClick={() => editorRef.current?.togglePreview(true)}>显示预览</button>
      <button onClick={() => editorRef.current?.triggerSave()}>触发保存</button>
      <button
        onClick={() => {
          editorRef.current?.insert((selectedText) => ({
            targetValue: `> ${selectedText || 'AI 摘要'}`, 
            select: false
          }));
        }}
      >
        插入引用
      </button>

      <MdEditor ref={editorRef} value={text} onChange={setText} />
    </>
  );
}
```

--------------------------------

### Replace Preview DOM Shell with Custom Component

Source: https://github.com/imzbf/md-editor-rt/blob/develop/skills/md-editor-rt/references/playbook.md

Use the `previewComponent` prop on `MdPreview` to provide a custom root element for the preview. Ensure `id` and `className` are passed down to maintain functionality like TOC linking and styling.

```tsx
<MdPreview
  id="article-preview"
  value={text}
  previewComponent={({ html, id, className }) => (
    <section id={id} className={className} dangerouslySetInnerHTML={{ __html: html }} />
  )}
/>
```

--------------------------------

### Customize Toolbar and Footer in MD Editor

Source: https://github.com/imzbf/md-editor-rt/blob/develop/skills/md-editor-rt/references/playbook.md

Define custom toolbar buttons and footer elements by creating React components and configuring the `toolbars`, `defToolbars`, `footers`, and `defFooters` props. Use numbers in arrays to reference default slots.

```tsx
import { useState } from 'react';
import {
  MdEditor,
  NormalToolbar,
  NormalFooterToolbar,
  type ToolbarNames,
  type Footers
} from 'md-editor-rt';

const MyToolbar = () => (
  <NormalToolbar title="摘要" onClick={() => {}}>
    AI
  </NormalToolbar>
);
const MyFooter = () => <NormalFooterToolbar>发布检查</NormalFooterToolbar>;

const toolbars: ToolbarNames[] = ['bold', 0, '=', 'github'];
const footers: Footers[] = ['markdownTotal', '=', 0];

export default function Demo() {
  const [text, setText] = useState('');

  return (
    <MdEditor
      value={text}
      onChange={setText}
      toolbars={toolbars}
      defToolbars={[<MyToolbar key="ai" />]}
      footers={footers}
      defFooters={[<MyFooter key="check" />]}
    />
  );
}
```

--------------------------------

### Integrate MD Editor with Next.js, Web Components, or Shadow DOM

Source: https://github.com/imzbf/md-editor-rt/blob/develop/skills/md-editor-rt/references/playbook.md

Provides guidance on integrating MD Editor RT into different environments. For Next.js, ensure the editor is in a `use client` component. For SSR, pass scroll element as a string selector. For Web Components/Shadow DOM, consider `isScrollElementInShadow`.

```text
- Next App Router：把编辑器放在 `use client` 组件中
- SSR：`scrollElement` 传字符串选择器，不要直接传 DOM
- Web Component / Shadow DOM：目录滚动容器在 shadow root 内时，评估 `isScrollElementInShadow`
- 微前端 / 单页切换：必要时调用 `clearSideEffects()` 清理自动插入的外部资源
```

--------------------------------

### Display Markdown Preview Only in React

Source: https://github.com/imzbf/md-editor-rt/blob/develop/README.md

Use MdPreview and MdCatalog components for a read-only markdown preview. Import the preview CSS. For server-side rendering, the scrollElement prop should be a string selector.

```jsx
import React, { useState } from 'react';
import { MdPreview, MdCatalog } from 'md-editor-rt';
import 'md-editor-rt/lib/preview.css';

const scrollElement = document.documentElement;

export default () => {
  const [text] = useState('# Hello Editor');
  const [id] = useState('preview-only');

  return (
    <>
      <MdPreview id={id} modelValue={text} />
      <MdCatalog editorId={id} scrollElement={scrollElement} />
    </>
  );
};
```

--------------------------------

### Display Markdown Editor in React

Source: https://github.com/imzbf/md-editor-rt/blob/develop/README.md

Import and use the MdEditor component in a React application. Ensure the CSS is imported. The component requires a state variable for its value and an onChange handler.

```jsx
import React, { useState } from 'react';
import { MdEditor } from 'md-editor-rt';
import 'md-editor-rt/lib/style.css';

export default () => {
  const [text, setText] = useState('# Hello Editor');
  return <MdEditor modelValue={text} onChange={setText} />;
};
```

--------------------------------

### Extend markdown-it Plugin Chain

Source: https://github.com/imzbf/md-editor-rt/blob/develop/skills/md-editor-rt/references/playbook.md

Configure the markdown-it parser by using the `config` function to add custom plugins or modify existing ones. This allows for extended markdown parsing capabilities.

```tsx
import anchor from 'markdown-it-anchor';
import { config, XSSPlugin } from 'md-editor-rt';

config({
  markdownItConfig(md) {
    md.use(anchor, { permalink: anchor.permalink.ariaHidden({}) });
  },
  markdownItPlugins(plugins) {
    return [
      ...plugins,
      {
        type: 'xss',
        plugin: XSSPlugin,
        options: {}
      }
    ];
  }
});
```

--------------------------------

### Extend CodeMirror 6 Extensions

Source: https://github.com/imzbf/md-editor-rt/blob/develop/skills/md-editor-rt/references/playbook.md

Customize the CodeMirror 6 editor instance used within MD Editor RT by providing extensions via the `config` function. This is useful for adding features like line numbers or custom key bindings.

```tsx
import { lineNumbers } from '@codemirror/view';
import { config } from 'md-editor-rt';

config({
  codeMirrorExtensions(extensions, { editorId, theme, keyBindings }) {
    return [
      ...extensions,
      {
        type: 'lineNumbers',
        extension: lineNumbers()
      }
    ];
  }
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.