remons-markdown-editor 1.0.0-beta.2 → 1.0.0-beta.21

package/dist/App.d.ts

@@ -0,0 +1,2 @@
+declare function App(): import('react').JSX.Element;
+export default App;

package/dist/MarkdownEditor.d.ts

@@ -0,0 +1,23 @@
+import { ImageUploadConfig } from './types';
+import { PreviewOptions } from './components/Preview';
+export interface MarkdownEditorRef {
+    getContent: () => string;
+}
+export interface MarkdownEditorProps {
+    /** 初始内容 */
+    defaultValue?: string;
+    /** 受控内容 */
+    value?: string;
+    /** 内容变化回调 */
+    onChange?: (value: string) => void;
+    /** 是否显示预览面板 */
+    showPreview?: boolean;
+    /** 是否支持全屏 */
+    fullscreen?: boolean;
+    /** Preview 渲染配置 */
+    previewOptions?: PreviewOptions;
+    /** 图片上传配置 */
+    uploadConfig?: ImageUploadConfig;
+}
+declare const _default: import('react').ForwardRefExoticComponent<MarkdownEditorProps & import('react').RefAttributes<MarkdownEditorRef>>;
+export default _default;

package/dist/components/Dialog/EditDialog.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 弹窗编辑容器属性的组件
+ */
+interface EditDialogProps {
+    /** 弹窗是否显示 */
+    visible: boolean;
+    /** 容器类型名称 */
+    typeName: string;
+    /** 当前属性值 */
+    currentProps: Record<string, string>;
+    /** 保存回调 */
+    onSave: (props: Record<string, string>) => void;
+    /** 关闭回调 */
+    onClose: () => void;
+}
+/**
+ * 属性编辑弹窗组件
+ * 根据组件 schema 的 renderDialog 函数渲染弹窗内容
+ */
+export default function EditDialog({ visible, typeName, currentProps, onSave, onClose }: EditDialogProps): import('react').JSX.Element | null;
+export {};

package/dist/components/Editor/codemirrorExtensions.d.ts

@@ -0,0 +1,12 @@
+import { OnEditContainer } from './containerWidget';
+import { ImageUploadConfig } from '../../types';
+interface GetCodeMirrorExtensionsOptions {
+    /** 编辑容器属性的回调函数 */
+    onEditContainer?: OnEditContainer;
+    /** 图片上传配置 */
+    uploadConfig?: ImageUploadConfig;
+    /** 未配置上传时的提示回调 */
+    onMessageNoUploadConfig?: () => void;
+}
+export declare const getCodeMirrorExtensions: (opts?: GetCodeMirrorExtensionsOptions) => import('@codemirror/state').Extension[];
+export default getCodeMirrorExtensions;

package/dist/components/Editor/containerWidget.d.ts

@@ -0,0 +1,20 @@
+import { ViewPlugin, DecorationSet } from '@codemirror/view';
+import { Facet } from '@codemirror/state';
+/**
+ * 编辑容器属性的回调函数类型
+ */
+export interface OnEditContainer {
+    (view: any, typeName: string, propsLineFrom: number, propsLineTo: number, currentProps: Record<string, string>): void;
+}
+/**
+ * 自定义 facet 用于传递编辑回调
+ */
+export declare const containerEditCallback: Facet<any, OnEditContainer>;
+/**
+ * 容器编辑 ViewPlugin
+ * 将容器的 ::: 头行和 {} 属性行替换为只读 widget，使其无法在编辑器中直接编辑
+ */
+export declare const containerWidgetPlugin: ViewPlugin<{
+    decorations: DecorationSet;
+    update(update: any): void;
+}, undefined>;

package/dist/components/Editor/index.d.ts

@@ -0,0 +1,16 @@
+import { EditorView } from 'codemirror';
+import { ImageUploadConfig } from '../../types';
+interface EditorProps {
+    value: string;
+    onChange: (value: string) => void;
+    onScrollReady?: (scrollDOM: HTMLElement) => void;
+    onViewReady?: (view: EditorView) => void;
+    /** 编辑容器属性的回调 */
+    onEditContainer?: (view: any, typeName: string, propsLineFrom: number, propsLineTo: number, currentProps: Record<string, string>) => void;
+    /** 图片上传配置 */
+    uploadConfig?: ImageUploadConfig;
+    /** 未配置上传时的提示回调 */
+    onMessageNoUploadConfig?: () => void;
+}
+export default function Editor({ value, onChange, onScrollReady, onViewReady, onEditContainer, uploadConfig, onMessageNoUploadConfig }: EditorProps): import('react').JSX.Element;
+export {};

package/dist/components/Icon/index.d.ts

@@ -0,0 +1,2 @@
+declare function IconComponent(type: string, className?: string): import('react').JSX.Element;
+export default IconComponent;

package/dist/components/Panel/SplitPanels.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+interface SplitPanelsProps {
+    leftPanel: React.ReactNode;
+    rightPanel: React.ReactNode;
+}
+export default function SplitPanels({ leftPanel, rightPanel }: SplitPanelsProps): React.JSX.Element;
+export {};

package/dist/components/Preview/index.d.ts

@@ -0,0 +1,10 @@
+import { RenderMarkdownProps } from 'remons-render-markdown';
+export type PreviewOptions = Omit<RenderMarkdownProps, 'content'> & {
+    languages?: Record<string, any> | null | undefined;
+};
+export interface PreviewProps {
+    content: string;
+    previewOptions?: PreviewOptions;
+}
+declare const Preview: import('react').ForwardRefExoticComponent<PreviewProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Preview;

package/dist/components/Toolbar/buttons.d.ts

@@ -0,0 +1,59 @@
+import { EditorView } from '@codemirror/view';
+import { ImageUploadConfig } from '../../types';
+/**
+ * 在光标位置插入文本
+ */
+export declare function insertAtCursor(view: EditorView, before: string, after?: string, placeholder?: string): void;
+/**
+ * 在当前行行首插入文本
+ */
+export declare function insertAtLineStart(view: EditorView, text: string): void;
+/**
+ * 切换标题：
+ * - 当前行已是目标级别标题 → 移除行首 # 前缀（变回普通文本）
+ * - 当前行是其他级别标题 → 替换为目标级别
+ * - 当前行是普通文本 → 插入目标级别前缀
+ * @param view - CodeMirror 编辑器实例
+ * @param level - 标题级别（1-6）
+ */
+export declare function toggleHeading(view: EditorView, level: number): void;
+/**
+ * 切换任务列表（checkbox 待办）
+ * - 支持多行：对选区内每一行应用 `- [ ] `
+ * - 普通列表项（如 `- 内容`）直接转换为 `- [ ] 内容`
+ * - 切换：若所有目标行都已是任务项，则移除行首前缀
+ */
+export declare function toggleTaskList(view: EditorView): void;
+/**
+ * 切换行首前缀（支持多行选区）
+ * - 已是对应前缀的行 → 移除前缀（变回普通文本）
+ * - 未加前缀的行 → 在行首插入前缀
+ * @param view - CodeMirror 编辑器实例
+ * @param pattern - 匹配行首前缀的正则
+ * @param insertText - 未匹配时插入的前缀文本
+ */
+export declare function toggleLinePrefix(view: EditorView, pattern: RegExp, insertText: string): void;
+/**
+ * 上传图片
+ * @param file - 要上传的文件
+ * @param uploadConfig - 上传配置
+ */
+export declare function uploadFileToServer(file: File, uploadConfig: ImageUploadConfig): Promise<string | null>;
+/**
+ * 判断是否配置了图片上传
+ */
+export declare function isUploadConfigured(uploadConfig?: ImageUploadConfig): boolean;
+/**
+ * 图片上传：创建隐藏的 file input 触发选择，上传后插入 markdown 图片语法
+ * @param view - CodeMirror 编辑器实例
+ * @param uploadConfig - 上传配置（包含 uploadUrl 或 onUploadImage）
+ */
+export declare function uploadImage(view: EditorView, uploadConfig: ImageUploadConfig): void;
+/**
+ * 用前缀和后缀包裹选中文本
+ */
+export declare function wrapSelection(view: EditorView, prefix: string, suffix: string): void;
+/**
+ * 切换包裹：选中的文本已包含标签则移除，否则添加
+ */
+export declare function toggleWrap(view: EditorView, openTag: string, closeTag: string): void;

package/dist/components/Toolbar/config.d.ts

@@ -0,0 +1,6 @@
+import { ToolbarButtonConfig, ImageUploadConfig } from '../../types';
+/**
+ * 创建工具栏配置
+ * @param options - 配置选项
+ */
+export declare function createToolbarConfig(options?: ImageUploadConfig): ToolbarButtonConfig[];

package/dist/components/Toolbar/hooks/useToolbar.d.ts

@@ -0,0 +1,14 @@
+import { EditorView } from '@codemirror/view';
+import { ToolbarButtonConfig, ImageUploadConfig } from '../../../types';
+export interface UseToolbarOptions {
+    /** 第三方扩展的按钮配置，将追加到工具栏末尾 */
+    extraItems?: ToolbarButtonConfig[];
+    /** 图片上传配置 */
+    uploadConfig?: ImageUploadConfig;
+}
+export interface UseToolbarReturn {
+    config: ToolbarButtonConfig[];
+    extraItemsConfig: ToolbarButtonConfig[];
+    handleClick: (button: ToolbarButtonConfig) => void;
+}
+export declare function useToolbar(editorView: EditorView | null, options?: UseToolbarOptions): UseToolbarReturn;

package/dist/components/Toolbar/index.d.ts

@@ -0,0 +1,13 @@
+import { EditorView } from '@codemirror/view';
+import { ToolbarButtonConfig, ImageUploadConfig } from '../../types';
+interface ToolbarProps {
+    editorView: EditorView | null;
+    fullscreen?: boolean;
+    onToggleFullscreen?: () => void;
+    /** 第三方扩展的按钮配置，将追加到工具栏末尾 */
+    extraItems?: ToolbarButtonConfig[];
+    /** 图片上传配置 */
+    uploadConfig?: ImageUploadConfig;
+}
+export default function Toolbar({ editorView, fullscreen, onToggleFullscreen, extraItems, uploadConfig }: ToolbarProps): import('react').JSX.Element;
+export {};

package/dist/components/Toolbar/renderers/TablePicker/TableDropdown.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { EditorView } from '@codemirror/view';
+export default function TableDropdown({ editorView }: {
+    editorView: EditorView | null;
+}): React.JSX.Element;

package/dist/components/Toolbar/renderers/TablePicker/index.d.ts

@@ -0,0 +1,9 @@
+interface TableSize {
+    rows: number;
+    cols: number;
+}
+interface TablePickerProps {
+    onSelect: (size: TableSize) => void;
+}
+export default function TablePicker({ onSelect }: TablePickerProps): import('react').JSX.Element;
+export {};

package/dist/components/Toolbar/renderers/ToolbarItemRenderer.d.ts

@@ -0,0 +1,7 @@
+import { ToolbarButtonConfig } from '../../../types';
+interface Props {
+    item: ToolbarButtonConfig;
+    onClick: (item: ToolbarButtonConfig) => void;
+}
+export declare function ToolbarItemRenderer({ item, onClick }: Props): import('react').JSX.Element;
+export {};

package/dist/hooks/useFullscreen.d.ts

@@ -0,0 +1,4 @@
+export declare function useFullscreen(): {
+    fullscreen: boolean;
+    toggleFullscreen: () => void;
+};

package/dist/hooks/useRegisterToolbar.d.ts

@@ -0,0 +1,101 @@
+import { ComponentSchema } from '../types';
+/**
+ * 注册自定义容器组件到工具栏。支持单个或批量注册。
+ * 支持两种模式：
+ *
+ * 1. 容器模式（linkCard）：name + fields + renderDialog
+ *    插入 :::name 格式的容器，支持弹窗编辑属性
+ *
+ * 2. 标签包裹模式：name + wrapTags
+ *    插入简单的标签包裹文本，如 <plugin-container>...</plugin-container>
+ *
+ * @example 容器模式 - 使用 fields 自动生成表单（最简）
+ * ```tsx
+ * const schema: ComponentSchema = {
+ *   name: 'alert',
+ *   label: '警告框',
+ *   icon: <AlertOutlined />,
+ *   fields: [
+ *     { key: 'type', name: '类型', componentType: 'select',
+ *       componentProps: { options: [{ value: 'price', label: '价格' }, { value: 'info', label: '信息' }] } },
+ *     { key: 'content', name: '内容', componentType: 'textarea',
+ *       componentProps: { rows: 3 } },
+ *     { key: 'enabled', name: '启用', componentType: 'switch' },
+ *   ],
+ * }
+ * // 支持的 componentType: 'input' | 'textarea' | 'number' | 'select' | 'switch' | 'slider' | 'rate' | 'color' | 'date' | 'dateRange'
+ * ```
+ *
+ * @example 容器模式 - 使用 Form.Item 自动绑定（推荐）
+ * ```tsx
+ * const schema: ComponentSchema = {
+ *   name: 'alert',
+ *   label: '警告框',
+ *   icon: <AlertOutlined />,
+ *   fields: [{ key: 'level', defaultValue: 'info' }],
+ *   renderDialog: ({ form }) => (
+ *     <Form form={form} layout="vertical">
+ *       <Form.Item name="level" label="级别">
+ *         <Input />
+ *       </Form.Item>
+ *     </Form>
+ *   ),
+ * }
+ *
+ * function MyPage() {
+ *   useRegisterToolbar(schema)
+ *   return <MarkdownEditor />
+ * }
+ * ```
+ *
+ * @example 容器模式 - 手动控制
+ * ```tsx
+ * const schema: ComponentSchema = {
+ *   name: 'alert',
+ *   label: '警告框',
+ *   icon: <AlertOutlined />,
+ *   fields: [{ key: 'level', defaultValue: 'info' }],
+ *   renderDialog: ({ props, onChange }) => (
+ *     <Input value={props.level} onChange={e => onChange('level', e.target.value)} />
+ *   ),
+ * }
+ * ```
+ *
+ * @example 容器模式 - 完全自定义弹窗
+ * ```tsx
+ * const schema: ComponentSchema = {
+ *   name: 'alert',
+ *   label: '警告框',
+ *   icon: <AlertOutlined />,
+ *   fields: [{ key: 'level', defaultValue: 'info' }],
+ *   renderDialog: ({ props, onSave }) => (
+ *     <MyCustomEditor
+ *       value={props.level}
+ *       onSave={({ level }) => onSave({ level })}
+ *     />
+ *   ),
+ * }
+ * ```
+ *
+ * @example 标签包裹模式
+ * ```tsx
+ * function MyPage() {
+ *   useRegisterToolbar({
+ *     name: 'plugin-container',
+ *     label: '自定义容器',
+ *     icon: <AlertOutlined />,
+ *     wrapTags: ['<plugin-container>', '</plugin-container>'],
+ *   })
+ *   return <MarkdownEditor />
+ * }
+ * ```
+ *
+ * @example 批量注册
+ * ```tsx
+ * function MyPage() {
+ *   useRegisterToolbar([schema1, schema2, schema3])
+ *   return <MarkdownEditor />
+ * }
+ * ```
+ */
+export declare function useRegisterToolbar(schemas: ComponentSchema | ComponentSchema[]): void;

package/dist/hooks/useScrollSync.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 双向滚动同步 Hook
+ * 编辑器与预览区互相同步滚动位置（基于比例）
+ * 使用 síncing 锁防止双向循环触发
+ */
+export declare function useScrollSync(sourceRef: React.RefObject<HTMLElement | null>, targetRef: React.RefObject<HTMLDivElement | null>): void;