@otmc/ui 0.1.5 → 0.1.7

package/dist/editor.js

@@ -0,0 +1,4807 @@
+import {
+  BACKEND_URL,
+  NotificationCenter_default,
+  apiClient,
+  apiUtils,
+  copyToClipboard,
+  debug,
+  getBackendUrl,
+  instructionsApi,
+  llmApi,
+  resolveColorScheme,
+  setAccessTokenGetter,
+  setBackendUrl,
+  useTheme
+} from "./chunk-BGUL4HIW.js";
+
+// src/editor/MarkdownEditor.tsx
+import { memo as memo6, useState as useState7, useCallback as useCallback8, useMemo as useMemo2, useEffect as useEffect6 } from "react";
+import { useMantineColorScheme as useMantineColorScheme3, useMantineTheme as useMantineTheme6, Card } from "@mantine/core";
+
+// src/editor/hooks/useEditor.ts
+import { useEditor } from "@tiptap/react";
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
+
+// src/editor/hooks/markdownSerializer.ts
+var serializeNode = (node, useHtmlForMarks = false) => {
+  if (!node) return "";
+  if (node.isText) {
+    let text = node.text || "";
+    const marks = node.marks || [];
+    const bold = marks.some((m) => m.type.name === "bold");
+    const italic = marks.some((m) => m.type.name === "italic");
+    const code = marks.some((m) => m.type.name === "code");
+    const link = marks.find((m) => m.type.name === "link");
+    const textStyle = marks.find((m) => m.type.name === "textStyle");
+    const color = textStyle?.attrs?.color;
+    const bgColorMark = marks.find((m) => m.type.name === "backgroundColor");
+    const backgroundColor = bgColorMark?.attrs?.color;
+    if (code) {
+      text = `\`${text}\``;
+    } else {
+      if (useHtmlForMarks) {
+        if (bold) text = `<strong>${text}</strong>`;
+        if (italic) text = `<em>${text}</em>`;
+        if (color) text = `<span style="color: ${color}">${text}</span>`;
+        if (backgroundColor) text = `<span data-bg-color="${backgroundColor}">${text}</span>`;
+      } else {
+        if (bold) text = `**${text}**`;
+        if (italic) text = `*${text}*`;
+      }
+      if (link) text = `[${text}](${link.attrs.href})`;
+      if (!useHtmlForMarks && color) {
+        text = `<span style="color: ${color}">${text}</span>`;
+      }
+      if (!useHtmlForMarks && backgroundColor) {
+        text = `<span data-bg-color="${backgroundColor}">${text}</span>`;
+      }
+    }
+    return text;
+  }
+  let content = "";
+  if (node.content && node.content.content) {
+    content = node.content.content.map((child) => serializeNode(child)).join("");
+  }
+  switch (node.type.name) {
+    case "text":
+      return content;
+    case "paragraph": {
+      const backgroundColor = node.attrs?.backgroundColor;
+      if (backgroundColor) {
+        const content2 = node.content.content.map((child) => serializeNode(child, true)).join("");
+        return `<p style="background-color: ${backgroundColor}">${content2}</p>`;
+      }
+      return content;
+    }
+    case "heading": {
+      const level = node.attrs?.level || 1;
+      const backgroundColor = node.attrs?.backgroundColor;
+      if (backgroundColor) {
+        const content2 = node.content.content.map((child) => serializeNode(child, true)).join("");
+        return `<h${level} style="background-color: ${backgroundColor}">${content2.trim()}</h${level}>`;
+      }
+      const prefix = "#".repeat(level);
+      return `${prefix} ${content.trim()}`;
+    }
+    case "bulletList": {
+      const items = [];
+      for (const item of node.content?.content || []) {
+        const itemText = serializeNode(item).trim();
+        items.push(`- ${itemText}`);
+      }
+      return items.join("\n");
+    }
+    case "orderedList": {
+      const items = [];
+      let index = node.attrs?.start || 1;
+      for (const item of node.content?.content || []) {
+        const itemText = serializeNode(item).trim();
+        items.push(`${index}. ${itemText}`);
+        index++;
+      }
+      return items.join("\n");
+    }
+    case "taskItem": {
+      const checked = node.attrs?.checked ? "[x]" : "[ ]";
+      const itemText = content.trim();
+      return `- ${checked} ${itemText}`;
+    }
+    case "taskList": {
+      const items = [];
+      for (const item of node.content?.content || []) {
+        const itemText = serializeNode(item).trim();
+        items.push(itemText);
+      }
+      return items.join("\n");
+    }
+    case "blockquote": {
+      const lines = content.trim().split("\n");
+      return lines.map((line) => `> ${line}`).join("\n");
+    }
+    case "codeBlock": {
+      const language = node.attrs?.language || "";
+      return `\`\`\`${language}
+${content}
+\`\`\``;
+    }
+    case "horizontalRule":
+      return "---";
+    case "hardBreak":
+      return "\n";
+    case "image":
+      const src = node.attrs?.src || "";
+      const alt = node.attrs?.alt || "";
+      return `![${alt}](${src})`;
+    case "notice": {
+      const variant = node.attrs?.variant || "info";
+      const title = node.attrs?.title || "Notice";
+      const backgroundColor = node.attrs?.backgroundColor;
+      const contentText = node.content.content.map((child) => serializeNode(child, true)).join("").trim();
+      let html = `<div data-type="notice" data-variant="${variant}" data-title="${title}"`;
+      if (backgroundColor) {
+        html += ` style="background-color: ${backgroundColor}"`;
+      }
+      html += `>${contentText}</div>`;
+      return html;
+    }
+    case "table": {
+      const rows = [];
+      let headerIndex = 0;
+      for (const row of node.content?.content || []) {
+        const cells = [];
+        for (const cell of row.content?.content || []) {
+          cells.push(serializeNode(cell).trim());
+        }
+        rows.push(`| ${cells.join(" | ")} |`);
+        if (headerIndex === 0) {
+          const separators = cells.map(() => "---");
+          rows.push(`| ${separators.join(" | ")} |`);
+          headerIndex++;
+        }
+      }
+      return rows.join("\n");
+    }
+    default:
+      return content;
+  }
+};
+var serializeToMarkdown = (editor) => {
+  if (!editor) return "";
+  const nodes = editor.state.doc.content.content;
+  const results = [];
+  for (const node of nodes) {
+    const serialized = serializeNode(node);
+    if (serialized || node.type.name === "paragraph") {
+      results.push(serialized);
+    }
+  }
+  return results.join("\n\n");
+};
+var serializeSelectionToMarkdown = (editor, from, to) => {
+  if (!editor) return "";
+  const { doc } = editor.state;
+  const $from = doc.resolve(from);
+  for (let depth = $from.depth; depth > 0; depth--) {
+    const node = $from.node(depth);
+    if (["bulletList", "orderedList", "taskList"].includes(node.type.name)) {
+      return serializeNode(node);
+    }
+  }
+  const selectionNode = doc.slice(from, to);
+  const results = [];
+  selectionNode.content.content.forEach((node) => {
+    const serialized = serializeNode(node);
+    if (serialized || node.type.name === "paragraph") {
+      results.push(serialized);
+    }
+  });
+  return results.join("\n\n");
+};
+
+// src/editor/hooks/useEditor.ts
+import StarterKit from "@tiptap/starter-kit";
+
+// src/editor/extensions/CodeBlockExtension.ts
+import { CodeBlockLowlight } from "@tiptap/extension-code-block-lowlight";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import { createLowlight, common } from "lowlight";
+
+// src/editor/blocks/CodeBlock.tsx
+import { useState, memo, useMemo, useCallback } from "react";
+import { NodeViewContent, NodeViewWrapper } from "@tiptap/react";
+import { ActionIcon, Box as Box2, Text, useMantineTheme, Select } from "@mantine/core";
+import { IconCheck, IconCopy, IconCode, IconChevronDown } from "@tabler/icons-react";
+
+// src/editor/components/BlockWrapper.tsx
+import { Box } from "@mantine/core";
+import { jsx } from "react/jsx-runtime";
+function BlockWrapper({ children, selected, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      px: 0,
+      py: 4,
+      style: {
+        borderRadius: 8,
+        backgroundColor: selected ? "var(--mantine-color-blue-light)" : "transparent",
+        transition: "background-color 0.15s ease"
+      },
+      ...props,
+      children
+    }
+  );
+}
+
+// src/editor/blocks/CodeBlock.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var COMMON_LANGUAGES = [
+  { value: "", label: "Plain Text" },
+  { value: "bash", label: "Bash" },
+  { value: "powershell", label: "PowerShell" },
+  { value: "cpp", label: "C++" },
+  { value: "c", label: "C" },
+  { value: "go", label: "Golang" },
+  { value: "python", label: "Python" },
+  { value: "rust", label: "Rust" },
+  { value: "csharp", label: "C#" },
+  { value: "java", label: "Java" },
+  { value: "javascript", label: "JavaScript" },
+  { value: "typescript", label: "TypeScript" },
+  { value: "php", label: "PHP" },
+  { value: "ruby", label: "Ruby" },
+  { value: "swift", label: "Swift" },
+  { value: "kotlin", label: "Kotlin" },
+  { value: "sql", label: "SQL" },
+  { value: "html", label: "HTML" },
+  { value: "css", label: "CSS" },
+  { value: "json", label: "JSON" },
+  { value: "xml", label: "XML" },
+  { value: "yaml", label: "YAML" }
+];
+var CodeBlockHeader = memo(
+  ({
+    language,
+    isDark,
+    theme
+  }) => {
+    if (!language) return null;
+    return /* @__PURE__ */ jsxs(
+      Text,
+      {
+        pos: "absolute",
+        top: 8,
+        left: 18,
+        size: "xs",
+        c: isDark ? theme.colors.dark[2] : theme.colors.gray[6],
+        style: {
+          zIndex: 1,
+          textTransform: "capitalize",
+          fontSize: 12,
+          fontWeight: 600,
+          display: "flex",
+          alignItems: "center",
+          pointerEvents: "none",
+          gap: 4
+        },
+        children: [
+          /* @__PURE__ */ jsx2(IconCode, { size: 14 }),
+          language
+        ]
+      }
+    );
+  }
+);
+CodeBlockHeader.displayName = "CodeBlockHeader";
+function CodeBlock({ node, updateAttributes, selected }) {
+  const [copied, setCopied] = useState(false);
+  const { currentTheme } = useTheme();
+  const theme = useMantineTheme();
+  const isDark = currentTheme === "dark";
+  const language = node.attrs?.language || "";
+  const handleCopy = useCallback(async () => {
+    const success = await copyToClipboard(node.textContent);
+    if (success) {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    }
+  }, [node.textContent]);
+  const handleLanguageChange = useCallback(
+    (value) => {
+      updateAttributes({ language: value || "" });
+    },
+    [updateAttributes]
+  );
+  const preStyle = useMemo(
+    () => ({
+      border: `1px solid ${isDark ? theme.colors.dark[5] : theme.colors.gray[3]}`,
+      borderRadius: 10,
+      padding: "8px 12px",
+      overflow: "auto",
+      cursor: "text",
+      background: isDark ? "#0d1117" : "#e8f1fa",
+      margin: 0,
+      position: "relative"
+    }),
+    [isDark, theme]
+  );
+  return /* @__PURE__ */ jsxs(NodeViewWrapper, { className: "code-block-wrapper", children: [
+    /* @__PURE__ */ jsx2(BlockWrapper, { selected, children: /* @__PURE__ */ jsxs(
+      Box2,
+      {
+        pos: "relative",
+        bg: isDark ? theme.colors.dark[8] : theme.colors.gray[0],
+        style: { borderRadius: 10 },
+        children: [
+          /* @__PURE__ */ jsx2(
+            Box2,
+            {
+              pos: "absolute",
+              top: 5,
+              right: 50,
+              style: {
+                zIndex: 2,
+                display: "flex",
+                alignItems: "center",
+                gap: 6
+              },
+              children: /* @__PURE__ */ jsx2(
+                Select,
+                {
+                  value: language,
+                  onChange: handleLanguageChange,
+                  data: COMMON_LANGUAGES,
+                  size: "xs",
+                  w: 115,
+                  comboboxProps: {
+                    position: "bottom-end",
+                    withinPortal: true
+                  },
+                  rightSection: /* @__PURE__ */ jsx2(IconChevronDown, { size: 14 }),
+                  leftSection: /* @__PURE__ */ jsx2(IconCode, { size: 14, color: isDark ? theme.colors.dark[2] : theme.colors.gray[6] }),
+                  placeholder: "Language",
+                  clearable: false,
+                  searchable: false,
+                  styles: {
+                    input: {
+                      background: isDark ? "#292a2b" : "#f6f8fa",
+                      borderColor: isDark ? theme.colors.dark[5] : theme.colors.gray[3],
+                      height: 28,
+                      minHeight: 28,
+                      borderRadius: 12
+                    },
+                    dropdown: {
+                      borderRadius: 12
+                    }
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            ActionIcon,
+            {
+              pos: "absolute",
+              top: 5,
+              right: 5,
+              color: isDark ? "dark" : "gray",
+              variant: "subtle",
+              radius: "md",
+              onClick: handleCopy,
+              style: { zIndex: 2 },
+              title: copied ? "Copied!" : "Copy code",
+              children: copied ? /* @__PURE__ */ jsx2(IconCheck, { color: "green", size: 16 }) : /* @__PURE__ */ jsx2(IconCopy, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ jsx2("pre", { style: preStyle, className: isDark ? "hljs-dark" : "hljs-light", children: /* @__PURE__ */ jsx2("code", { children: /* @__PURE__ */ jsx2(NodeViewContent, {}) }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx2("style", { children: `
+        .code-block-wrapper .ProseMirror-trailingBreak {
+          display: none;
+        }
+        .hljs-light {
+          color: #24292f;
+          background: #f3faff !important;
+        }
+        .hljs-light .hljs-doctag,
+        .hljs-light .hljs-keyword,
+        .hljs-light .hljs-meta .hljs-keyword,
+        .hljs-light .hljs-template-tag,
+        .hljs-light .hljs-template-variable,
+        .hljs-light .hljs-type,
+        .hljs-light .hljs-variable.language_ {
+          color: #d73a49;
+        }
+        .hljs-light .hljs-title,
+        .hljs-light .hljs-title.class_,
+        .hljs-light .hljs-title.class_.inherited__,
+        .hljs-light .hljs-title.function_ {
+          color: #6f42c1;
+        }
+        .hljs-light .hljs-attr,
+        .hljs-light .hljs-attribute,
+        .hljs-light .hljs-literal,
+        .hljs-light .hljs-meta,
+        .hljs-light .hljs-number,
+        .hljs-light .hljs-operator,
+        .hljs-light .hljs-selector-attr,
+        .hljs-light .hljs-selector-class,
+        .hljs-light .hljs-selector-id,
+        .hljs-light .hljs-variable {
+          color: #005cc5;
+        }
+        .hljs-light .hljs-meta .hljs-string,
+        .hljs-light .hljs-regexp,
+        .hljs-light .hljs-string {
+          color: #0a3069;
+        }
+        .hljs-light .hljs-built_in,
+        .hljs-light .hljs-symbol {
+          color: #b56b3a;
+        }
+        .hljs-light .hljs-code,
+        .hljs-light .hljs-comment,
+        .hljs-light .hljs-formula {
+          color: #6a737d;
+        }
+        .hljs-light .hljs-name,
+        .hljs-light .hljs-quote,
+        .hljs-light .hljs-selector-pseudo,
+        .hljs-light .hljs-selector-tag {
+          color: #22863a;
+        }
+        .hljs-light .hljs-subst {
+          color: #24292f;
+        }
+        .hljs-light .hljs-section {
+          color: #005cc5;
+          font-weight: 700;
+        }
+        .hljs-light .hljs-bullet {
+          color: #735c0f;
+        }
+        .hljs-light .hljs-emphasis {
+          color: #24292f;
+          font-style: italic;
+        }
+        .hljs-light .hljs-strong {
+          color: #24292f;
+          font-weight: 700;
+        }
+
+        .hljs-dark {
+          color: #c9d1d9;
+          background: #292a2b !important;
+        }
+        .hljs-dark .hljs-doctag,
+        .hljs-dark .hljs-keyword,
+        .hljs-dark .hljs-meta .hljs-keyword,
+        .hljs-dark .hljs-template-tag,
+        .hljs-dark .hljs-template-variable,
+        .hljs-dark .hljs-type,
+        .hljs-dark .hljs-variable.language_ {
+          color: #ff7b72;
+        }
+        .hljs-dark .hljs-title,
+        .hljs-dark .hljs-title.class_,
+        .hljs-dark .hljs-title.class_.inherited__,
+        .hljs-dark .hljs-title.function_ {
+          color: #d2a8ff;
+        }
+        .hljs-dark .hljs-attr,
+        .hljs-dark .hljs-attribute,
+        .hljs-dark .hljs-literal,
+        .hljs-dark .hljs-meta,
+        .hljs-dark .hljs-number,
+        .hljs-dark .hljs-operator,
+        .hljs-dark .hljs-selector-attr,
+        .hljs-dark .hljs-selector-class,
+        .hljs-dark .hljs-selector-id,
+        .hljs-dark .hljs-variable {
+          color: #79c0ff;
+        }
+        .hljs-dark .hljs-meta .hljs-string,
+        .hljs-dark .hljs-regexp,
+        .hljs-dark .hljs-string {
+          color: #a5d6ff;
+        }
+        .hljs-dark .hljs-built_in,
+        .hljs-dark .hljs-symbol {
+          color: #ffa657;
+        }
+        .hljs-dark .hljs-code,
+        .hljs-dark .hljs-comment,
+        .hljs-dark .hljs-formula {
+          color: #8b949e;
+        }
+        .hljs-dark .hljs-name,
+        .hljs-dark .hljs-quote,
+        .hljs-dark .hljs-selector-pseudo,
+        .hljs-dark .hljs-selector-tag {
+          color: #7ee787;
+        }
+        .hljs-dark .hljs-subst {
+          color: #c9d1d9;
+        }
+        .hljs-dark .hljs-section {
+          color: #1f6feb;
+          font-weight: 700;
+        }
+        .hljs-dark .hljs-bullet {
+          color: #f2cc60;
+        }
+        .hljs-dark .hljs-emphasis {
+          color: #c9d1d9;
+          font-style: italic;
+        }
+        .hljs-dark .hljs-strong {
+          color: #c9d1d9;
+          font-weight: 700;
+        }
+      ` })
+  ] });
+}
+
+// src/editor/extensions/CodeBlockExtension.ts
+import { InputRule } from "@tiptap/core";
+import { TextSelection } from "@tiptap/pm/state";
+var lowlight = createLowlight(common);
+var CodeBlockExtension = CodeBlockLowlight.extend({
+  addAttributes() {
+    return {
+      language: {
+        default: "",
+        parseHTML: (el) => el.getAttribute("data-language") || "",
+        renderHTML: (attrs) => attrs.language ? { "data-language": attrs.language } : {}
+      }
+    };
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer(CodeBlock);
+  },
+  addKeyboardShortcuts() {
+    return {
+      Backspace: () => {
+        const { state } = this.editor;
+        const { selection, schema } = state;
+        const { $from, empty } = selection;
+        if (!empty) return false;
+        const node = $from.node();
+        if (node.type !== this.type) return false;
+        const isEmpty = !node.textContent || node.textContent === "\u200B";
+        if (!isEmpty) return false;
+        const pos = $from.before($from.depth);
+        const tr = state.tr;
+        tr.deleteRange(pos, pos + node.nodeSize);
+        const paragraph = schema.nodes.paragraph.create(
+          null,
+          schema.text("\u200B")
+        );
+        tr.insert(pos, paragraph);
+        tr.setSelection(TextSelection.create(tr.doc, pos + 1));
+        this.editor.view.dispatch(tr);
+        return true;
+      }
+    };
+  },
+  addInputRules() {
+    const type = this.type;
+    return [
+      new InputRule({
+        find: /^```([a-z]*)$/i,
+        handler: ({ state, range, match }) => {
+          const { tr } = state;
+          const $start = tr.doc.resolve(range.from);
+          if (!$start.node(-1).canReplaceWith($start.index(-1), $start.indexAfter(-1), type)) return;
+          const lang = (match[1] || "").toLowerCase();
+          tr.delete(range.from, range.to);
+          const node = type.create(
+            { language: lang },
+            state.schema.text("\u200B")
+          );
+          const pos = tr.mapping.map(range.from);
+          tr.insert(pos, node);
+          const $pos = tr.doc.resolve(pos + 1);
+          tr.setSelection(TextSelection.near($pos));
+          this.editor.view.dispatch(tr);
+        }
+      })
+    ];
+  }
+}).configure({
+  lowlight,
+  HTMLAttributes: {
+    class: "code-block-custom"
+  }
+});
+
+// src/editor/extensions/TaskItemExtension.ts
+import TaskItem from "@tiptap/extension-task-item";
+import { ReactNodeViewRenderer as ReactNodeViewRenderer2 } from "@tiptap/react";
+
+// src/editor/blocks/TaskBlock.tsx
+import { NodeViewWrapper as NodeViewWrapper2, NodeViewContent as NodeViewContent2 } from "@tiptap/react";
+import { Checkbox, useMantineTheme as useMantineTheme2, useMantineColorScheme } from "@mantine/core";
+import { memo as memo2, useCallback as useCallback2 } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function useToggle(updateAttributes) {
+  return useCallback2(
+    (checked) => {
+      updateAttributes({ checked });
+    },
+    [updateAttributes]
+  );
+}
+var TaskBlock = memo2(({ node, updateAttributes }) => {
+  const theme = useMantineTheme2();
+  const { colorScheme } = useMantineColorScheme();
+  const isChecked = node.attrs.checked;
+  const toggle = useToggle(updateAttributes);
+  const textColor = isChecked ? colorScheme === "dark" ? theme.colors.green[2] : theme.colors.green[9] : colorScheme === "dark" ? theme.colors.blue[2] : theme.colors.blue[9];
+  return /* @__PURE__ */ jsxs2(
+    NodeViewWrapper2,
+    {
+      as: "li",
+      "data-type": "taskItem",
+      "data-checked": isChecked,
+      style: {
+        margin: "6px 0",
+        marginLeft: "-1.2em",
+        display: "flex",
+        alignItems: "center",
+        gap: 10
+      },
+      children: [
+        /* @__PURE__ */ jsx3(
+          Checkbox,
+          {
+            checked: isChecked,
+            onChange: (e) => toggle(e.currentTarget.checked),
+            size: "md",
+            styles: {
+              root: {
+                display: "flex",
+                alignItems: "center"
+              },
+              input: {
+                cursor: "pointer",
+                width: 22,
+                height: 22
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          NodeViewContent2,
+          {
+            as: "div",
+            style: {
+              flex: 1,
+              color: textColor,
+              fontWeight: 600,
+              opacity: isChecked ? 0.7 : 0.9,
+              textDecoration: isChecked ? "line-through" : "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx3("style", { children: `
+        div[data-node-view-content] p {
+          margin: 0;
+          display: inline;
+          line-height: 1.8;
+        }
+      ` })
+      ]
+    }
+  );
+});
+TaskBlock.displayName = "TaskBlock";
+
+// src/editor/extensions/TaskItemExtension.ts
+var TaskItemExtension = TaskItem.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer2(TaskBlock);
+  }
+});
+
+// src/editor/extensions/NoticeExtension.ts
+import { Node, mergeAttributes } from "@tiptap/core";
+import { ReactNodeViewRenderer as ReactNodeViewRenderer3 } from "@tiptap/react";
+
+// src/editor/blocks/NoticeBlock.tsx
+import { NodeViewWrapper as NodeViewWrapper3, NodeViewContent as NodeViewContent3 } from "@tiptap/react";
+import { Alert, ActionIcon as ActionIcon2, Menu, TextInput, Box as Box3 } from "@mantine/core";
+import {
+  IconAlertCircle,
+  IconInfoCircle,
+  IconCheck as IconCheck2,
+  IconExclamationMark,
+  IconSettings,
+  IconTrash
+} from "@tabler/icons-react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var VARIANTS = [
+  { value: "info", icon: /* @__PURE__ */ jsx4(IconInfoCircle, { size: 18 }), color: "blue", label: "Th\xF4ng tin" },
+  { value: "success", icon: /* @__PURE__ */ jsx4(IconCheck2, { size: 18 }), color: "teal", label: "Th\xE0nh c\xF4ng" },
+  { value: "warning", icon: /* @__PURE__ */ jsx4(IconExclamationMark, { size: 18 }), color: "orange", label: "C\u1EA3nh b\xE1o" },
+  { value: "error", icon: /* @__PURE__ */ jsx4(IconAlertCircle, { size: 18 }), color: "red", label: "L\u1ED7i" }
+];
+function NoticeBlock({ node, updateAttributes, deleteNode }) {
+  const { variant = "info", title = "Note" } = node.attrs || {};
+  const currentVariant = VARIANTS.find((v) => v.value === variant) || VARIANTS[0];
+  return /* @__PURE__ */ jsxs3(NodeViewWrapper3, { className: "notice-block-wrapper", children: [
+    /* @__PURE__ */ jsx4(BlockWrapper, { children: /* @__PURE__ */ jsxs3(Box3, { style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsx4(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: "8px",
+            right: "8px",
+            zIndex: 10,
+            display: "flex",
+            gap: "4px"
+          },
+          children: /* @__PURE__ */ jsxs3(Menu, { shadow: "md", width: 180, position: "bottom-end", withArrow: true, children: [
+            /* @__PURE__ */ jsx4(Menu.Target, { children: /* @__PURE__ */ jsx4(
+              ActionIcon2,
+              {
+                variant: "subtle",
+                color: "gray",
+                size: "sm",
+                className: "notice-settings-btn",
+                style: { opacity: 0.4 },
+                children: /* @__PURE__ */ jsx4(IconSettings, { size: 16 })
+              }
+            ) }),
+            /* @__PURE__ */ jsxs3(Menu.Dropdown, { children: [
+              /* @__PURE__ */ jsx4(Menu.Label, { children: "Lo\u1EA1i hi\u1EC3n th\u1ECB" }),
+              VARIANTS.map((v) => /* @__PURE__ */ jsx4(
+                Menu.Item,
+                {
+                  leftSection: v.icon,
+                  onClick: () => updateAttributes?.({ variant: v.value }),
+                  style: { iconSize: 16 },
+                  children: v.label
+                },
+                v.value
+              )),
+              /* @__PURE__ */ jsx4(Menu.Divider, {}),
+              /* @__PURE__ */ jsx4(
+                Menu.Item,
+                {
+                  color: "red",
+                  leftSection: /* @__PURE__ */ jsx4(IconTrash, { size: 18 }),
+                  onClick: () => deleteNode?.(),
+                  children: "X\xF3a kh\u1ED1i"
+                }
+              )
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxs3(
+        Alert,
+        {
+          variant: "light",
+          color: currentVariant.color,
+          icon: currentVariant.icon,
+          radius: "md",
+          styles: {
+            root: {
+              padding: "4px 10px",
+              border: "none",
+              backgroundColor: `var(--mantine-color-${currentVariant.color}-light)`,
+              borderLeft: `4px solid var(--mantine-color-${currentVariant.color}-filled)`
+            },
+            icon: {
+              marginRight: "4px",
+              marginTop: "10px"
+            },
+            wrapper: {
+              gap: "4px"
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsx4(
+              TextInput,
+              {
+                placeholder: "Nh\u1EADp ti\xEAu \u0111\u1EC1...",
+                variant: "unstyled",
+                value: title,
+                onChange: (e) => updateAttributes?.({ title: e.target.value }),
+                styles: {
+                  input: {
+                    fontWeight: 700,
+                    fontSize: "1.05rem",
+                    minHeight: "auto",
+                    padding: 0,
+                    height: "auto",
+                    color: `var(--mantine-color-${currentVariant.color}-filled)`,
+                    letterSpacing: "-0.01em"
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx4(Box3, { style: { marginTop: "-6px", marginBottom: "12px", fontSize: "0.95rem", lineHeight: 1.6 }, children: /* @__PURE__ */ jsx4(NodeViewContent3, { className: "notice-content-area" }) })
+          ]
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx4("style", { children: `
+        .notice-block-wrapper:hover .notice-settings-btn {
+          opacity: 1 !important;
+        }
+        .notice-content-area {
+          min-height: 1.2em;
+        }
+        .notice-content-area:focus {
+          outline: none;
+        }
+      ` })
+  ] });
+}
+
+// src/editor/extensions/NoticeExtension.ts
+var NoticeExtension = Node.create({
+  name: "notice",
+  group: "block",
+  content: "block+",
+  defining: true,
+  draggable: true,
+  addAttributes() {
+    return {
+      variant: {
+        default: "info",
+        parseHTML: (element) => element.getAttribute("data-variant"),
+        renderHTML: (attributes) => ({ "data-variant": attributes.variant })
+      },
+      title: {
+        default: "Note",
+        parseHTML: (element) => element.getAttribute("data-title"),
+        renderHTML: (attributes) => ({ "data-title": attributes.title })
+      }
+    };
+  },
+  parseHTML() {
+    return [{ tag: 'div[data-type="notice"]' }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes(HTMLAttributes, { "data-type": "notice" }), 0];
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer3(NoticeBlock);
+  },
+  addCommands() {
+    return {
+      setNotice: (attrs) => ({ commands }) => {
+        return commands.insertContent({
+          type: this.name,
+          attrs,
+          content: [{ type: "paragraph" }]
+        });
+      },
+      toggleNotice: () => ({ commands }) => {
+        return commands.toggleNode(this.name, "paragraph");
+      }
+    };
+  }
+});
+
+// src/editor/extensions/TimelineExtension.ts
+import { Node as Node2, mergeAttributes as mergeAttributes2 } from "@tiptap/core";
+import { ReactNodeViewRenderer as ReactNodeViewRenderer4 } from "@tiptap/react";
+
+// src/editor/blocks/TimelineBlock.tsx
+import { NodeViewWrapper as NodeViewWrapper4 } from "@tiptap/react";
+import {
+  Box as Box4,
+  ActionIcon as ActionIcon3,
+  Menu as Menu2,
+  TextInput as TextInput2,
+  Textarea,
+  Button,
+  Timeline,
+  Group,
+  Text as Text2,
+  Paper,
+  Stack,
+  Tooltip,
+  Badge,
+  rem,
+  UnstyledButton
+} from "@mantine/core";
+import {
+  IconSettings as IconSettings2,
+  IconTrash as IconTrash2,
+  IconPlus,
+  IconCalendar,
+  IconEdit,
+  IconEye,
+  IconCheck as IconCheck3
+} from "@tabler/icons-react";
+import { useState as useState2, useCallback as useCallback3 } from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var generateId = () => Math.random().toString(36).substring(7);
+function TimelineBlock({ node, updateAttributes, deleteNode }) {
+  const { items = [], active = 0 } = node.attrs;
+  const [isEditMode, setIsEditMode] = useState2(false);
+  const [editingItemId, setEditingItemId] = useState2(null);
+  const handleUpdateItems = useCallback3((newItems) => {
+    updateAttributes({ items: newItems });
+  }, [updateAttributes]);
+  const addTimelineItem = useCallback3(() => {
+    const newItem = {
+      id: generateId(),
+      title: "",
+      description: "",
+      date: (/* @__PURE__ */ new Date()).toLocaleDateString("vi-VN")
+    };
+    handleUpdateItems([...items, newItem]);
+    setEditingItemId(newItem.id);
+    setIsEditMode(true);
+  }, [items, handleUpdateItems]);
+  const updateTimelineItem = (index, updates) => {
+    const newItems = [...items];
+    newItems[index] = { ...newItems[index], ...updates };
+    handleUpdateItems(newItems);
+  };
+  const deleteTimelineItem = (index) => {
+    const newItems = items.filter((_, i) => i !== index);
+    handleUpdateItems(newItems);
+    setEditingItemId(null);
+  };
+  return /* @__PURE__ */ jsxs4(NodeViewWrapper4, { className: "timeline-block", children: [
+    /* @__PURE__ */ jsx5(BlockWrapper, { children: /* @__PURE__ */ jsxs4(
+      Paper,
+      {
+        withBorder: true,
+        p: "md",
+        radius: "md",
+        pos: "relative",
+        style: { transition: "border-color 0.2s ease" },
+        children: [
+          /* @__PURE__ */ jsxs4(
+            Group,
+            {
+              gap: 5,
+              pos: "absolute",
+              top: 8,
+              right: 8,
+              style: { zIndex: 10 },
+              children: [
+                /* @__PURE__ */ jsx5(Tooltip, { label: isEditMode ? "Xem tr\u01B0\u1EDBc" : "Ch\u1EC9nh s\u1EEDa", children: /* @__PURE__ */ jsx5(
+                  ActionIcon3,
+                  {
+                    size: "sm",
+                    variant: "subtle",
+                    color: isEditMode ? "blue" : "gray",
+                    onClick: () => {
+                      setIsEditMode(!isEditMode);
+                      setEditingItemId(null);
+                    },
+                    children: isEditMode ? /* @__PURE__ */ jsx5(IconEye, { size: 16 }) : /* @__PURE__ */ jsx5(IconEdit, { size: 16 })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs4(Menu2, { position: "bottom-end", withinPortal: true, shadow: "md", children: [
+                  /* @__PURE__ */ jsx5(Menu2.Target, { children: /* @__PURE__ */ jsx5(ActionIcon3, { size: "sm", variant: "subtle", color: "gray", children: /* @__PURE__ */ jsx5(IconSettings2, { size: 16 }) }) }),
+                  /* @__PURE__ */ jsxs4(Menu2.Dropdown, { children: [
+                    /* @__PURE__ */ jsx5(Menu2.Item, { leftSection: /* @__PURE__ */ jsx5(IconPlus, { size: 14 }), onClick: addTimelineItem, children: "Th\xEAm s\u1EF1 ki\u1EC7n" }),
+                    /* @__PURE__ */ jsx5(Menu2.Divider, {}),
+                    /* @__PURE__ */ jsx5(Menu2.Item, { color: "red", leftSection: /* @__PURE__ */ jsx5(IconTrash2, { size: 14 }), onClick: () => deleteNode(), children: "X\xF3a block" })
+                  ] })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx5(Timeline, { active, bulletSize: 28, lineWidth: 2, children: items.map((item, index) => {
+            const isItemEditing = editingItemId === item.id && isEditMode;
+            return /* @__PURE__ */ jsx5(
+              Timeline.Item,
+              {
+                bullet: /* @__PURE__ */ jsx5(
+                  UnstyledButton,
+                  {
+                    onClick: () => updateAttributes({ active: index }),
+                    style: {
+                      fontSize: rem(10),
+                      fontWeight: 800,
+                      textAlign: "center",
+                      width: "100%"
+                    },
+                    children: index + 1
+                  }
+                ),
+                children: /* @__PURE__ */ jsx5(
+                  Box4,
+                  {
+                    p: "xs",
+                    style: {
+                      borderRadius: "var(--mantine-radius-sm)",
+                      border: isItemEditing ? "1px solid var(--mantine-color-blue-light)" : "1px solid transparent",
+                      backgroundColor: isItemEditing ? "var(--mantine-color-blue-light-hover)" : "transparent",
+                      transition: "all 0.15s ease"
+                    },
+                    children: isItemEditing ? /* @__PURE__ */ jsxs4(Stack, { gap: "xs", children: [
+                      /* @__PURE__ */ jsx5(
+                        TextInput2,
+                        {
+                          variant: "unstyled",
+                          placeholder: "Ng\xE0y th\xE1ng...",
+                          value: item.date,
+                          onChange: (e) => updateTimelineItem(index, { date: e.currentTarget.value }),
+                          size: "xs",
+                          leftSection: /* @__PURE__ */ jsx5(IconCalendar, { size: 14 }),
+                          styles: { input: { minHeight: 0, height: rem(20) } }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx5(
+                        TextInput2,
+                        {
+                          variant: "unstyled",
+                          placeholder: "Ti\xEAu \u0111\u1EC1...",
+                          value: item.title,
+                          onChange: (e) => updateTimelineItem(index, { title: e.currentTarget.value }),
+                          fw: 700,
+                          size: "sm",
+                          styles: { input: { minHeight: 0, height: rem(24), fontSize: rem(15) } }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx5(
+                        Textarea,
+                        {
+                          variant: "unstyled",
+                          placeholder: "M\xF4 t\u1EA3...",
+                          value: item.description,
+                          onChange: (e) => updateTimelineItem(index, { description: e.currentTarget.value }),
+                          size: "sm",
+                          autosize: true,
+                          minRows: 1,
+                          styles: { input: { padding: 0, lineHeight: 1.4 } }
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs4(Group, { justify: "flex-end", gap: 5, children: [
+                        /* @__PURE__ */ jsx5(ActionIcon3, { size: "sm", color: "red", variant: "subtle", onClick: () => deleteTimelineItem(index), children: /* @__PURE__ */ jsx5(IconTrash2, { size: 14 }) }),
+                        /* @__PURE__ */ jsx5(ActionIcon3, { size: "sm", color: "blue", variant: "light", onClick: () => setEditingItemId(null), children: /* @__PURE__ */ jsx5(IconCheck3, { size: 14 }) })
+                      ] })
+                    ] }) : /* @__PURE__ */ jsxs4(
+                      Box4,
+                      {
+                        onClick: () => isEditMode && setEditingItemId(item.id),
+                        style: { cursor: isEditMode ? "pointer" : "default" },
+                        children: [
+                          /* @__PURE__ */ jsx5(Group, { gap: 6, mb: 2, children: item.date ? /* @__PURE__ */ jsx5(Badge, { size: "xs", variant: "dot", color: "blue", children: item.date }) : isEditMode && /* @__PURE__ */ jsx5(Text2, { size: "xs", c: "dimmed", fs: "italic", children: "Th\xEAm ng\xE0y..." }) }),
+                          /* @__PURE__ */ jsx5(Text2, { size: "sm", fw: 700, c: item.title ? "inherit" : "dimmed", children: item.title || (isEditMode ? "Nh\u1EA5n \u0111\u1EC3 nh\u1EADp ti\xEAu \u0111\u1EC1..." : "S\u1EF1 ki\u1EC7n kh\xF4ng t\xEAn") }),
+                          /* @__PURE__ */ jsx5(Text2, { size: "xs", c: "dimmed", lineClamp: 2, mt: 2, children: item.description || (isEditMode ? "Th\xEAm m\xF4 t\u1EA3..." : "") })
+                        ]
+                      }
+                    )
+                  }
+                )
+              },
+              item.id
+            );
+          }) }),
+          isEditMode && /* @__PURE__ */ jsx5(
+            Button,
+            {
+              variant: "subtle",
+              fullWidth: true,
+              mt: "sm",
+              size: "xs",
+              leftSection: /* @__PURE__ */ jsx5(IconPlus, { size: 14 }),
+              onClick: addTimelineItem,
+              color: "blue",
+              children: "Th\xEAm m\u1ED1c th\u1EDDi gian"
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx5("style", { children: `
+        .timeline-block:hover .timeline-toolbar {
+          opacity: 1 !important;
+        }
+        .timeline-block input, .timeline-block textarea {
+          font-family: inherit !important;
+        }
+      ` })
+  ] });
+}
+
+// src/editor/extensions/TimelineExtension.ts
+var TimelineExtension = Node2.create({
+  name: "timeline",
+  group: "block",
+  draggable: true,
+  isolating: true,
+  addAttributes() {
+    return {
+      items: {
+        default: [],
+        parseHTML: (element) => {
+          const json = element.getAttribute("data-items");
+          return json ? JSON.parse(json) : [];
+        },
+        renderHTML: (attributes) => ({
+          "data-items": JSON.stringify(attributes.items)
+        })
+      },
+      active: {
+        default: 0,
+        parseHTML: (element) => parseInt(element.getAttribute("data-active") || "0", 10),
+        renderHTML: (attributes) => ({
+          "data-active": attributes.active
+        })
+      }
+    };
+  },
+  parseHTML() {
+    return [{ tag: 'div[data-type="timeline"]' }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes2(HTMLAttributes, { "data-type": "timeline" })];
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer4(TimelineBlock);
+  },
+  addCommands() {
+    return {
+      setTimeline: () => ({ commands }) => {
+        return commands.insertContent({
+          type: this.name,
+          attrs: {
+            items: [],
+            active: 0
+          }
+        });
+      }
+    };
+  }
+});
+
+// src/editor/extensions/DiagramExtension.ts
+import { Node as Node3, mergeAttributes as mergeAttributes3 } from "@tiptap/core";
+import { ReactNodeViewRenderer as ReactNodeViewRenderer5 } from "@tiptap/react";
+
+// src/editor/blocks/DiagramBlock.tsx
+import { NodeViewWrapper as NodeViewWrapper5 } from "@tiptap/react";
+import {
+  Box as Box5,
+  ActionIcon as ActionIcon4,
+  Menu as Menu3,
+  Textarea as Textarea2,
+  Button as Button2,
+  Text as Text3,
+  Select as Select2,
+  Group as Group2,
+  Alert as Alert2,
+  Paper as Paper2,
+  Tooltip as Tooltip2,
+  useComputedColorScheme,
+  rem as rem2
+} from "@mantine/core";
+import {
+  IconSettings as IconSettings3,
+  IconTrash as IconTrash3,
+  IconChartArea,
+  IconEye as IconEye2,
+  IconCode as IconCode2,
+  IconAlertCircle as IconAlertCircle2,
+  IconDeviceFloppy,
+  IconRefresh
+} from "@tabler/icons-react";
+import { useState as useState3, useEffect, useRef, useCallback as useCallback4 } from "react";
+import mermaid from "mermaid";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var DIAGRAM_TYPES = [
+  { value: "graph", label: "Flowchart", example: "graph TD\n    A[B\u1EAFt \u0111\u1EA7u] --> B{H\u1EE3p l\u1EC7?}\n    B -->|C\xF3| C[X\u1EED l\xFD]\n    B -->|Kh\xF4ng| D[K\u1EBFt th\xFAc]" },
+  { value: "sequenceDiagram", label: "Sequence Diagram", example: "sequenceDiagram\n    Client->>Server: Request\n    Server-->>Client: Response" },
+  { value: "classDiagram", label: "Class Diagram", example: "classDiagram\n    Animal <|-- Duck\n    Animal : +int age\n    Animal: +isAlive()" },
+  { value: "stateDiagram-v2", label: "State Diagram", example: "stateDiagram-v2\n    [*] --> Idle\n    Idle --> Processing\n    Processing --> [*]" },
+  { value: "erDiagram", label: "ER Diagram", example: "erDiagram\n    USER ||--o{ POST : writes" },
+  { value: "pie", label: "Pie Chart", example: 'pie title Th\u1ED1ng k\xEA\n    "Data A" : 45\n    "Data B" : 55' }
+];
+function DiagramBlock({ node, updateAttributes, deleteNode }) {
+  const { code = "", type = "graph" } = node.attrs;
+  const [isEditing, setIsEditing] = useState3(!code);
+  const [previewError, setPreviewError] = useState3(null);
+  const [localCode, setLocalCode] = useState3(code);
+  const mermaidRef = useRef(null);
+  const computedColorScheme = useComputedColorScheme("light");
+  useEffect(() => {
+    mermaid.initialize({
+      startOnLoad: false,
+      theme: computedColorScheme === "dark" ? "dark" : "default",
+      securityLevel: "loose",
+      fontFamily: "inherit",
+      look: "handDrawn"
+    });
+  }, [computedColorScheme]);
+  const renderMermaid = useCallback4(async (codeToRender) => {
+    if (!mermaidRef.current || !codeToRender.trim()) return;
+    try {
+      setPreviewError(null);
+      mermaidRef.current.innerHTML = "";
+      const id = `mermaid-${Math.random().toString(36).substr(2, 9)}`;
+      const { svg } = await mermaid.render(id, codeToRender);
+      if (mermaidRef.current) {
+        mermaidRef.current.innerHTML = svg;
+      }
+    } catch (error) {
+      setPreviewError(error?.str || error?.message || "L\u1ED7i c\xFA ph\xE1p Mermaid");
+    }
+  }, []);
+  useEffect(() => {
+    if (!isEditing && localCode) {
+      renderMermaid(localCode);
+    }
+  }, [isEditing, localCode, renderMermaid, computedColorScheme]);
+  const handleSave = () => {
+    updateAttributes({ code: localCode, type });
+    setIsEditing(false);
+  };
+  const handleTypeChange = (newType) => {
+    if (!newType) return;
+    const selected = DIAGRAM_TYPES.find((t) => t.value === newType);
+    if (selected) {
+      setLocalCode(selected.example);
+      updateAttributes({ code: selected.example, type: newType });
+    }
+  };
+  return /* @__PURE__ */ jsxs5(NodeViewWrapper5, { className: "diagram-block-group", children: [
+    /* @__PURE__ */ jsx6(BlockWrapper, { children: /* @__PURE__ */ jsxs5(
+      Paper2,
+      {
+        withBorder: true,
+        radius: "md",
+        shadow: "sm",
+        pos: "relative",
+        style: { overflow: "hidden" },
+        children: [
+          /* @__PURE__ */ jsxs5(
+            Group2,
+            {
+              justify: "space-between",
+              p: "xs",
+              bg: "var(--mantine-color-default-hover)",
+              style: { borderBottom: "1px solid var(--mantine-color-default-border)" },
+              children: [
+                /* @__PURE__ */ jsxs5(Group2, { gap: "xs", children: [
+                  /* @__PURE__ */ jsx6(IconChartArea, { size: 18, color: "var(--mantine-color-blue-filled)" }),
+                  /* @__PURE__ */ jsx6(Text3, { size: "xs", fw: 700, tt: "uppercase", c: "dimmed", children: DIAGRAM_TYPES.find((t) => t.value === type)?.label || "Diagram" })
+                ] }),
+                /* @__PURE__ */ jsxs5(Group2, { gap: 4, children: [
+                  /* @__PURE__ */ jsx6(Tooltip2, { label: isEditing ? "Xem tr\u01B0\u1EDBc" : "S\u1EEDa code", children: /* @__PURE__ */ jsx6(
+                    ActionIcon4,
+                    {
+                      variant: "subtle",
+                      color: "gray",
+                      onClick: () => setIsEditing(!isEditing),
+                      children: isEditing ? /* @__PURE__ */ jsx6(IconEye2, { size: 18 }) : /* @__PURE__ */ jsx6(IconCode2, { size: 18 })
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxs5(Menu3, { position: "bottom-end", withArrow: true, shadow: "md", children: [
+                    /* @__PURE__ */ jsx6(Menu3.Target, { children: /* @__PURE__ */ jsx6(ActionIcon4, { variant: "subtle", color: "gray", children: /* @__PURE__ */ jsx6(IconSettings3, { size: 18 }) }) }),
+                    /* @__PURE__ */ jsxs5(Menu3.Dropdown, { children: [
+                      /* @__PURE__ */ jsx6(Menu3.Label, { children: "Lo\u1EA1i bi\u1EC3u \u0111\u1ED3" }),
+                      DIAGRAM_TYPES.map((t) => /* @__PURE__ */ jsx6(Menu3.Item, { onClick: () => handleTypeChange(t.value), children: t.label }, t.value)),
+                      /* @__PURE__ */ jsx6(Menu3.Divider, {}),
+                      /* @__PURE__ */ jsx6(
+                        Menu3.Item,
+                        {
+                          color: "red",
+                          leftSection: /* @__PURE__ */ jsx6(IconTrash3, { size: 16 }),
+                          onClick: () => deleteNode(),
+                          children: "X\xF3a bi\u1EC3u \u0111\u1ED3"
+                        }
+                      )
+                    ] })
+                  ] })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx6(Box5, { p: "md", children: isEditing ? /* @__PURE__ */ jsxs5(Box5, { children: [
+            /* @__PURE__ */ jsx6(
+              Select2,
+              {
+                data: DIAGRAM_TYPES,
+                value: type,
+                onChange: handleTypeChange,
+                label: "Ki\u1EC3u bi\u1EC3u \u0111\u1ED3",
+                size: "xs",
+                mb: "sm"
+              }
+            ),
+            /* @__PURE__ */ jsx6(
+              Textarea2,
+              {
+                placeholder: "Nh\u1EADp code Mermaid t\u1EA1i \u0111\xE2y...",
+                value: localCode,
+                onChange: (e) => setLocalCode(e.currentTarget.value),
+                minRows: 6,
+                maxRows: 20,
+                autosize: true,
+                styles: {
+                  input: {
+                    fontFamily: "var(--mantine-font-family-monospace)",
+                    fontSize: rem2(13),
+                    backgroundColor: "var(--mantine-color-body)"
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxs5(Group2, { justify: "flex-end", mt: "md", children: [
+              /* @__PURE__ */ jsx6(
+                Button2,
+                {
+                  variant: "light",
+                  size: "xs",
+                  leftSection: /* @__PURE__ */ jsx6(IconRefresh, { size: 14 }),
+                  onClick: () => setLocalCode(code),
+                  children: "Ho\xE0n t\xE1c"
+                }
+              ),
+              /* @__PURE__ */ jsx6(
+                Button2,
+                {
+                  size: "xs",
+                  leftSection: /* @__PURE__ */ jsx6(IconDeviceFloppy, { size: 14 }),
+                  onClick: handleSave,
+                  children: "L\u01B0u & Hi\u1EC3n th\u1ECB"
+                }
+              )
+            ] })
+          ] }) : /* @__PURE__ */ jsx6(Box5, { children: previewError ? /* @__PURE__ */ jsxs5(Alert2, { icon: /* @__PURE__ */ jsx6(IconAlertCircle2, { size: 16 }), title: "L\u1ED7i c\xFA ph\xE1p", color: "red", children: [
+            /* @__PURE__ */ jsx6(Text3, { size: "xs", style: { whiteSpace: "pre-wrap" }, children: previewError }),
+            /* @__PURE__ */ jsx6(Button2, { size: "compact-xs", color: "red", variant: "light", mt: "sm", onClick: () => setIsEditing(true), children: "S\u1EEDa ngay" })
+          ] }) : /* @__PURE__ */ jsx6(
+            Box5,
+            {
+              ref: mermaidRef,
+              className: "mermaid-render-container",
+              style: {
+                display: "flex",
+                justifyContent: "center",
+                overflowX: "auto",
+                padding: "1rem",
+                borderRadius: "var(--mantine-radius-sm)",
+                backgroundColor: computedColorScheme === "dark" ? "transparent" : "#fff"
+              }
+            }
+          ) }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx6("style", { children: `
+        .mermaid-render-container svg {
+          max-width: 100%;
+          height: auto;
+        }
+        .diagram-block-group {
+          transition: all 0.2s ease;
+        }
+      ` })
+  ] });
+}
+
+// src/editor/extensions/DiagramExtension.ts
+var DiagramExtension = Node3.create({
+  name: "diagram",
+  group: "block",
+  draggable: true,
+  isolating: true,
+  addAttributes() {
+    return {
+      code: {
+        default: "",
+        parseHTML: (element) => element.getAttribute("data-code") || "",
+        renderHTML: (attributes) => ({
+          "data-code": attributes.code || ""
+        })
+      },
+      type: {
+        default: "graph",
+        parseHTML: (element) => element.getAttribute("data-type") || "graph",
+        renderHTML: (attributes) => ({
+          "data-type": attributes.type || "graph"
+        })
+      }
+    };
+  },
+  parseHTML() {
+    return [{ tag: 'div[data-type="diagram"]' }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes3(HTMLAttributes, { "data-type": "diagram" })];
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer5(DiagramBlock);
+  },
+  addCommands() {
+    return {
+      setDiagram: () => ({ commands }) => {
+        return commands.insertContent({
+          type: this.name,
+          attrs: {
+            code: "",
+            type: "graph"
+          }
+        });
+      }
+    };
+  }
+});
+
+// src/editor/hooks/useEditor.ts
+import { Color } from "@tiptap/extension-color";
+import { TextStyle } from "@tiptap/extension-text-style";
+
+// src/editor/extensions/BackgroundColor.ts
+import { Mark, mergeAttributes as mergeAttributes4 } from "@tiptap/core";
+var BackgroundColorMark = Mark.create({
+  name: "backgroundColor",
+  addOptions() {
+    return {
+      HTMLAttributes: {}
+    };
+  },
+  addAttributes() {
+    return {
+      color: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-bg-color") || null,
+        renderHTML: (attributes) => {
+          if (!attributes.color) {
+            return {};
+          }
+          return {
+            "data-bg-color": attributes.color
+          };
+        }
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "span[data-bg-color]"
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes, mark }) {
+    return [
+      "span",
+      mergeAttributes4(HTMLAttributes, { "data-bg-color": mark.attrs.color }),
+      0
+    ];
+  },
+  addCommands() {
+    return {
+      setBackgroundColor: (color) => ({ commands }) => {
+        return commands.setMark(this.name, { color });
+      },
+      unsetBackgroundColor: () => ({ commands }) => {
+        return commands.unsetMark(this.name);
+      }
+    };
+  }
+});
+
+// src/editor/hooks/useEditor.ts
+import TaskList from "@tiptap/extension-task-list";
+import { Markdown } from "tiptap-markdown";
+import { Table, TableRow, TableHeader, TableCell } from "@tiptap/extension-table";
+
+// src/editor/extensions/ImageExtension.ts
+import Image from "@tiptap/extension-image";
+import { ReactNodeViewRenderer as ReactNodeViewRenderer6 } from "@tiptap/react";
+
+// src/editor/blocks/ImageBlock.tsx
+import { useState as useState4, memo as memo3, useCallback as useCallback5, useRef as useRef2, useEffect as useEffect2 } from "react";
+import { NodeViewWrapper as NodeViewWrapper6 } from "@tiptap/react";
+import { ActionIcon as ActionIcon5, Box as Box6, useMantineColorScheme as useMantineColorScheme2, useMantineTheme as useMantineTheme3, Text as Text4 } from "@mantine/core";
+import { IconCheck as IconCheck4, IconCopy as IconCopy2, IconArrowsMaximize } from "@tabler/icons-react";
+import { Fragment, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var RESIZE_HANDLE_SIZE = 12;
+var ImageBlock = memo3(function ImageBlock2({ node, selected, updateAttributes }) {
+  const [copied, setCopied] = useState4(false);
+  const [isResizing, setIsResizing] = useState4(false);
+  const [resizeStart, setResizeStart] = useState4({ x: 0, y: 0, width: 0 });
+  const imgRef = useRef2(null);
+  const { colorScheme } = useMantineColorScheme2();
+  const theme = useMantineTheme3();
+  const isDark = colorScheme === "dark";
+  const src = node.attrs?.src || "";
+  const alt = node.attrs?.alt || "";
+  const width = node.attrs?.width || null;
+  useEffect2(() => {
+    const handleMouseMove = (e) => {
+      if (!isResizing || !imgRef.current) return;
+      const deltaX = e.clientX - resizeStart.x;
+      const newWidth = Math.max(100, resizeStart.width + deltaX);
+      imgRef.current.style.width = `${newWidth}px`;
+    };
+    const handleMouseUp = () => {
+      if (!isResizing || !imgRef.current) return;
+      const currentWidth = imgRef.current.offsetWidth;
+      updateAttributes?.({ width: currentWidth });
+      setIsResizing(false);
+    };
+    if (isResizing) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "ew-resize";
+      document.body.style.userSelect = "none";
+    }
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, [isResizing, resizeStart, updateAttributes]);
+  const handleResizeStart = useCallback5((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!imgRef.current) return;
+    setIsResizing(true);
+    setResizeStart({
+      x: e.clientX,
+      y: e.clientY,
+      width: imgRef.current.offsetWidth
+    });
+  }, []);
+  const handleCopy = useCallback5(async () => {
+    if (!src) return;
+    try {
+      const success = await copyToClipboard(src);
+      if (success) {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+      }
+    } catch (err) {
+      console.error("Copy failed:", err);
+    }
+  }, [src]);
+  const handleResetSize = useCallback5(() => {
+    if (!imgRef.current) return;
+    imgRef.current.style.width = "100%";
+    updateAttributes?.({ width: null });
+  }, [updateAttributes]);
+  return /* @__PURE__ */ jsx7(NodeViewWrapper6, { className: "image-block-wrapper", children: /* @__PURE__ */ jsxs6(
+    Box6,
+    {
+      pos: "relative",
+      display: "inline-block",
+      style: {
+        maxWidth: "100%",
+        borderRadius: 8,
+        overflow: "visible"
+      },
+      children: [
+        selected && /* @__PURE__ */ jsxs6(Fragment, { children: [
+          /* @__PURE__ */ jsxs6(
+            Box6,
+            {
+              pos: "absolute",
+              top: 8,
+              right: 8,
+              style: {
+                zIndex: 2,
+                display: "flex",
+                gap: 4
+              },
+              children: [
+                /* @__PURE__ */ jsx7(
+                  ActionIcon5,
+                  {
+                    color: isDark ? "dark" : "gray",
+                    variant: "filled",
+                    radius: "md",
+                    onClick: handleCopy,
+                    title: copied ? "Copied!" : "Copy image URL",
+                    bg: isDark ? theme.colors.dark[7] : theme.white,
+                    style: {
+                      boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)"
+                    },
+                    children: copied ? /* @__PURE__ */ jsx7(IconCheck4, { color: "green", size: 16 }) : /* @__PURE__ */ jsx7(IconCopy2, { size: 16 })
+                  }
+                ),
+                /* @__PURE__ */ jsx7(
+                  ActionIcon5,
+                  {
+                    color: isDark ? "dark" : "gray",
+                    variant: "filled",
+                    radius: "md",
+                    onClick: handleResetSize,
+                    title: "Reset to original size",
+                    bg: isDark ? theme.colors.dark[7] : theme.white,
+                    style: {
+                      boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)"
+                    },
+                    children: /* @__PURE__ */ jsx7(IconArrowsMaximize, { size: 16 })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx7(
+            Box6,
+            {
+              pos: "absolute",
+              bottom: 0,
+              right: 0,
+              style: {
+                zIndex: 2,
+                width: RESIZE_HANDLE_SIZE,
+                height: RESIZE_HANDLE_SIZE,
+                cursor: "ew-resize",
+                transform: "translate(50%, 50%)"
+              },
+              onMouseDown: handleResizeStart,
+              children: /* @__PURE__ */ jsx7(
+                Box6,
+                {
+                  w: "100%",
+                  h: "100%",
+                  bg: theme.colors.blue[6],
+                  style: {
+                    borderRadius: "50%",
+                    border: `2px solid ${theme.white}`,
+                    boxShadow: "0 1px 4px rgba(0, 0, 0, 0.3)"
+                  }
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx7(
+          "img",
+          {
+            ref: imgRef,
+            src,
+            alt,
+            style: {
+              display: "block",
+              maxWidth: "100%",
+              width: width ? `${width}px` : "100%",
+              height: "auto",
+              borderRadius: 8,
+              border: selected ? `1px solid ${theme.colors.blue[6]}` : "none",
+              boxShadow: selected ? `0 0 0 1px ${theme.colors.blue[6]}` : "none",
+              cursor: isResizing ? "ew-resize" : "default",
+              transition: isResizing ? "none" : "border 0.2s, box-shadow 0.2s"
+            }
+          }
+        ),
+        alt && /* @__PURE__ */ jsx7(
+          Text4,
+          {
+            size: "xs",
+            c: isDark ? theme.colors.dark[2] : theme.colors.gray[6],
+            ta: "center",
+            mt: 4,
+            style: {
+              fontStyle: "italic"
+            },
+            children: alt
+          }
+        )
+      ]
+    }
+  ) });
+});
+ImageBlock.displayName = "ImageBlock";
+
+// src/editor/extensions/ImageExtension.ts
+var ImageExtension = Image.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer6(ImageBlock);
+  },
+  addAttributes() {
+    return {
+      src: {
+        default: null
+      },
+      alt: {
+        default: ""
+      },
+      title: {
+        default: ""
+      },
+      width: {
+        default: null,
+        parseHTML: (el) => el.getAttribute("width") || null,
+        renderHTML: (attrs) => {
+          if (!attrs.width) {
+            return {};
+          }
+          return {
+            width: attrs.width
+          };
+        }
+      }
+    };
+  }
+});
+
+// src/editor/hooks/useEditor.ts
+import BulletList from "@tiptap/extension-bullet-list";
+import OrderedList from "@tiptap/extension-ordered-list";
+import ListItem from "@tiptap/extension-list-item";
+var useEditorWithStorage = ({
+  initialContent,
+  onContentChange,
+  debounceDelay = 500,
+  outputFormat = "html",
+  extensions = [],
+  ...editorOptions
+}) => {
+  const debounceRef = useRef3(null);
+  const initialContentRef = useRef3(initialContent);
+  const hasSetInitialContent = useRef3(false);
+  const isUpdatingRef = useRef3(false);
+  const lastEmittedContentRef = useRef3("");
+  const getContent = (editor2) => {
+    if (outputFormat === "json") {
+      return JSON.stringify(editor2.getJSON());
+    }
+    const content = outputFormat === "markdown" ? serializeToMarkdown(editor2) : editor2.getHTML();
+    return content;
+  };
+  const editor = useEditor({
+    ...editorOptions,
+    extensions: [
+      StarterKit.configure({
+        codeBlock: false,
+        bulletList: false,
+        orderedList: false,
+        listItem: false
+      }),
+      Color,
+      TextStyle,
+      BackgroundColorMark,
+      CodeBlockExtension,
+      BulletList.configure({
+        itemTypeName: "listItem"
+      }),
+      OrderedList.configure({
+        itemTypeName: "listItem"
+      }),
+      ListItem,
+      TaskList.configure({
+        itemTypeName: "taskItem"
+      }),
+      TaskItemExtension.configure({
+        nested: true
+      }),
+      NoticeExtension,
+      TimelineExtension,
+      DiagramExtension,
+      Markdown,
+      Table.configure({
+        resizable: true
+      }),
+      TableRow,
+      TableHeader,
+      TableCell,
+      ImageExtension,
+      ...extensions
+    ],
+    content: (() => {
+      if (initialContent) {
+        try {
+          const parsed = JSON.parse(initialContent);
+          if (parsed.type === "doc") {
+            return parsed;
+          }
+        } catch {
+        }
+      }
+      return initialContent;
+    })(),
+    onCreate: ({ editor: editor2 }) => {
+      if (outputFormat === "json") {
+        lastEmittedContentRef.current = JSON.stringify(editor2.getJSON());
+      } else if (outputFormat === "markdown") {
+        lastEmittedContentRef.current = serializeToMarkdown(editor2);
+      } else {
+        lastEmittedContentRef.current = editor2.getHTML();
+      }
+    },
+    onUpdate: ({ editor: editor2 }) => {
+      if (!onContentChange || isUpdatingRef.current || !hasSetInitialContent.current) return;
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+      debounceRef.current = setTimeout(() => {
+        const newContent = getContent(editor2);
+        if (newContent === lastEmittedContentRef.current) {
+          debug.log("[useEditorWithStorage] Content unchanged, skipping");
+          return;
+        }
+        lastEmittedContentRef.current = newContent;
+        onContentChange(newContent);
+      }, debounceDelay);
+    }
+  });
+  useEffect3(() => {
+    if (!editor) return;
+    if (hasSetInitialContent.current) return;
+    hasSetInitialContent.current = true;
+    lastEmittedContentRef.current = initialContent || "";
+  }, [editor]);
+  useEffect3(() => {
+    if (!editor || !initialContent) return;
+    if (hasSetInitialContent.current) return;
+    const currentContent = outputFormat === "markdown" ? serializeToMarkdown(editor) : editor.getHTML();
+    if (currentContent.trim() !== initialContent.trim()) {
+      try {
+        const jsonContent = JSON.parse(initialContent);
+        editor.commands.setContent(jsonContent);
+      } catch {
+        editor.commands.setContent(initialContent);
+      }
+      hasSetInitialContent.current = true;
+      lastEmittedContentRef.current = initialContent;
+    }
+  }, [editor]);
+  useEffect3(() => {
+    if (!editor || !initialContent) return;
+    if (initialContent === lastEmittedContentRef.current) return;
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+      debounceRef.current = null;
+    }
+    isUpdatingRef.current = true;
+    try {
+      const jsonContent = JSON.parse(initialContent);
+      editor.commands.setContent(jsonContent);
+    } catch {
+      editor.commands.setContent(initialContent);
+    }
+    isUpdatingRef.current = false;
+    initialContentRef.current = initialContent;
+    lastEmittedContentRef.current = initialContent;
+  }, [initialContent, editor]);
+  useEffect3(() => {
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+    };
+  }, []);
+  return editor;
+};
+
+// src/editor/components/TableOfContentsExtension.ts
+import { Extension } from "@tiptap/react";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+var generateId2 = (text, index) => {
+  const base = text.trim().toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "");
+  return base ? `heading-${base}-${index}` : `heading-${index}`;
+};
+var TableOfContents = Extension.create({
+  name: "tableOfContents",
+  addOptions() {
+    return {
+      onUpdate: void 0
+    };
+  },
+  onBeforeCreate() {
+    setTimeout(() => {
+      const headings = [];
+      const { doc } = this.editor.state;
+      const headingCounters = {};
+      doc.descendants((node, pos) => {
+        if (node.type.name === "heading") {
+          const level = node.attrs.level || 1;
+          if (!headingCounters[level]) {
+            headingCounters[level] = 0;
+          }
+          headingCounters[level]++;
+          const existingId = node.attrs.id;
+          const id = existingId || generateId2(node.textContent, headingCounters[level]);
+          headings.push({
+            id,
+            text: node.textContent,
+            level,
+            pos
+          });
+        }
+      });
+      if (this.options.onUpdate && headings.length > 0) {
+        this.options.onUpdate(headings);
+      }
+    }, 0);
+  },
+  addProseMirrorPlugins() {
+    const { editor } = this;
+    const getHeadings = () => {
+      const headings = [];
+      const { doc } = editor.state;
+      const headingCounters = {};
+      doc.descendants((node, pos) => {
+        if (node.type.name === "heading") {
+          const level = node.attrs.level || 1;
+          if (!headingCounters[level]) {
+            headingCounters[level] = 0;
+          }
+          headingCounters[level]++;
+          const existingId = node.attrs.id;
+          const id = existingId || generateId2(node.textContent, headingCounters[level]);
+          headings.push({
+            id,
+            text: node.textContent,
+            level,
+            pos
+          });
+        }
+      });
+      return headings;
+    };
+    const updateHeadings = () => {
+      const headings = getHeadings();
+      if (this.options.onUpdate) {
+        this.options.onUpdate(headings);
+      }
+    };
+    return [
+      new Plugin({
+        key: new PluginKey("tableOfContents"),
+        onTransaction({ transaction }) {
+          if (transaction.docChanged || transaction.selectionSet) {
+            setTimeout(updateHeadings, 0);
+          }
+        }
+      })
+    ];
+  }
+});
+var TableOfContentsExtension_default = TableOfContents;
+
+// src/editor/components/TableOfContents.tsx
+import { memo as memo5, useState as useState6, useEffect as useEffect5, useRef as useRef5, useCallback as useCallback7 } from "react";
+import { Box as Box7, Text as Text5, ScrollArea, Popover, useMantineTheme as useMantineTheme5 } from "@mantine/core";
+import { IconList } from "@tabler/icons-react";
+
+// src/editor/components/ReadingIndicator.tsx
+import {
+  memo as memo4,
+  useState as useState5,
+  useRef as useRef4,
+  useCallback as useCallback6,
+  useEffect as useEffect4
+} from "react";
+import { useMantineTheme as useMantineTheme4 } from "@mantine/core";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var INDICATOR_RIGHT = 22;
+var INDICATOR_TOP = 420;
+var INDICATOR_MAX_H = "44vh";
+var BAR_WIDTH = 38;
+var BAR_HEIGHT = 5;
+var BAR_RADIUS = 999;
+var BAR_GAP = 6;
+var TOOLTIP_GAP = 10;
+var TOOLTIP_MAX_WIDTH = 240;
+var HeadingBar = memo4(function HeadingBar2({
+  heading,
+  isActive,
+  isDark,
+  onNavigate,
+  onHoverEnter,
+  onHoverLeave,
+  barRef
+}) {
+  const wrapperRef = useRef4(null);
+  const activeColor = "#D4A017";
+  const inactiveColor = isDark ? "rgba(255,255,255,0.18)" : "rgba(0,0,0,0.14)";
+  const handleMouseEnter = useCallback6(() => {
+    if (wrapperRef.current) onHoverEnter(heading, wrapperRef.current);
+  }, [heading, onHoverEnter]);
+  const handleFocus = useCallback6(() => {
+    if (wrapperRef.current) onHoverEnter(heading, wrapperRef.current);
+  }, [heading, onHoverEnter]);
+  const handleTouchStart = useCallback6((e) => {
+    e.preventDefault();
+    if (wrapperRef.current) onHoverEnter(heading, wrapperRef.current);
+  }, [heading, onHoverEnter]);
+  const handleKeyDown = useCallback6((e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onNavigate(heading);
+    }
+    if (e.key === "Escape") {
+      onHoverLeave();
+      e.currentTarget.blur();
+    }
+  }, [heading, onNavigate, onHoverLeave]);
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      ref: (el) => {
+        wrapperRef.current = el;
+        barRef?.(el);
+      },
+      role: "menuitem",
+      tabIndex: 0,
+      "aria-label": heading.text || "(Empty heading)",
+      "aria-current": isActive ? "location" : void 0,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: onHoverLeave,
+      onFocus: handleFocus,
+      onBlur: onHoverLeave,
+      onTouchStart: handleTouchStart,
+      onClick: () => onNavigate(heading),
+      onKeyDown: handleKeyDown,
+      style: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        width: "100%",
+        padding: "4px 0",
+        cursor: "pointer",
+        outline: "none",
+        WebkitTapHighlightColor: "transparent",
+        boxSizing: "border-box"
+      },
+      children: /* @__PURE__ */ jsx8(
+        "div",
+        {
+          style: {
+            width: BAR_WIDTH,
+            height: BAR_HEIGHT,
+            borderRadius: BAR_RADIUS,
+            overflow: "hidden",
+            pointerEvents: "none",
+            boxShadow: isActive ? isDark ? "0 0 6px rgba(255,140,0,0.45), 0 1px 3px rgba(255,140,0,0.25)" : "0 0 5px rgba(255,120,0,0.35), 0 1px 2px rgba(255,120,0,0.20)" : "none"
+          },
+          children: /* @__PURE__ */ jsx8(
+            "div",
+            {
+              style: {
+                width: "100%",
+                height: "100%",
+                borderRadius: BAR_RADIUS,
+                backgroundColor: isActive ? activeColor : inactiveColor,
+                opacity: isActive ? 1 : 0.38,
+                transition: "background-color 200ms ease, opacity 200ms ease, transform 200ms ease",
+                transform: isActive ? "scaleX(1.2)" : "scaleX(1)",
+                transformOrigin: "center center",
+                willChange: "transform"
+              }
+            }
+          )
+        }
+      )
+    }
+  );
+});
+HeadingBar.displayName = "HeadingBar";
+var ReadingIndicator = memo4(function ReadingIndicator2({
+  headings,
+  activeIndex,
+  isDark,
+  onNavigate
+}) {
+  const theme = useMantineTheme4();
+  const navRef = useRef4(null);
+  const barRefs = useRef4(/* @__PURE__ */ new Map());
+  const [tooltip, setTooltip] = useState5({ visible: false, text: "", y: 0 });
+  const hideTimer = useRef4(null);
+  const handleHoverEnter = useCallback6((heading, el) => {
+    if (hideTimer.current) {
+      clearTimeout(hideTimer.current);
+      hideTimer.current = null;
+    }
+    const rect = el.getBoundingClientRect();
+    setTooltip({
+      visible: true,
+      text: heading.text || "(Empty heading)",
+      y: rect.top + rect.height / 2
+    });
+  }, []);
+  const handleHoverLeave = useCallback6(() => {
+    hideTimer.current = setTimeout(() => setTooltip((t) => ({ ...t, visible: false })), 160);
+  }, []);
+  useEffect4(() => () => {
+    if (hideTimer.current) clearTimeout(hideTimer.current);
+  }, []);
+  const setBarRef = useCallback6((index) => (el) => {
+    if (el) barRefs.current.set(index, el);
+    else barRefs.current.delete(index);
+  }, []);
+  useEffect4(() => {
+    const nav = navRef.current;
+    const el = barRefs.current.get(activeIndex);
+    if (!nav || !el || activeIndex < 0) return;
+    const navRect = nav.getBoundingClientRect();
+    const elRect = el.getBoundingClientRect();
+    const isAbove = elRect.top < navRect.top;
+    const isBelow = elRect.bottom > navRect.bottom;
+    if (!isAbove && !isBelow) return;
+    const targetScrollTop = nav.scrollTop + (elRect.top - navRect.top) - navRect.height / 2 + elRect.height / 2;
+    nav.scrollTo({ top: targetScrollTop, behavior: "smooth" });
+  }, [activeIndex]);
+  const handleContainerKeyDown = useCallback6((e) => {
+    if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+    e.preventDefault();
+    const focused = document.activeElement;
+    const bars = navRef.current?.querySelectorAll('[role="menuitem"]');
+    if (!bars) return;
+    const arr = Array.from(bars);
+    const idx = arr.indexOf(focused);
+    if (idx === -1) return;
+    const next = e.key === "ArrowDown" ? arr[Math.min(idx + 1, arr.length - 1)] : arr[Math.max(idx - 1, 0)];
+    next?.focus();
+  }, []);
+  useEffect4(() => {
+    const handleOutside = (e) => {
+      if (navRef.current?.contains(e.target)) return;
+      setTooltip((t) => ({ ...t, visible: false }));
+      const focused = document.activeElement;
+      if (navRef.current?.contains(focused)) focused.blur();
+    };
+    document.addEventListener("mousedown", handleOutside, { passive: true });
+    document.addEventListener("touchstart", handleOutside, { passive: true });
+    return () => {
+      document.removeEventListener("mousedown", handleOutside);
+      document.removeEventListener("touchstart", handleOutside);
+    };
+  }, []);
+  if (headings.length === 0) return null;
+  const tooltipBg = isDark ? theme.colors.dark[6] : "#ffffff";
+  const tooltipBorder = isDark ? theme.colors.dark[4] : theme.colors.gray[3];
+  const tooltipText = isDark ? theme.colors.gray[1] : theme.colors.dark[7];
+  const tooltipRight = INDICATOR_RIGHT + BAR_WIDTH + TOOLTIP_GAP;
+  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          right: INDICATOR_RIGHT,
+          top: INDICATOR_TOP,
+          width: BAR_WIDTH,
+          zIndex: 10,
+          display: "flex",
+          flexDirection: "column",
+          pointerEvents: "none"
+        },
+        children: [
+          /* @__PURE__ */ jsx8("style", { children: `nav.ri-nav::-webkit-scrollbar { display: none; }` }),
+          /* @__PURE__ */ jsx8(
+            "nav",
+            {
+              ref: navRef,
+              role: "navigation",
+              "aria-label": "Document section navigator",
+              className: "ri-nav",
+              onKeyDown: handleContainerKeyDown,
+              style: {
+                width: BAR_WIDTH,
+                maxHeight: INDICATOR_MAX_H,
+                overflowY: "auto",
+                overflowX: "visible",
+                overscrollBehavior: "contain",
+                pointerEvents: "auto",
+                scrollbarWidth: "none",
+                msOverflowStyle: "none",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "flex-end",
+                gap: BAR_GAP,
+                paddingTop: 2,
+                paddingBottom: 2
+              },
+              children: headings.map((heading, index) => /* @__PURE__ */ jsx8(
+                HeadingBar,
+                {
+                  heading,
+                  isActive: index === activeIndex,
+                  isDark,
+                  onNavigate,
+                  onHoverEnter: handleHoverEnter,
+                  onHoverLeave: handleHoverLeave,
+                  barRef: setBarRef(index)
+                },
+                `${heading.id}-${index}`
+              ))
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      "div",
+      {
+        role: "tooltip",
+        "aria-live": "polite",
+        style: {
+          position: "fixed",
+          right: tooltipRight,
+          top: tooltip.y,
+          transform: tooltip.visible ? "translateY(-50%)" : "translateY(-50%) translateX(6px)",
+          zIndex: 400,
+          pointerEvents: "none",
+          opacity: tooltip.visible ? 1 : 0,
+          transition: "opacity 160ms ease, transform 160ms ease",
+          willChange: "opacity, transform",
+          maxWidth: TOOLTIP_MAX_WIDTH,
+          whiteSpace: "nowrap"
+        },
+        children: /* @__PURE__ */ jsx8(
+          "div",
+          {
+            style: {
+              background: tooltipBg,
+              border: `1px solid ${tooltipBorder}`,
+              borderRadius: 7,
+              padding: "4px 10px",
+              boxShadow: isDark ? "0 4px 16px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3)" : "0 4px 16px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.07)",
+              color: tooltipText,
+              fontSize: 12,
+              fontWeight: 500,
+              lineHeight: 1.4,
+              maxWidth: TOOLTIP_MAX_WIDTH,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              letterSpacing: "0.01em"
+            },
+            children: tooltip.text
+          }
+        )
+      }
+    )
+  ] });
+});
+ReadingIndicator.displayName = "ReadingIndicator";
+
+// src/editor/components/TableOfContents.tsx
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var TableOfContentsPanel = memo5(({ headings, editor }) => {
+  const theme = useMantineTheme5();
+  const { currentTheme } = useTheme();
+  const isDark = currentTheme === "dark";
+  const [opened, setOpened] = useState6(false);
+  const [activeId, setActiveId] = useState6(null);
+  const targetRef = useRef5(null);
+  const isProgrammaticScrollRef = useRef5(false);
+  const ignoreBottomDetectionRef = useRef5(false);
+  const lastClickedHeadingIdRef = useRef5(null);
+  const computeActiveHeading = useCallback7(() => {
+    if (isProgrammaticScrollRef.current) return;
+    if (!editor?.view) return;
+    const editorDom = editor.view.dom;
+    const headingEls = editorDom.querySelectorAll("h1,h2,h3,h4,h5,h6");
+    if (headingEls.length === 0 || headings.length === 0) return;
+    const THRESHOLD = 80;
+    const tops = Array.from(headingEls).map(
+      (el) => el.getBoundingClientRect().top
+    );
+    let isAtBottom = false;
+    let parent = editorDom.parentElement;
+    while (parent) {
+      const style = window.getComputedStyle(parent);
+      const overflowY = style.overflowY;
+      const isScrollable = overflowY === "auto" || overflowY === "scroll";
+      if (isScrollable && parent.scrollHeight > parent.clientHeight + 10) {
+        if (Math.ceil(parent.scrollTop + parent.clientHeight) >= parent.scrollHeight - 10) {
+          isAtBottom = true;
+        }
+        break;
+      }
+      parent = parent.parentElement;
+    }
+    if (!isAtBottom || ignoreBottomDetectionRef.current) {
+      const docEl = document.documentElement;
+      if (docEl.scrollHeight > window.innerHeight + 10) {
+        if (Math.ceil(window.innerHeight + window.scrollY) >= docEl.scrollHeight - 10) {
+          isAtBottom = true;
+        }
+      }
+    }
+    let bestIdx = -1;
+    if (isAtBottom) {
+      if (lastClickedHeadingIdRef.current) {
+        const clickedIdx = headings.findIndex((h) => h.id === lastClickedHeadingIdRef.current);
+        if (clickedIdx !== -1) {
+          bestIdx = clickedIdx;
+        } else {
+          bestIdx = headings.length - 1;
+        }
+      } else {
+        bestIdx = headings.length - 1;
+      }
+    } else {
+      for (let i = tops.length - 1; i >= 0; i--) {
+        if (tops[i] <= THRESHOLD) {
+          bestIdx = i;
+          break;
+        }
+      }
+      if (bestIdx === -1) {
+        const viewportH = window.innerHeight;
+        let closestTop = Infinity;
+        for (let i = 0; i < tops.length; i++) {
+          if (tops[i] < viewportH && tops[i] < closestTop) {
+            closestTop = tops[i];
+            bestIdx = i;
+          }
+        }
+        if (bestIdx === -1) bestIdx = 0;
+      }
+    }
+    const matched = headings[bestIdx];
+    if (matched) setActiveId(matched.id);
+  }, [editor, headings]);
+  const computeActiveHeadingByCursor = useCallback7(() => {
+    if (isProgrammaticScrollRef.current) return;
+    if (!editor?.view) return;
+    const { state } = editor;
+    const cursorPos = state.selection.anchor;
+    let bestIdx = -1;
+    for (let i = headings.length - 1; i >= 0; i--) {
+      if (headings[i].pos <= cursorPos) {
+        bestIdx = i;
+        break;
+      }
+    }
+    if (bestIdx >= 0 && headings[bestIdx]) {
+      setActiveId(headings[bestIdx].id);
+      lastClickedHeadingIdRef.current = headings[bestIdx].id;
+    }
+  }, [editor, headings]);
+  const computeActiveHeadingRef = useRef5(computeActiveHeading);
+  const computeActiveHeadingByCursorRef = useRef5(computeActiveHeadingByCursor);
+  useEffect5(() => {
+    computeActiveHeadingRef.current = computeActiveHeading;
+    computeActiveHeadingByCursorRef.current = computeActiveHeadingByCursor;
+  });
+  useEffect5(() => {
+    if (!editor?.view) return;
+    let rafId = 0;
+    const onScroll = () => {
+      if (rafId) return;
+      rafId = requestAnimationFrame(() => {
+        computeActiveHeadingRef.current();
+        rafId = 0;
+      });
+    };
+    window.addEventListener("scroll", onScroll, { capture: true, passive: true });
+    window.addEventListener("resize", onScroll, { passive: true });
+    const initId = setTimeout(() => {
+      computeActiveHeadingRef.current();
+    }, 200);
+    return () => {
+      clearTimeout(initId);
+      if (rafId) cancelAnimationFrame(rafId);
+      window.removeEventListener("scroll", onScroll, { capture: true });
+      window.removeEventListener("resize", onScroll);
+    };
+  }, [editor]);
+  useEffect5(() => {
+    computeActiveHeadingRef.current();
+  }, [headings]);
+  useEffect5(() => {
+    if (!editor) return;
+    const handler = () => {
+      if (!isProgrammaticScrollRef.current) {
+        computeActiveHeadingByCursorRef.current();
+      }
+    };
+    editor.on("selectionUpdate", handler);
+    return () => editor.off("selectionUpdate", handler);
+  }, [editor]);
+  useEffect5(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape" && opened) setOpened(false);
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [opened]);
+  useEffect5(() => {
+    const clearLastClicked = () => {
+      lastClickedHeadingIdRef.current = null;
+    };
+    window.addEventListener("wheel", clearLastClicked, { passive: true });
+    window.addEventListener("touchmove", clearLastClicked, { passive: true });
+    window.addEventListener("keydown", clearLastClicked, { passive: true });
+    window.addEventListener("mousedown", clearLastClicked, { passive: true });
+    return () => {
+      window.removeEventListener("wheel", clearLastClicked);
+      window.removeEventListener("touchmove", clearLastClicked);
+      window.removeEventListener("keydown", clearLastClicked);
+      window.removeEventListener("mousedown", clearLastClicked);
+    };
+  }, []);
+  const handleClick = useCallback7((heading) => {
+    if (!editor) return;
+    const { pos } = heading;
+    setActiveId(heading.id);
+    lastClickedHeadingIdRef.current = heading.id;
+    isProgrammaticScrollRef.current = true;
+    ignoreBottomDetectionRef.current = true;
+    editor.chain().focus().setTextSelection(pos).run();
+    setTimeout(() => {
+      const node = editor.view.nodeDOM(pos);
+      if (node) node.scrollIntoView({ behavior: "smooth", block: "start" });
+      setTimeout(() => {
+        isProgrammaticScrollRef.current = false;
+        ignoreBottomDetectionRef.current = false;
+        computeActiveHeadingRef.current();
+      }, 650);
+    }, 50);
+  }, [editor]);
+  const getIndent = (level) => level === 1 ? 5 : (level - 1) * 12;
+  const getHeadingPrefix = (level, index) => {
+    const previousHeadings = headings.slice(0, index);
+    let parentIndex = -1;
+    for (let i = previousHeadings.length - 1; i >= 0; i--) {
+      if (previousHeadings[i].level < level) {
+        parentIndex = i;
+        break;
+      }
+    }
+    const sameLevelAfterParent = previousHeadings.slice(parentIndex + 1).filter((h) => h.level === level).length + 1;
+    switch (level) {
+      case 1:
+        return " ";
+      case 2: {
+        const roman = ["I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X"];
+        return sameLevelAfterParent <= 10 ? `${roman[sameLevelAfterParent - 1]}.` : `${sameLevelAfterParent}.`;
+      }
+      case 3:
+        return `${sameLevelAfterParent}.`;
+      case 4:
+        return ">";
+      case 5:
+        return "-";
+      case 6:
+        return "*";
+      default:
+        return `${sameLevelAfterParent}.`;
+    }
+  };
+  const getHeadingColor = (level) => {
+    const colors = {
+      1: "#cca415",
+      2: "#2989d8",
+      3: "#c7701f",
+      4: "#188831",
+      5: "#d31f1f",
+      6: "#149cb1"
+    };
+    return colors[level] || "inherit";
+  };
+  const buttonBackground = isDark ? theme.colors.dark[9] : theme.colors.blue[0];
+  const buttonBackgroundOpened = isDark ? theme.colors.blue[8] : theme.colors.blue[1];
+  const borderColor = isDark ? theme.colors.dark[4] : theme.colors.gray[3];
+  const iconColor = isDark ? theme.colors.blue[3] : theme.colors.dark[9];
+  const iconColorOpened = isDark ? theme.colors.blue[2] : theme.colors.blue[7];
+  const dropdownBackground = isDark ? "#1d1d1d" : "#ffffff";
+  const activeItemBackground = isDark ? theme.colors.dark[5] : theme.colors.blue[0];
+  const hoverItemBackground = isDark ? theme.colors.dark[6] : theme.colors.gray[1];
+  const activeIndex = headings.findIndex((h) => h.id === activeId);
+  if (headings.length === 0) return null;
+  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+    /* @__PURE__ */ jsx9(
+      ReadingIndicator,
+      {
+        headings,
+        activeIndex,
+        isDark,
+        onNavigate: handleClick
+      }
+    ),
+    /* @__PURE__ */ jsxs8(
+      Popover,
+      {
+        opened,
+        onChange: setOpened,
+        position: "left-start",
+        offset: 10,
+        withArrow: true,
+        shadow: "md",
+        withinPortal: true,
+        closeOnClickOutside: true,
+        styles: {
+          dropdown: {
+            padding: 0,
+            overflow: "hidden",
+            borderRadius: theme.radius.lg,
+            border: `1px solid ${borderColor}`
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx9(Popover.Target, { children: /* @__PURE__ */ jsx9(
+            Box7,
+            {
+              ref: targetRef,
+              onClick: (e) => {
+                e.stopPropagation();
+                setOpened((o) => !o);
+              },
+              style: {
+                position: "fixed",
+                right: 18,
+                top: 65,
+                width: 42,
+                height: 42,
+                borderRadius: "22px",
+                background: opened ? buttonBackgroundOpened : buttonBackground,
+                border: `1px solid ${borderColor}`,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                cursor: "pointer",
+                zIndex: 100,
+                transition: "all 0.2s ease",
+                boxShadow: opened ? `0 2px 8px ${isDark ? "rgba(0,0,0,0.3)" : "rgba(0,0,0,0.15)"}` : `0 1px 3px ${isDark ? "rgba(0,0,0,0.3)" : "rgba(0,0,0,0.1)"}`
+              },
+              title: "Table of contents",
+              children: /* @__PURE__ */ jsx9(
+                IconList,
+                {
+                  size: 20,
+                  color: opened ? iconColorOpened : iconColor,
+                  stroke: 1.5
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsx9(Popover.Dropdown, { bg: dropdownBackground, children: /* @__PURE__ */ jsx9(
+            Box7,
+            {
+              style: {
+                width: "auto",
+                minWidth: 400,
+                display: "flex",
+                flexDirection: "column",
+                backgroundColor: dropdownBackground
+              },
+              children: /* @__PURE__ */ jsx9(
+                ScrollArea.Autosize,
+                {
+                  mah: 520,
+                  scrollbarSize: 4,
+                  offsetScrollbars: false,
+                  type: "hover",
+                  styles: {
+                    scrollbar: {
+                      '&[data-orientation="vertical"]': { padding: 0, right: 2 }
+                    },
+                    thumb: {
+                      backgroundColor: isDark ? theme.colors.dark[3] : theme.colors.gray[5]
+                    }
+                  },
+                  children: /* @__PURE__ */ jsx9(Box7, { px: 12, py: 15, children: headings.map((heading, index) => /* @__PURE__ */ jsx9(
+                    Box7,
+                    {
+                      style: {
+                        padding: "5px 5px",
+                        paddingLeft: `${getIndent(heading.level)}px`,
+                        borderRadius: theme.radius.md,
+                        cursor: "pointer",
+                        background: activeId === heading.id ? activeItemBackground : "transparent",
+                        borderLeft: activeId === heading.id ? `3px solid ${theme.colors.blue[6]}` : "3px solid transparent",
+                        transition: "all 0.15s ease",
+                        marginBottom: 2
+                      },
+                      onClick: () => handleClick(heading),
+                      onMouseEnter: (e) => {
+                        if (activeId !== heading.id) e.currentTarget.style.background = hoverItemBackground;
+                      },
+                      onMouseLeave: (e) => {
+                        if (activeId !== heading.id) e.currentTarget.style.background = "transparent";
+                      },
+                      children: /* @__PURE__ */ jsxs8(
+                        Text5,
+                        {
+                          size: "sm",
+                          truncate: true,
+                          style: {
+                            color: getHeadingColor(heading.level),
+                            fontWeight: heading.level <= 2 ? 600 : 400,
+                            fontSize: heading.level <= 2 ? "15px" : "13px",
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "4px"
+                          },
+                          children: [
+                            getHeadingPrefix(heading.level, index) && /* @__PURE__ */ jsx9(
+                              Text5,
+                              {
+                                component: "span",
+                                size: "xs",
+                                style: {
+                                  color: getHeadingColor(heading.level),
+                                  fontWeight: 500,
+                                  whiteSpace: "nowrap"
+                                },
+                                children: getHeadingPrefix(heading.level, index)
+                              }
+                            ),
+                            heading.text || "(Empty heading)"
+                          ]
+                        }
+                      )
+                    },
+                    `${heading.id}-${index}`
+                  )) })
+                }
+              )
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+});
+TableOfContentsPanel.displayName = "TableOfContentsPanel";
+
+// src/editor/hooks/pasteHandler.ts
+import TurndownService from "turndown";
+var turndown = new TurndownService({
+  headingStyle: "atx",
+  codeBlockStyle: "fenced",
+  hr: "---"
+});
+turndown.addRule("taskListCheckbox", {
+  filter: (node) => {
+    const hasCheckbox = node.querySelector('input[type="checkbox"]') !== null;
+    return hasCheckbox;
+  },
+  replacement: (content, node) => {
+    const checkbox = node.querySelector('input[type="checkbox"]');
+    const checked = checkbox?.checked || checkbox?.getAttribute("checked") !== null;
+    const text = content.replace(/^\s*\[[ xX]\]\s*/, "").trim();
+    const contentText = text || "\u200B";
+    return `- [${checked ? "x" : " "}] ${contentText}
+`;
+  }
+});
+turndown.addRule("taskListText", {
+  filter: (node) => {
+    if (node.nodeName !== "LI") return false;
+    const text = node.textContent || "";
+    return /^\s*\[[ xX]\]/.test(text);
+  },
+  replacement: (_content, node) => {
+    const text = node.textContent || "";
+    const match = text.match(/^\s*\[([ xX])\]\s*(.*)/);
+    if (!match) return "";
+    const checked = match[1].toLowerCase() === "x";
+    const cleanText = match[2].trim();
+    const content = cleanText || "\u200B";
+    return `- [${checked ? "x" : " "}] ${content}
+`;
+  }
+});
+turndown.addRule("listItem", {
+  filter: (node) => {
+    if (node.nodeName !== "LI") return false;
+    const text = node.textContent || "";
+    if (/^\s*\[[ xX]\]/.test(text)) return false;
+    if (node.querySelector('input[type="checkbox"]')) return false;
+    return true;
+  },
+  replacement: (content, node) => {
+    const parent = node.parentNode;
+    if (parent.nodeName === "OL") {
+      const startAttr = parent.getAttribute("start");
+      let number;
+      if (startAttr) {
+        number = parseInt(startAttr, 10);
+      } else {
+        const items = Array.from(parent.children).filter((child) => child.nodeName === "LI");
+        number = items.indexOf(node) + 1;
+      }
+      return `${number}. ${content.trim()}
+`;
+    }
+    return "- " + content.trim() + "\n";
+  }
+});
+turndown.addRule("table", {
+  filter: "table",
+  replacement: (_content, node) => {
+    const rows = node.querySelectorAll("tr");
+    if (!rows.length) return "\n\n";
+    const markdownRows = [];
+    let hasTh = false;
+    for (const row of rows) {
+      const cells = row.querySelectorAll("th, td");
+      if (!cells.length) continue;
+      const isHeader = !hasTh && row.querySelector("th") !== null;
+      if (isHeader) hasTh = true;
+      const cellTexts = Array.from(
+        cells,
+        (cell) => (cell.textContent || "").trim().replace(/\|/g, "\\|")
+      );
+      markdownRows.push("| " + cellTexts.join(" | ") + " |");
+      if (isHeader) {
+        markdownRows.push("| " + cellTexts.map(() => "---").join(" | ") + " |");
+      }
+    }
+    if (!hasTh && markdownRows.length > 0) {
+      const colCount = rows[0].querySelectorAll("th, td").length;
+      markdownRows.splice(1, 0, "| " + Array.from({ length: colCount }, () => "---").join(" | ") + " |");
+    }
+    return "\n" + markdownRows.join("\n") + "\n";
+  }
+});
+["TH", "TD"].forEach(
+  (tag) => turndown.addRule(`tableCell_${tag}`, {
+    filter: (node) => node.nodeName === tag,
+    replacement: (content) => content
+  })
+);
+["THEAD", "TBODY", "TFOOT", "TR"].forEach(
+  (tag) => turndown.addRule(`tableSection_${tag}`, {
+    filter: (node) => node.nodeName === tag,
+    replacement: (content) => content
+  })
+);
+turndown.addRule("colorSpan", {
+  filter: (node) => node.nodeName === "SPAN" && !!node.style.color,
+  replacement: (content, node) => {
+    return `<span style="color: ${node.style.color}">${content}</span>`;
+  }
+});
+var handlePaste = (editor, event) => {
+  const clipboard = event.clipboardData;
+  if (!clipboard) return false;
+  const html = clipboard.getData("text/html");
+  const text = clipboard.getData("text/plain");
+  for (const item of clipboard.items) {
+    if (item.type.startsWith("image")) {
+      const file = item.getAsFile();
+      if (file && editor) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          editor.chain().focus().setImage({ src: e.target?.result }).run();
+        };
+        reader.readAsDataURL(file);
+        event.preventDefault();
+        return true;
+      }
+    }
+  }
+  if (html && editor) {
+    const markdown = turndown.turndown(html).replace(/\n{3,}/g, "\n\n");
+    editor.chain().focus().insertContent(markdown).run();
+    event.preventDefault();
+    return true;
+  }
+  if (text && editor) {
+    editor.chain().focus().insertContent(text).run();
+    event.preventDefault();
+    return true;
+  }
+  return false;
+};
+
+// src/editor/MarkdownEditor.tsx
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+var MarkdownEditor = memo6(function MarkdownEditor2({
+  initialContent = "<p></p>",
+  onChange,
+  outputFormat = "json",
+  showTableOfContents = true,
+  showHeadingDividers = true,
+  minHeight = 200,
+  editable = true
+}) {
+  const [headings, setHeadings] = useState7([]);
+  const handleHeadingsUpdate = useCallback8((newHeadings) => {
+    setHeadings(newHeadings);
+  }, []);
+  const slashCommand = useMemo2(() => {
+    return createSlashCommand({
+      char: "/",
+      items: ({ editor: editor2, query }) => {
+        const blocks = getDefaultBlockItems(editor2);
+        if (!query) return blocks;
+        return blocks.filter(
+          (item) => item.title.toLowerCase().includes(query.toLowerCase()) || item.description?.toLowerCase().includes(query.toLowerCase()) || item.keywords?.some((k) => k.toLowerCase().includes(query.toLowerCase()))
+        );
+      }
+    });
+  }, []);
+  const editor = useEditorWithStorage({
+    initialContent,
+    onContentChange: onChange,
+    outputFormat,
+    extensions: [
+      ...showHeadingDividers ? [] : [],
+      ...showTableOfContents ? [TableOfContentsExtension_default.configure({ onUpdate: handleHeadingsUpdate })] : [],
+      slashCommand
+    ],
+    editable,
+    editorProps: {
+      attributes: {
+        spellCheck: "false",
+        style: "outline:none;border:none;font-size: 15px;"
+      },
+      handleDOMEvents: {
+        paste: (_view, event) => {
+          return handlePaste(editor, event);
+        }
+      }
+    }
+  });
+  useEffect6(() => {
+    if (editor) {
+      editor.setEditable(editable);
+    }
+  }, [editor, editable]);
+  const { colorScheme: rawColorScheme } = useMantineColorScheme3();
+  const theme = useMantineTheme6();
+  const colorScheme = resolveColorScheme(rawColorScheme);
+  const bgColor = colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[0];
+  if (!editor) return null;
+  return /* @__PURE__ */ jsxs9(Card, { shadow: "sm", padding: "md", radius: "18px", bg: bgColor, withBorder: true, style: { position: "relative" }, children: [
+    showTableOfContents && /* @__PURE__ */ jsx10(TableOfContentsPanel, { headings, editor }),
+    /* @__PURE__ */ jsx10(EditorContent, { editor, minHeight }),
+    /* @__PURE__ */ jsx10(BubbleMenu, { editor })
+  ] });
+});
+MarkdownEditor.displayName = "MarkdownEditor";
+var MarkdownEditor_default = MarkdownEditor;
+
+// src/modals/DocumentEditor.tsx
+import { useState as useState8, useEffect as useEffect7 } from "react";
+import {
+  Group as Group3,
+  Text as Text6,
+  Box as Box8,
+  Modal,
+  Button as Button3,
+  Select as Select3,
+  Stack as Stack2,
+  Textarea as Textarea3,
+  Alert as Alert3,
+  useMantineTheme as useMantineTheme7,
+  useMantineColorScheme as useMantineColorScheme4
+} from "@mantine/core";
+import { IconSparkles, IconAlertCircle as IconAlertCircle3 } from "@tabler/icons-react";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+function DocumentEditor({ editor, opened, onClose }) {
+  const theme = useMantineTheme7();
+  const { colorScheme } = useMantineColorScheme4();
+  const isDark = colorScheme === "dark";
+  const [aiPrompt, setAiPrompt] = useState8("");
+  const [selectedTemplate, setSelectedTemplate] = useState8(null);
+  const [aiLoading, setAiLoading] = useState8(false);
+  const [aiError, setAiError] = useState8(null);
+  const [selectedText, setSelectedText] = useState8("");
+  const [instructions, setInstructions] = useState8([]);
+  const [templatesLoading, setTemplatesLoading] = useState8(false);
+  useEffect7(() => {
+    if (opened) {
+      const { from, to } = editor.state.selection;
+      const markdownText = serializeSelectionToMarkdown(editor, from, to);
+      setSelectedText(markdownText);
+      const savedTemplate = localStorage.getItem("ai-rewrite-last-template");
+      if (savedTemplate) {
+        setSelectedTemplate(savedTemplate);
+      } else if (instructions.length > 0) {
+        const firstTemplate = instructions[0].name.toLowerCase();
+        setSelectedTemplate(firstTemplate);
+      }
+    }
+  }, [opened, editor, instructions]);
+  useEffect7(() => {
+    if (!opened) return;
+    const fetchInstructions = async () => {
+      try {
+        setTemplatesLoading(true);
+        const response = await instructionsApi.getAll();
+        if (response.success && "data" in response) {
+          setInstructions(response.data);
+        }
+      } catch (error) {
+        console.error("Failed to fetch instructions:", error);
+      } finally {
+        setTemplatesLoading(false);
+      }
+    };
+    fetchInstructions();
+  }, [opened]);
+  useEffect7(() => {
+    if (selectedTemplate !== null) {
+      localStorage.setItem("ai-rewrite-last-template", selectedTemplate);
+    }
+  }, [selectedTemplate]);
+  const getTemplateOptions = () => {
+    return instructions.map((instruction) => ({
+      value: instruction.name.toLowerCase(),
+      label: instruction.name.charAt(0).toUpperCase() + instruction.name.slice(1)
+    }));
+  };
+  const handleAISubmit = async () => {
+    const { from, to } = editor.state.selection;
+    const markdownText = serializeSelectionToMarkdown(editor, from, to);
+    if (!markdownText.trim()) {
+      setAiError("No text selected. Please select some text to rewrite.");
+      return;
+    }
+    if (!aiPrompt.trim() && !selectedTemplate) {
+      setAiError("Please enter a prompt or select a template.");
+      return;
+    }
+    setAiLoading(true);
+    setAiError(null);
+    try {
+      let instructionContent = aiPrompt;
+      if (selectedTemplate) {
+        const instruction = instructions.find(
+          (inst) => inst.name.toLowerCase() === selectedTemplate.toLowerCase()
+        );
+        if (instruction) {
+          instructionContent = instruction.content;
+        }
+      }
+      const response = await llmApi.generate({
+        type: selectedTemplate || "custom",
+        prompt: instructionContent,
+        content: markdownText
+      });
+      if (response.success && "data" in response) {
+        const rewrittenMarkdown = response.data.response;
+        console.log("Rewritten markdown:", rewrittenMarkdown);
+        editor.chain().focus().deleteRange({ from, to }).insertContent(rewrittenMarkdown || "").run();
+        onClose();
+        setAiPrompt("");
+        setSelectedTemplate(null);
+        NotificationCenter_default.success({
+          title: "Rewrote text with AI",
+          message: "Text rewritten successfully"
+        });
+      }
+    } catch (error) {
+      console.error("AI rewrite failed:", error);
+      setAiError(error.message || "Failed to generate AI response");
+      NotificationCenter_default.error({
+        title: "AI rewrite failed",
+        message: error.message || "Failed to generate AI response"
+      });
+    } finally {
+      setAiLoading(false);
+    }
+  };
+  const handleClose = () => {
+    onClose();
+    setAiPrompt("");
+    setSelectedTemplate(null);
+    setAiError(null);
+  };
+  return /* @__PURE__ */ jsx11(
+    Modal,
+    {
+      opened,
+      onClose: handleClose,
+      title: /* @__PURE__ */ jsxs10(Group3, { gap: "xs", children: [
+        /* @__PURE__ */ jsx11(IconSparkles, { size: 20 }),
+        "AI Rewrite"
+      ] }),
+      size: "lg",
+      radius: "lg",
+      centered: true,
+      children: /* @__PURE__ */ jsxs10(Stack2, { gap: "md", children: [
+        selectedText && /* @__PURE__ */ jsxs10(Box8, { children: [
+          /* @__PURE__ */ jsx11(Text6, { size: "sm", fw: 500, mb: "xs", children: "Selected Text" }),
+          /* @__PURE__ */ jsx11(
+            Box8,
+            {
+              p: "sm",
+              bg: isDark ? "dark.5" : "gray.0",
+              style: {
+                borderRadius: theme.radius.md,
+                maxHeight: 250,
+                overflow: "auto",
+                borderLeft: "3px solid var(--mantine-color-gray-6)"
+              },
+              children: /* @__PURE__ */ jsx11(Text6, { size: "sm", c: "blue", style: { whiteSpace: "pre-wrap" }, children: selectedText.length > 200 ? `${selectedText.substring(0, 200)}...` : selectedText })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx11(
+          Select3,
+          {
+            label: "Quick Templates",
+            radius: "lg",
+            placeholder: "Select a template or enter custom prompt",
+            value: selectedTemplate,
+            onChange: setSelectedTemplate,
+            data: getTemplateOptions(),
+            clearable: true,
+            disabled: templatesLoading,
+            styles: {
+              dropdown: {
+                borderRadius: "12px"
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx11(
+          Textarea3,
+          {
+            label: "Custom Prompt (Optional)",
+            radius: "lg",
+            placeholder: "e.g., Make it more professional, Add more details, etc.",
+            value: aiPrompt,
+            onChange: (e) => setAiPrompt(e.currentTarget.value),
+            minRows: 3
+          }
+        ),
+        aiError && /* @__PURE__ */ jsx11(Alert3, { icon: /* @__PURE__ */ jsx11(IconAlertCircle3, { size: 16 }), title: "Error", color: "red", children: aiError }),
+        /* @__PURE__ */ jsxs10(Group3, { justify: "flex-end", mt: "md", children: [
+          /* @__PURE__ */ jsx11(
+            Button3,
+            {
+              variant: "light",
+              color: "gray",
+              radius: "lg",
+              onClick: handleClose,
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsx11(
+            Button3,
+            {
+              onClick: handleAISubmit,
+              loading: aiLoading,
+              radius: "lg",
+              leftSection: !aiLoading && /* @__PURE__ */ jsx11(IconSparkles, { size: 16 }),
+              color: "green.8",
+              children: aiLoading ? "Generating..." : "Generate"
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/editor/components/EditorContent.tsx
+import { EditorContent as TiptapEditorContent } from "@tiptap/react";
+import { useMantineColorScheme as useMantineColorScheme5, useMantineTheme as useMantineTheme8 } from "@mantine/core";
+
+// src/editor/components/TableControls.tsx
+import { useEffect as useEffect8, useState as useState9, useCallback as useCallback9, useRef as useRef6 } from "react";
+import { Paper as Paper3, Text as Text7, Group as Group4 } from "@mantine/core";
+import { IconDotsVertical, IconDots, IconCopy as IconCopy3, IconTrash as IconTrash4, IconArrowsRightLeft, IconArrowBadgeDown, IconArrowBadgeUp } from "@tabler/icons-react";
+import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+function TableControls({ editor }) {
+  const [isTableActive, setIsTableActive] = useState9(false);
+  const [colHeaders, setColHeaders] = useState9([]);
+  const [rowHeaders, setRowHeaders] = useState9([]);
+  const [activeColMenu, setActiveColMenu] = useState9(null);
+  const [activeRowMenu, setActiveRowMenu] = useState9(null);
+  const colMenuRef = useRef6(null);
+  const rowMenuRef = useRef6(null);
+  const updatePositions = useCallback9(() => {
+    if (!editor.isActive("table")) {
+      setIsTableActive(false);
+      setColHeaders([]);
+      setRowHeaders([]);
+      return;
+    }
+    const container = document.querySelector(".ProseMirror");
+    if (!container) return;
+    const containerRect = container.getBoundingClientRect();
+    let tableNode = null;
+    const { state } = editor;
+    const { selection } = state;
+    const resolvedPos = state.doc.resolve(selection.from);
+    for (let depth = resolvedPos.depth; depth > 0; depth--) {
+      const node = resolvedPos.node(depth);
+      if (node.type.name === "table") {
+        const tableStartPos = resolvedPos.start(depth);
+        const tables = document.querySelectorAll(".ProseMirror table");
+        for (const table of tables) {
+          try {
+            const domPos = editor.view.posAtDOM(table, 0);
+            if (domPos === tableStartPos) {
+              tableNode = table;
+              break;
+            }
+          } catch {
+          }
+        }
+        break;
+      }
+    }
+    if (!tableNode) {
+      const sel = window.getSelection();
+      if (sel && sel.rangeCount > 0) {
+        const range = sel.getRangeAt(0);
+        const container2 = range.startContainer.parentElement?.closest(".ProseMirror table");
+        if (container2) {
+          tableNode = container2;
+        }
+      }
+    }
+    if (!tableNode) {
+      tableNode = document.querySelector(".ProseMirror table");
+    }
+    if (!tableNode) {
+      setIsTableActive(false);
+      setColHeaders([]);
+      setRowHeaders([]);
+      return;
+    }
+    setIsTableActive(true);
+    const firstRow = tableNode.querySelector("tr");
+    if (firstRow) {
+      const cells = firstRow.querySelectorAll("th, td");
+      const positions = [];
+      cells.forEach((cell) => {
+        const cellRect = cell.getBoundingClientRect();
+        positions.push({
+          top: cellRect.top - containerRect.top,
+          left: cellRect.left - containerRect.left,
+          width: cellRect.width
+        });
+      });
+      setColHeaders(positions);
+    }
+    const rows = tableNode.querySelectorAll("tr");
+    if (rows.length > 0) {
+      const positions = [];
+      rows.forEach((row) => {
+        const rowRect = row.getBoundingClientRect();
+        positions.push({
+          top: rowRect.top - containerRect.top,
+          left: rowRect.left - containerRect.left,
+          height: rowRect.height
+        });
+      });
+      setRowHeaders(positions);
+    }
+  }, [editor]);
+  useEffect8(() => {
+    updatePositions();
+    const handler = () => updatePositions();
+    editor.on("selectionUpdate", handler);
+    editor.on("transaction", handler);
+    const observer = new MutationObserver(handler);
+    const tableNode = document.querySelector(".ProseMirror table");
+    if (tableNode) {
+      observer.observe(tableNode.parentElement, { childList: true, subtree: true });
+    }
+    const handleClickOutside = (e) => {
+      if (colMenuRef.current && !colMenuRef.current.contains(e.target)) {
+        setActiveColMenu(null);
+      }
+      if (rowMenuRef.current && !rowMenuRef.current.contains(e.target)) {
+        setActiveRowMenu(null);
+      }
+    };
+    if (activeColMenu || activeRowMenu) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      editor.off("selectionUpdate", handler);
+      editor.off("transaction", handler);
+      observer.disconnect();
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [editor, updatePositions, activeColMenu, activeRowMenu]);
+  const handleDuplicateColumn = () => {
+    ;
+    editor.chain().focus().addColumnAfter().run();
+    setTimeout(updatePositions, 50);
+    setActiveColMenu(null);
+  };
+  const handleDeleteColumn = () => {
+    ;
+    editor.chain().focus().deleteColumn().run();
+    setActiveColMenu(null);
+  };
+  const handleInsertLeft = () => {
+    ;
+    editor.chain().focus().addColumnBefore().run();
+    setTimeout(updatePositions, 50);
+    setActiveColMenu(null);
+  };
+  const handleInsertRight = () => {
+    ;
+    editor.chain().focus().addColumnAfter().run();
+    setTimeout(updatePositions, 50);
+    setActiveColMenu(null);
+  };
+  const handleDuplicateRow = () => {
+    ;
+    editor.chain().focus().addRowAfter().run();
+    setTimeout(updatePositions, 50);
+    setActiveRowMenu(null);
+  };
+  const handleDeleteRow = () => {
+    ;
+    editor.chain().focus().deleteRow().run();
+    setActiveRowMenu(null);
+  };
+  const handleInsertAbove = () => {
+    ;
+    editor.chain().focus().addRowBefore().run();
+    setTimeout(updatePositions, 50);
+    setActiveRowMenu(null);
+  };
+  const handleInsertBelow = () => {
+    ;
+    editor.chain().focus().addRowAfter().run();
+    setTimeout(updatePositions, 50);
+    setActiveRowMenu(null);
+  };
+  if (!isTableActive) return null;
+  if (!editor.isEditable) return null;
+  const menuButtonStyle = {
+    position: "absolute",
+    zIndex: 999,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 24,
+    height: 24,
+    borderRadius: 4,
+    backgroundColor: "var(--mantine-color-body)",
+    border: "1px solid var(--mantine-color-default-border)",
+    opacity: 0.5,
+    transition: "all 0.15s ease",
+    cursor: "pointer"
+  };
+  return /* @__PURE__ */ jsxs11(Fragment4, { children: [
+    rowHeaders.map((pos, index) => /* @__PURE__ */ jsx12(
+      "div",
+      {
+        style: {
+          ...menuButtonStyle,
+          top: `${pos.top + pos.height / 2 - 12}px`,
+          left: `${pos.left - 12}px`
+        },
+        onMouseEnter: (e) => {
+          e.currentTarget.style.opacity = "1";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.opacity = "0.5";
+        },
+        onClick: (e) => {
+          e.stopPropagation();
+          setActiveRowMenu({
+            index,
+            top: pos.top + pos.height / 2 - 100,
+            left: pos.left + 30
+          });
+        },
+        children: /* @__PURE__ */ jsx12(IconDotsVertical, { size: 14 })
+      },
+      index
+    )),
+    colHeaders.map((pos, index) => /* @__PURE__ */ jsx12(
+      "div",
+      {
+        style: {
+          ...menuButtonStyle,
+          top: `${pos.top - 12}px`,
+          left: `${pos.left + pos.width / 2 - 12}px`
+        },
+        onMouseEnter: (e) => {
+          e.currentTarget.style.opacity = "1";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.opacity = "0.5";
+        },
+        onClick: (e) => {
+          e.stopPropagation();
+          setActiveColMenu({
+            index,
+            top: pos.top + 30,
+            left: pos.left + pos.width / 2 - 100
+          });
+        },
+        children: /* @__PURE__ */ jsx12(IconDots, { size: 14 })
+      },
+      index
+    )),
+    activeColMenu && /* @__PURE__ */ jsx12(
+      "div",
+      {
+        ref: colMenuRef,
+        style: {
+          position: "absolute",
+          top: `${activeColMenu.top}px`,
+          left: `${activeColMenu.left}px`,
+          zIndex: 1001
+        },
+        children: /* @__PURE__ */ jsxs11(
+          Paper3,
+          {
+            shadow: "xl",
+            p: "xs",
+            radius: "md",
+            withBorder: true,
+            style: {
+              minWidth: 200,
+              backgroundColor: "var(--mantine-color-body)"
+            },
+            children: [
+              /* @__PURE__ */ jsx12(Group4, { gap: 4, wrap: "nowrap", children: /* @__PURE__ */ jsx12(Text7, { size: "xs", fw: 500, style: { flex: 1 }, children: "Column" }) }),
+              /* @__PURE__ */ jsxs11("div", { style: { marginTop: 8 }, children: [
+                /* @__PURE__ */ jsx12(
+                  MenuItem,
+                  {
+                    icon: /* @__PURE__ */ jsx12(IconArrowsRightLeft, { size: 16 }),
+                    label: "Insert Left",
+                    onClick: handleInsertLeft
+                  }
+                ),
+                /* @__PURE__ */ jsx12(
+                  MenuItem,
+                  {
+                    icon: /* @__PURE__ */ jsx12(IconArrowBadgeDown, { size: 16, style: { transform: "rotate(-90deg)" } }),
+                    label: "Insert Right",
+                    onClick: handleInsertRight
+                  }
+                ),
+                /* @__PURE__ */ jsx12(
+                  MenuItem,
+                  {
+                    icon: /* @__PURE__ */ jsx12(IconCopy3, { size: 16 }),
+                    label: "Duplicate",
+                    onClick: handleDuplicateColumn
+                  }
+                ),
+                /* @__PURE__ */ jsx12("div", { style: { height: 1, background: "var(--mantine-color-default-border)", margin: "4px 0" } }),
+                /* @__PURE__ */ jsx12(
+                  MenuItem,
+                  {
+                    icon: /* @__PURE__ */ jsx12(IconTrash4, { size: 16 }),
+                    label: "Delete",
+                    onClick: handleDeleteColumn,
+                    color: "red"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    ),
+    activeRowMenu && /* @__PURE__ */ jsx12(
+      "div",
+      {
+        ref: rowMenuRef,
+        style: {
+          position: "absolute",
+          top: `${activeRowMenu.top}px`,
+          left: `${activeRowMenu.left}px`,
+          zIndex: 1001
+        },
+        children: /* @__PURE__ */ jsxs11(
+          Paper3,
+          {
+            shadow: "xl",
+            p: "xs",
+            radius: "md",
+            withBorder: true,
+            style: {
+              minWidth: 200,
+              backgroundColor: "var(--mantine-color-body)"
+            },
+            children: [
+              /* @__PURE__ */ jsx12(Group4, { gap: 4, wrap: "nowrap", children: /* @__PURE__ */ jsx12(Text7, { size: "xs", fw: 500, style: { flex: 1 }, children: "Row" }) }),
+              /* @__PURE__ */ jsxs11("div", { style: { marginTop: 8 }, children: [
+                /* @__PURE__ */ jsx12(
+                  MenuItem,
+                  {
+                    icon: /* @__PURE__ */ jsx12(IconArrowBadgeUp, { size: 16 }),
+                    label: "Insert Above",
+                    onClick: handleInsertAbove
+                  }
+                ),
+                /* @__PURE__ */ jsx12(
+                  MenuItem,
+                  {
+                    icon: /* @__PURE__ */ jsx12(IconArrowBadgeDown, { size: 16 }),
+                    label: "Insert Below",
+                    onClick: handleInsertBelow
+                  }
+                ),
+                /* @__PURE__ */ jsx12(
+                  MenuItem,
+                  {
+                    icon: /* @__PURE__ */ jsx12(IconCopy3, { size: 16 }),
+                    label: "Duplicate",
+                    onClick: handleDuplicateRow
+                  }
+                ),
+                /* @__PURE__ */ jsx12("div", { style: { height: 1, background: "var(--mantine-color-default-border)", margin: "4px 0" } }),
+                /* @__PURE__ */ jsx12(
+                  MenuItem,
+                  {
+                    icon: /* @__PURE__ */ jsx12(IconTrash4, { size: 16 }),
+                    label: "Delete",
+                    onClick: handleDeleteRow,
+                    color: "red"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+var MenuItem = ({ icon, label, onClick, color }) => /* @__PURE__ */ jsxs11(
+  "div",
+  {
+    onClick,
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 8,
+      padding: "6px 8px",
+      borderRadius: 4,
+      cursor: "pointer",
+      color: color || "inherit",
+      transition: "background-color 0.1s ease"
+    },
+    onMouseEnter: (e) => {
+      e.currentTarget.style.backgroundColor = "var(--mantine-color-default-hover)";
+    },
+    onMouseLeave: (e) => {
+      e.currentTarget.style.backgroundColor = "transparent";
+    },
+    children: [
+      icon,
+      /* @__PURE__ */ jsx12(Text7, { size: "sm", children: label })
+    ]
+  }
+);
+
+// src/editor/components/EditorContent.tsx
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+function EditorContent({ editor, minHeight = 200 }) {
+  const { colorScheme: rawColorScheme } = useMantineColorScheme5();
+  const theme = useMantineTheme8();
+  const colorScheme = resolveColorScheme(rawColorScheme);
+  const tableBorderColor = colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3];
+  const tableHeaderBg = colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[1];
+  const bgColors = {
+    red: colorScheme === "dark" ? theme.colors.red[8] : theme.colors.red[1],
+    orange: colorScheme === "dark" ? theme.colors.orange[8] : theme.colors.orange[1],
+    yellow: colorScheme === "dark" ? theme.colors.yellow[8] : theme.colors.yellow[1],
+    green: colorScheme === "dark" ? theme.colors.green[8] : theme.colors.green[1],
+    blue: colorScheme === "dark" ? theme.colors.blue[8] : theme.colors.blue[1],
+    violet: colorScheme === "dark" ? theme.colors.violet[8] : theme.colors.violet[1],
+    pink: colorScheme === "dark" ? theme.colors.pink[8] : theme.colors.pink[1],
+    gray: colorScheme === "dark" ? theme.colors.gray[8] : theme.colors.gray[1]
+  };
+  const h1Color = colorScheme === "dark" ? theme.colors.yellow[5] : theme.colors.yellow[8];
+  const h2Color = colorScheme === "dark" ? theme.colors.blue[5] : theme.colors.blue[8];
+  const h3Color = colorScheme === "dark" ? theme.colors.orange[5] : theme.colors.orange[8];
+  const h4Color = colorScheme === "dark" ? theme.colors.green[5] : theme.colors.green[8];
+  const h5Color = colorScheme === "dark" ? theme.colors.red[5] : theme.colors.red[8];
+  const h6Color = colorScheme === "dark" ? theme.colors.cyan[5] : theme.colors.cyan[8];
+  return /* @__PURE__ */ jsx13("div", { style: { position: "relative" }, children: /* @__PURE__ */ jsxs12(
+    TiptapEditorContent,
+    {
+      editor,
+      style: { minHeight, lineHeight: "1.3", padding: "0 12px" },
+      children: [
+        /* @__PURE__ */ jsx13("style", { children: `
+        .ProseMirror {
+          --bg-red: ${bgColors.red};
+          --bg-orange: ${bgColors.orange};
+          --bg-yellow: ${bgColors.yellow};
+          --bg-green: ${bgColors.green};
+          --bg-blue: ${bgColors.blue};
+          --bg-violet: ${bgColors.violet};
+          --bg-pink: ${bgColors.pink};
+          --bg-gray: ${bgColors.gray};
+          font-family: 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+        }
+        .ProseMirror ul, .ProseMirror ol { line-height: 1.5; padding-left: 1.6em; margin: 0.6em 0 0.2em 0; }
+        .ProseMirror ol li::marker { font-weight: 700; color: ${colorScheme === "dark" ? theme.colors.blue[4] : theme.colors.blue[7]}; }
+        .ProseMirror ol li { color: ${colorScheme === "dark" ? theme.colors.blue[4] : theme.colors.blue[8]}; }
+        .ProseMirror h1 { color: ${h1Color}; font-size: 1.4em; margin-top: 0em;   margin-bottom: 0em; font-weight: 700; }
+        .ProseMirror h2 { color: ${h2Color}; font-size: 1.3em; margin-top: 1.4em; margin-bottom: 0.3em; font-weight: 600; }
+        .ProseMirror h3 { color: ${h3Color}; font-size: 1.2em; margin-top: 1.0em; margin-bottom: 0.2em; font-weight: 600; }
+        .ProseMirror h4 { color: ${h4Color}; font-size: 1.1em; margin-top: 0.6em; margin-bottom: 0.2em; font-weight: 500; }
+        .ProseMirror h5 { color: ${h5Color}; font-size: 1.0em; margin-top: 0.5em; margin-bottom: 0.1em; font-weight: 500; }
+        .ProseMirror h6 { color: ${h6Color}; font-size: 1.0em; margin-top: 0.5em; margin-bottom: 0.1em; font-weight: 500; }
+        .ProseMirror p { margin-top: 0.1em; margin-bottom: 0.5em; }
+        .ProseMirror blockquote {
+          margin: 12px 0;
+          padding: 8px 16px;
+          border-left: 6px solid ${colorScheme === "dark" ? theme.colors.gray[5] : theme.colors.gray[3]};
+          background-color: ${colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[1]};
+          border-radius: 4px;
+          font-style: normal;
+          color: ${colorScheme === "dark" ? theme.colors.gray[3] : theme.colors.gray[7]};
+        }
+        .ProseMirror blockquote p {
+          margin: 4px 0;
+        }
+        .ProseMirror blockquote p:first-child {
+          margin-top: 0;
+        }
+        .ProseMirror blockquote p:last-child {
+          margin-bottom: 0;
+        }
+        .ProseMirror span[data-bg-color] {
+          padding: 0.1em 0.3em;
+          border-radius: 3px;
+          box-decoration-break: clone;
+        }
+        .ProseMirror span[data-bg-color="red"] { background-color: var(--bg-red); }
+        .ProseMirror span[data-bg-color="orange"] { background-color: var(--bg-orange); }
+        .ProseMirror span[data-bg-color="yellow"] { background-color: var(--bg-yellow); }
+        .ProseMirror span[data-bg-color="green"] { background-color: var(--bg-green); }
+        .ProseMirror span[data-bg-color="blue"] { background-color: var(--bg-blue); }
+        .ProseMirror span[data-bg-color="violet"] { background-color: var(--bg-violet); }
+        .ProseMirror span[data-bg-color="pink"] { background-color: var(--bg-pink); }
+        .ProseMirror span[data-bg-color="gray"] { background-color: var(--bg-gray); }
+        .ProseMirror p code,
+        .ProseMirror h1 code,
+        .ProseMirror h2 code,
+        .ProseMirror h3 code,
+        .ProseMirror h4 code,
+        .ProseMirror h5 code,
+        .ProseMirror h6 code,
+        .ProseMirror li code,
+        .ProseMirror td code,
+        .ProseMirror th code,
+        .ProseMirror blockquote code {
+          font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
+          font-size: 0.875em;
+          padding: 0.2em 0.4em;
+          border-radius: 6px;
+          background-color: ${colorScheme === "dark" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.06)"};
+          color: ${colorScheme === "dark" ? theme.colors.orange[4] : theme.colors.red[7]};
+          border: 1px solid ${colorScheme === "dark" ? "rgba(255, 255, 255, 0.06)" : "rgba(0, 0, 0, 0.08)"};
+          box-decoration-break: clone;
+          white-space: pre-wrap;
+          word-break: break-word;
+        }
+        .ProseMirror table {
+          border-collapse: separate;
+          border-spacing: 0;
+          width: 100%;
+          margin: 8px 0;
+          font-size: 14px;
+          border: 1px solid ${tableBorderColor};
+          border-radius: 8px;
+          overflow: hidden;
+        }
+        .ProseMirror th, .ProseMirror td {
+          border: 1px solid ${tableBorderColor};
+          padding: 8px 12px;
+          vertical-align: top;
+        }
+        .ProseMirror th {
+          background-color: ${tableHeaderBg};
+          font-weight: 600;
+          text-align: left;
+        }
+        .ProseMirror td {
+          background-color: transparent;
+        }
+        .ProseMirror .selectedCell {
+          border: 2px solid ${theme.colors.blue[6]};
+        }
+        .ProseMirror hr {
+          border: none;
+          border-top: 1px solid ${colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[4]};
+          opacity: 0.4;
+          margin: 16px 0;
+          cursor: pointer;
+        }
+        .ProseMirror hr.ProseMirror-selectednode {
+          opacity: 1;
+          border-top: 2px solid ${theme.colors.blue[6]};
+          outline: 2px solid ${theme.colors.blue[3]};
+          outline-offset: 2px;
+        }
+        .ProseMirror img.ticket-image {
+          max-width: 100%;
+          height: auto;
+          border-radius: 4px;
+          margin: 8px 0;
+          cursor: pointer;
+        }
+        .ProseMirror img.ticket-image.ProseMirror-selectednode {
+          outline: 2px solid ${theme.colors.blue[6]};
+          outline-offset: 2px;
+        }
+        .code-block-wrapper .ProseMirror-trailingBreak {
+          display: none;
+        }
+      ` }),
+        /* @__PURE__ */ jsx13(TableControls, { editor })
+      ]
+    }
+  ) });
+}
+
+// src/editor/components/BubbleMenu.tsx
+import { BubbleMenu as TiptapBubbleMenu } from "@tiptap/react/menus";
+import { useEditorState } from "@tiptap/react";
+import {
+  Group as Group5,
+  ActionIcon as ActionIcon6,
+  Text as Text8,
+  Box as Box9,
+  Menu as Menu4,
+  useMantineTheme as useMantineTheme9,
+  useMantineColorScheme as useMantineColorScheme6
+} from "@mantine/core";
+import {
+  IconBold,
+  IconItalic,
+  IconCode as IconCode3,
+  IconColorPicker,
+  IconQuote,
+  IconCodeDots,
+  IconHeading,
+  IconCheck as IconCheck5,
+  IconListCheck,
+  IconRefreshDot,
+  IconPalette,
+  IconSparkles as IconSparkles2
+} from "@tabler/icons-react";
+import { useState as useState10 } from "react";
+import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+function BubbleMenu({ editor }) {
+  const theme = useMantineTheme9();
+  const { colorScheme } = useMantineColorScheme6();
+  const isDark = colorScheme === "dark";
+  const [aiModalOpen, setAiModalOpen] = useState10(false);
+  const editorState = useEditorState({
+    editor,
+    selector: ({ editor: editor2 }) => ({
+      textAttrs: editor2.getAttributes("textStyle"),
+      bgAttrs: editor2.getAttributes("backgroundColor"),
+      isBold: editor2.isActive("bold"),
+      isItalic: editor2.isActive("italic"),
+      isCode: editor2.isActive("code"),
+      isCodeBlock: editor2.isActive("codeBlock"),
+      isQuote: editor2.isActive("blockquote"),
+      isTaskList: editor2.isActive("taskList"),
+      currentHeadingLevel: (() => {
+        for (let level = 1; level <= 6; level++) {
+          if (editor2.isActive("heading", { level })) {
+            return level;
+          }
+        }
+        return null;
+      })()
+    }),
+    equalityFn: (a, b) => JSON.stringify(a) === JSON.stringify(b)
+  });
+  const handleHeadingChange = (level) => {
+    editor.chain().focus().toggleHeading({ level }).run();
+  };
+  const handleAIRewrite = () => {
+    const { from, to } = editor.state.selection;
+    const markdownText = serializeSelectionToMarkdown(editor, from, to);
+    if (!markdownText.trim()) {
+      NotificationCenter_default.warn({
+        title: "No text selected",
+        message: "Please select some text to rewrite with AI"
+      });
+      return;
+    }
+    setAiModalOpen(true);
+  };
+  return /* @__PURE__ */ jsxs13(Fragment5, { children: [
+    /* @__PURE__ */ jsx14(
+      TiptapBubbleMenu,
+      {
+        editor,
+        shouldShow: ({ editor: editor2 }) => {
+          const { from, to } = editor2.state.selection;
+          const hasSelection = from !== to;
+          if (editor2.isActive("codeBlock")) {
+            return false;
+          }
+          if (editor2.isActive("image")) {
+            return false;
+          }
+          if (!editor2.isEditable) {
+            return false;
+          }
+          return hasSelection;
+        },
+        children: /* @__PURE__ */ jsxs13(
+          Group5,
+          {
+            gap: 4,
+            p: "xs",
+            bg: "var(--mantine-color-body)",
+            style: bubbleStyle,
+            children: [
+              /* @__PURE__ */ jsx14(
+                ToolbarButton,
+                {
+                  onClick: handleAIRewrite,
+                  icon: /* @__PURE__ */ jsx14(IconSparkles2, { size: 12 }),
+                  color: "green.8"
+                }
+              ),
+              /* @__PURE__ */ jsx14(Divider, {}),
+              /* @__PURE__ */ jsx14(
+                ToolbarButton,
+                {
+                  active: editorState.isBold,
+                  onClick: () => editor.chain().focus().toggleBold().run(),
+                  icon: /* @__PURE__ */ jsx14(IconBold, { size: 12 })
+                }
+              ),
+              /* @__PURE__ */ jsx14(
+                ToolbarButton,
+                {
+                  active: editorState.isItalic,
+                  onClick: () => editor.chain().focus().toggleItalic().run(),
+                  icon: /* @__PURE__ */ jsx14(IconItalic, { size: 12 })
+                }
+              ),
+              /* @__PURE__ */ jsx14(
+                ToolbarButton,
+                {
+                  active: editorState.isCode,
+                  onClick: () => editor.chain().focus().toggleCode().run(),
+                  icon: /* @__PURE__ */ jsx14(IconCode3, { size: 12 })
+                }
+              ),
+              /* @__PURE__ */ jsx14(Divider, {}),
+              /* @__PURE__ */ jsxs13(Menu4, { shadow: "md", width: 200, withinPortal: true, children: [
+                /* @__PURE__ */ jsx14(Menu4.Target, { children: /* @__PURE__ */ jsx14(ActionIcon6, { size: "sm", variant: editorState.currentHeadingLevel ? "filled" : "light", style: { minWidth: 40 }, children: editorState.currentHeadingLevel ? /* @__PURE__ */ jsxs13(Text8, { size: "xs", fw: 600, children: [
+                  "H",
+                  editorState.currentHeadingLevel
+                ] }) : /* @__PURE__ */ jsx14(IconHeading, { size: 12 }) }) }),
+                /* @__PURE__ */ jsxs13(Menu4.Dropdown, { children: [
+                  /* @__PURE__ */ jsx14(Menu4.Label, { children: "Headings" }),
+                  /* @__PURE__ */ jsx14(Menu4.Divider, {}),
+                  [1, 2, 3, 4, 5, 6].map((level) => /* @__PURE__ */ jsxs13(
+                    Menu4.Item,
+                    {
+                      component: "button",
+                      onClick: () => handleHeadingChange(level),
+                      leftSection: editorState.currentHeadingLevel === level ? /* @__PURE__ */ jsx14(IconCheck5, { size: 14 }) : null,
+                      children: [
+                        "Heading ",
+                        level
+                      ]
+                    },
+                    level
+                  ))
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx14(
+                ToolbarButton,
+                {
+                  active: editorState.isCodeBlock,
+                  onClick: () => editor.chain().focus().toggleCodeBlock().run(),
+                  icon: /* @__PURE__ */ jsx14(IconCodeDots, { size: 12 })
+                }
+              ),
+              /* @__PURE__ */ jsx14(
+                ToolbarButton,
+                {
+                  active: editorState.isQuote,
+                  onClick: () => editor.chain().focus().toggleBlockquote().run(),
+                  icon: /* @__PURE__ */ jsx14(IconQuote, { size: 12 })
+                }
+              ),
+              /* @__PURE__ */ jsx14(
+                ToolbarButton,
+                {
+                  active: editorState.isTaskList,
+                  onClick: () => editor.chain().focus().toggleTaskList().run(),
+                  icon: /* @__PURE__ */ jsx14(IconListCheck, { size: 12 })
+                }
+              ),
+              /* @__PURE__ */ jsx14(Divider, {}),
+              /* @__PURE__ */ jsxs13(Menu4, { shadow: "md", width: 280, withinPortal: true, children: [
+                /* @__PURE__ */ jsx14(Menu4.Target, { children: /* @__PURE__ */ jsx14(
+                  ActionIcon6,
+                  {
+                    size: "sm",
+                    variant: editorState.textAttrs.color ? "filled" : "light",
+                    style: { minWidth: 40 },
+                    title: "Text Color",
+                    children: /* @__PURE__ */ jsx14(IconColorPicker, { size: 12 })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs13(Menu4.Dropdown, { children: [
+                  /* @__PURE__ */ jsxs13(Group5, { justify: "space-between", align: "center", pt: "5", pr: "10", gap: "0", children: [
+                    /* @__PURE__ */ jsx14(Menu4.Label, { mb: 0, children: "Text Color" }),
+                    /* @__PURE__ */ jsx14(
+                      ActionIcon6,
+                      {
+                        size: "sm",
+                        variant: "subtle",
+                        onClick: () => editor.chain().focus().unsetColor().run(),
+                        title: "Default",
+                        children: /* @__PURE__ */ jsx14(IconRefreshDot, { size: 16 })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx14(Menu4.Divider, {}),
+                  /* @__PURE__ */ jsx14(Group5, { gap: "xs", wrap: "wrap", p: "xs", children: ["red", "orange", "yellow", "green", "blue", "violet", "pink", "gray"].map((colorName) => /* @__PURE__ */ jsx14(
+                    ActionIcon6,
+                    {
+                      size: "sm",
+                      variant: editorState.textAttrs.color === theme.colors[colorName][6] ? "filled" : "light",
+                      onClick: () => editor.chain().focus().setColor(theme.colors[colorName][6]).run(),
+                      color: colorName,
+                      title: colorName,
+                      children: /* @__PURE__ */ jsx14(IconCheck5, { size: 12 })
+                    },
+                    colorName
+                  )) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs13(Menu4, { shadow: "md", width: 280, withinPortal: true, children: [
+                /* @__PURE__ */ jsx14(Menu4.Target, { children: /* @__PURE__ */ jsx14(
+                  ActionIcon6,
+                  {
+                    size: "sm",
+                    variant: editorState.bgAttrs.color ? "filled" : "light",
+                    style: { minWidth: 40 },
+                    title: "Highlight",
+                    children: /* @__PURE__ */ jsx14(IconPalette, { size: 12 })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs13(Menu4.Dropdown, { children: [
+                  /* @__PURE__ */ jsxs13(Group5, { justify: "space-between", align: "center", pt: "5", pr: "10", gap: "0", children: [
+                    /* @__PURE__ */ jsx14(Menu4.Label, { mb: 0, children: "Background Color" }),
+                    /* @__PURE__ */ jsx14(
+                      ActionIcon6,
+                      {
+                        size: "sm",
+                        variant: "subtle",
+                        onClick: () => editor.chain().focus().unsetBackgroundColor().run(),
+                        title: "Default",
+                        children: /* @__PURE__ */ jsx14(IconRefreshDot, { size: 16 })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx14(Menu4.Divider, {}),
+                  /* @__PURE__ */ jsx14(Group5, { gap: "xs", wrap: "wrap", p: "xs", children: ["red", "orange", "yellow", "green", "blue", "violet", "pink", "gray"].map((colorName) => /* @__PURE__ */ jsx14(
+                    ActionIcon6,
+                    {
+                      size: "sm",
+                      variant: editorState.bgAttrs.color === colorName ? "filled" : "light",
+                      onClick: () => editor.chain().focus().setBackgroundColor(colorName).run(),
+                      color: colorName,
+                      title: colorName,
+                      style: editorState.bgAttrs.color !== colorName ? { backgroundColor: isDark ? theme.colors[colorName][8] : theme.colors[colorName][1] } : void 0,
+                      children: /* @__PURE__ */ jsx14(IconCheck5, { size: 12, color: editorState.bgAttrs.color === colorName ? isDark ? theme.white : "inherit" : isDark ? theme.white : theme.colors[colorName][9] })
+                    },
+                    colorName
+                  )) })
+                ] })
+              ] })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx14(
+      DocumentEditor,
+      {
+        editor,
+        opened: aiModalOpen,
+        onClose: () => setAiModalOpen(false)
+      }
+    )
+  ] });
+}
+var ToolbarButton = ({ active, onClick, icon, color }) => /* @__PURE__ */ jsx14(
+  ActionIcon6,
+  {
+    size: "sm",
+    variant: active ? "filled" : "subtle",
+    onClick,
+    color,
+    children: icon
+  }
+);
+var Divider = () => /* @__PURE__ */ jsx14(Box9, { w: 1, h: 16, bg: "var(--mantine-color-default-border)", mx: 4 });
+var bubbleStyle = {
+  borderRadius: 4,
+  boxShadow: "0 4px 12px rgba(0,0,0,0.15)"
+};
+
+// src/editor/components/SlashCommand.tsx
+import { Extension as Extension2 } from "@tiptap/core";
+import Suggestion from "@tiptap/suggestion";
+import { ReactRenderer } from "@tiptap/react";
+import tippy from "tippy.js";
+import { forwardRef, useImperativeHandle, useState as useState11, useEffect as useEffect9, useRef as useRef7 } from "react";
+import { Box as Box10, Text as Text9, UnstyledButton as UnstyledButton2 } from "@mantine/core";
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+var SlashCommandList = forwardRef((props, ref) => {
+  const [selectedIndex, setSelectedIndex] = useState11(0);
+  const scrollRef = useRef7(null);
+  useEffect9(() => setSelectedIndex(0), [props.items]);
+  const selectItem = (index) => {
+    const item = props.items[index];
+    if (item) {
+      props.command(item);
+    }
+  };
+  useImperativeHandle(ref, () => ({
+    onKeyDown: ({ event }) => {
+      if (event.key === "ArrowUp") {
+        setSelectedIndex((prev) => (prev - 1 + props.items.length) % props.items.length);
+        return true;
+      }
+      if (event.key === "ArrowDown") {
+        setSelectedIndex((prev) => (prev + 1) % props.items.length);
+        return true;
+      }
+      if (event.key === "Enter" || event.key === "Tab") {
+        selectItem(selectedIndex);
+        return true;
+      }
+      return false;
+    }
+  }));
+  useEffect9(() => {
+    const activeItem = scrollRef.current?.querySelector(`[data-index="${selectedIndex}"]`);
+    if (activeItem) {
+      activeItem.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    }
+  }, [selectedIndex]);
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ jsx15(Box10, { p: "xs", bg: "var(--mantine-color-body)", style: { borderRadius: 8, border: "1px solid var(--mantine-color-default-border)" }, children: /* @__PURE__ */ jsx15(Text9, { size: "xs", c: "dimmed", children: "Kh\xF4ng t\xECm th\u1EA5y k\u1EBFt qu\u1EA3..." }) });
+  }
+  return /* @__PURE__ */ jsxs14(
+    Box10,
+    {
+      ref: scrollRef,
+      style: {
+        background: "var(--mantine-color-body)",
+        backdropFilter: "blur(12px)",
+        border: "1px solid var(--mantine-color-default-border)",
+        borderRadius: "12px",
+        boxShadow: "var(--mantine-shadow-xl)",
+        padding: "4px",
+        maxHeight: "320px",
+        overflowY: "auto",
+        width: "300px",
+        animation: "slash-in 0.1s ease-out"
+      },
+      children: [
+        /* @__PURE__ */ jsx15("style", { children: `
+        @keyframes slash-in {
+          from { opacity: 0; transform: translateY(5px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+      ` }),
+        props.items.map((item, index) => {
+          const isSelected = index === selectedIndex;
+          return /* @__PURE__ */ jsxs14(
+            UnstyledButton2,
+            {
+              "data-index": index,
+              onClick: () => selectItem(index),
+              onMouseEnter: () => setSelectedIndex(index),
+              style: {
+                display: "flex",
+                width: "100%",
+                padding: "8px 12px",
+                borderRadius: "8px",
+                gap: "12px",
+                alignItems: "center",
+                backgroundColor: isSelected ? "var(--mantine-color-blue-light)" : "transparent",
+                transition: "background-color 0.1s ease"
+              },
+              children: [
+                /* @__PURE__ */ jsx15(
+                  Box10,
+                  {
+                    style: {
+                      width: "32px",
+                      height: "32px",
+                      borderRadius: "6px",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      backgroundColor: isSelected ? "var(--mantine-color-default-hover)" : "var(--mantine-color-default)",
+                      boxShadow: isSelected ? "var(--mantine-shadow-xs)" : "none",
+                      fontSize: "16px",
+                      color: isSelected ? "var(--mantine-color-blue-filled)" : "var(--mantine-color-default-color)"
+                    },
+                    children: item.icon
+                  }
+                ),
+                /* @__PURE__ */ jsxs14(Box10, { style: { flex: 1 }, children: [
+                  /* @__PURE__ */ jsx15(Text9, { size: "sm", fw: isSelected ? 600 : 500, lh: 1.2, c: isSelected ? "var(--mantine-color-blue-filled)" : "inherit", children: item.title }),
+                  /* @__PURE__ */ jsx15(Text9, { size: "xs", c: "dimmed", lh: 1.2, mt: 2, children: item.description })
+                ] })
+              ]
+            },
+            item.title
+          );
+        })
+      ]
+    }
+  );
+});
+SlashCommandList.displayName = "SlashCommandList";
+var createSlashCommandRenderer = () => {
+  let component = null;
+  let popup = null;
+  return {
+    onStart: (props) => {
+      if (popup) {
+        popup.destroy();
+        popup = null;
+      }
+      if (component) {
+        component.destroy();
+        component = null;
+      }
+      component = new ReactRenderer(SlashCommandList, {
+        props,
+        editor: props.editor
+      });
+      if (!props.clientRect) return;
+      popup = tippy("body", {
+        getReferenceClientRect: props.clientRect,
+        appendTo: () => document.body,
+        content: component.element,
+        showOnCreate: true,
+        interactive: true,
+        trigger: "manual",
+        placement: "bottom-start",
+        duration: [150, 0]
+      })[0];
+    },
+    onUpdate(props) {
+      component?.updateProps(props);
+      if (props.clientRect && popup) {
+        popup.setProps({
+          getReferenceClientRect: props.clientRect
+        });
+      }
+    },
+    onKeyDown(props) {
+      if (props.event.key === "Escape") {
+        popup?.hide();
+        return true;
+      }
+      return component?.ref?.onKeyDown?.(props);
+    },
+    onExit() {
+      popup?.destroy();
+      component?.destroy();
+      popup = null;
+      component = null;
+    }
+  };
+};
+function createSlashCommand(options) {
+  return Extension2.create({
+    name: "slashCommand",
+    addProseMirrorPlugins() {
+      return [
+        Suggestion({
+          editor: this.editor,
+          char: options.char,
+          items: options.items,
+          render: createSlashCommandRenderer,
+          command: ({ editor, range, props }) => {
+            editor.chain().focus().deleteRange(range).run();
+            props.command({ editor, range });
+          }
+        })
+      ];
+    },
+    onDestroy() {
+    }
+  });
+}
+
+// src/editor/components/BlockRenderer.tsx
+import { memo as memo7 } from "react";
+
+// src/editor/hooks/blockRegistry.tsx
+import {
+  IconH1,
+  IconH2,
+  IconH3,
+  IconList as IconList2,
+  IconListNumbers,
+  IconListCheck as IconListCheck2,
+  IconCode as IconCode4,
+  IconQuote as IconQuote2,
+  IconMinus,
+  IconTable,
+  IconPhoto,
+  IconBold as IconBold2,
+  IconItalic as IconItalic2,
+  IconNote,
+  IconTimelineEvent,
+  IconChartArea as IconChartArea2
+} from "@tabler/icons-react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var BLOCKS = [];
+function registerBlock(block) {
+  const existingIndex = BLOCKS.findIndex((b) => b.type === block.type);
+  if (existingIndex !== -1) {
+    BLOCKS[existingIndex] = block;
+  } else {
+    BLOCKS.push(block);
+  }
+}
+function getBlockByType(type) {
+  return BLOCKS.find((b) => b.type === type);
+}
+function filterBlocks(query) {
+  const lowerQuery = query.toLowerCase();
+  return BLOCKS.filter(
+    (block) => block.label.toLowerCase().includes(lowerQuery) || block.description?.toLowerCase().includes(lowerQuery) || block.keywords?.some((keyword) => keyword.toLowerCase().includes(lowerQuery))
+  );
+}
+function getDefaultBlockItems(editor) {
+  return [
+    {
+      title: "Heading 1",
+      description: "Large section heading",
+      icon: /* @__PURE__ */ jsx16(IconH1, { size: 20 }),
+      keywords: ["heading", "title", "h1"],
+      command: () => editor.chain().focus().toggleHeading({ level: 1 }).run()
+    },
+    {
+      title: "Heading 2",
+      description: "Medium section heading",
+      icon: /* @__PURE__ */ jsx16(IconH2, { size: 20 }),
+      keywords: ["heading", "subtitle", "h2"],
+      command: () => editor.chain().focus().toggleHeading({ level: 2 }).run()
+    },
+    {
+      title: "Heading 3",
+      description: "Small section heading",
+      icon: /* @__PURE__ */ jsx16(IconH3, { size: 20 }),
+      keywords: ["heading", "subtitle", "h3"],
+      command: () => editor.chain().focus().toggleHeading({ level: 3 }).run()
+    },
+    {
+      title: "Bullet List",
+      description: "Create a simple bullet list",
+      icon: /* @__PURE__ */ jsx16(IconList2, { size: 20 }),
+      keywords: ["bullet", "list", "unordered"],
+      command: () => editor.chain().focus().toggleBulletList().run()
+    },
+    {
+      title: "Numbered List",
+      description: "Create a numbered list",
+      icon: /* @__PURE__ */ jsx16(IconListNumbers, { size: 20 }),
+      keywords: ["number", "ordered", "list"],
+      command: () => editor.chain().focus().toggleOrderedList().run()
+    },
+    {
+      title: "Task List",
+      description: "Create a checklist with checkboxes",
+      icon: /* @__PURE__ */ jsx16(IconListCheck2, { size: 20 }),
+      keywords: ["task", "checkbox", "todo", "checklist"],
+      command: () => editor.chain().focus().toggleTaskList().run()
+    },
+    {
+      title: "Code Block",
+      description: "Insert a code block with syntax highlighting",
+      icon: /* @__PURE__ */ jsx16(IconCode4, { size: 20 }),
+      keywords: ["code", "block", "pre"],
+      command: () => editor.chain().focus().toggleCodeBlock().run()
+    },
+    {
+      title: "Quote",
+      description: "Insert a blockquote",
+      icon: /* @__PURE__ */ jsx16(IconQuote2, { size: 20 }),
+      keywords: ["quote", "blockquote", "citation"],
+      command: () => editor.chain().focus().toggleBlockquote().run()
+    },
+    {
+      title: "Horizontal Rule",
+      description: "Insert a horizontal divider",
+      icon: /* @__PURE__ */ jsx16(IconMinus, { size: 20 }),
+      keywords: ["horizontal", "rule", "divider", "line"],
+      command: () => editor.chain().focus().setHorizontalRule().run()
+    },
+    {
+      title: "Table",
+      description: "Insert a table",
+      icon: /* @__PURE__ */ jsx16(IconTable, { size: 20 }),
+      keywords: ["table", "grid"],
+      command: () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
+    },
+    {
+      title: "Image",
+      description: "Insert an image from URL or file",
+      icon: /* @__PURE__ */ jsx16(IconPhoto, { size: 20 }),
+      keywords: ["image", "picture", "photo"],
+      command: ({ editor: editor2 }) => {
+        const choice = window.confirm(
+          "Click OK to select an image file, or Cancel to enter a URL."
+        );
+        if (choice) {
+          const input = document.createElement("input");
+          input.type = "file";
+          input.accept = "image/*";
+          input.onchange = (e) => {
+            const file = e.target.files?.[0];
+            if (file) {
+              const reader = new FileReader();
+              reader.onload = (event) => {
+                const src = event.target?.result;
+                editor2.chain().focus().setImage({ src, alt: file.name }).run();
+              };
+              reader.readAsDataURL(file);
+            }
+          };
+          input.click();
+        } else {
+          const url = prompt("Enter image URL:");
+          if (url) {
+            editor2.chain().focus().setImage({ src: url }).run();
+          }
+        }
+      }
+    },
+    {
+      title: "Bold",
+      description: "Make text bold",
+      icon: /* @__PURE__ */ jsx16(IconBold2, { size: 20 }),
+      keywords: ["bold", "strong"],
+      command: () => editor.chain().focus().toggleBold().run()
+    },
+    {
+      title: "Italic",
+      description: "Make text italic",
+      icon: /* @__PURE__ */ jsx16(IconItalic2, { size: 20 }),
+      keywords: ["italic", "em"],
+      command: () => editor.chain().focus().toggleItalic().run()
+    },
+    {
+      title: "Notice",
+      description: "Insert a notice callout box",
+      icon: /* @__PURE__ */ jsx16(IconNote, { size: 20 }),
+      keywords: ["info", "warning", "callout", "notice"],
+      command: () => {
+        editor.chain().focus().setNotice({ variant: "warning", title: "Notice" }).run();
+      }
+    },
+    {
+      title: "Timeline",
+      description: "Create a visual timeline of events",
+      icon: /* @__PURE__ */ jsx16(IconTimelineEvent, { size: 20 }),
+      keywords: ["timeline", "events", "history", "chronology"],
+      command: () => {
+        editor.chain().focus().setTimeline().run();
+      }
+    },
+    {
+      title: "Diagram",
+      description: "Insert a Mermaid diagram (flowchart, sequence, etc.)",
+      icon: /* @__PURE__ */ jsx16(IconChartArea2, { size: 20 }),
+      keywords: ["diagram", "mermaid", "flowchart", "sequence", "chart", "graph"],
+      command: () => {
+        editor.chain().focus().setDiagram().run();
+      }
+    }
+  ];
+}
+
+// src/editor/components/BlockRenderer.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+var BlockRenderer = memo7(function BlockRenderer2({
+  node,
+  editor,
+  updateAttributes,
+  deleteNode
+}) {
+  const block = getBlockByType(node.type.name);
+  if (!block) {
+    return /* @__PURE__ */ jsx17("div", { children: node.textContent });
+  }
+  const Component = block.render;
+  return /* @__PURE__ */ jsx17(
+    Component,
+    {
+      node,
+      editor,
+      updateAttributes,
+      deleteNode
+    }
+  );
+});
+
+// src/editor/extensions/createBlockNode.ts
+import { Node as Node4, mergeAttributes as mergeAttributes5 } from "@tiptap/core";
+import { ReactNodeViewRenderer as ReactNodeViewRenderer7 } from "@tiptap/react";
+function createBlockNode(options) {
+  const {
+    name,
+    group = "block",
+    content = "inline*",
+    draggable = false,
+    defining = true,
+    component
+  } = options;
+  return Node4.create({
+    name,
+    group,
+    content,
+    draggable,
+    defining,
+    parseHTML() {
+      return [{ tag: `div[data-type="${name}"]` }];
+    },
+    renderHTML({ HTMLAttributes }) {
+      return ["div", mergeAttributes5(HTMLAttributes, { "data-type": name }), 0];
+    },
+    addNodeView() {
+      if (!component) {
+        return null;
+      }
+      return ReactNodeViewRenderer7(component);
+    },
+    addAttributes() {
+      return {
+        variant: {
+          default: null,
+          parseHTML: (element) => element.getAttribute("data-variant"),
+          renderHTML: (attributes) => ({ "data-variant": attributes.variant })
+        },
+        title: {
+          default: null,
+          parseHTML: (element) => element.getAttribute("data-title"),
+          renderHTML: (attributes) => ({ "data-title": attributes.title })
+        },
+        checked: {
+          default: false,
+          parseHTML: (element) => element.getAttribute("data-checked") === "true",
+          renderHTML: (attributes) => ({ "data-checked": attributes.checked })
+        },
+        language: {
+          default: null,
+          parseHTML: (element) => element.getAttribute("data-language"),
+          renderHTML: (attributes) => ({ "data-language": attributes.language })
+        }
+      };
+    },
+    addCommands() {
+      return {
+        [`set${name.charAt(0).toUpperCase() + name.slice(1)}`]: (attrs) => ({ commands }) => {
+          return commands.insertContent({
+            type: this.name,
+            attrs,
+            content: content ? [{ type: "paragraph" }] : []
+          });
+        }
+      };
+    }
+  });
+}
+
+// src/editor/utils/contentMigration.ts
+import MarkdownIt from "markdown-it";
+var md = new MarkdownIt({
+  html: true,
+  breaks: false,
+  linkify: true
+});
+md.block.ruler.before("paragraph", "table", (state, startLine, endLine, silent) => {
+  const startPos = state.bMarks[startLine] + state.tShift[startLine];
+  const endPos = state.eMarks[startLine];
+  const firstLine = state.src.slice(startPos, endPos).trim();
+  if (!firstLine.startsWith("|") && !firstLine.startsWith("|-")) {
+    return false;
+  }
+  let nextLine = startLine;
+  const rows = [];
+  while (nextLine < endLine) {
+    const rowStart = state.bMarks[nextLine] + state.tShift[nextLine];
+    const rowEnd = state.eMarks[nextLine];
+    const rowText = state.src.slice(rowStart, rowEnd).trim();
+    if (!rowText.startsWith("|")) {
+      break;
+    }
+    rows.push(rowText);
+    nextLine++;
+  }
+  if (rows.length < 2) {
+    return false;
+  }
+  const separatorRow = rows[1].trim();
+  if (!/^[\s|:\-]+$/.test(separatorRow)) {
+    return false;
+  }
+  if (silent) {
+    return true;
+  }
+  const parseCells = (row, cellType) => {
+    const cells = row.split("|").filter((c) => c.trim() !== "");
+    cells.forEach((cellText) => {
+      state.push(cellType + "_open", cellType, 1);
+      const inline = state.push("inline", "", 0);
+      inline.content = cellText.trim();
+      inline.children = [];
+      state.push(cellType + "_close", cellType, -1);
+    });
+  };
+  const tableOpen = state.push("table_open", "table", 1);
+  tableOpen.map = [startLine, nextLine];
+  state.push("thead_open", "thead", 1);
+  state.push("tr_open", "tr", 1);
+  parseCells(rows[0], "th");
+  state.push("tr_close", "tr", -1);
+  state.push("thead_close", "thead", -1);
+  state.push("tbody_open", "tbody", 1);
+  for (let i = 2; i < rows.length; i++) {
+    state.push("tr_open", "tr", 1);
+    parseCells(rows[i], "td");
+    state.push("tr_close", "tr", -1);
+  }
+  state.push("tbody_close", "tbody", -1);
+  state.push("table_close", "table", -1);
+  state.line = nextLine;
+  return true;
+}, { alt: ["paragraph", "reference", "blockquote"] });
+var markdownToTiptapJSON = (markdown) => {
+  if (!markdown || !markdown.trim()) {
+    return JSON.stringify({ type: "doc", content: [] });
+  }
+  try {
+    const parsed = JSON.parse(markdown);
+    if (parsed.type === "doc") {
+      return markdown;
+    }
+  } catch {
+  }
+  const tokens = md.parse(markdown, {});
+  const content = convertTokensToTiptap(tokens);
+  return JSON.stringify({ type: "doc", content });
+};
+var convertTokensToTiptap = (tokens) => {
+  const content = [];
+  let i = 0;
+  while (i < tokens.length) {
+    const token = tokens[i];
+    switch (token.type) {
+      case "heading_open": {
+        const level = parseInt(token.tag.replace("h", ""));
+        const inline = tokens[i + 1];
+        const text = inline?.content || "";
+        content.push({
+          type: "heading",
+          attrs: { level },
+          content: text ? parseInline(text) : []
+        });
+        i += 3;
+        break;
+      }
+      case "paragraph_open": {
+        const inline = tokens[i + 1];
+        if (inline?.type === "inline" && inline.content?.trim()) {
+          content.push({
+            type: "paragraph",
+            content: parseInline(inline.content)
+          });
+        }
+        i += 3;
+        break;
+      }
+      case "table_open": {
+        const tableContent = [];
+        let j = i + 1;
+        while (j < tokens.length && tokens[j].type !== "table_close") {
+          const t = tokens[j];
+          if (t.type === "tr_open") {
+            const rowCells = [];
+            let k = j + 1;
+            while (k < tokens.length && tokens[k].type !== "tr_close") {
+              const cell = tokens[k];
+              if (cell.type === "th_open" || cell.type === "td_open") {
+                const cellType = cell.type === "th_open" ? "tableHeader" : "tableCell";
+                const inline = tokens[k + 1];
+                const cellContent = inline?.content ? [{ type: "paragraph", content: parseInline(inline.content) }] : [{ type: "paragraph", content: [] }];
+                rowCells.push({
+                  type: cellType,
+                  attrs: { colspan: 1, rowspan: 1, colwidth: null },
+                  content: cellContent
+                });
+                k += 3;
+              } else {
+                k++;
+              }
+            }
+            tableContent.push({
+              type: "tableRow",
+              content: rowCells
+            });
+            j = k + 1;
+          } else {
+            j++;
+          }
+        }
+        content.push({
+          type: "table",
+          content: tableContent
+        });
+        i = j + 1;
+        break;
+      }
+      case "bullet_list_open": {
+        const items = [];
+        let j = i + 1;
+        let isTaskList = false;
+        let peekJ = j;
+        while (peekJ < tokens.length && tokens[peekJ].type !== "bullet_list_close") {
+          if (tokens[peekJ].type === "list_item_open" && tokens[peekJ + 1]?.type === "paragraph_open") {
+            const inline = tokens[peekJ + 2];
+            if (inline?.type === "inline" && inline.content?.match(/^\[[ xX]\]/)) {
+              isTaskList = true;
+              break;
+            }
+          }
+          peekJ++;
+        }
+        while (j < tokens.length && tokens[j].type !== "bullet_list_close") {
+          if (tokens[j].type === "list_item_open") {
+            const itemContent = [];
+            let k = j + 1;
+            while (k < tokens.length && tokens[k].type !== "list_item_close") {
+              if (tokens[k].type === "paragraph_open" && tokens[k + 1]?.type === "inline") {
+                const text = tokens[k + 1].content;
+                if (text?.trim()) {
+                  const taskMatch = text.match(/^\[([ xX])\]\s*(.*)/);
+                  if (isTaskList && taskMatch) {
+                    const checked = taskMatch[1].toLowerCase() === "x";
+                    const remainingText = taskMatch[2];
+                    itemContent.push({
+                      type: "taskItem",
+                      attrs: { checked },
+                      content: remainingText.trim() ? [{ type: "paragraph", content: parseInline(remainingText) }] : [{ type: "paragraph", content: [] }]
+                    });
+                  } else {
+                    itemContent.push({
+                      type: "listItem",
+                      content: [{
+                        type: "paragraph",
+                        content: parseInline(text)
+                      }]
+                    });
+                  }
+                }
+                k += 3;
+              } else {
+                k++;
+              }
+            }
+            items.push(...itemContent);
+            j = k + 1;
+          } else {
+            j++;
+          }
+        }
+        if (isTaskList) {
+          content.push({
+            type: "taskList",
+            content: items
+          });
+        } else {
+          content.push({
+            type: "bulletList",
+            attrs: { tight: true },
+            content: items
+          });
+        }
+        i = j + 1;
+        break;
+      }
+      case "ordered_list_open": {
+        const items = [];
+        let j = i + 1;
+        while (j < tokens.length && tokens[j].type !== "ordered_list_close") {
+          if (tokens[j].type === "list_item_open") {
+            const itemContent = [];
+            let k = j + 1;
+            while (k < tokens.length && tokens[k].type !== "list_item_close") {
+              if (tokens[k].type === "paragraph_open" && tokens[k + 1]?.type === "inline") {
+                const text = tokens[k + 1].content;
+                if (text?.trim()) {
+                  itemContent.push({
+                    type: "paragraph",
+                    content: parseInline(text)
+                  });
+                }
+                k += 3;
+              } else {
+                k++;
+              }
+            }
+            items.push({
+              type: "listItem",
+              content: itemContent.length ? itemContent : [{ type: "paragraph", content: [] }]
+            });
+            j = k + 1;
+          } else {
+            j++;
+          }
+        }
+        content.push({
+          type: "orderedList",
+          attrs: { start: 1 },
+          content: items
+        });
+        i = j + 1;
+        break;
+      }
+      case "blockquote_open": {
+        const quoteContent = [];
+        let j = i + 1;
+        while (j < tokens.length && tokens[j].type !== "blockquote_close") {
+          if (tokens[j].type === "paragraph_open" && tokens[j + 1]?.type === "inline") {
+            const text = tokens[j + 1].content;
+            quoteContent.push({
+              type: "paragraph",
+              content: parseInline(text)
+            });
+            j += 3;
+          } else {
+            j++;
+          }
+        }
+        content.push({
+          type: "blockquote",
+          content: quoteContent
+        });
+        i = j + 1;
+        break;
+      }
+      case "fence":
+      case "code_block": {
+        const language = token.info?.trim() || "";
+        content.push({
+          type: "codeBlock",
+          attrs: { language },
+          content: [{ type: "text", text: token.content }]
+        });
+        i++;
+        break;
+      }
+      case "hr":
+        content.push({ type: "horizontalRule" });
+        i++;
+        break;
+      default:
+        i++;
+    }
+  }
+  return content;
+};
+var parseInline = (text) => {
+  const nodes = [];
+  let remaining = text;
+  while (remaining.length > 0) {
+    const codeMatch = remaining.match(/^`([^`]+)`/);
+    if (codeMatch) {
+      nodes.push({ type: "text", text: codeMatch[1], marks: [{ type: "code" }] });
+      remaining = remaining.slice(codeMatch[0].length);
+      continue;
+    }
+    const boldItalicMatch = remaining.match(/^\*\*\*([^*]+)\*\*\*/);
+    if (boldItalicMatch) {
+      nodes.push({
+        type: "text",
+        text: boldItalicMatch[1],
+        marks: [{ type: "bold" }, { type: "italic" }]
+      });
+      remaining = remaining.slice(boldItalicMatch[0].length);
+      continue;
+    }
+    const boldMatch = remaining.match(/^\*\*([^*]+)\*\*/);
+    if (boldMatch) {
+      nodes.push({ type: "text", text: boldMatch[1], marks: [{ type: "bold" }] });
+      remaining = remaining.slice(boldMatch[0].length);
+      continue;
+    }
+    const italicMatch = remaining.match(/^\*([^*]+)\*/);
+    if (italicMatch) {
+      nodes.push({ type: "text", text: italicMatch[1], marks: [{ type: "italic" }] });
+      remaining = remaining.slice(italicMatch[0].length);
+      continue;
+    }
+    const linkMatch = remaining.match(/^\[([^\]]+)\]\(([^)]+)\)/);
+    if (linkMatch) {
+      nodes.push({
+        type: "text",
+        text: linkMatch[1],
+        marks: [{ type: "link", attrs: { href: linkMatch[2] } }]
+      });
+      remaining = remaining.slice(linkMatch[0].length);
+      continue;
+    }
+    const nextSpecial = remaining.match(/^[^`*\[\\]+/);
+    if (nextSpecial) {
+      nodes.push({ type: "text", text: nextSpecial[0] });
+      remaining = remaining.slice(nextSpecial[0].length);
+    } else {
+      nodes.push({ type: "text", text: remaining[0] });
+      remaining = remaining.slice(1);
+    }
+  }
+  return nodes.length ? nodes : [{ type: "text", text }];
+};
+var isTiptapJSON = (content) => {
+  if (!content) return false;
+  try {
+    const parsed = JSON.parse(content);
+    return parsed.type === "doc";
+  } catch {
+    return false;
+  }
+};
+var migrateToTiptapJSON = (content) => {
+  if (isTiptapJSON(content)) {
+    return content;
+  }
+  return markdownToTiptapJSON(content);
+};
+export {
+  BACKEND_URL,
+  BLOCKS,
+  BlockRenderer,
+  BlockWrapper,
+  BubbleMenu,
+  CodeBlock,
+  CodeBlockExtension,
+  DiagramBlock,
+  DiagramExtension,
+  DocumentEditor,
+  EditorContent,
+  MarkdownEditor_default as MarkdownEditor,
+  NoticeBlock,
+  NoticeExtension,
+  SlashCommandList,
+  TableControls,
+  TableOfContentsPanel,
+  TaskBlock,
+  TaskItemExtension,
+  TimelineBlock,
+  TimelineExtension,
+  apiClient,
+  apiUtils,
+  createBlockNode,
+  createSlashCommand,
+  filterBlocks,
+  getBackendUrl,
+  getBlockByType,
+  getDefaultBlockItems,
+  handlePaste,
+  instructionsApi,
+  isTiptapJSON,
+  llmApi,
+  markdownToTiptapJSON,
+  migrateToTiptapJSON,
+  registerBlock,
+  serializeSelectionToMarkdown,
+  serializeToMarkdown,
+  setAccessTokenGetter,
+  setBackendUrl,
+  useEditorWithStorage
+};
+//# sourceMappingURL=editor.js.map