feat: Update codemirror 6.

Author: jaywcjlove

.github/workflows/ci.yml

@@ -7,10 +7,10 @@ jobs:
   build-deploy:
     runs-on: ubuntu-18.04
     steps:
-    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v2
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
       with:
-        node-version: 14
+        node-version: 16
 
     - run: npm install
     - run: npm run build
@@ -25,13 +25,13 @@ jobs:
 
     - name: Create Tag
       id: create_tag
-      uses: jaywcjlove/[email protected].6
+      uses: jaywcjlove/[email protected].7
       with:
         package-path: ./package.json
 
     - name: get tag version
       id: tag_version
-      uses: jaywcjlove/[email protected].0
+      uses: jaywcjlove/[email protected].7
 
     - name: Deploy
       uses: peaceiris/actions-gh-pages@v3
@@ -42,7 +42,7 @@ jobs:
 
     - name: Generate Changelog
       id: changelog
-      uses: jaywcjlove/[email protected].0
+      uses: jaywcjlove/[email protected].7
       with:
         head-ref: ${{steps.create_tag.outputs.version}}
         filter-author: (小弟调调™)

README.md

@@ -83,17 +83,36 @@ import MarkdownEditor from '@uiw/react-markdown-editor';
 const title2 = {
   name: 'title2',
   keyCommand: 'title2',
+  button: { 'aria-label': 'Add title text' },
   icon: (
     <svg width="12" height="12" viewBox="0 0 512 512">
       <path fill="currentColor" d="M496 80V48c0-8.837-7.163-16-16-16H320c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h37.621v128H154.379V96H192c8.837 0 16-7.163 16-16V48c0-8.837-7.163-16-16-16H32c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h37.275v320H32c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h160c8.837 0 16-7.163 16-16v-32c0-8.837-7.163-16-16-16h-37.621V288H357.62v128H320c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h160c8.837 0 16-7.163 16-16v-32c0-8.837-7.163-16-16-16h-37.275V96H480c8.837 0 16-7.163 16-16z" />
     </svg>
   ),
-  execute: (editor, selection, position) => {
-    const value = selection ? `## ${selection}` : '## ';
-    editor.replaceSelection(value);
-    position.ch = !!selection ? position.ch : position.ch + 3;
-    editor.setCursor(position.line, position.ch);
-    editor.focus();
+  execute: ({ state, view }) => {
+    if (!state || !view) return;
+    const lineInfo = view.state.doc.lineAt(view.state.selection.main.from);
+    let mark = '#';
+    const matchMark = lineInfo.text.match(/^#+/)
+    if (matchMark && matchMark[0]) {
+      const txt = matchMark[0];
+      if (txt.length < 6) {
+        mark = txt + '#';
+      }
+    }
+    if (mark.length > 6) {
+      mark = '#';
+    }
+    const title = lineInfo.text.replace(/^#+/, '')
+    view.dispatch({
+      changes: {
+        from: lineInfo.from,
+        to: lineInfo.to,
+        insert: `${mark}${title}`
+      },
+      // selection: EditorSelection.range(lineInfo.from + mark.length, lineInfo.to),
+      selection: { anchor: lineInfo.from + mark.length },
+    });
   },
 };
 
@@ -183,14 +202,80 @@ const Demo = () => {
 - `onBlur?: function(editor: IInstance, event: Event)` - event occurs when an object loses focus
 - `previewProps` - [react-markdown options](https://github.com/uiwjs/react-markdown-preview/tree/v2.1.0#options-props)
 
-> [Other Props Options](https://github.com/uiwjs/react-markdown-editor/blob/812937bf90abadd5f795d06d97ead9f59cd35954/src/index.tsx#L11-L21)
+```ts
+import { ReactCodeMirrorProps } from '@uiw/react-codemirror';
+export interface IMarkdownEditor extends ReactCodeMirrorProps {
+  className?: string;
+  prefixCls?: string;
+  /** The raw markdown that will be converted to html (**required**) */
+  value?: string;
+  /** Shows a preview that will be converted to html. */
+  visible?: boolean;
+  visibleEditor?: boolean;
+  /** Tool display settings. */
+  toolbars?: IToolBarProps['toolbars'];
+  /** Tool display settings. */
+  toolbarsMode?: IToolBarProps['toolbars'];
+  /** [@uiw/react-markdown-preview](https://github.com/uiwjs/react-markdown-preview#options-props) options */
+  previewProps?: MarkdownPreviewProps;
+}
+```
 
+```ts
+import React from 'react';
+import { ReactCodeMirrorRef } from '@uiw/react-codemirror';
+import { MarkdownPreviewProps, MarkdownPreviewRef } from '@uiw/react-markdown-preview';
+export interface ToolBarProps {
+  editor?: ReactCodeMirrorRef;
+  preview: React.RefObject<MarkdownPreviewRef>;
+  container: React.RefObject<HTMLDivElement>;
+  containerEditor: React.RefObject<HTMLDivElement>;
+  editorProps: IMarkdownEditor;
+}
+export interface MarkdownEditorRef {
+  editor: React.RefObject<ReactCodeMirrorRef> | null;
+  preview?: React.RefObject<MarkdownPreviewRef> | null;
+}
+export interface IToolBarProps<T = keyof typeof defaultCommands | ICommand> extends ToolBarProps {
+  className?: string;
+  editorProps: IMarkdownEditor;
+  mode?: boolean;
+  prefixCls?: string;
+  toolbars?: T[];
+  onClick?: (type: string) => void;
+}
+export declare type ButtonHandle = (command: ICommand, props: IMarkdownEditor, options: ToolBarProps) => JSX.Element;
+export declare type ICommand = {
+  icon?: React.ReactElement;
+  name?: string;
+  keyCommand?: string;
+  button?: ButtonHandle | React.ButtonHTMLAttributes<HTMLButtonElement>;
+  execute?: (editor: ReactCodeMirrorRef) => void;
+};
+export declare const defaultCommands: {
+  bold: ICommand;
+  italic: ICommand;
+  header: ICommand;
+  strike: ICommand;
+  underline: ICommand;
+  olist: ICommand;
+  ulist: ICommand;
+  link: ICommand;
+  todo: ICommand;
+  image: ICommand;
+  fullscreen: ICommand;
+  preview: ICommand;
+};
+export declare const getCommands: () => ICommand[];
+export declare const getModeCommands: () => ICommand[];
+```
 
 ### Development
 
 ```bash
-npm run dev
-npm run type-check:watch
+npm run watch # Listen create type and .tsx files.
+npm run start # Preview code example.
+
 npm run doc
 ```
 

package.json

@@ -29,10 +29,10 @@
     "react-dom": ">=16.8.0"
   },
   "files": [
+    "src/**/*.{ts,tsx,less}",
     "markdown-editor.css",
     "cjs",
-    "esm",
-    "src"
+    "esm"
   ],
   "eslintConfig": {
     "extends": [
@@ -41,27 +41,29 @@
     ]
   },
   "dependencies": {
-    "@uiw/react-markdown-preview": "~4.0.3",
-    "codemirror": "~5.65.2"
+    "@codemirror/lang-markdown": "^6.0.0",
+    "@codemirror/language-data": "^6.1.0",
+    "@uiw/codemirror-themes": "^4.10.4",
+    "@uiw/react-codemirror": "^4.10.4",
+    "@uiw/react-markdown-preview": "^4.0.20"
   },
   "devDependencies": {
-    "@kkt/less-modules": "~7.1.1",
-    "@kkt/raw-modules": "~7.1.1",
-    "@kkt/scope-plugin-options": "~7.1.1",
-    "@types/codemirror": "~5.60.5",
-    "@types/react": "~18.0.5",
-    "@types/react-dom": "~18.0.1",
-    "@uiw/react-github-corners": "~1.5.3",
-    "@uiw/reset.css": "~1.0.6",
-    "@wcj/dark-mode": "~1.0.10",
-    "compile-less-cli": "~1.8.11",
-    "kkt": "~7.1.5",
-    "prettier": "~2.5.1",
+    "@kkt/less-modules": "^7.2.0",
+    "@kkt/raw-modules": "^7.2.0",
+    "@kkt/scope-plugin-options": "^7.2.0",
+    "@types/react": "^18.0.14",
+    "@types/react-dom": "^18.0.5",
+    "@uiw/react-github-corners": "^1.5.14",
+    "@uiw/reset.css": "^1.0.6",
+    "@wcj/dark-mode": "^1.0.14",
+    "compile-less-cli": "^1.8.13",
+    "kkt": "^7.2.0",
+    "prettier": "^2.7.1",
     "pretty-quick": "~3.1.3",
-    "react": "~18.0.0",
-    "react-dom": "~18.0.0",
-    "tsbb": "~3.7.2",
-    "husky": "~7.0.4"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsbb": "^3.7.6",
+    "husky": "^8.0.1"
   },
   "browserslist": {
     "production": [

src/commands/bold.tsx

@@ -1,20 +1,28 @@
-import React from 'react';
-import { ICommand } from './'
+import { EditorSelection } from '@codemirror/state';
+import { ICommand } from './';
 
 export const bold: ICommand = {
   name: 'bold',
   keyCommand: 'bold',
   button: { 'aria-label': 'Add bold text' },
   icon: (
     <svg width="13" height="13" viewBox="0 0 384 512">
-      <path fill="currentColor" d="M304.793 243.891c33.639-18.537 53.657-54.16 53.657-95.693 0-48.236-26.25-87.626-68.626-104.179C265.138 34.01 240.849 32 209.661 32H24c-8.837 0-16 7.163-16 16v33.049c0 8.837 7.163 16 16 16h33.113v318.53H24c-8.837 0-16 7.163-16 16V464c0 8.837 7.163 16 16 16h195.69c24.203 0 44.834-1.289 66.866-7.584C337.52 457.193 376 410.647 376 350.014c0-52.168-26.573-91.684-71.207-106.123zM142.217 100.809h67.444c16.294 0 27.536 2.019 37.525 6.717 15.828 8.479 24.906 26.502 24.906 49.446 0 35.029-20.32 56.79-53.029 56.79h-76.846V100.809zm112.642 305.475c-10.14 4.056-22.677 4.907-31.409 4.907h-81.233V281.943h84.367c39.645 0 63.057 25.38 63.057 63.057.001 28.425-13.66 52.483-34.782 61.284z" />
+      <path
+        fill="currentColor"
+        d="M304.793 243.891c33.639-18.537 53.657-54.16 53.657-95.693 0-48.236-26.25-87.626-68.626-104.179C265.138 34.01 240.849 32 209.661 32H24c-8.837 0-16 7.163-16 16v33.049c0 8.837 7.163 16 16 16h33.113v318.53H24c-8.837 0-16 7.163-16 16V464c0 8.837 7.163 16 16 16h195.69c24.203 0 44.834-1.289 66.866-7.584C337.52 457.193 376 410.647 376 350.014c0-52.168-26.573-91.684-71.207-106.123zM142.217 100.809h67.444c16.294 0 27.536 2.019 37.525 6.717 15.828 8.479 24.906 26.502 24.906 49.446 0 35.029-20.32 56.79-53.029 56.79h-76.846V100.809zm112.642 305.475c-10.14 4.056-22.677 4.907-31.409 4.907h-81.233V281.943h84.367c39.645 0 63.057 25.38 63.057 63.057.001 28.425-13.66 52.483-34.782 61.284z"
+      />
     </svg>
   ),
-  execute: (editor, selection, position) => {
-    const value = selection ? `**${selection}**` : `****`;
-    editor.replaceSelection(value);
-    position.ch = !!selection ? position.ch : position.ch + 2;
-    editor.setCursor(position.line, position.ch);
-    editor.focus();
+  execute: ({ state, view }) => {
+    if (!state || !view) return;
+    view.dispatch(
+      view.state.changeByRange((range) => ({
+        changes: [
+          { from: range.from, insert: '**' },
+          { from: range.to, insert: '**' },
+        ],
+        range: EditorSelection.range(range.from + 2, range.to + 2),
+      })),
+    );
   },
-};
+};

src/commands/fullscreen.tsx

@@ -1,64 +1,58 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { ICommand } from './';
-import { IMarkdownEditor } from '../';
+import { IMarkdownEditor, ToolBarProps } from '../';
 
-type Options = {
-  preview?: HTMLDivElement | null | undefined;
-  container?: HTMLDivElement | null | undefined;
-  editor?: CodeMirror.Editor;
-};
-
-const Fullscreen: React.FC<{ command: ICommand; editorProps: IMarkdownEditor & Options }> = (props) => {
-  const {
-    editorProps: { container, preview, editor },
-  } = props;
+const Fullscreen: React.FC<{ command: ICommand; editorProps: IMarkdownEditor & ToolBarProps }> = (props) => {
+  const { editorProps } = props;
+  const $height = useRef<number>(0);
   const [full, setFull] = useState(false);
-  const initEditorHeight = useRef(0);
-  const containerRef = useRef<HTMLDivElement | null>();
-  const editorRef = useRef<CodeMirror.Editor>();
-  function handleResize() {
-    if (containerRef.current && editorRef.current && editorRef.current.setSize) {
-      editorRef.current.setSize('initial', containerRef.current.clientHeight - 35);
-    }
-  }
-  useEffect(() => {
-    window && window.addEventListener('resize', handleResize, true);
-    return () => {
-      window && window.removeEventListener('resize', handleResize, true);
-    };
-  }, []);
   useEffect(() => {
-    if (editor) {
-      editorRef.current = editor;
-      const { clientHeight } = editor.getScrollInfo();
-      initEditorHeight.current = clientHeight;
+    if (
+      editorProps.containerEditor &&
+      editorProps.containerEditor.current &&
+      editorProps.containerEditor.current.parentElement
+    ) {
+      const parentElement = editorProps.containerEditor.current.parentElement;
+      const robserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          if (!$height.current) {
+            $height.current = entry.target.clientHeight;
+          }
+          if (editorProps.editor && editorProps.editor.view?.dom) {
+            if (full) {
+              editorProps.editor.view.dom.style.height = `${entry.target.clientHeight}px`;
+            } else {
+              editorProps.editor.view.dom.removeAttribute('style');
+            }
+          }
+        }
+      });
+      robserver.observe(parentElement);
     }
-  }, [editor]);
+  }, [editorProps.containerEditor, editorProps.editor, full]);
+
   useEffect(() => {
     if (!document) return;
-    containerRef.current = container;
-    document.body.style.overflow = full ? 'hidden' : 'initial';
-    if (container && full) {
-      container.style.zIndex = '999';
-      container.style.position = 'fixed';
-      container.style.top = '0px';
-      container.style.bottom = '0px';
-      container.style.left = '0px';
-      container.style.right = '0px';
-      if (editor) {
-        editor.setSize('initial', container.clientHeight - 35);
-      }
-    } else if (container) {
-      container.style.position = 'initial';
-      container.style.top = 'initial';
-      container.style.bottom = 'initial';
-      container.style.left = 'initial';
-      container.style.right = 'initial';
-      if (editor) {
-        editor.setSize('initial', initEditorHeight.current);
+    if (editorProps && editorProps.container && editorProps.container.current && editorProps.editor) {
+      const container = editorProps.container.current;
+      document.body.style.overflow = full ? 'hidden' : 'initial';
+      if (container && full) {
+        container.style.zIndex = '999';
+        container.style.position = 'fixed';
+        container.style.top = '0px';
+        container.style.bottom = '0px';
+        container.style.left = '0px';
+        container.style.right = '0px';
+      } else if (container) {
+        container.style.position = 'initial';
+        container.style.top = 'initial';
+        container.style.bottom = 'initial';
+        container.style.left = 'initial';
+        container.style.right = 'initial';
       }
     }
-  }, [full, container, preview, editor]);
+  }, [full, editorProps]);
+
   return (
     <button onClick={() => setFull(!full)} type="button" className={full ? 'active' : ''}>
       {props.command.icon}