@withpotter/components 0.13.0-next.101

package/dist/blog-editor/extensions/image-upload.d.ts

@@ -0,0 +1,18 @@
+import { Extension } from '@tiptap/core';
+export interface AltTextResult {
+    alt: string;
+    decorative: boolean;
+}
+interface ImageUploadOptions {
+    uploadImage: (file: File) => Promise<string>;
+    /**
+     * Optional async callback that opens an alt-text dialog and returns the
+     * user's input, or `null` if the user cancelled.
+     */
+    onRequestAlt?: (file: File) => Promise<AltTextResult | null>;
+}
+interface ImageUploadStorage {
+    startUpload: ((file: File, pos?: number) => void) | null;
+}
+export declare const ImageUpload: Extension<ImageUploadOptions, ImageUploadStorage>;
+export {};

package/dist/blog-editor/extensions/image-upload.js

@@ -0,0 +1,240 @@
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+const pluginKey = new PluginKey("imageUploadPlaceholder");
+function genId() {
+  return `up_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`;
+}
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function renderPlaceholder(view, entry, uploadImage) {
+  const wrap = document.createElement("div");
+  wrap.className = "blog-tiptap-upload-placeholder";
+  wrap.contentEditable = "false";
+  wrap.dataset.status = entry.status;
+  if (entry.status === "uploading") {
+    wrap.innerHTML = `
+      <div class="blog-tiptap-upload-spinner" aria-hidden="true"></div>
+      <span class="blog-tiptap-upload-label">Uploading <strong>${escapeHtml(
+      entry.file.name
+    )}</strong>\u2026</span>
+    `;
+  } else {
+    const message = entry.error || "Upload failed";
+    wrap.innerHTML = `
+      <span class="blog-tiptap-upload-error-icon" aria-hidden="true">!</span>
+      <span class="blog-tiptap-upload-label">
+        <strong>${escapeHtml(entry.file.name)}</strong>
+        <span class="blog-tiptap-upload-error-message">${escapeHtml(message)}</span>
+      </span>
+      <div class="blog-tiptap-upload-actions">
+        <button type="button" data-action="retry" class="blog-tiptap-upload-button">Retry</button>
+        <button type="button" data-action="remove" class="blog-tiptap-upload-button blog-tiptap-upload-button--ghost">Remove</button>
+      </div>
+    `;
+    wrap.querySelector('[data-action="retry"]')?.addEventListener("click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      retryUpload(view, entry.id, uploadImage);
+    });
+    wrap.querySelector('[data-action="remove"]')?.addEventListener("click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      view.dispatch(
+        view.state.tr.setMeta(pluginKey, {
+          type: "remove",
+          id: entry.id
+        })
+      );
+    });
+  }
+  return wrap;
+}
+function doUpload(view, id, file, alt, uploadImage) {
+  uploadImage(file).then(
+    (url) => {
+      const state = pluginKey.getState(view.state);
+      const current = state?.uploads.find((u) => u.id === id);
+      if (!current) return;
+      const imageNode = view.state.schema.nodes.image?.create({ src: url, alt });
+      if (!imageNode) {
+        view.dispatch(
+          view.state.tr.setMeta(pluginKey, {
+            type: "remove",
+            id
+          })
+        );
+        return;
+      }
+      const pos = current.pos;
+      const tr = view.state.tr.insert(pos, imageNode).setMeta(pluginKey, { type: "remove", id });
+      view.dispatch(tr);
+    },
+    (err) => {
+      const message = err instanceof Error ? err.message : typeof err === "string" ? err : "Upload failed";
+      view.dispatch(
+        view.state.tr.setMeta(pluginKey, {
+          type: "update",
+          id,
+          patch: { status: "error", error: message }
+        })
+      );
+    }
+  );
+}
+function retryUpload(view, id, uploadImage) {
+  const state = pluginKey.getState(view.state);
+  const entry = state?.uploads.find((u) => u.id === id);
+  if (!entry) return;
+  view.dispatch(
+    view.state.tr.setMeta(pluginKey, {
+      type: "update",
+      id,
+      patch: { status: "uploading", error: void 0 }
+    })
+  );
+  doUpload(view, id, entry.file, entry.alt, uploadImage);
+}
+async function startImageUpload(editor, file, pos, uploadImage, onRequestAlt) {
+  let alt = file.name.replace(/\.[^.]+$/, "");
+  if (onRequestAlt) {
+    const result = await onRequestAlt(file);
+    if (result === null) return;
+    alt = result.alt;
+  }
+  const view = editor.view;
+  const insertPos = Math.max(
+    0,
+    Math.min(pos ?? view.state.selection.from, view.state.doc.content.size)
+  );
+  const id = genId();
+  view.dispatch(
+    view.state.tr.setMeta(pluginKey, {
+      type: "add",
+      upload: {
+        id,
+        file,
+        pos: insertPos,
+        status: "uploading",
+        alt
+      }
+    })
+  );
+  doUpload(view, id, file, alt, uploadImage);
+}
+const ImageUpload = Extension.create({
+  name: "imageUpload",
+  addOptions() {
+    return {
+      uploadImage: async () => {
+        throw new Error("ImageUpload: uploadImage handler not configured");
+      },
+      onRequestAlt: void 0
+    };
+  },
+  addStorage() {
+    return { startUpload: null };
+  },
+  addProseMirrorPlugins() {
+    const editor = this.editor;
+    const { uploadImage, onRequestAlt } = this.options;
+    const storage = editor.storage;
+    storage.imageUpload.startUpload = (file, pos) => {
+      void startImageUpload(editor, file, pos, uploadImage, onRequestAlt);
+    };
+    return [
+      new Plugin({
+        key: pluginKey,
+        state: {
+          init: () => ({ uploads: [] }),
+          apply(tr, prev) {
+            let uploads = prev.uploads.map((u) => ({
+              ...u,
+              pos: tr.mapping.map(u.pos)
+            }));
+            const meta = tr.getMeta(pluginKey);
+            if (meta) {
+              if (meta.type === "add") {
+                uploads = [...uploads, meta.upload];
+              } else if (meta.type === "update") {
+                uploads = uploads.map(
+                  (u) => u.id === meta.id ? { ...u, ...meta.patch } : u
+                );
+              } else if (meta.type === "remove") {
+                uploads = uploads.filter((u) => u.id !== meta.id);
+              }
+            }
+            return { uploads };
+          }
+        },
+        props: {
+          decorations(state) {
+            const pluginState = pluginKey.getState(state);
+            if (!pluginState || pluginState.uploads.length === 0) {
+              return DecorationSet.empty;
+            }
+            return DecorationSet.create(
+              state.doc,
+              pluginState.uploads.map(
+                (entry) => Decoration.widget(
+                  entry.pos,
+                  (view) => renderPlaceholder(view, entry, uploadImage),
+                  {
+                    side: -1,
+                    key: `${entry.id}:${entry.status}:${entry.error ?? ""}`,
+                    ignoreSelection: true
+                  }
+                )
+              )
+            );
+          },
+          handlePaste: (view, event) => {
+            const clipboard = event.clipboardData;
+            if (!clipboard) return false;
+            const imageItem = Array.from(clipboard.items).find(
+              (item) => item.type.startsWith("image/")
+            );
+            if (!imageItem) return false;
+            const file = imageItem.getAsFile();
+            if (!file) return false;
+            event.preventDefault();
+            void startImageUpload(
+              editor,
+              file,
+              view.state.selection.from,
+              uploadImage,
+              onRequestAlt
+            );
+            return true;
+          },
+          handleDrop: (view, event) => {
+            const dt = event.dataTransfer;
+            if (!dt || dt.files.length === 0) return false;
+            const file = Array.from(dt.files).find(
+              (f) => f.type.startsWith("image/")
+            );
+            if (!file) return false;
+            event.preventDefault();
+            const coords = view.posAtCoords({
+              left: event.clientX,
+              top: event.clientY
+            });
+            void startImageUpload(
+              editor,
+              file,
+              coords?.pos,
+              uploadImage,
+              onRequestAlt
+            );
+            return true;
+          }
+        }
+      })
+    ];
+  }
+});
+export {
+  ImageUpload
+};
+//# sourceMappingURL=image-upload.js.map

package/dist/blog-editor/extensions/image-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blog-editor/extensions/image-upload.ts"],"sourcesContent":["// Tiptap extension that handles paste/drop of image files and exposes a\n// programmatic `startUpload` helper. While the upload is in flight a\n// placeholder widget decoration is rendered at the insertion point with a\n// spinner + filename. On success the placeholder is replaced by the inserted\n// image node. On failure the placeholder switches to an error state with\n// Retry / Remove buttons.\n\nimport { Extension } from '@tiptap/core';\nimport { Plugin, PluginKey } from '@tiptap/pm/state';\nimport { Decoration, DecorationSet, type EditorView } from '@tiptap/pm/view';\nimport type { Editor } from '@tiptap/core';\n\nexport interface AltTextResult {\n  alt: string;\n  decorative: boolean;\n}\n\ninterface ImageUploadOptions {\n  uploadImage: (file: File) => Promise<string>;\n  /**\n   * Optional async callback that opens an alt-text dialog and returns the\n   * user's input, or `null` if the user cancelled.\n   */\n  onRequestAlt?: (file: File) => Promise<AltTextResult | null>;\n}\n\ninterface ImageUploadStorage {\n  startUpload: ((file: File, pos?: number) => void) | null;\n}\n\ntype UploadStatus = 'uploading' | 'error';\n\ninterface UploadEntry {\n  id: string;\n  file: File;\n  pos: number;\n  status: UploadStatus;\n  alt: string;\n  error?: string;\n}\n\ninterface PluginState {\n  uploads: UploadEntry[];\n}\n\nconst pluginKey = new PluginKey<PluginState>('imageUploadPlaceholder');\n\ntype Meta =\n  | { type: 'add'; upload: UploadEntry }\n  | { type: 'update'; id: string; patch: Partial<UploadEntry> }\n  | { type: 'remove'; id: string };\n\nfunction genId(): string {\n  return `up_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`;\n}\n\nfunction escapeHtml(s: string): string {\n  return s\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\"/g, '&quot;');\n}\n\nfunction renderPlaceholder(\n  view: EditorView,\n  entry: UploadEntry,\n  uploadImage: (file: File) => Promise<string>,\n): HTMLElement {\n  const wrap = document.createElement('div');\n  wrap.className = 'blog-tiptap-upload-placeholder';\n  wrap.contentEditable = 'false';\n  wrap.dataset.status = entry.status;\n\n  if (entry.status === 'uploading') {\n    wrap.innerHTML = `\n      <div class=\"blog-tiptap-upload-spinner\" aria-hidden=\"true\"></div>\n      <span class=\"blog-tiptap-upload-label\">Uploading <strong>${escapeHtml(\n        entry.file.name,\n      )}</strong>…</span>\n    `;\n  } else {\n    const message = entry.error || 'Upload failed';\n    wrap.innerHTML = `\n      <span class=\"blog-tiptap-upload-error-icon\" aria-hidden=\"true\">!</span>\n      <span class=\"blog-tiptap-upload-label\">\n        <strong>${escapeHtml(entry.file.name)}</strong>\n        <span class=\"blog-tiptap-upload-error-message\">${escapeHtml(message)}</span>\n      </span>\n      <div class=\"blog-tiptap-upload-actions\">\n        <button type=\"button\" data-action=\"retry\" class=\"blog-tiptap-upload-button\">Retry</button>\n        <button type=\"button\" data-action=\"remove\" class=\"blog-tiptap-upload-button blog-tiptap-upload-button--ghost\">Remove</button>\n      </div>\n    `;\n    wrap\n      .querySelector('[data-action=\"retry\"]')\n      ?.addEventListener('click', (e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        retryUpload(view, entry.id, uploadImage);\n      });\n    wrap\n      .querySelector('[data-action=\"remove\"]')\n      ?.addEventListener('click', (e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        view.dispatch(\n          view.state.tr.setMeta(pluginKey, {\n            type: 'remove',\n            id: entry.id,\n          } satisfies Meta),\n        );\n      });\n  }\n  return wrap;\n}\n\nfunction doUpload(\n  view: EditorView,\n  id: string,\n  file: File,\n  alt: string,\n  uploadImage: (file: File) => Promise<string>,\n): void {\n  uploadImage(file).then(\n    (url) => {\n      const state = pluginKey.getState(view.state);\n      const current = state?.uploads.find((u) => u.id === id);\n      if (!current) return; // user removed the placeholder\n      const imageNode = view.state.schema.nodes.image?.create({ src: url, alt });\n      if (!imageNode) {\n        view.dispatch(\n          view.state.tr.setMeta(pluginKey, {\n            type: 'remove',\n            id,\n          } satisfies Meta),\n        );\n        return;\n      }\n      const pos = current.pos;\n      const tr = view.state.tr\n        .insert(pos, imageNode)\n        .setMeta(pluginKey, { type: 'remove', id } satisfies Meta);\n      view.dispatch(tr);\n    },\n    (err: unknown) => {\n      const message =\n        err instanceof Error\n          ? err.message\n          : typeof err === 'string'\n            ? err\n            : 'Upload failed';\n      view.dispatch(\n        view.state.tr.setMeta(pluginKey, {\n          type: 'update',\n          id,\n          patch: { status: 'error', error: message },\n        } satisfies Meta),\n      );\n    },\n  );\n}\n\nfunction retryUpload(\n  view: EditorView,\n  id: string,\n  uploadImage: (file: File) => Promise<string>,\n): void {\n  const state = pluginKey.getState(view.state);\n  const entry = state?.uploads.find((u) => u.id === id);\n  if (!entry) return;\n  view.dispatch(\n    view.state.tr.setMeta(pluginKey, {\n      type: 'update',\n      id,\n      patch: { status: 'uploading', error: undefined },\n    } satisfies Meta),\n  );\n  doUpload(view, id, entry.file, entry.alt, uploadImage);\n}\n\nasync function startImageUpload(\n  editor: Editor,\n  file: File,\n  pos: number | undefined,\n  uploadImage: (file: File) => Promise<string>,\n  onRequestAlt?: (file: File) => Promise<AltTextResult | null>,\n): Promise<void> {\n  let alt = file.name.replace(/\\.[^.]+$/, '');\n  if (onRequestAlt) {\n    const result = await onRequestAlt(file);\n    if (result === null) return; // cancelled\n    alt = result.alt;\n  }\n\n  const view = editor.view;\n  const insertPos = Math.max(\n    0,\n    Math.min(pos ?? view.state.selection.from, view.state.doc.content.size),\n  );\n  const id = genId();\n  view.dispatch(\n    view.state.tr.setMeta(pluginKey, {\n      type: 'add',\n      upload: {\n        id,\n        file,\n        pos: insertPos,\n        status: 'uploading',\n        alt,\n      },\n    } satisfies Meta),\n  );\n  doUpload(view, id, file, alt, uploadImage);\n}\n\nexport const ImageUpload = Extension.create<\n  ImageUploadOptions,\n  ImageUploadStorage\n>({\n  name: 'imageUpload',\n\n  addOptions() {\n    return {\n      uploadImage: async () => {\n        throw new Error('ImageUpload: uploadImage handler not configured');\n      },\n      onRequestAlt: undefined,\n    };\n  },\n\n  addStorage() {\n    return { startUpload: null };\n  },\n\n  addProseMirrorPlugins() {\n    const editor = this.editor;\n    const { uploadImage, onRequestAlt } = this.options;\n\n    // Expose a programmatic entry point for callers (file picker, slash menu).\n    const storage = editor.storage as unknown as Record<string, ImageUploadStorage>;\n    storage.imageUpload.startUpload = (file: File, pos?: number) => {\n      void startImageUpload(editor, file, pos, uploadImage, onRequestAlt);\n    };\n\n    return [\n      new Plugin<PluginState>({\n        key: pluginKey,\n        state: {\n          init: () => ({ uploads: [] }),\n          apply(tr, prev) {\n            // Map all upload positions through the transaction so they stay\n            // anchored to the right place when the doc changes.\n            let uploads = prev.uploads.map((u) => ({\n              ...u,\n              pos: tr.mapping.map(u.pos),\n            }));\n            const meta = tr.getMeta(pluginKey) as Meta | undefined;\n            if (meta) {\n              if (meta.type === 'add') {\n                uploads = [...uploads, meta.upload];\n              } else if (meta.type === 'update') {\n                uploads = uploads.map((u) =>\n                  u.id === meta.id ? { ...u, ...meta.patch } : u,\n                );\n              } else if (meta.type === 'remove') {\n                uploads = uploads.filter((u) => u.id !== meta.id);\n              }\n            }\n            return { uploads };\n          },\n        },\n        props: {\n          decorations(state) {\n            const pluginState = pluginKey.getState(state);\n            if (!pluginState || pluginState.uploads.length === 0) {\n              return DecorationSet.empty;\n            }\n            return DecorationSet.create(\n              state.doc,\n              pluginState.uploads.map((entry) =>\n                Decoration.widget(\n                  entry.pos,\n                  (view) => renderPlaceholder(view, entry, uploadImage),\n                  {\n                    side: -1,\n                    key: `${entry.id}:${entry.status}:${entry.error ?? ''}`,\n                    ignoreSelection: true,\n                  },\n                ),\n              ),\n            );\n          },\n          handlePaste: (view, event) => {\n            const clipboard = event.clipboardData;\n            if (!clipboard) return false;\n            const imageItem = Array.from(clipboard.items).find((item) =>\n              item.type.startsWith('image/'),\n            );\n            if (!imageItem) return false;\n            const file = imageItem.getAsFile();\n            if (!file) return false;\n            event.preventDefault();\n            void startImageUpload(\n              editor,\n              file,\n              view.state.selection.from,\n              uploadImage,\n              onRequestAlt,\n            );\n            return true;\n          },\n          handleDrop: (view, event) => {\n            const dt = event.dataTransfer;\n            if (!dt || dt.files.length === 0) return false;\n            const file = Array.from(dt.files).find((f) =>\n              f.type.startsWith('image/'),\n            );\n            if (!file) return false;\n            event.preventDefault();\n            const coords = view.posAtCoords({\n              left: event.clientX,\n              top: event.clientY,\n            });\n            void startImageUpload(\n              editor,\n              file,\n              coords?.pos,\n              uploadImage,\n              onRequestAlt,\n            );\n            return true;\n          },\n        },\n      }),\n    ];\n  },\n});\n"],"mappings":"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","names":[]}

package/dist/blog-editor/extensions/markdown-paste.d.ts

@@ -0,0 +1,2 @@
+import { Extension } from '@tiptap/core';
+export declare const MarkdownPaste: Extension<any, any>;

package/dist/blog-editor/extensions/markdown-paste.js

@@ -0,0 +1,38 @@
+import DOMPurify from "dompurify";
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { cleanPaste } from "@withpotter/lib/blog/paste-hygiene";
+const MarkdownPaste = Extension.create({
+  name: "pasteHygiene",
+  addProseMirrorPlugins() {
+    const editor = this.editor;
+    return [
+      new Plugin({
+        key: new PluginKey("markdownPaste"),
+        props: {
+          handlePaste: (_view, event) => {
+            const clipboard = event.clipboardData;
+            if (!clipboard) return false;
+            const hasImage = Array.from(clipboard.items).some(
+              (item) => item.type.startsWith("image/")
+            );
+            if (hasImage) return false;
+            const html = clipboard.getData("text/html");
+            const text = clipboard.getData("text/plain");
+            const cleaned = cleanPaste(html, text);
+            const normalizedHtml = html.trim();
+            if (!cleaned) return false;
+            if (cleaned === normalizedHtml && normalizedHtml) return false;
+            event.preventDefault();
+            editor.commands.insertContent(DOMPurify.sanitize(cleaned));
+            return true;
+          }
+        }
+      })
+    ];
+  }
+});
+export {
+  MarkdownPaste
+};
+//# sourceMappingURL=markdown-paste.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blog-editor/extensions/markdown-paste.ts"],"sourcesContent":["// Tiptap extension that intercepts paste events. If the plain-text payload\n// looks like Markdown, we convert to HTML and insert through Tiptap so the\n// document gets proper ProseMirror nodes (headings, lists, code blocks, etc.)\n// instead of an inline-styled HTML blob.\n\nimport DOMPurify from 'dompurify';\nimport { Extension } from '@tiptap/core';\nimport { Plugin, PluginKey } from '@tiptap/pm/state';\nimport { cleanPaste } from '@withpotter/lib/blog/paste-hygiene';\n\nexport const MarkdownPaste = Extension.create({\n  name: 'pasteHygiene',\n\n  addProseMirrorPlugins() {\n    const editor = this.editor;\n    return [\n      new Plugin({\n        key: new PluginKey('markdownPaste'),\n        props: {\n          handlePaste: (_view, event) => {\n            const clipboard = event.clipboardData;\n            if (!clipboard) return false;\n\n            // Image paste is handled by the ImageUpload extension; let it run.\n            const hasImage = Array.from(clipboard.items).some((item) =>\n              item.type.startsWith('image/'),\n            );\n            if (hasImage) return false;\n\n            const html = clipboard.getData('text/html');\n            const text = clipboard.getData('text/plain');\n            const cleaned = cleanPaste(html, text);\n            const normalizedHtml = html.trim();\n\n            if (!cleaned) return false;\n            if (cleaned === normalizedHtml && normalizedHtml) return false;\n\n            event.preventDefault();\n            editor.commands.insertContent(DOMPurify.sanitize(cleaned));\n            return true;\n          },\n        },\n      }),\n    ];\n  },\n});\n"],"mappings":"AAKA,OAAO,eAAe;AACtB,SAAS,iBAAiB;AAC1B,SAAS,QAAQ,iBAAiB;AAClC,SAAS,kBAAkB;AAEpB,MAAM,gBAAgB,UAAU,OAAO;AAAA,EAC5C,MAAM;AAAA,EAEN,wBAAwB;AACtB,UAAM,SAAS,KAAK;AACpB,WAAO;AAAA,MACL,IAAI,OAAO;AAAA,QACT,KAAK,IAAI,UAAU,eAAe;AAAA,QAClC,OAAO;AAAA,UACL,aAAa,CAAC,OAAO,UAAU;AAC7B,kBAAM,YAAY,MAAM;AACxB,gBAAI,CAAC,UAAW,QAAO;AAGvB,kBAAM,WAAW,MAAM,KAAK,UAAU,KAAK,EAAE;AAAA,cAAK,CAAC,SACjD,KAAK,KAAK,WAAW,QAAQ;AAAA,YAC/B;AACA,gBAAI,SAAU,QAAO;AAErB,kBAAM,OAAO,UAAU,QAAQ,WAAW;AAC1C,kBAAM,OAAO,UAAU,QAAQ,YAAY;AAC3C,kBAAM,UAAU,WAAW,MAAM,IAAI;AACrC,kBAAM,iBAAiB,KAAK,KAAK;AAEjC,gBAAI,CAAC,QAAS,QAAO;AACrB,gBAAI,YAAY,kBAAkB,eAAgB,QAAO;AAEzD,kBAAM,eAAe;AACrB,mBAAO,SAAS,cAAc,UAAU,SAAS,OAAO,CAAC;AACzD,mBAAO;AAAA,UACT;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AACF,CAAC;","names":[]}

package/dist/blog-editor/extensions/slash-command.d.ts

@@ -0,0 +1,19 @@
+import { Extension, type Range } from '@tiptap/core';
+export interface SlashCommandItem {
+    id: string;
+    label: string;
+}
+interface SlashCommandState {
+    range: Range;
+    query: string;
+    items: SlashCommandItem[];
+    clientRect?: () => DOMRect | null;
+}
+interface SlashCommandOptions {
+    items: SlashCommandItem[];
+    onShow: (state: SlashCommandState) => void;
+    onUpdate: (state: SlashCommandState) => void;
+    onHide: () => void;
+}
+export declare const SlashCommand: Extension<SlashCommandOptions, any>;
+export {};

package/dist/blog-editor/extensions/slash-command.js

@@ -0,0 +1,57 @@
+import { Extension } from "@tiptap/core";
+import Suggestion from "@tiptap/suggestion";
+const SlashCommand = Extension.create({
+  name: "slashCommand",
+  addOptions() {
+    return {
+      items: [],
+      onShow: () => void 0,
+      onUpdate: () => void 0,
+      onHide: () => void 0
+    };
+  },
+  addProseMirrorPlugins() {
+    const getMatchingItems = (query) => {
+      const normalized = query.trim().toLowerCase();
+      if (!normalized) return this.options.items;
+      return this.options.items.filter(
+        (item) => item.label.toLowerCase().includes(normalized)
+      );
+    };
+    const toState = (props) => ({
+      range: props.range,
+      query: props.query,
+      items: getMatchingItems(props.query),
+      clientRect: props.clientRect ?? void 0
+    });
+    return [
+      Suggestion({
+        editor: this.editor,
+        char: "/",
+        startOfLine: true,
+        allowedPrefixes: null,
+        items: ({ query }) => getMatchingItems(query),
+        allow: ({ state, range }) => {
+          const $from = state.doc.resolve(range.from);
+          return $from.parent.type.name === "paragraph";
+        },
+        command: () => void 0,
+        render: () => ({
+          onStart: (props) => {
+            this.options.onShow(toState(props));
+          },
+          onUpdate: (props) => {
+            this.options.onUpdate(toState(props));
+          },
+          onExit: () => {
+            this.options.onHide();
+          }
+        })
+      })
+    ];
+  }
+});
+export {
+  SlashCommand
+};
+//# sourceMappingURL=slash-command.js.map

package/dist/blog-editor/extensions/slash-command.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blog-editor/extensions/slash-command.ts"],"sourcesContent":["import { Extension, type Range } from '@tiptap/core';\nimport Suggestion, { type SuggestionProps } from '@tiptap/suggestion';\n\nexport interface SlashCommandItem {\n  id: string;\n  label: string;\n}\n\ninterface SlashCommandState {\n  range: Range;\n  query: string;\n  items: SlashCommandItem[];\n  clientRect?: () => DOMRect | null;\n}\n\ninterface SlashCommandOptions {\n  items: SlashCommandItem[];\n  onShow: (state: SlashCommandState) => void;\n  onUpdate: (state: SlashCommandState) => void;\n  onHide: () => void;\n}\n\nexport const SlashCommand = Extension.create<SlashCommandOptions>({\n  name: 'slashCommand',\n\n  addOptions() {\n    return {\n      items: [],\n      onShow: () => undefined,\n      onUpdate: () => undefined,\n      onHide: () => undefined,\n    };\n  },\n\n  addProseMirrorPlugins() {\n    const getMatchingItems = (query: string) => {\n      const normalized = query.trim().toLowerCase();\n      if (!normalized) return this.options.items;\n      return this.options.items.filter((item) =>\n        item.label.toLowerCase().includes(normalized),\n      );\n    };\n\n    const toState = (props: SuggestionProps<SlashCommandItem>) => ({\n      range: props.range,\n      query: props.query,\n      items: getMatchingItems(props.query),\n      clientRect: props.clientRect ?? undefined,\n    });\n\n    return [\n      Suggestion<SlashCommandItem>({\n        editor: this.editor,\n        char: '/',\n        startOfLine: true,\n        allowedPrefixes: null,\n        items: ({ query }) => getMatchingItems(query),\n        allow: ({ state, range }) => {\n          const $from = state.doc.resolve(range.from);\n          return $from.parent.type.name === 'paragraph';\n        },\n        command: () => undefined,\n        render: () => ({\n          onStart: (props) => {\n            this.options.onShow(toState(props));\n          },\n          onUpdate: (props) => {\n            this.options.onUpdate(toState(props));\n          },\n          onExit: () => {\n            this.options.onHide();\n          },\n        }),\n      }),\n    ];\n  },\n});\n"],"mappings":"AAAA,SAAS,iBAA6B;AACtC,OAAO,gBAA0C;AAqB1C,MAAM,eAAe,UAAU,OAA4B;AAAA,EAChE,MAAM;AAAA,EAEN,aAAa;AACX,WAAO;AAAA,MACL,OAAO,CAAC;AAAA,MACR,QAAQ,MAAM;AAAA,MACd,UAAU,MAAM;AAAA,MAChB,QAAQ,MAAM;AAAA,IAChB;AAAA,EACF;AAAA,EAEA,wBAAwB;AACtB,UAAM,mBAAmB,CAAC,UAAkB;AAC1C,YAAM,aAAa,MAAM,KAAK,EAAE,YAAY;AAC5C,UAAI,CAAC,WAAY,QAAO,KAAK,QAAQ;AACrC,aAAO,KAAK,QAAQ,MAAM;AAAA,QAAO,CAAC,SAChC,KAAK,MAAM,YAAY,EAAE,SAAS,UAAU;AAAA,MAC9C;AAAA,IACF;AAEA,UAAM,UAAU,CAAC,WAA8C;AAAA,MAC7D,OAAO,MAAM;AAAA,MACb,OAAO,MAAM;AAAA,MACb,OAAO,iBAAiB,MAAM,KAAK;AAAA,MACnC,YAAY,MAAM,cAAc;AAAA,IAClC;AAEA,WAAO;AAAA,MACL,WAA6B;AAAA,QAC3B,QAAQ,KAAK;AAAA,QACb,MAAM;AAAA,QACN,aAAa;AAAA,QACb,iBAAiB;AAAA,QACjB,OAAO,CAAC,EAAE,MAAM,MAAM,iBAAiB,KAAK;AAAA,QAC5C,OAAO,CAAC,EAAE,OAAO,MAAM,MAAM;AAC3B,gBAAM,QAAQ,MAAM,IAAI,QAAQ,MAAM,IAAI;AAC1C,iBAAO,MAAM,OAAO,KAAK,SAAS;AAAA,QACpC;AAAA,QACA,SAAS,MAAM;AAAA,QACf,QAAQ,OAAO;AAAA,UACb,SAAS,CAAC,UAAU;AAClB,iBAAK,QAAQ,OAAO,QAAQ,KAAK,CAAC;AAAA,UACpC;AAAA,UACA,UAAU,CAAC,UAAU;AACnB,iBAAK,QAAQ,SAAS,QAAQ,KAAK,CAAC;AAAA,UACtC;AAAA,UACA,QAAQ,MAAM;AACZ,iBAAK,QAAQ,OAAO;AAAA,UACtB;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AACF,CAAC;","names":[]}

package/dist/blog-editor/hooks/use-blog-draft.d.ts

@@ -0,0 +1,19 @@
+import { type BlogEditorState, type EditorMode } from '../types';
+interface UseBlogDraftArgs {
+    mode: EditorMode;
+    postId?: string;
+    tenantSlug: string | undefined;
+    defaultAuthor: string | undefined;
+    saving: boolean;
+    onError: (message: string | null) => void;
+}
+export interface UseBlogDraftResult {
+    form: BlogEditorState;
+    setField: <K extends keyof BlogEditorState>(field: K, value: BlogEditorState[K]) => void;
+    setForm: React.Dispatch<React.SetStateAction<BlogEditorState>>;
+    loading: boolean;
+    lastAutosavedAt: string | null;
+    clearDraft: () => void;
+}
+export declare function useBlogDraft({ mode, postId, tenantSlug, defaultAuthor, saving, onError, }: UseBlogDraftArgs): UseBlogDraftResult;
+export {};

package/dist/blog-editor/hooks/use-blog-draft.js

@@ -0,0 +1,118 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { contentApi } from "@withpotter/lib/api";
+import { normalizeBlogTypography } from "@withpotter/lib/blog/density";
+import {
+  EMPTY_BLOG_STATE,
+  slugify
+} from "../types";
+function useBlogDraft({
+  mode,
+  postId,
+  tenantSlug,
+  defaultAuthor,
+  saving,
+  onError
+}) {
+  const [form, setForm] = useState(EMPTY_BLOG_STATE);
+  const [loading, setLoading] = useState(mode === "edit");
+  const [lastAutosavedAt, setLastAutosavedAt] = useState(null);
+  const slugTouchedRef = useRef(false);
+  const draftKey = useMemo(
+    () => `blog-editor-draft:${tenantSlug || "no-tenant"}:${mode}:${postId || "new"}`,
+    [tenantSlug, mode, postId]
+  );
+  const setField = useCallback(
+    (field, value) => {
+      if (field === "slug") slugTouchedRef.current = true;
+      setForm((prev) => ({ ...prev, [field]: value }));
+    },
+    []
+  );
+  useEffect(() => {
+    if (slugTouchedRef.current || !form.title) return;
+    setForm((prev) => ({ ...prev, slug: slugify(form.title) }));
+  }, [form.title]);
+  useEffect(() => {
+    if (mode !== "create" || !defaultAuthor) return;
+    setForm(
+      (prev) => prev.author ? prev : { ...prev, author: defaultAuthor }
+    );
+  }, [mode, defaultAuthor]);
+  useEffect(() => {
+    if (mode !== "create" || !tenantSlug) return;
+    try {
+      localStorage.removeItem(draftKey);
+    } catch {
+    }
+  }, [mode, tenantSlug, draftKey]);
+  useEffect(() => {
+    if (mode !== "edit" || !postId || !tenantSlug) return;
+    let cancelled = false;
+    setLoading(true);
+    onError(null);
+    (async () => {
+      try {
+        const response = await contentApi.get(tenantSlug, "blog", postId);
+        if (cancelled) return;
+        const item = response.data;
+        const data = item.data || {};
+        const seo = data.seo || {};
+        const rawStatus = data.status;
+        const status = rawStatus === "draft" || rawStatus === "published" || rawStatus === "scheduled" ? rawStatus : item.isActive ? "published" : "draft";
+        setForm({
+          title: item.title || data.title || "",
+          slug: item.slug || data.slug || "",
+          shortDescription: data.shortDescription || data.excerpt || "",
+          category: data.category || "",
+          tags: data.tags || "",
+          coverImage: data.image || "",
+          metaTitle: seo.metaTitle || "",
+          metaDescription: seo.metaDescription || "",
+          ogImage: seo.ogImage || "",
+          author: data.author || defaultAuthor || "",
+          status,
+          publishAt: data.publishAt || "",
+          featured: Boolean(data.featured ?? item.featured),
+          bodyHtml: data.description || data.body || item.description || "",
+          typography: normalizeBlogTypography(data.typography)
+        });
+        slugTouchedRef.current = true;
+      } catch (err) {
+        if (cancelled) return;
+        onError(err instanceof Error ? err.message : "Failed to load post");
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [mode, postId, tenantSlug, defaultAuthor, onError]);
+  useEffect(() => {
+    if (loading || saving || !tenantSlug) return;
+    const hasContent = form.title.trim() || form.shortDescription.trim() || form.bodyHtml.trim() || form.coverImage.trim();
+    if (!hasContent) return;
+    const timer = window.setTimeout(() => {
+      try {
+        localStorage.setItem(
+          draftKey,
+          JSON.stringify({ form, updatedAt: (/* @__PURE__ */ new Date()).toISOString() })
+        );
+        setLastAutosavedAt((/* @__PURE__ */ new Date()).toLocaleTimeString());
+      } catch {
+      }
+    }, 1200);
+    return () => window.clearTimeout(timer);
+  }, [draftKey, form, loading, saving, tenantSlug]);
+  const clearDraft = useCallback(() => {
+    try {
+      localStorage.removeItem(draftKey);
+    } catch {
+    }
+  }, [draftKey]);
+  return { form, setForm, setField, loading, lastAutosavedAt, clearDraft };
+}
+export {
+  useBlogDraft
+};
+//# sourceMappingURL=use-blog-draft.js.map

package/dist/blog-editor/hooks/use-blog-draft.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blog-editor/hooks/use-blog-draft.ts"],"sourcesContent":["// Owns the post form: loading from the API in edit mode, autosaving to\n// localStorage, and slug auto-derivation. Returns one stable `setField` so\n// the rest of the editor doesn't deal with `setForm(prev => ...)` plumbing.\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { contentApi } from '@withpotter/lib/api';\nimport { normalizeBlogTypography } from '@withpotter/lib/blog/density';\nimport {\n  EMPTY_BLOG_STATE,\n  slugify,\n  type BlogEditorState,\n  type EditorMode,\n} from '../types';\n\ninterface UseBlogDraftArgs {\n  mode: EditorMode;\n  postId?: string;\n  tenantSlug: string | undefined;\n  defaultAuthor: string | undefined;\n  saving: boolean;\n  onError: (message: string | null) => void;\n}\n\nexport interface UseBlogDraftResult {\n  form: BlogEditorState;\n  setField: <K extends keyof BlogEditorState>(\n    field: K,\n    value: BlogEditorState[K],\n  ) => void;\n  setForm: React.Dispatch<React.SetStateAction<BlogEditorState>>;\n  loading: boolean;\n  lastAutosavedAt: string | null;\n  clearDraft: () => void;\n}\n\nexport function useBlogDraft({\n  mode,\n  postId,\n  tenantSlug,\n  defaultAuthor,\n  saving,\n  onError,\n}: UseBlogDraftArgs): UseBlogDraftResult {\n  const [form, setForm] = useState<BlogEditorState>(EMPTY_BLOG_STATE);\n  const [loading, setLoading] = useState(mode === 'edit');\n  const [lastAutosavedAt, setLastAutosavedAt] = useState<string | null>(null);\n  const slugTouchedRef = useRef(false);\n\n  const draftKey = useMemo(\n    () =>\n      `blog-editor-draft:${tenantSlug || 'no-tenant'}:${mode}:${postId || 'new'}`,\n    [tenantSlug, mode, postId],\n  );\n\n  const setField = useCallback(\n    <K extends keyof BlogEditorState>(field: K, value: BlogEditorState[K]) => {\n      if (field === 'slug') slugTouchedRef.current = true;\n      setForm((prev) => ({ ...prev, [field]: value }));\n    },\n    [],\n  );\n\n  // Auto-derive slug from title until the user edits the slug themselves.\n  useEffect(() => {\n    if (slugTouchedRef.current || !form.title) return;\n    setForm((prev) => ({ ...prev, slug: slugify(form.title) }));\n  }, [form.title]);\n\n  // Default the author for new posts.\n  useEffect(() => {\n    if (mode !== 'create' || !defaultAuthor) return;\n    setForm((prev) =>\n      prev.author ? prev : { ...prev, author: defaultAuthor },\n    );\n  }, [mode, defaultAuthor]);\n\n  // Drop any stale draft for fresh \"create\" sessions.\n  useEffect(() => {\n    if (mode !== 'create' || !tenantSlug) return;\n    try {\n      localStorage.removeItem(draftKey);\n    } catch {\n      /* storage unavailable */\n    }\n  }, [mode, tenantSlug, draftKey]);\n\n  // Load the post for \"edit\" mode.\n  useEffect(() => {\n    if (mode !== 'edit' || !postId || !tenantSlug) return;\n    let cancelled = false;\n    setLoading(true);\n    onError(null);\n\n    (async () => {\n      try {\n        const response = await contentApi.get(tenantSlug, 'blog', postId);\n        if (cancelled) return;\n        const item = response.data;\n        const data = (item.data || {}) as Record<string, unknown>;\n        const seo = (data.seo || {}) as Record<string, unknown>;\n        const rawStatus = data.status;\n        const status: 'draft' | 'published' | 'scheduled' =\n          rawStatus === 'draft' ||\n          rawStatus === 'published' ||\n          rawStatus === 'scheduled'\n            ? rawStatus\n            : item.isActive\n              ? 'published'\n              : 'draft';\n\n        setForm({\n          title: (item.title || data.title || '') as string,\n          slug: (item.slug || data.slug || '') as string,\n          shortDescription: (data.shortDescription ||\n            data.excerpt ||\n            '') as string,\n          category: (data.category || '') as string,\n          tags: (data.tags || '') as string,\n          coverImage: (data.image || '') as string,\n          metaTitle: (seo.metaTitle || '') as string,\n          metaDescription: (seo.metaDescription || '') as string,\n          ogImage: (seo.ogImage || '') as string,\n          author: (data.author || defaultAuthor || '') as string,\n          status,\n          publishAt: (data.publishAt || '') as string,\n          featured: Boolean(data.featured ?? item.featured),\n          bodyHtml: (data.description ||\n            data.body ||\n            item.description ||\n            '') as string,\n          typography: normalizeBlogTypography(data.typography),\n        });\n        slugTouchedRef.current = true; // loaded slugs are user-set\n      } catch (err) {\n        if (cancelled) return;\n        onError(err instanceof Error ? err.message : 'Failed to load post');\n      } finally {\n        if (!cancelled) setLoading(false);\n      }\n    })();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [mode, postId, tenantSlug, defaultAuthor, onError]);\n\n  // Debounced autosave to localStorage.\n  useEffect(() => {\n    if (loading || saving || !tenantSlug) return;\n    const hasContent =\n      form.title.trim() ||\n      form.shortDescription.trim() ||\n      form.bodyHtml.trim() ||\n      form.coverImage.trim();\n    if (!hasContent) return;\n\n    const timer = window.setTimeout(() => {\n      try {\n        localStorage.setItem(\n          draftKey,\n          JSON.stringify({ form, updatedAt: new Date().toISOString() }),\n        );\n        setLastAutosavedAt(new Date().toLocaleTimeString());\n      } catch {\n        /* storage unavailable */\n      }\n    }, 1200);\n\n    return () => window.clearTimeout(timer);\n  }, [draftKey, form, loading, saving, tenantSlug]);\n\n  const clearDraft = useCallback(() => {\n    try {\n      localStorage.removeItem(draftKey);\n    } catch {\n      /* storage unavailable */\n    }\n  }, [draftKey]);\n\n  return { form, setForm, setField, loading, lastAutosavedAt, clearDraft };\n}\n"],"mappings":"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","names":[]}

package/dist/blog-editor/hooks/use-image-upload.d.ts

@@ -0,0 +1,8 @@
+import type { UploadTarget } from '../types';
+export interface UseImageUploadResult {
+    uploading: boolean;
+    uploadProgress: number | null;
+    uploadTarget: UploadTarget | null;
+    uploadImage: (file: File, target: UploadTarget) => Promise<string>;
+}
+export declare function useImageUpload(onError: (message: string) => void): UseImageUploadResult;

package/dist/blog-editor/hooks/use-image-upload.js

@@ -0,0 +1,35 @@
+import { useCallback, useState } from "react";
+import { uploadImageWithProgress } from "@withpotter/lib/media-service";
+function useImageUpload(onError) {
+  const [uploading, setUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState(null);
+  const [uploadTarget, setUploadTarget] = useState(null);
+  const uploadImage = useCallback(
+    async (file, target) => {
+      setUploading(true);
+      setUploadTarget(target);
+      setUploadProgress(0);
+      try {
+        const result = await uploadImageWithProgress(
+          file,
+          (p) => setUploadProgress(p)
+        );
+        return result.url;
+      } catch (err) {
+        const message = err instanceof Error ? err.message : "Image upload failed";
+        onError(message);
+        throw err;
+      } finally {
+        setUploading(false);
+        setUploadProgress(null);
+        setUploadTarget(null);
+      }
+    },
+    [onError]
+  );
+  return { uploading, uploadProgress, uploadTarget, uploadImage };
+}
+export {
+  useImageUpload
+};
+//# sourceMappingURL=use-image-upload.js.map

package/dist/blog-editor/hooks/use-image-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blog-editor/hooks/use-image-upload.ts"],"sourcesContent":["// Centralised image upload state for the editor. Owns `uploading`,\n// `uploadProgress`, `uploadTarget` and the upload routine itself, so the page\n// component doesn't have to wire three useState calls and a callback together.\n\nimport { useCallback, useState } from 'react';\nimport { uploadImageWithProgress } from '@withpotter/lib/media-service';\nimport type { UploadTarget } from '../types';\n\nexport interface UseImageUploadResult {\n  uploading: boolean;\n  uploadProgress: number | null;\n  uploadTarget: UploadTarget | null;\n  uploadImage: (file: File, target: UploadTarget) => Promise<string>;\n}\n\nexport function useImageUpload(\n  onError: (message: string) => void,\n): UseImageUploadResult {\n  const [uploading, setUploading] = useState(false);\n  const [uploadProgress, setUploadProgress] = useState<number | null>(null);\n  const [uploadTarget, setUploadTarget] = useState<UploadTarget | null>(null);\n\n  const uploadImage = useCallback(\n    async (file: File, target: UploadTarget) => {\n      setUploading(true);\n      setUploadTarget(target);\n      setUploadProgress(0);\n      try {\n        const result = await uploadImageWithProgress(file, (p) =>\n          setUploadProgress(p),\n        );\n        return result.url;\n      } catch (err) {\n        const message =\n          err instanceof Error ? err.message : 'Image upload failed';\n        onError(message);\n        throw err;\n      } finally {\n        setUploading(false);\n        setUploadProgress(null);\n        setUploadTarget(null);\n      }\n    },\n    [onError],\n  );\n\n  return { uploading, uploadProgress, uploadTarget, uploadImage };\n}\n"],"mappings":"AAIA,SAAS,aAAa,gBAAgB;AACtC,SAAS,+BAA+B;AAUjC,SAAS,eACd,SACsB;AACtB,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAwB,IAAI;AACxE,QAAM,CAAC,cAAc,eAAe,IAAI,SAA8B,IAAI;AAE1E,QAAM,cAAc;AAAA,IAClB,OAAO,MAAY,WAAyB;AAC1C,mBAAa,IAAI;AACjB,sBAAgB,MAAM;AACtB,wBAAkB,CAAC;AACnB,UAAI;AACF,cAAM,SAAS,MAAM;AAAA,UAAwB;AAAA,UAAM,CAAC,MAClD,kBAAkB,CAAC;AAAA,QACrB;AACA,eAAO,OAAO;AAAA,MAChB,SAAS,KAAK;AACZ,cAAM,UACJ,eAAe,QAAQ,IAAI,UAAU;AACvC,gBAAQ,OAAO;AACf,cAAM;AAAA,MACR,UAAE;AACA,qBAAa,KAAK;AAClB,0BAAkB,IAAI;AACtB,wBAAgB,IAAI;AAAA,MACtB;AAAA,IACF;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,SAAO,EAAE,WAAW,gBAAgB,cAAc,YAAY;AAChE;","names":[]}

package/dist/blog-editor/markdown.d.ts

@@ -0,0 +1,2 @@
+export declare function looksLikeMarkdown(text: string): boolean;
+export declare function markdownToHtml(md: string): string;