@withpotter/components 0.13.0-next.101

package/dist/blog-editor/markdown.js

@@ -0,0 +1,108 @@
+function escapeHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function looksLikeMarkdown(text) {
+  if (!text) return false;
+  return /(^|\n)#{1,3}\s+\S/.test(text) || /\*\*[^*\n]+\*\*/.test(text) || /(^|\n)[-*]\s+\S/.test(text) || /(^|\n)\d+\.\s+\S/.test(text) || /\[[^\]]+\]\([^)\s]+\)/.test(text) || /(^|\n)```/.test(text) || /(^|\n)>\s+\S/.test(text);
+}
+function markdownToHtml(md) {
+  const lines = md.replace(/\r\n/g, "\n").split("\n");
+  const out = [];
+  let inCode = false;
+  let codeBuffer = [];
+  let listType = null;
+  const closeList = () => {
+    if (listType) {
+      out.push(`</${listType}>`);
+      listType = null;
+    }
+  };
+  const inline = (s) => {
+    let result = escapeHtml(s);
+    result = result.replace(
+      /!\[([^\]]*)\]\(([^)\s]+)\)/g,
+      '<img alt="$1" src="$2" />'
+    );
+    result = result.replace(
+      /\[([^\]]+)\]\(([^)\s]+)\)/g,
+      '<a href="$2">$1</a>'
+    );
+    result = result.replace(/(\*\*|__)([^*_\n]+)\1/g, "<strong>$2</strong>");
+    result = result.replace(
+      /(?<![*_])(\*|_)([^*_\n]+)\1(?![*_])/g,
+      "<em>$2</em>"
+    );
+    result = result.replace(/`([^`\n]+)`/g, "<code>$1</code>");
+    return result;
+  };
+  for (const raw of lines) {
+    if (raw.trim().startsWith("```")) {
+      if (inCode) {
+        out.push(
+          `<pre><code>${codeBuffer.map(escapeHtml).join("\n")}</code></pre>`
+        );
+        codeBuffer = [];
+        inCode = false;
+      } else {
+        closeList();
+        inCode = true;
+      }
+      continue;
+    }
+    if (inCode) {
+      codeBuffer.push(raw);
+      continue;
+    }
+    const heading = raw.match(/^(#{1,3})\s+(.*)$/);
+    if (heading) {
+      closeList();
+      const level = heading[1].length;
+      out.push(`<h${level}>${inline(heading[2])}</h${level}>`);
+      continue;
+    }
+    const blockquote = raw.match(/^>\s+(.*)$/);
+    if (blockquote) {
+      closeList();
+      out.push(`<blockquote>${inline(blockquote[1])}</blockquote>`);
+      continue;
+    }
+    const ul = raw.match(/^[-*]\s+(.*)$/);
+    if (ul) {
+      if (listType !== "ul") {
+        closeList();
+        out.push("<ul>");
+        listType = "ul";
+      }
+      out.push(`<li>${inline(ul[1])}</li>`);
+      continue;
+    }
+    const ol = raw.match(/^\d+\.\s+(.*)$/);
+    if (ol) {
+      if (listType !== "ol") {
+        closeList();
+        out.push("<ol>");
+        listType = "ol";
+      }
+      out.push(`<li>${inline(ol[1])}</li>`);
+      continue;
+    }
+    if (raw.trim() === "") {
+      closeList();
+      continue;
+    }
+    closeList();
+    out.push(`<p>${inline(raw)}</p>`);
+  }
+  closeList();
+  if (inCode) {
+    out.push(
+      `<pre><code>${codeBuffer.map(escapeHtml).join("\n")}</code></pre>`
+    );
+  }
+  return out.join("");
+}
+export {
+  looksLikeMarkdown,
+  markdownToHtml
+};
+//# sourceMappingURL=markdown.js.map

package/dist/blog-editor/markdown.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/blog-editor/markdown.ts"],"sourcesContent":["// Lightweight Markdown -> HTML conversion used only for paste interception.\n// Tiptap then re-parses the HTML through ProseMirror, so we don't need to be\n// exhaustive — only common Markdown that authors paste from notes apps,\n// ChatGPT, Notion, etc.\n\nfunction escapeHtml(value: string): string {\n  return value\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;');\n}\n\nexport function looksLikeMarkdown(text: string): boolean {\n  if (!text) return false;\n  return (\n    /(^|\\n)#{1,3}\\s+\\S/.test(text) ||\n    /\\*\\*[^*\\n]+\\*\\*/.test(text) ||\n    /(^|\\n)[-*]\\s+\\S/.test(text) ||\n    /(^|\\n)\\d+\\.\\s+\\S/.test(text) ||\n    /\\[[^\\]]+\\]\\([^)\\s]+\\)/.test(text) ||\n    /(^|\\n)```/.test(text) ||\n    /(^|\\n)>\\s+\\S/.test(text)\n  );\n}\n\nexport function markdownToHtml(md: string): string {\n  const lines = md.replace(/\\r\\n/g, '\\n').split('\\n');\n  const out: string[] = [];\n  let inCode = false;\n  let codeBuffer: string[] = [];\n  let listType: 'ul' | 'ol' | null = null;\n\n  const closeList = () => {\n    if (listType) {\n      out.push(`</${listType}>`);\n      listType = null;\n    }\n  };\n\n  const inline = (s: string): string => {\n    let result = escapeHtml(s);\n    result = result.replace(\n      /!\\[([^\\]]*)\\]\\(([^)\\s]+)\\)/g,\n      '<img alt=\"$1\" src=\"$2\" />',\n    );\n    result = result.replace(\n      /\\[([^\\]]+)\\]\\(([^)\\s]+)\\)/g,\n      '<a href=\"$2\">$1</a>',\n    );\n    result = result.replace(/(\\*\\*|__)([^*_\\n]+)\\1/g, '<strong>$2</strong>');\n    result = result.replace(\n      /(?<![*_])(\\*|_)([^*_\\n]+)\\1(?![*_])/g,\n      '<em>$2</em>',\n    );\n    result = result.replace(/`([^`\\n]+)`/g, '<code>$1</code>');\n    return result;\n  };\n\n  for (const raw of lines) {\n    if (raw.trim().startsWith('```')) {\n      if (inCode) {\n        out.push(\n          `<pre><code>${codeBuffer.map(escapeHtml).join('\\n')}</code></pre>`,\n        );\n        codeBuffer = [];\n        inCode = false;\n      } else {\n        closeList();\n        inCode = true;\n      }\n      continue;\n    }\n    if (inCode) {\n      codeBuffer.push(raw);\n      continue;\n    }\n\n    const heading = raw.match(/^(#{1,3})\\s+(.*)$/);\n    if (heading) {\n      closeList();\n      const level = heading[1].length;\n      out.push(`<h${level}>${inline(heading[2])}</h${level}>`);\n      continue;\n    }\n\n    const blockquote = raw.match(/^>\\s+(.*)$/);\n    if (blockquote) {\n      closeList();\n      out.push(`<blockquote>${inline(blockquote[1])}</blockquote>`);\n      continue;\n    }\n\n    const ul = raw.match(/^[-*]\\s+(.*)$/);\n    if (ul) {\n      if (listType !== 'ul') {\n        closeList();\n        out.push('<ul>');\n        listType = 'ul';\n      }\n      out.push(`<li>${inline(ul[1])}</li>`);\n      continue;\n    }\n\n    const ol = raw.match(/^\\d+\\.\\s+(.*)$/);\n    if (ol) {\n      if (listType !== 'ol') {\n        closeList();\n        out.push('<ol>');\n        listType = 'ol';\n      }\n      out.push(`<li>${inline(ol[1])}</li>`);\n      continue;\n    }\n\n    if (raw.trim() === '') {\n      closeList();\n      continue;\n    }\n\n    closeList();\n    out.push(`<p>${inline(raw)}</p>`);\n  }\n\n  closeList();\n  if (inCode) {\n    out.push(\n      `<pre><code>${codeBuffer.map(escapeHtml).join('\\n')}</code></pre>`,\n    );\n  }\n\n  return out.join('');\n}\n"],"mappings":"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","names":[]}

package/dist/blog-editor/menus/EditorCommandMenu.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+import type { SlashCommandItem } from '../extensions/slash-command';
+export interface EditorCommandMenuItem extends SlashCommandItem {
+    icon: ReactNode;
+}
+interface EditorCommandMenuProps {
+    open: boolean;
+    x: number;
+    y: number;
+    items: EditorCommandMenuItem[];
+    selectedIndex?: number;
+    onSelect: (item: EditorCommandMenuItem) => void;
+}
+export declare function EditorCommandMenu({ open, x, y, items, selectedIndex, onSelect, }: EditorCommandMenuProps): import("react").JSX.Element | null;
+export {};

package/dist/blog-editor/menus/EditorCommandMenu.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+function EditorCommandMenu({
+  open,
+  x,
+  y,
+  items,
+  selectedIndex = 0,
+  onSelect
+}) {
+  if (!open || items.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "fixed z-50 min-w-56 rounded-[6px] border border-[var(--border-default)] bg-[var(--bg-base)] p-1",
+      style: { left: x, top: y },
+      role: "menu",
+      "aria-label": "Insert block",
+      children: items.map((item, index) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: `w-full flex items-center gap-2 rounded-[4px] px-2 py-1.5 text-sm text-left ${index === selectedIndex ? "bg-[var(--interactive-active)] text-[var(--text-primary)]" : "text-[var(--text-secondary)] hover:bg-[var(--interactive-hover)]"}`,
+          onMouseDown: (event) => event.preventDefault(),
+          onClick: () => onSelect(item),
+          role: "menuitem",
+          children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "shrink-0", children: item.icon }),
+            /* @__PURE__ */ jsx("span", { children: item.label })
+          ]
+        },
+        item.id
+      ))
+    }
+  );
+}
+export {
+  EditorCommandMenu
+};
+//# sourceMappingURL=EditorCommandMenu.js.map

package/dist/blog-editor/menus/EditorCommandMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blog-editor/menus/EditorCommandMenu.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactNode } from 'react';\nimport type { SlashCommandItem } from '../extensions/slash-command';\n\nexport interface EditorCommandMenuItem extends SlashCommandItem {\n  icon: ReactNode;\n}\n\ninterface EditorCommandMenuProps {\n  open: boolean;\n  x: number;\n  y: number;\n  items: EditorCommandMenuItem[];\n  selectedIndex?: number;\n  onSelect: (item: EditorCommandMenuItem) => void;\n}\n\nexport function EditorCommandMenu({\n  open,\n  x,\n  y,\n  items,\n  selectedIndex = 0,\n  onSelect,\n}: EditorCommandMenuProps) {\n  if (!open || items.length === 0) return null;\n\n  return (\n    <div\n      className=\"fixed z-50 min-w-56 rounded-[6px] border border-[var(--border-default)] bg-[var(--bg-base)] p-1\"\n      style={{ left: x, top: y }}\n      role=\"menu\"\n      aria-label=\"Insert block\"\n    >\n      {items.map((item, index) => (\n        <button\n          key={item.id}\n          type=\"button\"\n          className={`w-full flex items-center gap-2 rounded-[4px] px-2 py-1.5 text-sm text-left ${\n            index === selectedIndex\n              ? 'bg-[var(--interactive-active)] text-[var(--text-primary)]'\n              : 'text-[var(--text-secondary)] hover:bg-[var(--interactive-hover)]'\n          }`}\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={() => onSelect(item)}\n          role=\"menuitem\"\n        >\n          <span aria-hidden className=\"shrink-0\">\n            {item.icon}\n          </span>\n          <span>{item.label}</span>\n        </button>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";AAoCQ,SAYE,KAZF;AAlBD,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AACF,GAA2B;AACzB,MAAI,CAAC,QAAQ,MAAM,WAAW,EAAG,QAAO;AAExC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,MAAM,GAAG,KAAK,EAAE;AAAA,MACzB,MAAK;AAAA,MACL,cAAW;AAAA,MAEV,gBAAM,IAAI,CAAC,MAAM,UAChB;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,WAAW,8EACT,UAAU,gBACN,8DACA,kEACN;AAAA,UACA,aAAa,CAAC,UAAU,MAAM,eAAe;AAAA,UAC7C,SAAS,MAAM,SAAS,IAAI;AAAA,UAC5B,MAAK;AAAA,UAEL;AAAA,gCAAC,UAAK,eAAW,MAAC,WAAU,YACzB,eAAK,MACR;AAAA,YACA,oBAAC,UAAM,eAAK,OAAM;AAAA;AAAA;AAAA,QAdb,KAAK;AAAA,MAeZ,CACD;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/blog-editor/menus/EditorContextMenu.d.ts

@@ -0,0 +1,11 @@
+import { type RefObject } from 'react';
+import type { Editor } from '@tiptap/react';
+interface EditorContextMenuProps {
+    editor: Editor | null;
+    /** Ref of the surface that should trigger the menu on right-click. */
+    surfaceRef: RefObject<HTMLDivElement | null>;
+    /** Open the file picker for inline image upload. */
+    onInsertImage: () => void;
+}
+export declare function EditorContextMenu({ editor, surfaceRef, onInsertImage }: EditorContextMenuProps): import("react").JSX.Element | null;
+export {};

package/dist/blog-editor/menus/EditorContextMenu.js

@@ -0,0 +1,170 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  Heading1,
+  Heading2,
+  Heading3,
+  List,
+  ListOrdered,
+  Quote,
+  Code2,
+  Minus,
+  ImagePlus,
+  Type
+} from "lucide-react";
+const MENU_ITEMS = [
+  {
+    id: "paragraph",
+    label: "Text",
+    icon: /* @__PURE__ */ jsx(Type, { className: "w-4 h-4" }),
+    run: (e) => e.chain().focus().setParagraph().run()
+  },
+  {
+    id: "h1",
+    label: "Heading 1",
+    icon: /* @__PURE__ */ jsx(Heading1, { className: "w-4 h-4" }),
+    run: (e) => e.chain().focus().toggleHeading({ level: 1 }).run()
+  },
+  {
+    id: "h2",
+    label: "Heading 2",
+    icon: /* @__PURE__ */ jsx(Heading2, { className: "w-4 h-4" }),
+    run: (e) => e.chain().focus().toggleHeading({ level: 2 }).run()
+  },
+  {
+    id: "h3",
+    label: "Heading 3",
+    icon: /* @__PURE__ */ jsx(Heading3, { className: "w-4 h-4" }),
+    run: (e) => e.chain().focus().toggleHeading({ level: 3 }).run()
+  },
+  {
+    id: "ul",
+    label: "Bullet list",
+    icon: /* @__PURE__ */ jsx(List, { className: "w-4 h-4" }),
+    run: (e) => e.chain().focus().toggleBulletList().run()
+  },
+  {
+    id: "ol",
+    label: "Numbered list",
+    icon: /* @__PURE__ */ jsx(ListOrdered, { className: "w-4 h-4" }),
+    run: (e) => e.chain().focus().toggleOrderedList().run()
+  },
+  {
+    id: "quote",
+    label: "Quote",
+    icon: /* @__PURE__ */ jsx(Quote, { className: "w-4 h-4" }),
+    run: (e) => e.chain().focus().toggleBlockquote().run()
+  },
+  {
+    id: "code",
+    label: "Code block",
+    icon: /* @__PURE__ */ jsx(Code2, { className: "w-4 h-4" }),
+    run: (e) => e.chain().focus().toggleCodeBlock().run()
+  },
+  {
+    id: "hr",
+    label: "Divider",
+    icon: /* @__PURE__ */ jsx(Minus, { className: "w-4 h-4" }),
+    run: (e) => e.chain().focus().setHorizontalRule().run()
+  }
+];
+function EditorContextMenu({ editor, surfaceRef, onInsertImage }) {
+  const [pos, setPos] = useState(null);
+  const menuRef = useRef(null);
+  const close = useCallback(() => setPos(null), []);
+  useEffect(() => {
+    const surface = surfaceRef.current;
+    if (!surface) return;
+    const onContext = (event) => {
+      const target = event.target;
+      if (target?.closest("a, img")) return;
+      event.preventDefault();
+      const MENU_W = 224;
+      const MENU_H = 360;
+      const x = Math.min(event.clientX, window.innerWidth - MENU_W - 8);
+      const y = Math.min(event.clientY, window.innerHeight - MENU_H - 8);
+      setPos({ x, y });
+    };
+    surface.addEventListener("contextmenu", onContext);
+    return () => surface.removeEventListener("contextmenu", onContext);
+  }, [surfaceRef]);
+  useEffect(() => {
+    if (!pos) return;
+    const onPointer = (e) => {
+      if (menuRef.current?.contains(e.target)) return;
+      close();
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") close();
+    };
+    const onScroll = () => close();
+    document.addEventListener("pointerdown", onPointer);
+    document.addEventListener("keydown", onKey);
+    window.addEventListener("scroll", onScroll, true);
+    return () => {
+      document.removeEventListener("pointerdown", onPointer);
+      document.removeEventListener("keydown", onKey);
+      window.removeEventListener("scroll", onScroll, true);
+    };
+  }, [pos, close]);
+  if (!pos || !editor) return null;
+  const handleRun = (item) => {
+    item.run(editor);
+    close();
+  };
+  const handleImage = () => {
+    onInsertImage();
+    close();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: menuRef,
+      role: "menu",
+      "aria-label": "Insert content",
+      className: "fixed z-50 w-56 bg-[var(--bg-base)] border border-[var(--border-default)] rounded-[2px] py-1 text-sm",
+      style: { left: pos.x, top: pos.y },
+      onContextMenu: (e) => e.preventDefault(),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-[var(--text-tertiary)]", children: "Turn into" }),
+        MENU_ITEMS.map((item) => /* @__PURE__ */ jsx(
+          MenuRow,
+          {
+            icon: item.icon,
+            label: item.label,
+            onClick: () => handleRun(item)
+          },
+          item.id
+        )),
+        /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-[var(--border-default)]" }),
+        /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-[var(--text-tertiary)]", children: "Insert" }),
+        /* @__PURE__ */ jsx(MenuRow, { icon: /* @__PURE__ */ jsx(ImagePlus, { className: "w-4 h-4" }), label: "Image", onClick: handleImage })
+      ]
+    }
+  );
+}
+function MenuRow({
+  icon,
+  label,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      onMouseDown: (e) => e.preventDefault(),
+      onClick,
+      className: "w-full flex items-center gap-3 px-3 py-2 text-left text-[var(--text-primary)] hover:bg-[var(--interactive-hover)] transition-colors",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[var(--text-secondary)]", children: icon }),
+        /* @__PURE__ */ jsx("span", { children: label })
+      ]
+    }
+  );
+}
+export {
+  EditorContextMenu
+};
+//# sourceMappingURL=EditorContextMenu.js.map

package/dist/blog-editor/menus/EditorContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blog-editor/menus/EditorContextMenu.tsx"],"sourcesContent":["// Right-click context menu for the editor surface. Replaces the browser's\n// default Cut/Copy/Paste menu with a Medium-style block-insert palette.\n//\n// Trigger: a `contextmenu` listener on the editor's root element. The parent\n// page wires that up via `useEditorContextMenu` + `<EditorContextMenu />`.\n// The menu positions itself at the mouse coordinates and closes on outside\n// click, scroll, Escape, or after an action runs.\n\n'use client'\n\nimport { useCallback, useEffect, useRef, useState, type RefObject } from 'react'\nimport {\n  Heading1,\n  Heading2,\n  Heading3,\n  List,\n  ListOrdered,\n  Quote,\n  Code2,\n  Minus,\n  ImagePlus,\n  Type,\n} from 'lucide-react'\nimport type { Editor } from '@tiptap/react'\n// Load StarterKit's chained-command type augmentations (toggleHeading, …) so\n// this file's standalone .d.ts build resolves them; erased at emit.\nimport type {} from '@tiptap/starter-kit'\n\ninterface MenuPosition {\n  x: number\n  y: number\n}\n\ninterface EditorContextMenuProps {\n  editor: Editor | null\n  /** Ref of the surface that should trigger the menu on right-click. */\n  surfaceRef: RefObject<HTMLDivElement | null>\n  /** Open the file picker for inline image upload. */\n  onInsertImage: () => void\n}\n\ninterface MenuItem {\n  id: string\n  label: string\n  icon: React.ReactNode\n  shortcut?: string\n  run: (editor: Editor) => void\n}\n\nconst MENU_ITEMS: MenuItem[] = [\n  {\n    id: 'paragraph',\n    label: 'Text',\n    icon: <Type className=\"w-4 h-4\" />,\n    run: (e) => e.chain().focus().setParagraph().run(),\n  },\n  {\n    id: 'h1',\n    label: 'Heading 1',\n    icon: <Heading1 className=\"w-4 h-4\" />,\n    run: (e) => e.chain().focus().toggleHeading({ level: 1 }).run(),\n  },\n  {\n    id: 'h2',\n    label: 'Heading 2',\n    icon: <Heading2 className=\"w-4 h-4\" />,\n    run: (e) => e.chain().focus().toggleHeading({ level: 2 }).run(),\n  },\n  {\n    id: 'h3',\n    label: 'Heading 3',\n    icon: <Heading3 className=\"w-4 h-4\" />,\n    run: (e) => e.chain().focus().toggleHeading({ level: 3 }).run(),\n  },\n  {\n    id: 'ul',\n    label: 'Bullet list',\n    icon: <List className=\"w-4 h-4\" />,\n    run: (e) => e.chain().focus().toggleBulletList().run(),\n  },\n  {\n    id: 'ol',\n    label: 'Numbered list',\n    icon: <ListOrdered className=\"w-4 h-4\" />,\n    run: (e) => e.chain().focus().toggleOrderedList().run(),\n  },\n  {\n    id: 'quote',\n    label: 'Quote',\n    icon: <Quote className=\"w-4 h-4\" />,\n    run: (e) => e.chain().focus().toggleBlockquote().run(),\n  },\n  {\n    id: 'code',\n    label: 'Code block',\n    icon: <Code2 className=\"w-4 h-4\" />,\n    run: (e) => e.chain().focus().toggleCodeBlock().run(),\n  },\n  {\n    id: 'hr',\n    label: 'Divider',\n    icon: <Minus className=\"w-4 h-4\" />,\n    run: (e) => e.chain().focus().setHorizontalRule().run(),\n  },\n]\n\nexport function EditorContextMenu({ editor, surfaceRef, onInsertImage }: EditorContextMenuProps) {\n  const [pos, setPos] = useState<MenuPosition | null>(null)\n  const menuRef = useRef<HTMLDivElement>(null)\n\n  const close = useCallback(() => setPos(null), [])\n\n  useEffect(() => {\n    const surface = surfaceRef.current\n    if (!surface) return\n\n    const onContext = (event: MouseEvent) => {\n      // Don't hijack contextmenu when the user right-clicked a link or\n      // an image — the browser default is more useful there (Open link, etc.).\n      const target = event.target as HTMLElement | null\n      if (target?.closest('a, img')) return\n      event.preventDefault()\n      // Clamp to viewport so the menu never opens off-screen.\n      const MENU_W = 224\n      const MENU_H = 360\n      const x = Math.min(event.clientX, window.innerWidth - MENU_W - 8)\n      const y = Math.min(event.clientY, window.innerHeight - MENU_H - 8)\n      setPos({ x, y })\n    }\n    surface.addEventListener('contextmenu', onContext)\n    return () => surface.removeEventListener('contextmenu', onContext)\n  }, [surfaceRef])\n\n  useEffect(() => {\n    if (!pos) return\n    const onPointer = (e: PointerEvent) => {\n      if (menuRef.current?.contains(e.target as Node)) return\n      close()\n    }\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') close()\n    }\n    const onScroll = () => close()\n    document.addEventListener('pointerdown', onPointer)\n    document.addEventListener('keydown', onKey)\n    window.addEventListener('scroll', onScroll, true)\n    return () => {\n      document.removeEventListener('pointerdown', onPointer)\n      document.removeEventListener('keydown', onKey)\n      window.removeEventListener('scroll', onScroll, true)\n    }\n  }, [pos, close])\n\n  if (!pos || !editor) return null\n\n  const handleRun = (item: MenuItem) => {\n    item.run(editor)\n    close()\n  }\n\n  const handleImage = () => {\n    onInsertImage()\n    close()\n  }\n\n  return (\n    <div\n      ref={menuRef}\n      role=\"menu\"\n      aria-label=\"Insert content\"\n      className=\"fixed z-50 w-56 bg-[var(--bg-base)] border border-[var(--border-default)] rounded-[2px] py-1 text-sm\"\n      style={{ left: pos.x, top: pos.y }}\n      onContextMenu={(e) => e.preventDefault()}\n    >\n      <div className=\"px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-[var(--text-tertiary)]\">\n        Turn into\n      </div>\n      {MENU_ITEMS.map((item) => (\n        <MenuRow\n          key={item.id}\n          icon={item.icon}\n          label={item.label}\n          onClick={() => handleRun(item)}\n        />\n      ))}\n      <div className=\"my-1 border-t border-[var(--border-default)]\" />\n      <div className=\"px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-[var(--text-tertiary)]\">\n        Insert\n      </div>\n      <MenuRow icon={<ImagePlus className=\"w-4 h-4\" />} label=\"Image\" onClick={handleImage} />\n    </div>\n  )\n}\n\nfunction MenuRow({\n  icon,\n  label,\n  onClick,\n}: {\n  icon: React.ReactNode\n  label: string\n  onClick: () => void\n}) {\n  return (\n    <button\n      type=\"button\"\n      role=\"menuitem\"\n      onMouseDown={(e) => e.preventDefault()}\n      onClick={onClick}\n      className=\"w-full flex items-center gap-3 px-3 py-2 text-left text-[var(--text-primary)] hover:bg-[var(--interactive-hover)] transition-colors\"\n    >\n      <span className=\"text-[var(--text-secondary)]\">{icon}</span>\n      <span>{label}</span>\n    </button>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/blog-editor/panels/CoverImageField.d.ts

@@ -0,0 +1,9 @@
+interface CoverImageFieldProps {
+    value: string;
+    onChange: (value: string) => void;
+    onUploadFile: (file: File) => Promise<void>;
+    uploading: boolean;
+    uploadProgress: number | null;
+}
+export declare function CoverImageField({ value, onChange, onUploadFile, uploading, uploadProgress, }: CoverImageFieldProps): import("react").JSX.Element;
+export {};