remons-markdown-editor 1.0.0 → 2.0.0-beta.0

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.
@@ -1,12 +1,13 @@
1
- import { ImageUploadConfig } from './types';
1
+ import { default as React } from 'react';
2
+ import { ImageUploadConfig, ComponentSchema, NotifyFn } from './types';
2
3
  import { PreviewOptions } from './components/Preview';
3
4
  export interface MarkdownEditorRef {
4
5
  getContent: () => string;
5
6
  }
6
7
  export interface MarkdownEditorProps {
7
- /** 初始内容 */
8
+ /** 初始内容(非受控) */
8
9
  defaultValue?: string;
9
- /** 受控内容 */
10
+ /** 受控内容;传入时请同时提供 onChange,否则外部更新会覆盖本地编辑 */
10
11
  value?: string;
11
12
  /** 内容变化回调 */
12
13
  onChange?: (value: string) => void;
@@ -18,6 +19,24 @@ export interface MarkdownEditorProps {
18
19
  previewOptions?: PreviewOptions;
19
20
  /** 图片上传配置 */
20
21
  uploadConfig?: ImageUploadConfig;
22
+ /**
23
+ * 局部注册的容器 schema:仅对当前编辑器实例生效,
24
+ * 同名时覆盖全局注册(useRegisterToolbar)的 schema。
25
+ * 请传入稳定引用(组件外常量或 useMemo)。
26
+ */
27
+ schemas?: ComponentSchema[];
28
+ /**
29
+ * 提示注入点(如"请先配置图片上传功能")。
30
+ * 缺省使用宿主 antd App 上下文的 message,其次回退 console。
31
+ */
32
+ onNotify?: NotifyFn;
21
33
  }
22
- declare const _default: import('react').ForwardRefExoticComponent<MarkdownEditorProps & import('react').RefAttributes<MarkdownEditorRef>>;
23
- export default _default;
34
+ interface WrapperProps extends MarkdownEditorProps {
35
+ ref?: React.Ref<MarkdownEditorRef>;
36
+ }
37
+ /**
38
+ * 包一层 antd App:为库内部的 message 等反馈组件提供上下文;
39
+ * 宿主已有 App 包裹时内层仅作兜底(component={false} 不额外渲染 DOM)。
40
+ */
41
+ export default function MarkdownEditorWithApp({ ref, ...props }: WrapperProps): React.JSX.Element;
42
+ export {};
@@ -1,3 +1,4 @@
1
+ import { ContainerProps } from '../../utils/parseContainer';
1
2
  /**
2
3
  * 弹窗编辑容器属性的组件
3
4
  */
@@ -7,9 +8,9 @@ interface EditDialogProps {
7
8
  /** 容器类型名称 */
8
9
  typeName: string;
9
10
  /** 当前属性值 */
10
- currentProps: Record<string, string>;
11
+ currentProps: ContainerProps;
11
12
  /** 保存回调 */
12
- onSave: (props: Record<string, string>) => void;
13
+ onSave: (props: ContainerProps) => void;
13
14
  /** 关闭回调 */
14
15
  onClose: () => void;
15
16
  }
@@ -3,10 +3,10 @@ import { ImageUploadConfig } from '../../types';
3
3
  interface GetCodeMirrorExtensionsOptions {
4
4
  /** 编辑容器属性的回调函数 */
5
5
  onEditContainer?: OnEditContainer;
6
- /** 图片上传配置 */
7
- uploadConfig?: ImageUploadConfig;
8
- /** 未配置上传时的提示回调 */
9
- onMessageNoUploadConfig?: () => void;
6
+ /** 获取最新图片上传配置(运行期求值) */
7
+ getUploadConfig?: () => ImageUploadConfig | undefined;
8
+ /** 获取最新"未配置上传"提示回调(运行期求值) */
9
+ getOnMessageNoUploadConfig?: () => (() => void) | undefined;
10
10
  }
11
11
  export declare const getCodeMirrorExtensions: (opts?: GetCodeMirrorExtensionsOptions) => import('@codemirror/state').Extension[];
12
12
  export default getCodeMirrorExtensions;
@@ -1,20 +1,25 @@
1
- import { ViewPlugin, DecorationSet } from '@codemirror/view';
2
- import { Facet } from '@codemirror/state';
1
+ import { ViewPlugin, EditorView, DecorationSet } from '@codemirror/view';
2
+ import { EditorState, Facet } from '@codemirror/state';
3
+ import { ContainerBlock } from '../../utils/parseContainer';
3
4
  /**
4
5
  * 编辑容器属性的回调函数类型
6
+ * @param view 当前编辑器实例
7
+ * @param container 被点击编辑的容器块(含位置与最新属性)
5
8
  */
6
- export interface OnEditContainer {
7
- (view: any, typeName: string, propsLineFrom: number, propsLineTo: number, currentProps: Record<string, string>): void;
8
- }
9
+ export type OnEditContainer = (view: EditorView, container: ContainerBlock) => void;
9
10
  /**
10
11
  * 自定义 facet 用于传递编辑回调
11
12
  */
12
- export declare const containerEditCallback: Facet<any, OnEditContainer>;
13
+ export declare const containerEditCallback: Facet<OnEditContainer, OnEditContainer | null>;
13
14
  /**
14
15
  * 容器编辑 ViewPlugin
15
- * 将容器的 ::: 头行和 {} 属性行替换为只读 widget,使其无法在编辑器中直接编辑
16
+ * 将容器的 ::: 头行和 {} 属性行替换为只读 widget,使其无法在编辑器中直接编辑。
17
+ * 仅在文档内容变化时重建装饰,光标移动不触发全文扫描。
16
18
  */
17
19
  export declare const containerWidgetPlugin: ViewPlugin<{
18
20
  decorations: DecorationSet;
19
- update(update: any): void;
21
+ update(update: {
22
+ docChanged: boolean;
23
+ state: EditorState;
24
+ }): void;
20
25
  }, undefined>;
@@ -1,4 +1,5 @@
1
1
  import { EditorView } from 'codemirror';
2
+ import { OnEditContainer } from './containerWidget';
2
3
  import { ImageUploadConfig } from '../../types';
3
4
  interface EditorProps {
4
5
  value: string;
@@ -6,7 +7,7 @@ interface EditorProps {
6
7
  onScrollReady?: (scrollDOM: HTMLElement) => void;
7
8
  onViewReady?: (view: EditorView) => void;
8
9
  /** 编辑容器属性的回调 */
9
- onEditContainer?: (view: any, typeName: string, propsLineFrom: number, propsLineTo: number, currentProps: Record<string, string>) => void;
10
+ onEditContainer?: OnEditContainer;
10
11
  /** 图片上传配置 */
11
12
  uploadConfig?: ImageUploadConfig;
12
13
  /** 未配置上传时的提示回调 */
@@ -0,0 +1,9 @@
1
+ /**
2
+ * 配置 iconfont 脚本地址(宿主在应用入口调用),需在首次渲染前设置;
3
+ * 变更后重置内部缓存,下次渲染时以新地址重建图标组件。
4
+ */
5
+ export declare function setIconfontScriptUrl(url: string): void;
6
+ /** 读取当前 iconfont 脚本地址 */
7
+ export declare function getIconfontScriptUrl(): string;
8
+ /** 懒创建图标组件:首次渲染时才注入 iconfont 脚本,避免模块层副作用 */
9
+ export declare function getIconComponent(): import('react').FC<import('@ant-design/icons/es/components/IconFont').IconFontProps<string>>;
@@ -1,10 +1,11 @@
1
1
  import { RenderMarkdownProps } from 'remons-render-markdown';
2
- export type PreviewOptions = Omit<RenderMarkdownProps, 'content'> & {
3
- languages?: Record<string, any> | null | undefined;
4
- };
2
+ export type PreviewOptions = Omit<RenderMarkdownProps, 'content'>;
5
3
  export interface PreviewProps {
6
4
  content: string;
5
+ /** 透传给 RenderMarkdown 的渲染配置 */
7
6
  previewOptions?: PreviewOptions;
7
+ /** 额外的高亮语言包(与 languagesCommon 合并注册) */
8
+ languages?: Record<string, any> | null;
8
9
  }
9
- declare const Preview: import('react').ForwardRefExoticComponent<PreviewProps & import('react').RefAttributes<HTMLDivElement>>;
10
- export default Preview;
10
+ declare const _default: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<PreviewProps & import('react').RefAttributes<HTMLDivElement>>>;
11
+ export default _default;
@@ -46,15 +46,15 @@ export declare function indentMarkdownList(view: EditorView): boolean;
46
46
  */
47
47
  export declare function dedentMarkdownList(view: EditorView): boolean;
48
48
  /**
49
- * 上传图片
49
+ * 上传图片:失败(含网络异常)统一返回 null,不抛错
50
50
  * @param file - 要上传的文件
51
51
  * @param uploadConfig - 上传配置
52
52
  */
53
53
  export declare function uploadFileToServer(file: File, uploadConfig: ImageUploadConfig): Promise<string | null>;
54
54
  /**
55
- * 判断是否配置了图片上传
55
+ * 判断是否配置了图片上传(类型谓词,守卫后可安全访问配置)
56
56
  */
57
- export declare function isUploadConfigured(uploadConfig?: ImageUploadConfig): boolean;
57
+ export declare function isUploadConfigured(uploadConfig?: ImageUploadConfig): uploadConfig is ImageUploadConfig;
58
58
  /**
59
59
  * 图片上传:创建隐藏的 file input 触发选择,上传后插入 markdown 图片语法
60
60
  * @param view - CodeMirror 编辑器实例
@@ -1,6 +1,13 @@
1
- import { ToolbarButtonConfig, ImageUploadConfig } from '../../types';
1
+ import { ToolbarButtonConfig, ImageUploadConfig, NotifyFn } from '../../types';
2
+ interface ToolbarConfigOptions {
3
+ /** 图片上传配置 */
4
+ upload?: ImageUploadConfig;
5
+ /** 提示注入点(由宿主提供,如 antd App 上下文的 message) */
6
+ notify?: NotifyFn;
7
+ }
2
8
  /**
3
9
  * 创建工具栏配置
4
10
  * @param options - 配置选项
5
11
  */
6
- export declare function createToolbarConfig(options?: ImageUploadConfig): ToolbarButtonConfig[];
12
+ export declare function createToolbarConfig(options?: ToolbarConfigOptions): ToolbarButtonConfig[];
13
+ export {};
@@ -1,10 +1,12 @@
1
1
  import { EditorView } from '@codemirror/view';
2
- import { ToolbarButtonConfig, ImageUploadConfig } from '../../../types';
2
+ import { ToolbarButtonConfig, ImageUploadConfig, NotifyFn } from '../../../types';
3
3
  export interface UseToolbarOptions {
4
4
  /** 第三方扩展的按钮配置,将追加到工具栏末尾 */
5
5
  extraItems?: ToolbarButtonConfig[];
6
6
  /** 图片上传配置 */
7
7
  uploadConfig?: ImageUploadConfig;
8
+ /** 提示注入点(由宿主提供) */
9
+ notify?: NotifyFn;
8
10
  }
9
11
  export interface UseToolbarReturn {
10
12
  config: ToolbarButtonConfig[];
@@ -1,5 +1,5 @@
1
1
  import { EditorView } from '@codemirror/view';
2
- import { ToolbarButtonConfig, ImageUploadConfig } from '../../types';
2
+ import { ToolbarButtonConfig, ImageUploadConfig, NotifyFn } from '../../types';
3
3
  interface ToolbarProps {
4
4
  editorView: EditorView | null;
5
5
  fullscreen?: boolean;
@@ -8,6 +8,9 @@ interface ToolbarProps {
8
8
  extraItems?: ToolbarButtonConfig[];
9
9
  /** 图片上传配置 */
10
10
  uploadConfig?: ImageUploadConfig;
11
+ /** 提示注入点(由宿主提供) */
12
+ notify?: NotifyFn;
11
13
  }
12
- export default function Toolbar({ editorView, fullscreen, onToggleFullscreen, extraItems, uploadConfig }: ToolbarProps): import('react').JSX.Element;
13
- export {};
14
+ declare function Toolbar({ editorView, fullscreen, onToggleFullscreen, extraItems, uploadConfig, notify }: ToolbarProps): import('react').JSX.Element;
15
+ declare const _default: import('react').MemoExoticComponent<typeof Toolbar>;
16
+ export default _default;
@@ -1,5 +1,4 @@
1
- import { default as React } from 'react';
2
1
  import { EditorView } from '@codemirror/view';
3
2
  export default function TableDropdown({ editorView }: {
4
3
  editorView: EditorView | null;
5
- }): React.JSX.Element;
4
+ }): import('react').JSX.Element;
@@ -93,6 +93,9 @@ import { ComponentSchema } from '../types';
93
93
  * @example 批量注册
94
94
  * ```tsx
95
95
  * function MyPage() {
96
+ * // 注意:schema 需声明为稳定引用(组件外常量或 useMemo),
97
+ * // 否则每次渲染都会重新注册;多实例互不干扰的场景请改用
98
+ * // <MarkdownEditor schemas={[...]} /> 局部注册
96
99
  * useRegisterToolbar([schema1, schema2, schema3])
97
100
  * return <MarkdownEditor />
98
101
  * }
@@ -1,6 +1,9 @@
1
1
  /**
2
2
  * 双向滚动同步 Hook
3
3
  * 编辑器与预览区互相同步滚动位置(基于比例)
4
- * 使用 síncing 锁防止双向循环触发
4
+ * 使用 syncing 锁防止双向循环触发
5
+ *
6
+ * 直接接收滚动容器元素(而非 ref):元素变化时 effect 重新执行并重新绑定监听,
7
+ * 避免"挂载时容器尚未就绪 / 编辑器 view 被重建"导致监听永久失效或绑到旧节点。
5
8
  */
6
- export declare function useScrollSync(sourceRef: React.RefObject<HTMLElement | null>, targetRef: React.RefObject<HTMLDivElement | null>): void;
9
+ export declare function useScrollSync(source: HTMLElement | null, target: HTMLElement | null): void;