feat: on paint event

packages/core/src/event/bus/action.ts

@@ -37,6 +37,8 @@ export type Handler<T extends EventType> = {
   priority: number;
   listener: Listener<T>;
 };
-export type WithStop<T> = T & { stop: () => void; prevent: () => void; _raw: T; _key: string };
 export type Listener<T extends EventType> = (value: WithStop<EventMap[T]>) => void;
 export type Listeners = { [T in EventType]?: Handler<T>[] };
+export type WithStop<T> = T extends Object.Any
+  ? T & { stop: () => void; prevent: () => void; _raw: T; _key: string }
+  : T;

packages/core/src/event/bus/index.ts

@@ -8,7 +8,7 @@ export class EventBus {
   /**
    * @param key
    * @param listener
-   * @param priority
+   * @param priority 默认 100
    */
   public on<T extends EventType>(key: T, listener: Listener<T>, priority = DEFAULT_PRIORITY) {
     this.addEventListener(key, listener, priority, false);
@@ -17,7 +17,7 @@ export class EventBus {
   /**
    * @param key
    * @param listener
-   * @param priority
+   * @param priority 默认 100
    */
   public once<T extends EventType>(key: T, listener: Listener<T>, priority = DEFAULT_PRIORITY) {
     this.addEventListener(key, listener, priority, true);

packages/core/src/preset/editable.tsx

@@ -7,6 +7,7 @@ import { INIT_NODE } from "../editor/constant";
 import { EDITOR_EVENT } from "../event/bus/action";
 import type { ApplyPlugins } from "../plugin/types/apply";
 import { EDITOR_STATE } from "../state/types";
+import { WithContext } from "./with-context";
 
 type EditableProps = {
   readonly?: boolean;
@@ -86,22 +87,24 @@ export class Editable extends React.PureComponent<EditableProps, EditableState>
         value={this.props.init || this.props.editor.options.init || INIT_NODE}
         onChange={this.props.onChange}
       >
-        <EditableFC
-          decorate={this.state.renderModule.decorate}
-          renderElement={this.state.renderModule.renderBlock}
-          renderLeaf={this.state.renderModule.renderLeaf}
-          readOnly={this.props.readonly}
-          placeholder={this.props.placeholder}
-          onKeyDown={this.onKeyDown}
-          onKeyPress={this.onKeyPress}
-          onMouseDown={this.onMouseDown}
-          onMouseUp={this.onMouseUp}
-          onCopy={this.onCopy}
-          onCut={this.onCut}
-          onPaste={this.onPaste}
-          onFocus={this.onFocus}
-          onBlur={this.onBlur}
-        />
+        <WithContext editor={this.props.editor}>
+          <EditableFC
+            decorate={this.state.renderModule.decorate}
+            renderElement={this.state.renderModule.renderBlock}
+            renderLeaf={this.state.renderModule.renderLeaf}
+            readOnly={this.props.readonly}
+            placeholder={this.props.placeholder}
+            onKeyDown={this.onKeyDown}
+            onKeyPress={this.onKeyPress}
+            onMouseDown={this.onMouseDown}
+            onMouseUp={this.onMouseUp}
+            onCopy={this.onCopy}
+            onCut={this.onCut}
+            onPaste={this.onPaste}
+            onFocus={this.onFocus}
+            onBlur={this.onBlur}
+          />
+        </WithContext>
       </EditorProvider>
     );
   }

packages/core/src/preset/with-context.tsx

@@ -0,0 +1,35 @@
+import { useSlate } from "doc-editor-delta";
+import type { FC } from "react";
+import { useEffect, useRef } from "react";
+
+import type { EditorKit } from "../editor";
+import { EDITOR_EVENT } from "../event/bus/action";
+
+export const WithContext: FC<{ editor: EditorKit }> = props => {
+  const { editor, children } = props;
+  const isNeedPaint = useRef(true);
+  // 保证每次触发 Apply 时都会重新渲染
+  // https://github.com/ianstormtaylor/slate/blob/25be3b/packages/slate-react/src/components/slate.tsx#L29
+  useSlate();
+
+  useEffect(() => {
+    const onContentChange = () => {
+      isNeedPaint.current = true;
+    };
+    editor.event.on(EDITOR_EVENT.CONTENT_CHANGE, onContentChange, 1);
+    return () => {
+      editor.event.off(EDITOR_EVENT.CONTENT_CHANGE, onContentChange);
+    };
+  }, [editor]);
+
+  useEffect(() => {
+    if (isNeedPaint.current) {
+      Promise.resolve().then(() => {
+        editor.event.trigger(EDITOR_EVENT.PAINT, {});
+      });
+    }
+    isNeedPaint.current = false;
+  });
+
+  return children as JSX.Element;
+};