@withpotter/components 0.13.0-next.101

package/dist/blog-editor/BlogTiptapEditor.js

@@ -0,0 +1,507 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  Code2,
+  Heading1,
+  Heading2,
+  Heading3,
+  ImagePlus,
+  List,
+  ListOrdered,
+  Minus,
+  Quote
+} from "lucide-react";
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Link from "@tiptap/extension-link";
+import Image from "@tiptap/extension-image";
+import Placeholder from "@tiptap/extension-placeholder";
+import Typography from "@tiptap/extension-typography";
+import Underline from "@tiptap/extension-underline";
+import CharacterCount from "@tiptap/extension-character-count";
+import TextAlign from "@tiptap/extension-text-align";
+import {
+  DEFAULT_BLOG_TYPOGRAPHY,
+  getReadingStyleVariables,
+  normalizeBlogTypography
+} from "@withpotter/lib/blog/density";
+import readerModeStyles from "./reader-mode.module.css";
+import { ImageUpload } from "./extensions/image-upload";
+import { MarkdownPaste } from "./extensions/markdown-paste";
+import { ImageAltDialog } from "./panels/ImageAltDialog";
+import { SlashCommand } from "./extensions/slash-command";
+import { EmptyLinePlusMenu } from "./extensions/empty-line-plus-menu";
+import { EditorShortcuts } from "./extensions/editor-shortcuts";
+import {
+  EditorCommandMenu
+} from "./menus/EditorCommandMenu";
+function BlogTiptapEditor({
+  initialHtml,
+  onUpdate,
+  onReady,
+  uploadImage,
+  placeholder = "Tell your story\u2026",
+  readerTheme = "original",
+  typography = DEFAULT_BLOG_TYPOGRAPHY,
+  denseParagraphIndexes = []
+}) {
+  const [altDialogOpen, setAltDialogOpen] = useState(false);
+  const [pendingFile, setPendingFile] = useState(null);
+  const [pendingAltResolver, setPendingAltResolver] = useState(null);
+  const onRequestAlt = useCallback(
+    (file) => {
+      return new Promise((resolve) => {
+        setPendingFile(file);
+        setAltDialogOpen(true);
+        setPendingAltResolver(() => resolve);
+      });
+    },
+    []
+  );
+  const handleAltConfirm = useCallback(
+    (result) => {
+      setAltDialogOpen(false);
+      setPendingFile(null);
+      pendingAltResolver?.(result);
+      setPendingAltResolver(null);
+    },
+    [pendingAltResolver]
+  );
+  const handleAltCancel = useCallback(() => {
+    setAltDialogOpen(false);
+    setPendingFile(null);
+    pendingAltResolver?.(null);
+    setPendingAltResolver(null);
+  }, [pendingAltResolver]);
+  const fileInputRef = useRef(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [menuSource, setMenuSource] = useState("slash");
+  const [menuQuery, setMenuQuery] = useState("");
+  const [menuRange, setMenuRange] = useState(null);
+  const [menuInsertPos, setMenuInsertPos] = useState(null);
+  const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });
+  const [pendingImageInsertPos, setPendingImageInsertPos] = useState(null);
+  const allCommandItems = useMemo(
+    () => [
+      {
+        id: "heading-1",
+        label: "Heading 1",
+        icon: /* @__PURE__ */ jsx(Heading1, { className: "w-4 h-4" })
+      },
+      {
+        id: "heading-2",
+        label: "Heading 2",
+        icon: /* @__PURE__ */ jsx(Heading2, { className: "w-4 h-4" })
+      },
+      {
+        id: "heading-3",
+        label: "Heading 3",
+        icon: /* @__PURE__ */ jsx(Heading3, { className: "w-4 h-4" })
+      },
+      {
+        id: "bullet-list",
+        label: "Bullet list",
+        icon: /* @__PURE__ */ jsx(List, { className: "w-4 h-4" })
+      },
+      {
+        id: "ordered-list",
+        label: "Numbered list",
+        icon: /* @__PURE__ */ jsx(ListOrdered, { className: "w-4 h-4" })
+      },
+      { id: "quote", label: "Quote", icon: /* @__PURE__ */ jsx(Quote, { className: "w-4 h-4" }) },
+      {
+        id: "code-block",
+        label: "Code block",
+        icon: /* @__PURE__ */ jsx(Code2, { className: "w-4 h-4" })
+      },
+      { id: "image", label: "Image", icon: /* @__PURE__ */ jsx(ImagePlus, { className: "w-4 h-4" }) },
+      { id: "divider", label: "Divider", icon: /* @__PURE__ */ jsx(Minus, { className: "w-4 h-4" }) }
+    ],
+    []
+  );
+  const visibleMenuItems = useMemo(() => {
+    const sourceItems = menuSource === "plus" ? allCommandItems.filter(
+      (item) => item.id === "image" || item.id === "divider"
+    ) : allCommandItems;
+    const normalized = menuQuery.trim().toLowerCase();
+    if (!normalized) return sourceItems;
+    return sourceItems.filter(
+      (item) => item.label.toLowerCase().includes(normalized)
+    );
+  }, [allCommandItems, menuQuery, menuSource]);
+  const normalizedTypography = useMemo(
+    () => normalizeBlogTypography(typography),
+    [typography]
+  );
+  const readingStyleVars = useMemo(
+    () => getReadingStyleVariables(normalizedTypography),
+    [normalizedTypography]
+  );
+  const closeMenu = () => {
+    setMenuOpen(false);
+    setMenuRange(null);
+    setMenuInsertPos(null);
+    setMenuQuery("");
+  };
+  const selectCommand = (item) => {
+    if (!editor) return;
+    const chain = menuInsertPos === null ? editor.chain().focus() : editor.chain().focus(menuInsertPos);
+    if (menuRange) {
+      chain.deleteRange(menuRange);
+    }
+    switch (item.id) {
+      case "heading-1":
+        chain.toggleHeading({ level: 1 }).run();
+        break;
+      case "heading-2":
+        chain.toggleHeading({ level: 2 }).run();
+        break;
+      case "heading-3":
+        chain.toggleHeading({ level: 3 }).run();
+        break;
+      case "bullet-list":
+        chain.toggleBulletList().run();
+        break;
+      case "ordered-list":
+        chain.toggleOrderedList().run();
+        break;
+      case "quote":
+        chain.toggleBlockquote().run();
+        break;
+      case "code-block":
+        chain.toggleCodeBlock().run();
+        break;
+      case "divider":
+        chain.setHorizontalRule().run();
+        break;
+      case "image":
+        setPendingImageInsertPos(
+          menuSource === "plus" ? menuInsertPos ?? editor.state.selection.from : menuRange?.from ?? editor.state.selection.from
+        );
+        fileInputRef.current?.click();
+        break;
+      default:
+        break;
+    }
+    closeMenu();
+  };
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        heading: { levels: [1, 2, 3] },
+        link: false
+        // use the standalone Link extension below
+      }),
+      Underline,
+      Link.configure({
+        openOnClick: false,
+        HTMLAttributes: { rel: "noopener noreferrer", target: "_blank" }
+      }),
+      // loading="lazy" and decoding="async" are added to every rendered <img>
+      // via HTMLAttributes so that published HTML meets the a11y / performance spec.
+      Image.configure({
+        inline: false,
+        allowBase64: false,
+        HTMLAttributes: { loading: "lazy", decoding: "async" }
+      }),
+      Typography,
+      Placeholder.configure({ placeholder }),
+      CharacterCount,
+      TextAlign.configure({
+        types: ["heading", "paragraph"],
+        alignments: ["left", "center", "right", "justify"]
+      }),
+      ImageUpload.configure({ uploadImage, onRequestAlt }),
+      MarkdownPaste,
+      SlashCommand.configure({
+        items: allCommandItems.map(({ id, label }) => ({ id, label })),
+        onShow: ({ query, range, clientRect }) => {
+          if (!clientRect) return;
+          const rect = clientRect();
+          if (!rect) return;
+          setMenuSource("slash");
+          setMenuQuery(query);
+          setMenuRange(range);
+          setMenuInsertPos(null);
+          setMenuPosition({ x: rect.left, y: rect.bottom + 8 });
+          setMenuOpen(true);
+        },
+        onUpdate: ({ query, range, clientRect }) => {
+          if (!clientRect) return;
+          const rect = clientRect();
+          if (!rect) return;
+          setMenuSource("slash");
+          setMenuQuery(query);
+          setMenuRange(range);
+          setMenuInsertPos(null);
+          setMenuPosition({ x: rect.left, y: rect.bottom + 8 });
+          setMenuOpen(true);
+        },
+        onHide: () => closeMenu()
+      }),
+      EmptyLinePlusMenu.configure({
+        onOpen: ({ position, anchorRect }) => {
+          setMenuSource("plus");
+          setMenuQuery("");
+          setMenuRange(null);
+          setMenuInsertPos(position);
+          setMenuPosition({
+            x: anchorRect.left + 24,
+            y: anchorRect.bottom + 6
+          });
+          setMenuOpen(true);
+        }
+      }),
+      EditorShortcuts
+    ],
+    content: initialHtml || "",
+    immediatelyRender: false,
+    // SSR-safe
+    editorProps: {
+      attributes: {
+        class: "blog-tiptap focus:outline-none"
+      }
+    },
+    onUpdate: ({ editor: editor2 }) => {
+      onUpdate(editor2.getHTML());
+    }
+  });
+  useEffect(() => {
+    if (editor && onReady) onReady(editor);
+  }, [editor, onReady]);
+  useEffect(() => {
+    if (!editor) return;
+    if (editor.getHTML() === initialHtml) return;
+    editor.commands.setContent(initialHtml || "", { emitUpdate: false });
+  }, [editor, initialHtml]);
+  useEffect(() => {
+    if (!menuOpen) return;
+    const handlePointerDown = (event) => {
+      const target = event.target;
+      if (target?.closest(".blog-editor-plus-button")) return;
+      if (target?.closest('[role="menu"]')) return;
+      closeMenu();
+    };
+    window.addEventListener("pointerdown", handlePointerDown);
+    return () => window.removeEventListener("pointerdown", handlePointerDown);
+  }, [menuOpen]);
+  useEffect(() => {
+    if (!editor) return;
+    const warningIndexes = new Set(denseParagraphIndexes);
+    const paragraphs = Array.from(
+      editor.view.dom.querySelectorAll("p")
+    );
+    paragraphs.forEach((paragraph, index) => {
+      paragraph.classList.toggle(
+        "blog-density-warning",
+        warningIndexes.has(index)
+      );
+    });
+  }, [denseParagraphIndexes, editor]);
+  const handleImageFileInsert = (event) => {
+    const file = event.target.files?.[0];
+    event.target.value = "";
+    if (!file || !editor) return;
+    const insertPos = pendingImageInsertPos ?? editor.state.selection.from;
+    const storage = editor.storage;
+    storage.imageUpload?.startUpload?.(file, insertPos);
+    setPendingImageInsertPos(null);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: TIPTAP_STYLES }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `${readerModeStyles.readerSurface} ${readerTheme === "quiet" ? readerModeStyles.quiet : readerModeStyles.original}`,
+        style: readingStyleVars,
+        children: /* @__PURE__ */ jsx("div", { className: readerModeStyles.readerMeasure, children: /* @__PURE__ */ jsx(EditorContent, { editor }) })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      EditorCommandMenu,
+      {
+        open: menuOpen,
+        x: menuPosition.x,
+        y: menuPosition.y,
+        items: visibleMenuItems,
+        onSelect: selectCommand
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        accept: "image/*",
+        className: "hidden",
+        onChange: handleImageFileInsert
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ImageAltDialog,
+      {
+        open: altDialogOpen,
+        defaultAlt: pendingFile ? pendingFile.name.replace(/\.[^.]+$/, "") : "",
+        onConfirm: handleAltConfirm,
+        onCancel: handleAltCancel
+      }
+    )
+  ] });
+}
+const TIPTAP_STYLES = `
+.blog-tiptap {
+  outline: none;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  max-width: 100%;
+}
+.blog-tiptap * {
+  max-width: 100%;
+}
+.blog-tiptap > * + * { margin-top: 0.85em; }
+.blog-tiptap p { margin: 0; }
+.blog-tiptap p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  color: var(--reading-muted, var(--text-tertiary));
+  pointer-events: none;
+  float: left;
+  height: 0;
+}
+/* Text alignment from @tiptap/extension-text-align (sets style="text-align:\u2026"
+   on the node, which is fine, but be explicit to support [data-text-align]
+   fallbacks too). */
+.blog-tiptap [data-text-align="left"]   { text-align: left; }
+.blog-tiptap [data-text-align="center"] { text-align: center; }
+.blog-tiptap [data-text-align="right"]  { text-align: right; }
+.blog-tiptap [data-text-align="justify"]{ text-align: justify; }
+.blog-tiptap .blog-density-warning {
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color:
+    color-mix(in oklab, var(--accent-primary, var(--text-link)) 30%, transparent);
+  text-decoration-thickness: 0.1em;
+  text-underline-offset: 0.18em;
+}
+.blog-tiptap .blog-editor-plus-button {
+  position: absolute;
+  left: -2rem;
+  top: 0.25rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 1px solid var(--border-default);
+  background: var(--bg-base);
+  color: var(--text-secondary);
+  border-radius: 999px;
+  opacity: 0;
+  pointer-events: none;
+  cursor: pointer;
+  transition: opacity 120ms ease;
+}
+.blog-tiptap p:hover .blog-editor-plus-button,
+.blog-tiptap .blog-editor-plus-button:focus-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Image upload placeholder (rendered as a widget decoration by the
+   ImageUpload extension while an upload is in flight or has failed). */
+.blog-tiptap-upload-placeholder {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.875rem 1rem;
+  margin: 0.75rem 0;
+  border: 1px dashed var(--border-default);
+  border-radius: 8px;
+  background: var(--bg-muted);
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  user-select: none;
+}
+.blog-tiptap-upload-placeholder[data-status='error'] {
+  border-style: solid;
+  border-color: color-mix(in oklab, var(--color-danger, #dc2626) 50%, transparent);
+  background: color-mix(in oklab, var(--color-danger, #dc2626) 6%, var(--bg-base));
+}
+.blog-tiptap-upload-spinner {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 999px;
+  border: 2px solid color-mix(in oklab, var(--text-secondary) 20%, transparent);
+  border-top-color: var(--text-secondary);
+  animation: blog-tiptap-upload-spin 0.7s linear infinite;
+  flex-shrink: 0;
+}
+@keyframes blog-tiptap-upload-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.blog-tiptap-upload-label {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
+}
+.blog-tiptap-upload-label strong {
+  font-weight: 500;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.blog-tiptap-upload-error-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 999px;
+  background: var(--color-danger, #dc2626);
+  color: #fff;
+  font-weight: 700;
+  font-size: 0.75rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.blog-tiptap-upload-error-message {
+  color: var(--color-danger, #dc2626);
+  font-size: 0.75rem;
+}
+.blog-tiptap-upload-actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+.blog-tiptap-upload-button {
+  appearance: none;
+  border: 1px solid var(--border-default);
+  background: var(--bg-base);
+  color: var(--text-primary);
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 0.375rem 0.75rem;
+  border-radius: 6px;
+  cursor: pointer;
+  transition:
+    background 120ms ease,
+    border-color 120ms ease;
+}
+.blog-tiptap-upload-button:hover {
+  background: var(--bg-muted);
+}
+.blog-tiptap-upload-button--ghost {
+  background: transparent;
+  border-color: transparent;
+  color: var(--text-secondary);
+}
+.blog-tiptap-upload-button--ghost:hover {
+  background: var(--bg-muted);
+  color: var(--text-primary);
+}
+`;
+export {
+  BlogTiptapEditor
+};
+//# sourceMappingURL=BlogTiptapEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/blog-editor/BlogTiptapEditor.tsx"],"sourcesContent":["// The actual Tiptap editor surface. Headless config + `<EditorContent />`,\n// plus the scoped CSS the editor needs (Tailwind preflight strips heading\n// sizes, list styles, blockquote borders, etc., so we restore them here\n// scoped to `.blog-tiptap` only).\n\n'use client';\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { CSSProperties } from 'react';\nimport {\n  Code2,\n  Heading1,\n  Heading2,\n  Heading3,\n  ImagePlus,\n  List,\n  ListOrdered,\n  Minus,\n  Quote,\n} from 'lucide-react';\nimport { EditorContent, useEditor, type Editor } from '@tiptap/react';\nimport type { Range } from '@tiptap/core';\nimport StarterKit from '@tiptap/starter-kit';\nimport Link from '@tiptap/extension-link';\nimport Image from '@tiptap/extension-image';\nimport Placeholder from '@tiptap/extension-placeholder';\nimport Typography from '@tiptap/extension-typography';\nimport Underline from '@tiptap/extension-underline';\nimport CharacterCount from '@tiptap/extension-character-count';\nimport TextAlign from '@tiptap/extension-text-align';\nimport {\n  DEFAULT_BLOG_TYPOGRAPHY,\n  getReadingStyleVariables,\n  normalizeBlogTypography,\n  type BlogTypographySettings,\n  type ReaderTheme,\n} from '@withpotter/lib/blog/density';\nimport readerModeStyles from './reader-mode.module.css';\nimport { ImageUpload, type AltTextResult } from './extensions/image-upload';\nimport { MarkdownPaste } from './extensions/markdown-paste';\nimport { ImageAltDialog } from './panels/ImageAltDialog';\nimport { SlashCommand } from './extensions/slash-command';\nimport { EmptyLinePlusMenu } from './extensions/empty-line-plus-menu';\nimport { EditorShortcuts } from './extensions/editor-shortcuts';\nimport {\n  EditorCommandMenu,\n  type EditorCommandMenuItem,\n} from './menus/EditorCommandMenu';\n\nexport interface BlogTiptapEditorProps {\n  initialHtml: string;\n  onUpdate: (html: string) => void;\n  onReady?: (editor: Editor) => void;\n  uploadImage: (file: File) => Promise<string>;\n  placeholder?: string;\n  readerTheme?: ReaderTheme;\n  typography?: BlogTypographySettings;\n  denseParagraphIndexes?: number[];\n}\n\nexport function BlogTiptapEditor({\n  initialHtml,\n  onUpdate,\n  onReady,\n  uploadImage,\n  placeholder = 'Tell your story…',\n  readerTheme = 'original',\n  typography = DEFAULT_BLOG_TYPOGRAPHY,\n  denseParagraphIndexes = [],\n}: BlogTiptapEditorProps) {\n  // Alt-text dialog state.\n  const [altDialogOpen, setAltDialogOpen] = useState(false);\n  const [pendingFile, setPendingFile] = useState<File | null>(null);\n  const [pendingAltResolver, setPendingAltResolver] = useState<\n    ((result: AltTextResult | null) => void) | null\n  >(null);\n\n  // Called by the ImageUpload extension when a file needs alt text.\n  const onRequestAlt = useCallback(\n    (file: File): Promise<AltTextResult | null> => {\n      return new Promise((resolve) => {\n        setPendingFile(file);\n        setAltDialogOpen(true);\n        setPendingAltResolver(() => resolve);\n      });\n    },\n    [],\n  );\n\n  const handleAltConfirm = useCallback(\n    (result: AltTextResult) => {\n      setAltDialogOpen(false);\n      setPendingFile(null);\n      pendingAltResolver?.(result);\n      setPendingAltResolver(null);\n    },\n    [pendingAltResolver],\n  );\n\n  const handleAltCancel = useCallback(() => {\n    setAltDialogOpen(false);\n    setPendingFile(null);\n    pendingAltResolver?.(null);\n    setPendingAltResolver(null);\n  }, [pendingAltResolver]);\n\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const [menuOpen, setMenuOpen] = useState(false);\n  const [menuSource, setMenuSource] = useState<'slash' | 'plus'>('slash');\n  const [menuQuery, setMenuQuery] = useState('');\n  const [menuRange, setMenuRange] = useState<Range | null>(null);\n  const [menuInsertPos, setMenuInsertPos] = useState<number | null>(null);\n  const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });\n  const [pendingImageInsertPos, setPendingImageInsertPos] = useState<\n    number | null\n  >(null);\n\n  const allCommandItems = useMemo<EditorCommandMenuItem[]>(\n    () => [\n      {\n        id: 'heading-1',\n        label: 'Heading 1',\n        icon: <Heading1 className=\"w-4 h-4\" />,\n      },\n      {\n        id: 'heading-2',\n        label: 'Heading 2',\n        icon: <Heading2 className=\"w-4 h-4\" />,\n      },\n      {\n        id: 'heading-3',\n        label: 'Heading 3',\n        icon: <Heading3 className=\"w-4 h-4\" />,\n      },\n      {\n        id: 'bullet-list',\n        label: 'Bullet list',\n        icon: <List className=\"w-4 h-4\" />,\n      },\n      {\n        id: 'ordered-list',\n        label: 'Numbered list',\n        icon: <ListOrdered className=\"w-4 h-4\" />,\n      },\n      { id: 'quote', label: 'Quote', icon: <Quote className=\"w-4 h-4\" /> },\n      {\n        id: 'code-block',\n        label: 'Code block',\n        icon: <Code2 className=\"w-4 h-4\" />,\n      },\n      { id: 'image', label: 'Image', icon: <ImagePlus className=\"w-4 h-4\" /> },\n      { id: 'divider', label: 'Divider', icon: <Minus className=\"w-4 h-4\" /> },\n    ],\n    [],\n  );\n\n  const visibleMenuItems = useMemo(() => {\n    const sourceItems =\n      menuSource === 'plus'\n        ? allCommandItems.filter(\n            (item) => item.id === 'image' || item.id === 'divider',\n          )\n        : allCommandItems;\n    const normalized = menuQuery.trim().toLowerCase();\n    if (!normalized) return sourceItems;\n    return sourceItems.filter((item) =>\n      item.label.toLowerCase().includes(normalized),\n    );\n  }, [allCommandItems, menuQuery, menuSource]);\n\n  const normalizedTypography = useMemo(\n    () => normalizeBlogTypography(typography),\n    [typography],\n  );\n  const readingStyleVars = useMemo(\n    () => getReadingStyleVariables(normalizedTypography) as CSSProperties,\n    [normalizedTypography],\n  );\n\n  const closeMenu = () => {\n    setMenuOpen(false);\n    setMenuRange(null);\n    setMenuInsertPos(null);\n    setMenuQuery('');\n  };\n\n  const selectCommand = (item: EditorCommandMenuItem) => {\n    if (!editor) return;\n    const chain =\n      menuInsertPos === null\n        ? editor.chain().focus()\n        : editor.chain().focus(menuInsertPos);\n\n    if (menuRange) {\n      chain.deleteRange(menuRange);\n    }\n\n    switch (item.id) {\n      case 'heading-1':\n        chain.toggleHeading({ level: 1 }).run();\n        break;\n      case 'heading-2':\n        chain.toggleHeading({ level: 2 }).run();\n        break;\n      case 'heading-3':\n        chain.toggleHeading({ level: 3 }).run();\n        break;\n      case 'bullet-list':\n        chain.toggleBulletList().run();\n        break;\n      case 'ordered-list':\n        chain.toggleOrderedList().run();\n        break;\n      case 'quote':\n        chain.toggleBlockquote().run();\n        break;\n      case 'code-block':\n        chain.toggleCodeBlock().run();\n        break;\n      case 'divider':\n        chain.setHorizontalRule().run();\n        break;\n      case 'image':\n        setPendingImageInsertPos(\n          menuSource === 'plus'\n            ? (menuInsertPos ?? editor.state.selection.from)\n            : (menuRange?.from ?? editor.state.selection.from),\n        );\n        fileInputRef.current?.click();\n        break;\n      default:\n        break;\n    }\n\n    closeMenu();\n  };\n\n  const editor = useEditor({\n    extensions: [\n      StarterKit.configure({\n        heading: { levels: [1, 2, 3] },\n        link: false, // use the standalone Link extension below\n      }),\n      Underline,\n      Link.configure({\n        openOnClick: false,\n        HTMLAttributes: { rel: 'noopener noreferrer', target: '_blank' },\n      }),\n      // loading=\"lazy\" and decoding=\"async\" are added to every rendered <img>\n      // via HTMLAttributes so that published HTML meets the a11y / performance spec.\n      Image.configure({\n        inline: false,\n        allowBase64: false,\n        HTMLAttributes: { loading: 'lazy', decoding: 'async' },\n      }),\n      Typography,\n      Placeholder.configure({ placeholder }),\n      CharacterCount,\n      TextAlign.configure({\n        types: ['heading', 'paragraph'],\n        alignments: ['left', 'center', 'right', 'justify'],\n      }),\n      ImageUpload.configure({ uploadImage, onRequestAlt }),\n      MarkdownPaste,\n      SlashCommand.configure({\n        items: allCommandItems.map(({ id, label }) => ({ id, label })),\n        onShow: ({ query, range, clientRect }) => {\n          if (!clientRect) return;\n          const rect = clientRect();\n          if (!rect) return;\n          setMenuSource('slash');\n          setMenuQuery(query);\n          setMenuRange(range);\n          setMenuInsertPos(null);\n          setMenuPosition({ x: rect.left, y: rect.bottom + 8 });\n          setMenuOpen(true);\n        },\n        onUpdate: ({ query, range, clientRect }) => {\n          if (!clientRect) return;\n          const rect = clientRect();\n          if (!rect) return;\n          setMenuSource('slash');\n          setMenuQuery(query);\n          setMenuRange(range);\n          setMenuInsertPos(null);\n          setMenuPosition({ x: rect.left, y: rect.bottom + 8 });\n          setMenuOpen(true);\n        },\n        onHide: () => closeMenu(),\n      }),\n      EmptyLinePlusMenu.configure({\n        onOpen: ({ position, anchorRect }) => {\n          setMenuSource('plus');\n          setMenuQuery('');\n          setMenuRange(null);\n          setMenuInsertPos(position);\n          setMenuPosition({\n            x: anchorRect.left + 24,\n            y: anchorRect.bottom + 6,\n          });\n          setMenuOpen(true);\n        },\n      }),\n      EditorShortcuts,\n    ],\n    content: initialHtml || '',\n    immediatelyRender: false, // SSR-safe\n    editorProps: {\n      attributes: {\n        class: 'blog-tiptap focus:outline-none',\n      },\n    },\n    onUpdate: ({ editor }) => {\n      onUpdate(editor.getHTML());\n    },\n  });\n\n  // Surface the editor instance to parents (toolbars, command palette).\n  useEffect(() => {\n    if (editor && onReady) onReady(editor);\n  }, [editor, onReady]);\n\n  // Keep editor content in sync if the parent replaces it (e.g. after load).\n  useEffect(() => {\n    if (!editor) return;\n    if (editor.getHTML() === initialHtml) return;\n    editor.commands.setContent(initialHtml || '', { emitUpdate: false });\n  }, [editor, initialHtml]);\n\n  useEffect(() => {\n    if (!menuOpen) return;\n    const handlePointerDown = (event: PointerEvent) => {\n      const target = event.target as Element | null;\n      if (target?.closest('.blog-editor-plus-button')) return;\n      if (target?.closest('[role=\"menu\"]')) return;\n      closeMenu();\n    };\n    window.addEventListener('pointerdown', handlePointerDown);\n    return () => window.removeEventListener('pointerdown', handlePointerDown);\n  }, [menuOpen]);\n\n  useEffect(() => {\n    if (!editor) return;\n\n    const warningIndexes = new Set(denseParagraphIndexes);\n    const paragraphs = Array.from(\n      editor.view.dom.querySelectorAll<HTMLParagraphElement>('p'),\n    );\n\n    paragraphs.forEach((paragraph, index) => {\n      paragraph.classList.toggle(\n        'blog-density-warning',\n        warningIndexes.has(index),\n      );\n    });\n  }, [denseParagraphIndexes, editor]);\n\n  const handleImageFileInsert = (\n    event: React.ChangeEvent<HTMLInputElement>,\n  ) => {\n    const file = event.target.files?.[0];\n    event.target.value = '';\n    if (!file || !editor) return;\n\n    const insertPos = pendingImageInsertPos ?? editor.state.selection.from;\n    // The ImageUpload extension renders the in-flight placeholder + retry/remove\n    // error UI for us; we just kick off the upload here.\n    const storage = editor.storage as unknown as {\n      imageUpload?: { startUpload?: (file: File, pos?: number) => void };\n    };\n    storage.imageUpload?.startUpload?.(file, insertPos);\n    setPendingImageInsertPos(null);\n  };\n\n  return (\n    <>\n      <style>{TIPTAP_STYLES}</style>\n      <div\n        className={`${readerModeStyles.readerSurface} ${\n          readerTheme === 'quiet'\n            ? readerModeStyles.quiet\n            : readerModeStyles.original\n        }`}\n        style={readingStyleVars}\n      >\n        <div className={readerModeStyles.readerMeasure}>\n          <EditorContent editor={editor} />\n        </div>\n      </div>\n      <EditorCommandMenu\n        open={menuOpen}\n        x={menuPosition.x}\n        y={menuPosition.y}\n        items={visibleMenuItems}\n        onSelect={selectCommand}\n      />\n      <input\n        ref={fileInputRef}\n        type=\"file\"\n        accept=\"image/*\"\n        className=\"hidden\"\n        onChange={handleImageFileInsert}\n      />\n      <ImageAltDialog\n        open={altDialogOpen}\n        defaultAlt={pendingFile ? pendingFile.name.replace(/\\.[^.]+$/, '') : ''}\n        onConfirm={handleAltConfirm}\n        onCancel={handleAltCancel}\n      />\n    </>\n  );\n}\n\n// Scoped to `.blog-tiptap` so it can never affect the rest of the dashboard.\nconst TIPTAP_STYLES = `\n.blog-tiptap {\n  outline: none;\n  overflow-wrap: anywhere;\n  word-break: break-word;\n  max-width: 100%;\n}\n.blog-tiptap * {\n  max-width: 100%;\n}\n.blog-tiptap > * + * { margin-top: 0.85em; }\n.blog-tiptap p { margin: 0; }\n.blog-tiptap p.is-editor-empty:first-child::before {\n  content: attr(data-placeholder);\n  color: var(--reading-muted, var(--text-tertiary));\n  pointer-events: none;\n  float: left;\n  height: 0;\n}\n/* Text alignment from @tiptap/extension-text-align (sets style=\"text-align:…\"\n   on the node, which is fine, but be explicit to support [data-text-align]\n   fallbacks too). */\n.blog-tiptap [data-text-align=\"left\"]   { text-align: left; }\n.blog-tiptap [data-text-align=\"center\"] { text-align: center; }\n.blog-tiptap [data-text-align=\"right\"]  { text-align: right; }\n.blog-tiptap [data-text-align=\"justify\"]{ text-align: justify; }\n.blog-tiptap .blog-density-warning {\n  text-decoration-line: underline;\n  text-decoration-style: wavy;\n  text-decoration-color:\n    color-mix(in oklab, var(--accent-primary, var(--text-link)) 30%, transparent);\n  text-decoration-thickness: 0.1em;\n  text-underline-offset: 0.18em;\n}\n.blog-tiptap .blog-editor-plus-button {\n  position: absolute;\n  left: -2rem;\n  top: 0.25rem;\n  width: 1.5rem;\n  height: 1.5rem;\n  border: 1px solid var(--border-default);\n  background: var(--bg-base);\n  color: var(--text-secondary);\n  border-radius: 999px;\n  opacity: 0;\n  pointer-events: none;\n  cursor: pointer;\n  transition: opacity 120ms ease;\n}\n.blog-tiptap p:hover .blog-editor-plus-button,\n.blog-tiptap .blog-editor-plus-button:focus-visible {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* Image upload placeholder (rendered as a widget decoration by the\n   ImageUpload extension while an upload is in flight or has failed). */\n.blog-tiptap-upload-placeholder {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.875rem 1rem;\n  margin: 0.75rem 0;\n  border: 1px dashed var(--border-default);\n  border-radius: 8px;\n  background: var(--bg-muted);\n  color: var(--text-secondary);\n  font-size: 0.875rem;\n  user-select: none;\n}\n.blog-tiptap-upload-placeholder[data-status='error'] {\n  border-style: solid;\n  border-color: color-mix(in oklab, var(--color-danger, #dc2626) 50%, transparent);\n  background: color-mix(in oklab, var(--color-danger, #dc2626) 6%, var(--bg-base));\n}\n.blog-tiptap-upload-spinner {\n  width: 1rem;\n  height: 1rem;\n  border-radius: 999px;\n  border: 2px solid color-mix(in oklab, var(--text-secondary) 20%, transparent);\n  border-top-color: var(--text-secondary);\n  animation: blog-tiptap-upload-spin 0.7s linear infinite;\n  flex-shrink: 0;\n}\n@keyframes blog-tiptap-upload-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.blog-tiptap-upload-label {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n  min-width: 0;\n}\n.blog-tiptap-upload-label strong {\n  font-weight: 500;\n  color: var(--text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.blog-tiptap-upload-error-icon {\n  width: 1.25rem;\n  height: 1.25rem;\n  border-radius: 999px;\n  background: var(--color-danger, #dc2626);\n  color: #fff;\n  font-weight: 700;\n  font-size: 0.75rem;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n.blog-tiptap-upload-error-message {\n  color: var(--color-danger, #dc2626);\n  font-size: 0.75rem;\n}\n.blog-tiptap-upload-actions {\n  display: flex;\n  gap: 0.5rem;\n  flex-shrink: 0;\n}\n.blog-tiptap-upload-button {\n  appearance: none;\n  border: 1px solid var(--border-default);\n  background: var(--bg-base);\n  color: var(--text-primary);\n  font-size: 0.75rem;\n  font-weight: 500;\n  padding: 0.375rem 0.75rem;\n  border-radius: 6px;\n  cursor: pointer;\n  transition:\n    background 120ms ease,\n    border-color 120ms ease;\n}\n.blog-tiptap-upload-button:hover {\n  background: var(--bg-muted);\n}\n.blog-tiptap-upload-button--ghost {\n  background: transparent;\n  border-color: transparent;\n  color: var(--text-secondary);\n}\n.blog-tiptap-upload-button--ghost:hover {\n  background: var(--bg-muted);\n  color: var(--text-primary);\n}\n`;\n"],"mappings":"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AAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":["editor"]}

package/dist/blog-editor/extensions/editor-shortcuts.d.ts

@@ -0,0 +1,3 @@
+import { Extension } from '@tiptap/core';
+export declare const OPEN_LINK_MODAL_EVENT = "blog-editor-open-link-modal";
+export declare const EditorShortcuts: Extension<any, any>;

package/dist/blog-editor/extensions/editor-shortcuts.js

@@ -0,0 +1,20 @@
+import { Extension } from "@tiptap/core";
+const OPEN_LINK_MODAL_EVENT = "blog-editor-open-link-modal";
+const EditorShortcuts = Extension.create({
+  name: "editorShortcuts",
+  addKeyboardShortcuts() {
+    return {
+      "Mod-k": () => {
+        window.dispatchEvent(new CustomEvent(OPEN_LINK_MODAL_EVENT));
+        return true;
+      },
+      "Mod-Shift-7": () => this.editor.chain().focus().toggleOrderedList().run(),
+      "Mod-Shift-8": () => this.editor.chain().focus().toggleBulletList().run()
+    };
+  }
+});
+export {
+  EditorShortcuts,
+  OPEN_LINK_MODAL_EVENT
+};
+//# sourceMappingURL=editor-shortcuts.js.map

package/dist/blog-editor/extensions/editor-shortcuts.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blog-editor/extensions/editor-shortcuts.ts"],"sourcesContent":["import { Extension } from '@tiptap/core'\n// Load StarterKit's chained-command type augmentations (toggleBulletList, …)\n// so this file's standalone .d.ts build resolves them; erased at emit.\nimport type {} from '@tiptap/starter-kit'\n\nexport const OPEN_LINK_MODAL_EVENT = 'blog-editor-open-link-modal'\n\nexport const EditorShortcuts = Extension.create({\n  name: 'editorShortcuts',\n\n  addKeyboardShortcuts() {\n    return {\n      'Mod-k': () => {\n        window.dispatchEvent(new CustomEvent(OPEN_LINK_MODAL_EVENT))\n        return true\n      },\n      'Mod-Shift-7': () => this.editor.chain().focus().toggleOrderedList().run(),\n      'Mod-Shift-8': () => this.editor.chain().focus().toggleBulletList().run(),\n    }\n  },\n})\n"],"mappings":"AAAA,SAAS,iBAAiB;AAKnB,MAAM,wBAAwB;AAE9B,MAAM,kBAAkB,UAAU,OAAO;AAAA,EAC9C,MAAM;AAAA,EAEN,uBAAuB;AACrB,WAAO;AAAA,MACL,SAAS,MAAM;AACb,eAAO,cAAc,IAAI,YAAY,qBAAqB,CAAC;AAC3D,eAAO;AAAA,MACT;AAAA,MACA,eAAe,MAAM,KAAK,OAAO,MAAM,EAAE,MAAM,EAAE,kBAAkB,EAAE,IAAI;AAAA,MACzE,eAAe,MAAM,KAAK,OAAO,MAAM,EAAE,MAAM,EAAE,iBAAiB,EAAE,IAAI;AAAA,IAC1E;AAAA,EACF;AACF,CAAC;","names":[]}

package/dist/blog-editor/extensions/empty-line-plus-menu.d.ts

@@ -0,0 +1,9 @@
+import { Extension } from '@tiptap/core';
+interface EmptyLinePlusMenuOptions {
+    onOpen: (props: {
+        position: number;
+        anchorRect: DOMRect;
+    }) => void;
+}
+export declare const EmptyLinePlusMenu: Extension<EmptyLinePlusMenuOptions, any>;
+export {};

package/dist/blog-editor/extensions/empty-line-plus-menu.js

@@ -0,0 +1,57 @@
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+const EmptyLinePlusMenu = Extension.create({
+  name: "emptyLinePlusMenu",
+  addOptions() {
+    return {
+      onOpen: () => void 0
+    };
+  },
+  addProseMirrorPlugins() {
+    const onOpen = this.options.onOpen;
+    return [
+      new Plugin({
+        key: new PluginKey("emptyLinePlusMenu"),
+        props: {
+          decorations: (state) => {
+            const decorations = [];
+            state.doc.descendants((node, pos) => {
+              if (node.type.name !== "paragraph" || node.content.size !== 0) {
+                return;
+              }
+              const widget = Decoration.widget(
+                pos + 1,
+                () => {
+                  const button = document.createElement("button");
+                  button.type = "button";
+                  button.contentEditable = "false";
+                  button.setAttribute("aria-label", "Insert block");
+                  button.className = "blog-editor-plus-button";
+                  button.textContent = "+";
+                  button.addEventListener("mousedown", (event) => {
+                    event.preventDefault();
+                    onOpen({
+                      position: pos + 1,
+                      anchorRect: button.getBoundingClientRect()
+                    });
+                  });
+                  return button;
+                },
+                {
+                  side: -1
+                }
+              );
+              decorations.push(widget);
+            });
+            return DecorationSet.create(state.doc, decorations);
+          }
+        }
+      })
+    ];
+  }
+});
+export {
+  EmptyLinePlusMenu
+};
+//# sourceMappingURL=empty-line-plus-menu.js.map

package/dist/blog-editor/extensions/empty-line-plus-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blog-editor/extensions/empty-line-plus-menu.ts"],"sourcesContent":["import { Extension } from '@tiptap/core';\nimport { Plugin, PluginKey } from '@tiptap/pm/state';\nimport { Decoration, DecorationSet } from '@tiptap/pm/view';\n\ninterface EmptyLinePlusMenuOptions {\n  onOpen: (props: { position: number; anchorRect: DOMRect }) => void;\n}\n\nexport const EmptyLinePlusMenu = Extension.create<EmptyLinePlusMenuOptions>({\n  name: 'emptyLinePlusMenu',\n\n  addOptions() {\n    return {\n      onOpen: () => undefined,\n    };\n  },\n\n  addProseMirrorPlugins() {\n    const onOpen = this.options.onOpen;\n\n    return [\n      new Plugin({\n        key: new PluginKey('emptyLinePlusMenu'),\n        props: {\n          decorations: (state) => {\n            const decorations: Decoration[] = [];\n\n            state.doc.descendants((node, pos) => {\n              if (node.type.name !== 'paragraph' || node.content.size !== 0) {\n                return;\n              }\n\n              const widget = Decoration.widget(\n                pos + 1,\n                () => {\n                  const button = document.createElement('button');\n                  button.type = 'button';\n                  button.contentEditable = 'false';\n                  button.setAttribute('aria-label', 'Insert block');\n                  button.className = 'blog-editor-plus-button';\n                  button.textContent = '+';\n\n                  button.addEventListener('mousedown', (event) => {\n                    event.preventDefault();\n                    onOpen({\n                      position: pos + 1,\n                      anchorRect: button.getBoundingClientRect(),\n                    });\n                  });\n\n                  return button;\n                },\n                {\n                  side: -1,\n                },\n              );\n\n              decorations.push(widget);\n            });\n\n            return DecorationSet.create(state.doc, decorations);\n          },\n        },\n      }),\n    ];\n  },\n});\n"],"mappings":"AAAA,SAAS,iBAAiB;AAC1B,SAAS,QAAQ,iBAAiB;AAClC,SAAS,YAAY,qBAAqB;AAMnC,MAAM,oBAAoB,UAAU,OAAiC;AAAA,EAC1E,MAAM;AAAA,EAEN,aAAa;AACX,WAAO;AAAA,MACL,QAAQ,MAAM;AAAA,IAChB;AAAA,EACF;AAAA,EAEA,wBAAwB;AACtB,UAAM,SAAS,KAAK,QAAQ;AAE5B,WAAO;AAAA,MACL,IAAI,OAAO;AAAA,QACT,KAAK,IAAI,UAAU,mBAAmB;AAAA,QACtC,OAAO;AAAA,UACL,aAAa,CAAC,UAAU;AACtB,kBAAM,cAA4B,CAAC;AAEnC,kBAAM,IAAI,YAAY,CAAC,MAAM,QAAQ;AACnC,kBAAI,KAAK,KAAK,SAAS,eAAe,KAAK,QAAQ,SAAS,GAAG;AAC7D;AAAA,cACF;AAEA,oBAAM,SAAS,WAAW;AAAA,gBACxB,MAAM;AAAA,gBACN,MAAM;AACJ,wBAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,yBAAO,OAAO;AACd,yBAAO,kBAAkB;AACzB,yBAAO,aAAa,cAAc,cAAc;AAChD,yBAAO,YAAY;AACnB,yBAAO,cAAc;AAErB,yBAAO,iBAAiB,aAAa,CAAC,UAAU;AAC9C,0BAAM,eAAe;AACrB,2BAAO;AAAA,sBACL,UAAU,MAAM;AAAA,sBAChB,YAAY,OAAO,sBAAsB;AAAA,oBAC3C,CAAC;AAAA,kBACH,CAAC;AAED,yBAAO;AAAA,gBACT;AAAA,gBACA;AAAA,kBACE,MAAM;AAAA,gBACR;AAAA,cACF;AAEA,0BAAY,KAAK,MAAM;AAAA,YACzB,CAAC;AAED,mBAAO,cAAc,OAAO,MAAM,KAAK,WAAW;AAAA,UACpD;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AACF,CAAC;","names":[]}