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

package/dist/index.css

@@ -1,64 +1,202 @@
-@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap";
-
-/* src/components/Toolbar/renderers/TablePicker/index.module.less */
-.container {
+.index-module__container___l6BT- {
   padding: 4px;
   display: block;
   min-width: 200px;
-  background: #fff;
-  border: 1px solid #e5e7eb;
+  background: var(--remons-md-editor-bg-picker);
+  border: 1px solid var(--remons-md-editor-color-border-light);
   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;
+  border: 1px solid var(--remons-md-editor-color-border-light);
   border-radius: 2px;
   background: transparent;
   cursor: pointer;
   transition: all 0.1s ease;
 }
-.grid .cell.cellActive {
-  border-color: #91caff;
-  background: #ddf4ff;
+.index-module__grid___tCZ-r .index-module__cell___vTDQz.index-module__cellActive___0EYvU {
+  border-color: var(--remons-md-editor-color-cell-active);
+  background: var(--remons-md-editor-bg-cell-active);
 }
-.hint {
+.index-module__hint___dTObk {
   padding: 12px 16px;
-  color: #999;
+  color: var(--remons-md-editor-color-hint);
   font-size: 12px;
   text-align: center;
   cursor: pointer;
 }
-.label {
+.index-module__label___2CmK1 {
   margin-top: 8px;
   font-size: 13px;
-  color: #666;
+  color: var(--remons-md-editor-color-label);
   font-weight: 500;
   min-height: 20px;
   text-align: center;
 }
-
-/* src/App.css */
-.app {
-  height: 100vh;
+html,
+body {
+  margin: 0;
+  padding: 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;
+}
+
+#markdown-editor {
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+}
+
+/* ===== CSS 自定义属性（主题变量） ===== */
+/* 浅色主题（默认） */
+:root,
+[data-theme="light"] {
+  /* 背景色 */
+  --remons-md-editor-bg-primary: #f3f3f3;
+  --remons-md-editor-bg-white: rgba(255, 255, 255, 0.6);
+  --remons-md-editor-bg-hover: #e1e4e8;
+  --remons-md-editor-bg-active: #d0d7de;
+  --remons-md-editor-bg-fullscreen: #fff;
+
+  /* 文字颜色 */
+  --remons-md-editor-color-text: #24292f;
+  --remons-md-editor-color-text-hover: #0969da;
+
+  /* 边框 */
+  --remons-md-editor-color-border: rgba(255, 255, 255, 0.8);
+  --remons-md-editor-color-border-light: #d0d7de;
+
+  /* 焦点 */
+  --remons-md-editor-color-focus: #0969da;
+  --remons-md-editor-color-focus-shadow: rgba(9, 105, 218, 0.1);
+
+  /* 工具选择器 */
+  --remons-md-editor-bg-picker: #fff;
+  --remons-md-editor-bg-cell-active: #ddf4ff;
+  --remons-md-editor-color-cell-active: #91caff;
+  --remons-md-editor-color-hint: #999;
+  --remons-md-editor-color-label: #666;
+}
+
+/* ===== 深色主题 ===== */
+[data-theme="dark"] {
+  /* 背景色 */
+  --remons-md-editor-bg-primary: #1a1d23;
+  --remons-md-editor-bg-white: rgba(46, 51, 80, 0.8);
+  --remons-md-editor-bg-hover: #4a5163;
+  --remons-md-editor-bg-active: #5a6278;
+  --remons-md-editor-bg-fullscreen: #1a1d23;
+
+  /* 文字颜色 */
+  --remons-md-editor-color-text: #c9d1d9;
+  --remons-md-editor-color-text-hover: #58a6ff;
+
+  /* 边框 */
+  --remons-md-editor-color-border: rgba(255, 255, 255, 0.1);
+  --remons-md-editor-color-border-light: #3a3f4b;
+
+  /* 焦点 */
+  --remons-md-editor-color-focus: #58a6ff;
+  --remons-md-editor-color-focus-shadow: rgba(88, 166, 255, 0.15);
+
+  /* 工具选择器 */
+  --remons-md-editor-bg-picker: #2e3350;
+  --remons-md-editor-bg-cell-active: #1a3a5c;
+  --remons-md-editor-color-cell-active: #58a6ff;
+  --remons-md-editor-color-hint: #8b949e;
+  --remons-md-editor-color-label: #8b949e;
+}
+
+.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/v41/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/v41/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/v41/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/v41/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaGzjCnYw.ttf) format('truetype');
+}
+.markdown-editor-app {
+  height: 100%;
   display: flex;
   flex-direction: column;
+  border: 1px solid var(--markdown-editor-color-border);
+  border-radius: 12px;
+  background: var(--remons-md-editor-bg-primary);
 }
-.app.fullscreen {
+.markdown-editor-app .ant-btn:hover {
+  border: none !important;
+  background-color: var(--remons-md-editor-bg-hover) !important;
+  color: var(--remons-md-editor-color-text-hover) !important;
+}
+.markdown-editor-app.fullscreen {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 9999;
-  background: #fff;
+  background: var(--remons-md-editor-bg-fullscreen);
   width: 100vw;
   height: 100vh;
 }
@@ -67,8 +205,8 @@
   display: flex;
   align-items: center;
   padding: 4px 8px;
-  background: #f6f8fa;
-  border-bottom: 1px solid #d0d7de;
+  background: var(--remons-md-editor-bg-white);
+  border-bottom: 1px solid var(--remons-md-editor-color-border-light);
   gap: 4px;
   overflow-x: auto;
 }
@@ -90,16 +228,20 @@
   cursor: pointer;
   font-size: 16px;
   font-weight: 500;
-  color: #24292f;
+  color: var(--remons-md-editor-color-text);
   transition: background-color 0.15s, color 0.15s;
   white-space: nowrap;
 }
+.toolbar-button svg {
+  width: 16px;
+  height: 16px;
+}
 .toolbar-button:hover {
-  background: #e1e4e8;
-  color: #0969da;
+  background: var(--remons-md-editor-bg-hover);
+  color: var(--remons-md-editor-color-text-hover);
 }
 .toolbar-button:active {
-  background: #d0d7de;
+  background: var(--remons-md-editor-bg-active);
 }
 .toolbar-button.ant-btn {
   min-width: 32px;
@@ -109,8 +251,8 @@
   box-shadow: none !important;
 }
 .toolbar-button.ant-btn:hover {
-  background: #e1e4e8;
-  color: #0969da;
+  background: var(--remons-md-editor-bg-hover);
+  color: var(--remons-md-editor-color-text-hover);
   border-color: transparent !important;
   box-shadow: none !important;
 }
@@ -120,11 +262,13 @@
 }
 :where(.css-dev-only-do-not-override-u6izyw).ant-btn:not(:disabled):not(.ant-btn-disabled):hover {
   border: none !important;
+  background-color: var(--remons-md-editor-bg-hover) !important;
+  color: var(--remons-md-editor-color-text-hover) !important;
 }
 .toolbar-separator {
   width: 1px;
   height: 24px;
-  background: #d0d7de;
+  background: var(--remons-md-editor-color-border-light);
   margin: 0 4px;
 }
 .split-panels {
@@ -142,16 +286,7 @@
   height: 100%;
 }
 .cm-scroller {
-  font-family:
-    Consolas,
-    Inter,
-    Noto Sans SC,
-    -apple-system,
-    BlinkMacSystemFont,
-    Segoe UI,
-    PingFang SC,
-    Microsoft YaHei,
-    sans-serif !important;
+  font-family: Consolas, Inter, 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
 }
 .cm-editor {
   height: 100%;
@@ -160,78 +295,14 @@
   height: 100%;
   overflow: auto;
 }
+/* 通用容器基类 */
 .md-container {
   margin: 16px 0;
   border-radius: 6px;
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--remons-md-editor-color-border-light);
   overflow: hidden;
 }
-.link-card {
-  background: #f6f8fa;
-}
-.link-card-content {
-  padding: 16px;
-}
-.link-card-title {
-  margin: 0 0 4px;
-  font-size: 16px;
-  font-weight: 600;
-}
-.link-card-title a {
-  color: #0969da;
-  text-decoration: none;
-}
-.link-card-title a:hover {
-  text-decoration: underline;
-}
-.link-card-desc {
-  margin: 0;
-  font-size: 14px;
-  color: #57606a;
-  line-height: 1.5;
-}
-.link-card-primary {
-  background: #ddf4ff;
-  border-color: #54aeff;
-}
-.link-card-primary .link-card-title a {
-  color: #0550ae;
-}
-.link-card-warning {
-  background: #fff8c5;
-  border-color: #d4a72c;
-}
-.link-card-warning .link-card-title a {
-  color: #7d4e00;
-}
-.note {
-  padding: 12px 16px;
-}
-.note-info {
-  background: #ddf4ff;
-  border-color: #54aeff;
-}
-.note-tip {
-  background: #dafbe1;
-  border-color: #4ac26b;
-}
-.note-warning {
-  background: #fff8c5;
-  border-color: #d4a72c;
-}
-.note-danger {
-  background: #ffebe9;
-  border-color: #fb857b;
-}
-.note-title {
-  margin: 0 0 4px;
-  font-size: 14px;
-  font-weight: 600;
-}
-.note-text {
-  font-size: 14px;
-  line-height: 1.5;
-}
+/* 编辑弹窗样式 */
 .edit-dialog {
   padding: 8px 0;
 }
@@ -243,23 +314,23 @@
   margin-bottom: 6px;
   font-size: 14px;
   font-weight: 500;
-  color: #24292f;
+  color: var(--remons-md-editor-color-text);
 }
 .edit-dialog-input {
   width: 100%;
   padding: 6px 10px;
   font-size: 14px;
-  border: 1px solid #d0d7de;
+  border: 1px solid var(--remons-md-editor-color-border-light);
   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);
+  border-color: var(--remons-md-editor-color-focus);
+  box-shadow: 0 0 0 3px var(--remons-md-editor-color-focus-shadow);
 }
 .edit-dialog-textarea {
   resize: vertical;
   font-family: inherit;
 }
-/*# sourceMappingURL=index.css.map */
+/*$vite$:1*/

package/dist/index.d.ts

@@ -1,98 +1,5 @@
-import * as React from 'react';
-import React__default from 'react';
-import { EditorView } from '@codemirror/view';
-import { EditorState } from '@codemirror/state';
-
-interface MarkdownEditorRef {
-    getContent: () => string;
-}
-interface MarkdownEditorProps {
-    /** 初始内容 */
-    defaultValue?: string;
-    /** 受控内容 */
-    value?: string;
-    /** 内容变化回调 */
-    onChange?: (value: string) => void;
-    /** 是否显示预览面板 */
-    showPreview?: boolean;
-    /** 是否支持全屏 */
-    fullscreen?: boolean;
-}
-declare const _default: React.ForwardRefExoticComponent<MarkdownEditorProps & React.RefAttributes<MarkdownEditorRef>>;
-
-interface ToolbarButtonConfig {
-    id?: string;
-    icon?: React__default.ComponentType;
-    label?: string;
-    children?: ToolbarButtonConfig[];
-    handler?: (view: EditorView, state: EditorState) => void;
-    separatorBefore?: boolean;
-    customRender?: () => React__default.ReactNode;
-}
-/**
- * 弹窗属性配置
- * 用于定义 Markdown 容器中需要填充的属性字段
- */
-interface DialogField {
-    /** 字段键名，用于 Markdown 属性填充 */
-    key: string;
-    /** 默认值 */
-    defaultValue?: string;
-}
-/**
- * 组件 Schema
- * 每个容器组件（如 :::linkCard）定义可编辑字段和弹窗渲染逻辑
- */
-interface ComponentSchema {
-    /** 容器名称，对应 :::name 语法 */
-    name: string;
-    /** 工具栏按钮显示的标签 */
-    label: string;
-    /** 工具栏按钮显示的图标 */
-    icon?: React__default.ReactNode;
-    /** 弹窗属性配置 — 用于定义 Markdown 内容中需要填充的字段 */
-    fields: DialogField[];
-    /**
-     * 弹窗内容渲染函数（必填）
-     * 接收当前属性值和回调函数，由用户完全自定义弹窗内容的渲染
-     * @param props 当前属性值，用于回显
-     * @param onChange 属性变更回调，用于更新表单值
-     * @returns 弹窗内容的 ReactNode
-     */
-    renderDialog: (props: Record<string, string>, onChange: (key: string, value: string) => void) => React__default.ReactNode;
-}
-
-/**
- * 注册自定义容器组件到工具栏。支持单个或批量注册。
- * 支持 linkCard 形式的 schema（name + fields + renderDialog）。
- * fields 定义 Markdown 属性字段，renderDialog 定义弹窗内容。
- *
- * @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([schema1, schema2, schema3])
- *   return <MarkdownEditor />
- * }
- * ```
- */
-declare function useRegisterToolbar(schemas: ComponentSchema | ComponentSchema[]): void;
-
-export { type ComponentSchema, type DialogField, _default as MarkdownEditor, type MarkdownEditorProps, type MarkdownEditorRef, 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';