next-blogpanel 1.0.0

package/dist/editor/index.js

@@ -0,0 +1,1093 @@
+"use client";
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { useEditor, BubbleMenu, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import Placeholder from '@tiptap/extension-placeholder';
+import Link from '@tiptap/extension-link';
+import Underline from '@tiptap/extension-underline';
+import Highlight from '@tiptap/extension-highlight';
+import Typography from '@tiptap/extension-typography';
+import TaskList from '@tiptap/extension-task-list';
+import TaskItem from '@tiptap/extension-task-item';
+import Table from '@tiptap/extension-table';
+import TableRow from '@tiptap/extension-table-row';
+import TableCell from '@tiptap/extension-table-cell';
+import TableHeader from '@tiptap/extension-table-header';
+import { Image } from '@tiptap/extension-image';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { Node, mergeAttributes, Extension } from '@tiptap/core';
+import CodeBlockLowlight from '@tiptap/extension-code-block';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/editor/Editor.tsx
+var DEFAULT_MAX_UPLOAD_SIZE = 10 * 1024 * 1024;
+
+// src/editor/extensions/image-upload.ts
+var ImageUpload = Image.extend({
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      uploadFn: async (_file) => ({ url: "" }),
+      maxSize: DEFAULT_MAX_UPLOAD_SIZE,
+      // the ingest ceiling, NOT maxImageSize — see src/lib/limits.ts
+      allowedTypes: ["image/jpeg", "image/png", "image/gif", "image/webp", "image/svg+xml"]
+    };
+  },
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      loading: {
+        default: false,
+        renderHTML: (attributes) => {
+          if (!attributes.loading) return {};
+          return { "data-loading": "true" };
+        }
+      },
+      width: { default: null },
+      height: { default: null },
+      caption: {
+        default: null,
+        renderHTML: (attributes) => {
+          if (!attributes.caption) return {};
+          return { "data-caption": attributes.caption };
+        }
+      }
+    };
+  },
+  addCommands() {
+    return {
+      ...this.parent?.(),
+      uploadImage: (file) => ({ commands, editor }) => {
+        const opts = this.options;
+        const { uploadFn, maxSize, allowedTypes } = opts;
+        if (maxSize && file.size > maxSize) {
+          console.error(`File too large: ${file.size} > ${maxSize}`);
+          return false;
+        }
+        if (allowedTypes && !allowedTypes.includes(file.type)) {
+          console.error(`File type not allowed: ${file.type}`);
+          return false;
+        }
+        const placeholderUrl = URL.createObjectURL(file);
+        commands.insertContent({
+          type: "image",
+          attrs: { src: placeholderUrl, loading: true, alt: file.name }
+        });
+        uploadFn(file).then((result) => {
+          const { state } = editor;
+          const { doc } = state;
+          let pos = null;
+          doc.descendants((node, nodePos) => {
+            if (node.type.name === "image" && node.attrs.src === placeholderUrl) {
+              pos = nodePos;
+              return false;
+            }
+          });
+          if (pos !== null) {
+            editor.chain().focus().setNodeSelection(pos).updateAttributes("image", {
+              src: result.url,
+              alt: result.alt || file.name,
+              loading: false
+            }).run();
+          }
+          URL.revokeObjectURL(placeholderUrl);
+        }).catch((err) => {
+          console.error("Image upload failed:", err);
+          URL.revokeObjectURL(placeholderUrl);
+        });
+        return true;
+      }
+    };
+  },
+  addProseMirrorPlugins() {
+    const opts = this.options;
+    const { maxSize, allowedTypes } = opts;
+    const editorRef = this.editor;
+    return [
+      new Plugin({
+        key: new PluginKey("imageUploadDrop"),
+        props: {
+          handleDOMEvents: {
+            drop(view, event) {
+              const files = event.dataTransfer?.files;
+              if (!files || files.length === 0) return false;
+              const imageFiles = Array.from(files).filter(
+                (f) => (allowedTypes || []).includes(f.type)
+              );
+              if (imageFiles.length === 0) return false;
+              event.preventDefault();
+              for (const file of imageFiles) {
+                if (maxSize && file.size > maxSize) continue;
+                editorRef.commands.uploadImage(file);
+              }
+              return true;
+            },
+            paste(view, event) {
+              const files = event.clipboardData?.files;
+              if (!files || files.length === 0) return false;
+              const imageFiles = Array.from(files).filter(
+                (f) => (allowedTypes || []).includes(f.type)
+              );
+              if (imageFiles.length === 0) return false;
+              event.preventDefault();
+              for (const file of imageFiles) {
+                if (maxSize && file.size > maxSize) continue;
+                editorRef.commands.uploadImage(file);
+              }
+              return true;
+            }
+          }
+        }
+      })
+    ];
+  }
+});
+var Callout = Node.create({
+  name: "callout",
+  group: "block",
+  content: "block+",
+  defining: true,
+  addAttributes() {
+    return {
+      type: {
+        default: "info",
+        parseHTML: (element) => element.getAttribute("data-callout-type") || "info",
+        renderHTML: (attributes) => ({
+          "data-callout-type": attributes.type
+        })
+      }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "div[data-callout]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "div",
+      mergeAttributes(HTMLAttributes, { "data-callout": "", class: `nbp-callout nbp-callout-${HTMLAttributes["data-callout-type"] || "info"}` }),
+      0
+    ];
+  },
+  addCommands() {
+    return {
+      setCallout: (attrs) => ({ commands }) => {
+        return commands.wrapIn(this.name, attrs);
+      },
+      toggleCallout: (attrs) => ({ commands }) => {
+        return commands.toggleWrap(this.name, attrs);
+      }
+    };
+  }
+});
+var FAQItem = Node.create({
+  name: "faqItem",
+  group: "block",
+  content: "faqQuestion faqAnswer",
+  defining: true,
+  parseHTML() {
+    return [{ tag: "div[data-faq-item]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes(HTMLAttributes, { "data-faq-item": "", class: "nbp-faq-item" }), 0];
+  }
+});
+var FAQQuestion = Node.create({
+  name: "faqQuestion",
+  content: "inline*",
+  defining: true,
+  parseHTML() {
+    return [{ tag: "div[data-faq-question]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes(HTMLAttributes, { "data-faq-question": "", class: "nbp-faq-question" }), 0];
+  }
+});
+var FAQAnswer = Node.create({
+  name: "faqAnswer",
+  content: "block+",
+  defining: true,
+  parseHTML() {
+    return [{ tag: "div[data-faq-answer]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes(HTMLAttributes, { "data-faq-answer": "", class: "nbp-faq-answer" }), 0];
+  }
+});
+var FAQ = Node.create({
+  name: "faq",
+  group: "block",
+  content: "faqItem+",
+  defining: true,
+  parseHTML() {
+    return [{ tag: "div[data-faq]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes(HTMLAttributes, { "data-faq": "", class: "nbp-faq" }), 0];
+  },
+  addCommands() {
+    return {
+      insertFAQ: () => ({ chain }) => {
+        return chain().insertContent({
+          type: "faq",
+          content: [
+            {
+              type: "faqItem",
+              content: [
+                { type: "faqQuestion", content: [{ type: "text", text: "Question?" }] },
+                { type: "faqAnswer", content: [{ type: "paragraph", content: [{ type: "text", text: "Answer." }] }] }
+              ]
+            }
+          ]
+        }).run();
+      }
+    };
+  }
+});
+var TableOfContents = Node.create({
+  name: "tableOfContents",
+  group: "block",
+  atom: true,
+  parseHTML() {
+    return [{ tag: "div[data-toc]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "div",
+      mergeAttributes(HTMLAttributes, {
+        "data-toc": "",
+        class: "nbp-toc-placeholder"
+      }),
+      "Table of Contents (auto-generated)"
+    ];
+  },
+  addCommands() {
+    return {
+      insertTableOfContents: () => ({ commands }) => {
+        return commands.insertContent({ type: this.name });
+      }
+    };
+  }
+});
+var CodeBlockEnhanced = CodeBlockLowlight.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      language: {
+        default: "plaintext",
+        parseHTML: (element) => element.getAttribute("data-language") || element.querySelector("code")?.className?.replace("language-", "") || "plaintext",
+        renderHTML: (attributes) => ({
+          "data-language": attributes.language
+        })
+      },
+      filename: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-filename"),
+        renderHTML: (attributes) => {
+          if (!attributes.filename) return {};
+          return { "data-filename": attributes.filename };
+        }
+      }
+    };
+  }
+});
+var SUPPORTED_LANGUAGES = [
+  "plaintext",
+  "javascript",
+  "typescript",
+  "jsx",
+  "tsx",
+  "html",
+  "css",
+  "scss",
+  "json",
+  "python",
+  "rust",
+  "go",
+  "java",
+  "kotlin",
+  "swift",
+  "ruby",
+  "php",
+  "c",
+  "cpp",
+  "csharp",
+  "sql",
+  "bash",
+  "shell",
+  "yaml",
+  "toml",
+  "markdown",
+  "graphql",
+  "docker",
+  "nginx"
+];
+var defaultSlashCommands = [
+  {
+    title: "Heading 2",
+    description: "Large section heading",
+    icon: "H2",
+    command: (editor) => editor.chain().focus().toggleHeading({ level: 2 }).run()
+  },
+  {
+    title: "Heading 3",
+    description: "Medium section heading",
+    icon: "H3",
+    command: (editor) => editor.chain().focus().toggleHeading({ level: 3 }).run()
+  },
+  {
+    title: "Heading 4",
+    description: "Small section heading",
+    icon: "H4",
+    command: (editor) => editor.chain().focus().toggleHeading({ level: 4 }).run()
+  },
+  {
+    title: "Bullet List",
+    description: "Create a simple bullet list",
+    icon: "\u2022",
+    command: (editor) => editor.chain().focus().toggleBulletList().run()
+  },
+  {
+    title: "Numbered List",
+    description: "Create a numbered list",
+    icon: "1.",
+    command: (editor) => editor.chain().focus().toggleOrderedList().run()
+  },
+  {
+    title: "Task List",
+    description: "Create a checklist",
+    icon: "\u2611",
+    command: (editor) => editor.chain().focus().toggleTaskList().run()
+  },
+  {
+    title: "Blockquote",
+    description: "Add a quote block",
+    icon: '"',
+    command: (editor) => editor.chain().focus().toggleBlockquote().run()
+  },
+  {
+    title: "Code Block",
+    description: "Add a code snippet",
+    icon: "</>",
+    command: (editor) => editor.chain().focus().toggleCodeBlock().run()
+  },
+  {
+    title: "Divider",
+    description: "Add a horizontal divider",
+    icon: "\u2014",
+    command: (editor) => editor.chain().focus().setHorizontalRule().run()
+  },
+  {
+    title: "Image",
+    description: "Upload or embed an image",
+    icon: "\u{1F5BC}",
+    command: (editor) => {
+      const input = document.createElement("input");
+      input.type = "file";
+      input.accept = "image/*";
+      input.onchange = () => {
+        const file = input.files?.[0];
+        if (file) {
+          editor.commands.uploadImage(file);
+        }
+      };
+      input.click();
+    }
+  },
+  {
+    title: "Table",
+    description: "Add a table",
+    icon: "\u229E",
+    command: (editor) => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
+  },
+  {
+    title: "Callout",
+    description: "Add an info callout box",
+    icon: "\u2139",
+    command: (editor) => editor.chain().focus().setCallout({ type: "info" }).run()
+  },
+  {
+    title: "FAQ",
+    description: "Add a FAQ section",
+    icon: "?",
+    command: (editor) => editor.chain().focus().insertFAQ().run()
+  },
+  {
+    title: "Table of Contents",
+    description: "Auto-generated from headings",
+    icon: "\u2261",
+    command: (editor) => editor.chain().focus().insertTableOfContents().run()
+  }
+];
+var SlashCommand = Extension.create({
+  name: "slashCommand",
+  addOptions() {
+    return {
+      commands: defaultSlashCommands,
+      onStateChange: (_state) => {
+      }
+    };
+  },
+  addStorage() {
+    return {
+      deleteSlashAndRun: (_item) => {
+      }
+    };
+  },
+  addProseMirrorPlugins() {
+    const { commands, onStateChange } = this.options;
+    const editorRef = this.editor;
+    const storage = this.editor.storage.slashCommand;
+    let state = {
+      isOpen: false,
+      query: "",
+      position: null,
+      selectedIndex: 0,
+      items: commands
+    };
+    function updateState(partial) {
+      state = { ...state, ...partial };
+      onStateChange(state);
+    }
+    function deleteSlashText(view) {
+      const { $from } = view.state.selection;
+      const textBefore = $from.parent.textContent.slice(0, $from.parentOffset);
+      const slashIndex = textBefore.lastIndexOf("/");
+      if (slashIndex >= 0) {
+        const start = $from.start() + slashIndex;
+        const end = $from.pos;
+        view.dispatch(view.state.tr.delete(start, end));
+      }
+    }
+    storage.deleteSlashAndRun = (item) => {
+      deleteSlashText(editorRef.view);
+      item.command(editorRef);
+      updateState({ isOpen: false, query: "", selectedIndex: 0 });
+    };
+    return [
+      new Plugin({
+        key: new PluginKey("slashCommand"),
+        props: {
+          handleKeyDown(view, event) {
+            if (!state.isOpen) {
+              return false;
+            }
+            if (event.key === "ArrowDown") {
+              event.preventDefault();
+              updateState({
+                selectedIndex: (state.selectedIndex + 1) % state.items.length
+              });
+              return true;
+            }
+            if (event.key === "ArrowUp") {
+              event.preventDefault();
+              updateState({
+                selectedIndex: (state.selectedIndex - 1 + state.items.length) % state.items.length
+              });
+              return true;
+            }
+            if (event.key === "Enter") {
+              event.preventDefault();
+              const item = state.items[state.selectedIndex];
+              if (item) {
+                deleteSlashText(view);
+                item.command(editorRef);
+              }
+              updateState({ isOpen: false, query: "", selectedIndex: 0 });
+              return true;
+            }
+            if (event.key === "Escape") {
+              updateState({ isOpen: false, query: "", selectedIndex: 0 });
+              return true;
+            }
+            return false;
+          },
+          handleTextInput(view, from, _to, text) {
+            const { $from } = view.state.selection;
+            const textBefore = $from.parent.textContent.slice(0, $from.parentOffset) + text;
+            const slashIndex = textBefore.lastIndexOf("/");
+            if (slashIndex >= 0) {
+              const query = textBefore.slice(slashIndex + 1).toLowerCase();
+              const filtered = commands.filter(
+                (cmd) => cmd.title.toLowerCase().includes(query) || cmd.description.toLowerCase().includes(query)
+              );
+              if (filtered.length > 0) {
+                const coords = view.coordsAtPos(from);
+                updateState({
+                  isOpen: true,
+                  query,
+                  position: { top: coords.bottom + 4, left: coords.left },
+                  items: filtered,
+                  selectedIndex: 0
+                });
+              } else {
+                updateState({ isOpen: false, query: "", selectedIndex: 0 });
+              }
+            } else if (state.isOpen) {
+              updateState({ isOpen: false, query: "", selectedIndex: 0 });
+            }
+            return false;
+          }
+        }
+      })
+    ];
+  }
+});
+function BlogEditor({
+  content,
+  onChange,
+  onSave,
+  uploadImage,
+  onBrowseMedia,
+  placeholder = 'Start writing your post... Type "/" for commands',
+  autosaveInterval = 3e4,
+  className = ""
+}) {
+  const [slashState, setSlashState] = useState({
+    isOpen: false,
+    query: "",
+    position: null,
+    selectedIndex: 0,
+    items: []
+  });
+  const [wordCount, setWordCount] = useState(0);
+  const [isSaving, setIsSaving] = useState(false);
+  const autosaveTimerRef = useRef(null);
+  const lastSavedRef = useRef("");
+  const defaultUpload = useCallback(async (file) => {
+    if (!uploadImage) {
+      console.warn("[Next BlogPanel] No uploadImage handler provided. Using blob URL \u2014 image will not persist across page reloads. Pass an uploadImage handler (e.g. one that POSTs to your /media API route) to persist images via GridFS or Cloudflare R2.");
+      return { url: URL.createObjectURL(file), alt: file.name };
+    }
+    return uploadImage(file);
+  }, [uploadImage]);
+  const slashCommands = React.useMemo(() => {
+    if (!onBrowseMedia) return defaultSlashCommands;
+    const imageIndex = defaultSlashCommands.findIndex((c) => c.title === "Image");
+    const mediaItem = {
+      title: "Media Library",
+      description: "Choose from uploaded images",
+      icon: "\u{1F4C1}",
+      command: (editor2) => {
+        onBrowseMedia().then((result) => {
+          if (result) {
+            editor2.chain().focus().setImage({ src: result.url, alt: result.alt || "" }).run();
+          }
+        }).catch((err) => {
+          console.error("[Next BlogPanel] onBrowseMedia failed:", err);
+        });
+      }
+    };
+    const cmds = [...defaultSlashCommands];
+    cmds.splice(imageIndex + 1, 0, mediaItem);
+    return cmds;
+  }, [onBrowseMedia]);
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        codeBlock: false,
+        dropcursor: { color: "#2563eb", width: 2 }
+      }),
+      Placeholder.configure({ placeholder }),
+      Link.configure({ openOnClick: false, HTMLAttributes: { class: "nbp-link" } }),
+      Underline,
+      Highlight.configure({ multicolor: false }),
+      Typography,
+      TaskList,
+      TaskItem.configure({ nested: true }),
+      Table.configure({ resizable: true }),
+      TableRow,
+      TableCell,
+      TableHeader,
+      ImageUpload.configure({ uploadFn: defaultUpload }),
+      CodeBlockEnhanced,
+      Callout,
+      FAQ,
+      FAQItem,
+      FAQQuestion,
+      FAQAnswer,
+      TableOfContents,
+      SlashCommand.configure({
+        commands: slashCommands,
+        onStateChange: setSlashState
+      })
+    ],
+    content: content || { type: "doc", content: [{ type: "paragraph" }] },
+    onUpdate: ({ editor: editor2 }) => {
+      const json = editor2.getJSON();
+      onChange?.(json);
+      const text = editor2.getText();
+      setWordCount(text.trim() ? text.trim().split(/\s+/).length : 0);
+    },
+    editorProps: {
+      attributes: {
+        class: `nbp-editor-content ${className}`
+      }
+    }
+  });
+  useEffect(() => {
+    if (!onSave || !autosaveInterval || !editor) return;
+    autosaveTimerRef.current = setInterval(() => {
+      const json = JSON.stringify(editor.getJSON());
+      if (json !== lastSavedRef.current) {
+        setIsSaving(true);
+        onSave(editor.getJSON());
+        lastSavedRef.current = json;
+        setTimeout(() => setIsSaving(false), 1e3);
+      }
+    }, autosaveInterval);
+    return () => {
+      if (autosaveTimerRef.current) clearInterval(autosaveTimerRef.current);
+    };
+  }, [editor, onSave, autosaveInterval]);
+  const readingTime = Math.max(1, Math.ceil(wordCount / 200));
+  return /* @__PURE__ */ jsxs("div", { className: "nbp-editor", children: [
+    editor && /* @__PURE__ */ jsxs("div", { className: "nbp-editor-toolbar", children: [
+      /* @__PURE__ */ jsxs("div", { className: "nbp-toolbar-group", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => editor.chain().focus().toggleBold().run(),
+            className: editor.isActive("bold") ? "nbp-toolbar-btn active" : "nbp-toolbar-btn",
+            title: "Bold",
+            children: /* @__PURE__ */ jsx("strong", { children: "B" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => editor.chain().focus().toggleItalic().run(),
+            className: editor.isActive("italic") ? "nbp-toolbar-btn active" : "nbp-toolbar-btn",
+            title: "Italic",
+            children: /* @__PURE__ */ jsx("em", { children: "I" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => editor.chain().focus().toggleUnderline().run(),
+            className: editor.isActive("underline") ? "nbp-toolbar-btn active" : "nbp-toolbar-btn",
+            title: "Underline",
+            children: /* @__PURE__ */ jsx("u", { children: "U" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => editor.chain().focus().toggleStrike().run(),
+            className: editor.isActive("strike") ? "nbp-toolbar-btn active" : "nbp-toolbar-btn",
+            title: "Strikethrough",
+            children: /* @__PURE__ */ jsx("s", { children: "S" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => editor.chain().focus().toggleCode().run(),
+            className: editor.isActive("code") ? "nbp-toolbar-btn active" : "nbp-toolbar-btn",
+            title: "Inline Code",
+            children: "</>"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => editor.chain().focus().toggleHighlight().run(),
+            className: editor.isActive("highlight") ? "nbp-toolbar-btn active" : "nbp-toolbar-btn",
+            title: "Highlight",
+            children: "H"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "nbp-toolbar-divider" }),
+      /* @__PURE__ */ jsx("div", { className: "nbp-toolbar-group", children: [2, 3, 4].map((level) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => editor.chain().focus().toggleHeading({ level }).run(),
+          className: editor.isActive("heading", { level }) ? "nbp-toolbar-btn active" : "nbp-toolbar-btn",
+          title: `Heading ${level}`,
+          children: [
+            "H",
+            level
+          ]
+        },
+        level
+      )) }),
+      /* @__PURE__ */ jsx("div", { className: "nbp-toolbar-divider" }),
+      /* @__PURE__ */ jsxs("div", { className: "nbp-toolbar-group", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => editor.chain().focus().toggleBulletList().run(),
+            className: editor.isActive("bulletList") ? "nbp-toolbar-btn active" : "nbp-toolbar-btn",
+            title: "Bullet List",
+            children: "\u2022"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => editor.chain().focus().toggleOrderedList().run(),
+            className: editor.isActive("orderedList") ? "nbp-toolbar-btn active" : "nbp-toolbar-btn",
+            title: "Numbered List",
+            children: "1."
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => editor.chain().focus().toggleTaskList().run(),
+            className: editor.isActive("taskList") ? "nbp-toolbar-btn active" : "nbp-toolbar-btn",
+            title: "Task List",
+            children: "\u2611"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "nbp-toolbar-divider" }),
+      /* @__PURE__ */ jsxs("div", { className: "nbp-toolbar-group", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => editor.chain().focus().toggleBlockquote().run(),
+            className: editor.isActive("blockquote") ? "nbp-toolbar-btn active" : "nbp-toolbar-btn",
+            title: "Quote",
+            children: "\u201C"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => editor.chain().focus().toggleCodeBlock().run(),
+            className: editor.isActive("codeBlock") ? "nbp-toolbar-btn active" : "nbp-toolbar-btn",
+            title: "Code Block",
+            children: "{ }"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => editor.chain().focus().setHorizontalRule().run(),
+            className: "nbp-toolbar-btn",
+            title: "Divider",
+            children: "\u2014"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),
+            className: "nbp-toolbar-btn",
+            title: "Table",
+            children: "\u229E"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "nbp-toolbar-divider" }),
+      /* @__PURE__ */ jsxs("div", { className: "nbp-toolbar-group", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              const url = window.prompt("Enter URL");
+              if (url) editor.chain().focus().setLink({ href: url }).run();
+            },
+            className: editor.isActive("link") ? "nbp-toolbar-btn active" : "nbp-toolbar-btn",
+            title: "Link",
+            children: "\u{1F517}"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              const input = document.createElement("input");
+              input.type = "file";
+              input.accept = "image/*";
+              input.onchange = () => {
+                const file = input.files?.[0];
+                if (file) editor.commands.uploadImage(file);
+              };
+              input.click();
+            },
+            className: "nbp-toolbar-btn",
+            title: "Upload Image",
+            children: "\u{1F4F7}"
+          }
+        ),
+        onBrowseMedia && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: async () => {
+              const result = await onBrowseMedia();
+              if (result && editor) {
+                editor.chain().focus().setImage({ src: result.url, alt: result.alt || "" }).run();
+              }
+            },
+            className: "nbp-toolbar-btn",
+            title: "Choose from Media Library",
+            children: "\u{1F5BC}"
+          }
+        )
+      ] })
+    ] }),
+    editor && /* @__PURE__ */ jsx(BubbleMenu, { editor, tippyOptions: { duration: 100 }, children: /* @__PURE__ */ jsxs("div", { className: "nbp-bubble-menu", children: [
+      /* @__PURE__ */ jsx("button", { onClick: () => editor.chain().focus().toggleBold().run(), className: editor.isActive("bold") ? "active" : "", children: "B" }),
+      /* @__PURE__ */ jsx("button", { onClick: () => editor.chain().focus().toggleItalic().run(), className: editor.isActive("italic") ? "active" : "", children: "I" }),
+      /* @__PURE__ */ jsx("button", { onClick: () => editor.chain().focus().toggleCode().run(), className: editor.isActive("code") ? "active" : "", children: "</>" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => {
+            const url = window.prompt("Enter URL");
+            if (url) editor.chain().focus().setLink({ href: url }).run();
+          },
+          className: editor.isActive("link") ? "active" : "",
+          children: "Link"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(EditorContent, { editor }),
+    slashState.isOpen && slashState.position && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "nbp-slash-menu",
+        style: {
+          position: "fixed",
+          top: slashState.position.top,
+          left: slashState.position.left
+        },
+        children: slashState.items.map((item, index) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: `nbp-slash-item ${index === slashState.selectedIndex ? "selected" : ""}`,
+            onMouseDown: (e) => {
+              e.preventDefault();
+              editor.storage.slashCommand.deleteSlashAndRun(item);
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "nbp-slash-icon", children: item.icon }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("div", { className: "nbp-slash-title", children: item.title }),
+                /* @__PURE__ */ jsx("div", { className: "nbp-slash-desc", children: item.description })
+              ] })
+            ]
+          },
+          item.title
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "nbp-editor-status", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        wordCount,
+        " words"
+      ] }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        readingTime,
+        " min read"
+      ] }),
+      isSaving && /* @__PURE__ */ jsx("span", { className: "nbp-saving", children: "Saving..." })
+    ] })
+  ] });
+}
+
+// src/editor/renderer.ts
+function renderBlocksToHTML(doc) {
+  if (!doc.content) return "";
+  return doc.content.map(renderNode).join("");
+}
+function renderNode(node) {
+  switch (node.type) {
+    case "paragraph":
+      return `<p>${renderInline(node)}</p>`;
+    case "heading": {
+      const level = node.attrs?.level || 2;
+      const text = renderInline(node);
+      const id = slugify(stripTags(text));
+      return `<h${level} id="${id}">${text}</h${level}>`;
+    }
+    case "bulletList":
+      return `<ul>${renderChildren(node)}</ul>`;
+    case "orderedList":
+      return `<ol>${renderChildren(node)}</ol>`;
+    case "listItem":
+      return `<li>${renderChildren(node)}</li>`;
+    case "taskList":
+      return `<ul class="nbp-task-list">${renderChildren(node)}</ul>`;
+    case "taskItem": {
+      const checked = node.attrs?.checked ? "checked" : "";
+      return `<li class="nbp-task-item" data-checked="${checked}"><input type="checkbox" ${checked} disabled />${renderChildren(node)}</li>`;
+    }
+    case "blockquote":
+      return `<blockquote>${renderChildren(node)}</blockquote>`;
+    case "codeBlock": {
+      const lang = node.attrs?.language || "plaintext";
+      const filename = node.attrs?.filename;
+      const code = escapeHtml(getTextContent(node));
+      const header = filename ? `<div class="nbp-code-header">${escapeHtml(filename)}</div>` : "";
+      return `${header}<pre><code class="language-${lang}">${code}</code></pre>`;
+    }
+    case "image": {
+      const src = node.attrs?.src || "";
+      const alt = node.attrs?.alt || "";
+      const caption = node.attrs?.caption;
+      const width = node.attrs?.width;
+      const height = node.attrs?.height;
+      let img = `<img src="${escapeAttr(src)}" alt="${escapeAttr(alt)}"`;
+      if (width) img += ` width="${width}"`;
+      if (height) img += ` height="${height}"`;
+      img += ' loading="lazy" />';
+      if (caption) {
+        return `<figure>${img}<figcaption>${escapeHtml(caption)}</figcaption></figure>`;
+      }
+      return img;
+    }
+    case "horizontalRule":
+      return "<hr />";
+    case "table":
+      return `<table>${renderChildren(node)}</table>`;
+    case "tableRow":
+      return `<tr>${renderChildren(node)}</tr>`;
+    case "tableHeader":
+      return `<th>${renderInline(node)}</th>`;
+    case "tableCell":
+      return `<td>${renderInline(node)}</td>`;
+    case "callout": {
+      const calloutType = node.attrs?.type || "info";
+      const icons = {
+        info: "\u2139\uFE0F",
+        warning: "\u26A0\uFE0F",
+        tip: "\u{1F4A1}",
+        danger: "\u{1F6A8}"
+      };
+      return `<div class="nbp-callout nbp-callout-${calloutType}"><span class="nbp-callout-icon">${icons[calloutType] || ""}</span><div class="nbp-callout-content">${renderChildren(node)}</div></div>`;
+    }
+    case "faq":
+      return `<div class="nbp-faq" itemscope itemtype="https://schema.org/FAQPage">${renderChildren(node)}</div>`;
+    case "faqItem":
+      return `<div class="nbp-faq-item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">${renderChildren(node)}</div>`;
+    case "faqQuestion":
+      return `<h3 itemprop="name">${renderInline(node)}</h3>`;
+    case "faqAnswer":
+      return `<div itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer"><div itemprop="text">${renderChildren(node)}</div></div>`;
+    case "tableOfContents":
+      return '<div data-toc="true" class="nbp-toc"></div>';
+    case "html":
+      return getTextContent(node);
+    case "embed": {
+      const embedUrl = node.attrs?.src || "";
+      return `<div class="nbp-embed"><iframe src="${escapeAttr(embedUrl)}" frameborder="0" allowfullscreen loading="lazy"></iframe></div>`;
+    }
+    case "text":
+      return renderTextNode(node);
+    case "hardBreak":
+      return "<br />";
+    default:
+      if (node.content) return renderChildren(node);
+      if (node.text) return escapeHtml(node.text);
+      return "";
+  }
+}
+function renderChildren(node) {
+  if (!node.content) return "";
+  return node.content.map(renderNode).join("");
+}
+function renderInline(node) {
+  if (!node.content) return "";
+  return node.content.map(renderNode).join("");
+}
+function renderTextNode(node) {
+  let text = escapeHtml(node.text || "");
+  if (node.marks) {
+    for (const mark of node.marks) {
+      switch (mark.type) {
+        case "bold":
+          text = `<strong>${text}</strong>`;
+          break;
+        case "italic":
+          text = `<em>${text}</em>`;
+          break;
+        case "strike":
+          text = `<s>${text}</s>`;
+          break;
+        case "code":
+          text = `<code>${text}</code>`;
+          break;
+        case "underline":
+          text = `<u>${text}</u>`;
+          break;
+        case "highlight":
+          text = `<mark>${text}</mark>`;
+          break;
+        case "link": {
+          const href = mark.attrs?.href || "";
+          const target = href.startsWith("http") ? ' target="_blank" rel="noopener noreferrer"' : "";
+          text = `<a href="${escapeAttr(href)}"${target}>${text}</a>`;
+          break;
+        }
+      }
+    }
+  }
+  return text;
+}
+function getTextContent(node) {
+  if (node.text) return node.text;
+  if (!node.content) return "";
+  return node.content.map(getTextContent).join("");
+}
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function escapeAttr(str) {
+  return str.replace(/"/g, "&quot;").replace(/&/g, "&amp;");
+}
+function stripTags(html) {
+  return html.replace(/<[^>]+>/g, "");
+}
+function slugify(text) {
+  return text.toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/[\s_]+/g, "-").replace(/-+/g, "-");
+}
+function extractHeadings(doc) {
+  const headings = [];
+  function walk(node) {
+    if (node.type === "heading") {
+      const text = getTextContent(node);
+      headings.push({
+        id: slugify(text),
+        text,
+        level: node.attrs?.level || 2
+      });
+    }
+    if (node.content) {
+      node.content.forEach(walk);
+    }
+  }
+  if (doc.content) {
+    doc.content.forEach(walk);
+  }
+  return headings;
+}
+function extractFAQItems(doc) {
+  const items = [];
+  function walk(node) {
+    if (node.type === "faqItem" && node.content) {
+      const question = node.content.find((c) => c.type === "faqQuestion");
+      const answer = node.content.find((c) => c.type === "faqAnswer");
+      if (question && answer) {
+        items.push({
+          question: getTextContent(question),
+          answer: renderChildren(answer)
+        });
+      }
+    }
+    if (node.content) {
+      node.content.forEach(walk);
+    }
+  }
+  if (doc.content) {
+    doc.content.forEach(walk);
+  }
+  return items;
+}
+
+export { BlogEditor, Callout, CodeBlockEnhanced, FAQ, FAQAnswer, FAQItem, FAQQuestion, ImageUpload, SUPPORTED_LANGUAGES, SlashCommand, TableOfContents, defaultSlashCommands, extractFAQItems, extractHeadings, renderBlocksToHTML };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map