draftly 0.1.0-alpha.0

package/dist/index.js

@@ -0,0 +1,1128 @@
+import { Facet, RangeSetBuilder, Prec } from '@codemirror/state';
+import { EditorView, Decoration, ViewPlugin, keymap, drawSelection, highlightActiveLine, rectangularSelection, WidgetType } from '@codemirror/view';
+import { markdown, markdownLanguage, markdownKeymap } from '@codemirror/lang-markdown';
+import { HighlightStyle, syntaxHighlighting, syntaxTree, indentOnInput } from '@codemirror/language';
+import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
+import { languages } from '@codemirror/language-data';
+import DOMPurify from 'dompurify';
+
+// src/draftly.ts
+
+// src/utils.ts
+function cursorInRange(view, from, to) {
+  const selection = view.state.selection.main;
+  return selection.from <= to && selection.to >= from;
+}
+function selectionOverlapsRange(view, from, to) {
+  for (const range of view.state.selection.ranges) {
+    if (range.from <= to && range.to >= from) {
+      return true;
+    }
+  }
+  return false;
+}
+var highlightStyle = HighlightStyle.define([]);
+var draftlyBaseTheme = EditorView.baseTheme({
+  // Container styles - only apply when view plugin is enabled
+  "&.cm-draftly-enabled": {
+    fontSize: "16px",
+    lineHeight: "1.6"
+  },
+  "&.cm-draftly-enabled .cm-content": {
+    maxWidth: "48rem",
+    margin: "0 auto",
+    fontFamily: "var(--font-sans, sans-serif)",
+    fontSize: "16px",
+    lineHeight: "1.6"
+  },
+  // Inline code
+  ".cm-draftly-inline-code": {
+    fontFamily: "var(--font-mono, monospace)",
+    fontSize: "0.9em",
+    backgroundColor: "rgba(175, 184, 193, 0.2)",
+    padding: "0.1em 0.3em",
+    borderRadius: "4px"
+  },
+  ".cm-draftly-code-mark": {
+    opacity: "0.4"
+  },
+  // Links
+  ".cm-draftly-link": {
+    color: "#0969da",
+    textDecoration: "none"
+  },
+  ".cm-draftly-link:hover": {
+    textDecoration: "underline"
+  },
+  ".cm-draftly-url": {
+    opacity: "0.6",
+    fontSize: "0.9em"
+  },
+  // Images (placeholder styling)
+  ".cm-draftly-image": {
+    color: "#8250df"
+  },
+  // Code blocks
+  ".cm-draftly-fenced-code": {
+    fontFamily: "var(--font-mono, monospace)",
+    fontSize: "0.9em"
+  },
+  ".cm-draftly-line-code": {
+    backgroundColor: "rgba(175, 184, 193, 0.15)",
+    borderRadius: "0"
+  },
+  ".cm-draftly-code-info": {
+    color: "#6e7781",
+    fontStyle: "italic"
+  },
+  // Blockquote
+  ".cm-draftly-line-blockquote": {
+    borderLeft: "3px solid #d0d7de",
+    paddingLeft: "1em",
+    color: "#656d76"
+  },
+  ".cm-draftly-quote-mark": {
+    opacity: "0.4"
+  },
+  // Horizontal rule
+  ".cm-draftly-line-hr": {
+    textAlign: "center"
+  },
+  ".cm-draftly-hr": {
+    opacity: "0.4"
+  }
+});
+
+// src/view-plugin.ts
+var markDecorations = {
+  // Inline styles
+  "inline-code": Decoration.mark({ class: "cm-draftly-inline-code" }),
+  // Links and images
+  link: Decoration.mark({ class: "cm-draftly-link" }),
+  "link-text": Decoration.mark({ class: "cm-draftly-link-text" }),
+  url: Decoration.mark({ class: "cm-draftly-url" }),
+  image: Decoration.mark({ class: "cm-draftly-image" }),
+  // Emphasis markers (* _ ~~ `)
+  "emphasis-mark": Decoration.mark({ class: "cm-draftly-emphasis-mark" }),
+  // Code blocks
+  "fenced-code": Decoration.mark({ class: "cm-draftly-fenced-code" }),
+  "code-mark": Decoration.mark({ class: "cm-draftly-code-mark" }),
+  "code-info": Decoration.mark({ class: "cm-draftly-code-info" }),
+  // Blockquote
+  blockquote: Decoration.mark({ class: "cm-draftly-blockquote" }),
+  "quote-mark": Decoration.mark({ class: "cm-draftly-quote-mark" }),
+  // Horizontal rule
+  hr: Decoration.mark({ class: "cm-draftly-hr" })
+};
+var lineDecorations = {
+  blockquote: Decoration.line({ class: "cm-draftly-line-blockquote" }),
+  "code-block": Decoration.line({ class: "cm-draftly-line-code" }),
+  hr: Decoration.line({ class: "cm-draftly-line-hr" })
+};
+var DraftlyPluginsFacet = Facet.define({
+  combine: (values) => values.flat()
+});
+var draftlyOnNodesChangeFacet = Facet.define({
+  combine: (values) => values.find((v) => v !== void 0)
+});
+function buildDecorations(view, plugins = []) {
+  const builder = new RangeSetBuilder();
+  const decorations = [];
+  const tree = syntaxTree(view.state);
+  tree.iterate({
+    enter: (node) => {
+      const { from, to, name } = node;
+      const cursorInNode = selectionOverlapsRange(view, from, to);
+      if (name === "InlineCode") {
+        decorations.push(markDecorations["inline-code"].range(from, to));
+        if (!cursorInNode) {
+          const marks = node.node.getChildren("CodeMark");
+          for (const mark of marks) {
+            decorations.push(markDecorations["code-mark"].range(mark.from, mark.to));
+          }
+        }
+      }
+      if (name === "Link") {
+        decorations.push(markDecorations.link.range(from, to));
+        const url = node.node.getChild("URL");
+        if (url) {
+          decorations.push(markDecorations.url.range(url.from, url.to));
+        }
+      }
+      if (name === "Image") {
+        decorations.push(markDecorations.image.range(from, to));
+      }
+      if (name === "FencedCode") {
+        decorations.push(markDecorations["fenced-code"].range(from, to));
+        const startLine = view.state.doc.lineAt(from);
+        const endLine = view.state.doc.lineAt(to);
+        for (let i = startLine.number; i <= endLine.number; i++) {
+          const line = view.state.doc.line(i);
+          decorations.push(lineDecorations["code-block"].range(line.from));
+        }
+        const codeInfo = node.node.getChild("CodeInfo");
+        if (codeInfo) {
+          decorations.push(markDecorations["code-info"].range(codeInfo.from, codeInfo.to));
+        }
+        const codeMarks = node.node.getChildren("CodeMark");
+        for (const mark of codeMarks) {
+          decorations.push(markDecorations["code-mark"].range(mark.from, mark.to));
+        }
+      }
+      if (name === "Blockquote") {
+        decorations.push(markDecorations.blockquote.range(from, to));
+        const startLine = view.state.doc.lineAt(from);
+        const endLine = view.state.doc.lineAt(to);
+        for (let i = startLine.number; i <= endLine.number; i++) {
+          const line = view.state.doc.line(i);
+          decorations.push(lineDecorations.blockquote.range(line.from));
+        }
+        const quoteMarks = node.node.getChildren("QuoteMark");
+        for (const mark of quoteMarks) {
+          decorations.push(markDecorations["quote-mark"].range(mark.from, mark.to));
+        }
+      }
+      if (name === "HorizontalRule") {
+        const line = view.state.doc.lineAt(from);
+        decorations.push(lineDecorations.hr.range(line.from));
+        decorations.push(markDecorations.hr.range(from, to));
+      }
+    }
+  });
+  if (plugins.length > 0) {
+    const ctx = {
+      view,
+      decorations,
+      selectionOverlapsRange: (from, to) => selectionOverlapsRange(view, from, to),
+      cursorInRange: (from, to) => cursorInRange(view, from, to)
+    };
+    const sortedPlugins = [...plugins].sort((a, b) => a.decorationPriority - b.decorationPriority);
+    for (const plugin of sortedPlugins) {
+      plugin.buildDecorations(ctx);
+    }
+  }
+  decorations.sort((a, b) => a.from - b.from || a.value.startSide - b.value.startSide);
+  for (const decoration of decorations) {
+    builder.add(decoration.from, decoration.to, decoration.value);
+  }
+  return builder.finish();
+}
+var draftlyViewPluginClass = class {
+  decorations;
+  plugins;
+  onNodesChange;
+  constructor(view) {
+    this.plugins = view.state.facet(DraftlyPluginsFacet);
+    this.onNodesChange = view.state.facet(draftlyOnNodesChangeFacet);
+    this.decorations = buildDecorations(view, this.plugins);
+    for (const plugin of this.plugins) {
+      plugin.onViewReady(view);
+    }
+    if (this.onNodesChange) {
+      this.onNodesChange(this.buildNodes(view));
+    }
+  }
+  update(update) {
+    this.plugins = update.view.state.facet(DraftlyPluginsFacet);
+    this.onNodesChange = update.view.state.facet(draftlyOnNodesChangeFacet);
+    for (const plugin of this.plugins) {
+      plugin.onViewUpdate(update);
+    }
+    if (update.docChanged || update.selectionSet || update.viewportChanged) {
+      this.decorations = buildDecorations(update.view, this.plugins);
+      if (this.onNodesChange) {
+        this.onNodesChange(this.buildNodes(update.view));
+      }
+    }
+  }
+  buildNodes(view) {
+    const tree = syntaxTree(view.state);
+    const roots = [];
+    const stack = [];
+    tree.iterate({
+      enter: (nodeRef) => {
+        const node = {
+          from: nodeRef.from,
+          to: nodeRef.to,
+          name: nodeRef.name,
+          children: [],
+          isSelected: selectionOverlapsRange(view, nodeRef.from, nodeRef.to)
+        };
+        if (stack.length > 0) {
+          stack[stack.length - 1].children.push(node);
+        } else {
+          roots.push(node);
+        }
+        stack.push(node);
+      },
+      leave: () => {
+        stack.pop();
+      }
+    });
+    return roots;
+  }
+};
+var draftlyViewPlugin = ViewPlugin.fromClass(draftlyViewPluginClass, {
+  decorations: (v) => v.decorations,
+  provide: () => [syntaxHighlighting(highlightStyle)]
+});
+var draftlyEditorClass = EditorView.editorAttributes.of({ class: "cm-draftly-enabled" });
+function createDraftlyViewExtension(plugins = [], onNodesChange) {
+  return [
+    DraftlyPluginsFacet.of(plugins),
+    draftlyOnNodesChangeFacet.of(onNodesChange),
+    draftlyViewPlugin,
+    draftlyBaseTheme,
+    draftlyEditorClass
+  ];
+}
+
+// src/plugin.ts
+var DraftlyPlugin = class {
+  /** Plugin dependencies - names of required plugins */
+  dependencies = [];
+  /** Private configuration storage */
+  _config = {};
+  /** Protected context - accessible to subclasses */
+  _context = null;
+  /** Get plugin configuration */
+  get config() {
+    return this._config;
+  }
+  /** Set plugin configuration */
+  set config(value) {
+    this._config = value;
+  }
+  /** Get plugin context */
+  get context() {
+    return this._context;
+  }
+  // ============================================
+  // EXTENSION METHODS (overridable by subclasses)
+  // ============================================
+  /**
+   * Return CodeMirror extensions for this plugin
+   * Override to provide custom extensions
+   */
+  getExtensions() {
+    return [];
+  }
+  /**
+   * Return markdown parser extensions
+   * Override to extend markdown parsing
+   */
+  getMarkdownConfig() {
+    return null;
+  }
+  /**
+   * Return keybindings for this plugin
+   * Override to add custom keyboard shortcuts
+   */
+  getKeymap() {
+    return [];
+  }
+  // ============================================
+  // DECORATION METHODS (overridable by subclasses)
+  // ============================================
+  /**
+   * Decoration priority (higher = applied later)
+   * Override to customize priority. Default: 100
+   */
+  get decorationPriority() {
+    return 100;
+  }
+  /**
+   * Build decorations for the current view state
+   * Override to contribute decorations to the editor
+   *
+   * @param ctx - Decoration context with view and decoration array
+   */
+  buildDecorations(_ctx) {
+  }
+  // ============================================
+  // LIFECYCLE HOOKS (overridable by subclasses)
+  // ============================================
+  /**
+   * Called when plugin is registered with draftly
+   * Override to perform initialization
+   *
+   * @param context - Plugin context with configuration
+   */
+  onRegister(context) {
+    this._context = context;
+  }
+  /**
+   * Called when plugin is unregistered
+   * Override to perform cleanup
+   */
+  onUnregister() {
+    this._context = null;
+  }
+  /**
+   * Called when EditorView is created and ready
+   * Override to perform view-specific initialization
+   *
+   * @param view - The EditorView instance
+   */
+  onViewReady(_view) {
+  }
+  /**
+   * Called on view updates (document changes, selection changes, etc.)
+   * Override to react to editor changes
+   *
+   * @param update - The ViewUpdate with change information
+   */
+  onViewUpdate(_update) {
+  }
+  // ============================================
+  // ACCESSIBILITY METHODS (overridable by subclasses)
+  // ============================================
+  /**
+   * Return ARIA attributes to add to the editor
+   * Override to improve accessibility
+   */
+  getAriaAttributes() {
+    return {};
+  }
+  // ============================================
+  // VIEW CONTRIBUTIONS (overridable by subclasses)
+  // ============================================
+  /**
+   * Return widget types this plugin provides
+   * Override to contribute custom widgets
+   */
+  getWidgets() {
+    return [];
+  }
+  // ============================================
+  // PROTECTED UTILITIES (for subclasses)
+  // ============================================
+  /**
+   * Helper to get current editor state
+   * @param view - The EditorView instance
+   */
+  getState(view) {
+    return view.state;
+  }
+  /**
+   * Helper to get current document
+   * @param view - The EditorView instance
+   */
+  getDocument(view) {
+    return view.state.doc;
+  }
+};
+var DecorationPlugin = class extends DraftlyPlugin {
+  /**
+   * Decoration priority - lower than default for decoration plugins
+   * Override to customize
+   */
+  get decorationPriority() {
+    return 50;
+  }
+};
+var SyntaxPlugin = class extends DraftlyPlugin {
+};
+
+// src/plugins/heading-plugin.ts
+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" }),
+  "heading-mark": Decoration.mark({ class: "cm-draftly-heading-mark" })
+};
+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";
+  /**
+   * Higher priority to ensure headings are styled first
+   */
+  get decorationPriority() {
+    return 10;
+  }
+  /**
+   * Get the extensions for this plugin
+   */
+  getExtensions() {
+    return [headingTheme];
+  }
+  /**
+   * 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 + 1));
+        const cursorInNode = ctx.selectionOverlapsRange(from, to);
+        if (!cursorInNode) {
+          const headingMark = node.node.getChild("HeaderMark");
+          if (headingMark) {
+            decorations.push(headingMarkDecorations["heading-mark"].range(headingMark.from, headingMark.to + 1));
+          }
+        }
+      }
+    });
+  }
+};
+var headingTheme = EditorView.theme({
+  ".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"
+  },
+  // Heading mark (# symbols)
+  ".cm-draftly-heading-mark": {
+    display: "none"
+  }
+});
+var INLINE_TYPES = {
+  Emphasis: "emphasis",
+  StrongEmphasis: "strong",
+  Strikethrough: "strikethrough",
+  Subscript: "subscript",
+  Superscript: "superscript"
+};
+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" }),
+  // Markers (* _ ~~ ^ ~)
+  "inline-mark": Decoration.mark({ class: "cm-draftly-inline-mark" })
+};
+var InlinePlugin = class extends DecorationPlugin {
+  name = "inline";
+  version = "1.0.0";
+  /**
+   * Moderate priority for inline styling
+   */
+  get decorationPriority() {
+    return 20;
+  }
+  /**
+   * Get the extensions for this plugin (theme)
+   */
+  getExtensions() {
+    return [inlineTheme];
+  }
+  /**
+   * 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"];
+      default:
+        return [];
+    }
+  }
+};
+var inlineTheme = EditorView.theme({
+  // 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"
+  },
+  // Inline markers (* _ ~~ ^ ~) - hidden when not focused
+  ".cm-draftly-inline-mark": {
+    display: "none"
+  }
+});
+var listMarkDecorations = {
+  "list-mark-ul": Decoration.mark({ class: "cm-draftly-list-mark-ul" }),
+  "list-mark-ol": Decoration.mark({ class: "cm-draftly-list-mark-ol" }),
+  "task-marker": Decoration.mark({ class: "cm-draftly-task-marker" })
+};
+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();
+      const pos = view.posAtDOM(wrap);
+      const line = view.state.doc.lineAt(pos);
+      const match = line.text.match(/^(\s*[-*+]\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 }
+        });
+      }
+    });
+    wrap.appendChild(checkbox);
+    return wrap;
+  }
+  ignoreEvent() {
+    return false;
+  }
+};
+var ListPlugin = class extends DecorationPlugin {
+  name = "list";
+  version = "1.0.0";
+  /**
+   * Moderate priority
+   */
+  get decorationPriority() {
+    return 20;
+  }
+  /**
+   * Get the extensions for this plugin (theme)
+   */
+  getExtensions() {
+    return [listTheme];
+  }
+  /**
+   * Build list 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 line = view.state.doc.lineAt(from);
+        const cursorInLine = ctx.cursorInRange(line.from, line.to);
+        if (name === "ListMark") {
+          const parent = node.node.parent;
+          const grandparent = parent?.parent;
+          const listType = grandparent?.name;
+          if (!cursorInLine) {
+            if (listType === "OrderedList") {
+              decorations.push(listMarkDecorations["list-mark-ol"].range(from, to));
+            } else {
+              decorations.push(listMarkDecorations["list-mark-ul"].range(from, to));
+            }
+          }
+        }
+        if (name === "TaskMarker") {
+          const text = view.state.sliceDoc(from, to);
+          const isChecked = text.includes("x") || text.includes("X");
+          if (cursorInLine) {
+            decorations.push(listMarkDecorations["task-marker"].range(from, to));
+          } else {
+            decorations.push(
+              Decoration.replace({
+                widget: new TaskCheckboxWidget(isChecked)
+              }).range(from, to)
+            );
+          }
+        }
+      }
+    });
+  }
+};
+var listTheme = EditorView.theme({
+  // Unordered List markers (*, -, +)
+  ".cm-draftly-list-mark-ul": {
+    position: "relative"
+  },
+  ".cm-draftly-list-mark-ul > span": {
+    visibility: "hidden"
+  },
+  ".cm-draftly-list-mark-ul::after": {
+    content: '"\u2022"',
+    position: "absolute",
+    left: "50%",
+    top: "50%",
+    transform: "translate(-50%, -50%)",
+    color: "var(--color-link)",
+    fontWeight: "bold",
+    pointerEvents: "none"
+  },
+  // Ordered List markers (1., 2.)
+  ".cm-draftly-list-mark-ol": {
+    color: "var(--draftly-highlight, #a4a4a4)",
+    fontFamily: "monospace",
+    marginRight: "2px"
+  },
+  // Task markers text ([ ] or [x]) - visible only when editing
+  ".cm-draftly-task-marker": {
+    color: "var(--draftly-highlight, #a4a4a4)",
+    fontFamily: "monospace"
+  },
+  // Task Checkbox Widget
+  ".cm-draftly-task-checkbox": {
+    display: "inline-flex",
+    verticalAlign: "middle",
+    marginRight: "0.3em",
+    cursor: "pointer",
+    userSelect: "none",
+    alignItems: "center",
+    height: "1.2em"
+  },
+  ".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"
+  },
+  ".cm-draftly-task-checkbox.checked input::after": {
+    content: '"\u2713"',
+    position: "absolute",
+    left: "1px",
+    top: "-3px"
+  }
+});
+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";
+  get decorationPriority() {
+    return 30;
+  }
+  getExtensions() {
+    return [htmlTheme];
+  }
+  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 cursorInRange2 = ctx.cursorInRange(elem.from, elem.to);
+      if (cursorInRange2) {
+        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 cursorInRange2 = ctx.cursorInRange(nodeLineStart.from, nodeLineEnd.to);
+      if (cursorInRange2) {
+        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 htmlTheme = EditorView.theme({
+  ".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"
+  }
+});
+
+// src/plugins/plugins.ts
+var defaultPlugins = [new HeadingPlugin(), new InlinePlugin(), new ListPlugin(), new HTMLPlugin()];
+
+// src/draftly.ts
+function draftly(config = {}) {
+  const {
+    plugins = [],
+    extensions = [],
+    keymap: configKeymap = [],
+    disableViewPlugin = false,
+    defaultKeybindings = true,
+    history: configHistory = true,
+    indentWithTab: configIndentWithTab = true,
+    drawSelection: configDrawSelection = true,
+    highlightActiveLine: configHighlightActiveLine = true,
+    rectangularSelection: configRectangularSelection = true,
+    lineWrapping: configLineWrapping = true,
+    onNodesChange: configOnNodesChange = void 0
+  } = config;
+  const allPlugins = [...defaultPlugins, ...plugins];
+  const pluginExtensions = [];
+  const pluginKeymaps = [];
+  const markdownExtensions = [];
+  const pluginContext = { config };
+  for (const plugin of allPlugins) {
+    plugin.onRegister(pluginContext);
+    const exts = plugin.getExtensions();
+    if (exts.length > 0) {
+      pluginExtensions.push(...exts);
+    }
+    const keys = plugin.getKeymap();
+    if (keys.length > 0) {
+      pluginKeymaps.push(...keys);
+    }
+    const md = plugin.getMarkdownConfig();
+    if (md) {
+      markdownExtensions.push(md);
+    }
+  }
+  if (config.markdown) {
+    markdownExtensions.push(...config.markdown);
+  }
+  const markdownSupport = markdown({
+    base: markdownLanguage,
+    codeLanguages: languages,
+    extensions: markdownExtensions,
+    addKeymap: true,
+    completeHTMLTags: true
+  });
+  const baseExtensions = [
+    ...defaultKeybindings ? [keymap.of(defaultKeymap)] : [],
+    ...configHistory ? [history(), keymap.of(historyKeymap)] : [],
+    ...configIndentWithTab ? [indentOnInput(), keymap.of([indentWithTab])] : [],
+    ...configDrawSelection ? [drawSelection()] : [],
+    ...configHighlightActiveLine && disableViewPlugin ? [highlightActiveLine()] : [],
+    ...configRectangularSelection ? [rectangularSelection()] : []
+  ];
+  const draftlyExtensions = [];
+  if (!disableViewPlugin) draftlyExtensions.push(createDraftlyViewExtension(allPlugins, configOnNodesChange));
+  if (!disableViewPlugin || configLineWrapping) draftlyExtensions.push(EditorView.lineWrapping);
+  const composedExtensions = [
+    // Core markdown support (highest priority)
+    Prec.high(markdownSupport),
+    Prec.high(keymap.of(markdownKeymap)),
+    // Core CodeMirror extensions
+    ...baseExtensions,
+    // draftly view plugin for rich rendering
+    ...draftlyExtensions,
+    // Plugin extensions & keymaps
+    ...pluginExtensions,
+    pluginKeymaps.length > 0 ? keymap.of(pluginKeymaps) : [],
+    // Config keymaps & extensions
+    configKeymap.length > 0 ? keymap.of(configKeymap) : [],
+    ...extensions
+  ];
+  return composedExtensions;
+}
+
+// src/index.ts
+var index_default = draftly;
+
+export { DecorationPlugin, DraftlyPlugin, DraftlyPluginsFacet, SyntaxPlugin, createDraftlyViewExtension, index_default as default, draftly, draftlyOnNodesChangeFacet, draftlyViewPlugin };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map