@railway/inkwell 0.1.4 → 1.0.0

package/dist/index.js

@@ -1,8 +1,7 @@
-import { withYjs, withCursors, withYHistory, YjsEditor, CursorEditor, relativePositionToSlatePoint } from '@slate-yjs/core';
-import { useMemo, useRef, useEffect, useState, useCallback, Fragment, createElement } from 'react';
-import { createEditor, Range, Transforms, Editor, Node, Element, Path } from 'slate';
-import { withHistory } from 'slate-history';
-import { withReact, ReactEditor, Slate, Editable } from 'slate-react';
+import { forwardRef, useMemo, useRef, useState, useCallback, useEffect, useImperativeHandle, useLayoutEffect, Fragment, useId, createElement } from 'react';
+import { createEditor, Transforms, Editor, Node, Range, Element, Path } from 'slate';
+import { withHistory, HistoryEditor } from 'slate-history';
+import { withReact, ReactEditor, Slate, Editable, useSelected } from 'slate-react';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import rehypeHighlight from 'rehype-highlight';
 import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
@@ -12,7 +11,7 @@ import remarkParse from 'remark-parse';
 import remarkRehype from 'remark-rehype';
 import { unified } from 'unified';
 import { toString } from 'mdast-util-to-string';
-import { visit } from 'unist-util-visit';
+import { visit, SKIP } from 'unist-util-visit';
 import rehypeParse from 'rehype-parse';
 import rehypeRemark from 'rehype-remark';
 import remarkStringify from 'remark-stringify';
@@ -103,9 +102,12 @@ function BubbleMenuWidget({
     }
     const rect = sel.getRangeAt(0).getBoundingClientRect();
     const editorRect = editorRef.current.getBoundingClientRect();
+    const topInEditor = rect.top - editorRect.top;
+    const hasRoomAbove = topInEditor >= 48;
     setPosition({
-      top: rect.top - editorRect.top,
-      left: rect.left - editorRect.left + rect.width / 2
+      top: hasRoomAbove ? topInEditor : rect.bottom - editorRect.top,
+      left: rect.left - editorRect.left + rect.width / 2,
+      placement: hasRoomAbove ? "above" : "below"
     });
   }, [editorRef]);
   useEffect(() => {
@@ -129,9 +131,9 @@ function BubbleMenuWidget({
         position: "absolute",
         top: position.top,
         left: position.left,
-        transform: "translateX(-50%) translateY(-100%)",
-        marginTop: -8,
-        zIndex: 1e3
+        transform: position.placement === "above" ? "translateX(-50%) translateY(-100%)" : "translateX(-50%)",
+        marginTop: position.placement === "above" ? -8 : 8,
+        zIndex: 1100
       },
       onMouseDown: (e) => e.preventDefault(),
       children: /* @__PURE__ */ jsx("div", { className: cls("inner"), children: items.map((item) => /* @__PURE__ */ jsx(item.render, { wrapSelection }, item.key)) })
@@ -202,17 +204,13 @@ function remarkNoTables() {
 
 // src/lib/render-html.ts
 var processorCache = /* @__PURE__ */ new Map();
-function getProcessor(rehypePlugins) {
-  const key = rehypePlugins ? JSON.stringify(
-    rehypePlugins.map((p) => Array.isArray(p) ? p[1] : "default")
-  ) : "default";
-  const cached = processorCache.get(key);
-  if (cached) return cached;
+function createProcessor(rehypePlugins) {
   const processor2 = unified().use(remarkParse).use(remarkGfm).use(remarkNoTables).use(remarkFlattenBlockquotes).use(remarkRehype);
   const plugins = rehypePlugins ?? [[rehypeHighlight, { detect: true }]];
   for (const plugin of plugins) {
     if (Array.isArray(plugin)) {
-      processor2.use(plugin[0], plugin[1]);
+      const [rehypePlugin, ...options] = plugin;
+      processor2.use(rehypePlugin, ...options);
     } else {
       processor2.use(plugin);
     }
@@ -227,7 +225,14 @@ function getProcessor(rehypePlugins) {
     }
   });
   processor2.use(rehypeStringify);
-  processorCache.set(key, processor2);
+  return processor2;
+}
+function getProcessor(rehypePlugins) {
+  if (rehypePlugins) return createProcessor(rehypePlugins);
+  const cached = processorCache.get("default");
+  if (cached) return cached;
+  const processor2 = createProcessor();
+  processorCache.set("default", processor2);
   return processor2;
 }
 function escapeBareBq(markdown) {
@@ -246,7 +251,7 @@ function computeDecorations(entry, editor, rehypePlugins) {
   if (element.type === "code-line") {
     return computeCodeDecorations(entry, editor, rehypePlugins);
   }
-  if (element.type === "paragraph" || element.type === "blockquote" || element.type === "list-item" || element.type === "heading") {
+  if (element.type === "paragraph" || element.type === "blockquote" || element.type === "heading") {
     return computeInlineDecorations(entry);
   }
   if (element.type === "code-fence") {
@@ -500,6 +505,37 @@ function parseHljsRanges(html, elementPath) {
   }
   return ranges;
 }
+
+// src/editor/slate/features.ts
+var DEFAULT_FEATURES = {
+  heading1: true,
+  heading2: true,
+  heading3: true,
+  heading4: true,
+  heading5: true,
+  heading6: true,
+  blockquotes: true,
+  codeBlocks: true,
+  images: true
+};
+var resolveFeatures = (features) => {
+  if (!features) return DEFAULT_FEATURES;
+  const maybeResolved = features;
+  const headings = features.headings;
+  const headingOverrides = typeof headings === "object" && headings !== null ? headings : null;
+  const allHeadings = typeof headings === "boolean" ? headings : true;
+  return {
+    heading1: maybeResolved.heading1 ?? headingOverrides?.h1 ?? allHeadings,
+    heading2: maybeResolved.heading2 ?? headingOverrides?.h2 ?? allHeadings,
+    heading3: maybeResolved.heading3 ?? headingOverrides?.h3 ?? allHeadings,
+    heading4: maybeResolved.heading4 ?? headingOverrides?.h4 ?? allHeadings,
+    heading5: maybeResolved.heading5 ?? headingOverrides?.h5 ?? allHeadings,
+    heading6: maybeResolved.heading6 ?? headingOverrides?.h6 ?? allHeadings,
+    blockquotes: features.blockquotes ?? true,
+    codeBlocks: features.codeBlocks ?? true,
+    images: features.images ?? true
+  };
+};
 function generateId() {
   return crypto.randomUUID();
 }
@@ -534,24 +570,21 @@ function withNodeId(editor) {
 
 // src/editor/slate/deserialize.ts
 var HEADING_RE = /^(#{1,6}) /;
-function deserialize(markdown, decorations) {
-  if (!markdown) {
+var IMAGE_RE = /^!\[([^\]]*)\]\(([^)\s]+)\)$/;
+function deserialize(content, features) {
+  if (!content) {
     return [{ type: "paragraph", id: generateId(), children: [{ text: "" }] }];
   }
+  const cfg = resolveFeatures(features);
   const headingEnabled = [
-    decorations?.heading1 ?? true,
-    decorations?.heading2 ?? true,
-    decorations?.heading3 ?? true,
-    decorations?.heading4 ?? true,
-    decorations?.heading5 ?? true,
-    decorations?.heading6 ?? true
+    cfg.heading1,
+    cfg.heading2,
+    cfg.heading3,
+    cfg.heading4,
+    cfg.heading5,
+    cfg.heading6
   ];
-  const cfg = {
-    lists: decorations?.lists ?? true,
-    blockquotes: decorations?.blockquotes ?? true,
-    codeBlocks: decorations?.codeBlocks ?? true
-  };
-  const lines = markdown.split("\n");
+  const lines = content.split("\n");
   const result = [];
   let inCodeBlock = false;
   let paragraphLines = [];
@@ -564,19 +597,22 @@ function deserialize(markdown, decorations) {
           type: "heading",
           id: generateId(),
           level: hMatch[1].length,
-          children: [{ text: line.slice(hMatch[0].length) }]
+          children: [{ text: line }]
         });
         continue;
       }
-      if (cfg.blockquotes && /^> /.test(line)) {
+      const imageMatch = cfg.images ? IMAGE_RE.exec(line) : null;
+      if (imageMatch) {
         result.push({
-          type: "blockquote",
+          type: "image",
           id: generateId(),
-          children: [{ text: line.slice(2) }]
+          alt: imageMatch[1],
+          url: imageMatch[2],
+          children: [{ text: line }]
         });
-      } else if (cfg.lists && /^[-*+] /.test(line)) {
+      } else if (cfg.blockquotes && /^> /.test(line)) {
         result.push({
-          type: "list-item",
+          type: "blockquote",
           id: generateId(),
           children: [{ text: line }]
         });
@@ -632,6 +668,41 @@ function deserialize(markdown, decorations) {
   flushParagraph();
   return result.length > 0 ? result : [{ type: "paragraph", id: generateId(), children: [{ text: "" }] }];
 }
+
+// src/lib/safe-url.ts
+function isSafeImageUrl(rawUrl) {
+  if (typeof rawUrl !== "string") return false;
+  if (Array.from(rawUrl).some((char) => {
+    const code = char.charCodeAt(0);
+    return code <= 31 || code === 127;
+  })) {
+    return false;
+  }
+  const url = rawUrl.trim();
+  if (url.length === 0) return false;
+  if (url.startsWith("/") || url.startsWith("./") || url.startsWith("../")) {
+    return true;
+  }
+  if (!/^[a-z][a-z0-9+.-]*:/i.test(url)) {
+    return true;
+  }
+  const lower = url.toLowerCase();
+  if (lower.startsWith("http://") || lower.startsWith("https://")) {
+    return true;
+  }
+  if (lower.startsWith("blob:")) {
+    return true;
+  }
+  if (/^data:image\/(png|jpeg|jpg|gif|webp);/.test(lower)) {
+    return true;
+  }
+  return false;
+}
+function sanitizeImageUrl(rawUrl) {
+  if (!rawUrl) return void 0;
+  const url = rawUrl.trim();
+  return isSafeImageUrl(rawUrl) ? url : void 0;
+}
 function RenderElement({
   attributes,
   children,
@@ -654,12 +725,39 @@ function RenderElement({
       return /* @__PURE__ */ jsx("p", { ...attributes, className: editorClass("code-line"), children });
     case "blockquote":
       return /* @__PURE__ */ jsx("p", { ...attributes, className: editorClass("blockquote"), children });
-    case "list-item":
-      return /* @__PURE__ */ jsx("p", { ...attributes, className: editorClass("list-item"), "data-list": true, children });
+    case "image":
+      return /* @__PURE__ */ jsx(ImageElement, { attributes, element: el, children });
     default:
       return /* @__PURE__ */ jsx("p", { ...attributes, children });
   }
 }
+function ImageElement({
+  attributes,
+  element,
+  children
+}) {
+  const selected = useSelected();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...attributes,
+      className: editorClass("image"),
+      "data-selected": selected || void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: sanitizeImageUrl(element.url),
+            alt: element.alt ?? "",
+            contentEditable: false,
+            draggable: false
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
 function RenderLeaf({ attributes, children, leaf }) {
   const l = leaf;
   if (l.boldMarker || l.italicMarker || l.strikeMarker) {
@@ -676,53 +774,19 @@ function RenderLeaf({ attributes, children, leaf }) {
   if (l.hljs) {
     content = /* @__PURE__ */ jsx("span", { className: l.hljs, children: content });
   }
-  if (l.remoteCursor) {
-    content = /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: editorClass("remote-cursor"),
-        style: { backgroundColor: `${l.remoteCursor}30` },
-        children: content
-      }
-    );
-  }
-  if (l.remoteCursorCaret) {
-    content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: editorClass("remote-caret"),
-          style: { borderColor: l.remoteCursor },
-          contentEditable: false
-        }
-      ),
-      content
-    ] });
-  }
   return /* @__PURE__ */ jsx("span", { ...attributes, children: content });
 }
+var LIST_LIKE_PARAGRAPH_RE = /^\s*(?:[-*+]|\d+\.)(?:\s|$)/;
+var isListLikeParagraph = (entry) => entry.type === "paragraph" && LIST_LIKE_PARAGRAPH_RE.test(entry.text);
 function serialize(nodes) {
   const entries = [];
   for (const node of nodes) {
     const text = Node.string(node);
     const type = node.type;
-    if (type === "heading") {
-      const level = node.level ?? 1;
-      const prefix = "#".repeat(level);
-      entries.push({ text: `${prefix} ${text}`, type });
-      continue;
-    }
-    if (type === "blockquote") {
-      const lines = text.split("\n").filter((l) => l.trim() !== "");
-      if (lines.length === 0) {
-        entries.push({ text: "> ", type });
-      } else {
-        const prefixed = lines.map((line) => {
-          const escaped = line.replace(/^(>+)/g, (m) => "\\>".repeat(m.length));
-          return "> " + escaped;
-        }).join("\n>\n");
-        entries.push({ text: prefixed, type });
-      }
+    if (type === "image" && !text) {
+      const url = node.url ?? "";
+      const alt = node.alt ?? "";
+      entries.push({ text: `![${alt}](${url})`, type });
       continue;
     }
     if (type === "paragraph" && !text.trim()) {
@@ -735,18 +799,44 @@ function serialize(nodes) {
   let result = "";
   for (let i = 0; i < entries.length; i++) {
     if (i > 0) {
-      const prev = entries[i - 1].type;
-      const curr = entries[i].type;
-      const sameGroup = prev === "blockquote" && curr === "blockquote" || prev === "list-item" && curr === "list-item" || codeTypes.has(prev) && codeTypes.has(curr);
+      const prev = entries[i - 1];
+      const curr = entries[i];
+      const sameGroup = prev.type === "blockquote" && curr.type === "blockquote" || codeTypes.has(prev.type) && codeTypes.has(curr.type) || isListLikeParagraph(prev) && isListLikeParagraph(curr);
       result += sameGroup ? "\n" : "\n\n";
     }
     result += entries[i].text;
   }
-  return result.replace(/\n{3,}/g, "\n\n").trim();
+  return result.replace(/\n{3,}/g, "\n\n").replace(/^\n+|\n+$/g, "");
 }
 var HEADING_RE2 = /^#{1,6}$/;
-function withMarkdown(editor, decorationsRef) {
-  const { insertBreak, insertData, insertText } = editor;
+var UNORDERED_LIST_CONTINUE_RE = /^(\s*)([-*+]) \S/;
+var UNORDERED_LIST_EMPTY_RE = /^(\s*)([-*+]) ?$/;
+var HEADING_LINE_RE = /^(#{1,6})\s/;
+function classifyLine(text, deco) {
+  const headingMatch = HEADING_LINE_RE.exec(text);
+  if (headingMatch) {
+    const level = headingMatch[1].length;
+    const key = `heading${level}`;
+    if (deco[key]) return { type: "heading", level };
+  }
+  if (deco.blockquotes && /^>\s/.test(text)) {
+    return { type: "blockquote" };
+  }
+  return { type: "paragraph" };
+}
+function withMarkdown(editor, featuresRef) {
+  const {
+    insertBreak,
+    insertData,
+    insertText,
+    isVoid,
+    normalizeNode,
+    setFragmentData
+  } = editor;
+  editor.isVoid = (element) => {
+    if (element.type === "image") return true;
+    return isVoid(element);
+  };
   editor.insertBreak = () => {
     const { selection } = editor;
     if (!selection) return insertBreak();
@@ -757,7 +847,7 @@ function withMarkdown(editor, decorationsRef) {
     const [node, path] = match;
     const element = node;
     const text = Node.string(node);
-    const deco = decorationsRef.current;
+    const deco = featuresRef.current;
     if (deco.codeBlocks && element.type === "paragraph" && text.startsWith("```")) {
       Transforms.setNodes(editor, {
         type: "code-fence"
@@ -794,7 +884,13 @@ function withMarkdown(editor, decorationsRef) {
     }
     if (element.type === "blockquote") {
       const text2 = Node.string(node);
-      if (!text2.trim()) {
+      if (/^>\s*$/.test(text2)) {
+        Transforms.delete(editor, {
+          at: {
+            anchor: Editor.start(editor, path),
+            focus: Editor.end(editor, path)
+          }
+        });
         Transforms.setNodes(editor, {
           type: "paragraph"
         });
@@ -812,22 +908,124 @@ function withMarkdown(editor, decorationsRef) {
       return;
     }
     if (element.type === "heading") {
-      if (!text.trim()) {
+      if (!text.trim() || /^#{1,6}\s*$/.test(text)) {
+        Transforms.delete(editor, {
+          at: {
+            anchor: Editor.start(editor, path),
+            focus: Editor.end(editor, path)
+          }
+        });
         Transforms.setNodes(editor, {
           type: "paragraph"
         });
         Transforms.unsetNodes(editor, "level");
         return;
       }
-      const newParagraph = {
+      if (!Range.isCollapsed(selection)) {
+        Transforms.delete(editor);
+      }
+      const point = editor.selection?.anchor;
+      const cursorOffset = point?.offset ?? text.length;
+      const endPoint = Editor.end(editor, path);
+      const tail = point ? Editor.string(editor, { anchor: point, focus: endPoint }) : "";
+      if (point && tail.length > 0) {
+        Transforms.delete(editor, { at: { anchor: point, focus: endPoint } });
+      }
+      const head = text.slice(0, cursorOffset);
+      const headClass = classifyLine(head, deco);
+      if (headClass.type === "heading" && headClass.level !== void 0) {
+        Transforms.setNodes(editor, {
+          type: "heading",
+          level: headClass.level
+        });
+      } else {
+        Transforms.setNodes(editor, {
+          type: headClass.type
+        });
+        Transforms.unsetNodes(editor, "level");
+      }
+      const tailClass = classifyLine(tail, deco);
+      const newNode = tailClass.type === "heading" && tailClass.level !== void 0 ? {
+        type: "heading",
+        id: generateId(),
+        level: tailClass.level,
+        children: [{ text: tail }]
+      } : {
         type: "paragraph",
         id: generateId(),
-        children: [{ text: "" }]
+        children: [{ text: tail }]
       };
-      Transforms.insertNodes(editor, newParagraph, { at: Path.next(path) });
+      Transforms.insertNodes(editor, newNode, { at: Path.next(path) });
       Transforms.select(editor, Editor.start(editor, Path.next(path)));
       return;
     }
+    if (element.type === "paragraph") {
+      const emptyMatch = UNORDERED_LIST_EMPTY_RE.exec(text);
+      if (emptyMatch) {
+        const [, indent, marker] = emptyMatch;
+        Transforms.delete(editor, {
+          at: {
+            anchor: Editor.start(editor, path),
+            focus: Editor.end(editor, path)
+          }
+        });
+        if (indent.length >= 2) {
+          editor.insertText(`${indent.slice(2)}${marker} `);
+        }
+        return;
+      }
+      const continueMatch = UNORDERED_LIST_CONTINUE_RE.exec(text);
+      if (continueMatch) {
+        const [, indent, marker] = continueMatch;
+        const prefix = `${indent}${marker} `;
+        if (!Range.isCollapsed(selection)) {
+          Transforms.delete(editor);
+        }
+        const point = editor.selection?.anchor;
+        const cursorOffset = point?.offset ?? text.length;
+        if (cursorOffset < prefix.length) {
+          const newParagraph2 = {
+            type: "paragraph",
+            id: generateId(),
+            children: [{ text: prefix }]
+          };
+          Transforms.insertNodes(editor, newParagraph2, {
+            at: Path.next(path)
+          });
+          Transforms.select(editor, Editor.end(editor, Path.next(path)));
+          return;
+        }
+        if (cursorOffset === prefix.length) {
+          const newParagraph2 = {
+            type: "paragraph",
+            id: generateId(),
+            children: [{ text: prefix }]
+          };
+          Transforms.insertNodes(editor, newParagraph2, { at: path });
+          Transforms.select(editor, {
+            path: [...Path.next(path), 0],
+            offset: prefix.length
+          });
+          return;
+        }
+        const endPoint = Editor.end(editor, path);
+        const tail = point ? Editor.string(editor, { anchor: point, focus: endPoint }) : "";
+        if (point && tail.length > 0) {
+          Transforms.delete(editor, { at: { anchor: point, focus: endPoint } });
+        }
+        const newParagraph = {
+          type: "paragraph",
+          id: generateId(),
+          children: [{ text: `${prefix}${tail}` }]
+        };
+        Transforms.insertNodes(editor, newParagraph, { at: Path.next(path) });
+        Transforms.select(editor, {
+          path: [...Path.next(path), 0],
+          offset: prefix.length
+        });
+        return;
+      }
+    }
     if (element.type === "code-line") {
       const newLine = {
         type: "code-line",
@@ -838,28 +1036,14 @@ function withMarkdown(editor, decorationsRef) {
       Transforms.select(editor, Editor.start(editor, Path.next(path)));
       return;
     }
-    if (element.type === "list-item") {
-      const text2 = Node.string(node);
-      if (text2.trim() === "-" || text2.trim() === "*" || text2.trim() === "+" || text2 === "- " || text2 === "* " || text2 === "+ ") {
-        Transforms.delete(editor, {
-          at: {
-            anchor: Editor.start(editor, path),
-            focus: Editor.end(editor, path)
-          }
-        });
-        Transforms.setNodes(editor, {
-          type: "paragraph"
-        });
-        return;
-      }
-      const marker = text2.match(/^([-*+] )/)?.[1] || "- ";
-      const newItem = {
-        type: "list-item",
+    if (element.type === "image") {
+      const newParagraph = {
+        type: "paragraph",
         id: generateId(),
-        children: [{ text: marker }]
+        children: [{ text: "" }]
       };
-      Transforms.insertNodes(editor, newItem, { at: Path.next(path) });
-      Transforms.select(editor, Editor.end(editor, Path.next(path)));
+      Transforms.insertNodes(editor, newParagraph, { at: Path.next(path) });
+      Transforms.select(editor, Editor.start(editor, Path.next(path)));
       return;
     }
     insertBreak();
@@ -878,7 +1062,7 @@ function withMarkdown(editor, decorationsRef) {
         const newBq = {
           type: "blockquote",
           id: generateId(),
-          children: [{ text: "" }]
+          children: [{ text: "> " }]
         };
         Transforms.insertNodes(editor, newBq, { at: Path.next(path) });
         Transforms.select(editor, Editor.start(editor, Path.next(path)));
@@ -907,7 +1091,7 @@ function withMarkdown(editor, decorationsRef) {
     const [node, path] = match;
     const element = node;
     const currentText = Node.string(node);
-    const deco = decorationsRef.current;
+    const deco = featuresRef.current;
     if (element.type === "code-line" && currentText === "```" && text !== "" && text !== "\n") {
       Transforms.setNodes(editor, {
         type: "code-fence"
@@ -922,12 +1106,7 @@ function withMarkdown(editor, decorationsRef) {
       return;
     }
     if (deco.blockquotes && element.type === "paragraph" && text === " " && currentText === ">") {
-      Transforms.delete(editor, {
-        at: {
-          anchor: Editor.start(editor, path),
-          focus: Editor.end(editor, path)
-        }
-      });
+      insertText(text);
       Transforms.setNodes(editor, {
         type: "blockquote"
       });
@@ -937,25 +1116,13 @@ function withMarkdown(editor, decorationsRef) {
     const headingKey = `heading${headingLevel}`;
     if (element.type === "paragraph" && text === " " && HEADING_RE2.test(currentText) && deco[headingKey]) {
       const level = headingLevel;
-      Transforms.delete(editor, {
-        at: {
-          anchor: Editor.start(editor, path),
-          focus: Editor.end(editor, path)
-        }
-      });
+      insertText(text);
       Transforms.setNodes(editor, {
         type: "heading",
         level
       });
       return;
     }
-    if (deco.lists && element.type === "paragraph" && text === " " && (currentText === "-" || currentText === "*" || currentText === "+")) {
-      insertText(text);
-      Transforms.setNodes(editor, {
-        type: "list-item"
-      });
-      return;
-    }
     if (element.type === "code-fence") {
       const prevIdx = path[0] - 1;
       if (prevIdx >= 0) {
@@ -979,494 +1146,1816 @@ function withMarkdown(editor, decorationsRef) {
   editor.insertData = (data) => {
     const text = data.getData("text/plain");
     if (text) {
-      const nodes = deserialize(text, decorationsRef.current);
+      const nodes = deserialize(text, featuresRef.current);
       Transforms.insertNodes(editor, nodes);
       return;
     }
     insertData(data);
   };
+  editor.setFragmentData = (data, originEvent) => {
+    try {
+      setFragmentData(data, originEvent);
+    } catch {
+    }
+    const fragment = editor.getFragment();
+    if (fragment.length > 0) {
+      data.setData("text/plain", serialize(fragment));
+    }
+  };
+  editor.normalizeNode = (entry) => {
+    const [node, path] = entry;
+    if (Element.isElement(node)) {
+      const element = node;
+      const textDriven = element.type === "paragraph" || element.type === "heading" || element.type === "blockquote";
+      if (textDriven) {
+        const text = Node.string(node);
+        const cls2 = classifyLine(text, featuresRef.current);
+        if (cls2.type === "heading" && cls2.level !== void 0) {
+          if (element.type !== "heading" || element.level !== cls2.level) {
+            Transforms.setNodes(
+              editor,
+              {
+                type: "heading",
+                level: cls2.level
+              },
+              { at: path }
+            );
+            return;
+          }
+        } else if (cls2.type === "blockquote") {
+          if (element.type !== "blockquote") {
+            Transforms.setNodes(
+              editor,
+              { type: "blockquote" },
+              { at: path }
+            );
+            if (element.level !== void 0) {
+              Transforms.unsetNodes(editor, "level", { at: path });
+            }
+            return;
+          }
+        } else {
+          if (element.type !== "paragraph") {
+            Transforms.setNodes(
+              editor,
+              { type: "paragraph" },
+              { at: path }
+            );
+            if (element.level !== void 0) {
+              Transforms.unsetNodes(editor, "level", { at: path });
+            }
+            return;
+          }
+        }
+      }
+    }
+    normalizeNode(entry);
+  };
   return editor;
 }
 var IS_SERVER = typeof window === "undefined";
-var DEFAULT_DECORATIONS = {
-  heading1: true,
-  heading2: true,
-  heading3: true,
-  heading4: true,
-  heading5: true,
-  heading6: true,
-  lists: true,
-  blockquotes: true,
-  codeBlocks: true
-};
-function InkwellEditor({
-  content,
-  onChange,
-  className,
-  placeholder,
-  plugins: userPlugins = [],
-  rehypePlugins,
-  decorations,
-  collaboration,
-  bubbleMenu = true
+var EMPTY_PLUGINS = [];
+function CharacterCount({
+  count,
+  limit,
+  over
 }) {
-  const resolvedDecorations = useMemo(
-    () => ({ ...DEFAULT_DECORATIONS, ...decorations }),
-    [decorations]
-  );
-  const decorationsRef = useRef(resolvedDecorations);
-  decorationsRef.current = resolvedDecorations;
-  const plugins = useMemo(() => {
-    const builtIn = bubbleMenu ? [createBubbleMenuPlugin()] : [];
-    return [...builtIn, ...userPlugins];
-  }, [userPlugins, bubbleMenu]);
-  const editor = useMemo(() => {
-    if (IS_SERVER) return null;
-    const base = withNodeId(withReact(createEditor()));
-    if (collaboration) {
-      const { sharedType, awareness, user } = collaboration;
-      const yjsEditor = withYjs(base, sharedType, { autoConnect: false });
-      const cursorEditor = withCursors(yjsEditor, awareness, {
-        data: user
-      });
-      const historyEditor = withYHistory(cursorEditor);
-      return withMarkdown(historyEditor, decorationsRef);
+  const label = `${count} of ${limit} characters${over ? ", over limit" : ""}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `inkwell-editor-character-count${over ? " inkwell-editor-character-count-over" : ""}`,
+      role: over ? "status" : void 0,
+      "aria-live": over ? "polite" : "off",
+      "aria-atomic": over ? true : void 0,
+      "aria-label": label,
+      children: [
+        count,
+        " / ",
+        limit
+      ]
     }
-    return withMarkdown(withHistory(base), decorationsRef);
-  }, []);
-  if (!editor) return null;
-  useEffect(() => {
-    if (!collaboration || !YjsEditor.isYjsEditor(editor)) return;
-    YjsEditor.connect(editor);
-    return () => {
-      YjsEditor.disconnect(editor);
-    };
-  }, [editor, collaboration]);
-  const [cursorVersion, setCursorVersion] = useState(0);
-  useEffect(() => {
-    if (!collaboration || !CursorEditor.isCursorEditor(editor)) return;
-    const handleChange2 = () => setCursorVersion((v) => v + 1);
-    CursorEditor.on(editor, "change", handleChange2);
-    return () => {
-      CursorEditor.off(editor, "change", handleChange2);
-    };
-  }, [editor, collaboration]);
-  const remoteCursorRanges = useMemo(() => {
-    if (!collaboration || !CursorEditor.isCursorEditor(editor)) return [];
-    const ranges = [];
-    const states = CursorEditor.cursorStates(editor);
-    for (const [, state] of Object.entries(states)) {
-      if (!state.relativeSelection) continue;
-      const data = state.data;
-      if (!data) continue;
-      try {
-        const { anchor, focus } = state.relativeSelection;
-        const anchorPoint = relativePositionToSlatePoint(
-          collaboration.sharedType,
-          editor,
-          anchor
-        );
-        const focusPoint = relativePositionToSlatePoint(
-          collaboration.sharedType,
-          editor,
-          focus
-        );
-        if (!anchorPoint || !focusPoint) continue;
-        const range = { anchor: anchorPoint, focus: focusPoint };
-        if (Range.isCollapsed(range)) {
-          ranges.push({
-            ...range,
-            remoteCursor: data.color,
-            remoteCursorCaret: true
-          });
-        } else {
-          ranges.push({
-            ...range,
-            remoteCursor: data.color
-          });
-        }
-      } catch {
+  );
+}
+var ORDERED_LIST_MARKER_RE = /^\s*\d+\.(?:\s|$)/;
+var UNORDERED_LIST_MARKER_RE = /^(\s*)([-*+])(?:\s|$)/;
+function replaceEditorChildren(editor, nodes, withoutSaving) {
+  const replace = () => {
+    Editor.withoutNormalizing(editor, () => {
+      for (let index = editor.children.length - 1; index >= 0; index--) {
+        Transforms.removeNodes(editor, { at: [index] });
       }
-    }
-    return ranges;
-  }, [editor, collaboration, cursorVersion]);
-  const initialValue = useMemo(
-    () => collaboration ? [
-      {
-        type: "paragraph",
-        id: generateId(),
-        children: [{ text: "" }]
+      Transforms.insertNodes(editor, nodes, { at: [0] });
+    });
+  };
+  if (HistoryEditor.isHistoryEditor(editor)) {
+    HistoryEditor.withoutSaving(editor, replace);
+    return;
+  }
+  replace();
+}
+var InkwellEditor = forwardRef(function InkwellEditor2(props, ref) {
+  if (IS_SERVER) return null;
+  return /* @__PURE__ */ jsx(InkwellEditorClient, { ...props, ref });
+});
+var InkwellEditorClient = forwardRef(
+  function InkwellEditorClient2({
+    content = "",
+    onChange,
+    onStateChange,
+    className,
+    classNames,
+    styles,
+    placeholder,
+    editable = true,
+    plugins: userPlugins = EMPTY_PLUGINS,
+    rehypePlugins,
+    features,
+    bubbleMenu = true,
+    characterLimit,
+    onCharacterCount,
+    submitOnEnter = false,
+    onSubmit
+  }, ref) {
+    const resolvedFeatures = useMemo(
+      () => resolveFeatures(features),
+      [features]
+    );
+    const featuresRef = useRef(resolvedFeatures);
+    featuresRef.current = resolvedFeatures;
+    const plugins = useMemo(() => {
+      const builtIn = bubbleMenu ? [createBubbleMenuPlugin()] : [];
+      const userNames = new Set(userPlugins.map((p) => p.name));
+      const survivingBuiltIns = builtIn.filter((p) => !userNames.has(p.name));
+      return [...survivingBuiltIns, ...userPlugins];
+    }, [userPlugins, bubbleMenu]);
+    const editor = useMemo(() => {
+      const base = withNodeId(withReact(createEditor()));
+      return withMarkdown(withHistory(base), featuresRef);
+    }, []);
+    const initialValue = useMemo(
+      () => deserialize(content, resolvedFeatures),
+      []
+    );
+    const lastContent = useRef(content);
+    const isInternalChange = useRef(false);
+    const suppressImperativeOnChange = useRef(false);
+    const [characterCount, setCharacterCount] = useState(
+      () => serialize(initialValue).length
+    );
+    const [isFocused, setIsFocused] = useState(false);
+    const focusStateFrameRef = useRef(null);
+    const [stateVersion, setStateVersion] = useState(0);
+    const bumpStateVersion = useCallback(() => {
+      setStateVersion((version) => version + 1);
+    }, []);
+    const scheduleFocusedState = useCallback((nextFocused) => {
+      if (focusStateFrameRef.current !== null) {
+        cancelAnimationFrame(focusStateFrameRef.current);
       }
-    ] : deserialize(content, resolvedDecorations),
-    []
-  );
-  const lastContent = useRef(content);
-  const isInternalChange = useRef(false);
-  useEffect(() => {
-    if (collaboration) return;
-    if (isInternalChange.current) {
-      isInternalChange.current = false;
-      return;
-    }
-    if (content === lastContent.current) return;
-    const newValue = deserialize(content, resolvedDecorations);
-    editor.children = newValue;
-    Transforms.select(editor, Editor.start(editor, []));
-    editor.onChange();
-    lastContent.current = content;
-  }, [content, editor, collaboration]);
-  const handleChange = useCallback(
-    (value) => {
-      const isAstChange = editor.operations.some(
-        (op) => op.type !== "set_selection"
-      );
-      if (!isAstChange) return;
-      if (!onChange) return;
-      const md = serialize(value);
-      if (collaboration) {
-        onChange(md);
-      } else {
-        if (md !== lastContent.current) {
-          lastContent.current = md;
-          isInternalChange.current = true;
-          onChange(md);
+      focusStateFrameRef.current = requestAnimationFrame(() => {
+        focusStateFrameRef.current = null;
+        setIsFocused(nextFocused);
+      });
+    }, []);
+    useEffect(
+      () => () => {
+        if (focusStateFrameRef.current !== null) {
+          cancelAnimationFrame(focusStateFrameRef.current);
         }
-      }
-    },
-    [editor, onChange, collaboration]
-  );
-  const decorate = useCallback(
-    (entry) => {
-      const ranges = computeDecorations(entry, editor, rehypePlugins);
-      if (remoteCursorRanges.length > 0) {
-        const [, path] = entry;
-        for (const cursorRange of remoteCursorRanges) {
-          try {
-            const intersection = Range.intersection(
-              cursorRange,
-              Editor.range(editor, path)
-            );
-            if (intersection) {
-              ranges.push({
-                ...intersection,
-                remoteCursor: cursorRange.remoteCursor,
-                remoteCursorCaret: cursorRange.remoteCursorCaret
-              });
-            }
-          } catch {
+      },
+      []
+    );
+    const updateCharacterCount = useCallback(() => {
+      const length = serialize(editor.children).length;
+      setCharacterCount(length);
+      onCharacterCount?.(length, characterLimit);
+      return length;
+    }, [editor, onCharacterCount, characterLimit]);
+    const serializeContent = useCallback(
+      () => serialize(editor.children),
+      [editor]
+    );
+    const pluginEditorRef = useRef(null);
+    const handleChange = useCallback(
+      (value) => {
+        const isAstChange = editor.operations.some(
+          (op) => op.type !== "set_selection"
+        );
+        if (!isAstChange) return;
+        updateCharacterCount();
+        bumpStateVersion();
+        const currentPluginEditor = pluginEditorRef.current;
+        if (currentPluginEditor) {
+          for (const plugin of plugins) {
+            plugin.onEditorChange?.(currentPluginEditor);
           }
         }
-      }
-      return ranges;
-    },
-    [editor, rehypePlugins, remoteCursorRanges]
-  );
-  const [activePlugin, setActivePlugin] = useState(null);
-  const pluginPositionRef = useRef({
-    top: 0,
-    left: 0
-  });
-  const wrapperRef = useRef(null);
-  const editorElRef = useRef(null);
-  const getCursorPosition = useCallback(() => {
-    try {
-      const domSelection = window.getSelection();
-      if (!domSelection || domSelection.rangeCount === 0)
-        return { top: 0, left: 0 };
-      const range = domSelection.getRangeAt(0);
-      let rect = range.getBoundingClientRect();
-      if (rect.width === 0 && rect.height === 0 && domSelection.anchorNode) {
-        const node = domSelection.anchorNode instanceof HTMLElement ? domSelection.anchorNode : domSelection.anchorNode.parentElement;
-        if (node) rect = node.getBoundingClientRect();
-      }
-      const wrapperEl = wrapperRef.current;
-      if (!wrapperEl) return { top: 0, left: 0 };
-      const wrapperRect = wrapperEl.getBoundingClientRect();
+        const nextContent = serialize(value);
+        if (nextContent !== lastContent.current) {
+          lastContent.current = nextContent;
+          isInternalChange.current = true;
+          onChange?.(nextContent);
+        }
+      },
+      [bumpStateVersion, editor, onChange, plugins, updateCharacterCount]
+    );
+    const overLimit = characterLimit !== void 0 && characterCount > characterLimit;
+    const hasCharacterLimit = characterLimit !== void 0;
+    const getEditorState = useCallback(() => {
+      const content2 = serializeContent();
       return {
-        top: rect.bottom - wrapperRect.top + 4,
-        left: rect.left - wrapperRect.left
+        content: content2,
+        isEmpty: content2.trim().length === 0,
+        isFocused,
+        isEditable: editable,
+        characterCount,
+        characterLimit,
+        overLimit
       };
-    } catch {
-      return { top: 0, left: 0 };
-    }
-  }, []);
-  const wrapSelection = useCallback(
-    (before, after) => {
-      const { selection } = editor;
-      if (!selection) return;
-      const selectedText = Editor.string(editor, selection);
-      if (selectedText.startsWith(before) && selectedText.endsWith(after) && selectedText.length >= before.length + after.length) {
-        Transforms.delete(editor);
-        Transforms.insertText(
-          editor,
-          selectedText.slice(before.length, -after.length || void 0)
-        );
+    }, [
+      characterCount,
+      characterLimit,
+      editable,
+      editor,
+      isFocused,
+      overLimit,
+      serializeContent
+    ]);
+    useEffect(() => {
+      if (isInternalChange.current) {
+        isInternalChange.current = false;
         return;
       }
-      const { anchor, focus } = selection;
-      const [start, end] = Range.isForward(selection) ? [anchor, focus] : [focus, anchor];
-      const beforeStart = {
-        path: start.path,
-        offset: Math.max(0, start.offset - before.length)
-      };
-      const afterEnd = { path: end.path, offset: end.offset + after.length };
-      try {
-        const textBefore = Editor.string(editor, {
-          anchor: beforeStart,
-          focus: start
+      if (content === lastContent.current) return;
+      const newValue = deserialize(content, resolvedFeatures);
+      replaceEditorChildren(editor, newValue);
+      Transforms.select(editor, Editor.start(editor, []));
+      lastContent.current = content;
+      updateCharacterCount();
+      bumpStateVersion();
+      editor.onChange();
+    }, [
+      bumpStateVersion,
+      content,
+      editor,
+      resolvedFeatures,
+      updateCharacterCount
+    ]);
+    useEffect(() => {
+      onStateChange?.(getEditorState());
+    }, [getEditorState, onStateChange, stateVersion]);
+    const decorate = useCallback(
+      (entry) => {
+        const ranges = computeDecorations(entry, editor, rehypePlugins);
+        return ranges;
+      },
+      [editor, rehypePlugins]
+    );
+    const [activePlugin, setActivePluginState] = useState(
+      null
+    );
+    const [activePluginQuery, setActivePluginQuery] = useState("");
+    const activePluginQueryRef = useRef("");
+    const activePluginRef = useRef(null);
+    activePluginRef.current = activePlugin;
+    const pluginPositionRef = useRef({
+      top: 0,
+      left: 0
+    });
+    const forwardedKeyListenersRef = useRef(/* @__PURE__ */ new Map());
+    const wrapperRef = useRef(null);
+    const editorElRef = useRef(null);
+    const subscribeForwardedKeyFor = useCallback(
+      (pluginName) => (listener) => {
+        const map = forwardedKeyListenersRef.current;
+        let listeners = map.get(pluginName);
+        if (!listeners) {
+          listeners = /* @__PURE__ */ new Set();
+          map.set(pluginName, listeners);
+        }
+        listeners.add(listener);
+        return () => {
+          listeners?.delete(listener);
+          if (listeners && listeners.size === 0) map.delete(pluginName);
+        };
+      },
+      []
+    );
+    const emitForwardedKey = useCallback((pluginName, key) => {
+      const listeners = forwardedKeyListenersRef.current.get(pluginName);
+      if (!listeners || listeners.size === 0) return;
+      for (const listener of listeners) listener(key);
+    }, []);
+    const canonicalizeEmptyEditor = useCallback(() => {
+      if (Node.string(editor).trim().length !== 0) return;
+      const onlyChild = editor.children[0];
+      const isCanonicalEmptyParagraph = editor.children.length === 1 && onlyChild?.type === "paragraph" && Node.string(onlyChild).length === 0;
+      if (isCanonicalEmptyParagraph) return;
+      HistoryEditor.withoutSaving(editor, () => {
+        Editor.withoutNormalizing(editor, () => {
+          for (let index = editor.children.length - 1; index >= 0; index--) {
+            Transforms.removeNodes(editor, { at: [index] });
+          }
+          Transforms.insertNodes(editor, {
+            type: "paragraph",
+            id: generateId(),
+            children: [{ text: "" }]
+          });
         });
-        const textAfter = Editor.string(editor, {
-          anchor: end,
-          focus: afterEnd
+      });
+    }, [editor]);
+    const selectEditor = useCallback(
+      (at = "end") => {
+        try {
+          Transforms.select(
+            editor,
+            at === "start" ? Editor.start(editor, []) : Editor.end(editor, [])
+          );
+        } catch {
+        }
+      },
+      [editor]
+    );
+    const focusEditor = useCallback(
+      (options) => {
+        ReactEditor.focus(editor);
+        if (options?.at) selectEditor(options.at);
+      },
+      [editor, selectEditor]
+    );
+    const replaceContent = useCallback(
+      (content2, options) => {
+        const select = options?.select ?? "start";
+        const newValue = deserialize(content2, resolvedFeatures);
+        suppressImperativeOnChange.current = true;
+        replaceEditorChildren(editor, newValue);
+        updateCharacterCount();
+        bumpStateVersion();
+        if (select !== "preserve") selectEditor(select);
+        const nextContent = serializeContent();
+        lastContent.current = nextContent;
+        editor.onChange();
+        queueMicrotask(() => {
+          suppressImperativeOnChange.current = false;
         });
-        if (textBefore === before && textAfter === after) {
-          const expandedRange = { anchor: beforeStart, focus: afterEnd };
-          Transforms.select(editor, expandedRange);
+      },
+      [
+        bumpStateVersion,
+        editor,
+        resolvedFeatures,
+        selectEditor,
+        serializeContent,
+        updateCharacterCount
+      ]
+    );
+    useImperativeHandle(
+      ref,
+      () => ({
+        getState: getEditorState,
+        focus: focusEditor,
+        clear: (options) => replaceContent("", options),
+        setContent: replaceContent,
+        insertContent: (content2) => {
+          focusEditor();
+          const nodes = deserialize(content2, resolvedFeatures);
+          Transforms.insertFragment(editor, nodes);
+        }
+      }),
+      [
+        editor,
+        focusEditor,
+        getEditorState,
+        replaceContent,
+        resolvedFeatures,
+        serializeContent
+      ]
+    );
+    const getCursorPosition = useCallback(() => {
+      try {
+        const domSelection = window.getSelection();
+        if (!domSelection || domSelection.rangeCount === 0)
+          return { top: 0, left: 0 };
+        const range = domSelection.getRangeAt(0);
+        let rect = range.getBoundingClientRect();
+        if (rect.width === 0 && rect.height === 0 && domSelection.anchorNode) {
+          const node = domSelection.anchorNode instanceof HTMLElement ? domSelection.anchorNode : domSelection.anchorNode.parentElement;
+          if (node) rect = node.getBoundingClientRect();
+        }
+        const wrapperEl = wrapperRef.current;
+        if (!wrapperEl) return { top: 0, left: 0 };
+        const wrapperRect = wrapperEl.getBoundingClientRect();
+        return {
+          top: rect.bottom - wrapperRect.top + 4,
+          left: rect.left - wrapperRect.left
+        };
+      } catch {
+        return { top: 0, left: 0 };
+      }
+    }, []);
+    const wrapSelection = useCallback(
+      (before, after) => {
+        const { selection } = editor;
+        if (!selection) return;
+        const selectedText = Editor.string(editor, selection);
+        if (selectedText.startsWith(before) && selectedText.endsWith(after) && selectedText.length >= before.length + after.length) {
           Transforms.delete(editor);
-          Transforms.insertText(editor, selectedText);
+          Transforms.insertText(
+            editor,
+            selectedText.slice(before.length, -after.length || void 0)
+          );
           return;
         }
+        const { anchor, focus } = selection;
+        const [start, end] = Range.isForward(selection) ? [anchor, focus] : [focus, anchor];
+        const beforeStart = {
+          path: start.path,
+          offset: Math.max(0, start.offset - before.length)
+        };
+        const afterEnd = { path: end.path, offset: end.offset + after.length };
+        try {
+          const textBefore = Editor.string(editor, {
+            anchor: beforeStart,
+            focus: start
+          });
+          const textAfter = Editor.string(editor, {
+            anchor: end,
+            focus: afterEnd
+          });
+          if (textBefore === before && textAfter === after) {
+            const expandedRange = { anchor: beforeStart, focus: afterEnd };
+            Transforms.select(editor, expandedRange);
+            Transforms.delete(editor);
+            Transforms.insertText(editor, selectedText);
+            return;
+          }
+        } catch {
+        }
+        Transforms.delete(editor);
+        Transforms.insertText(editor, `${before}${selectedText}${after}`);
+      },
+      [editor]
+    );
+    const insertTextAtCursor = useCallback(
+      (text) => {
+        ReactEditor.focus(editor);
+        const nodes = deserialize(text, resolvedFeatures);
+        Transforms.insertFragment(editor, nodes);
+      },
+      [editor, resolvedFeatures]
+    );
+    const getCurrentBlockPath = useCallback(() => {
+      const { selection } = editor;
+      if (!selection || !Range.isCollapsed(selection)) return null;
+      return selection.anchor.path.slice(0, 1);
+    }, [editor]);
+    const getRangeContent = useCallback(
+      (range) => {
+        try {
+          return Editor.string(editor, range);
+        } catch {
+          return null;
+        }
+      },
+      [editor]
+    );
+    const getCurrentBlockContent = useCallback(() => {
+      const path = getCurrentBlockPath();
+      if (!path) return null;
+      try {
+        return Editor.string(editor, path);
       } catch {
+        return null;
       }
-      Transforms.delete(editor);
-      Transforms.insertText(editor, `${before}${selectedText}${after}`);
-    },
-    [editor]
-  );
-  const insertTextAtCursor = useCallback(
-    (text) => {
+    }, [editor, getCurrentBlockPath]);
+    const getCurrentBlockContentBeforeCursor = useCallback(() => {
+      const { selection } = editor;
+      if (!selection || !Range.isCollapsed(selection)) return null;
+      const anchor = selection.anchor;
+      return getRangeContent({
+        anchor: { path: anchor.path, offset: 0 },
+        focus: anchor
+      });
+    }, [editor, getRangeContent]);
+    const replaceCurrentBlockContent = useCallback(
+      (nextContent) => {
+        const path = getCurrentBlockPath();
+        if (!path) return;
+        const start = Editor.start(editor, path);
+        const end = Editor.end(editor, path);
+        Transforms.select(editor, { anchor: start, focus: end });
+        Transforms.insertText(editor, nextContent);
+        Transforms.select(editor, Editor.end(editor, path));
+      },
+      [editor, getCurrentBlockPath]
+    );
+    const clearCurrentBlock = useCallback(() => {
+      const path = getCurrentBlockPath();
+      if (!path) return;
+      try {
+        const start = Editor.start(editor, path);
+        const end = Editor.end(editor, path);
+        Transforms.select(editor, { anchor: start, focus: end });
+        Transforms.delete(editor);
+        editor.onChange();
+      } catch {
+      }
+    }, [editor, getCurrentBlockPath]);
+    const insertImage = useCallback(
+      (image) => {
+        const id = image.id ?? generateId();
+        Transforms.insertNodes(editor, {
+          type: "image",
+          id,
+          url: image.url,
+          alt: image.alt,
+          children: [{ text: "" }]
+        });
+        return id;
+      },
+      [editor]
+    );
+    const updateImage = useCallback(
+      (id, image) => {
+        for (const [node, path] of Node.nodes(editor)) {
+          if (Editor.isEditor(node) || !("type" in node) || node.type !== "image" || node.id !== id) {
+            continue;
+          }
+          Transforms.setNodes(editor, image, { at: path });
+          break;
+        }
+      },
+      [editor]
+    );
+    const removeImage = useCallback(
+      (id) => {
+        for (const [node, path] of Node.nodes(editor)) {
+          if (Editor.isEditor(node) || !("type" in node) || node.type !== "image" || node.id !== id) {
+            continue;
+          }
+          Transforms.removeNodes(editor, { at: path });
+          break;
+        }
+      },
+      [editor]
+    );
+    const pluginEditorImplRef = useRef(null);
+    const getPluginEditorImpl = useCallback(() => {
+      const impl = pluginEditorImplRef.current;
+      if (!impl) throw new Error("Inkwell plugin editor is not ready");
+      return impl;
+    }, []);
+    const pluginEditor = useMemo(
+      () => ({
+        getState: () => getPluginEditorImpl().getState(),
+        isEmpty: () => getPluginEditorImpl().isEmpty(),
+        focus: (options) => getPluginEditorImpl().focus(options),
+        clear: (options) => getPluginEditorImpl().clear(options),
+        setContent: (content2, options) => getPluginEditorImpl().setContent(content2, options),
+        insertContent: (content2) => getPluginEditorImpl().insertContent(content2),
+        getContentBeforeCursor: () => getPluginEditorImpl().getContentBeforeCursor(),
+        getCurrentBlockContent: () => getPluginEditorImpl().getCurrentBlockContent(),
+        getCurrentBlockContentBeforeCursor: () => getPluginEditorImpl().getCurrentBlockContentBeforeCursor(),
+        replaceCurrentBlockContent: (content2) => getPluginEditorImpl().replaceCurrentBlockContent(content2),
+        clearCurrentBlock: () => getPluginEditorImpl().clearCurrentBlock(),
+        wrapSelection: (before, after) => getPluginEditorImpl().wrapSelection(before, after),
+        insertImage: (image) => getPluginEditorImpl().insertImage(image),
+        updateImage: (id, image) => getPluginEditorImpl().updateImage(id, image),
+        removeImage: (id) => getPluginEditorImpl().removeImage(id)
+      }),
+      [getPluginEditorImpl]
+    );
+    pluginEditorImplRef.current = {
+      getState: getEditorState,
+      isEmpty: () => serializeContent().trim().length === 0,
+      focus: focusEditor,
+      clear: (options) => replaceContent("", options),
+      setContent: replaceContent,
+      insertContent: insertTextAtCursor,
+      getContentBeforeCursor: () => {
+        const { selection } = editor;
+        if (!selection || !Range.isCollapsed(selection)) return null;
+        return getRangeContent({
+          anchor: Editor.start(editor, []),
+          focus: selection.anchor
+        });
+      },
+      getCurrentBlockContent,
+      getCurrentBlockContentBeforeCursor,
+      replaceCurrentBlockContent,
+      clearCurrentBlock,
+      wrapSelection,
+      insertImage,
+      updateImage,
+      removeImage
+    };
+    useEffect(() => {
+      const { insertData } = editor;
+      editor.insertData = (data) => {
+        const baseContext = {
+          editor: pluginEditor,
+          insertData
+        };
+        for (const plugin of plugins) {
+          if (plugin.onInsertData?.(data, baseContext)) return;
+        }
+        insertData(data);
+      };
+      const cleanups = [];
+      for (const plugin of plugins) {
+        if (!plugin.setup) continue;
+        const cleanup = plugin.setup(pluginEditor);
+        if (typeof cleanup === "function") cleanups.push(cleanup);
+      }
+      return () => {
+        editor.insertData = insertData;
+        for (let i = cleanups.length - 1; i >= 0; i--) cleanups[i]();
+      };
+    }, [editor, plugins, pluginEditor, wrapSelection]);
+    pluginEditorRef.current = pluginEditor;
+    const dismissPlugin = useCallback(() => {
+      activePluginRef.current = null;
+      setActivePluginState(null);
+      activePluginQueryRef.current = "";
+      setActivePluginQuery("");
       ReactEditor.focus(editor);
-      const nodes = deserialize(text);
-      Transforms.insertFragment(editor, nodes);
-    },
-    [editor]
-  );
-  const dismissPlugin = useCallback(() => {
-    setActivePlugin(null);
-    ReactEditor.focus(editor);
-  }, [editor]);
-  const handlePluginSelect = useCallback(
-    (text) => {
-      const triggerKey = activePlugin?.trigger?.key;
-      const isCharTrigger = triggerKey && !triggerKey.includes("+");
-      dismissPlugin();
-      requestAnimationFrame(() => {
-        ReactEditor.focus(editor);
-        if (isCharTrigger) {
-          Transforms.delete(editor, {
-            distance: 1,
-            unit: "character",
-            reverse: true
-          });
+    }, [editor]);
+    const activatePlugin = useCallback(
+      (plugin, options) => {
+        const initialQuery = options?.query ?? "";
+        activePluginQueryRef.current = initialQuery;
+        setActivePluginQuery(initialQuery);
+        pluginPositionRef.current = getCursorPosition();
+        activePluginRef.current = plugin;
+        setActivePluginState(plugin);
+      },
+      [getCursorPosition]
+    );
+    const handlePluginSelect = useCallback(
+      (text) => {
+        const activation = activePlugin?.activation;
+        const triggerKey = activation?.type === "trigger" ? activation.key : void 0;
+        const isCharTrigger = triggerKey && !triggerKey.includes("+");
+        const queryLength = activePluginQueryRef.current.length;
+        dismissPlugin();
+        requestAnimationFrame(() => {
+          ReactEditor.focus(editor);
+          if (isCharTrigger) {
+            Transforms.delete(editor, {
+              distance: 1 + queryLength,
+              unit: "character",
+              reverse: true
+            });
+          }
+          insertTextAtCursor(text);
+        });
+      },
+      [dismissPlugin, insertTextAtCursor, activePlugin, editor]
+    );
+    const isActivatablePlugin = (plugin) => (plugin.activation?.type ?? "always") !== "always";
+    const makePluginProps = (plugin) => ({
+      active: isActivatablePlugin(plugin) ? activePlugin === plugin : true,
+      query: activePlugin === plugin ? activePluginQuery : "",
+      onSelect: handlePluginSelect,
+      onDismiss: dismissPlugin,
+      position: pluginPositionRef.current,
+      editorRef: editorElRef,
+      editor: pluginEditor,
+      wrapSelection,
+      subscribeForwardedKey: subscribeForwardedKeyFor(plugin.name)
+    });
+    const makeKeyDownContext = useCallback(
+      (plugin) => ({
+        editor: pluginEditor,
+        wrapSelection,
+        activate: (options) => activatePlugin(plugin, options),
+        dismiss: dismissPlugin
+      }),
+      [activatePlugin, dismissPlugin, pluginEditor, wrapSelection]
+    );
+    const handleKeyDown = useCallback(
+      (event) => {
+        if (activePlugin) {
+          const activeResult = activePlugin.onActiveKeyDown?.(
+            event,
+            makeKeyDownContext(activePlugin)
+          );
+          if (activeResult === false) {
+            dismissPlugin();
+          } else {
+            if (event.defaultPrevented) return;
+            if (event.key === "Escape") {
+              event.preventDefault();
+              dismissPlugin();
+              return;
+            }
+            const isPrintable = !event.metaKey && !event.ctrlKey && !event.altKey && event.key.length === 1;
+            const shouldForward = event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === "Backspace" || isPrintable;
+            if (shouldForward) {
+              if (event.key === "Enter") {
+                event.preventDefault();
+              } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                event.preventDefault();
+              } else if (event.key === "Backspace") {
+                if (activePluginQueryRef.current.length === 0) {
+                  dismissPlugin();
+                  return;
+                }
+                const nextQuery = activePluginQueryRef.current.slice(0, -1);
+                activePluginQueryRef.current = nextQuery;
+                setActivePluginQuery(nextQuery);
+              } else if (isPrintable) {
+                const nextQuery = `${activePluginQueryRef.current}${event.key}`;
+                activePluginQueryRef.current = nextQuery;
+                setActivePluginQuery(nextQuery);
+              }
+              emitForwardedKey(activePlugin.name, event.key);
+            }
+            return;
+          }
         }
-        insertTextAtCursor(text);
-      });
+        for (const plugin of plugins) {
+          plugin.onKeyDown?.(event, makeKeyDownContext(plugin));
+          if (event.defaultPrevented) return;
+          if (activePluginRef.current) return;
+        }
+        if (submitOnEnter && event.key === "Enter" && !event.shiftKey) {
+          event.preventDefault();
+          onSubmit?.(serializeContent());
+          return;
+        }
+        for (const plugin of plugins) {
+          const activation = plugin.activation;
+          if (activation?.type !== "trigger") continue;
+          const parts = activation.key.toLowerCase().split("+").map((s) => s.trim());
+          const key = parts[parts.length - 1];
+          const mods = new Set(parts.slice(0, -1));
+          const hasModifiers = mods.size > 0;
+          const needCtrl = mods.has("control") || mods.has("ctrl");
+          const needMeta = mods.has("meta") || mods.has("cmd") || mods.has("command");
+          const needAlt = mods.has("alt");
+          const needShift = mods.has("shift");
+          const keyMatch = event.key.toLowerCase() === key;
+          const modMatch = hasModifiers ? event.ctrlKey === needCtrl && event.metaKey === needMeta && event.altKey === needAlt && event.shiftKey === needShift : !event.ctrlKey && !event.metaKey;
+          if (keyMatch && modMatch) {
+            if (plugin.shouldTrigger && !plugin.shouldTrigger(event, makeKeyDownContext(plugin))) {
+              continue;
+            }
+            if (hasModifiers) event.preventDefault();
+            activatePlugin(plugin);
+            return;
+          }
+        }
+        if (event.key === "Tab" && !event.shiftKey && !event.metaKey && !event.ctrlKey && !event.altKey) {
+          const { selection } = editor;
+          if (selection) {
+            const [match] = Editor.nodes(editor, {
+              match: (n) => Element.isElement(n)
+            });
+            if (match) {
+              const [node, path] = match;
+              const element = node;
+              if (element.type === "paragraph") {
+                const text = Node.string(node);
+                if (ORDERED_LIST_MARKER_RE.test(text)) {
+                  event.preventDefault();
+                  return;
+                }
+                if (UNORDERED_LIST_MARKER_RE.test(text)) {
+                  event.preventDefault();
+                  const savedSelection = editor.selection;
+                  Transforms.insertText(editor, "  ", {
+                    at: { path: [...path, 0], offset: 0 }
+                  });
+                  if (savedSelection) {
+                    Transforms.select(editor, {
+                      anchor: {
+                        path: savedSelection.anchor.path,
+                        offset: savedSelection.anchor.offset + 2
+                      },
+                      focus: {
+                        path: savedSelection.focus.path,
+                        offset: savedSelection.focus.offset + 2
+                      }
+                    });
+                  }
+                  return;
+                }
+              }
+            }
+          }
+        }
+        if (event.key === "a" && (event.metaKey || event.ctrlKey) && !Node.string(editor).trim()) {
+          event.preventDefault();
+          return;
+        }
+      },
+      [
+        plugins,
+        activePlugin,
+        editor,
+        getCursorPosition,
+        dismissPlugin,
+        makeKeyDownContext,
+        activatePlugin,
+        emitForwardedKey,
+        submitOnEnter,
+        onSubmit,
+        serializeContent
+      ]
+    );
+    const pluginPlaceholder = plugins.reduce(
+      (value, plugin) => {
+        if (value) return value;
+        const nextPlaceholder = plugin.getPlaceholder?.(pluginEditor) ?? null;
+        if (!nextPlaceholder) return null;
+        return typeof nextPlaceholder === "string" ? { text: nextPlaceholder } : nextPlaceholder;
+      },
+      null
+    );
+    const basePlaceholder = pluginPlaceholder?.text ?? placeholder ?? "Start writing...";
+    const resolvedPlaceholder = pluginPlaceholder?.hint ? `${pluginPlaceholder.hint}  ${basePlaceholder}` : basePlaceholder;
+    useLayoutEffect(() => {
+      if (!pluginPlaceholder) return;
+      if (Node.string(editor).trim().length !== 0) return;
+      canonicalizeEmptyEditor();
+      selectEditor("start");
+    }, [
+      canonicalizeEmptyEditor,
+      editor,
+      pluginPlaceholder,
+      selectEditor,
+      stateVersion
+    ]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: wrapperRef,
+        className: `inkwell-editor-wrapper${hasCharacterLimit ? " inkwell-editor-has-character-limit" : ""}${overLimit ? " inkwell-editor-over-limit" : ""}${className ? ` ${className}` : ""}${classNames?.root ? ` ${classNames.root}` : ""}`,
+        style: styles?.root,
+        children: [
+          hasCharacterLimit && /* @__PURE__ */ jsx(
+            CharacterCount,
+            {
+              count: characterCount,
+              limit: characterLimit,
+              over: overLimit
+            }
+          ),
+          activePlugin && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "inkwell-plugin-backdrop",
+              style: {
+                position: "fixed",
+                inset: 0,
+                zIndex: 999,
+                background: "transparent"
+              },
+              onMouseDown: dismissPlugin
+            }
+          ),
+          plugins.map((plugin) => {
+            const props = makePluginProps(plugin);
+            if (!props.active || !plugin.render) return null;
+            return /* @__PURE__ */ jsx(Fragment, { children: plugin.render(props) }, plugin.name);
+          }),
+          /* @__PURE__ */ jsx(
+            Slate,
+            {
+              editor,
+              initialValue,
+              onChange: handleChange,
+              children: /* @__PURE__ */ jsx(
+                Editable,
+                {
+                  ref: editorElRef,
+                  className: `inkwell-editor${classNames?.editor ? ` ${classNames.editor}` : ""}`,
+                  style: styles?.editor,
+                  renderElement: RenderElement,
+                  renderLeaf: RenderLeaf,
+                  decorate,
+                  placeholder: resolvedPlaceholder,
+                  spellCheck: true,
+                  role: "textbox",
+                  "aria-multiline": true,
+                  "aria-placeholder": resolvedPlaceholder,
+                  "data-placeholder": resolvedPlaceholder,
+                  readOnly: !editable,
+                  onFocus: () => scheduleFocusedState(true),
+                  onBlur: () => scheduleFocusedState(false),
+                  onKeyDown: handleKeyDown
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+// src/plugins/attachments/index.tsx
+function mimeMatches(mime, accept) {
+  if (!mime) return false;
+  const patterns = accept.split(",").map((p) => p.trim()).filter(Boolean);
+  return patterns.some((pattern) => {
+    if (pattern.endsWith("/*")) {
+      const prefix = pattern.slice(0, -1);
+      return mime.startsWith(prefix);
+    }
+    return mime === pattern;
+  });
+}
+function isImageFile(file) {
+  return file.type.startsWith("image/");
+}
+function extractFiles(data) {
+  if (data.files && data.files.length > 0) return Array.from(data.files);
+  if (!data.items) return [];
+  const files = [];
+  for (const item of Array.from(data.items)) {
+    if (item.kind !== "file") continue;
+    const file = item.getAsFile();
+    if (file) files.push(file);
+  }
+  return files;
+}
+function filesOnlyDataTransfer(files) {
+  return {
+    types: files.length > 0 ? ["Files"] : [],
+    files,
+    items: void 0,
+    getData: () => "",
+    setData: () => {
     },
-    [dismissPlugin, insertTextAtCursor, activePlugin, editor]
-  );
-  const makePluginProps = (plugin) => ({
-    active: plugin.trigger ? activePlugin === plugin : true,
-    query: "",
-    onSelect: handlePluginSelect,
-    onDismiss: dismissPlugin,
-    position: pluginPositionRef.current,
-    editorRef: editorElRef,
-    wrapSelection
+    clearData: () => {
+    },
+    setDragImage: () => {
+    },
+    dropEffect: "none",
+    effectAllowed: "all"
+  };
+}
+function extractHtmlImages(data) {
+  const html = data.getData("text/html");
+  if (!html) return [];
+  const template = document.createElement("template");
+  template.innerHTML = html;
+  const images = [];
+  for (const img of Array.from(template.content.querySelectorAll("img"))) {
+    const url = sanitizeImageUrl(img.getAttribute("src"));
+    if (!url) continue;
+    images.push({ url, alt: img.getAttribute("alt") ?? "" });
+  }
+  return images;
+}
+var insertUploadedImage = (editor, file, options) => {
+  const placeholder = options.uploadingPlaceholder?.(file) ?? "Uploading\u2026";
+  const id = editor.insertImage({ url: "", alt: placeholder });
+  Promise.resolve().then(() => options.onUpload(file)).then((result) => {
+    const url = typeof result === "string" ? result : result.url;
+    const safeUrl = sanitizeImageUrl(url);
+    if (!safeUrl) {
+      editor.removeImage(id);
+      options.onError?.(new Error("Unsafe upload URL"), file);
+      return;
+    }
+    const alt = typeof result === "string" ? file.name : result.alt ?? file.name;
+    editor.updateImage(id, { url: safeUrl, alt });
+  }).catch((err) => {
+    editor.removeImage(id);
+    options.onError?.(err, file);
   });
-  const handleKeyDown = useCallback(
-    (event) => {
-      if (activePlugin) {
-        if (event.key === "Escape") {
-          event.preventDefault();
-          dismissPlugin();
+};
+var insertUploadedAttachment = (file, options) => {
+  const onAttachmentAdd = options.onAttachmentAdd;
+  if (!onAttachmentAdd) return;
+  Promise.resolve().then(() => options.onUpload(file)).then((result) => {
+    const url = typeof result === "string" ? result : result.url;
+    if (!isSafeImageUrl(url)) {
+      options.onError?.(new Error("Unsafe upload URL"), file);
+      return;
+    }
+    const extra = typeof result === "string" ? {} : Object.fromEntries(
+      Object.entries(result).filter(
+        ([k]) => k !== "url" && k !== "alt"
+      )
+    );
+    onAttachmentAdd({
+      ...extra,
+      url: url.trim(),
+      filename: file.name || "attachment",
+      mime: file.type,
+      size: file.size
+    });
+  }).catch((err) => {
+    options.onError?.(err, file);
+  });
+};
+function createAttachmentsPlugin(options) {
+  const { accept } = options;
+  return {
+    name: "attachments",
+    onInsertData(data, { editor, insertData }) {
+      const files = extractFiles(data);
+      const matching = accept ? files.filter((f) => mimeMatches(f.type, accept)) : files;
+      const handled = matching.filter(
+        (f) => isImageFile(f) || options.onAttachmentAdd !== void 0
+      );
+      if (handled.length === 0) {
+        const htmlImages = extractHtmlImages(data);
+        if (htmlImages.length === 0) return false;
+        for (const image of htmlImages) {
+          editor.insertImage(image);
         }
-        return;
+        return true;
       }
-      for (const plugin of plugins) {
-        plugin.onKeyDown?.(event, { wrapSelection });
-        if (event.defaultPrevented) return;
+      const unhandled = files.filter((f) => !handled.includes(f));
+      if (unhandled.length > 0) {
+        insertData(filesOnlyDataTransfer(unhandled));
       }
-      for (const plugin of plugins) {
-        const t = plugin.trigger;
-        if (!t) continue;
-        const parts = t.key.toLowerCase().split("+").map((s) => s.trim());
-        const key = parts[parts.length - 1];
-        const mods = new Set(parts.slice(0, -1));
-        const hasModifiers = mods.size > 0;
-        const needCtrl = mods.has("control") || mods.has("ctrl");
-        const needMeta = mods.has("meta") || mods.has("cmd") || mods.has("command");
-        const needAlt = mods.has("alt");
-        const needShift = mods.has("shift");
-        const keyMatch = event.key.toLowerCase() === key;
-        const modMatch = hasModifiers ? event.ctrlKey === needCtrl && event.metaKey === needMeta && event.altKey === needAlt && event.shiftKey === needShift : !event.ctrlKey && !event.metaKey;
-        if (keyMatch && modMatch) {
-          if (hasModifiers) event.preventDefault();
-          pluginPositionRef.current = getCursorPosition();
-          setActivePlugin(plugin);
-          return;
+      for (const file of handled) {
+        if (isImageFile(file)) {
+          insertUploadedImage(editor, file, options);
+        } else {
+          insertUploadedAttachment(file, options);
         }
       }
-      if (event.key === "a" && (event.metaKey || event.ctrlKey) && !Node.string(editor).trim()) {
+      return true;
+    }
+  };
+}
+
+// src/plugins/completions/index.tsx
+var isPlainTypingKey = (event) => {
+  return event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey;
+};
+var lastAcceptedCompletionByEditor = /* @__PURE__ */ new WeakMap();
+var setLastAcceptedCompletion = (editor, pluginName, completion) => {
+  const completions = lastAcceptedCompletionByEditor.get(editor) ?? /* @__PURE__ */ new Map();
+  completions.set(pluginName, completion);
+  lastAcceptedCompletionByEditor.set(editor, completions);
+};
+var takeLastAcceptedCompletion = (editor, pluginName) => {
+  const completions = lastAcceptedCompletionByEditor.get(editor);
+  if (!completions) return null;
+  const completion = completions.get(pluginName) ?? null;
+  completions.delete(pluginName);
+  if (completions.size === 0) {
+    lastAcceptedCompletionByEditor.delete(editor);
+  }
+  return completion;
+};
+function createCompletionsPlugin({
+  name = "completions",
+  getCompletion,
+  isLoading,
+  loadingText = "Loading suggestion\u2026",
+  acceptHint = "[tab \u21B9]",
+  onAccept,
+  onDismiss,
+  onRestore,
+  restoreOnUndo = true
+}) {
+  return {
+    name,
+    getPlaceholder: (editor) => {
+      if (!editor.isEmpty()) return null;
+      const text = getCompletion() ?? (isLoading?.() ? loadingText : null);
+      if (!text) return null;
+      return { text, hint: acceptHint };
+    },
+    onKeyDown: (event, { editor }) => {
+      const completion = getCompletion();
+      if (!completion) return;
+      if (!editor.isEmpty()) return;
+      if (event.key === "Tab") {
         event.preventDefault();
+        setLastAcceptedCompletion(editor, name, completion);
+        editor.insertContent(completion);
+        onAccept?.(completion);
         return;
       }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onDismiss?.(completion);
+        return;
+      }
+      if (isPlainTypingKey(event)) {
+        onDismiss?.(completion);
+      }
     },
-    [
-      plugins,
-      activePlugin,
-      editor,
-      getCursorPosition,
-      dismissPlugin,
-      wrapSelection
-    ]
-  );
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: wrapperRef,
-      className: `inkwell-editor-wrapper ${className ?? ""}`,
-      children: [
-        activePlugin && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "inkwell-plugin-backdrop",
-            style: {
-              position: "fixed",
-              inset: 0,
-              zIndex: 999,
-              background: "transparent"
-            },
-            onMouseDown: dismissPlugin
-          }
-        ),
-        plugins.map((plugin) => {
-          const props = makePluginProps(plugin);
-          if (!props.active) return null;
-          return /* @__PURE__ */ jsx(Fragment, { children: plugin.render(props) }, plugin.name);
-        }),
-        /* @__PURE__ */ jsx(
-          Slate,
-          {
-            editor,
-            initialValue,
-            onChange: handleChange,
-            children: /* @__PURE__ */ jsx(
-              Editable,
-              {
-                ref: editorElRef,
-                className: "inkwell-editor",
-                renderElement: RenderElement,
-                renderLeaf: RenderLeaf,
-                decorate,
-                placeholder: placeholder ?? "Start writing...",
-                spellCheck: true,
-                role: "textbox",
-                "aria-multiline": true,
-                "aria-placeholder": placeholder,
-                "data-placeholder": placeholder ?? "Start writing...",
-                onKeyDown: handleKeyDown
-              }
-            )
-          }
-        )
-      ]
+    onEditorChange: (editor) => {
+      if (!restoreOnUndo) return;
+      if (!editor.isEmpty()) return;
+      const lastAcceptedCompletion = takeLastAcceptedCompletion(editor, name);
+      if (!lastAcceptedCompletion) return;
+      onRestore?.(lastAcceptedCompletion);
     }
-  );
+  };
 }
-var cls2 = pluginClass("snippets");
-function SnippetPicker({
-  snippets,
+var BASE = "inkwell-plugin-picker";
+var pluginPickerClass = {
+  popup: `${BASE}-popup`,
+  picker: `${BASE}`,
+  search: `${BASE}-search`,
+  item: `${BASE}-item`,
+  itemActive: `${BASE}-item-active`,
+  empty: `${BASE}-empty`,
+  title: `${BASE}-title`,
+  subtitle: `${BASE}-subtitle`,
+  preview: `${BASE}-preview`
+};
+function PluginMenuPrimitive({
+  items,
+  search,
+  getKey,
+  renderItem,
+  itemToText,
+  placeholder,
+  emptyMessage = "No results",
   onSelect,
-  onDismiss
+  onDismiss,
+  position,
+  subscribeForwardedKey
 }) {
   const [selectedIndex, setSelectedIndex] = useState(0);
-  const [search, setSearch] = useState("");
-  const filtered = snippets.filter(
-    (s) => s.title.toLowerCase().includes(search.toLowerCase())
-  );
-  const focusRef = useCallback((el) => {
-    if (el) requestAnimationFrame(() => el.focus());
+  const [query, setQuery] = useState("");
+  const [asyncResults, setAsyncResults] = useState([]);
+  const selectedIndexRef = useRef(0);
+  const resultsRef = useRef(items ?? []);
+  const updateSelectedIndex = useCallback((next) => {
+    selectedIndexRef.current = next;
+    setSelectedIndex(next);
   }, []);
-  const activeItemRef = useCallback((el) => {
-    if (el && typeof el.scrollIntoView === "function") {
-      el.scrollIntoView({ block: "nearest" });
+  const syncResults = useMemo(() => {
+    if (search) return null;
+    const all = items ?? [];
+    return all.filter(
+      (item) => getKey(item).toLowerCase().includes(query.toLowerCase())
+    );
+  }, [getKey, items, query, search]);
+  const results = syncResults ?? asyncResults;
+  useEffect(() => {
+    if (!syncResults) return;
+    resultsRef.current = syncResults;
+    if (selectedIndexRef.current >= syncResults.length) {
+      updateSelectedIndex(0);
     }
-  }, []);
-  const handleSearchKeyDown = useCallback(
-    (e) => {
-      switch (e.key) {
-        case "ArrowDown":
-          e.preventDefault();
-          setSelectedIndex((prev) => prev < filtered.length - 1 ? prev + 1 : 0);
+  }, [syncResults, updateSelectedIndex]);
+  useEffect(() => {
+    if (!search) return;
+    let cancelled = false;
+    Promise.resolve(search(query)).then((next) => {
+      if (cancelled) return;
+      resultsRef.current = next;
+      setAsyncResults(next);
+      updateSelectedIndex(0);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [query, search, updateSelectedIndex]);
+  const commitItem = useCallback(
+    (item) => onSelect(itemToText(item)),
+    [itemToText, onSelect]
+  );
+  const commitSelected = useCallback(() => {
+    const item = resultsRef.current[selectedIndexRef.current];
+    if (item) commitItem(item);
+  }, [commitItem]);
+  const handlePluginKey = useCallback(
+    (key) => {
+      switch (key) {
+        case "Backspace":
+          if (query.length === 0) {
+            onSelect("");
+          } else {
+            setQuery((prev) => prev.slice(0, -1));
+          }
           break;
-        case "ArrowUp":
-          e.preventDefault();
-          setSelectedIndex((prev) => prev > 0 ? prev - 1 : filtered.length - 1);
+        case "ArrowDown": {
+          const length = resultsRef.current.length;
+          if (length === 0) break;
+          updateSelectedIndex(
+            selectedIndexRef.current < length - 1 ? selectedIndexRef.current + 1 : 0
+          );
           break;
+        }
+        case "ArrowUp": {
+          const length = resultsRef.current.length;
+          if (length === 0) break;
+          updateSelectedIndex(
+            selectedIndexRef.current > 0 ? selectedIndexRef.current - 1 : length - 1
+          );
+          break;
+        }
         case "Enter":
-          e.preventDefault();
-          if (filtered[selectedIndex]) {
-            onSelect(filtered[selectedIndex].content);
-          }
+          commitSelected();
+          break;
+        default:
+          if (key.length === 1) setQuery((prev) => `${prev}${key}`);
+          break;
+      }
+    },
+    [commitSelected, onSelect, query.length, updateSelectedIndex]
+  );
+  useEffect(
+    () => subscribeForwardedKey(handlePluginKey),
+    [handlePluginKey, subscribeForwardedKey]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      event.stopPropagation();
+      switch (event.key) {
+        case "ArrowDown":
+        case "ArrowUp":
+        case "Enter":
+        case "Backspace":
+          event.preventDefault();
+          handlePluginKey(event.key);
           break;
         case "Escape":
-          e.preventDefault();
+          event.preventDefault();
           onDismiss();
           break;
       }
     },
-    [filtered, selectedIndex, onSelect, onDismiss]
+    [handlePluginKey, onDismiss]
   );
-  return /* @__PURE__ */ jsxs("div", { className: cls2("picker"), children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ref: focusRef,
-        type: "text",
-        placeholder: "Search snippets...",
-        value: search,
-        onChange: (e) => {
-          setSearch(e.target.value);
-          setSelectedIndex(0);
+  const activeItemRef = useCallback((el) => {
+    if (el && typeof el.scrollIntoView === "function") {
+      el.scrollIntoView({ block: "nearest" });
+    }
+  }, []);
+  const reactId = useId().replace(/:/g, "");
+  const listboxId = `${pluginPickerClass.picker}-${reactId}-listbox`;
+  const activeOptionId = `${listboxId}-option-${selectedIndex}`;
+  const renderedResults = useMemo(
+    () => results.map((item, index) => {
+      const active = index === selectedIndex;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: active ? activeItemRef : void 0,
+          id: `${listboxId}-option-${index}`,
+          role: "option",
+          "aria-selected": active,
+          className: `${pluginPickerClass.item} ${active ? pluginPickerClass.itemActive : ""}`,
+          onMouseDown: (event) => event.preventDefault(),
+          onMouseEnter: () => updateSelectedIndex(index),
+          onClick: () => commitItem(item),
+          children: renderItem(item, active)
         },
-        onKeyDown: handleSearchKeyDown,
-        className: cls2("search")
-      }
-    ),
-    filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: cls2("empty"), children: "No snippets found" }) : /* @__PURE__ */ jsx("div", { children: filtered.map((snippet, i) => /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: i === selectedIndex ? activeItemRef : void 0,
-        "data-snippet-item": true,
-        className: `${cls2("item")} ${i === selectedIndex ? cls2("item-active") : ""}`,
-        onMouseEnter: () => setSelectedIndex(i),
-        onClick: () => onSelect(snippet.content),
-        children: [
-          /* @__PURE__ */ jsx("div", { className: cls2("title"), children: snippet.title }),
-          /* @__PURE__ */ jsx("div", { className: cls2("preview"), children: snippet.content.length > 80 ? `${snippet.content.slice(0, 80)}...` : snippet.content })
-        ]
+        getKey(item)
+      );
+    }),
+    [
+      activeItemRef,
+      commitItem,
+      getKey,
+      listboxId,
+      renderItem,
+      results,
+      selectedIndex,
+      updateSelectedIndex
+    ]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: pluginPickerClass.popup,
+      style: {
+        position: "absolute",
+        top: position.top,
+        left: position.left,
+        zIndex: 1001
       },
-      snippet.title
-    )) })
-  ] });
+      onMouseDown: (event) => event.preventDefault(),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: pluginPickerClass.picker,
+          onKeyDown: handleKeyDown,
+          role: "combobox",
+          "aria-expanded": "true",
+          "aria-haspopup": "listbox",
+          "aria-controls": listboxId,
+          "aria-activedescendant": results.length > 0 ? activeOptionId : void 0,
+          children: [
+            /* @__PURE__ */ jsx("div", { className: pluginPickerClass.search, "aria-label": placeholder, children: query || placeholder }),
+            results.length === 0 ? /* @__PURE__ */ jsx("div", { className: pluginPickerClass.empty, role: "status", children: emptyMessage }) : /* @__PURE__ */ jsx("div", { id: listboxId, role: "listbox", children: renderedResults })
+          ]
+        }
+      )
+    }
+  );
+}
+var defaultEmojis = [
+  { emoji: "\u{1F600}", name: "grinning", shortcodes: ["smile"], tags: ["happy"] },
+  { emoji: "\u{1F604}", name: "smile", shortcodes: ["smiley"], tags: ["happy"] },
+  { emoji: "\u{1F602}", name: "joy", shortcodes: ["laugh"], tags: ["tears"] },
+  { emoji: "\u{1F923}", name: "rofl", shortcodes: ["rolling_on_the_floor_laughing"] },
+  { emoji: "\u{1F60A}", name: "blush", shortcodes: ["smiling"] },
+  { emoji: "\u{1F642}", name: "slight_smile", shortcodes: ["slightly_smiling_face"] },
+  { emoji: "\u{1F609}", name: "wink" },
+  { emoji: "\u{1F60D}", name: "heart_eyes", tags: ["love"] },
+  { emoji: "\u{1F618}", name: "kissing_heart" },
+  { emoji: "\u{1F60E}", name: "sunglasses", shortcodes: ["cool"] },
+  { emoji: "\u{1F914}", name: "thinking", shortcodes: ["thinking_face"] },
+  { emoji: "\u{1F615}", name: "confused", shortcodes: ["slash"] },
+  { emoji: "\u{1F62D}", name: "sob", tags: ["cry"] },
+  { emoji: "\u{1F621}", name: "rage", shortcodes: ["angry"] },
+  { emoji: "\u{1F44D}", name: "thumbsup", shortcodes: ["+1", "like"] },
+  { emoji: "\u{1F44E}", name: "thumbsdown", shortcodes: ["-1", "dislike"] },
+  { emoji: "\u{1F44F}", name: "clap" },
+  { emoji: "\u{1F64C}", name: "raised_hands" },
+  { emoji: "\u{1F64F}", name: "pray", shortcodes: ["thanks"] },
+  { emoji: "\u{1F4AA}", name: "muscle", shortcodes: ["strong"] },
+  { emoji: "\u{1F440}", name: "eyes" },
+  { emoji: "\u{1F4AF}", name: "100" },
+  { emoji: "\u{1F525}", name: "fire" },
+  { emoji: "\u2728", name: "sparkles" },
+  { emoji: "\u{1F389}", name: "tada", shortcodes: ["party"] },
+  { emoji: "\u{1F680}", name: "rocket", tags: ["ship", "launch"] },
+  { emoji: "\u2705", name: "white_check_mark", shortcodes: ["check", "done"] },
+  { emoji: "\u274C", name: "x", shortcodes: ["cross"] },
+  { emoji: "\u26A0\uFE0F", name: "warning" },
+  { emoji: "\u{1F6A8}", name: "rotating_light", shortcodes: ["alert"] },
+  { emoji: "\u{1F41B}", name: "bug" },
+  { emoji: "\u{1F4A1}", name: "bulb", shortcodes: ["idea"] },
+  { emoji: "\u{1F9F5}", name: "yarn" },
+  { emoji: "\u{1F6E0}\uFE0F", name: "tools", shortcodes: ["wrench"] },
+  { emoji: "\u{1F4CC}", name: "pushpin", shortcodes: ["pin"] },
+  { emoji: "\u{1F4DD}", name: "memo", shortcodes: ["note"] },
+  { emoji: "\u{1F4CE}", name: "paperclip", shortcodes: ["attachment"] },
+  { emoji: "\u{1F512}", name: "lock" },
+  { emoji: "\u{1F513}", name: "unlock" },
+  { emoji: "\u{1F4AC}", name: "speech_balloon", shortcodes: ["comment"] },
+  { emoji: "\u2764\uFE0F", name: "heart", shortcodes: ["love"] },
+  { emoji: "\u{1F494}", name: "broken_heart" },
+  { emoji: "\u2601\uFE0F", name: "cloud" },
+  { emoji: "\u{1F682}", name: "train", tags: ["railway"] }
+];
+var itemText = (emoji) => [emoji.name, ...emoji.shortcodes ?? [], ...emoji.tags ?? []].join(" ");
+var defaultSearch = (emojis, query) => {
+  const q = query.toLowerCase();
+  const slashQuery = q === "/" ? "confused" : q;
+  return emojis.filter(
+    (emoji) => !slashQuery || itemText(emoji).toLowerCase().includes(slashQuery)
+  ).slice(0, 20);
+};
+var DefaultEmojiItem = ({ item }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+  /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: item.emoji }),
+  /* @__PURE__ */ jsxs("span", { className: pluginPickerClass.title, children: [
+    ":",
+    item.name,
+    ":"
+  ] }),
+  item.shortcodes?.[0] ? /* @__PURE__ */ jsxs("span", { className: pluginPickerClass.subtitle, children: [
+    ":",
+    item.shortcodes[0],
+    ":"
+  ] }) : null
+] });
+function createEmojiPlugin({
+  name = "emoji",
+  trigger = ":",
+  emojis,
+  search,
+  renderItem,
+  emptyMessage = "No emoji found"
+} = {}) {
+  const resolvedEmojis = emojis ?? defaultEmojis;
+  return {
+    name,
+    shouldTrigger: (event, { editor }) => {
+      if (event.key !== trigger || event.ctrlKey || event.metaKey || event.altKey) {
+        return false;
+      }
+      const beforeCursor = editor.getContentBeforeCursor();
+      if (beforeCursor === null) return false;
+      const previous = beforeCursor.at(-1) ?? "";
+      return previous === "" || /\s|[([{]/.test(previous);
+    },
+    activation: { type: "trigger", key: trigger },
+    onActiveKeyDown: (event) => {
+      if (event.key.length !== 1) return;
+      if (/[\p{L}\p{N}_+-]/u.test(event.key)) return;
+      return false;
+    },
+    render: (props) => {
+      if (!props.active) return null;
+      return /* @__PURE__ */ jsx(
+        PluginMenuPrimitive,
+        {
+          ...props,
+          pluginName: name,
+          items: search ? void 0 : emojis,
+          search: search ?? ((query) => defaultSearch(resolvedEmojis, query)),
+          getKey: (item) => item.name,
+          renderItem: renderItem ?? ((item, _active) => /* @__PURE__ */ jsx(DefaultEmojiItem, { item })),
+          itemToText: (item) => item.emoji,
+          placeholder: "Search emoji...",
+          emptyMessage
+        }
+      );
+    }
+  };
 }
-function createSnippetsPlugin(options) {
-  const { snippets, key = "[" } = options;
+function createMentionsPlugin(options) {
+  const name = options.name ?? "mentions";
+  const trigger = options.trigger ?? "@";
+  const marker = options.marker ?? "mention";
+  const itemToText = (item) => options.onSelect ? options.onSelect(item) : `@${marker}[${item.id}]`;
   return {
-    name: "snippets",
-    trigger: { key },
+    name,
+    activation: { type: "trigger", key: trigger },
+    // Dismiss the picker when the user types whitespace or punctuation —
+    // matches the emoji plugin so `@john<space>` flows back into the
+    // document instead of growing the query indefinitely.
+    onActiveKeyDown: (event) => {
+      if (event.key.length !== 1) return;
+      if (/[\p{L}\p{N}_-]/u.test(event.key)) return;
+      return false;
+    },
     render: (props) => /* @__PURE__ */ jsx(
+      PluginMenuPrimitive,
+      {
+        pluginName: name,
+        placeholder: "Search...",
+        search: options.search,
+        getKey: (item) => item.id,
+        renderItem: options.renderItem,
+        itemToText,
+        emptyMessage: options.emptyMessage ?? "No results",
+        ...props
+      }
+    )
+  };
+}
+var fuzzyMatch = (query, text) => {
+  const q = query.toLowerCase();
+  const t = text.toLowerCase();
+  return t.includes(q) || t.startsWith(q);
+};
+var SlashCommandMenuInner = forwardRef(function SlashCommandMenuInner2({
+  commands,
+  emptyMessage,
+  onReadyChange,
+  onExecute,
+  onDismiss,
+  position,
+  getEditor
+}, ref) {
+  const [mode, setMode] = useState("commands");
+  const [query, setQuery] = useState("");
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [selectedCommand, setSelectedCommand] = useState(null);
+  const [selectedArg, setSelectedArg] = useState(null);
+  const [argChoices, setArgChoices] = useState([]);
+  const [loadingArgs, setLoadingArgs] = useState(false);
+  useEffect(() => {
+    onReadyChange?.(mode === "ready");
+  }, [mode, onReadyChange]);
+  useEffect(() => {
+    let cancelled = false;
+    const loadChoices = async () => {
+      if (mode !== "args" || !selectedCommand) {
+        setArgChoices([]);
+        return;
+      }
+      const firstArg = selectedCommand.arg;
+      if (!firstArg) {
+        setArgChoices([]);
+        return;
+      }
+      if (firstArg.choices) {
+        setArgChoices(firstArg.choices);
+        return;
+      }
+      if (!firstArg.fetchChoices) {
+        setArgChoices([]);
+        return;
+      }
+      setLoadingArgs(true);
+      try {
+        const choices = await firstArg.fetchChoices();
+        if (!cancelled) setArgChoices(choices);
+      } finally {
+        if (!cancelled) setLoadingArgs(false);
+      }
+    };
+    void loadChoices();
+    return () => {
+      cancelled = true;
+    };
+  }, [mode, selectedCommand]);
+  const commandItems = useMemo(
+    () => commands.filter((command) => {
+      if (!query) return true;
+      return fuzzyMatch(query, command.name) || command.aliases?.some((alias) => fuzzyMatch(query, alias));
+    }).map((command) => {
+      const disabledReason = command.disabled?.();
+      return {
+        type: "command",
+        value: command.name,
+        label: `/${command.name}`,
+        description: command.description,
+        disabled: !!disabledReason,
+        disabledReason: disabledReason || void 0,
+        command
+      };
+    }),
+    [commands, query]
+  );
+  const argItems = useMemo(
+    () => argChoices.filter((choice) => !query || fuzzyMatch(query, choice.label)).map((choice) => ({
+      type: "arg",
+      value: choice.value,
+      label: choice.label,
+      description: choice.disabled ? "(current)" : selectedCommand?.arg?.description ?? "",
+      disabled: choice.disabled
+    })),
+    [argChoices, query, selectedCommand]
+  );
+  const items = mode === "args" ? argItems : commandItems;
+  const reactId = useId().replace(/:/g, "");
+  const listboxId = `${pluginPickerClass.picker}-${reactId}-slash-listbox`;
+  const activeOptionId = `${listboxId}-option-${selectedIndex}`;
+  useEffect(() => {
+    const firstEnabled = items.findIndex((item) => !item.disabled);
+    setSelectedIndex(firstEnabled >= 0 ? firstEnabled : 0);
+  }, [items.length, mode, query]);
+  const writeSlashLine = useCallback(
+    (line) => {
+      const editor = getEditor();
+      if (!editor) return;
+      editor.replaceCurrentBlockContent(line);
+    },
+    [getEditor]
+  );
+  const handleSelect = useCallback(
+    (item) => {
+      if (item.disabled) return;
+      if (item.type === "command") {
+        const command = item.command;
+        if (!command) return;
+        const hasArg = !!command.arg;
+        const nextLine = `/${command.name}${hasArg ? " " : ""}`;
+        writeSlashLine(nextLine);
+        setSelectedCommand(command);
+        setSelectedArg(null);
+        setQuery("");
+        setMode(hasArg ? "args" : "ready");
+        return;
+      }
+      if (!selectedCommand) return;
+      const firstArg = selectedCommand.arg;
+      writeSlashLine(`/${selectedCommand.name} ${item.label}`);
+      setSelectedArg(
+        firstArg ? { name: firstArg.name, value: item.value } : null
+      );
+      setQuery("");
+      setMode("ready");
+    },
+    [selectedCommand, writeSlashLine]
+  );
+  useImperativeHandle(
+    ref,
+    () => ({
+      isReady: () => mode === "ready",
+      appendQuery: (value) => setQuery((current) => `${current}${value}`),
+      removeQueryChar: () => setQuery((current) => current.length > 0 ? current.slice(0, -1) : ""),
+      move: (direction) => setSelectedIndex((current) => {
+        if (items.length === 0) return current;
+        for (let step = 1; step <= items.length; step++) {
+          const next = (current + direction * step + items.length) % items.length;
+          if (!items[next]?.disabled) return next;
+        }
+        return current;
+      }),
+      selectActive: () => {
+        const item = items[selectedIndex];
+        if (item) handleSelect(item);
+      },
+      execute: () => {
+        if (!selectedCommand) return;
+        const editor = getEditor();
+        const raw = editor?.getCurrentBlockContent() ?? `/${selectedCommand.name}`;
+        onExecute?.({
+          name: selectedCommand.name,
+          args: selectedArg ? { [selectedArg.name]: selectedArg.value } : {},
+          raw
+        });
+      },
+      reset: () => {
+        setMode("commands");
+        setQuery("");
+        setSelectedCommand(null);
+        setSelectedArg(null);
+        setSelectedIndex(0);
+        setArgChoices([]);
+      }
+    }),
+    [
+      getEditor,
+      handleSelect,
+      items,
+      mode,
+      onExecute,
+      selectedArg,
+      selectedCommand,
+      selectedIndex
+    ]
+  );
+  if (mode === "ready" && selectedCommand) {
+    return /* @__PURE__ */ jsx(
       "div",
       {
-        className: cls2("popup"),
+        className: pluginPickerClass.popup,
         style: {
           position: "absolute",
-          top: props.position.top,
-          left: props.position.left,
+          top: position.top,
+          left: position.left,
           zIndex: 1001
         },
-        onMouseDown: (e) => e.preventDefault(),
-        children: /* @__PURE__ */ jsx(SnippetPicker, { snippets, ...props })
+        children: /* @__PURE__ */ jsx("div", { className: pluginPickerClass.picker, children: /* @__PURE__ */ jsx("div", { className: "inkwell-plugin-slash-commands-execute", children: "Enter to execute \xB7 Esc to cancel" }) })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: pluginPickerClass.popup,
+      style: {
+        position: "absolute",
+        top: position.top,
+        left: position.left,
+        zIndex: 1001
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: pluginPickerClass.picker, children: [
+        /* @__PURE__ */ jsx("div", { className: pluginPickerClass.search, children: mode === "commands" ? `/${query}` : `${selectedCommand ? `/${selectedCommand.name} ` : ""}${query}` }),
+        loadingArgs && items.length === 0 ? /* @__PURE__ */ jsx("div", { className: pluginPickerClass.empty, children: "Loading..." }) : items.length === 0 ? /* @__PURE__ */ jsx("div", { className: pluginPickerClass.empty, children: emptyMessage }) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: listboxId,
+            role: "listbox",
+            "aria-activedescendant": activeOptionId,
+            children: items.map((item, index) => {
+              const active = index === selectedIndex;
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  id: `${listboxId}-option-${index}`,
+                  role: "option",
+                  "aria-selected": active,
+                  className: `${pluginPickerClass.item} ${active ? pluginPickerClass.itemActive : ""}`,
+                  onMouseDown: (event) => event.preventDefault(),
+                  onMouseEnter: () => {
+                    if (!item.disabled) setSelectedIndex(index);
+                  },
+                  onClick: () => handleSelect(item),
+                  "aria-disabled": item.disabled,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: pluginPickerClass.title, children: item.label }),
+                    /* @__PURE__ */ jsx("span", { className: pluginPickerClass.subtitle, children: item.disabledReason ?? item.description })
+                  ]
+                },
+                `${item.type}-${item.value}`
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: pluginPickerClass.empty, children: "\u2191\u2193 navigate \xB7 Tab/Enter select \xB7 Esc close" })
+      ] })
+    }
+  );
+});
+var createSlashCommandsPlugin = ({
+  name = "slash-commands",
+  commands,
+  onReadyChange,
+  onExecute,
+  emptyMessage = "No commands found"
+}) => {
+  let editorRef = null;
+  const menuRef = { current: null };
+  const enterReadyOrExecuteCleanup = (editor, ctx, action) => {
+    action();
+    ctx.dismiss();
+    requestAnimationFrame(() => editor.clearCurrentBlock());
+  };
+  return {
+    name,
+    activation: { type: "manual" },
+    render: (props) => {
+      if (!props.active) return null;
+      return /* @__PURE__ */ jsx(
+        SlashCommandMenuInner,
+        {
+          ...props,
+          ref: menuRef,
+          commands,
+          emptyMessage,
+          onReadyChange,
+          onExecute,
+          getEditor: () => editorRef
+        }
+      );
+    },
+    onKeyDown: (event, ctx) => {
+      editorRef = ctx.editor;
+      if (event.key === "/" && !event.metaKey && !event.ctrlKey && !event.altKey) {
+        const beforeCursor = ctx.editor.getCurrentBlockContentBeforeCursor();
+        const blockText = ctx.editor.getCurrentBlockContent();
+        if (beforeCursor !== null && beforeCursor.trim() === "" && blockText !== null && blockText.trim() === "") {
+          event.preventDefault();
+          ctx.editor.insertContent("/");
+          ctx.activate();
+          menuRef.current?.reset();
+        }
+      }
+    },
+    onActiveKeyDown: (event, ctx) => {
+      editorRef = ctx.editor;
+      const menu = menuRef.current;
+      if (!menu) return;
+      if (event.key === "Escape") {
+        event.preventDefault();
+        if (menu.isReady()) {
+          enterReadyOrExecuteCleanup(ctx.editor, ctx, () => {
+          });
+        } else {
+          ctx.dismiss();
+          menu.reset();
+        }
+        return;
+      }
+      if (menu.isReady() && event.key === "Enter") {
+        event.preventDefault();
+        enterReadyOrExecuteCleanup(ctx.editor, ctx, () => {
+          menu.execute();
+        });
+        return;
+      }
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        menu.move(1);
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        menu.move(-1);
+        return;
+      }
+      if (event.key === "Tab" || event.key === "Enter") {
+        event.preventDefault();
+        menu.selectActive();
+        return;
+      }
+      if (event.key === "Backspace") {
+        const beforeCursor = ctx.editor.getCurrentBlockContentBeforeCursor();
+        if (beforeCursor === "/") {
+          ctx.dismiss();
+          menu.reset();
+          return;
+        }
+        menu.removeQueryChar();
+        return;
+      }
+      if (!event.metaKey && !event.ctrlKey && !event.altKey && event.key.length === 1) {
+        menu.appendQuery(event.key);
+      }
+    }
+  };
+};
+function renderSnippet(snippet) {
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx("div", { className: pluginPickerClass.title, children: snippet.title }),
+    /* @__PURE__ */ jsx("div", { className: pluginPickerClass.preview, children: snippet.content.length > 80 ? `${snippet.content.slice(0, 80)}...` : snippet.content })
+  ] });
+}
+function createSnippetsPlugin({
+  snippets,
+  name = "snippets",
+  trigger = "["
+}) {
+  return {
+    name,
+    activation: { type: "trigger", key: trigger },
+    render: (props) => /* @__PURE__ */ jsx(
+      PluginMenuPrimitive,
+      {
+        pluginName: name,
+        items: snippets,
+        getKey: (snippet) => snippet.title,
+        renderItem: renderSnippet,
+        itemToText: (snippet) => snippet.content,
+        placeholder: "Search snippets...",
+        emptyMessage: "No snippets found",
+        ...props
       }
     )
   };
@@ -1485,7 +2974,7 @@ var processor = unified().use(rehypeParse, { fragment: true }).use(rehypeRemark)
     }
   }
 });
-function serializeToMarkdown(html) {
+function htmlToMarkdown(html) {
   return String(processor.processSync(html)).trim();
 }
 function CopyCodeBlock({
@@ -1546,14 +3035,76 @@ function CopyCodeBlock({
     /* @__PURE__ */ jsx("pre", { ref: preRef, ...props, children })
   ] });
 }
-function createProcessor(options = {}) {
+var MENTION_TAG_PREFIX = "inkwell-mention-";
+function rehypeMentions(mentions) {
+  return () => (tree) => {
+    if (mentions.length === 0) return;
+    visit(tree, "text", (node, index, parent) => {
+      if (typeof node.value !== "string" || !parent || index == null) return;
+      const text = node.value;
+      const hits = [];
+      for (let i = 0; i < mentions.length; i++) {
+        const re = new RegExp(
+          mentions[i].pattern.source,
+          mentions[i].pattern.flags.includes("g") ? mentions[i].pattern.flags : `${mentions[i].pattern.flags}g`
+        );
+        let m;
+        while ((m = re.exec(text)) !== null) {
+          hits.push({
+            start: m.index,
+            end: m.index + m[0].length,
+            mentionIdx: i,
+            matchText: m[0]
+          });
+          if (m[0].length === 0) re.lastIndex++;
+        }
+      }
+      if (hits.length === 0) return;
+      hits.sort((a, b) => a.start - b.start || a.mentionIdx - b.mentionIdx);
+      const nonOverlapping = [];
+      let cursor = 0;
+      for (const hit of hits) {
+        if (hit.start < cursor) continue;
+        nonOverlapping.push(hit);
+        cursor = hit.end;
+      }
+      const replacements = [];
+      let offset = 0;
+      for (const hit of nonOverlapping) {
+        if (hit.start > offset) {
+          replacements.push({
+            type: "text",
+            value: text.slice(offset, hit.start)
+          });
+        }
+        replacements.push({
+          type: "element",
+          tagName: `${MENTION_TAG_PREFIX}${hit.mentionIdx}`,
+          properties: { "data-match": hit.matchText },
+          children: []
+        });
+        offset = hit.end;
+      }
+      if (offset < text.length) {
+        replacements.push({
+          type: "text",
+          value: text.slice(offset)
+        });
+      }
+      parent.children.splice(index, 1, ...replacements);
+      return [SKIP, index + replacements.length];
+    });
+  };
+}
+function createProcessor2(options = {}) {
   const proc = unified().use(remarkParse).use(remarkGfm).use(remarkNoTables).use(remarkFlattenBlockquotes).use(remarkRehype);
   const plugins = options.rehypePlugins ?? [
     [rehypeHighlight, { detect: true }]
   ];
   for (const plugin of plugins) {
     if (Array.isArray(plugin)) {
-      proc.use(plugin[0], plugin[1]);
+      const [rehypePlugin, ...options2] = plugin;
+      proc.use(rehypePlugin, ...options2);
     } else {
       proc.use(plugin);
     }
@@ -1567,21 +3118,37 @@ function createProcessor(options = {}) {
       span: ["className"]
     }
   });
+  const mentionConfigs = options.mentions ?? [];
+  if (mentionConfigs.length > 0) {
+    proc.use(rehypeMentions(mentionConfigs));
+  }
+  const mentionComponents = {};
+  mentionConfigs.forEach((cfg, i) => {
+    const tag = `${MENTION_TAG_PREFIX}${i}`;
+    mentionComponents[tag] = (props) => {
+      const matchText = props["data-match"] ?? "";
+      const exec = new RegExp(cfg.pattern.source, cfg.pattern.flags).exec(
+        matchText
+      );
+      if (!exec) return matchText;
+      return cfg.resolve(exec);
+    };
+  });
   proc.use(rehypeReact, {
     createElement,
     Fragment: Fragment,
     jsx: jsx,
     jsxs: jsxs,
-    components: options.components ?? {}
+    components: { ...mentionComponents, ...options.components ?? {} }
   });
   return proc;
 }
 function escapeBareBq2(markdown) {
   return markdown.replace(/^>(?=\S)/gm, "\\>");
 }
-function parseMarkdown(markdown, components, rehypePlugins) {
-  const processor2 = createProcessor({ components, rehypePlugins });
-  const file = processor2.processSync(escapeBareBq2(markdown));
+function parseMarkdown(content, options = {}) {
+  const processor2 = createProcessor2(options);
+  const file = processor2.processSync(escapeBareBq2(content));
   return file.result;
 }
 function InkwellRenderer({
@@ -1589,17 +3156,21 @@ function InkwellRenderer({
   className,
   components,
   rehypePlugins,
-  copyButton = true
+  mentions
 }) {
-  const mergedComponents = useMemo(() => {
-    if (!copyButton) return components;
-    return { pre: CopyCodeBlock, ...components };
-  }, [copyButton, components]);
+  const mergedComponents = useMemo(
+    () => ({ pre: CopyCodeBlock, ...components }),
+    [components]
+  );
   const rendered = useMemo(
-    () => parseMarkdown(content, mergedComponents, rehypePlugins),
-    [content, mergedComponents, rehypePlugins]
+    () => parseMarkdown(content, {
+      components: mergedComponents,
+      rehypePlugins,
+      mentions
+    }),
+    [content, mergedComponents, rehypePlugins, mentions]
   );
   return /* @__PURE__ */ jsx("div", { className: `inkwell-renderer ${className ?? ""}`, children: rendered });
 }
 
-export { InkwellEditor, InkwellRenderer, createBubbleMenuPlugin, createSnippetsPlugin, defaultBubbleMenuItems, deserialize, parseMarkdown, pluginClass, serializeToMarkdown };
+export { InkwellEditor, InkwellRenderer, createAttachmentsPlugin, createBubbleMenuPlugin, createCompletionsPlugin, createEmojiPlugin, createMentionsPlugin, createSlashCommandsPlugin, createSnippetsPlugin, defaultBubbleMenuItems, defaultEmojis, htmlToMarkdown, parseMarkdown };