@powerduck/md-editor 0.10.6 → 0.10.8

package/README.md

@@ -22,7 +22,6 @@ High-performance embeddable Markdown editor built on the markdown-it ecosystem.
 - **Simple / Complex modes** -- toggle toolbar and status bar at runtime
 - **Light / Dark themes** -- CSS custom properties, inherits host design tokens
 - **React component** -- `forwardRef` with imperative handle
-- **Zero Chinese** -- all code, comments, and UI strings in American English
 
 ## Installation
 
@@ -245,6 +244,142 @@ npm test                # run all tests (vitest + jsdom)
 npm run build           # vite build + d.ts generation
 ```
 
+## React Demo
+```jsx
+import { useRef, useCallback } from "react";
+import { type MentionItem, type DocItem } from "@powerduck/md-editor";
+import {
+  MarkdownEditorReact,
+  type MarkdownEditorHandle,
+} from "@powerduck/md-editor/react";
+import "@powerduck/md-editor/dist/style.css";
+
+const USERS: MentionItem[] = [
+  {
+    id: "1",
+    label: "Alice",
+    avatar: "https://i.pravatar.cc/40?u=alice",
+    description: "alice@example.com",
+  },
+  {
+    id: "2",
+    label: "Bob",
+    avatar: "https://i.pravatar.cc/40?u=bob",
+    description: "bob@example.com",
+  },
+  { id: "3", label: "Charlie", description: "charlie@example.com" },
+];
+
+const DOCS: DocItem[] = [
+  {
+    id: "d1",
+    title: "Getting Started",
+    url: "https://docs.example.com/start",
+    description: "Quick start guide",
+    thumbnail: "https://picsum.photos/seed/start/96/72",
+  },
+  {
+    id: "d2",
+    title: "API Reference",
+    url: "https://docs.example.com/api",
+    description: "Full API documentation",
+  },
+  {
+    id: "d3",
+    title: "Changelog",
+    url: "https://docs.example.com/changelog",
+    description: "Release notes",
+  },
+];
+
+function App() {
+  const editorRef = useRef<MarkdownEditorHandle>(null);
+
+  const handleSave = useCallback(() => {
+    const markdown = editorRef.current?.getValue() ?? "";
+    console.log("Saving:", markdown);
+  }, []);
+
+  // Stable callbacks so the editor does not recreate on every render
+  const searchUsers = useCallback(async (query: string) => {
+    return USERS.filter((u) =>
+      u.label.toLowerCase().includes(query.toLowerCase()),
+    );
+  }, []);
+
+  const searchDocs = useCallback(async (query: string) => {
+    return DOCS.filter((d) =>
+      d.title.toLowerCase().includes(query.toLowerCase()),
+    );
+  }, []);
+
+  const fetchDocMeta = useCallback(async (url: string) => {
+    // In production, route through your backend to avoid CORS:
+    // const res = await fetch(`/api/og?url=${encodeURIComponent(url)}`);
+    // return res.json();
+    // For demo: return whatever metadata the item already has
+    const doc = DOCS.find((d) => d.url === url);
+    return {
+      title: doc?.title ?? new URL(url).hostname,
+      description: doc?.description,
+      thumbnail: doc?.thumbnail,
+      url,
+    };
+  }, []);
+
+  return (
+    <div style={{ padding: 24, maxWidth: 1100, margin: "0 auto" }}>
+      <div style={{ marginBottom: 12, display: "flex", gap: 8 }}>
+        <button onClick={handleSave}>Save</button>
+        <button onClick={() => editorRef.current?.setTheme("dark")}>
+          Dark
+        </button>
+        <button onClick={() => editorRef.current?.setTheme("light")}>
+          Light
+        </button>
+      </div>
+
+      <MarkdownEditorReact
+        ref={editorRef}
+        defaultValue={[
+          "# Welcome",
+          "",
+          "Type **@** to mention a user, or **/** to insert a document link.",
+          "",
+          "## Task list",
+          "- [ ] This is checked (green)",
+          "- [x] This is unchecked",
+          "- [ x] Spaces inside brackets also work",
+          "",
+          "## Table",
+          "| Name | Role |",
+          "|------|------|",
+          "| Alice | Admin |",
+          "| Bob | Editor |",
+        ].join("\n")}
+        mode="complex"
+        theme="light"
+        onChange={(v) => console.log("auto-save:", v.length)}
+        mention={{
+          onMentionSearch: searchUsers,
+          minChars: 0,
+          maxItems: 8,
+        }}
+        docLink={{
+          onDocSearch: searchDocs,
+          onFetchDocMeta: fetchDocMeta,
+          insertStyle: "auto",
+          minChars: 0,
+          maxItems: 8,
+        }}
+      />
+    </div>
+  );
+}
+
+export default App;
+```
+
 ## Changelog
 
 ### v0.8.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@powerduck/md-editor",
-  "version": "0.10.6",
+  "version": "0.10.8",
   "description": "High-performance embeddable Markdown editor: KaTeX math, Markmap mindmaps, highlight.js code blocks with copy button, github-markdown-css preview, admonition blocks, rich toolbar with image/video/YouTube/table popups, keyboard shortcuts, configurable toolbar, image upload hook, standalone renderMarkdown API, React component, block-level incremental rendering. Simple and complex modes, light/dark themes.",
   "type": "module",
   "main": "dist/index.cjs",