feat: 添加 Markdown 编辑器事件常量，更新编辑器引用和状态管理

package.json

@@ -58,7 +58,6 @@
     "diacritics": "^1.3.0",
     "direction": "^1.0.4",
     "dumi-theme-antd-style": "^0.31.1",
-    "event-emitter": "^0.3.5",
     "framer-motion": "^11.18.2",
     "glob": "^11.0.1",
     "is-hotkey": "^0.2.0",
@@ -97,7 +96,6 @@
     "@testing-library/react": "^16.2.0",
     "@types/classnames": "^2.3.4",
     "@types/diacritics": "^1.3.3",
-    "@types/event-emitter": "^0.3.5",
     "@types/is-hotkey": "^0.1.10",
     "@types/jsdom": "^21.1.7",
     "@types/mdast": "^4.0.4",

src/MarkdownEditor/demos/preview.tsx

@@ -1,4 +1,8 @@
-import { MarkdownEditor } from '@ant-design/md-editor';
+import {
+  MARKDOWN_EDITOR_EVENTS,
+  MarkdownEditor,
+  MarkdownEditorInstance,
+} from '@ant-design/md-editor';
 import { Tooltip } from 'antd';
 import React, { useEffect, useState } from 'react';
 const defaultValue = `<!-- {"MarkdownType": "report", "id": "8", "section_ids": " [15, 16, 17] "} -->
@@ -137,7 +141,7 @@ const defaultValue = `<!-- {"MarkdownType": "report", "id": "8", "section_ids":
 
 `;
 export default () => {
-  const editorRef = React.useRef<any>();
+  const editorRef = React.useRef<MarkdownEditorInstance>();
   const [list, setList] = useState([
     {
       selection: {
@@ -194,6 +198,12 @@ export default () => {
   useEffect(() => {
     // @ts-ignore
     window.editorRef = editorRef;
+    editorRef.current?.markdownContainerRef?.current?.addEventListener(
+      MARKDOWN_EDITOR_EVENTS.SELECTIONCHANGE,
+      (e) => {
+        console.log('selectionchange', e);
+      },
+    );
   }, []);
   return (
     <MarkdownEditor

src/MarkdownEditor/editor/Editor.tsx

@@ -3,7 +3,15 @@ import { message } from 'antd';
 import classNames from 'classnames';
 import { observer } from 'mobx-react';
 import React, { useEffect, useMemo, useRef } from 'react';
-import { BaseRange, Editor, Element, Node, Range, Transforms } from 'slate';
+import {
+  BaseRange,
+  BaseSelection,
+  Editor,
+  Element,
+  Node,
+  Range,
+  Transforms,
+} from 'slate';
 import {
   CommentDataType,
   Elements,
@@ -29,7 +37,7 @@ import {
 } from './slate-react';
 import { useEditorStore } from './store';
 import { useStyle } from './style';
-import { isMarkdown } from './utils';
+import { isMarkdown, MARKDOWN_EDITOR_EVENTS } from './utils';
 import { getMediaType } from './utils/dom';
 import {
   EditorUtils,
@@ -57,7 +65,8 @@ export const MEditor = observer(
     reportMode?: MarkdownEditorProps['reportMode'];
     titlePlaceholderContent?: string;
   } & MarkdownEditorProps) => {
-    const { store, markdownEditorRef, readonly } = useEditorStore();
+    const { store, markdownEditorRef, markdownContainerRef, readonly } =
+      useEditorStore();
     const changedMark = useRef(false);
     const value = useRef<any[]>([EditorUtils.p]);
     const nodeRef = useRef<MarkdownEditorInstance>();
@@ -616,6 +625,14 @@ export const MEditor = observer(
           }
           onSelect={() => {
             if (store.focus) {
+              // 选中时，更新选区,并且触发选区变化事件
+              const event = new CustomEvent<BaseSelection>(
+                MARKDOWN_EDITOR_EVENTS.SELECTIONCHANGE,
+                {
+                  detail: markdownEditorRef.current.selection,
+                },
+              );
+              markdownContainerRef?.current?.dispatchEvent(event);
               markdownEditorRef.current.selection =
                 getSelectionFromDomSelection(
                   markdownEditorRef.current,

src/MarkdownEditor/editor/store.ts

@@ -39,6 +39,7 @@ export const EditorStoreContext = createContext<{
   markdownEditorRef: React.MutableRefObject<
     BaseEditor & ReactEditor & HistoryEditor
   >;
+  markdownContainerRef: React.MutableRefObject<HTMLDivElement | null>;
 } | null>(null);
 
 export const useEditorStore = () => {

src/MarkdownEditor/editor/utils/index.ts

@@ -301,6 +301,23 @@ export const debugLog = (path: string, ...msg: any[]) => {
   }
 };
 
+/**
+ * Markdown 编辑器事件常量对象
+ * @constant
+ * @description 包含编辑器的主要事件名称
+ * @property {string} SELECTIONCHANGE - 当编辑器选区发生变化时触发的事件名
+ * @property {string} FOCUS - 当编辑器获得焦点时触发的事件名
+ * @property {string} BLUR - 当编辑器失去焦点时触发的事件名
+ */
+export const MARKDOWN_EDITOR_EVENTS = {
+  // 编辑器选区发生变化时触发的事件名
+  SELECTIONCHANGE: 'md-editor-selectionchange',
+  // 编辑器获得焦点时触发的事件名
+  FOCUS: 'md-editor-focus',
+  // 编辑器失去焦点时触发的事件名
+  BLUR: 'md-editor-blur',
+};
+
 export * from './editorUtils';
 export * from './keyboard';
 export * from './media';