@powerduck/md-editor 0.2.0

package/dist/react.mjs

@@ -0,0 +1,80 @@
+import { jsx as R } from "react/jsx-runtime";
+import { forwardRef as k, useRef as a, useLayoutEffect as y, useEffect as v, useImperativeHandle as H } from "react";
+import { MarkdownEditor as N } from "./index.mjs";
+const C = k(function(V, g) {
+  const {
+    value: n,
+    defaultValue: h,
+    onChange: s,
+    className: E,
+    style: M,
+    mode: i,
+    theme: u,
+    math: l,
+    mindmap: f,
+    preview: d,
+    autoPreview: m,
+    renderDebounce: w
+  } = V, o = a(null), r = a(null), c = a(s);
+  return c.current = s, y(() => {
+    if (!o.current) return;
+    const e = new N(o.current, {
+      value: n ?? h ?? "",
+      mode: i,
+      theme: u,
+      math: l,
+      mindmap: f,
+      preview: d,
+      autoPreview: m,
+      renderDebounce: w,
+      onChange: (t) => {
+        var p;
+        return (p = c.current) == null ? void 0 : p.call(c, t);
+      }
+    });
+    return r.current = e, () => {
+      e.destroy(), r.current = null;
+    };
+  }, [i, l, f, d, m, w]), v(() => {
+    const e = r.current;
+    !e || n === void 0 || e.getValue() !== n && e.setValue(n);
+  }, [n]), v(() => {
+    r.current && u && r.current.setTheme(u);
+  }, [u]), H(
+    g,
+    () => ({
+      getValue: () => {
+        var e;
+        return ((e = r.current) == null ? void 0 : e.getValue()) ?? "";
+      },
+      setValue: (e) => {
+        var t;
+        return (t = r.current) == null ? void 0 : t.setValue(e);
+      },
+      getHtml: () => {
+        var e;
+        return ((e = r.current) == null ? void 0 : e.getHtml()) ?? "";
+      },
+      focus: () => {
+        var e;
+        return (e = r.current) == null ? void 0 : e.focus();
+      },
+      setMode: (e) => {
+        var t;
+        return (t = r.current) == null ? void 0 : t.setMode(e);
+      },
+      setTheme: (e) => {
+        var t;
+        return (t = r.current) == null ? void 0 : t.setTheme(e);
+      },
+      renderNow: () => {
+        var e;
+        return (e = r.current) == null ? void 0 : e.renderNow();
+      }
+    }),
+    []
+  ), /* @__PURE__ */ R("div", { ref: o, className: E, style: M });
+});
+export {
+  C as MarkdownEditorReact
+};

package/dist/style.css

@@ -0,0 +1 @@
+.md-editor-root{--_surface: var(--color-surface, #ffffff);--_surface-subtle: var(--color-surface-subtle, #f8f9fa);--_surface-hover: var(--color-surface-hover, #f4f5f6);--_surface-active: var(--color-surface-active, #e7eaed);--_text-primary: var(--color-text-primary, #26282b);--_text-secondary: var(--color-text-secondary, #6f747c);--_text-tertiary: var(--color-text-tertiary, #989da5);--_accent: var(--color-accent, #f28c28);--_accent-bg: var(--color-accent-bg, #fff8ef);--_accent-bg-soft: var(--color-accent-bg-soft, #fff3e5);--_on-accent: var(--color-on-accent, #ffffff);--_focus-ring: var(--color-focus-ring, rgba(242, 140, 40, .28));--_border-subtle: var(--color-border-subtle, #eceff1);--_border-default: var(--color-border-default, #e0e4e8);--_border-strong: var(--color-border-strong, #ccd2d8);--_shadow-sm: var(--shadow-sm, 0 1px 2px rgba(28, 32, 36, .05));--_radius-md: var(--radius-md, 6px);--_radius-lg: var(--radius-lg, 8px);--_space-1: var(--space-1, 4px);--_space-2: var(--space-2, 8px);--_space-3: var(--space-3, 12px);--_transition-fast: var(--transition-fast, .14s ease);--_font-ui: var(--font-family-ui, Inter, ui-sans-serif, system-ui, sans-serif);--_font-size-sm: var(--font-size-sm, 13px);--_font-size-xs: var(--font-size-xs, 12px);--_control-height-sm: var(--control-height-sm, 28px);border:1px solid var(--_border-default);border-radius:var(--_radius-lg);overflow:hidden;background:var(--_surface);color:var(--_text-primary);font-family:var(--_font-ui);display:flex;flex-direction:column;box-sizing:border-box;box-shadow:var(--_shadow-sm)}.md-editor-root *{box-sizing:border-box}.md-editor-root[data-theme=dark]{--_surface: var(--color-surface, #1f2125);--_surface-subtle: var(--color-surface-subtle, #25282d);--_surface-hover: var(--color-surface-hover, #2b2f35);--_surface-active: var(--color-surface-active, #3d434c);--_text-primary: var(--color-text-primary, #edf0f3);--_text-secondary: var(--color-text-secondary, #b8bec7);--_text-tertiary: var(--color-text-tertiary, #89919c);--_accent: var(--color-accent, #f4a04a);--_accent-bg: var(--color-accent-bg, #2d2419);--_accent-bg-soft: var(--color-accent-bg-soft, #47351d);--_on-accent: var(--color-on-accent, #2a1a0c);--_focus-ring: var(--color-focus-ring, rgba(244, 160, 74, .36));--_border-subtle: var(--color-border-subtle, #2d3239);--_border-default: var(--color-border-default, #3b4149);--_border-strong: var(--color-border-strong, #525a65)}.md-editor-toolbar{display:flex;align-items:center;gap:2px;padding:var(--_space-1) var(--_space-2);border-bottom:1px solid var(--_border-default);background:var(--_surface-subtle);flex-wrap:wrap}.md-editor-toolbar-sep{width:1px;height:18px;background:var(--_border-default);margin:0 var(--_space-1);flex:0 0 auto}.md-editor-toolbar-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--_control-height-sm);height:var(--_control-height-sm);border:1px solid transparent;background:transparent;border-radius:var(--_radius-md);cursor:pointer;color:var(--_text-secondary);transition:background var(--_transition-fast),color var(--_transition-fast),border-color var(--_transition-fast)}.md-editor-toolbar-btn:hover{background:var(--_surface-hover);color:var(--_text-primary)}.md-editor-toolbar-btn:active{background:var(--_surface-active)}.md-editor-toolbar-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--_focus-ring)}.md-editor-toolbar-btn.is-toggle.is-active{background:var(--_accent-bg-soft);color:var(--_accent)}.md-editor-body{display:flex;min-height:320px;flex:1 1 auto}.md-editor-pane{flex:1 1 50%;min-width:0;overflow:auto;padding:var(--_space-3)}.md-editor-source{border-right:1px solid var(--_border-default)}.md-editor-source .cm-editor{height:100%;outline:none}.md-editor-source .cm-editor.cm-focused{outline:none}.md-editor-source .cm-scroller{font-family:SFMono-Regular,ui-monospace,Menlo,Consolas,Courier New,monospace;font-size:var(--_font-size-sm);line-height:1.6}.md-editor-source .cm-gutters{background:transparent;border-right:1px solid var(--_border-subtle);color:var(--_text-tertiary)}.md-editor-source .cm-activeLine,.md-editor-source .cm-activeLineGutter{background:var(--_surface-subtle)}.md-editor-preview{line-height:1.7;font-size:var(--_font-size-sm)}.md-editor-preview img{max-width:100%}.md-editor-preview pre{background:var(--_surface-subtle);padding:var(--_space-3);border-radius:var(--_radius-md);overflow:auto;border:1px solid var(--_border-subtle)}.md-editor-preview code{font-family:SFMono-Regular,ui-monospace,Menlo,Consolas,Courier New,monospace;font-size:.92em}.md-editor-preview :not(pre)>code{background:var(--_surface-subtle);padding:1px 5px;border-radius:var(--radius-xs, 3px)}.md-editor-preview table{border-collapse:collapse}.md-editor-preview th,.md-editor-preview td{border:1px solid var(--_border-default);padding:4px 10px}.md-editor-preview th{background:var(--_surface-subtle)}.md-editor-preview blockquote{border-left:3px solid var(--_border-strong);margin:0;padding-left:var(--_space-3);color:var(--_text-secondary)}.md-editor-preview a{color:var(--_accent)}.md-editor-preview hr{border:none;border-top:1px solid var(--_border-default)}.md-editor-block{content-visibility:auto;contain-intrinsic-size:0 160px}.md-editor-mindmap{border:1px dashed var(--_border-default);border-radius:var(--_radius-md);margin:var(--_space-3) 0;min-height:280px}.md-editor-statusbar{display:flex;align-items:center;gap:var(--_space-3);padding:var(--_space-1) var(--_space-3);border-top:1px solid var(--_border-default);background:var(--_surface-subtle);color:var(--_text-tertiary);font-size:var(--_font-size-xs);min-height:var(--footer-height, 24px)}.md-editor-statusbar-muted{color:var(--_text-tertiary)}.md-editor-statusbar-refresh{margin-left:auto;border:1px solid var(--_border-default);background:var(--_surface);color:var(--_text-primary);border-radius:var(--_radius-md);padding:2px var(--_space-2);font-size:var(--_font-size-xs);cursor:pointer}.md-editor-statusbar-refresh:hover{background:var(--_surface-hover)}

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@powerduck/md-editor",
+  "version": "0.2.0",
+  "description": "High-performance embeddable Markdown editor built on markdown-it: KaTeX math, Markmap mindmaps, native React component, block-level incremental rendering with debounced scheduling. Ships in simple mode (no toolbar) and complex mode (toolbar + status bar), styled via CSS custom properties with light/dark themes.",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist",
+    "src/styles/tokens.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react.mjs",
+      "require": "./dist/react.cjs"
+    },
+    "./dist/style.css": "./dist/style.css",
+    "./styles/tokens.css": "./src/styles/tokens.css",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && tsc -p tsconfig.json --emitDeclarationOnly",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "typecheck:test": "tsc -p tsconfig.test.json --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "preview": "vite preview"
+  },
+  "keywords": [
+    "markdown",
+    "editor",
+    "markdown-it",
+    "katex",
+    "math",
+    "mindmap",
+    "markmap",
+    "codemirror",
+    "react",
+    "performance"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@codemirror/commands": "^6.6.0",
+    "@codemirror/lang-markdown": "^6.2.5",
+    "@codemirror/language-data": "^6.5.1",
+    "@codemirror/state": "^6.4.1",
+    "@codemirror/view": "^6.28.0",
+    "d3": "^7.9.0",
+    "katex": "^0.16.11",
+    "markdown-it": "^14.1.0",
+    "markdown-it-texmath": "^1.0.0",
+    "markmap-lib": "^0.18.7",
+    "markmap-view": "^0.18.7"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.0.0",
+    "@types/d3": "^7.4.3",
+    "@types/markdown-it": "^14.2.0",
+    "@types/node": "^20.19.43",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "jsdom": "^25.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.0",
+    "vitest": "^2.1.0"
+  }
+}

package/src/styles/tokens.css

@@ -0,0 +1,202 @@
+/**
+ * Design token reference file.
+ *
+ * This file defines the complete color / typography / spacing / radius / shadow
+ * system (including the [data-theme="dark"] variant). The md-editor component
+ * styles (see editor.css) consume all these variables via var(--token, fallback)
+ * and never hard-code color values internally.
+ *
+ * Two integration modes:
+ * 1. Your host app already has a same-named design token system (e.g.
+ *    --color-surface defined on :root). Skip this file entirely; the component
+ *    reads the host variables automatically.
+ * 2. You do not have such a system / just want to run a standalone demo.
+ *    Import this file once at your app entry:
+ *      import '@powerduck/md-editor/styles/tokens.css';
+ */
+
+:root {
+    /* Typography */
+    --font-family-ui:
+        Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+        'Segoe UI', sans-serif;
+
+    --font-size-xxs: 10px;
+    --font-size-xs: 12px;
+    --font-size-sm: 13px;
+    --font-size-md: 14px;
+
+    --line-height-tight: 16px;
+    --line-height-normal: 20px;
+    --line-height-cmeditor: 40px;
+
+    --font-weight-regular: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+
+    /* Neutral surfaces */
+    --color-canvas: #fafafa;
+    --color-surface: #ffffff;
+    --color-surface-subtle: #f8f9fa;
+    --color-surface-hover: #f4f5f6;
+    --color-surface-selected: #eef0f2;
+    --color-surface-active: #e7eaed;
+
+    /* Text */
+    --color-text-primary: #26282b;
+    --color-text-secondary: #6f747c;
+    --color-text-tertiary: #989da5;
+    --color-text-disabled: #c2c6cc;
+    --color-text-inverse: #ffffff;
+
+    /* Brand accent */
+    --color-accent: #f28c28;
+    --color-accent-hover: #e47c16;
+    --color-accent-active: #c9640d;
+
+    --color-accent-bg: #fff8ef;
+    --color-accent-bg-subtle: #fffaf5;
+    --color-accent-bg-soft: #fff3e5;
+    --color-accent-bg-active: #ffe7c7;
+
+    --color-accent-border: #f5c98f;
+    --color-accent-disabled: #f7d9b5;
+
+    --color-text-accent: #d97818;
+    --color-on-accent: #ffffff;
+
+    --color-focus-ring: rgba(242, 140, 40, 0.28);
+
+    /* Semantic status colors */
+    --color-warning: #d98a22;
+    --color-success: #428961;
+    --color-danger: #c95555;
+    --color-info: #4f79bf;
+
+    --color-secret: #8267c9;
+    --color-dynamic: #4d7ec8;
+
+    --color-warning-soft: #fff8e8;
+    --color-success-soft: #eff8f2;
+    --color-danger-soft: #fff2f1;
+    --color-info-soft: #f0f5ff;
+
+    /* Borders */
+    --color-border-subtle: #eceff1;
+    --color-border-default: #e0e4e8;
+    --color-border-strong: #ccd2d8;
+
+    /* Spacing */
+    --space-0: 0;
+    --space-1: 4px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+
+    /* Border radius */
+    --radius-xs: 3px;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 8px;
+    --radius-xl: 10px;
+    --radius-full: 9999px;
+
+    /* Component sizing */
+    --header-height: 36px;
+    --footer-height: 24px;
+
+    --control-height-xs: 24px;
+    --control-height-sm: 28px;
+    --control-height-md: 32px;
+
+    --icon-size-xs: 12px;
+    --icon-size-sm: 14px;
+    --icon-size-md: 16px;
+    --icon-size-lg: 18px;
+
+    /* Motion */
+    --transition-fast: 140ms ease;
+    --transition-standard: 180ms ease;
+    --transition-slow: 240ms ease;
+
+    /* Elevation */
+    --shadow-sm:
+        0 1px 2px rgba(28, 32, 36, 0.035),
+        0 1px 3px rgba(28, 32, 36, 0.025);
+
+    --shadow-md:
+        0 6px 18px rgba(28, 32, 36, 0.07),
+        0 2px 6px rgba(28, 32, 36, 0.035);
+
+    --shadow-lg:
+        0 16px 40px rgba(28, 32, 36, 0.1),
+        0 4px 12px rgba(28, 32, 36, 0.05);
+}
+
+:root[data-theme='dark'] {
+    /* Neutral surfaces */
+    --color-canvas: #181a1d;
+    --color-surface: #1f2125;
+    --color-surface-subtle: #25282d;
+    --color-surface-hover: #2b2f35;
+    --color-surface-selected: #343941;
+    --color-surface-active: #3d434c;
+
+    /* Text */
+    --color-text-primary: #edf0f3;
+    --color-text-secondary: #b8bec7;
+    --color-text-tertiary: #89919c;
+    --color-text-disabled: #626b76;
+    --color-text-inverse: #202226;
+
+    /* Brand accent */
+    --color-accent: #f4a04a;
+    --color-accent-hover: #ffb764;
+    --color-accent-active: #df7d20;
+
+    --color-accent-bg: #2d2419;
+    --color-accent-bg-subtle: #382b1b;
+    --color-accent-bg-soft: #47351d;
+    --color-accent-bg-active: #5a4324;
+
+    --color-accent-border: #9b713d;
+    --color-accent-disabled: #765a35;
+
+    --color-text-accent: #ffc98c;
+    --color-on-accent: #2a1a0c;
+
+    --color-focus-ring: rgba(244, 160, 74, 0.36);
+
+    /* Semantic status colors */
+    --color-warning: #e7b45c;
+    --color-success: #67bd89;
+    --color-danger: #ef7c7c;
+    --color-info: #82aef2;
+
+    --color-secret: #ae98ef;
+    --color-dynamic: #7eb0f3;
+
+    --color-warning-soft: #382f19;
+    --color-success-soft: #1c3928;
+    --color-danger-soft: #402020;
+    --color-info-soft: #1d304f;
+
+    /* Borders */
+    --color-border-subtle: #2d3239;
+    --color-border-default: #3b4149;
+    --color-border-strong: #525a65;
+
+    /* Elevation */
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
+
+    --shadow-md:
+        0 8px 24px rgba(0, 0, 0, 0.3),
+        0 2px 6px rgba(0, 0, 0, 0.16);
+
+    --shadow-lg:
+        0 18px 44px rgba(0, 0, 0, 0.42),
+        0 6px 16px rgba(0, 0, 0, 0.22);
+}