支援行級同步滾動的 markdown 編輯器

React Markdown Editor

基於 codemirror6 的 markdown 編輯器

特性

支援編輯預覽同步滾動（滾動時頂部絕對對齊預覽內容），支援游標改變時滾動到游標位置（行對齊）
支援貼上和拖拽上傳圖片，可顯示上傳進度
支援 emoji 表情
插入連結和圖片支援快速修改url、alt、title等變數屬性（tab 鍵可跳到下一變數，esc 退出修改）
預覽採用 react-markdown 解析，支援語法高亮
支援自定義預覽渲染
支援codemirror 擴充套件

安裝

npm install -S @pingfan.ts/markdown-editor

使用

import React, { useMemo, useRef, useState } from 'react';
import { EditorView, basicSetup } from '@codemirror/basic-setup';
import Editor, { EditorInstance } from '@pingfan.ts/markdown-editor';
import upload from '@pingfan.ts/markdown-editor/es/plugins/upload';
import scrollSync from '@pingfan.ts/markdown-editor/es/plugins/scroll-sync';
import markdown from './markdown.txt';

export default () => {
  const editorRef = useRef<EditorInstance | null>(null);
  const [value, setValue] = useState<string>(markdown);

  const extensions = useMemo(
    () => [
      basicSetup,
      EditorView.lineWrapping,
      upload({
        url: 'api/attachments/upload',
        allowedTypes: 'image/*',
        transform(res: any) {
          return { url: res.data.url };
        },
      }),
      scrollSync(editorRef),
    ],
    [],
  );

  return (
    <Editor
      ref={editorRef}
      height={300}
      value={value}
      onChange={setValue}
      extensions={extensions}
      storageKey="articles-create"
    />
  );
};

API

Editor

屬性名	描述	型別	預設值
toolbar	工具條	`false \| { buttons: ToolbarButton[]; }`	–
editorPreviewEnableFullScreen	編輯預覽啟用全屏，一般和 `height` 搭配使用	`boolean`	true
previewOptions	預覽選項	`PreviewOptions`	–
storageKey	自動儲存，下次初始化時可恢復上一次儲存的內容	`string`	–
value	編輯器內容	`string`	–
height	高度	`number \| string`	–
minHeight	最小高度	`number \| string`	–
maxHeight	最大高度	`number \| string`	–
extensions	codemirror 擴充套件	`Extension[]`	–
onChange	內容變化時的回撥	`(value: string) => void`	–
ref	–	`Ref<EditorInstance>`	–

PreviewOptions

屬性名	描述	型別	預設值
render	自定義渲染	`(markdown: string) => ReactNode`	–
interval	重新整理間隔	`number`	1000
remarkPlugins	remark 外掛	`PluggableList`	–
rehypePlugins	rehype 外掛	`PluggableList`	–
markdownOptions	react-markdown 選項	`Partial<ReactMarkdownOptions>`	–

EditorInstance

名稱	說明	型別
getContainer	獲取編輯器容器DOM	`() => HTMLDivElement \| null`
getEditorView	獲取 codemirror 例項	`() => EditorView \| null`
getToolbar	獲取 Toolbar 例項	`() => ToolbarInstance \| null`
getPreview	獲取 Preview 例項	`() => PreviewInstance \| null`
getDisplayMode	獲取顯示模式	`() => { fullScreen: boolean; preview: boolean; editorPreview: boolean; }`
toggleFullScreen	全屏切換	`() => void`
togglePreview	預覽切換	`() => void`
toggleEditorPreview	編輯預覽切換	`() => void`

PreviewInstance

名稱	說明	型別
getMarkdown	獲取 markdown 內容	`() => string`
setMarkdown	設定 markdown 內容	`(markdown: string) => void`
debounceSetMarkdown	消抖設定 markdown 內容	`(markdown: string) => void`
setMarkdownOptions	設定 react-markdown 選項	`(markdownOptions: Partial<ReactMarkdownOptions>) => void`
getContainer	獲取預覽容器DOM	`() => HTMLDivElement \| null`
getHast	獲取hast	`() => Hast`