kc-plate-editor 0.3.4 → 0.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -8,9 +8,9 @@ import * as React from 'react';
8
8
  export interface StandaloneToolbarProps {
9
9
  /** 工具栏配置 */
10
10
  config: ToolbarConfig;
11
- /** 编辑器实例(可选,如果不提供则创建一个内部实例) */
11
+ /** 编辑器实例(必需,用于共享编辑器状态和历史记录) */
12
12
  editor?: any;
13
- /** 自定义插件列表(可选) */
13
+ /** 自定义插件列表(可选,仅在未提供 editor 时使用) */
14
14
  plugins?: EditorPluginKit;
15
15
  /** 是否显示工具栏,默认 true */
16
16
  showToolbar?: boolean;
@@ -31,22 +31,27 @@ export interface StandaloneToolbarProps {
31
31
  * 独立工具栏组件
32
32
  * 可以在编辑器组件外部独立使用,提供完整的工具栏功能
33
33
  *
34
+ * 重要:当与外部编辑器一起使用时,必须传入 editor 实例以共享历史记录和状态
35
+ *
34
36
  * @example
35
37
  * ```tsx
36
- * // 基础使用
37
- * <StandaloneToolbar config={FULL_TOOLBAR} />
38
+ * // 与编辑器实例关联(推荐用法)
39
+ * const editorRef = useRef<PlateEditorRef>(null);
40
+ * const [editor, setEditor] = useState<any>(null);
38
41
  *
39
- * // 自定义样式和对齐
40
- * <StandaloneToolbar
41
- * config={BASIC_TOOLBAR}
42
- * align="center"
43
- * className="my-custom-toolbar"
44
- * style={{ backgroundColor: '#f0f0f0' }}
42
+ * <StandaloneToolbar config={FULL_TOOLBAR} editor={editor} />
43
+ * <PlateEditor
44
+ * ref={(ref) => {
45
+ * editorRef.current = ref;
46
+ * if (ref) {
47
+ * setEditor(ref.getEditor());
48
+ * }
49
+ * }}
50
+ * showToolbar={false}
45
51
  * />
46
52
  *
47
- * // 与编辑器实例关联
48
- * const editor = usePlateEditor({ plugins: EditorKit });
49
- * <StandaloneToolbar config={FULL_TOOLBAR} editor={editor} />
53
+ * // 独立使用(不推荐,历史记录不共享)
54
+ * <StandaloneToolbar config={FULL_TOOLBAR} />
50
55
  * ```
51
56
  */
52
57
  export declare const StandaloneToolbar: React.ForwardRefExoticComponent<StandaloneToolbarProps & React.RefAttributes<HTMLDivElement>>;
@@ -5,6 +5,11 @@ export interface ConfigurableToolbarProps {
5
5
  config: ToolbarConfig;
6
6
  /** 是否显示工具栏,默认 true */
7
7
  showToolbar?: boolean;
8
+ /** 自定义工具栏按钮 */
9
+ customButtons?: {
10
+ before?: React.ReactNode;
11
+ after?: React.ReactNode;
12
+ };
8
13
  }
9
14
  /**
10
15
  * 可配置工具栏组件