remons-markdown-editor 1.0.0-beta.3 → 1.0.0-beta.5

package/dist/index.css

@@ -1,7 +1,4 @@
-@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;
@@ -10,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;
@@ -25,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;
@@ -44,12 +41,108 @@
   min-height: 20px;
   text-align: center;
 }
+* {
+  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);
+}
 
-/* src/App.css */
+/* ===== 深色主题 ===== */
+[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;
@@ -67,7 +160,7 @@
   display: flex;
   align-items: center;
   padding: 4px 8px;
-  background: #f6f8fa;
+  background: var(--markdown-editor-color-bg-white);
   border-bottom: 1px solid #d0d7de;
   gap: 4px;
   overflow-x: auto;
@@ -142,16 +235,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 +244,14 @@
   height: 100%;
   overflow: auto;
 }
+/* 通用容器基类 */
 .md-container {
   margin: 16px 0;
   border-radius: 6px;
   border: 1px solid #d0d7de;
   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;
 }
@@ -262,4 +282,4 @@
   resize: vertical;
   font-family: inherit;
 }
-/*# sourceMappingURL=index.css.map */
+/*$vite$:1*/

package/dist/index.d.ts

@@ -1,105 +1,5 @@
-import * as react from 'react';
-import react__default from 'react';
-import { RenderMarkdownProps } from 'remons-render-markdown';
-import { EditorView } from '@codemirror/view';
-import { EditorState } from '@codemirror/state';
-
-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;
-}
-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 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';