添加tagInputProps支持，优化Markdown输入字段和编辑器组件

Author: chenshuai2144

src/MarkdownEditor/BaseMarkdownEditor.tsx

@@ -15,6 +15,7 @@ import { BaseEditor, createEditor, Editor, Selection } from 'slate';
 import { HistoryEditor, withHistory } from 'slate-history';
 import { CommentList } from './editor/components/CommentList';
 import { MEditor } from './editor/Editor';
+import { TagPopupProps } from './editor/elements/code/TagPopup';
 import { parserMdToSchema } from './editor/parser/parserMdToSchema';
 import { withMarkdown } from './editor/plugins';
 import { withErrorReporting } from './editor/plugins/catchError';
@@ -296,6 +297,10 @@ export type MarkdownEditorProps = {
     enable: boolean;
     placeholder?: string;
   };
+
+  tagInputProps?: {
+    enable: boolean;
+  } & TagPopupProps;
 };
 
 // 组合器函数

src/MarkdownEditor/demos/preview.tsx

@@ -318,7 +318,8 @@ export default () => {
       width={'100vw'}
       height={'100vh'}
       reportMode
-      tag={{
+      tagInputProps={{
+        enable: true,
         items: [
           {
             label: '腾讯',

src/MarkdownEditor/editor/Editor.tsx

@@ -25,8 +25,8 @@ import { insertParsedHtmlNodes } from './plugins/insertParsedHtmlNodes';
 import { parseMarkdownToNodesAndInsert } from './plugins/parseMarkdownToNodesAndInsert';
 
 import { useDebounceFn } from '@ant-design/pro-components';
+import { useRefFunction } from '../../hooks/useRefFunction';
 import { PluginContext } from '../plugin';
-import { TagPopupProps } from './elements/code/TagPopup';
 import { useHighlight } from './plugins/useHighlight';
 import { useKeyboard } from './plugins/useKeyboard';
 import { useOnchange } from './plugins/useOnchange';
@@ -58,7 +58,6 @@ export type MEditorProps = {
   comment?: MarkdownEditorProps['comment'];
   prefixCls?: string;
   reportMode?: MarkdownEditorProps['reportMode'];
-  tag?: TagPopupProps;
   placeholder?: string;
 } & MarkdownEditorProps;
 
@@ -79,19 +78,13 @@ const genTableMinSize = (
 };
 
 export const MEditor = observer(
-  ({
-    eleItemRender,
-    reportMode,
-    tag,
-    instance,
-    ...editorProps
-  }: MEditorProps) => {
+  ({ eleItemRender, reportMode, instance, ...editorProps }: MEditorProps) => {
     const { store, markdownEditorRef, markdownContainerRef, readonly } =
       useEditorStore();
     const changedMark = useRef(false);
     const value = useRef<any[]>([EditorUtils.p]);
     const nodeRef = useRef<MarkdownEditorInstance>();
-    const { prefixCls = '$' } = tag || {};
+    const { prefixCls = '$' } = editorProps.tagInputProps || {};
 
     const onKeyDown = useKeyboard(
       store,
@@ -106,19 +99,23 @@ export const MEditor = observer(
     const high = useHighlight(store);
     const first = useRef(true);
 
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (tag && event?.key === prefixCls) {
-        Transforms.insertNodes(markdownEditorRef.current, {
-          type: 'code',
-          code: true,
-          tag: {
-            ...tag,
-          },
-          text: '',
-        });
-      }
-      onKeyDown(event);
-    };
+    const handleKeyDown = useRefFunction(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (editorProps.tagInputProps?.enable && event?.key === prefixCls) {
+          event.preventDefault();
+          event.stopPropagation();
+          Transforms.insertNodes(markdownEditorRef.current, [
+            {
+              code: true,
+              tag: true,
+              text: '$',
+            },
+          ]);
+          return;
+        }
+        onKeyDown(event);
+      },
+    );
 
     /**
      * 初始化编辑器
@@ -587,6 +584,7 @@ export const MEditor = observer(
           comment={editorProps?.comment}
           children={props.children}
           hashId={hashId}
+          tagInputProps={editorProps.tagInputProps}
         />
       );
     };

src/MarkdownEditor/editor/elements/code/TagPopup/index.tsx

@@ -1,7 +1,7 @@
 import { Dropdown, MenuProps } from 'antd';
 import React, { ReactNode } from 'react';
 
-type TagPopupProps = {
+export type TagPopupProps = {
   children?: React.ReactNode;
   onSelect?: (value: string) => void;
   items?: Array<{
@@ -18,7 +18,7 @@ type TagPopupProps = {
   className?: string;
 };
 
-const TagPopup = (
+export const TagPopup = (
   props: TagPopupProps & {
     text: {
       text: string;
@@ -43,7 +43,7 @@ const TagPopup = (
     return {
       ...item,
       onClick: () => {
-        onSelect && onSelect(`${key}` || '');
+        onSelect?.(`${key}` || '');
         setOpen(false);
       },
     };
@@ -92,5 +92,3 @@ const TagPopup = (
     </Dropdown>
   );
 };
-
-export { TagPopup, TagPopupProps };

src/MarkdownEditor/editor/elements/index.tsx

@@ -145,6 +145,7 @@ export const MLeaf = (
     hashId: string;
     comment: MarkdownEditorProps['comment'];
     fncProps: MarkdownEditorProps['fncProps'];
+    tagInputProps: MarkdownEditorProps['tagInputProps'];
   },
 ) => {
   const { markdownEditorRef, readonly } = useEditorStore();
@@ -155,34 +156,34 @@ export const MLeaf = (
   let className = props.hashId + ' ';
   let children = <>{props.children}</>;
   if (leaf.code) {
-    const { tag, text } = (props?.leaf || {}) as any;
-    const { prefixCls = '$' } = tag || {};
-    if (tag && leaf.text?.startsWith(prefixCls)) {
+    const { text, tag } = (props?.leaf || {}) as any;
+    const { enable } = props.tagInputProps || {};
+    if (enable && tag) {
       children = (
         <TagPopup
           {...(props?.leaf as any)?.tag}
           text={text}
           onSelect={(v) => {
             const path = ReactEditor.findPath(
               markdownEditorRef.current,
-              props.text
+              props.text,
             );
-            
+
             const start = {
               path,
-              offset: 1
+              offset: 1,
             };
-            
+
             const end = {
               path,
-              offset: leaf.text?.length || 0
+              offset: leaf.text?.length || 0,
             };
-            
+
             Transforms.select(markdownEditorRef.current, {
               anchor: start,
-              focus: end
+              focus: end,
             });
-            
+
             Transforms.delete(markdownEditorRef.current);
             markdownEditorRef.current.insertText(v);
           }}

src/MarkdownEditor/editor/plugins/withMarkdown.ts

@@ -213,6 +213,13 @@ export const withMarkdown = (editor: Editor) => {
     }
     if (operation.type === 'insert_text') {
       const parentNode = Node.get(editor, Path.parent(operation.path));
+      const currentNode = Node.get(editor, operation.path);
+      if (currentNode?.code && operation.text === ' ') {
+        // 如果当前节点是代码块，且输入的是空格，则插入一个空格到 code 节点外
+        Transforms.insertNodes(editor, [{ text: ' ' }]);
+        return;
+      }
+
       if (parentNode.type === 'card-after') {
         if (
           Node.get(editor, Path.parent(Path.parent(operation.path))).type ===

src/MarkdownInputField/MarkdownInputField.tsx

@@ -3,7 +3,11 @@ import classNames from 'classnames';
 import { useMergedState } from 'rc-util';
 import React, { useContext, useEffect } from 'react';
 import { useRefFunction } from '../hooks/useRefFunction';
-import { BaseMarkdownEditor, MarkdownEditorInstance } from '../MarkdownEditor';
+import {
+  BaseMarkdownEditor,
+  MarkdownEditorInstance,
+  MarkdownEditorProps,
+} from '../MarkdownEditor';
 import { SendButton } from './SendButton';
 import { useStyle } from './style';
 
@@ -81,6 +85,8 @@ export type MarkdownInputFieldProps = {
    * @example onSend={async (text) => await submitMessage(text)}
    */
   onSend?: (value: string) => Promise<void>;
+
+  tagInputProps?: MarkdownEditorProps['tagInputProps'];
 };
 
 /**
@@ -188,6 +194,17 @@ export const MarkdownInputField: React.FC<MarkdownInputFieldProps> = (
           enable: true,
           placeholder: props.placeholder,
         }}
+        tagInputProps={
+          props.tagInputProps || {
+            enable: true,
+            items: [
+              {
+                key: 'Bold',
+                label: 'Bold',
+              },
+            ],
+          }
+        }
         initValue={props.value}
         onChange={(value) => {
           setValue(value);