@powerduck/md-editor 0.10.7 → 0.10.9

package/README.md

@@ -244,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/dist/Editor.d.ts

@@ -1,6 +1,7 @@
 import { EditorView } from '@codemirror/view';
 import { type MentionOptions } from './plugins/mention.js';
 import { type DocLinkOptions } from './plugins/doclink.js';
+export type EditorTheme = 'light' | 'dark';
 export interface CodeEditorOptions {
     value: string;
     onChange?: (value: string) => void;
@@ -13,16 +14,20 @@ export interface CodeEditorOptions {
     mention?: MentionOptions;
     /** Document link inserter configuration */
     docLink?: DocLinkOptions;
+    /** Initial color theme for syntax highlighting. Defaults to 'light'. */
+    theme?: EditorTheme;
 }
 export declare class CodeEditor {
     readonly view: EditorView;
     private lineNumbersCompartment;
     private customKeymapCompartment;
+    private highlightCompartment;
     private onImageFile?;
     private mention;
     private docLink;
     private blurTimeout;
     private destroyed;
+    private theme;
     constructor(container: HTMLElement, options: CodeEditorOptions);
     private handlePaste;
     private handleDrop;
@@ -37,6 +42,12 @@ export declare class CodeEditor {
     getValue(): string;
     setValue(value: string): void;
     setLineNumbers(enabled: boolean): void;
+    /**
+     * Switch the syntax highlighting theme. Reconfigures only the highlight
+     * compartment — the document and view state are preserved, so this is
+     * effectively free on large documents.
+     */
+    setTheme(theme: EditorTheme): void;
     insertAtCursor(text: string): void;
     /**
      * Wrap the current selection with prefix and suffix. If nothing is