remons-markdown-editor 1.0.0-beta.4 → 1.0.0-beta.6

package/dist/index.css

@@ -1,5 +1,4 @@
-/* src/components/Toolbar/renderers/TablePicker/index.module.less */
-.container {
+.index-module__container___l6BT- {
   padding: 4px;
   display: block;
   min-width: 200px;
@@ -8,13 +7,13 @@
   border-radius: 6px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
-.grid {
+.index-module__grid___tCZ-r {
   display: grid;
   gap: 2px;
   transition: all 0.1s ease;
   justify-content: flex-start;
 }
-.grid .cell {
+.index-module__grid___tCZ-r .index-module__cell___vTDQz {
   width: 24px;
   height: 24px;
   border: 1px solid #e8e8e8;
@@ -23,18 +22,18 @@
   cursor: pointer;
   transition: all 0.1s ease;
 }
-.grid .cell.cellActive {
+.index-module__grid___tCZ-r .index-module__cell___vTDQz.index-module__cellActive___0EYvU {
   border-color: #91caff;
   background: #ddf4ff;
 }
-.hint {
+.index-module__hint___dTObk {
   padding: 12px 16px;
   color: #999;
   font-size: 12px;
   text-align: center;
   cursor: pointer;
 }
-.label {
+.index-module__label___2CmK1 {
   margin-top: 8px;
   font-size: 13px;
   color: #666;
@@ -42,4 +41,245 @@
   min-height: 20px;
   text-align: center;
 }
-/*# sourceMappingURL=index.css.map */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+}
+
+/* ===== CSS 自定义属性（主题变量） ===== */
+/* 浅色主题（默认） */
+:root,
+[data-theme="light"] {
+  --markdown-editor-color-bg-white: rgba(255, 255, 255, 0.6);
+
+  /* ── 边框（毛玻璃） ── */
+  --markdown-editor-color-border: rgba(255, 255, 255, 0.8);
+}
+
+/* ===== 深色主题 ===== */
+[data-theme="dark"] {
+  --markdown-editor-color-bg-white: rgba(46, 51, 80, 0.8);
+
+  --markdown-editor-color-border: rgba(255, 255, 255, 0.1);
+}
+
+.ant-anchor-link-title {
+  white-space: inherit !important;
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZg.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuI6fMZg.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYMZg.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuFuYMZg.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Noto Sans SC';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/notosanssc/v40/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaG9_FnYw.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Noto Sans SC';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/notosanssc/v40/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaG-3FnYw.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Noto Sans SC';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/notosanssc/v40/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaGwHCnYw.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Noto Sans SC';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/notosanssc/v40/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaGzjCnYw.ttf) format('truetype');
+}
+.app {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--markdown-editor-color-border);
+}
+.app.fullscreen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  background: #fff;
+  width: 100vw;
+  height: 100vh;
+}
+.toolbar {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  background: var(--markdown-editor-color-bg-white);
+  border-bottom: 1px solid #d0d7de;
+  gap: 4px;
+  overflow-x: auto;
+}
+.toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.toolbar-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 32px;
+  padding: 0 8px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 500;
+  color: #24292f;
+  transition: background-color 0.15s, color 0.15s;
+  white-space: nowrap;
+}
+.toolbar-button:hover {
+  background: #e1e4e8;
+  color: #0969da;
+}
+.toolbar-button:active {
+  background: #d0d7de;
+}
+.toolbar-button.ant-btn {
+  min-width: 32px;
+  height: 32px;
+  padding: 0 8px;
+  border-color: transparent !important;
+  box-shadow: none !important;
+}
+.toolbar-button.ant-btn:hover {
+  background: #e1e4e8;
+  color: #0969da;
+  border-color: transparent !important;
+  box-shadow: none !important;
+}
+.toolbar-button.ant-btn:active {
+  border-color: transparent !important;
+  box-shadow: none !important;
+}
+:where(.css-dev-only-do-not-override-u6izyw).ant-btn:not(:disabled):not(.ant-btn-disabled):hover {
+  border: none !important;
+}
+.toolbar-separator {
+  width: 1px;
+  height: 24px;
+  background: #d0d7de;
+  margin: 0 4px;
+}
+.split-panels {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+.split-panels .ant-splitter {
+  height: 100%;
+}
+.split-panels .ant-splitter-panel {
+  min-height: 0;
+}
+.editor {
+  height: 100%;
+}
+.cm-scroller {
+  font-family: Consolas, Inter, 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
+}
+.cm-editor {
+  height: 100%;
+}
+.preview {
+  height: 100%;
+  overflow: auto;
+}
+/* 通用容器基类 */
+.md-container {
+  margin: 16px 0;
+  border-radius: 6px;
+  border: 1px solid #d0d7de;
+  overflow: hidden;
+}
+/* 编辑弹窗样式 */
+.edit-dialog {
+  padding: 8px 0;
+}
+.edit-dialog-field {
+  margin-bottom: 16px;
+}
+.edit-dialog-label {
+  display: block;
+  margin-bottom: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #24292f;
+}
+.edit-dialog-input {
+  width: 100%;
+  padding: 6px 10px;
+  font-size: 14px;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  outline: none;
+  transition: border-color 0.15s;
+}
+.edit-dialog-input:focus {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1);
+}
+.edit-dialog-textarea {
+  resize: vertical;
+  font-family: inherit;
+}
+/*$vite$:1*/

package/dist/index.d.ts

@@ -1,157 +1,5 @@
-import * as React from 'react';
-import React__default from 'react';
-import { EditorView } from '@codemirror/view';
-import { EditorState } from '@codemirror/state';
-import { RenderMarkdownProps } from 'remons-render-markdown';
-
-interface ToolbarButtonConfig {
-    id?: string;
-    icon?: React__default.ComponentType;
-    label?: string;
-    children?: ToolbarButtonConfig[];
-    handler?: (view: EditorView, state: EditorState) => void;
-    separatorBefore?: boolean;
-    customRender?: () => React__default.ReactNode;
-    wrapTags?: [string, string];
-    disabled?: boolean;
-}
-/**
- * 弹窗属性配置
- * 用于定义 Markdown 容器中需要填充的属性字段
- */
-interface DialogField {
-    /** 字段键名，用于 Markdown 属性填充 */
-    key: string;
-    /** 默认值 */
-    defaultValue?: string;
-}
-/**
- * 组件 Schema
- * 每个容器组件（如 :::linkCard）定义可编辑字段和弹窗渲染逻辑
- * 也支持简单的标签包裹模式（通过 wrapTags）
- */
-interface ComponentSchema {
-    /** 容器名称，对应 :::name 语法 */
-    name: string;
-    /** 工具栏按钮显示的标签 */
-    label: string;
-    /** 工具栏按钮显示的图标 */
-    icon?: React__default.ReactNode;
-    /**
-     * 标签包裹配置：设置为 [openTag, closeTag] 时，使用标签包裹模式（而非 :::name 容器）
-     * 配置后无需提供 fields 和 renderDialog
-     */
-    wrapTags?: [string, string];
-    /** 弹窗属性配置 — 用于定义 Markdown 内容中需要填充的字段（wrapTags 模式下可选） */
-    fields?: DialogField[];
-    /**
-     * 弹窗内容渲染函数（wrapTags 模式下可选）
-     * 接收当前属性值和回调函数，由用户完全自定义弹窗内容的渲染
-     * @param props 当前属性值，用于回显
-     * @param onChange 属性变更回调，用于更新表单值
-     * @returns 弹窗内容的 ReactNode
-     */
-    renderDialog?: (props: Record<string, string>, onChange: (key: string, value: string) => void) => React__default.ReactNode;
-}
-/**
- * 图片上传配置
- */
-interface ImageUploadConfig {
-    /**
-     * 图片上传接口地址
-     * 需与 onUploadImage 二选一（优先级低于 onUploadImage）
-     */
-    uploadUrl?: string;
-    /**
-     * 自定义上传函数（优先级高于 uploadUrl）
-     * 传入此函数时，将完全接管上传逻辑
-     * @param file 要上传的图片文件
-     * @returns Promise<string> - 返回图片 URL，失败返回 null
-     */
-    onUploadImage?: (file: File) => Promise<string | null>;
-    /**
-     * 处理服务器返回结果的回调，允许转换 URL
-     * 当使用 uploadUrl 方式上传时，可以使用此回调来自定义处理响应数据
-     * @param result 服务器返回的原始响应数据
-     * @returns 图片 URL，如果返回 null 则上传失败
-     */
-    onGetUploadUrl?: (result: any) => string | null;
-}
-
-type PreviewOptions = Omit<RenderMarkdownProps, 'content'> & {
-    languages?: Record<string, any> | null | undefined;
-};
-
-interface MarkdownEditorRef {
-    getContent: () => string;
-}
-interface MarkdownEditorProps {
-    /** 初始内容 */
-    defaultValue?: string;
-    /** 受控内容 */
-    value?: string;
-    /** 内容变化回调 */
-    onChange?: (value: string) => void;
-    /** 是否显示预览面板 */
-    showPreview?: boolean;
-    /** 是否支持全屏 */
-    fullscreen?: boolean;
-    /** Preview 渲染配置 */
-    previewOptions?: PreviewOptions;
-    /** 图片上传配置 */
-    uploadConfig?: ImageUploadConfig;
-}
-declare const _default: React.ForwardRefExoticComponent<MarkdownEditorProps & React.RefAttributes<MarkdownEditorRef>>;
-
-/**
- * 注册自定义容器组件到工具栏。支持单个或批量注册。
- * 支持两种模式：
- *
- * 1. 容器模式（linkCard）：name + fields + renderDialog
- *    插入 :::name 格式的容器，支持弹窗编辑属性
- *
- * 2. 标签包裹模式：name + wrapTags
- *    插入简单的标签包裹文本，如 <plugin-container>...</plugin-container>
- *
- * @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)} />
- *   ),
- * }
- *
- * function MyPage() {
- *   useRegisterToolbar(schema)
- *   return <MarkdownEditor />
- * }
- * ```
- *
- * @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 />
- * }
- * ```
- */
-declare function useRegisterToolbar(schemas: ComponentSchema | ComponentSchema[]): void;
-
-export { type ComponentSchema, type DialogField, type ImageUploadConfig, _default as MarkdownEditor, type MarkdownEditorProps, type MarkdownEditorRef, type PreviewOptions, type ToolbarButtonConfig, useRegisterToolbar };
+export { default as MarkdownEditor } from './MarkdownEditor';
+export type { MarkdownEditorProps, MarkdownEditorRef } from './MarkdownEditor';
+export { useRegisterToolbar } from './hooks/useRegisterToolbar';
+export type { ComponentSchema, DialogField, ToolbarButtonConfig, ImageUploadConfig, } from './types';
+export type { PreviewOptions } from './components/Preview';