draftly 0.1.0-alpha.1 → 1.0.7

package/dist/chunk-N3WL3XPB.js

@@ -0,0 +1,3360 @@
+import { DraftlyPlugin, DecorationPlugin } from './chunk-CG4M4TC7.js';
+import { createTheme, toggleMarkdownStyle } from './chunk-DFQYXFOP.js';
+import { Decoration, WidgetType } from '@codemirror/view';
+import { syntaxTree } from '@codemirror/language';
+import { tags, highlightCode, classHighlighter } from '@lezer/highlight';
+import DOMPurify from 'dompurify';
+import katex from 'katex';
+import katexCss from 'katex/dist/katex.min.css?raw';
+import mermaid from 'mermaid';
+import { languages } from '@codemirror/language-data';
+
+// src/plugins/paragraph-plugin.ts
+var ParagraphPlugin = class extends DraftlyPlugin {
+  name = "paragraph";
+  version = "1.0.0";
+  requiredNodes = ["Paragraph"];
+  /**
+   * Plugin theme for preview styling
+   */
+  get theme() {
+    return theme;
+  }
+  renderToHTML(node, children) {
+    if (node.name !== "Paragraph") {
+      return null;
+    }
+    return `<p class="cm-draftly-paragraph">${children}</p>`;
+  }
+};
+var theme = createTheme({
+  default: {
+    ".cm-draftly-paragraph": {
+      paddingTop: "0.5em",
+      paddingBottom: "0.5em"
+    }
+  }
+});
+var HEADING_TYPES = ["ATXHeading1", "ATXHeading2", "ATXHeading3", "ATXHeading4", "ATXHeading5", "ATXHeading6"];
+var headingMarkDecorations = {
+  "heading-1": Decoration.mark({ class: "cm-draftly-h1" }),
+  "heading-2": Decoration.mark({ class: "cm-draftly-h2" }),
+  "heading-3": Decoration.mark({ class: "cm-draftly-h3" }),
+  "heading-4": Decoration.mark({ class: "cm-draftly-h4" }),
+  "heading-5": Decoration.mark({ class: "cm-draftly-h5" }),
+  "heading-6": Decoration.mark({ class: "cm-draftly-h6" }),
+  "header-mark-class": Decoration.mark({ class: "cm-draftly-header-mark" }),
+  "heading-mark": Decoration.replace({})
+};
+var headingLineDecorations = {
+  "heading-1": Decoration.line({ class: "cm-draftly-line-h1" }),
+  "heading-2": Decoration.line({ class: "cm-draftly-line-h2" }),
+  "heading-3": Decoration.line({ class: "cm-draftly-line-h3" }),
+  "heading-4": Decoration.line({ class: "cm-draftly-line-h4" }),
+  "heading-5": Decoration.line({ class: "cm-draftly-line-h5" }),
+  "heading-6": Decoration.line({ class: "cm-draftly-line-h6" })
+};
+var HeadingPlugin = class extends DecorationPlugin {
+  name = "heading";
+  version = "1.0.0";
+  decorationPriority = 10;
+  requiredNodes = [
+    "ATXHeading1",
+    "ATXHeading2",
+    "ATXHeading3",
+    "ATXHeading4",
+    "ATXHeading5",
+    "ATXHeading6",
+    "HeaderMark"
+  ];
+  /**
+   * Constructor - calls super constructor
+   */
+  constructor() {
+    super();
+  }
+  /**
+   * Plugin theme
+   */
+  get theme() {
+    return theme2;
+  }
+  /**
+   * Build heading decorations by iterating the syntax tree
+   */
+  buildDecorations(ctx) {
+    const { view, decorations } = ctx;
+    const tree = syntaxTree(view.state);
+    tree.iterate({
+      enter: (node) => {
+        const { from, to, name } = node;
+        if (!HEADING_TYPES.includes(name)) {
+          return;
+        }
+        const level = parseInt(name.slice(-1), 10);
+        const headingClass = `heading-${level}`;
+        const lineClass = `heading-${level}`;
+        const line = view.state.doc.lineAt(from);
+        decorations.push(headingLineDecorations[lineClass].range(line.from));
+        decorations.push(headingMarkDecorations[headingClass].range(from, to));
+        const headingMark = node.node.getChild("HeaderMark");
+        if (headingMark) {
+          const markEnd = Math.min(headingMark.to + 1, line.to);
+          const cursorInNode = ctx.selectionOverlapsRange(from, to);
+          if (!cursorInNode) {
+            decorations.push(headingMarkDecorations["heading-mark"].range(headingMark.from, markEnd));
+          } else {
+            decorations.push(headingMarkDecorations["header-mark-class"].range(headingMark.from, markEnd));
+          }
+        }
+      }
+    });
+  }
+  renderToHTML(node, children) {
+    if (node.name === "HeaderMark") {
+      return "";
+    }
+    if (!HEADING_TYPES.includes(node.name)) {
+      return null;
+    }
+    const level = parseInt(node.name.slice(-1), 10);
+    const lineClass = headingLineDecorations[`heading-${level}`].spec.class;
+    const headingClass = headingMarkDecorations[`heading-${level}`].spec.class;
+    return `<div class="${lineClass}">
+      <h${level} class="${headingClass}">${children}</h${level}>
+    </div>
+`;
+  }
+};
+var theme2 = createTheme({
+  default: {
+    ".cm-draftly-h1": {
+      fontSize: "2em",
+      fontWeight: "bold",
+      fontFamily: "sans-serif",
+      textDecoration: "none"
+    },
+    ".cm-draftly-h2": {
+      fontSize: "1.75em",
+      fontWeight: "bold",
+      fontFamily: "sans-serif",
+      textDecoration: "none"
+    },
+    ".cm-draftly-h3": {
+      fontSize: "1.5em",
+      fontWeight: "bold",
+      fontFamily: "sans-serif",
+      textDecoration: "none"
+    },
+    ".cm-draftly-h4": {
+      fontSize: "1.25em",
+      fontWeight: "bold",
+      fontFamily: "sans-serif",
+      textDecoration: "none"
+    },
+    ".cm-draftly-h5": {
+      fontSize: "1em",
+      fontWeight: "bold",
+      fontFamily: "sans-serif",
+      textDecoration: "none"
+    },
+    ".cm-draftly-h6": {
+      fontSize: "0.75em",
+      fontWeight: "bold",
+      fontFamily: "sans-serif",
+      textDecoration: "none"
+    },
+    // Heading line styles
+    ".cm-draftly-line-h1": {
+      paddingTop: "1.5em",
+      paddingBottom: "0.5em"
+    },
+    ".cm-draftly-line-h2": {
+      paddingTop: "1.25em",
+      paddingBottom: "0.5em"
+    },
+    ".cm-draftly-line-h3, .cm-draftly-line-h4, .cm-draftly-line-h5, .cm-draftly-line-h6": {
+      paddingTop: "1em",
+      paddingBottom: "0.5em"
+    },
+    ".cm-draftly-header-mark": {
+      opacity: 0.5
+    }
+  }
+});
+var INLINE_TYPES = {
+  Emphasis: "emphasis",
+  StrongEmphasis: "strong",
+  Strikethrough: "strikethrough",
+  Subscript: "subscript",
+  Superscript: "superscript",
+  Highlight: "highlight"
+};
+var inlineMarkDecorations = {
+  emphasis: Decoration.mark({ class: "cm-draftly-emphasis" }),
+  strong: Decoration.mark({ class: "cm-draftly-strong" }),
+  strikethrough: Decoration.mark({ class: "cm-draftly-strikethrough" }),
+  subscript: Decoration.mark({ class: "cm-draftly-subscript" }),
+  superscript: Decoration.mark({ class: "cm-draftly-superscript" }),
+  highlight: Decoration.mark({ class: "cm-draftly-highlight" }),
+  // Markers (* _ ~~ ^ ~ ==)
+  "inline-mark": Decoration.replace({})
+};
+var EQUALS = 61;
+var Punctuation = /[!"#$%&'()*+,\-./:;<=>?@\[\\\]^_`{|}~\xA1\u2010-\u2027]/;
+try {
+  Punctuation = new RegExp("[\\p{S}|\\p{P}]", "u");
+} catch {
+}
+var HighlightDelim = { resolve: "Highlight", mark: "HighlightMark" };
+var highlightParser = {
+  name: "Highlight",
+  parse(cx, next, pos) {
+    if (next !== EQUALS || cx.char(pos + 1) !== EQUALS) return -1;
+    if (cx.char(pos + 2) === EQUALS) return -1;
+    const before = cx.slice(pos - 1, pos);
+    const after = cx.slice(pos + 2, pos + 3);
+    const sBefore = /\s|^$/.test(before), sAfter = /\s|^$/.test(after);
+    const pBefore = Punctuation.test(before), pAfter = Punctuation.test(after);
+    return cx.addDelimiter(
+      HighlightDelim,
+      pos,
+      pos + 2,
+      !sAfter && (!pAfter || sBefore || pBefore),
+      !sBefore && (!pBefore || sAfter || pAfter)
+    );
+  }
+};
+var InlinePlugin = class extends DecorationPlugin {
+  name = "inline";
+  version = "1.0.0";
+  decorationPriority = 20;
+  requiredNodes = [
+    "Emphasis",
+    "StrongEmphasis",
+    "Strikethrough",
+    "Subscript",
+    "Superscript",
+    "Highlight",
+    "EmphasisMark",
+    "StrikethroughMark",
+    "SubscriptMark",
+    "SuperscriptMark",
+    "HighlightMark"
+  ];
+  marks = [];
+  constructor() {
+    super();
+    for (const mark of Object.keys(INLINE_TYPES)) {
+      this.marks.push(...this.getMarkerNames(mark));
+    }
+  }
+  /**
+   * Plugin theme
+   */
+  get theme() {
+    return theme3;
+  }
+  /**
+   * Keyboard shortcuts for inline formatting
+   */
+  getKeymap() {
+    return [
+      {
+        key: "Mod-b",
+        run: toggleMarkdownStyle("**"),
+        preventDefault: true
+      },
+      {
+        key: "Mod-i",
+        run: toggleMarkdownStyle("*"),
+        preventDefault: true
+      },
+      {
+        key: "Mod-Shift-s",
+        run: toggleMarkdownStyle("~~"),
+        preventDefault: true
+      },
+      {
+        key: "Mod-,",
+        run: toggleMarkdownStyle("~"),
+        preventDefault: true
+      },
+      {
+        key: "Mod-.",
+        run: toggleMarkdownStyle("^"),
+        preventDefault: true
+      },
+      {
+        key: "Mod-Shift-h",
+        run: toggleMarkdownStyle("=="),
+        preventDefault: true
+      }
+    ];
+  }
+  /**
+   * Return markdown parser extensions for highlight syntax (==text==)
+   */
+  getMarkdownConfig() {
+    return {
+      defineNodes: [
+        { name: "Highlight", style: tags.emphasis },
+        { name: "HighlightMark", style: tags.processingInstruction }
+      ],
+      parseInline: [highlightParser]
+    };
+  }
+  /**
+   * Build inline decorations by iterating the syntax tree
+   */
+  buildDecorations(ctx) {
+    const { view, decorations } = ctx;
+    const tree = syntaxTree(view.state);
+    tree.iterate({
+      enter: (node) => {
+        const { from, to, name } = node;
+        const inlineType = INLINE_TYPES[name];
+        if (!inlineType) {
+          return;
+        }
+        decorations.push(inlineMarkDecorations[inlineType].range(from, to));
+        const cursorInNode = ctx.selectionOverlapsRange(from, to);
+        if (!cursorInNode) {
+          const markerNames = this.getMarkerNames(name);
+          for (const markerName of markerNames) {
+            const marks = node.node.getChildren(markerName);
+            for (const mark of marks) {
+              decorations.push(inlineMarkDecorations["inline-mark"].range(mark.from, mark.to));
+            }
+          }
+        }
+      }
+    });
+  }
+  /**
+   * Get the marker node names for a given inline type
+   */
+  getMarkerNames(nodeType) {
+    switch (nodeType) {
+      case "Emphasis":
+      case "StrongEmphasis":
+        return ["EmphasisMark"];
+      case "Strikethrough":
+        return ["StrikethroughMark"];
+      case "Subscript":
+        return ["SubscriptMark"];
+      case "Superscript":
+        return ["SuperscriptMark"];
+      case "Highlight":
+        return ["HighlightMark"];
+      default:
+        return [];
+    }
+  }
+  renderToHTML(node, children) {
+    if (this.marks.includes(node.name)) {
+      return "";
+    }
+    const inlineType = INLINE_TYPES[node.name];
+    if (!inlineType) {
+      return null;
+    }
+    const className = inlineMarkDecorations[inlineType].spec.class;
+    return `<span class="${className}">${children}</span>`;
+  }
+};
+var theme3 = createTheme({
+  default: {
+    // Emphasis (italic)
+    ".cm-draftly-emphasis": {
+      fontStyle: "italic"
+    },
+    // Strong (bold)
+    ".cm-draftly-strong": {
+      fontWeight: "bold"
+    },
+    // Strikethrough
+    ".cm-draftly-strikethrough": {
+      textDecoration: "line-through",
+      opacity: "0.7"
+    },
+    // Subscript
+    ".cm-draftly-subscript": {
+      fontSize: "0.75em",
+      verticalAlign: "sub"
+    },
+    // Superscript
+    ".cm-draftly-superscript": {
+      fontSize: "0.75em",
+      verticalAlign: "super"
+    },
+    // Highlight
+    ".cm-draftly-highlight": {
+      backgroundColor: "rgba(255, 213, 0, 0.35)",
+      borderRadius: "2px",
+      padding: "1px 2px"
+    }
+  }
+});
+var linkMarkDecorations = {
+  "link-text": Decoration.mark({ class: "cm-draftly-link-text" }),
+  "link-marker": Decoration.mark({ class: "cm-draftly-link-marker" }),
+  "link-url": Decoration.mark({ class: "cm-draftly-link-url" }),
+  "link-hidden": Decoration.mark({ class: "cm-draftly-link-hidden" })
+};
+function parseLinkMarkdown(content) {
+  const match = content.match(/^\[([^\]]*)\]\(([^"\s)]+)(?:\s+"([^"]*)")?\s*\)$/);
+  if (!match) return null;
+  const result = {
+    text: match[1] || "",
+    url: match[2]
+  };
+  if (match[3] !== void 0) {
+    result.title = match[3];
+  }
+  return result;
+}
+var LinkTooltipWidget = class extends WidgetType {
+  constructor(url, from, to) {
+    super();
+    this.url = url;
+    this.from = from;
+    this.to = to;
+  }
+  eq(other) {
+    return other.url === this.url && other.from === this.from && other.to === this.to;
+  }
+  toDOM(view) {
+    const wrapper = document.createElement("span");
+    wrapper.className = "cm-draftly-link-wrapper";
+    wrapper.style.cursor = "pointer";
+    const tooltip = document.createElement("span");
+    tooltip.className = "cm-draftly-link-tooltip";
+    tooltip.textContent = this.url;
+    wrapper.appendChild(tooltip);
+    wrapper.addEventListener("mouseenter", () => {
+      tooltip.classList.add("cm-draftly-link-tooltip-visible");
+    });
+    wrapper.addEventListener("mouseleave", () => {
+      tooltip.classList.remove("cm-draftly-link-tooltip-visible");
+    });
+    wrapper.addEventListener("click", (e) => {
+      if (e.ctrlKey || e.metaKey) {
+        e.preventDefault();
+        e.stopPropagation();
+        window.open(this.url, "_blank", "noopener,noreferrer");
+      } else {
+        e.preventDefault();
+        e.stopPropagation();
+        view.dispatch({
+          selection: { anchor: this.from, head: this.to },
+          scrollIntoView: true
+        });
+        view.focus();
+      }
+    });
+    return wrapper;
+  }
+  ignoreEvent(event) {
+    return event.type !== "click" && event.type !== "mouseenter" && event.type !== "mouseleave";
+  }
+};
+var LinkPlugin = class extends DecorationPlugin {
+  name = "link";
+  version = "1.0.0";
+  decorationPriority = 22;
+  requiredNodes = ["Link"];
+  constructor() {
+    super();
+  }
+  /**
+   * Plugin theme
+   */
+  get theme() {
+    return theme4;
+  }
+  /**
+   * Keyboard shortcuts for link formatting
+   */
+  getKeymap() {
+    return [
+      {
+        key: "Mod-k",
+        run: (view) => this.toggleLink(view),
+        preventDefault: true
+      }
+    ];
+  }
+  /**
+   * URL regex pattern
+   */
+  urlPattern = /^(https?:\/\/|www\.)[^\s]+$/i;
+  /**
+   * Toggle link on selection
+   * - If text is selected and is a URL: [](url) with cursor in brackets
+   * - If text is selected (not URL): [text]() with cursor in parentheses
+   * - If nothing selected: []() with cursor in brackets
+   * - If already a link: remove syntax, leave plain text
+   */
+  toggleLink(view) {
+    const { state } = view;
+    const { from, to, empty } = state.selection.main;
+    const selectedText = state.sliceDoc(from, to);
+    const linkMatch = selectedText.match(/^\[([^\]]*)\]\(([^)]*)\)$/);
+    if (linkMatch) {
+      const linkText = linkMatch[1] || "";
+      view.dispatch({
+        changes: { from, to, insert: linkText },
+        selection: { anchor: from, head: from + linkText.length }
+      });
+      return true;
+    }
+    const lineStart = state.doc.lineAt(from).from;
+    const lineEnd = state.doc.lineAt(to).to;
+    const lineText = state.sliceDoc(lineStart, lineEnd);
+    const linkRegex = /\[([^\]]*)\]\(([^)]*)\)/g;
+    let match;
+    while ((match = linkRegex.exec(lineText)) !== null) {
+      const matchFrom = lineStart + match.index;
+      const matchTo = matchFrom + match[0].length;
+      if (from >= matchFrom && to <= matchTo) {
+        const linkText = match[1] || "";
+        view.dispatch({
+          changes: { from: matchFrom, to: matchTo, insert: linkText },
+          selection: { anchor: matchFrom, head: matchFrom + linkText.length }
+        });
+        return true;
+      }
+    }
+    if (empty) {
+      view.dispatch({
+        changes: { from, insert: "[]()" },
+        selection: { anchor: from + 1 }
+      });
+    } else if (this.urlPattern.test(selectedText)) {
+      const newText = `[](${selectedText})`;
+      view.dispatch({
+        changes: { from, to, insert: newText },
+        selection: { anchor: from + 1 }
+      });
+    } else {
+      const newText = `[${selectedText}]()`;
+      view.dispatch({
+        changes: { from, to, insert: newText },
+        selection: { anchor: from + selectedText.length + 3 }
+      });
+    }
+    return true;
+  }
+  buildDecorations(ctx) {
+    const { view, decorations } = ctx;
+    const tree = syntaxTree(view.state);
+    tree.iterate({
+      enter: (node) => {
+        const { from, to, name } = node;
+        if (name === "Link") {
+          const content = view.state.sliceDoc(from, to);
+          const parsed = parseLinkMarkdown(content);
+          if (!parsed) return;
+          const cursorInRange = ctx.selectionOverlapsRange(from, to);
+          if (cursorInRange) {
+            this.decorateRawLink(node.node, decorations, view);
+          } else {
+            decorations.push(linkMarkDecorations["link-hidden"].range(from, to));
+            decorations.push(
+              Decoration.widget({
+                widget: new LinkTooltipWidget(parsed.url, from, to),
+                side: 1
+              }).range(to)
+            );
+            decorations.push(
+              Decoration.replace({
+                widget: new LinkTextWidget(parsed.text, parsed.url, from, to, parsed.title)
+              }).range(from, to)
+            );
+          }
+        }
+      }
+    });
+  }
+  /**
+   * Decorate raw link markdown when cursor is in range
+   */
+  decorateRawLink(node, decorations, view) {
+    const content = view.state.sliceDoc(node.from, node.to);
+    decorations.push(linkMarkDecorations["link-marker"].range(node.from, node.from + 1));
+    const bracketParen = content.indexOf("](");
+    if (bracketParen !== -1) {
+      if (bracketParen > 1) {
+        decorations.push(linkMarkDecorations["link-text"].range(node.from + 1, node.from + bracketParen));
+      }
+      decorations.push(
+        linkMarkDecorations["link-marker"].range(node.from + bracketParen, node.from + bracketParen + 2)
+      );
+      const urlChild = node.getChild("URL");
+      if (urlChild) {
+        decorations.push(linkMarkDecorations["link-url"].range(urlChild.from, urlChild.to));
+      }
+      decorations.push(linkMarkDecorations["link-marker"].range(node.to - 1, node.to));
+    }
+  }
+  /**
+   * Render link to HTML for preview mode
+   */
+  renderToHTML(node, _children, ctx) {
+    if (node.name !== "Link") return null;
+    const content = ctx.sliceDoc(node.from, node.to);
+    const parsed = parseLinkMarkdown(content);
+    if (!parsed) return null;
+    const textContent = ctx.sanitize(parsed.text);
+    const urlAttr = ctx.sanitize(parsed.url);
+    const titleAttr = parsed.title ? ` title="${ctx.sanitize(parsed.title)}"` : "";
+    return `<a class="cm-draftly-link" href="${urlAttr}"${titleAttr} target="_blank" rel="noopener noreferrer">${textContent}</a>`;
+  }
+};
+var LinkTextWidget = class extends WidgetType {
+  constructor(text, url, from, to, title) {
+    super();
+    this.text = text;
+    this.url = url;
+    this.from = from;
+    this.to = to;
+    this.title = title;
+  }
+  eq(other) {
+    return other.text === this.text && other.url === this.url && other.from === this.from && other.to === this.to && other.title === this.title;
+  }
+  toDOM(view) {
+    const span = document.createElement("span");
+    span.className = "cm-draftly-link-styled";
+    span.textContent = this.text;
+    span.style.cursor = "pointer";
+    if (this.title) {
+      span.title = this.title;
+    }
+    const tooltip = document.createElement("span");
+    tooltip.className = "cm-draftly-link-tooltip";
+    tooltip.textContent = this.url;
+    span.appendChild(tooltip);
+    span.addEventListener("mouseenter", () => {
+      tooltip.classList.add("cm-draftly-link-tooltip-visible");
+    });
+    span.addEventListener("mouseleave", () => {
+      tooltip.classList.remove("cm-draftly-link-tooltip-visible");
+    });
+    span.addEventListener("click", (e) => {
+      if (e.ctrlKey || e.metaKey) {
+        e.preventDefault();
+        e.stopPropagation();
+        window.open(this.url, "_blank", "noopener,noreferrer");
+      } else {
+        e.preventDefault();
+        e.stopPropagation();
+        view.dispatch({
+          selection: { anchor: this.from, head: this.to },
+          scrollIntoView: true
+        });
+        view.focus();
+      }
+    });
+    return span;
+  }
+  ignoreEvent(event) {
+    return event.type !== "click" && event.type !== "mouseenter" && event.type !== "mouseleave";
+  }
+};
+var theme4 = createTheme({
+  default: {
+    // Link text
+    ".cm-draftly-link-text": {
+      color: "#0366d6"
+    },
+    // Link markers ([ ] ( ))
+    ".cm-draftly-link-marker": {
+      color: "#6a737d",
+      fontFamily: "var(--font-jetbrains-mono, monospace)"
+    },
+    // URL in raw markdown
+    ".cm-draftly-link-url": {
+      color: "#6a737d",
+      fontStyle: "italic"
+    },
+    // Hidden markdown syntax
+    ".cm-draftly-link-hidden": {
+      display: "none"
+    },
+    // Styled link when cursor is not in range
+    ".cm-draftly-link-styled": {
+      color: "#0366d6",
+      textDecoration: "underline",
+      position: "relative",
+      cursor: "pointer"
+    },
+    ".cm-draftly-link-styled:hover": {
+      color: "#0056b3"
+    },
+    // Preview link styling
+    ".cm-draftly-link": {
+      color: "#0366d6",
+      textDecoration: "underline"
+    },
+    ".cm-draftly-link:hover": {
+      color: "#0056b3"
+    },
+    // Tooltip styling
+    ".cm-draftly-link-tooltip": {
+      display: "none",
+      position: "absolute",
+      bottom: "100%",
+      left: "50%",
+      transform: "translateX(-50%)",
+      backgroundColor: "#24292e",
+      color: "#ffffff",
+      padding: "4px 8px",
+      borderRadius: "4px",
+      fontSize: "12px",
+      whiteSpace: "nowrap",
+      zIndex: "1000",
+      pointerEvents: "none",
+      marginBottom: "4px",
+      maxWidth: "300px",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    },
+    ".cm-draftly-link-tooltip-visible": {
+      display: "block"
+    }
+  },
+  dark: {
+    ".cm-draftly-link-text": {
+      color: "#58a6ff"
+    },
+    ".cm-draftly-link-marker": {
+      color: "#8b949e"
+    },
+    ".cm-draftly-link-url": {
+      color: "#8b949e"
+    },
+    ".cm-draftly-link-styled": {
+      color: "#58a6ff"
+    },
+    ".cm-draftly-link-styled:hover": {
+      color: "#79c0ff"
+    },
+    ".cm-draftly-link": {
+      color: "#58a6ff"
+    },
+    ".cm-draftly-link:hover": {
+      color: "#79c0ff"
+    },
+    ".cm-draftly-link-tooltip": {
+      backgroundColor: "#30363d",
+      color: "#c9d1d9"
+    }
+  }
+});
+var classes = {
+  // Unordered list classes
+  lineUL: "cm-draftly-list-line-ul",
+  markUL: "cm-draftly-list-mark-ul",
+  // Ordered list classes
+  lineOL: "cm-draftly-list-line-ol",
+  markOL: "cm-draftly-list-mark-ol",
+  // Task list classes
+  taskLine: "cm-draftly-task-line",
+  taskMarker: "cm-draftly-task-marker",
+  // Common classes
+  content: "cm-draftly-list-content",
+  indent: "cm-draftly-list-indent",
+  active: " cm-draftly-active",
+  preview: "cm-draftly-preview"
+};
+var TaskCheckboxWidget = class extends WidgetType {
+  constructor(checked) {
+    super();
+    this.checked = checked;
+  }
+  eq(other) {
+    return other.checked === this.checked;
+  }
+  toDOM(view) {
+    const wrap = document.createElement("span");
+    wrap.className = `cm-draftly-task-checkbox ${this.checked ? "checked" : ""}`;
+    wrap.setAttribute("aria-hidden", "true");
+    const checkbox = document.createElement("input");
+    checkbox.type = "checkbox";
+    checkbox.checked = this.checked;
+    checkbox.tabIndex = -1;
+    checkbox.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      this.toggleCheckbox(view, wrap);
+    });
+    wrap.appendChild(checkbox);
+    return wrap;
+  }
+  ignoreEvent() {
+    return false;
+  }
+  /** Toggle the checkbox state in the document */
+  toggleCheckbox(view, wrap) {
+    const pos = view.posAtDOM(wrap);
+    const line = view.state.doc.lineAt(pos);
+    const match = line.text.match(/^(\s*(?:[-*+]|\d+\.)\s*)\[([ xX])\]/);
+    if (match) {
+      const markerStart = line.from + match[1].length + 1;
+      const newChar = this.checked ? " " : "x";
+      view.dispatch({
+        changes: { from: markerStart, to: markerStart + 1, insert: newChar }
+      });
+    }
+  }
+};
+var ListPlugin = class extends DecorationPlugin {
+  name = "list";
+  version = "1.0.0";
+  decorationPriority = 20;
+  requiredNodes = [
+    "BulletList",
+    "OrderedList",
+    "ListItem",
+    "ListMark",
+    "Task",
+    "TaskMarker"
+  ];
+  get theme() {
+    return theme5;
+  }
+  /**
+   * Keyboard shortcuts for list formatting
+   */
+  getKeymap() {
+    return [
+      {
+        key: "Mod-Shift-8",
+        run: (view) => this.toggleListOnLines(view, "- "),
+        preventDefault: true
+      },
+      {
+        key: "Mod-Shift-7",
+        run: (view) => this.toggleListOnLines(view, "1. "),
+        preventDefault: true
+      },
+      {
+        key: "Mod-Shift-9",
+        run: (view) => this.toggleListOnLines(view, "- [ ] "),
+        preventDefault: true
+      }
+    ];
+  }
+  /**
+   * Toggle list marker on current line or selected lines
+   */
+  toggleListOnLines(view, marker) {
+    const { state } = view;
+    const { from, to } = state.selection.main;
+    const startLine = state.doc.lineAt(from);
+    const endLine = state.doc.lineAt(to);
+    const changes = [];
+    const listMarkerRegex = /^(\s*)([-*+]|\d+\.)\s(\[[ xX]\]\s)?/;
+    const isOrderedMarker = marker === "1. ";
+    let orderNum = 1;
+    for (let lineNum = startLine.number; lineNum <= endLine.number; lineNum++) {
+      const line = state.doc.line(lineNum);
+      const match = line.text.match(listMarkerRegex);
+      const actualMarker = isOrderedMarker ? `${orderNum}. ` : marker;
+      if (match) {
+        const existingMarker = match[0];
+        const indent = match[1] || "";
+        const isUnordered = /^[-*+]$/.test(match[2]);
+        const isOrdered = /^\d+\.$/.test(match[2]);
+        const hasTask = !!match[3];
+        const wantUnordered = marker === "- ";
+        const wantOrdered = isOrderedMarker;
+        const wantTask = marker === "- [ ] ";
+        if (wantUnordered && isUnordered && !hasTask || wantOrdered && isOrdered && !hasTask || wantTask && hasTask) {
+          changes.push({
+            from: line.from,
+            to: line.from + existingMarker.length,
+            insert: indent
+          });
+        } else {
+          changes.push({
+            from: line.from,
+            to: line.from + existingMarker.length,
+            insert: indent + actualMarker
+          });
+          orderNum++;
+        }
+      } else {
+        const indentMatch = line.text.match(/^(\s*)/);
+        const indent = indentMatch ? indentMatch[1] : "";
+        changes.push({
+          from: line.from + indent.length,
+          to: line.from + indent.length,
+          insert: actualMarker
+        });
+        orderNum++;
+      }
+    }
+    if (changes.length > 0) {
+      view.dispatch({ changes });
+    }
+    return true;
+  }
+  buildDecorations(ctx) {
+    const { view, decorations } = ctx;
+    const tree = syntaxTree(view.state);
+    tree.iterate({
+      enter: (node) => {
+        const { from, to, name } = node;
+        const line = view.state.doc.lineAt(from);
+        const cursorInLine = ctx.cursorInRange(line.from, line.to);
+        switch (name) {
+          case "ListItem":
+            this.decorateListItem(node, line, decorations);
+            break;
+          case "ListMark":
+            this.decorateListMark(node, line, decorations, cursorInLine);
+            break;
+          case "TaskMarker":
+            this.decorateTaskMarker(from, to, view, decorations, cursorInLine);
+            break;
+        }
+      }
+    });
+  }
+  /** Add line decoration for list items with nesting depth */
+  decorateListItem(node, line, decorations) {
+    const parent = node.node.parent;
+    const listType = parent?.name;
+    let depth = 0;
+    let ancestor = node.node.parent;
+    while (ancestor) {
+      if (ancestor.name === "ListItem") depth++;
+      ancestor = ancestor.parent;
+    }
+    const hasTask = this.hasTaskChild(node);
+    let lineClass;
+    if (hasTask) lineClass = classes.taskLine;
+    else if (listType === "OrderedList") lineClass = classes.lineOL;
+    else lineClass = classes.lineUL;
+    decorations.push(
+      Decoration.line({
+        class: lineClass,
+        attributes: { style: `--depth: ${depth}` }
+      }).range(line.from)
+    );
+  }
+  /** Check if a ListItem node has a Task child */
+  hasTaskChild(node) {
+    const cursor = node.node.cursor();
+    if (cursor.firstChild()) {
+      do {
+        if (cursor.name === "Task") return true;
+      } while (cursor.nextSibling());
+    }
+    return false;
+  }
+  /** Decorate list markers (bullets for UL, numbers for OL) */
+  decorateListMark(node, line, decorations, cursorInLine) {
+    const { from, to } = node;
+    const parent = node.node.parent;
+    const grandparent = parent?.parent;
+    const listType = grandparent?.name;
+    const activeClass = cursorInLine ? classes.active : "";
+    if (from > line.from) {
+      decorations.push(Decoration.mark({ class: classes.indent + activeClass }).range(line.from, from));
+    }
+    const markClass = listType === "OrderedList" ? classes.markOL : classes.markUL;
+    decorations.push(Decoration.mark({ class: markClass + activeClass }).range(from, to + 1));
+    const contentStart = to + 1;
+    if (contentStart < line.to) {
+      decorations.push(Decoration.mark({ class: classes.content }).range(contentStart, line.to));
+    }
+  }
+  /** Decorate task markers - show checkbox widget or raw text based on cursor */
+  decorateTaskMarker(from, to, view, decorations, cursorInLine) {
+    const text = view.state.sliceDoc(from, to);
+    const isChecked = text.includes("x") || text.includes("X");
+    if (cursorInLine) {
+      decorations.push(Decoration.mark({ class: classes.taskMarker }).range(from, to));
+    } else {
+      decorations.push(
+        Decoration.replace({
+          widget: new TaskCheckboxWidget(isChecked)
+        }).range(from, to)
+      );
+    }
+  }
+  /** Render list nodes to HTML */
+  renderToHTML(node, children, ctx) {
+    switch (node.name) {
+      case "BulletList":
+        return `<ul class="${classes.lineUL} ${classes.preview}">${children}</ul>
+`;
+      case "OrderedList":
+        return `<ol class="${classes.lineOL} ${classes.preview}">${children}</ol>
+`;
+      case "ListItem":
+        return `<li>${children}</li>
+`;
+      case "Task":
+        return children;
+      case "TaskMarker": {
+        const text = ctx.sliceDoc(node.from, node.to);
+        const isChecked = text.includes("x") || text.includes("X");
+        return `<input type="checkbox" class="cm-draftly-task-checkbox" disabled ${isChecked ? "checked" : ""} />`;
+      }
+      case "ListMark":
+        return "";
+      default:
+        return null;
+    }
+  }
+};
+var theme5 = createTheme({
+  default: {
+    // Indentation marker positioning
+    ".cm-draftly-list-indent": {
+      overflow: "hidden",
+      display: "inline-block",
+      position: "absolute",
+      left: "calc(1rem * (var(--depth, 0) + 1))",
+      transform: "translateX(-100%)"
+    },
+    // List line layout (flexbox for marker alignment)
+    ".cm-draftly-list-line-ul, .cm-draftly-list-line-ol": {
+      position: "relative",
+      paddingLeft: "calc(1rem * (var(--depth, 0) + 1)) !important",
+      display: "flex",
+      alignItems: "start"
+    },
+    ".cm-draftly-list-line-ul > :first-child, .cm-draftly-list-line-ol > :first-child": {
+      flexShrink: 0
+    },
+    // List marker sizing
+    ".cm-draftly-list-line-ul .cm-draftly-list-mark-ul, .cm-draftly-list-line-ol .cm-draftly-list-mark-ol": {
+      whiteSpace: "pre",
+      position: "relative",
+      width: "1rem",
+      flexShrink: 0
+    },
+    // Hide raw marker text when not active
+    ".cm-draftly-list-mark-ul:not(.cm-draftly-active) > span, .cm-draftly-task-line .cm-draftly-list-mark-ol:not(.cm-draftly-active) > span": {
+      visibility: "hidden",
+      display: "none"
+    },
+    // Styled bullet for unordered lists
+    ".cm-draftly-list-line-ul .cm-draftly-list-mark-ul:not(.cm-draftly-active)::after": {
+      content: '"\u2022"',
+      color: "var(--color-link)",
+      fontWeight: "bold",
+      pointerEvents: "none"
+    },
+    // Task marker styling (visible when editing)
+    ".cm-draftly-task-marker": {
+      color: "var(--draftly-highlight, #a4a4a4)",
+      fontFamily: "monospace"
+    },
+    // Task checkbox container
+    ".cm-draftly-task-checkbox": {
+      display: "inline-flex",
+      verticalAlign: "middle",
+      marginRight: "0.3em",
+      cursor: "pointer",
+      userSelect: "none",
+      alignItems: "center",
+      height: "1.2em"
+    },
+    // Task checkbox input styling
+    ".cm-draftly-task-checkbox input": {
+      cursor: "pointer",
+      margin: 0,
+      width: "1.1em",
+      height: "1.1em",
+      appearance: "none",
+      border: "1px solid",
+      borderRadius: "0.25em",
+      backgroundColor: "transparent",
+      position: "relative"
+    },
+    // Checkmark for completed tasks
+    ".cm-draftly-task-checkbox.checked input::after": {
+      content: '"\u2713"',
+      position: "absolute",
+      left: "1px",
+      top: "-3px"
+    },
+    // Preview styles (override editor-specific layout)
+    ".cm-draftly-preview": {
+      display: "block",
+      paddingLeft: "1.5rem",
+      margin: "0.5rem 0"
+    },
+    ".cm-draftly-preview li": {
+      display: "list-item",
+      marginBottom: "0.25rem"
+    },
+    "ul.cm-draftly-preview": {
+      listStyleType: "disc"
+    },
+    "ol.cm-draftly-preview": {
+      listStyleType: "decimal"
+    },
+    // Hide list marker for task items
+    ".cm-draftly-preview li:has(.cm-draftly-task-checkbox)": {
+      listStyleType: "none"
+    },
+    ".cm-draftly-preview li .cm-draftly-paragraph": {
+      padding: "0"
+    }
+  }
+});
+var htmlMarkDecorations = {
+  "html-tag": Decoration.mark({ class: "cm-draftly-html-tag" }),
+  "html-comment": Decoration.mark({ class: "cm-draftly-html-comment" })
+};
+var htmlLineDecorations = {
+  "html-block": Decoration.line({ class: "cm-draftly-line-html-block" }),
+  "hidden-line": Decoration.line({ class: "cm-draftly-hidden-line" })
+};
+var HTMLPreviewWidget = class extends WidgetType {
+  constructor(html) {
+    super();
+    this.html = html;
+  }
+  eq(other) {
+    return other.html === this.html;
+  }
+  toDOM() {
+    const div = document.createElement("div");
+    div.className = "cm-draftly-html-preview";
+    div.innerHTML = DOMPurify.sanitize(this.html);
+    return div;
+  }
+  ignoreEvent() {
+    return false;
+  }
+};
+var InlineHTMLPreviewWidget = class extends WidgetType {
+  constructor(html) {
+    super();
+    this.html = html;
+  }
+  eq(other) {
+    return other.html === this.html;
+  }
+  toDOM() {
+    const span = document.createElement("span");
+    span.className = "cm-draftly-inline-html-preview";
+    span.innerHTML = DOMPurify.sanitize(this.html);
+    return span;
+  }
+  ignoreEvent() {
+    return false;
+  }
+};
+function parseHTMLTag(content) {
+  const match = content.match(/^<\s*(\/?)([a-zA-Z][a-zA-Z0-9-]*)[^>]*(\/?)>$/);
+  if (!match) return null;
+  return {
+    tagName: match[2].toLowerCase(),
+    isClosing: match[1] === "/",
+    isSelfClosing: match[3] === "/" || ["br", "hr", "img", "input", "meta", "link", "area", "base", "col", "embed", "source", "track", "wbr"].includes(
+      match[2].toLowerCase()
+    )
+  };
+}
+var HTMLPlugin = class extends DecorationPlugin {
+  name = "html";
+  version = "1.0.0";
+  decorationPriority = 30;
+  constructor() {
+    super();
+  }
+  /**
+   * Plugin theme
+   */
+  get theme() {
+    return theme6;
+  }
+  buildDecorations(ctx) {
+    const { view, decorations } = ctx;
+    const tree = syntaxTree(view.state);
+    const htmlGroups = [];
+    const htmlTags = [];
+    tree.iterate({
+      enter: (node) => {
+        const { from, to, name } = node;
+        if (name === "Comment") {
+          decorations.push(htmlMarkDecorations["html-comment"].range(from, to));
+          return;
+        }
+        if (name === "HTMLTag") {
+          const content = view.state.sliceDoc(from, to);
+          const parsed = parseHTMLTag(content);
+          if (parsed) {
+            htmlTags.push({
+              from,
+              to,
+              tagName: parsed.tagName,
+              isClosing: parsed.isClosing,
+              isSelfClosing: parsed.isSelfClosing
+            });
+          }
+        }
+        if (name === "HTMLBlock") {
+          const last = htmlGroups[htmlGroups.length - 1];
+          if (last) {
+            const gap = view.state.sliceDoc(last.to, from);
+            if (!gap.trim()) {
+              last.to = to;
+              return;
+            }
+          }
+          htmlGroups.push({ from, to });
+        }
+      }
+    });
+    const inlineElements = [];
+    const usedTags = /* @__PURE__ */ new Set();
+    for (let i = 0; i < htmlTags.length; i++) {
+      if (usedTags.has(i)) continue;
+      const openTag = htmlTags[i];
+      if (openTag.isClosing) continue;
+      if (openTag.isSelfClosing) {
+        inlineElements.push({
+          from: openTag.from,
+          to: openTag.to,
+          content: view.state.sliceDoc(openTag.from, openTag.to)
+        });
+        usedTags.add(i);
+        continue;
+      }
+      const openLine = view.state.doc.lineAt(openTag.from);
+      let depth = 1;
+      let closeTagIndex = null;
+      for (let j = i + 1; j < htmlTags.length && depth > 0; j++) {
+        const tag = htmlTags[j];
+        if (tag.from > openLine.to) break;
+        if (tag.tagName === openTag.tagName) {
+          if (tag.isClosing) {
+            depth--;
+            if (depth === 0) {
+              closeTagIndex = j;
+            }
+          } else if (!tag.isSelfClosing) {
+            depth++;
+          }
+        }
+      }
+      if (closeTagIndex !== null) {
+        const closeTag = htmlTags[closeTagIndex];
+        inlineElements.push({
+          from: openTag.from,
+          to: closeTag.to,
+          content: view.state.sliceDoc(openTag.from, closeTag.to)
+        });
+        for (let k = i; k <= closeTagIndex; k++) {
+          usedTags.add(k);
+        }
+      }
+    }
+    inlineElements.sort((a, b) => a.from - b.from);
+    const filteredElements = [];
+    let lastEnd = -1;
+    for (const elem of inlineElements) {
+      if (elem.from >= lastEnd) {
+        filteredElements.push(elem);
+        lastEnd = elem.to;
+      }
+    }
+    for (const elem of filteredElements) {
+      const cursorInRange = ctx.cursorInRange(elem.from, elem.to);
+      if (cursorInRange) {
+        for (const tag of htmlTags) {
+          if (tag.from >= elem.from && tag.to <= elem.to) {
+            decorations.push(htmlMarkDecorations["html-tag"].range(tag.from, tag.to));
+          }
+        }
+      } else {
+        decorations.push(
+          Decoration.replace({
+            widget: new InlineHTMLPreviewWidget(elem.content)
+          }).range(elem.from, elem.to)
+        );
+      }
+    }
+    for (let i = 0; i < htmlTags.length; i++) {
+      if (!usedTags.has(i)) {
+        const tag = htmlTags[i];
+        decorations.push(htmlMarkDecorations["html-tag"].range(tag.from, tag.to));
+      }
+    }
+    for (const group of htmlGroups) {
+      const { from, to } = group;
+      const nodeLineStart = view.state.doc.lineAt(from);
+      const nodeLineEnd = view.state.doc.lineAt(to);
+      const cursorInRange = ctx.cursorInRange(nodeLineStart.from, nodeLineEnd.to);
+      if (cursorInRange) {
+        for (let i = nodeLineStart.number; i <= nodeLineEnd.number; i++) {
+          const line = view.state.doc.line(i);
+          decorations.push(htmlLineDecorations["html-block"].range(line.from));
+        }
+      } else {
+        const htmlContent = view.state.sliceDoc(from, to);
+        decorations.push(
+          Decoration.replace({
+            widget: new HTMLPreviewWidget(htmlContent.trim())
+          }).range(from, nodeLineStart.to)
+        );
+        for (let i = nodeLineStart.number + 1; i <= nodeLineEnd.number; i++) {
+          const line = view.state.doc.line(i);
+          decorations.push(htmlLineDecorations["hidden-line"].range(line.from));
+        }
+      }
+    }
+  }
+};
+var theme6 = createTheme({
+  default: {
+    ".cm-draftly-html-tag": {
+      color: "#6a737d",
+      fontFamily: "var(--font-jetbrains-mono, monospace)",
+      fontSize: "0.85em"
+    },
+    ".cm-draftly-html-comment": {
+      color: "#6a737d",
+      fontStyle: "italic",
+      fontFamily: "var(--font-jetbrains-mono, monospace)",
+      fontSize: "0.85em",
+      opacity: 0.5
+    },
+    ".cm-draftly-line-html-block": {
+      backgroundColor: "rgba(0, 0, 0, 0.02)"
+    },
+    ".cm-draftly-hidden-line": {
+      display: "none"
+    },
+    ".cm-draftly-html-preview": {
+      display: "inline-block",
+      width: "100%",
+      verticalAlign: "top",
+      margin: "0",
+      whiteSpace: "normal",
+      lineHeight: "1.4"
+    },
+    ".cm-draftly-html-preview > *:first-child": {
+      marginTop: "0"
+    },
+    ".cm-draftly-html-preview > *:last-child": {
+      marginBottom: "0"
+    },
+    ".cm-draftly-inline-html-preview": {
+      display: "inline",
+      whiteSpace: "normal"
+    }
+  }
+});
+var imageMarkDecorations = {
+  "image-block": Decoration.line({ class: "cm-draftly-image-block" }),
+  "image-marker": Decoration.mark({ class: "cm-draftly-image-marker" }),
+  "image-alt": Decoration.mark({ class: "cm-draftly-image-alt" }),
+  "image-url": Decoration.mark({ class: "cm-draftly-image-url" }),
+  "image-hidden": Decoration.mark({ class: "cm-draftly-image-hidden" })
+};
+function parseImageMarkdown(content) {
+  const match = content.match(/^!\[([^\]]*)\]\(([^"\s)]+)(?:\s+"([^"]*)")?\s*\)$/);
+  if (!match) return null;
+  const result = {
+    alt: match[1] || "",
+    url: match[2]
+  };
+  if (match[3] !== void 0) {
+    result.title = match[3];
+  }
+  return result;
+}
+var ImageWidget = class extends WidgetType {
+  constructor(url, alt, from, to, title) {
+    super();
+    this.url = url;
+    this.alt = alt;
+    this.from = from;
+    this.to = to;
+    this.title = title;
+  }
+  eq(other) {
+    return other.url === this.url && other.alt === this.alt && other.from === this.from && other.to === this.to && other.title === this.title;
+  }
+  toDOM(view) {
+    const figure = document.createElement("figure");
+    figure.className = "cm-draftly-image-figure";
+    figure.setAttribute("role", "figure");
+    figure.style.cursor = "pointer";
+    if (this.title) {
+      figure.setAttribute("aria-label", this.title);
+    }
+    figure.addEventListener("click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      view.dispatch({
+        selection: { anchor: this.from, head: this.to },
+        scrollIntoView: true
+      });
+      view.focus();
+    });
+    const img = document.createElement("img");
+    img.className = "cm-draftly-image";
+    img.src = this.url;
+    img.alt = this.alt;
+    img.setAttribute("loading", "lazy");
+    img.setAttribute("decoding", "async");
+    if (this.title) {
+      img.title = this.title;
+    }
+    img.onerror = () => {
+      img.style.display = "none";
+      const errorSpan = document.createElement("span");
+      errorSpan.className = "cm-draftly-image-error";
+      errorSpan.setAttribute("role", "alert");
+      errorSpan.textContent = `[Image not found: ${this.alt || this.url}]`;
+      figure.appendChild(errorSpan);
+    };
+    figure.appendChild(img);
+    if (this.title) {
+      const figcaption = document.createElement("figcaption");
+      figcaption.className = "cm-draftly-image-caption";
+      figcaption.textContent = this.title;
+      figure.appendChild(figcaption);
+    }
+    return figure;
+  }
+  ignoreEvent(event) {
+    return event.type !== "click";
+  }
+};
+var ImagePlugin = class extends DecorationPlugin {
+  name = "image";
+  version = "1.0.0";
+  decorationPriority = 25;
+  requiredNodes = ["Image"];
+  constructor() {
+    super();
+  }
+  /**
+   * Plugin theme
+   */
+  get theme() {
+    return theme7;
+  }
+  /**
+   * Keyboard shortcuts for image formatting
+   */
+  getKeymap() {
+    return [
+      {
+        key: "Mod-Shift-i",
+        run: (view) => this.toggleImage(view),
+        preventDefault: true
+      }
+    ];
+  }
+  /**
+   * URL regex pattern
+   */
+  urlPattern = /^(https?:\/\/|www\.)[^\s]+$/i;
+  /**
+   * Toggle image on selection
+   * - If text selected and is a URL: ![Alt Text](url) with cursor in brackets
+   * - If text selected (not URL): ![text]() with cursor in parentheses
+   * - If nothing selected: ![Alt Text]() with cursor in parentheses
+   * - If already an image: remove syntax, leave just the URL
+   */
+  toggleImage(view) {
+    const { state } = view;
+    const { from, to, empty } = state.selection.main;
+    const selectedText = state.sliceDoc(from, to);
+    const imageMatch = selectedText.match(/^!\[([^\]]*)\]\(([^)]*)\)$/);
+    if (imageMatch) {
+      const imageUrl = imageMatch[2] || "";
+      view.dispatch({
+        changes: { from, to, insert: imageUrl },
+        selection: { anchor: from, head: from + imageUrl.length }
+      });
+      return true;
+    }
+    const lineStart = state.doc.lineAt(from).from;
+    const lineEnd = state.doc.lineAt(to).to;
+    const lineText = state.sliceDoc(lineStart, lineEnd);
+    const imageRegex = /!\[([^\]]*)\]\(([^)]*)\)/g;
+    let match;
+    while ((match = imageRegex.exec(lineText)) !== null) {
+      const matchFrom = lineStart + match.index;
+      const matchTo = matchFrom + match[0].length;
+      if (from >= matchFrom && to <= matchTo) {
+        const imageUrl = match[2] || "";
+        view.dispatch({
+          changes: { from: matchFrom, to: matchTo, insert: imageUrl },
+          selection: { anchor: matchFrom, head: matchFrom + imageUrl.length }
+        });
+        return true;
+      }
+    }
+    if (empty) {
+      const defaultAlt = "Alt Text";
+      const newText = `![${defaultAlt}]()`;
+      view.dispatch({
+        changes: { from, insert: newText },
+        selection: { anchor: from + defaultAlt.length + 4 }
+        // After ![Alt Text](
+      });
+    } else if (this.urlPattern.test(selectedText)) {
+      const defaultAlt = "Alt Text";
+      const newText = `![${defaultAlt}](${selectedText})`;
+      view.dispatch({
+        changes: { from, to, insert: newText },
+        selection: { anchor: from + 2, head: from + 2 + defaultAlt.length }
+        // Select "Alt Text"
+      });
+    } else {
+      const newText = `![${selectedText}]()`;
+      view.dispatch({
+        changes: { from, to, insert: newText },
+        selection: { anchor: from + selectedText.length + 4 }
+        // After ![text](
+      });
+    }
+    return true;
+  }
+  buildDecorations(ctx) {
+    const { view, decorations } = ctx;
+    const tree = syntaxTree(view.state);
+    tree.iterate({
+      enter: (node) => {
+        const { from, to, name } = node;
+        if (name === "Image") {
+          const content = view.state.sliceDoc(from, to);
+          const parsed = parseImageMarkdown(content);
+          if (!parsed) return;
+          const cursorInRange = ctx.selectionOverlapsRange(from, to);
+          decorations.push(imageMarkDecorations["image-block"].range(from));
+          decorations.push(
+            Decoration.widget({
+              widget: new ImageWidget(parsed.url, parsed.alt, from, to, parsed.title),
+              side: 1,
+              // Place after the position
+              block: false
+              // Don't create a new line
+            }).range(to)
+          );
+          if (cursorInRange) {
+            this.decorateRawImage(node.node, decorations, view);
+          } else {
+            decorations.push(imageMarkDecorations["image-hidden"].range(from, to));
+          }
+        }
+      }
+    });
+  }
+  /**
+   * Decorate raw image markdown when cursor is in range
+   */
+  decorateRawImage(node, decorations, view) {
+    for (let child = node.firstChild; child; child = child.nextSibling) {
+      if (child.name === "URL") {
+        decorations.push(imageMarkDecorations["image-url"].range(child.from, child.to));
+      }
+    }
+    const content = view.state.sliceDoc(node.from, node.to);
+    const bangBracket = node.from;
+    if (content.startsWith("![")) {
+      decorations.push(imageMarkDecorations["image-marker"].range(bangBracket, bangBracket + 2));
+    }
+    const altEnd = content.indexOf("](");
+    if (altEnd !== -1) {
+      const altStart = 2;
+      if (altEnd > altStart) {
+        decorations.push(imageMarkDecorations["image-alt"].range(node.from + altStart, node.from + altEnd));
+      }
+      decorations.push(imageMarkDecorations["image-marker"].range(node.from + altEnd, node.from + altEnd + 2));
+      decorations.push(imageMarkDecorations["image-marker"].range(node.to - 1, node.to));
+    }
+  }
+  /**
+   * Render image to HTML for preview mode using figure/figcaption
+   */
+  renderToHTML(node, _children, ctx) {
+    if (node.name !== "Image") return null;
+    const content = ctx.sliceDoc(node.from, node.to);
+    const parsed = parseImageMarkdown(content);
+    if (!parsed) return null;
+    const altAttr = ctx.sanitize(parsed.alt);
+    const titleAttr = parsed.title ? ` title="${ctx.sanitize(parsed.title)}"` : "";
+    const ariaLabel = parsed.title ? ` aria-label="${ctx.sanitize(parsed.title)}"` : "";
+    let html = `<figure class="cm-draftly-image-figure" role="figure"${ariaLabel}>`;
+    html += `<img class="cm-draftly-image" src="${ctx.sanitize(parsed.url)}" alt="${altAttr}"${titleAttr} loading="lazy" decoding="async" />`;
+    if (parsed.title) {
+      html += `<figcaption class="cm-draftly-image-caption">${ctx.sanitize(parsed.title)}</figcaption>`;
+    }
+    html += `</figure>`;
+    return html;
+  }
+};
+var theme7 = createTheme({
+  default: {
+    ".cm-draftly-image-block br": {
+      display: "none"
+    },
+    // Image markers (! [ ] ( ))
+    ".cm-draftly-image-marker": {
+      color: "#6a737d",
+      fontFamily: "var(--font-jetbrains-mono, monospace)"
+    },
+    // Alt text
+    ".cm-draftly-image-alt": {
+      color: "#22863a",
+      fontStyle: "italic"
+    },
+    // URL
+    ".cm-draftly-image-url": {
+      color: "#0366d6",
+      textDecoration: "underline"
+    },
+    // Hidden markdown syntax (when cursor is not in range)
+    ".cm-draftly-image-hidden": {
+      display: "none"
+    },
+    // Figure container
+    ".cm-draftly-image-figure": {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "start",
+      maxWidth: "100%",
+      padding: "0"
+    },
+    // Image element
+    ".cm-draftly-image": {
+      maxWidth: "100%",
+      maxHeight: "800px",
+      height: "auto",
+      borderRadius: "4px"
+    },
+    // Figcaption
+    ".cm-draftly-image-caption": {
+      display: "block",
+      width: "100%",
+      fontSize: "0.875em",
+      color: "#6a737d",
+      marginTop: "0.5em",
+      textAlign: "center",
+      fontStyle: "italic"
+    },
+    // Error state
+    ".cm-draftly-image-error": {
+      display: "inline-block",
+      padding: "0.5em 1em",
+      backgroundColor: "rgba(255, 0, 0, 0.1)",
+      color: "#d73a49",
+      borderRadius: "4px",
+      fontSize: "0.875em",
+      fontStyle: "italic"
+    }
+  },
+  dark: {
+    ".cm-draftly-image-marker": {
+      color: "#8b949e"
+    },
+    ".cm-draftly-image-alt": {
+      color: "#7ee787"
+    },
+    ".cm-draftly-image-url": {
+      color: "#58a6ff"
+    },
+    ".cm-draftly-image-caption": {
+      color: "#8b949e"
+    },
+    ".cm-draftly-image-error": {
+      backgroundColor: "rgba(255, 0, 0, 0.15)",
+      color: "#f85149"
+    }
+  }
+});
+function injectKatexStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById("draftly-katex-styles")) return;
+  const style = document.createElement("style");
+  style.id = "draftly-katex-styles";
+  style.textContent = katexCss;
+  document.head.appendChild(style);
+}
+injectKatexStyles();
+var DOLLAR = 36;
+var mathMarkDecorations = {
+  "math-block": Decoration.line({ class: "cm-draftly-math-block" }),
+  "math-inline": Decoration.mark({ class: "cm-draftly-math-inline" }),
+  "math-marker": Decoration.mark({ class: "cm-draftly-math-marker" }),
+  "math-hidden": Decoration.mark({ class: "cm-draftly-math-hidden" })
+};
+function renderMath(latex, displayMode) {
+  try {
+    const html = katex.renderToString(latex, {
+      displayMode,
+      throwOnError: false,
+      errorColor: "#d73a49",
+      trust: false,
+      strict: false
+    });
+    return { html, error: null };
+  } catch (e) {
+    const errorMsg = e instanceof Error ? e.message : "Unknown error";
+    return { html: "", error: errorMsg };
+  }
+}
+var InlineMathWidget = class extends WidgetType {
+  constructor(latex, from, to) {
+    super();
+    this.latex = latex;
+    this.from = from;
+    this.to = to;
+  }
+  eq(other) {
+    return other.latex === this.latex && other.from === this.from && other.to === this.to;
+  }
+  toDOM(view) {
+    const span = document.createElement("span");
+    span.className = "cm-draftly-math-rendered cm-draftly-math-rendered-inline";
+    span.style.cursor = "pointer";
+    const { html, error } = renderMath(this.latex, false);
+    if (error) {
+      span.className += " cm-draftly-math-error";
+      span.textContent = `[Math Error: ${error}]`;
+    } else {
+      span.innerHTML = html;
+    }
+    span.addEventListener("click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      view.dispatch({
+        selection: { anchor: this.from, head: this.to },
+        scrollIntoView: true
+      });
+      view.focus();
+    });
+    return span;
+  }
+  ignoreEvent(event) {
+    return event.type !== "click";
+  }
+};
+var MathBlockWidget = class extends WidgetType {
+  constructor(latex, from, to) {
+    super();
+    this.latex = latex;
+    this.from = from;
+    this.to = to;
+  }
+  eq(other) {
+    return other.latex === this.latex && other.from === this.from && other.to === this.to;
+  }
+  toDOM(view) {
+    const div = document.createElement("div");
+    div.className = "cm-draftly-math-rendered cm-draftly-math-rendered-block";
+    div.style.cursor = "pointer";
+    const { html, error } = renderMath(this.latex, true);
+    if (error) {
+      div.className += " cm-draftly-math-error";
+      div.textContent = `[Math Error: ${error}]`;
+    } else {
+      div.innerHTML = html;
+    }
+    div.addEventListener("click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      view.dispatch({
+        selection: { anchor: this.from, head: this.to },
+        scrollIntoView: true
+      });
+      view.focus();
+    });
+    return div;
+  }
+  ignoreEvent(event) {
+    return event.type !== "click";
+  }
+};
+var inlineMathParser = {
+  name: "InlineMath",
+  parse(cx, next, pos) {
+    if (next !== DOLLAR) return -1;
+    if (cx.char(pos + 1) === DOLLAR) return -1;
+    let end = pos + 1;
+    while (end < cx.end) {
+      const char = cx.char(end);
+      if (char === DOLLAR) {
+        if (cx.char(end + 1) !== DOLLAR) {
+          const content = cx.slice(pos + 1, end);
+          if (content.trim().length === 0) return -1;
+          const openMark = cx.elt("InlineMathMark", pos, pos + 1);
+          const closeMark = cx.elt("InlineMathMark", end, end + 1);
+          const inlineMath = cx.elt("InlineMath", pos, end + 1, [openMark, closeMark]);
+          return cx.addElement(inlineMath);
+        }
+        return -1;
+      }
+      if (char === 92) {
+        end += 2;
+        continue;
+      }
+      end++;
+    }
+    return -1;
+  }
+};
+var mathBlockParser = {
+  name: "MathBlock",
+  parse(cx, line) {
+    const text = line.text;
+    const trimmed = text.slice(line.pos).trimStart();
+    if (!trimmed.startsWith("$$")) return false;
+    const startLine = cx.lineStart;
+    let endPos = -1;
+    let lastLineEnd = startLine + line.text.length;
+    while (cx.nextLine()) {
+      const currentText = line.text;
+      lastLineEnd = cx.lineStart + currentText.length;
+      if (currentText.trimEnd().endsWith("$$")) {
+        endPos = lastLineEnd;
+        cx.nextLine();
+        break;
+      }
+    }
+    if (endPos === -1) {
+      return false;
+    }
+    const openMark = cx.elt("MathBlockMark", startLine, startLine + text.indexOf("$$") + 2);
+    const closeMark = cx.elt("MathBlockMark", endPos - 2, endPos);
+    cx.addElement(cx.elt("MathBlock", startLine, endPos, [openMark, closeMark]));
+    return true;
+  }
+};
+var MathPlugin = class extends DecorationPlugin {
+  name = "math";
+  version = "1.0.0";
+  decorationPriority = 25;
+  requiredNodes = ["InlineMath", "MathBlock", "InlineMathMark", "MathBlockMark"];
+  constructor() {
+    super();
+  }
+  /**
+   * Plugin theme
+   */
+  get theme() {
+    return theme8;
+  }
+  /**
+   * Return markdown parser extensions for math syntax
+   */
+  getMarkdownConfig() {
+    return {
+      defineNodes: [
+        { name: "InlineMath", style: tags.emphasis },
+        { name: "InlineMathMark", style: tags.processingInstruction },
+        { name: "MathBlock", block: true },
+        { name: "MathBlockMark", style: tags.processingInstruction }
+      ],
+      parseInline: [inlineMathParser],
+      parseBlock: [mathBlockParser]
+    };
+  }
+  /**
+   * Build decorations for math expressions
+   */
+  buildDecorations(ctx) {
+    const { view, decorations } = ctx;
+    const tree = syntaxTree(view.state);
+    tree.iterate({
+      enter: (node) => {
+        const { from, to, name } = node;
+        if (name === "InlineMath") {
+          const content = view.state.sliceDoc(from, to);
+          const latex = content.slice(1, -1);
+          const cursorInRange = ctx.selectionOverlapsRange(from, to);
+          if (cursorInRange) {
+            decorations.push(mathMarkDecorations["math-inline"].range(from, to));
+            for (let child = node.node.firstChild; child; child = child.nextSibling) {
+              if (child.name === "InlineMathMark") {
+                decorations.push(mathMarkDecorations["math-marker"].range(child.from, child.to));
+              }
+            }
+          } else {
+            decorations.push(
+              Decoration.replace({
+                widget: new InlineMathWidget(latex, from, to)
+              }).range(from, to)
+            );
+          }
+        }
+        if (name === "MathBlock") {
+          const content = view.state.sliceDoc(from, to);
+          const lines = content.split("\n");
+          const latex = lines.slice(1, -1).join("\n").trim();
+          const singleLine = !content.includes("\n");
+          const latexContent = singleLine ? content.slice(2, -2).trim() : latex;
+          const nodeLineStart = view.state.doc.lineAt(from);
+          const nodeLineEnd = view.state.doc.lineAt(to);
+          const cursorInRange = ctx.selectionOverlapsRange(nodeLineStart.from, nodeLineEnd.to);
+          decorations.push(mathMarkDecorations["math-block"].range(from));
+          decorations.push(
+            Decoration.widget({
+              widget: new MathBlockWidget(latexContent, from, to),
+              side: 1,
+              block: false
+            }).range(to)
+          );
+          for (let i = nodeLineStart.number; i <= nodeLineEnd.number; i++) {
+            const line = view.state.doc.line(i);
+            decorations.push(mathMarkDecorations["math-block"].range(line.from));
+          }
+          if (cursorInRange) {
+            for (let child = node.node.firstChild; child; child = child.nextSibling) {
+              if (child.name === "MathBlockMark") {
+                decorations.push(mathMarkDecorations["math-marker"].range(child.from, child.to));
+              }
+            }
+          } else {
+            decorations.push(mathMarkDecorations["math-hidden"].range(from, to));
+          }
+        }
+      }
+    });
+  }
+  /**
+   * Render math to HTML for preview mode
+   */
+  renderToHTML(node, _children, ctx) {
+    if (node.name === "InlineMath") {
+      const content = ctx.sliceDoc(node.from, node.to);
+      const latex = content.slice(1, -1);
+      const { html, error } = renderMath(latex, false);
+      if (error) {
+        return `<span class="cm-draftly-math-error">[Math Error: ${ctx.sanitize(error)}]</span>`;
+      }
+      return `<span class="cm-draftly-math-rendered cm-draftly-math-rendered-inline">${html}</span>`;
+    }
+    if (node.name === "MathBlock") {
+      const content = ctx.sliceDoc(node.from, node.to);
+      const lines = content.split("\n");
+      const latex = lines.length > 1 ? lines.slice(1, -1).join("\n").trim() : content.slice(2, -2).trim();
+      const { html, error } = renderMath(latex, true);
+      if (error) {
+        return `<div class="cm-draftly-math-error">[Math Error: ${ctx.sanitize(error)}]</div>`;
+      }
+      return `<div class="cm-draftly-math-rendered cm-draftly-math-rendered-block">${html}</div>`;
+    }
+    if (node.name === "InlineMathMark" || node.name === "MathBlockMark") {
+      return "";
+    }
+    return null;
+  }
+};
+var theme8 = createTheme({
+  default: {
+    ".cm-draftly-math-block": {
+      fontFamily: "var(--font-jetbrains-mono, monospace)"
+    },
+    ".cm-draftly-math-block br": {
+      display: "none"
+    },
+    // Math markers ($ $$)
+    ".cm-draftly-math-marker": {
+      color: "#6a737d",
+      fontFamily: "var(--font-jetbrains-mono, monospace)"
+    },
+    // Inline math styling when editing
+    ".cm-draftly-math-inline": {
+      fontFamily: "var(--font-jetbrains-mono, monospace)",
+      fontSize: "0.9em"
+    },
+    // Hidden math syntax (when cursor is not in range)
+    ".cm-draftly-math-hidden": {
+      display: "none"
+    },
+    // Hidden line (for multi-line blocks)
+    ".cm-draftly-hidden-line": {
+      display: "none"
+    },
+    // Rendered math container (both inline and block)
+    ".cm-draftly-math-rendered": {
+      fontFamily: "KaTeX_Main, 'Times New Roman', serif"
+    },
+    // Inline rendered math
+    ".cm-draftly-math-rendered-inline": {
+      display: "inline",
+      verticalAlign: "baseline"
+    },
+    // Block rendered math (display mode)
+    ".cm-draftly-math-rendered-block": {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      padding: "1em 0",
+      backgroundColor: "rgba(0, 0, 0, 0.02)",
+      borderRadius: "4px",
+      overflow: "auto"
+    },
+    // Math error styling
+    ".cm-draftly-math-error": {
+      display: "inline-block",
+      padding: "0.25em 0.5em",
+      backgroundColor: "rgba(255, 0, 0, 0.1)",
+      color: "#d73a49",
+      borderRadius: "4px",
+      fontSize: "0.875em",
+      fontStyle: "italic",
+      fontFamily: "var(--font-jetbrains-mono, monospace)"
+    }
+  },
+  dark: {
+    ".cm-draftly-math-marker": {
+      color: "#8b949e"
+    },
+    ".cm-draftly-math-rendered-block": {
+      backgroundColor: "rgba(255, 255, 255, 0.02)"
+    },
+    ".cm-draftly-math-error": {
+      backgroundColor: "rgba(255, 0, 0, 0.15)",
+      color: "#f85149"
+    }
+  }
+});
+mermaid.initialize({
+  startOnLoad: false,
+  theme: "default",
+  suppressErrorRendering: true
+});
+var mermaidCounter = 0;
+async function renderMermaid(definition, options = {}, defaultTheme = "default") {
+  try {
+    const id = `draftly-mermaid-${mermaidCounter++}`;
+    let finalDefinition = definition;
+    const mermaidConfig = {};
+    if (options.theme) {
+      mermaidConfig.theme = options.theme;
+    } else {
+      mermaidConfig.theme = defaultTheme;
+    }
+    if (Object.keys(mermaidConfig).length > 0) {
+      const jsonConfig = JSON.stringify(mermaidConfig);
+      finalDefinition = `%%{init: ${jsonConfig} }%%
+${definition}`;
+    }
+    const { svg } = await mermaid.render(id, finalDefinition);
+    return { svg, error: null };
+  } catch (e) {
+    const errorMsg = e instanceof Error ? e.message : "Unknown error";
+    return { svg: "", error: errorMsg };
+  }
+}
+function parseAttributes(fenceLine) {
+  const attributes = {};
+  const regex = /(\w+)=["']([^"']*)["']/g;
+  let match;
+  while ((match = regex.exec(fenceLine)) !== null && match[1] && match[2]) {
+    attributes[match[1]] = match[2];
+  }
+  return attributes;
+}
+var mermaidMarkDecorations = {
+  "mermaid-block-start": Decoration.line({ class: "cm-draftly-mermaid-block-start" }),
+  "mermaid-block-end": Decoration.line({ class: "cm-draftly-mermaid-block-end" }),
+  "mermaid-block": Decoration.line({ class: "cm-draftly-mermaid-block" }),
+  "mermaid-block-rendered": Decoration.line({ class: "cm-draftly-mermaid-block-rendered" }),
+  "mermaid-marker": Decoration.mark({ class: "cm-draftly-mermaid-marker" }),
+  "mermaid-hidden": Decoration.mark({ class: "cm-draftly-mermaid-hidden" })
+};
+var MermaidBlockWidget = class extends WidgetType {
+  constructor(definition, attributes, defaultTheme, from, to) {
+    super();
+    this.definition = definition;
+    this.attributes = attributes;
+    this.defaultTheme = defaultTheme;
+    this.from = from;
+    this.to = to;
+  }
+  eq(other) {
+    return other.definition === this.definition && JSON.stringify(other.attributes) === JSON.stringify(this.attributes) && other.defaultTheme === this.defaultTheme && other.from === this.from && other.to === this.to;
+  }
+  toDOM(view) {
+    const div = document.createElement("div");
+    div.className = "cm-draftly-mermaid-rendered";
+    div.style.cursor = "pointer";
+    div.innerHTML = `<div class="cm-draftly-mermaid-loading">Rendering diagram\u2026</div>`;
+    renderMermaid(this.definition, this.attributes, this.defaultTheme).then(({ svg, error }) => {
+      if (error) {
+        div.className += " cm-draftly-mermaid-error";
+        div.innerHTML = `<span>[Mermaid Error: ${error}]</span>`;
+      } else {
+        div.innerHTML = svg;
+      }
+    });
+    div.addEventListener("click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      view.dispatch({
+        selection: { anchor: this.from, head: this.to },
+        scrollIntoView: true
+      });
+      view.focus();
+    });
+    return div;
+  }
+  ignoreEvent(event) {
+    return event.type !== "click";
+  }
+};
+var mermaidBlockParser = {
+  name: "MermaidBlock",
+  before: "FencedCode",
+  parse(cx, line) {
+    const text = line.text;
+    const trimmed = text.slice(line.pos).trimStart();
+    if (!trimmed.startsWith("```mermaid")) return false;
+    const startLine = cx.lineStart;
+    let endPos = -1;
+    let closeBacktickStart = -1;
+    while (cx.nextLine()) {
+      const currentText = line.text;
+      const currentLineStart = cx.lineStart;
+      const lastLineEnd = currentLineStart + currentText.length;
+      const trimmedLine = currentText.trim();
+      if (trimmedLine === "```") {
+        endPos = lastLineEnd;
+        closeBacktickStart = currentLineStart + currentText.indexOf("```");
+        cx.nextLine();
+        break;
+      }
+    }
+    if (endPos === -1) {
+      return false;
+    }
+    const openMarkEnd = startLine + text.indexOf("```mermaid") + 10;
+    const openMark = cx.elt("MermaidBlockMark", startLine, openMarkEnd);
+    const closeMark = cx.elt("MermaidBlockMark", closeBacktickStart, closeBacktickStart + 3);
+    cx.addElement(cx.elt("MermaidBlock", startLine, endPos, [openMark, closeMark]));
+    return true;
+  }
+};
+var MermaidPlugin = class extends DecorationPlugin {
+  name = "mermaid";
+  version = "1.0.0";
+  decorationPriority = 25;
+  requiredNodes = ["MermaidBlock", "MermaidBlockMark"];
+  constructor() {
+    super();
+  }
+  /**
+   * Plugin theme
+   */
+  get theme() {
+    return theme9;
+  }
+  /**
+   * Return markdown parser extensions for mermaid syntax
+   */
+  getMarkdownConfig() {
+    return {
+      defineNodes: [
+        { name: "MermaidBlock", block: true },
+        { name: "MermaidBlockMark", style: tags.processingInstruction }
+      ],
+      parseBlock: [mermaidBlockParser]
+    };
+  }
+  /**
+   * Build decorations for mermaid blocks
+   */
+  buildDecorations(ctx) {
+    const { view, decorations } = ctx;
+    const tree = syntaxTree(view.state);
+    const config = this.context?.config;
+    const currentTheme = config?.theme === "dark" /* DARK */ ? "dark" : "default";
+    tree.iterate({
+      enter: (node) => {
+        const { from, to, name } = node;
+        if (name === "MermaidBlock") {
+          const content = view.state.sliceDoc(from, to);
+          const lines = content.split("\n");
+          const definition = lines.slice(1, -1).join("\n").trim();
+          const docLines = content.split("\n");
+          const fenceLine = docLines[0] || "";
+          const attributes = parseAttributes(fenceLine);
+          const nodeLineStart = view.state.doc.lineAt(from);
+          const nodeLineEnd = view.state.doc.lineAt(to);
+          const cursorInRange = ctx.selectionOverlapsRange(nodeLineStart.from, nodeLineEnd.to);
+          const totalCodeLines = nodeLineEnd.number - nodeLineStart.number - 1;
+          const lineNumWidth = String(totalCodeLines).length;
+          let codeLineIndex = 1;
+          for (let i = nodeLineStart.number; i <= nodeLineEnd.number; i++) {
+            const line = view.state.doc.line(i);
+            const isFenceLine = i === nodeLineStart.number || i === nodeLineEnd.number;
+            const relativeLineNum = codeLineIndex;
+            decorations.push(mermaidMarkDecorations["mermaid-block"].range(line.from));
+            if (!cursorInRange) decorations.push(mermaidMarkDecorations["mermaid-block-rendered"].range(line.from));
+            if (i === nodeLineStart.number)
+              decorations.push(mermaidMarkDecorations["mermaid-block-start"].range(line.from));
+            if (i === nodeLineEnd.number)
+              decorations.push(mermaidMarkDecorations["mermaid-block-end"].range(line.from));
+            if (!isFenceLine) {
+              decorations.push(
+                Decoration.line({
+                  attributes: {
+                    "data-line-num": String(relativeLineNum),
+                    style: `--line-num-width: ${lineNumWidth}ch`
+                  }
+                }).range(line.from)
+              );
+            }
+            if (!isFenceLine) {
+              codeLineIndex++;
+            }
+          }
+          decorations.push(
+            Decoration.widget({
+              widget: new MermaidBlockWidget(definition, attributes, currentTheme, from, to),
+              side: 1,
+              block: false
+            }).range(to)
+          );
+          if (cursorInRange) {
+            for (let child = node.node.firstChild; child; child = child.nextSibling) {
+              if (child.name === "MermaidBlockMark") {
+                decorations.push(mermaidMarkDecorations["mermaid-marker"].range(child.from, child.to));
+              }
+            }
+          } else {
+            decorations.push(mermaidMarkDecorations["mermaid-hidden"].range(from, to));
+          }
+        }
+      }
+    });
+  }
+  /**
+   * Render mermaid to HTML for preview mode
+   *
+   * Renders the actual mermaid diagram to SVG HTML
+   */
+  async renderToHTML(node, _children, ctx) {
+    if (node.name === "MermaidBlock") {
+      const content = ctx.sliceDoc(node.from, node.to);
+      const lines = content.split("\n");
+      const definition = lines.length > 1 ? lines.slice(1, -1).join("\n").trim() : "";
+      const fenceLine = lines[0] || "";
+      const attributes = parseAttributes(fenceLine);
+      const config = this.context?.config;
+      const currentTheme = config?.theme === "dark" /* DARK */ ? "dark" : "default";
+      const { svg, error } = await renderMermaid(definition, attributes, currentTheme);
+      if (error) {
+        return `<div class="cm-draftly-mermaid-error">${ctx.sanitize(`[Mermaid Error: ${error}]`)}</div>`;
+      }
+      return `<div class="cm-draftly-mermaid-rendered">${svg}</div>`;
+    }
+    if (node.name === "MermaidBlockMark") {
+      return "";
+    }
+    return null;
+  }
+};
+var theme9 = createTheme({
+  default: {
+    // Raw mermaid block lines (monospace)
+    ".cm-draftly-mermaid-block:not(.cm-draftly-mermaid-block-rendered)": {
+      "--radius": "0.375rem",
+      position: "relative",
+      fontFamily: "var(--font-jetbrains-mono, monospace)",
+      fontSize: "0.9rem",
+      backgroundColor: "rgba(0, 0, 0, 0.03)",
+      padding: "0 1rem !important",
+      paddingLeft: "calc(var(--line-num-width, 2ch) + 1rem) !important",
+      lineHeight: "1.5",
+      borderLeft: "1px solid var(--color-border)",
+      borderRight: "1px solid var(--color-border)"
+    },
+    ".cm-draftly-mermaid-block-start:not(.cm-draftly-mermaid-block-rendered)": {
+      overflow: "hidden",
+      borderTopLeftRadius: "var(--radius)",
+      borderTopRightRadius: "var(--radius)",
+      borderTop: "1px solid var(--color-border)"
+    },
+    ".cm-draftly-mermaid-block-end:not(.cm-draftly-mermaid-block-rendered)": {
+      overflow: "hidden",
+      borderBottomLeftRadius: "var(--radius)",
+      borderBottomRightRadius: "var(--radius)",
+      borderBottom: "1px solid var(--color-border)"
+    },
+    ".cm-draftly-mermaid-block:not(.cm-draftly-mermaid-block-rendered)::before": {
+      content: "attr(data-line-num)",
+      position: "absolute",
+      left: "0.5rem",
+      top: "0.2rem",
+      width: "var(--line-num-width, 2ch)",
+      textAlign: "right",
+      color: "#6a737d",
+      opacity: "0.6",
+      fontFamily: "var(--font-jetbrains-mono, monospace)",
+      fontSize: "0.85rem",
+      userSelect: "none"
+    },
+    ".cm-draftly-mermaid-block.cm-draftly-mermaid-block-rendered br": {
+      display: "none"
+    },
+    // Mermaid markers (```mermaid / ```)
+    ".cm-draftly-mermaid-marker": {
+      color: "#6a737d",
+      fontFamily: "var(--font-jetbrains-mono, monospace)"
+    },
+    // Hidden mermaid syntax (when cursor is not in range)
+    ".cm-draftly-mermaid-hidden": {
+      display: "none"
+    },
+    // Rendered mermaid container
+    ".cm-draftly-mermaid-rendered": {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      padding: "1em 0",
+      borderRadius: "4px",
+      overflow: "auto"
+    },
+    // SVG inside rendered container
+    ".cm-draftly-mermaid-rendered svg": {
+      maxWidth: "100%",
+      height: "auto",
+      aspectRatio: "auto"
+    },
+    // Loading state
+    ".cm-draftly-mermaid-loading": {
+      display: "inline-block",
+      padding: "0.5em 1em",
+      color: "#6a737d",
+      fontSize: "0.875em",
+      fontStyle: "italic",
+      fontFamily: "var(--font-jetbrains-mono, monospace)"
+    },
+    // Error styling
+    ".cm-draftly-mermaid-error": {
+      display: "inline-block",
+      padding: "0.25em 0.5em",
+      backgroundColor: "rgba(255, 0, 0, 0.1)",
+      color: "#d73a49",
+      borderRadius: "4px",
+      fontSize: "0.875em",
+      fontStyle: "italic",
+      fontFamily: "var(--font-jetbrains-mono, monospace)"
+    }
+  },
+  dark: {
+    ".cm-draftly-mermaid-block:not(.cm-draftly-mermaid-block-rendered)": {
+      backgroundColor: "rgba(255, 255, 255, 0.03)"
+    },
+    ".cm-draftly-mermaid-marker": {
+      color: "#8b949e"
+    },
+    ".cm-draftly-mermaid-loading": {
+      color: "#8b949e"
+    },
+    ".cm-draftly-mermaid-error": {
+      backgroundColor: "rgba(255, 0, 0, 0.15)",
+      color: "#f85149"
+    }
+  }
+});
+var COPY_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>`;
+var CHECK_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`;
+var COPY_RESET_DELAY = 2e3;
+var codeMarkDecorations = {
+  // Inline code
+  "inline-code": Decoration.mark({ class: "cm-draftly-code-inline" }),
+  "inline-mark": Decoration.replace({}),
+  // Fenced code block
+  "code-block-line": Decoration.line({ class: "cm-draftly-code-block-line" }),
+  "code-block-line-start": Decoration.line({ class: "cm-draftly-code-block-line-start" }),
+  "code-block-line-end": Decoration.line({ class: "cm-draftly-code-block-line-end" }),
+  "code-fence": Decoration.mark({ class: "cm-draftly-code-fence" }),
+  "code-hidden": Decoration.replace({}),
+  // Highlights
+  "code-line-highlight": Decoration.line({ class: "cm-draftly-code-line-highlight" }),
+  "code-text-highlight": Decoration.mark({ class: "cm-draftly-code-text-highlight" })
+};
+var CodeBlockHeaderWidget = class extends WidgetType {
+  constructor(props, codeContent) {
+    super();
+    this.props = props;
+    this.codeContent = codeContent;
+  }
+  /** Creates the header DOM element with title/language and optional copy button. */
+  toDOM() {
+    const header = document.createElement("div");
+    header.className = "cm-draftly-code-header";
+    const leftSide = document.createElement("div");
+    leftSide.className = "cm-draftly-code-header-left";
+    if (this.props.title) {
+      const title = document.createElement("span");
+      title.className = "cm-draftly-code-header-title";
+      title.textContent = this.props.title;
+      leftSide.appendChild(title);
+    } else if (this.props.language) {
+      const lang = document.createElement("span");
+      lang.className = "cm-draftly-code-header-lang";
+      lang.textContent = this.props.language;
+      leftSide.appendChild(lang);
+    }
+    header.appendChild(leftSide);
+    if (this.props.copy !== false) {
+      const rightSide = document.createElement("div");
+      rightSide.className = "cm-draftly-code-header-right";
+      const copyBtn = document.createElement("button");
+      copyBtn.className = "cm-draftly-code-copy-btn";
+      copyBtn.type = "button";
+      copyBtn.title = "Copy code";
+      copyBtn.innerHTML = COPY_ICON;
+      copyBtn.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        navigator.clipboard.writeText(this.codeContent).then(() => {
+          copyBtn.classList.add("copied");
+          copyBtn.innerHTML = CHECK_ICON;
+          setTimeout(() => {
+            copyBtn.classList.remove("copied");
+            copyBtn.innerHTML = COPY_ICON;
+          }, COPY_RESET_DELAY);
+        });
+      });
+      rightSide.appendChild(copyBtn);
+      header.appendChild(rightSide);
+    }
+    return header;
+  }
+  /** Checks equality for widget reuse optimization. */
+  eq(other) {
+    return this.props.title === other.props.title && this.props.language === other.props.language && this.props.copy === other.props.copy && this.codeContent === other.codeContent;
+  }
+  /** Allow click events to propagate for copy button interaction. */
+  ignoreEvent() {
+    return false;
+  }
+};
+var CodeBlockCaptionWidget = class extends WidgetType {
+  constructor(caption) {
+    super();
+    this.caption = caption;
+  }
+  /** Creates the caption DOM element. */
+  toDOM() {
+    const captionEl = document.createElement("div");
+    captionEl.className = "cm-draftly-code-caption";
+    captionEl.textContent = this.caption;
+    return captionEl;
+  }
+  /** Checks equality for widget reuse optimization. */
+  eq(other) {
+    return this.caption === other.caption;
+  }
+  /** Allow click events to propagate for caption interaction. */
+  ignoreEvent() {
+    return false;
+  }
+};
+var CodePlugin = class extends DecorationPlugin {
+  name = "code";
+  version = "1.0.0";
+  decorationPriority = 25;
+  requiredNodes = ["InlineCode", "FencedCode", "CodeMark", "CodeInfo", "CodeText"];
+  /**
+   * Plugin theme
+   */
+  get theme() {
+    return theme10;
+  }
+  /**
+   * Keyboard shortcuts for code formatting
+   */
+  getKeymap() {
+    return [
+      {
+        key: "Mod-e",
+        run: toggleMarkdownStyle("`"),
+        preventDefault: true
+      },
+      {
+        key: "Mod-Shift-e",
+        run: (view) => this.toggleCodeBlock(view),
+        preventDefault: true
+      }
+    ];
+  }
+  /**
+   * Toggle code block on current line or selected lines
+   */
+  toggleCodeBlock(view) {
+    const { state } = view;
+    const { from, to } = state.selection.main;
+    const startLine = state.doc.lineAt(from);
+    const endLine = state.doc.lineAt(to);
+    const prevLineNum = startLine.number > 1 ? startLine.number - 1 : startLine.number;
+    const nextLineNum = endLine.number < state.doc.lines ? endLine.number + 1 : endLine.number;
+    const prevLine = state.doc.line(prevLineNum);
+    const nextLine = state.doc.line(nextLineNum);
+    const isWrapped = prevLine.text.trim().startsWith("```") && nextLine.text.trim() === "```" && prevLineNum !== startLine.number && nextLineNum !== endLine.number;
+    if (isWrapped) {
+      view.dispatch({
+        changes: [
+          { from: prevLine.from, to: prevLine.to + 1, insert: "" },
+          // Remove opening fence + newline
+          { from: nextLine.from - 1, to: nextLine.to, insert: "" }
+          // Remove newline + closing fence
+        ]
+      });
+    } else {
+      const openFence = "```\n";
+      const closeFence = "\n```";
+      view.dispatch({
+        changes: [
+          { from: startLine.from, insert: openFence },
+          { from: endLine.to, insert: closeFence }
+        ],
+        selection: { anchor: startLine.from + openFence.length, head: endLine.to + openFence.length }
+      });
+    }
+    return true;
+  }
+  /**
+   * Parse CodeInfo string into structured properties
+   *
+   * @param codeInfo - The raw CodeInfo string (e.g., "tsx line-numbers{5} title=\"hello.tsx\" copy {2-4,5} /Hello/3-5")
+   * @returns Parsed CodeBlockProperties object
+   *
+   * @example
+   * ```typescript
+   * parseCodeInfo("tsx line-numbers{5} title=\"hello.tsx\" copy {2-4,5} /Hello/3-5")
+   * ```
+   *
+   * Returns:
+   * ```json
+   * {
+   *   language: "tsx",
+   *   lineNumbers: 5,
+   *   title: "hello.tsx",
+   *   copy: true,
+   *   highlightLines: [2,3,4,5],
+   *   highlightText: [{ pattern: "Hello", instances: [3,4,5] }]
+   * }
+   * ```
+   */
+  parseCodeInfo(codeInfo) {
+    const props = { language: "" };
+    if (!codeInfo || !codeInfo.trim()) {
+      return props;
+    }
+    let remaining = codeInfo.trim();
+    const langMatch = remaining.match(/^(\w+)/);
+    if (langMatch && langMatch[1]) {
+      props.language = langMatch[1];
+      remaining = remaining.slice(langMatch[0].length).trim();
+    }
+    const quotedPattern = /(\w+)="([^"]*)"/g;
+    let quotedMatch;
+    while ((quotedMatch = quotedPattern.exec(remaining)) !== null) {
+      const key = quotedMatch[1]?.toLowerCase();
+      const value = quotedMatch[2];
+      if (key === "title" && value !== void 0) {
+        props.title = value;
+      } else if (key === "caption" && value !== void 0) {
+        props.caption = value;
+      }
+    }
+    remaining = remaining.replace(quotedPattern, "").trim();
+    const lineNumbersMatch = remaining.match(/line-numbers(?:\{(\d+)\})?/);
+    if (lineNumbersMatch) {
+      if (lineNumbersMatch[1]) {
+        props.lineNumbers = parseInt(lineNumbersMatch[1], 10);
+      } else {
+        props.lineNumbers = true;
+      }
+      remaining = remaining.replace(lineNumbersMatch[0], "").trim();
+    }
+    if (/\bcopy\b/.test(remaining)) {
+      props.copy = true;
+      remaining = remaining.replace(/\bcopy\b/, "").trim();
+    }
+    const lineHighlightMatch = remaining.match(/\{([^}]+)\}/);
+    if (lineHighlightMatch && lineHighlightMatch[1]) {
+      const highlightLines = [];
+      const parts = lineHighlightMatch[1].split(",");
+      for (const part of parts) {
+        const trimmed = part.trim();
+        const rangeMatch = trimmed.match(/^(\d+)-(\d+)$/);
+        if (rangeMatch && rangeMatch[1] && rangeMatch[2]) {
+          const start = parseInt(rangeMatch[1], 10);
+          const end = parseInt(rangeMatch[2], 10);
+          for (let i = start; i <= end; i++) {
+            highlightLines.push(i);
+          }
+        } else if (/^\d+$/.test(trimmed)) {
+          highlightLines.push(parseInt(trimmed, 10));
+        }
+      }
+      if (highlightLines.length > 0) {
+        props.highlightLines = highlightLines;
+      }
+      remaining = remaining.replace(lineHighlightMatch[0], "").trim();
+    }
+    const textHighlightPattern = /\/([^/]+)\/(?:(\d+(?:-\d+)?(?:,\d+(?:-\d+)?)*))?/g;
+    let textMatch;
+    const highlightText = [];
+    while ((textMatch = textHighlightPattern.exec(remaining)) !== null) {
+      if (!textMatch[1]) continue;
+      const highlight = {
+        pattern: textMatch[1]
+      };
+      if (textMatch[2]) {
+        const instanceStr = textMatch[2];
+        const instances = [];
+        const instanceParts = instanceStr.split(",");
+        for (const part of instanceParts) {
+          const rangeMatch = part.match(/^(\d+)-(\d+)$/);
+          if (rangeMatch && rangeMatch[1] && rangeMatch[2]) {
+            const start = parseInt(rangeMatch[1], 10);
+            const end = parseInt(rangeMatch[2], 10);
+            for (let i = start; i <= end; i++) {
+              instances.push(i);
+            }
+          } else if (/^\d+$/.test(part)) {
+            instances.push(parseInt(part, 10));
+          }
+        }
+        if (instances.length > 0) {
+          highlight.instances = instances;
+        }
+      }
+      highlightText.push(highlight);
+    }
+    if (highlightText.length > 0) {
+      props.highlightText = highlightText;
+    }
+    return props;
+  }
+  /**
+   * Build decorations for inline code and fenced code blocks.
+   * Handles line numbers, highlights, header/caption widgets, and fence visibility.
+   */
+  buildDecorations(ctx) {
+    const { view, decorations } = ctx;
+    const tree = syntaxTree(view.state);
+    tree.iterate({
+      enter: (node) => {
+        const { from, to, name } = node;
+        if (name === "InlineCode") {
+          decorations.push(codeMarkDecorations["inline-code"].range(from, to));
+          const cursorInRange = ctx.selectionOverlapsRange(from, to);
+          if (!cursorInRange) {
+            for (let child = node.node.firstChild; child; child = child.nextSibling) {
+              if (child.name === "CodeMark") {
+                decorations.push(codeMarkDecorations["inline-mark"].range(child.from, child.to));
+              }
+            }
+          }
+        }
+        if (name === "FencedCode") {
+          const nodeLineStart = view.state.doc.lineAt(from);
+          const nodeLineEnd = view.state.doc.lineAt(to);
+          const cursorInRange = ctx.selectionOverlapsRange(nodeLineStart.from, nodeLineEnd.to);
+          let infoProps = { language: "" };
+          for (let child = node.node.firstChild; child; child = child.nextSibling) {
+            if (child.name === "CodeInfo") {
+              infoProps = this.parseCodeInfo(view.state.sliceDoc(child.from, child.to).trim());
+              break;
+            }
+          }
+          const totalCodeLines = nodeLineEnd.number - nodeLineStart.number - 1;
+          const startLineNum = typeof infoProps.lineNumbers === "number" ? infoProps.lineNumbers : 1;
+          const maxLineNum = startLineNum + totalCodeLines - 1;
+          const lineNumWidth = Math.max(String(maxLineNum).length, String(startLineNum).length);
+          let codeLineIndex = 0;
+          let codeContent = "";
+          for (let child = node.node.firstChild; child; child = child.nextSibling) {
+            if (child.name === "CodeText") {
+              codeContent = view.state.sliceDoc(child.from, child.to);
+              break;
+            }
+          }
+          const shouldShowHeader = !cursorInRange && (infoProps.title || infoProps.copy || infoProps.language);
+          const shouldShowCaption = !cursorInRange && infoProps.caption;
+          if (shouldShowHeader) {
+            decorations.push(
+              Decoration.widget({
+                widget: new CodeBlockHeaderWidget(infoProps, codeContent),
+                block: false
+              }).range(nodeLineStart.from)
+            );
+          }
+          for (let i = nodeLineStart.number; i <= nodeLineEnd.number; i++) {
+            const line = view.state.doc.line(i);
+            const isFenceLine = i === nodeLineStart.number || i === nodeLineEnd.number;
+            const relativeLineNum = startLineNum + codeLineIndex;
+            decorations.push(codeMarkDecorations["code-block-line"].range(line.from));
+            if (i === nodeLineStart.number) {
+              decorations.push(codeMarkDecorations["code-block-line-start"].range(line.from));
+              if (shouldShowHeader) {
+                decorations.push(
+                  Decoration.line({
+                    class: "cm-draftly-code-block-has-header"
+                  }).range(line.from)
+                );
+              }
+            }
+            if (i === nodeLineEnd.number) {
+              decorations.push(codeMarkDecorations["code-block-line-end"].range(line.from));
+              if (shouldShowCaption) {
+                decorations.push(
+                  Decoration.line({
+                    class: "cm-draftly-code-block-has-caption"
+                  }).range(line.from)
+                );
+              }
+            }
+            if (!isFenceLine && infoProps.lineNumbers) {
+              decorations.push(
+                Decoration.line({
+                  class: "cm-draftly-code-line-numbered",
+                  attributes: {
+                    "data-line-num": String(relativeLineNum),
+                    style: `--line-num-width: ${lineNumWidth}ch`
+                  }
+                }).range(line.from)
+              );
+            }
+            if (!isFenceLine && infoProps.highlightLines) {
+              if (infoProps.highlightLines.includes(codeLineIndex + 1)) {
+                decorations.push(codeMarkDecorations["code-line-highlight"].range(line.from));
+              }
+            }
+            if (!isFenceLine && infoProps.highlightText && infoProps.highlightText.length > 0) {
+              const lineText = view.state.sliceDoc(line.from, line.to);
+              for (const textHighlight of infoProps.highlightText) {
+                try {
+                  const regex = new RegExp(textHighlight.pattern, "g");
+                  let match;
+                  let matchIndex = 0;
+                  while ((match = regex.exec(lineText)) !== null) {
+                    matchIndex++;
+                    const shouldHighlight = !textHighlight.instances || textHighlight.instances.includes(matchIndex);
+                    if (shouldHighlight) {
+                      const matchFrom = line.from + match.index;
+                      const matchTo = matchFrom + match[0].length;
+                      decorations.push(codeMarkDecorations["code-text-highlight"].range(matchFrom, matchTo));
+                    }
+                  }
+                } catch {
+                }
+              }
+            }
+            if (!isFenceLine) {
+              codeLineIndex++;
+            }
+          }
+          for (let child = node.node.firstChild; child; child = child.nextSibling) {
+            if (child.name === "CodeMark" || child.name === "CodeInfo") {
+              if (cursorInRange) {
+                decorations.push(codeMarkDecorations["code-fence"].range(child.from, child.to));
+              } else {
+                decorations.push(codeMarkDecorations["code-hidden"].range(child.from, child.to));
+              }
+            }
+          }
+          if (!cursorInRange && infoProps.caption) {
+            decorations.push(
+              Decoration.widget({
+                widget: new CodeBlockCaptionWidget(infoProps.caption),
+                block: false,
+                side: 1
+                // After the content
+              }).range(nodeLineEnd.to)
+            );
+          }
+        }
+      }
+    });
+  }
+  /**
+   * Render code elements to HTML for static preview.
+   * Applies syntax highlighting using @lezer/highlight.
+   */
+  renderToHTML(node, children, ctx) {
+    if (node.name === "CodeMark") {
+      return "";
+    }
+    if (node.name === "InlineCode") {
+      let content = ctx.sliceDoc(node.from, node.to);
+      const match = content.match(/^`+(.+?)`+$/s);
+      if (match && match[1]) {
+        content = match[1];
+      }
+      return `<code class="cm-draftly-code-inline" style="padding: 0.1rem 0.25rem">${ctx.sanitize(content)}</code>`;
+    }
+    if (node.name === "FencedCode") {
+      const content = ctx.sliceDoc(node.from, node.to);
+      const lines = content.split("\n");
+      const firstLine = lines[0] || "";
+      const infoMatch = firstLine.match(/^```(.*)$/);
+      const infoString = infoMatch?.[1]?.trim() || "";
+      const props = this.parseCodeInfo(infoString);
+      const codeLines = lines.slice(1, -1);
+      const code = codeLines.join("\n");
+      let html = "";
+      html += `<div class="cm-draftly-code-container">`;
+      const showHeader = props.title || props.copy || props.language;
+      if (showHeader) {
+        html += `<div class="cm-draftly-code-header">`;
+        html += `<div class="cm-draftly-code-header-left">`;
+        if (props.title) {
+          html += `<span class="cm-draftly-code-header-title">${ctx.sanitize(props.title)}</span>`;
+        } else if (props.language) {
+          html += `<span class="cm-draftly-code-header-lang">${ctx.sanitize(props.language)}</span>`;
+        }
+        html += `</div>`;
+        if (props.copy !== false) {
+          html += `<div class="cm-draftly-code-header-right">`;
+          const encodedCode = typeof btoa !== "undefined" ? btoa(encodeURIComponent(code)) : Buffer.from(code).toString("base64");
+          html += `<button class="cm-draftly-code-copy-btn" type="button" title="Copy code" data-code="${encodedCode}" data-encoded="true">`;
+          html += `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>`;
+          html += `</button>`;
+          html += `</div>`;
+        }
+        html += `</div>`;
+      }
+      const startLineNum = typeof props.lineNumbers === "number" ? props.lineNumbers : 1;
+      const lineNumWidth = String(startLineNum + codeLines.length - 1).length;
+      const hasHeader = showHeader ? " cm-draftly-code-block-has-header" : "";
+      const hasCaption = props.caption ? " cm-draftly-code-block-has-caption" : "";
+      html += `<pre class="cm-draftly-code-block${hasHeader}${hasCaption}"${props.language ? ` data-lang="${ctx.sanitize(props.language)}"` : ""}>`;
+      html += `<code>`;
+      codeLines.forEach((line, index) => {
+        const lineNum = startLineNum + index;
+        const isHighlighted = props.highlightLines?.includes(index + 1);
+        const lineClasses = ["cm-draftly-code-line"];
+        if (isHighlighted) lineClasses.push("cm-draftly-code-line-highlight");
+        if (props.lineNumbers) lineClasses.push("cm-draftly-code-line-numbered");
+        const lineAttrs = [`class="${lineClasses.join(" ")}"`];
+        if (props.lineNumbers) {
+          lineAttrs.push(`data-line-num="${lineNum}"`);
+          lineAttrs.push(`style="--line-num-width: ${lineNumWidth}ch"`);
+        }
+        let lineContent = this.highlightCodeLine(line, props.language || "", ctx);
+        if (props.highlightText && props.highlightText.length > 0) {
+          lineContent = this.applyTextHighlights(lineContent, props.highlightText);
+        }
+        html += `<span ${lineAttrs.join(" ")}>${lineContent || " "}</span>`;
+      });
+      html += `</code></pre>`;
+      if (props.caption) {
+        html += `<div class="cm-draftly-code-caption">${ctx.sanitize(props.caption)}</div>`;
+      }
+      html += `</div>`;
+      return html;
+    }
+    if (node.name === "CodeInfo" || node.name === "CodeText") {
+      return "";
+    }
+    return null;
+  }
+  /**
+   * Highlight a single line of code using the language's Lezer parser.
+   * Falls back to sanitized plain text if the language is not supported.
+   */
+  highlightCodeLine(line, lang, ctx) {
+    if (!lang || !line) {
+      return ctx.sanitize(line);
+    }
+    const langDesc = languages.find(
+      (l) => l.name.toLowerCase() === lang.toLowerCase() || l.alias && l.alias.includes(lang.toLowerCase())
+    );
+    if (!langDesc || !langDesc.support) {
+      return ctx.sanitize(line);
+    }
+    try {
+      const parser = langDesc.support.language.parser;
+      const tree = parser.parse(line);
+      let result = "";
+      highlightCode(
+        line,
+        tree,
+        classHighlighter,
+        (text, classes2) => {
+          if (classes2) {
+            result += `<span class="${classes2}">${ctx.sanitize(text)}</span>`;
+          } else {
+            result += ctx.sanitize(text);
+          }
+        },
+        () => {
+        }
+        // No newlines for single line
+      );
+      return result;
+    } catch {
+      return ctx.sanitize(line);
+    }
+  }
+  /**
+   * Apply text highlights (regex patterns) to already syntax-highlighted HTML.
+   * Wraps matched patterns in `<mark>` elements.
+   */
+  applyTextHighlights(htmlContent, highlights) {
+    let result = htmlContent;
+    for (const highlight of highlights) {
+      try {
+        const regex = new RegExp(`(${highlight.pattern})`, "g");
+        let matchCount = 0;
+        result = result.replace(regex, (match) => {
+          matchCount++;
+          const shouldHighlight = !highlight.instances || highlight.instances.includes(matchCount);
+          if (shouldHighlight) {
+            return `<mark class="cm-draftly-code-text-highlight">${match}</mark>`;
+          }
+          return match;
+        });
+      } catch {
+      }
+    }
+    return result;
+  }
+};
+var theme10 = createTheme({
+  default: {
+    // Inline code
+    ".cm-draftly-code-inline": {
+      fontFamily: "var(--font-jetbrains-mono, monospace)",
+      fontSize: "0.9rem",
+      backgroundColor: "rgba(0, 0, 0, 0.05)",
+      padding: "0.1rem 0.25rem",
+      border: "1px solid var(--color-border)",
+      borderRadius: "3px"
+    },
+    // Fenced code block lines
+    ".cm-draftly-code-block-line": {
+      "--radius": "0.375rem",
+      fontFamily: "var(--font-jetbrains-mono, monospace)",
+      fontSize: "0.9rem",
+      backgroundColor: "rgba(0, 0, 0, 0.03)",
+      padding: "0 1rem !important",
+      lineHeight: "1.5",
+      borderLeft: "1px solid var(--color-border)",
+      borderRight: "1px solid var(--color-border)"
+    },
+    // First line of code block
+    ".cm-draftly-code-block-line-start": {
+      borderTopLeftRadius: "var(--radius)",
+      borderTopRightRadius: "var(--radius)",
+      position: "relative",
+      overflow: "hidden",
+      borderTop: "1px solid var(--color-border)",
+      paddingBottom: "0.5rem !important"
+    },
+    // Remove top radius when header is present
+    ".cm-draftly-code-block-has-header": {
+      padding: "0 !important",
+      paddingBottom: "0.5rem !important"
+    },
+    // Code block header widget
+    ".cm-draftly-code-header": {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      padding: "0.25rem 1rem",
+      backgroundColor: "rgba(0, 0, 0, 0.06)",
+      fontFamily: "var(--font-jetbrains-mono, monospace)",
+      fontSize: "0.85rem"
+    },
+    ".cm-draftly-code-header-left": {
+      display: "flex",
+      alignItems: "center",
+      gap: "0.5rem"
+    },
+    ".cm-draftly-code-header-title": {
+      color: "var(--color-text, inherit)",
+      fontWeight: "500"
+    },
+    ".cm-draftly-code-header-lang": {
+      color: "#6a737d",
+      opacity: "0.8"
+    },
+    ".cm-draftly-code-header-right": {
+      display: "flex",
+      alignItems: "center",
+      gap: "0.5rem"
+    },
+    ".cm-draftly-code-copy-btn": {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: "0.25rem",
+      backgroundColor: "transparent",
+      border: "none",
+      borderRadius: "4px",
+      cursor: "pointer",
+      color: "#6a737d",
+      transition: "color 0.2s, background-color 0.2s"
+    },
+    ".cm-draftly-code-copy-btn:hover": {
+      backgroundColor: "rgba(0, 0, 0, 0.1)",
+      color: "var(--color-text, inherit)"
+    },
+    ".cm-draftly-code-copy-btn.copied": {
+      color: "#22c55e"
+    },
+    // Caption (below code block)
+    ".cm-draftly-code-block-has-caption": {
+      padding: "0 !important",
+      paddingTop: "0.5rem !important"
+    },
+    ".cm-draftly-code-caption": {
+      textAlign: "center",
+      fontSize: "0.85rem",
+      color: "#6a737d",
+      fontStyle: "italic",
+      padding: "0.25rem 1rem",
+      backgroundColor: "rgba(0, 0, 0, 0.06)"
+    },
+    // Last line of code block
+    ".cm-draftly-code-block-line-end": {
+      borderBottomLeftRadius: "var(--radius)",
+      borderBottomRightRadius: "var(--radius)",
+      borderBottom: "1px solid var(--color-border)",
+      paddingTop: "0.5rem !important"
+    },
+    ".cm-draftly-code-block-line-end br": {
+      display: "none"
+    },
+    // Fence markers (```)
+    ".cm-draftly-code-fence": {
+      color: "#6a737d",
+      fontFamily: "var(--font-jetbrains-mono, monospace)"
+    },
+    // Line numbers
+    ".cm-draftly-code-line-numbered": {
+      paddingLeft: "calc(var(--line-num-width, 2ch) + 1rem) !important",
+      position: "relative"
+    },
+    ".cm-draftly-code-line-numbered::before": {
+      content: "attr(data-line-num)",
+      position: "absolute",
+      left: "0.5rem",
+      top: "0.2rem",
+      width: "var(--line-num-width, 2ch)",
+      textAlign: "right",
+      color: "#6a737d",
+      opacity: "0.6",
+      fontFamily: "var(--font-jetbrains-mono, monospace)",
+      fontSize: "0.85rem",
+      userSelect: "none"
+    },
+    // Preview: code lines (need block display for full-width highlights)
+    ".cm-draftly-code-line": {
+      display: "block",
+      position: "relative",
+      paddingLeft: "1rem",
+      paddingRight: "1rem",
+      lineHeight: "1.5",
+      borderLeft: "3px solid transparent"
+    },
+    // Line highlight
+    ".cm-draftly-code-line-highlight": {
+      backgroundColor: "rgba(255, 220, 100, 0.2) !important",
+      borderLeft: "3px solid #f0b429 !important"
+    },
+    // Text highlight
+    ".cm-draftly-code-text-highlight": {
+      backgroundColor: "rgba(255, 220, 100, 0.4)",
+      borderRadius: "2px",
+      padding: "0.1rem 0"
+    },
+    // Preview: container wrapper
+    ".cm-draftly-code-container": {
+      margin: "1rem 0",
+      borderRadius: "var(--radius)",
+      overflow: "hidden",
+      border: "1px solid var(--color-border)"
+    },
+    // Preview: header inside container
+    ".cm-draftly-code-container .cm-draftly-code-header": {
+      borderRadius: "0",
+      border: "none",
+      borderBottom: "1px solid var(--color-border)"
+    },
+    // Preview: code block inside container
+    ".cm-draftly-code-container .cm-draftly-code-block": {
+      margin: "0",
+      borderRadius: "0",
+      border: "none",
+      whiteSpace: "pre-wrap"
+    },
+    // Preview: caption inside container
+    ".cm-draftly-code-container .cm-draftly-code-caption": {
+      borderTop: "1px solid var(--color-border)"
+    },
+    // Preview: standalone code block (not in container)
+    ".cm-draftly-code-block": {
+      fontFamily: "var(--font-jetbrains-mono, monospace)",
+      fontSize: "0.9rem",
+      backgroundColor: "rgba(0, 0, 0, 0.03)",
+      padding: "1rem",
+      overflow: "auto",
+      position: "relative",
+      borderRadius: "var(--radius)",
+      border: "1px solid var(--color-border)"
+    },
+    // Preview: code block with header (remove top radius)
+    ".cm-draftly-code-block.cm-draftly-code-block-has-header": {
+      borderTopLeftRadius: "0",
+      borderTopRightRadius: "0",
+      borderTop: "none",
+      margin: "0",
+      paddingTop: "0.5rem !important"
+    },
+    // Preview: code block with caption (remove bottom radius)
+    ".cm-draftly-code-block.cm-draftly-code-block-has-caption": {
+      borderBottomLeftRadius: "0",
+      borderBottomRightRadius: "0",
+      borderBottom: "none",
+      paddingBottom: "0.5rem !important"
+    }
+  },
+  dark: {
+    ".cm-draftly-code-inline": {
+      backgroundColor: "rgba(255, 255, 255, 0.1)"
+    },
+    ".cm-draftly-code-block-line": {
+      backgroundColor: "rgba(255, 255, 255, 0.05)"
+    },
+    ".cm-draftly-code-fence": {
+      color: "#8b949e"
+    },
+    ".cm-draftly-code-block": {
+      backgroundColor: "rgba(255, 255, 255, 0.05)"
+    },
+    ".cm-draftly-code-header": {
+      backgroundColor: "rgba(255, 255, 255, 0.08)"
+    },
+    ".cm-draftly-code-header-lang": {
+      color: "#8b949e"
+    },
+    ".cm-draftly-code-copy-btn": {
+      color: "#8b949e"
+    },
+    ".cm-draftly-code-copy-btn:hover": {
+      backgroundColor: "rgba(255, 255, 255, 0.1)"
+    },
+    ".cm-draftly-code-caption": {
+      backgroundColor: "rgba(255, 255, 255, 0.05)"
+    },
+    ".cm-draftly-code-line-numbered::before": {
+      color: "#8b949e"
+    },
+    ".cm-draftly-code-line-highlight": {
+      backgroundColor: "rgba(255, 220, 100, 0.15) !important",
+      borderLeft: "3px solid #d9a520 !important"
+    },
+    ".cm-draftly-code-text-highlight": {
+      backgroundColor: "rgba(255, 220, 100, 0.3)"
+    }
+  }
+});
+var quoteMarkDecorations = {
+  /** Decoration for the > marker */
+  "quote-mark": Decoration.replace({}),
+  /** Decoration for the quote content */
+  "quote-content": Decoration.mark({ class: "cm-draftly-quote-content" })
+};
+var quoteLineDecorations = {
+  /** Decoration for blockquote lines */
+  "quote-line": Decoration.line({ class: "cm-draftly-quote-line" })
+};
+var QuotePlugin = class extends DecorationPlugin {
+  name = "quote";
+  version = "1.0.0";
+  decorationPriority = 10;
+  requiredNodes = ["Blockquote", "QuoteMark"];
+  /**
+   * Constructor - calls super constructor
+   */
+  constructor() {
+    super();
+  }
+  /**
+   * Plugin theme
+   */
+  get theme() {
+    return theme11;
+  }
+  /**
+   * Build blockquote decorations by iterating the syntax tree
+   */
+  buildDecorations(ctx) {
+    const { view, decorations } = ctx;
+    const tree = syntaxTree(view.state);
+    tree.iterate({
+      enter: (node) => {
+        const { from, to, name } = node;
+        if (name !== "Blockquote") {
+          return;
+        }
+        const startLine = view.state.doc.lineAt(from);
+        const endLine = view.state.doc.lineAt(to);
+        for (let lineNum = startLine.number; lineNum <= endLine.number; lineNum++) {
+          const line = view.state.doc.line(lineNum);
+          decorations.push(quoteLineDecorations["quote-line"].range(line.from));
+        }
+        decorations.push(quoteMarkDecorations["quote-content"].range(from, to));
+        const cursorInNode = ctx.selectionOverlapsRange(from, to);
+        if (!cursorInNode) {
+          this.hideQuoteMarks(node.node, decorations, view);
+        }
+      }
+    });
+  }
+  /**
+   * Recursively find and hide quote marks
+   */
+  hideQuoteMarks(node, decorations, view) {
+    let child = node.firstChild;
+    while (child) {
+      if (child.name === "QuoteMark") {
+        const line = view.state.doc.lineAt(child.from);
+        const markEnd = Math.min(child.to + 1, line.to);
+        decorations.push(quoteMarkDecorations["quote-mark"].range(child.from, markEnd));
+      }
+      if (child.name === "Blockquote") {
+        this.hideQuoteMarks(child, decorations, view);
+      }
+      child = child.nextSibling;
+    }
+  }
+  renderToHTML(node, children) {
+    if (node.name === "QuoteMark") {
+      return "";
+    }
+    if (node.name !== "Blockquote") {
+      return null;
+    }
+    return `<blockquote class="cm-draftly-quote-line"><div class="cm-draftly-quote-content">${children}</div></blockquote>
+`;
+  }
+};
+var theme11 = createTheme({
+  default: {
+    // Line styling with left border
+    ".cm-draftly-quote-line": {
+      borderLeft: "3px solid currentColor",
+      paddingLeft: "1em !important",
+      paddingTop: "0.25em !important",
+      paddingBottom: "0.25em !important",
+      marginLeft: "0.25em",
+      opacity: "0.85"
+    },
+    // Quote content styling
+    ".cm-draftly-quote-content": {
+      fontStyle: "italic"
+    }
+  }
+});
+var hrLineDecoration = Decoration.line({ class: "cm-draftly-hr-line" });
+var hrMarkDecoration = Decoration.replace({});
+var HRPlugin = class extends DecorationPlugin {
+  name = "hr";
+  version = "1.0.0";
+  decorationPriority = 10;
+  requiredNodes = ["HorizontalRule"];
+  /**
+   * Constructor - calls super constructor
+   */
+  constructor() {
+    super();
+  }
+  /**
+   * Plugin theme
+   */
+  get theme() {
+    return theme12;
+  }
+  /**
+   * Build horizontal rule decorations by iterating the syntax tree
+   */
+  buildDecorations(ctx) {
+    const { view, decorations } = ctx;
+    const tree = syntaxTree(view.state);
+    tree.iterate({
+      enter: (node) => {
+        const { from, to, name } = node;
+        if (name !== "HorizontalRule") {
+          return;
+        }
+        const line = view.state.doc.lineAt(from);
+        decorations.push(hrLineDecoration.range(line.from));
+        const cursorInNode = ctx.selectionOverlapsRange(from, to);
+        if (!cursorInNode) {
+          const markEnd = Math.min(to, line.to);
+          decorations.push(hrMarkDecoration.range(from, markEnd));
+        }
+      }
+    });
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  renderToHTML(node, _children) {
+    if (node.name !== "HorizontalRule") {
+      return null;
+    }
+    return `<hr class="cm-draftly-hr-line" />
+`;
+  }
+};
+var theme12 = createTheme({
+  default: {
+    // Line styling — displays a centered horizontal line
+    ".cm-draftly-hr-line": {
+      display: "flex",
+      alignItems: "center",
+      paddingTop: "0.75em",
+      paddingBottom: "0.75em",
+      border: "none",
+      "&::after": {
+        content: '""',
+        flex: "1",
+        height: "2px",
+        background: "currentColor",
+        opacity: "0.3"
+      }
+    }
+  }
+});
+
+// src/plugins/index.ts
+var essentialPlugins = [
+  new ParagraphPlugin(),
+  new HeadingPlugin(),
+  new InlinePlugin(),
+  new LinkPlugin(),
+  new ListPlugin(),
+  new HTMLPlugin(),
+  new ImagePlugin(),
+  new MathPlugin(),
+  new MermaidPlugin(),
+  new CodePlugin(),
+  new QuotePlugin(),
+  new HRPlugin()
+];
+var allPlugins = [...essentialPlugins];
+
+export { CodePlugin, HRPlugin, HTMLPlugin, HeadingPlugin, ImagePlugin, InlinePlugin, LinkPlugin, ListPlugin, MathPlugin, MermaidPlugin, ParagraphPlugin, QuotePlugin, allPlugins, essentialPlugins };
+//# sourceMappingURL=chunk-N3WL3XPB.js.map
+//# sourceMappingURL=chunk-N3WL3XPB.js.map