@powerduck/md-editor 0.2.0 → 0.5.0

package/dist/plugins/code.d.ts

@@ -0,0 +1,16 @@
+import type MarkdownIt from 'markdown-it';
+import 'highlight.js/styles/atom-one-dark.css';
+export interface CodeHighlightOptions {
+    /** Languages to skip (delegate to the previously-registered renderer). Default: ['mindmap']. */
+    reservedLanguages?: readonly string[];
+}
+/**
+ * Highlight code fences with highlight.js and wrap them in a macOS-style
+ * container with traffic-light dots, a language label, and a copy button.
+ *
+ * The copy button works via event delegation on the preview container
+ * (see MarkdownEditor.setupCopyHandler), so no per-button listeners are needed.
+ *
+ * Mindmap fences are delegated to the previously-registered renderer.
+ */
+export declare function useCodeHighlight(md: MarkdownIt, options?: CodeHighlightOptions): void;

package/dist/plugins/keyboard.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Keyboard shortcut manager for the editor.
+ * Maps key combinations to action names. Used by the toolbar to wire up
+ * shortcuts and by the Help dialog to display them.
+ */
+export interface ShortcutDef {
+    action: string;
+    /** e.g. 'Mod-b' where Mod = Ctrl on Windows/Linux, Cmd on macOS */
+    key: string;
+    description: string;
+}
+export declare const DEFAULT_SHORTCUTS: readonly ShortcutDef[];
+/**
+ * Parse a shortcut string like 'Mod-b' or 'Mod-Alt-1' into a matcher function.
+ * 'Mod' maps to Meta (Cmd) on macOS and Ctrl elsewhere.
+ */
+export declare function matchShortcut(shortcut: string, e: KeyboardEvent): boolean;
+/**
+ * Format a shortcut for display in the Help dialog.
+ * e.g. 'Mod-b' -> 'Ctrl+B' (Windows) or 'Cmd+B' (macOS)
+ */
+export declare function formatShortcut(shortcut: string): string;

package/dist/plugins/math.d.ts

@@ -1,7 +1,3 @@
 import type MarkdownIt from 'markdown-it';
-/**
- * Enable math formula support via KaTeX.
- * Inline:  $E=mc^2$
- * Block:   $$ \\int_0^1 x^2 dx $$
- */
+import 'katex/dist/katex.min.css';
 export declare function useMath(md: MarkdownIt): void;

package/dist/plugins/media.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Extract a YouTube video ID from various URL formats.
+ * Supports: watch?v=, youtu.be/, embed/, shorts/, v/, and raw 11-char IDs.
+ * Returns null if the input is not a recognizable YouTube URL.
+ */
+export declare function extractYouTubeId(input: string): string | null;
+/**
+ * Build a markdown image link that renders as a clickable YouTube thumbnail.
+ * The thumbnail links to the YouTube watch page.
+ */
+export declare function youTubeEmbedMarkdown(videoId: string, alt?: string): string;
+/** Check if a URL points to a video file based on its extension. */
+export declare function isVideoFile(url: string): boolean;
+/**
+ * Build markdown for an image insertion.
+ */
+export declare function imageMarkdown(url: string, alt?: string): string;
+/**
+ * Build markdown for a video file. Uses a linked image as a fallback for
+ * renderers that do not support <video> tags; the Renderer also registers
+ * a custom image rule that renders video URLs as <video> elements.
+ */
+export declare function videoMarkdown(url: string, alt?: string): string;

package/dist/plugins/mindmap.d.ts

@@ -20,5 +20,10 @@ export declare function useMindmap(md: MarkdownIt): void;
  * After the preview DOM is updated, render all non-hydrated mindmap nodes.
  * markmap-lib / markmap-view are dynamically imported so they do not
  * increase the initial bundle size when mindmaps are absent.
+ *
+ * IMPORTANT: The SVG must have explicit pixel width/height attributes before
+ * Markmap.create is called. markmap-view's d3-zoom gesture reads
+ * svg.width.baseVal.value, which throws "Could not resolve relative length"
+ * when the SVG only has percentage-based CSS dimensions (width:100%).
  */
 export declare function hydrateMindmaps(root: HTMLElement): Promise<void>;

package/dist/plugins/popup.d.ts

@@ -0,0 +1,34 @@
+export interface PopupField {
+    name: string;
+    label: string;
+    placeholder?: string;
+    type?: 'text' | 'textarea';
+    required?: boolean;
+}
+export interface PopupConfig {
+    title: string;
+    fields: readonly PopupField[];
+    submitLabel?: string;
+    onSubmit: (values: Record<string, string>) => void;
+}
+/**
+ * A lightweight floating popup panel anchored to a toolbar button.
+ * Used for image / video / YouTube insertion dialogs.
+ * Closes on outside click, Escape key, or successful submit.
+ */
+export declare class Popup {
+    readonly el: HTMLDivElement;
+    private anchor;
+    private config;
+    private inputs;
+    private onOutsideClick;
+    private onKeyDown;
+    private destroyed;
+    constructor(anchor: HTMLElement, config: PopupConfig);
+    private build;
+    private submit;
+    show(): void;
+    hide(): void;
+    private position;
+    destroy(): void;
+}

package/dist/plugins/tips.d.ts

@@ -0,0 +1,2 @@
+import type MarkdownIt from 'markdown-it';
+export declare function useTips(md: MarkdownIt): void;

package/dist/plugins/video.d.ts

@@ -0,0 +1,7 @@
+import type MarkdownIt from 'markdown-it';
+/**
+ * Override the markdown-it image renderer to detect video file URLs
+ * (.mp4, .webm, .ogg, etc.) and render them as <video> elements instead
+ * of <img>. Non-video images fall through to the default renderer.
+ */
+export declare function useVideo(md: MarkdownIt): void;

package/dist/react/MarkdownEditor.d.ts

@@ -1,6 +1,6 @@
-import { type CSSProperties } from "react";
-import { type EditorMode, type EditorTheme, type MarkdownEditorOptions } from "../index.js";
-export interface MarkdownEditorProps extends Omit<MarkdownEditorOptions, "value" | "onChange"> {
+import { type CSSProperties } from 'react';
+import { type EditorMode, type EditorTheme, type MarkdownEditorOptions } from '../index.js';
+export interface MarkdownEditorProps extends Omit<MarkdownEditorOptions, 'value' | 'onChange'> {
     /** Controlled value. When provided and different from internal state, syncs the editor. */
     value?: string;
     /** Uncontrolled initial value. Only applied on mount. */

package/dist/react.mjs

@@ -1,80 +1,82 @@
 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 ?? "",
+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,
-      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 });
-});
+      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
 };