@openim/im-composer 1.0.0

package/dist/index.js

@@ -0,0 +1,2649 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/IMComposer.tsx
+import {
+  forwardRef,
+  useImperativeHandle,
+  useCallback as useCallback8,
+  useEffect as useEffect12,
+  useMemo,
+  useRef as useRef9,
+  useState as useState6
+} from "react";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import { useLexicalComposerContext as useLexicalComposerContext12 } from "@lexical/react/LexicalComposerContext";
+import { TRANSFORMERS as TRANSFORMERS3 } from "@lexical/markdown";
+import { HeadingNode, QuoteNode as MarkdownQuoteNode } from "@lexical/rich-text";
+import { ListNode, ListItemNode } from "@lexical/list";
+import { CodeNode } from "@lexical/code";
+import { LinkNode as LinkNode2, AutoLinkNode } from "@lexical/link";
+import { $getRoot as $getRoot5, $getSelection as $getSelection8, $isRangeSelection as $isRangeSelection7, $createTextNode as $createTextNode7, $createParagraphNode as $createParagraphNode5 } from "lexical";
+
+// src/nodes/MentionNode.tsx
+import {
+  DecoratorNode
+} from "lexical";
+var MentionNode = class _MentionNode extends DecoratorNode {
+  static getType() {
+    return "mention";
+  }
+  static clone(node) {
+    return new _MentionNode(node.__userId, node.__display, node.__key);
+  }
+  constructor(userId, display, key) {
+    super(key);
+    this.__userId = userId;
+    this.__display = display;
+  }
+  createDOM(config) {
+    const span = document.createElement("span");
+    span.className = "im-composer-mention";
+    span.setAttribute("data-user-id", this.__userId);
+    span.setAttribute("data-lexical-mention", "true");
+    span.textContent = `@${this.__display}`;
+    return span;
+  }
+  updateDOM() {
+    return false;
+  }
+  exportDOM() {
+    const span = document.createElement("span");
+    span.className = "im-composer-mention";
+    span.setAttribute("data-user-id", this.__userId);
+    span.textContent = `@${this.__display}`;
+    return { element: span };
+  }
+  static importDOM() {
+    return null;
+  }
+  static importJSON(serializedNode) {
+    return new _MentionNode(serializedNode.userId, serializedNode.display);
+  }
+  exportJSON() {
+    return {
+      type: "mention",
+      version: 1,
+      userId: this.__userId,
+      display: this.__display
+    };
+  }
+  getUserId() {
+    return this.__userId;
+  }
+  getDisplay() {
+    return this.__display;
+  }
+  getTextContent() {
+    return `@${this.__userId} `;
+  }
+  isIsolated() {
+    return true;
+  }
+  isInline() {
+    return true;
+  }
+  canInsertTextBefore() {
+    return false;
+  }
+  canInsertTextAfter() {
+    return false;
+  }
+  decorate() {
+    return null;
+  }
+};
+function $createMentionNode(userId, display) {
+  return new MentionNode(userId, display);
+}
+function $isMentionNode(node) {
+  return node instanceof MentionNode;
+}
+
+// src/nodes/ImageNode.tsx
+import {
+  DecoratorNode as DecoratorNode2,
+  $getNodeByKey
+} from "lexical";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection";
+import { mergeRegister } from "@lexical/utils";
+import {
+  $getSelection,
+  $isNodeSelection,
+  CLICK_COMMAND,
+  COMMAND_PRIORITY_LOW,
+  KEY_BACKSPACE_COMMAND,
+  KEY_DELETE_COMMAND
+} from "lexical";
+import { useCallback, useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+function ImageComponent({
+  src,
+  alt,
+  width,
+  height,
+  nodeKey
+}) {
+  const [editor] = useLexicalComposerContext();
+  const imageRef = useRef(null);
+  const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
+  const onDelete = useCallback(
+    (event) => {
+      if (isSelected && $isNodeSelection($getSelection())) {
+        event.preventDefault();
+        editor.update(() => {
+          const node = $getNodeByKey(nodeKey);
+          if (node) {
+            node.remove();
+          }
+        });
+        return true;
+      }
+      return false;
+    },
+    [editor, isSelected, nodeKey]
+  );
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerCommand(
+        CLICK_COMMAND,
+        (event) => {
+          if (imageRef.current && imageRef.current.contains(event.target)) {
+            if (!event.shiftKey) {
+              clearSelection();
+            }
+            setSelected(true);
+            return true;
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(
+        KEY_DELETE_COMMAND,
+        onDelete,
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(
+        KEY_BACKSPACE_COMMAND,
+        onDelete,
+        COMMAND_PRIORITY_LOW
+      )
+    );
+  }, [editor, clearSelection, setSelected, onDelete]);
+  return /* @__PURE__ */ jsx("div", { className: `im-composer-image-wrapper ${isSelected ? "selected" : ""}`, children: /* @__PURE__ */ jsx(
+    "img",
+    {
+      ref: imageRef,
+      src,
+      alt: alt || "",
+      width,
+      height,
+      className: "im-composer-image",
+      draggable: false
+    }
+  ) });
+}
+var ImageNode = class _ImageNode extends DecoratorNode2 {
+  static getType() {
+    return "image";
+  }
+  static clone(node) {
+    return new _ImageNode(node.__src, node.__alt, node.__width, node.__height, node.__key);
+  }
+  constructor(src, alt, width, height, key) {
+    super(key);
+    this.__src = src;
+    this.__alt = alt;
+    this.__width = width;
+    this.__height = height;
+  }
+  createDOM(config) {
+    const div = document.createElement("div");
+    div.className = "im-composer-image-container";
+    return div;
+  }
+  updateDOM() {
+    return false;
+  }
+  exportDOM(editor) {
+    const img = document.createElement("img");
+    img.src = this.__src;
+    img.alt = this.__alt || "";
+    if (this.__width) img.width = this.__width;
+    if (this.__height) img.height = this.__height;
+    return { element: img };
+  }
+  static importDOM() {
+    return {
+      img: () => ({
+        conversion: (element) => {
+          const img = element;
+          const src = img.src;
+          const alt = img.alt || "";
+          return { node: new _ImageNode(src, alt, img.width, img.height) };
+        },
+        priority: 0
+      })
+    };
+  }
+  static importJSON(serializedNode) {
+    return new _ImageNode(
+      serializedNode.src,
+      serializedNode.alt,
+      serializedNode.width,
+      serializedNode.height
+    );
+  }
+  exportJSON() {
+    return {
+      type: "image",
+      version: 1,
+      src: this.__src,
+      alt: this.__alt,
+      width: this.__width,
+      height: this.__height
+    };
+  }
+  getSrc() {
+    return this.__src;
+  }
+  getAlt() {
+    return this.__alt;
+  }
+  getTextContent() {
+    return "";
+  }
+  isInline() {
+    return false;
+  }
+  decorate() {
+    return /* @__PURE__ */ jsx(
+      ImageComponent,
+      {
+        src: this.__src,
+        alt: this.__alt,
+        width: this.__width,
+        height: this.__height,
+        nodeKey: this.__key
+      }
+    );
+  }
+};
+function $createImageNode(src, alt = "", width, height) {
+  return new ImageNode(src, alt, width, height);
+}
+function $isImageNode(node) {
+  return node instanceof ImageNode;
+}
+
+// src/nodes/EmojiNode.ts
+import {
+  DecoratorNode as DecoratorNode3,
+  $applyNodeReplacement
+} from "lexical";
+function getEmojiUrl(emoji) {
+  const codePoints = [...emoji].map((char) => {
+    const cp = char.codePointAt(0);
+    if (cp === 65039) return null;
+    return cp?.toString(16);
+  }).filter(Boolean).join("-");
+  return `https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/${codePoints}.png`;
+}
+var EmojiNode = class _EmojiNode extends DecoratorNode3 {
+  static getType() {
+    return "emoji";
+  }
+  static clone(node) {
+    return new _EmojiNode(node.__emoji, node.__key);
+  }
+  constructor(emoji, key) {
+    super(key);
+    this.__emoji = emoji;
+  }
+  createDOM(config) {
+    const span = document.createElement("span");
+    span.className = "im-composer-emoji";
+    const img = document.createElement("img");
+    img.src = getEmojiUrl(this.__emoji);
+    img.alt = this.__emoji;
+    img.className = "im-composer-emoji-img";
+    img.draggable = false;
+    img.setAttribute("data-emoji", this.__emoji);
+    span.appendChild(img);
+    return span;
+  }
+  updateDOM() {
+    return false;
+  }
+  exportDOM() {
+    const span = document.createElement("span");
+    span.textContent = this.__emoji;
+    return { element: span };
+  }
+  static importDOM() {
+    return {
+      img: (node) => {
+        const img = node;
+        const emoji = img.getAttribute("data-emoji");
+        if (emoji) {
+          return {
+            conversion: () => ({ node: new _EmojiNode(emoji) }),
+            priority: 1
+          };
+        }
+        return null;
+      }
+    };
+  }
+  static importJSON(serializedNode) {
+    return new _EmojiNode(serializedNode.emoji);
+  }
+  exportJSON() {
+    return {
+      type: "emoji",
+      version: 1,
+      emoji: this.__emoji
+    };
+  }
+  getEmoji() {
+    return this.__emoji;
+  }
+  getTextContent() {
+    return this.__emoji;
+  }
+  isIsolated() {
+    return true;
+  }
+  isInline() {
+    return true;
+  }
+  canInsertTextBefore() {
+    return true;
+  }
+  canInsertTextAfter() {
+    return true;
+  }
+  decorate() {
+    return null;
+  }
+};
+function $createEmojiNode(emoji) {
+  return $applyNodeReplacement(new EmojiNode(emoji));
+}
+function $isEmojiNode(node) {
+  return node instanceof EmojiNode;
+}
+
+// src/nodes/QuoteNode.tsx
+import {
+  DecoratorNode as DecoratorNode4,
+  $applyNodeReplacement as $applyNodeReplacement2,
+  $getNodeByKey as $getNodeByKey2
+} from "lexical";
+import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexical/react/LexicalComposerContext";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function QuoteMessageComponent({ title, content, nodeKey }) {
+  const [editor] = useLexicalComposerContext2();
+  const handleDelete = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    editor.update(() => {
+      const node = $getNodeByKey2(nodeKey);
+      node?.remove();
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "im-composer-quote", children: [
+    /* @__PURE__ */ jsxs("span", { className: "im-composer-quote-text", children: [
+      /* @__PURE__ */ jsx2("span", { className: "im-composer-quote-title", children: title }),
+      /* @__PURE__ */ jsx2("span", { className: "im-composer-quote-content", children: content })
+    ] }),
+    /* @__PURE__ */ jsx2("button", { className: "im-composer-quote-close", onClick: handleDelete, children: "\xD7" })
+  ] });
+}
+var QuoteNode = class _QuoteNode extends DecoratorNode4 {
+  static getType() {
+    return "quote-message";
+  }
+  static clone(node) {
+    return new _QuoteNode(node.__title, node.__content, node.__key);
+  }
+  constructor(title, content, key) {
+    super(key);
+    this.__title = title;
+    this.__content = content;
+  }
+  createDOM(config) {
+    const div = document.createElement("div");
+    div.className = "im-composer-quote-wrapper";
+    div.contentEditable = "false";
+    return div;
+  }
+  updateDOM() {
+    return false;
+  }
+  exportDOM() {
+    const element = document.createElement("blockquote");
+    element.setAttribute("data-title", this.__title);
+    element.textContent = this.__content;
+    return { element };
+  }
+  static importDOM() {
+    return {
+      blockquote: () => ({
+        conversion: (element) => {
+          const title = element.getAttribute("data-title") || "";
+          const content = element.textContent || "";
+          return { node: new _QuoteNode(title, content) };
+        },
+        priority: 0
+      })
+    };
+  }
+  static importJSON(serializedNode) {
+    return new _QuoteNode(serializedNode.title, serializedNode.content);
+  }
+  exportJSON() {
+    return {
+      type: "quote-message",
+      version: 1,
+      title: this.__title,
+      content: this.__content
+    };
+  }
+  getTitle() {
+    return this.__title;
+  }
+  getContent() {
+    return this.__content;
+  }
+  getTextContent() {
+    return "";
+  }
+  isIsolated() {
+    return true;
+  }
+  isInline() {
+    return false;
+  }
+  decorate() {
+    return /* @__PURE__ */ jsx2(
+      QuoteMessageComponent,
+      {
+        title: this.__title,
+        content: this.__content,
+        nodeKey: this.__key
+      }
+    );
+  }
+};
+function $createQuoteNode(title, content) {
+  return $applyNodeReplacement2(new QuoteNode(title, content));
+}
+function $isQuoteNode(node) {
+  return node instanceof QuoteNode;
+}
+
+// src/plugins/MentionPlugin.tsx
+import { useEffect as useEffect2, useCallback as useCallback2, useState, useRef as useRef2 } from "react";
+import { useLexicalComposerContext as useLexicalComposerContext3 } from "@lexical/react/LexicalComposerContext";
+import {
+  $getSelection as $getSelection2,
+  $isRangeSelection,
+  COMMAND_PRIORITY_LOW as COMMAND_PRIORITY_LOW2,
+  COMMAND_PRIORITY_CRITICAL,
+  KEY_ARROW_DOWN_COMMAND,
+  KEY_ARROW_UP_COMMAND,
+  KEY_ENTER_COMMAND,
+  KEY_ESCAPE_COMMAND,
+  TextNode,
+  $createTextNode,
+  $getRoot
+} from "lexical";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function MentionPlugin({ mentionProvider, enabled = true, maxMentions, renderMentionItem }) {
+  const [editor] = useLexicalComposerContext3();
+  const [isOpen, setIsOpen] = useState(false);
+  const [members, setMembers] = useState([]);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [matchInfo, setMatchInfo] = useState(null);
+  const [cursorBottom, setCursorBottom] = useState(0);
+  const [menuLeft, setMenuLeft] = useState(0);
+  const isComposingRef = useRef2(false);
+  const menuRef = useRef2(null);
+  const itemRefs = useRef2(/* @__PURE__ */ new Map());
+  const checkForMention = useCallback2(() => {
+    if (!enabled || isComposingRef.current) {
+      setIsOpen(false);
+      return;
+    }
+    editor.getEditorState().read(() => {
+      const selection = $getSelection2();
+      if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+        setIsOpen(false);
+        return;
+      }
+      if (maxMentions !== void 0) {
+        const root = $getRoot();
+        let mentionCount = 0;
+        const countMentions = (node) => {
+          if ($isMentionNode(node)) {
+            mentionCount++;
+          }
+          if (node.getChildren) {
+            node.getChildren().forEach(countMentions);
+          }
+        };
+        countMentions(root);
+        if (mentionCount >= maxMentions) {
+          setIsOpen(false);
+          return;
+        }
+      }
+      const anchor = selection.anchor;
+      const anchorNode = anchor.getNode();
+      if (!(anchorNode instanceof TextNode)) {
+        setIsOpen(false);
+        return;
+      }
+      const text = anchorNode.getTextContent();
+      const offset = anchor.offset;
+      let atIndex = -1;
+      for (let i = offset - 1; i >= 0; i--) {
+        const char = text[i];
+        if (char === "@") {
+          atIndex = i;
+          break;
+        }
+        if (/\s/.test(char)) {
+          break;
+        }
+      }
+      if (atIndex === -1) {
+        setIsOpen(false);
+        return;
+      }
+      const query = text.slice(atIndex + 1, offset);
+      const replaceableString = text.slice(atIndex, offset);
+      setMatchInfo({
+        leadOffset: atIndex,
+        matchingString: query,
+        replaceableString
+      });
+      const domSelection = window.getSelection();
+      if (domSelection && domSelection.rangeCount > 0) {
+        const range = domSelection.getRangeAt(0);
+        const rect = range.getBoundingClientRect();
+        setCursorBottom(window.innerHeight - rect.top + 4);
+        setMenuLeft(rect.left);
+      }
+      if (mentionProvider) {
+        mentionProvider(query).then((results) => {
+          setMembers(results);
+          setSelectedIndex(0);
+          setIsOpen(results.length > 0);
+        });
+      }
+    });
+  }, [editor, enabled, mentionProvider, maxMentions]);
+  useEffect2(() => {
+    const root = editor.getRootElement();
+    if (!root) return;
+    const handleCompositionStart = () => {
+      isComposingRef.current = true;
+    };
+    const handleCompositionEnd = () => {
+      isComposingRef.current = false;
+      setTimeout(() => {
+        checkForMention();
+      }, 0);
+    };
+    root.addEventListener("compositionstart", handleCompositionStart);
+    root.addEventListener("compositionend", handleCompositionEnd);
+    return () => {
+      root.removeEventListener("compositionstart", handleCompositionStart);
+      root.removeEventListener("compositionend", handleCompositionEnd);
+    };
+  }, [editor, checkForMention]);
+  useEffect2(() => {
+    return editor.registerUpdateListener(({ dirtyLeaves }) => {
+      if (dirtyLeaves.size > 0) {
+        checkForMention();
+      }
+    });
+  }, [editor, checkForMention]);
+  const insertMention = useCallback2(
+    (member) => {
+      if (!matchInfo) return;
+      editor.update(() => {
+        const selection = $getSelection2();
+        if (!$isRangeSelection(selection)) return;
+        const anchor = selection.anchor;
+        const anchorNode = anchor.getNode();
+        if (!(anchorNode instanceof TextNode)) return;
+        const text = anchorNode.getTextContent();
+        const beforeAt = text.slice(0, matchInfo.leadOffset);
+        const afterQuery = text.slice(matchInfo.leadOffset + matchInfo.replaceableString.length);
+        const mentionNode = $createMentionNode(member.userId, member.display);
+        if (beforeAt) {
+          const beforeNode = $createTextNode(beforeAt);
+          anchorNode.replace(beforeNode);
+          beforeNode.insertAfter(mentionNode);
+        } else {
+          anchorNode.replace(mentionNode);
+        }
+        if (afterQuery) {
+          const afterNode = $createTextNode(afterQuery);
+          mentionNode.insertAfter(afterNode);
+          afterNode.selectStart();
+        } else {
+          mentionNode.selectNext();
+        }
+      });
+      setIsOpen(false);
+      setMatchInfo(null);
+    },
+    [editor, matchInfo]
+  );
+  useEffect2(() => {
+    if (!isOpen) return;
+    const removeArrowDown = editor.registerCommand(
+      KEY_ARROW_DOWN_COMMAND,
+      (event) => {
+        event.preventDefault();
+        setSelectedIndex((i) => (i + 1) % members.length);
+        return true;
+      },
+      COMMAND_PRIORITY_LOW2
+    );
+    const removeArrowUp = editor.registerCommand(
+      KEY_ARROW_UP_COMMAND,
+      (event) => {
+        event.preventDefault();
+        setSelectedIndex((i) => (i - 1 + members.length) % members.length);
+        return true;
+      },
+      COMMAND_PRIORITY_LOW2
+    );
+    const removeEnter = editor.registerCommand(
+      KEY_ENTER_COMMAND,
+      (event) => {
+        if (members[selectedIndex]) {
+          event?.preventDefault();
+          insertMention(members[selectedIndex]);
+          return true;
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_CRITICAL
+    );
+    const removeEscape = editor.registerCommand(
+      KEY_ESCAPE_COMMAND,
+      () => {
+        setIsOpen(false);
+        return true;
+      },
+      COMMAND_PRIORITY_LOW2
+    );
+    return () => {
+      removeArrowDown();
+      removeArrowUp();
+      removeEnter();
+      removeEscape();
+    };
+  }, [editor, isOpen, members, selectedIndex, insertMention]);
+  useEffect2(() => {
+    if (isOpen && itemRefs.current.has(selectedIndex)) {
+      const item = itemRefs.current.get(selectedIndex);
+      item?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    }
+  }, [isOpen, selectedIndex]);
+  if (!isOpen || members.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ref: menuRef,
+      className: "im-composer-mention-menu",
+      style: {
+        position: "fixed",
+        bottom: cursorBottom,
+        left: menuLeft
+      },
+      children: members.map((member, index) => /* @__PURE__ */ jsx3(
+        "div",
+        {
+          ref: (el) => {
+            if (el) {
+              itemRefs.current.set(index, el);
+            } else {
+              itemRefs.current.delete(index);
+            }
+          },
+          className: `im-composer-mention-item ${index === selectedIndex ? "selected" : ""}`,
+          onClick: () => insertMention(member),
+          onMouseEnter: () => setSelectedIndex(index),
+          children: renderMentionItem ? renderMentionItem({ member, isSelected: index === selectedIndex }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+            member.avatarUrl && /* @__PURE__ */ jsx3(
+              "img",
+              {
+                src: member.avatarUrl,
+                alt: "",
+                className: "im-composer-mention-avatar"
+              }
+            ),
+            /* @__PURE__ */ jsx3("span", { className: "im-composer-mention-name", children: member.display })
+          ] })
+        },
+        member.userId
+      ))
+    }
+  );
+}
+
+// src/plugins/PlainTextPastePlugin.tsx
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
+import { useLexicalComposerContext as useLexicalComposerContext4 } from "@lexical/react/LexicalComposerContext";
+import {
+  $getSelection as $getSelection3,
+  $isRangeSelection as $isRangeSelection2,
+  COMMAND_PRIORITY_HIGH,
+  PASTE_COMMAND,
+  $createParagraphNode,
+  $createTextNode as $createTextNode2
+} from "lexical";
+function PlainTextPastePlugin({ onFilePaste }) {
+  const [editor] = useLexicalComposerContext4();
+  const isComposingRef = useRef3(false);
+  useEffect3(() => {
+    const root = editor.getRootElement();
+    if (!root) return;
+    const handleCompositionStart = () => {
+      isComposingRef.current = true;
+    };
+    const handleCompositionEnd = () => {
+      isComposingRef.current = false;
+    };
+    root.addEventListener("compositionstart", handleCompositionStart);
+    root.addEventListener("compositionend", handleCompositionEnd);
+    return () => {
+      root.removeEventListener("compositionstart", handleCompositionStart);
+      root.removeEventListener("compositionend", handleCompositionEnd);
+    };
+  }, [editor]);
+  useEffect3(() => {
+    return editor.registerCommand(
+      PASTE_COMMAND,
+      (event) => {
+        if (isComposingRef.current) {
+          return false;
+        }
+        const clipboardData = event.clipboardData;
+        if (!clipboardData) return false;
+        if (clipboardData.files && clipboardData.files.length > 0) {
+          event.preventDefault();
+          const files = Array.from(clipboardData.files);
+          onFilePaste?.(files);
+          return true;
+        }
+        const text = clipboardData.getData("text/plain");
+        if (text) {
+          event.preventDefault();
+          editor.update(() => {
+            const selection = $getSelection3();
+            if (!$isRangeSelection2(selection)) return;
+            const lines = text.split(/\r?\n/);
+            if (lines.length === 1) {
+              selection.insertText(lines[0]);
+            } else {
+              lines.forEach((line, index) => {
+                if (index > 0) {
+                  const paragraph = $createParagraphNode();
+                  const textNode = $createTextNode2(line);
+                  paragraph.append(textNode);
+                  const currentSelection = $getSelection3();
+                  if ($isRangeSelection2(currentSelection)) {
+                    currentSelection.insertParagraph();
+                    if (line) {
+                      currentSelection.insertText(line);
+                    }
+                  }
+                } else {
+                  selection.insertText(line);
+                }
+              });
+            }
+          });
+          return true;
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_HIGH
+    );
+  }, [editor, onFilePaste]);
+  return null;
+}
+
+// src/plugins/RichTextPastePlugin.tsx
+import { useEffect as useEffect4, useRef as useRef4 } from "react";
+import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
+import { COMMAND_PRIORITY_HIGH as COMMAND_PRIORITY_HIGH2, PASTE_COMMAND as PASTE_COMMAND2 } from "lexical";
+
+// src/utils/helpers.ts
+function generateId() {
+  return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+function formatFileSize(bytes) {
+  if (bytes === 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  const k = 1024;
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${units[i]}`;
+}
+function isMimeTypeAllowed(mime, allowedTypes) {
+  if (!allowedTypes || allowedTypes.length === 0) {
+    return true;
+  }
+  return allowedTypes.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/");
+}
+var ALLOWED_PROTOCOLS = ["http:", "https:", "mailto:"];
+function isUrlProtocolAllowed(url) {
+  try {
+    const parsed = new URL(url);
+    return ALLOWED_PROTOCOLS.includes(parsed.protocol);
+  } catch {
+    return false;
+  }
+}
+function sanitizeUrl(url) {
+  if (!url) return null;
+  if (!url.includes("://") && !url.startsWith("mailto:")) {
+    url = "https://" + url;
+  }
+  if (isUrlProtocolAllowed(url)) {
+    return url;
+  }
+  return null;
+}
+
+// src/utils/exportPayload.ts
+import { $getRoot as $getRoot2, $isElementNode } from "lexical";
+import { $convertToMarkdownString, TRANSFORMERS } from "@lexical/markdown";
+function exportPlainPayload(editor, attachments) {
+  let plainText = "";
+  const mentions = [];
+  let quote;
+  editor.getEditorState().read(() => {
+    const root = $getRoot2();
+    const children = root.getChildren();
+    children.forEach((child) => {
+      if ($isQuoteNode(child)) {
+        quote = {
+          title: child.getTitle(),
+          content: child.getContent()
+        };
+        return;
+      }
+      if (plainText.length > 0) {
+        plainText += "\n";
+      }
+      const descendants = $isElementNode(child) ? child.getChildren() : [];
+      descendants.forEach((node) => {
+        if ($isMentionNode(node)) {
+          const userId = node.getUserId();
+          const display = node.getDisplay();
+          const mentionText = `@${userId} `;
+          const start = plainText.length;
+          const end = start + mentionText.length - 1;
+          mentions.push({
+            userId,
+            display,
+            start,
+            end
+          });
+          plainText += mentionText;
+        } else {
+          plainText += node.getTextContent();
+        }
+      });
+    });
+  });
+  return {
+    type: "text",
+    plainText,
+    mentions,
+    attachments,
+    quote
+  };
+}
+var IMAGE_TRANSFORMER = {
+  dependencies: [ImageNode],
+  export: (node) => {
+    if ($isImageNode(node)) {
+      const src = node.getSrc();
+      const alt = node.getAlt();
+      return `![${alt}](${src})`;
+    }
+    return null;
+  },
+  type: "element",
+  regExp: /!\[([^\]]*)\]\(([^)]*)\)/,
+  // Dummy regex to satisfy type
+  replace: () => {
+  }
+  // Dummy replace to satisfy type
+};
+function exportMarkdownPayload(editor) {
+  let markdown = "";
+  editor.getEditorState().read(() => {
+    const allTransformers = [...TRANSFORMERS, IMAGE_TRANSFORMER];
+    markdown = $convertToMarkdownString(allTransformers);
+  });
+  return {
+    type: "markdown",
+    markdown
+  };
+}
+
+// src/utils/editorUtils.ts
+import { $getRoot as $getRoot3, $createParagraphNode as $createParagraphNode2 } from "lexical";
+import { $convertFromMarkdownString, TRANSFORMERS as TRANSFORMERS2 } from "@lexical/markdown";
+function importMarkdownToEditor(editor, markdown) {
+  editor.update(() => {
+    const root = $getRoot3();
+    root.clear();
+    $convertFromMarkdownString(markdown, TRANSFORMERS2);
+  });
+}
+function clearEditor(editor) {
+  editor.update(() => {
+    const root = $getRoot3();
+    root.clear();
+    const paragraph = $createParagraphNode2();
+    root.append(paragraph);
+    paragraph.select();
+  });
+}
+function isEditorEmpty(editor) {
+  let isEmpty = true;
+  editor.getEditorState().read(() => {
+    const root = $getRoot3();
+    const textContent = root.getTextContent().trim();
+    isEmpty = textContent.length === 0;
+  });
+  return isEmpty;
+}
+
+// src/hooks/useImageUpload.ts
+import { useState as useState2, useCallback as useCallback3 } from "react";
+import { $createParagraphNode as $createParagraphNode3 } from "lexical";
+import { $insertNodes } from "lexical";
+function isSafeImageUrl(url) {
+  try {
+    const parsedUrl = new URL(url);
+    return ["https:", "http:", "blob:", "data:"].includes(parsedUrl.protocol);
+  } catch {
+    return false;
+  }
+}
+function useImageUpload(options = {}) {
+  const { uploadImage, onUploadStart, onUploadEnd, onError } = options;
+  const [uploadCount, setUploadCount] = useState2(0);
+  const upload = useCallback3(
+    async (file) => {
+      if (!uploadImage) {
+        return null;
+      }
+      setUploadCount((c) => c + 1);
+      try {
+        const result = await uploadImage(file);
+        if (!isSafeImageUrl(result.url)) {
+          throw new Error("Image URL must use HTTPS, HTTP, blob:, or data: protocol");
+        }
+        return result;
+      } catch (error) {
+        onError?.(error instanceof Error ? error : new Error("Upload failed"));
+        return null;
+      } finally {
+        setUploadCount((c) => c - 1);
+      }
+    },
+    [uploadImage, onError]
+  );
+  const uploadAndInsert = useCallback3(
+    async (file, editor) => {
+      if (!uploadImage) {
+        return false;
+      }
+      onUploadStart?.();
+      setUploadCount((c) => c + 1);
+      try {
+        const result = await uploadImage(file);
+        if (!result || !result.url) {
+          return false;
+        }
+        if (!isSafeImageUrl(result.url)) {
+          throw new Error("Image URL must use HTTPS, HTTP, blob:, or data: protocol");
+        }
+        editor.update(() => {
+          const imageNode = $createImageNode(result.url, result.alt || file.name);
+          const paragraphNode = $createParagraphNode3();
+          $insertNodes([imageNode, paragraphNode]);
+          paragraphNode.select();
+        });
+        setTimeout(() => {
+          editor.focus();
+        }, 0);
+        return true;
+      } catch (error) {
+        onError?.(error instanceof Error ? error : new Error("Upload failed"));
+        return false;
+      } finally {
+        setUploadCount((c) => c - 1);
+        onUploadEnd?.();
+      }
+    },
+    [uploadImage, onUploadStart, onUploadEnd, onError]
+  );
+  return {
+    isUploading: uploadCount > 0,
+    uploadCount,
+    upload,
+    uploadAndInsert
+  };
+}
+
+// src/plugins/RichTextPastePlugin.tsx
+function RichTextPastePlugin({
+  uploadImage,
+  onUploadStart,
+  onUploadEnd,
+  onError
+}) {
+  const [editor] = useLexicalComposerContext5();
+  const isComposingRef = useRef4(false);
+  const { uploadAndInsert } = useImageUpload({
+    uploadImage,
+    onUploadStart,
+    onUploadEnd,
+    onError
+  });
+  useEffect4(() => {
+    const root = editor.getRootElement();
+    if (!root) return;
+    const handleCompositionStart = () => {
+      isComposingRef.current = true;
+    };
+    const handleCompositionEnd = () => {
+      isComposingRef.current = false;
+    };
+    root.addEventListener("compositionstart", handleCompositionStart);
+    root.addEventListener("compositionend", handleCompositionEnd);
+    return () => {
+      root.removeEventListener("compositionstart", handleCompositionStart);
+      root.removeEventListener("compositionend", handleCompositionEnd);
+    };
+  }, [editor]);
+  useEffect4(() => {
+    return editor.registerCommand(
+      PASTE_COMMAND2,
+      (event) => {
+        if (isComposingRef.current) {
+          return false;
+        }
+        const clipboardData = event.clipboardData;
+        if (!clipboardData) return false;
+        if (clipboardData.files && clipboardData.files.length > 0 && uploadImage) {
+          const files = Array.from(clipboardData.files);
+          const imageFiles = files.filter(isImageFile);
+          if (imageFiles.length > 0) {
+            event.preventDefault();
+            imageFiles.forEach(async (file) => {
+              await uploadAndInsert(file, editor);
+            });
+            return true;
+          }
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_HIGH2
+    );
+  }, [editor, uploadImage, uploadAndInsert]);
+  return null;
+}
+
+// src/plugins/ToolbarPlugin.tsx
+import { useCallback as useCallback4, useState as useState3, useRef as useRef5, useEffect as useEffect5 } from "react";
+import { useLexicalComposerContext as useLexicalComposerContext6 } from "@lexical/react/LexicalComposerContext";
+import {
+  $getSelection as $getSelection4,
+  $isRangeSelection as $isRangeSelection3,
+  $setSelection,
+  FORMAT_TEXT_COMMAND,
+  $createTextNode as $createTextNode4
+} from "lexical";
+import {
+  $setBlocksType
+} from "@lexical/selection";
+import { $createHeadingNode, $createQuoteNode as $createQuoteNode2 } from "@lexical/rich-text";
+import {
+  INSERT_ORDERED_LIST_COMMAND,
+  INSERT_UNORDERED_LIST_COMMAND
+} from "@lexical/list";
+import { $createCodeNode } from "@lexical/code";
+import { $createLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
+
+// src/components/Icons.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var BoldIcon = () => /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx4("path", { d: "M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" }),
+  /* @__PURE__ */ jsx4("path", { d: "M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" })
+] });
+var ItalicIcon = () => /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx4("line", { x1: "19", y1: "4", x2: "10", y2: "4" }),
+  /* @__PURE__ */ jsx4("line", { x1: "14", y1: "20", x2: "5", y2: "20" }),
+  /* @__PURE__ */ jsx4("line", { x1: "15", y1: "4", x2: "9", y2: "20" })
+] });
+var StrikeIcon = () => /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx4("path", { d: "M17.3 19c-1.4 1.3-3.2 2-5.3 2-4.7 0-8.5-4-8.5-9s3.8-9 8.5-9c2.1 0 3.9.7 5.3 2" }),
+  /* @__PURE__ */ jsx4("line", { x1: "4", y1: "12", x2: "20", y2: "12" })
+] });
+var H1Icon = () => /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx4("path", { d: "M4 12h8" }),
+  /* @__PURE__ */ jsx4("path", { d: "M4 18V6" }),
+  /* @__PURE__ */ jsx4("path", { d: "M12 18V6" }),
+  /* @__PURE__ */ jsx4("path", { d: "m17 12 3-2v8" })
+] });
+var H2Icon = () => /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx4("path", { d: "M4 12h8" }),
+  /* @__PURE__ */ jsx4("path", { d: "M4 18V6" }),
+  /* @__PURE__ */ jsx4("path", { d: "M12 18V6" }),
+  /* @__PURE__ */ jsx4("path", { d: "M21 18h-4c0-4 4-3 4-6 0-1.5-2-2.5-4-1" })
+] });
+var H3Icon = () => /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx4("path", { d: "M4 12h8" }),
+  /* @__PURE__ */ jsx4("path", { d: "M4 18V6" }),
+  /* @__PURE__ */ jsx4("path", { d: "M12 18V6" }),
+  /* @__PURE__ */ jsx4("path", { d: "M17.5 11.5c.5-.5 2.5-.5 3 0s.5 2 0 2.5-2 .5-2 .5 1.5 0 2 .5.5 2.5 0 3-2.5.5-3 0" })
+] });
+var BulletListIcon = () => /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx4("line", { x1: "8", y1: "6", x2: "21", y2: "6" }),
+  /* @__PURE__ */ jsx4("line", { x1: "8", y1: "12", x2: "21", y2: "12" }),
+  /* @__PURE__ */ jsx4("line", { x1: "8", y1: "18", x2: "21", y2: "18" }),
+  /* @__PURE__ */ jsx4("line", { x1: "3", y1: "6", x2: "3.01", y2: "6" }),
+  /* @__PURE__ */ jsx4("line", { x1: "3", y1: "12", x2: "3.01", y2: "12" }),
+  /* @__PURE__ */ jsx4("line", { x1: "3", y1: "18", x2: "3.01", y2: "18" })
+] });
+var OrderedListIcon = () => /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx4("line", { x1: "10", y1: "6", x2: "21", y2: "6" }),
+  /* @__PURE__ */ jsx4("line", { x1: "10", y1: "12", x2: "21", y2: "12" }),
+  /* @__PURE__ */ jsx4("line", { x1: "10", y1: "18", x2: "21", y2: "18" }),
+  /* @__PURE__ */ jsx4("path", { d: "M4 6h1v4" }),
+  /* @__PURE__ */ jsx4("path", { d: "M4 10h2" }),
+  /* @__PURE__ */ jsx4("path", { d: "M6 18H4c0-1 2-2 2-3s-1-1.5-2-1" })
+] });
+var QuoteIcon = () => /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx4("path", { d: "M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z", transform: "scale(0.8) translate(3, 3)" }),
+  /* @__PURE__ */ jsx4("path", { d: "M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z", transform: "scale(0.8) translate(3, 3)" })
+] });
+var CodeIcon = () => /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx4("polyline", { points: "16 18 22 12 16 6" }),
+  /* @__PURE__ */ jsx4("polyline", { points: "8 6 2 12 8 18" })
+] });
+var LinkIcon = () => /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx4("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
+  /* @__PURE__ */ jsx4("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
+] });
+var ImageIcon = () => /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx4("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+  /* @__PURE__ */ jsx4("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+  /* @__PURE__ */ jsx4("polyline", { points: "21 15 16 10 5 21" })
+] });
+
+// src/LocaleContext.tsx
+import { createContext, useContext } from "react";
+var defaultLocale = {
+  linkDialog: {
+    textLabel: "Text",
+    urlLabel: "URL",
+    cancelButton: "Cancel",
+    insertButton: "Insert",
+    saveButton: "Save"
+  },
+  toolbar: {
+    bold: "Bold",
+    italic: "Italic",
+    strikethrough: "Strikethrough",
+    code: "Code",
+    heading1: "Heading 1",
+    heading2: "Heading 2",
+    heading3: "Heading 3",
+    bulletList: "Bullet List",
+    orderedList: "Ordered List",
+    quote: "Quote",
+    codeBlock: "Code Block",
+    link: "Insert Link",
+    image: "Insert Image"
+  }
+};
+var LocaleContext = createContext(defaultLocale);
+function useLocale() {
+  return useContext(LocaleContext);
+}
+function mergeLocale(custom) {
+  if (!custom) return defaultLocale;
+  return {
+    linkDialog: { ...defaultLocale.linkDialog, ...custom.linkDialog },
+    toolbar: { ...defaultLocale.toolbar, ...custom.toolbar }
+  };
+}
+
+// src/plugins/ToolbarPlugin.tsx
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function ToolbarPlugin({
+  uploadImage,
+  enabledSyntax,
+  onUploadStart,
+  onUploadEnd,
+  onError
+}) {
+  const [editor] = useLexicalComposerContext6();
+  const locale = useLocale();
+  const [showLinkDialog, setShowLinkDialog] = useState3(false);
+  const [linkUrl, setLinkUrl] = useState3("");
+  const [linkText, setLinkText] = useState3("");
+  const [savedSelection, setSavedSelection] = useState3(null);
+  const fileInputRef = useRef5(null);
+  const [isBold, setIsBold] = useState3(false);
+  const [isItalic, setIsItalic] = useState3(false);
+  const [isStrike, setIsStrike] = useState3(false);
+  const [isCode, setIsCode] = useState3(false);
+  const { uploadAndInsert } = useImageUpload({
+    uploadImage,
+    onUploadStart,
+    onUploadEnd,
+    onError
+  });
+  const updateToolbar = useCallback4(() => {
+    const selection = $getSelection4();
+    if ($isRangeSelection3(selection)) {
+      setIsBold(selection.hasFormat("bold"));
+      setIsItalic(selection.hasFormat("italic"));
+      setIsStrike(selection.hasFormat("strikethrough"));
+      setIsCode(selection.hasFormat("code"));
+    }
+  }, []);
+  useEffect5(() => {
+    return editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        updateToolbar();
+      });
+    });
+  }, [editor, updateToolbar]);
+  const syntax = {
+    heading: enabledSyntax?.heading ?? true,
+    bold: enabledSyntax?.bold ?? true,
+    italic: enabledSyntax?.italic ?? true,
+    strike: enabledSyntax?.strike ?? true,
+    codeInline: enabledSyntax?.codeInline ?? true,
+    codeBlock: enabledSyntax?.codeBlock ?? true,
+    quote: enabledSyntax?.quote ?? true,
+    list: enabledSyntax?.list ?? true,
+    link: enabledSyntax?.link ?? true,
+    image: enabledSyntax?.image ?? true
+  };
+  const formatBold = useCallback4(() => {
+    editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
+  }, [editor]);
+  const formatItalic = useCallback4(() => {
+    editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
+  }, [editor]);
+  const formatStrike = useCallback4(() => {
+    editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
+  }, [editor]);
+  const formatHeading = useCallback4(
+    (headingSize) => {
+      editor.update(() => {
+        const selection = $getSelection4();
+        if ($isRangeSelection3(selection)) {
+          $setBlocksType(selection, () => $createHeadingNode(headingSize));
+        }
+      });
+    },
+    [editor]
+  );
+  const formatBulletList = useCallback4(() => {
+    editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0);
+  }, [editor]);
+  const formatOrderedList = useCallback4(() => {
+    editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0);
+  }, [editor]);
+  const formatQuote = useCallback4(() => {
+    editor.update(() => {
+      const selection = $getSelection4();
+      if ($isRangeSelection3(selection)) {
+        $setBlocksType(selection, () => $createQuoteNode2());
+      }
+    });
+  }, [editor]);
+  const formatCodeBlock = useCallback4(() => {
+    editor.update(() => {
+      const selection = $getSelection4();
+      if ($isRangeSelection3(selection)) {
+        $setBlocksType(selection, () => $createCodeNode());
+      }
+    });
+  }, [editor]);
+  const handleLinkSubmit = useCallback4(() => {
+    const url = sanitizeUrl(linkUrl);
+    if (!url) {
+      onError?.(new Error("Invalid URL"));
+      return;
+    }
+    editor.update(() => {
+      if (savedSelection) {
+        $setSelection(savedSelection);
+      }
+      const selection = $getSelection4();
+      if ($isRangeSelection3(selection)) {
+        if (selection.isCollapsed()) {
+          const linkNode = $createLinkNode(url);
+          const textNode = $createTextNode4(linkText || url);
+          linkNode.append(textNode);
+          const { $insertNodes: $insertNodes2 } = __require("lexical");
+          $insertNodes2([linkNode]);
+        } else {
+          editor.dispatchCommand(TOGGLE_LINK_COMMAND, url);
+        }
+      }
+    });
+    setSavedSelection(null);
+    setShowLinkDialog(false);
+    setLinkUrl("");
+    setLinkText("");
+  }, [editor, linkUrl, linkText, savedSelection, onError]);
+  const handleImageSelect = useCallback4(
+    async (event) => {
+      const file = event.target.files?.[0];
+      if (!file) return;
+      event.target.value = "";
+      await uploadAndInsert(file, editor);
+    },
+    [editor, uploadAndInsert]
+  );
+  return /* @__PURE__ */ jsxs4("div", { className: "im-composer-toolbar", children: [
+    syntax.bold && /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        className: `im-composer-toolbar-btn ${isBold ? "active" : ""}`,
+        onClick: formatBold,
+        title: "Bold (Ctrl+B)",
+        children: /* @__PURE__ */ jsx5(BoldIcon, {})
+      }
+    ),
+    syntax.italic && /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        className: `im-composer-toolbar-btn ${isItalic ? "active" : ""}`,
+        onClick: formatItalic,
+        title: "Italic (Ctrl+I)",
+        children: /* @__PURE__ */ jsx5(ItalicIcon, {})
+      }
+    ),
+    syntax.strike && /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        className: `im-composer-toolbar-btn ${isStrike ? "active" : ""}`,
+        onClick: formatStrike,
+        title: "Strikethrough",
+        children: /* @__PURE__ */ jsx5(StrikeIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx5("span", { className: "im-composer-toolbar-divider" }),
+    syntax.heading && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          className: "im-composer-toolbar-btn",
+          onClick: () => formatHeading("h1"),
+          title: "Heading 1",
+          children: /* @__PURE__ */ jsx5(H1Icon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          className: "im-composer-toolbar-btn",
+          onClick: () => formatHeading("h2"),
+          title: "Heading 2",
+          children: /* @__PURE__ */ jsx5(H2Icon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          className: "im-composer-toolbar-btn",
+          onClick: () => formatHeading("h3"),
+          title: "Heading 3",
+          children: /* @__PURE__ */ jsx5(H3Icon, {})
+        }
+      )
+    ] }),
+    syntax.list && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          className: "im-composer-toolbar-btn",
+          onClick: formatBulletList,
+          title: "Bullet List",
+          children: /* @__PURE__ */ jsx5(BulletListIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          className: "im-composer-toolbar-btn",
+          onClick: formatOrderedList,
+          title: "Ordered List",
+          children: /* @__PURE__ */ jsx5(OrderedListIcon, {})
+        }
+      )
+    ] }),
+    syntax.quote && /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        className: "im-composer-toolbar-btn",
+        onClick: formatQuote,
+        title: "Quote",
+        children: /* @__PURE__ */ jsx5(QuoteIcon, {})
+      }
+    ),
+    syntax.codeBlock && /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        className: "im-composer-toolbar-btn",
+        onClick: formatCodeBlock,
+        title: "Code Block",
+        children: /* @__PURE__ */ jsx5(CodeIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx5("span", { className: "im-composer-toolbar-divider" }),
+    syntax.link && /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        className: "im-composer-toolbar-btn",
+        onClick: () => {
+          editor.getEditorState().read(() => {
+            const selection = $getSelection4();
+            if ($isRangeSelection3(selection)) {
+              setSavedSelection(selection.clone());
+              const selectedText = selection.getTextContent();
+              if (selectedText) {
+                setLinkText(selectedText);
+              }
+            }
+          });
+          setShowLinkDialog(true);
+        },
+        title: "Insert Link",
+        children: /* @__PURE__ */ jsx5(LinkIcon, {})
+      }
+    ),
+    syntax.image && uploadImage && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          className: "im-composer-toolbar-btn",
+          onClick: () => fileInputRef.current?.click(),
+          title: "Insert Image",
+          children: /* @__PURE__ */ jsx5(ImageIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "input",
+        {
+          ref: fileInputRef,
+          type: "file",
+          accept: "image/*",
+          style: { display: "none" },
+          onChange: handleImageSelect
+        }
+      )
+    ] }),
+    showLinkDialog && /* @__PURE__ */ jsx5("div", { className: "im-composer-link-edit-popup ignore-drag", style: { position: "fixed", top: "50%", left: "50%", transform: "translate(-50%, -50%)", zIndex: 99999, width: 220 }, children: /* @__PURE__ */ jsxs4("div", { className: "im-composer-link-edit-content", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "im-composer-link-edit-field", children: [
+        /* @__PURE__ */ jsx5("label", { children: locale.linkDialog.textLabel }),
+        /* @__PURE__ */ jsx5(
+          "input",
+          {
+            type: "text",
+            value: linkText,
+            onChange: (e) => setLinkText(e.target.value),
+            autoFocus: true
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs4("div", { className: "im-composer-link-edit-field", children: [
+        /* @__PURE__ */ jsx5("label", { children: locale.linkDialog.urlLabel }),
+        /* @__PURE__ */ jsx5(
+          "input",
+          {
+            type: "url",
+            value: linkUrl,
+            onChange: (e) => setLinkUrl(e.target.value),
+            placeholder: "https://example.com"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs4("div", { className: "im-composer-link-edit-buttons", children: [
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            className: "remove",
+            onClick: () => {
+              setShowLinkDialog(false);
+              setLinkUrl("");
+              setLinkText("");
+              setSavedSelection(null);
+            },
+            children: locale.linkDialog.cancelButton
+          }
+        ),
+        /* @__PURE__ */ jsx5("button", { type: "button", className: "save", onClick: handleLinkSubmit, children: locale.linkDialog.insertButton })
+      ] })
+    ] }) })
+  ] });
+}
+
+// src/plugins/KeymapPlugin.tsx
+import { useEffect as useEffect6, useRef as useRef6, useCallback as useCallback5 } from "react";
+import { useLexicalComposerContext as useLexicalComposerContext7 } from "@lexical/react/LexicalComposerContext";
+import {
+  COMMAND_PRIORITY_HIGH as COMMAND_PRIORITY_HIGH3,
+  KEY_ENTER_COMMAND as KEY_ENTER_COMMAND2
+} from "lexical";
+function KeymapPlugin({ sendKey = "enter", onSend, canSend, disabled }) {
+  const [editor] = useLexicalComposerContext7();
+  const isComposingRef = useRef6(false);
+  useEffect6(() => {
+    const root = editor.getRootElement();
+    if (!root) return;
+    const handleCompositionStart = () => {
+      isComposingRef.current = true;
+    };
+    const handleCompositionEnd = () => {
+      isComposingRef.current = false;
+    };
+    root.addEventListener("compositionstart", handleCompositionStart);
+    root.addEventListener("compositionend", handleCompositionEnd);
+    return () => {
+      root.removeEventListener("compositionstart", handleCompositionStart);
+      root.removeEventListener("compositionend", handleCompositionEnd);
+    };
+  }, [editor]);
+  const shouldSend = useCallback5(
+    (event) => {
+      if (!event || disabled || isComposingRef.current) return false;
+      switch (sendKey) {
+        case "enter":
+          return !event.shiftKey && !event.ctrlKey && !event.metaKey;
+        case "ctrlEnter":
+          return event.ctrlKey && !event.metaKey;
+        case "cmdEnter":
+          return event.metaKey && !event.ctrlKey;
+        default:
+          return false;
+      }
+    },
+    [sendKey, disabled]
+  );
+  useEffect6(() => {
+    return editor.registerCommand(
+      KEY_ENTER_COMMAND2,
+      (event) => {
+        if (shouldSend(event) && canSend()) {
+          event?.preventDefault();
+          onSend();
+          return true;
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_HIGH3
+    );
+  }, [editor, shouldSend, canSend, onSend]);
+  return null;
+}
+
+// src/plugins/DeletionPlugin.tsx
+import { useLexicalComposerContext as useLexicalComposerContext8 } from "@lexical/react/LexicalComposerContext";
+import {
+  $getSelection as $getSelection5,
+  $isRangeSelection as $isRangeSelection4,
+  KEY_BACKSPACE_COMMAND as KEY_BACKSPACE_COMMAND2,
+  COMMAND_PRIORITY_HIGH as COMMAND_PRIORITY_HIGH4,
+  $isNodeSelection as $isNodeSelection2,
+  $isElementNode as $isElementNode2,
+  $isTextNode
+} from "lexical";
+import { useEffect as useEffect7 } from "react";
+function DeletionPlugin() {
+  const [editor] = useLexicalComposerContext8();
+  useEffect7(() => {
+    return editor.registerCommand(
+      KEY_BACKSPACE_COMMAND2,
+      (event) => {
+        const selection = $getSelection5();
+        if ($isRangeSelection4(selection) && selection.isCollapsed()) {
+          const anchor = selection.anchor;
+          const anchorNode = anchor.getNode();
+          if (anchor.offset === 0) {
+            let prevNode = anchorNode.getPreviousSibling();
+            if (!prevNode) {
+              const parent = anchorNode.getParent();
+              if (parent) {
+                prevNode = parent.getPreviousSibling();
+              }
+            }
+            if (!prevNode || !$isImageNode(prevNode)) {
+              const topElement = anchorNode.getTopLevelElement();
+              if (topElement) {
+                const topPrevSibling = topElement.getPreviousSibling();
+                if (topPrevSibling && $isImageNode(topPrevSibling)) {
+                  prevNode = topPrevSibling;
+                }
+              }
+            }
+            if (prevNode && $isImageNode(prevNode)) {
+              event.preventDefault();
+              prevNode.remove();
+              return true;
+            }
+            const topLevelElement = anchorNode.getTopLevelElement();
+            if (topLevelElement) {
+              const isAtStartOfBlock = anchor.type === "text" && anchor.offset === 0 && anchorNode.getPreviousSibling() === null || anchor.type === "element" && anchor.offset === 0;
+              if (isAtStartOfBlock) {
+                const quotePrevSibling = topLevelElement.getPreviousSibling();
+                if ($isQuoteNode(quotePrevSibling)) {
+                  quotePrevSibling.remove();
+                  return true;
+                }
+              }
+            }
+          }
+          let rawPrevNode = null;
+          if ($isTextNode(anchorNode)) {
+            if (anchor.offset === 0) {
+              rawPrevNode = anchorNode.getPreviousSibling();
+            }
+          } else if ($isElementNode2(anchorNode)) {
+            if (anchor.offset > 0) {
+              const children = anchorNode.getChildren();
+              rawPrevNode = children[anchor.offset - 1];
+            }
+          }
+          if ($isEmojiNode(rawPrevNode) || $isMentionNode(rawPrevNode)) {
+            rawPrevNode.remove();
+            return true;
+          }
+        } else if ($isNodeSelection2(selection)) {
+          const nodes = selection.getNodes();
+          let handled = false;
+          for (const node of nodes) {
+            if ($isQuoteNode(node) || $isEmojiNode(node) || $isMentionNode(node) || $isImageNode(node)) {
+              node.remove();
+              handled = true;
+            }
+          }
+          if (handled) return true;
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_HIGH4
+    );
+  }, [editor]);
+  return null;
+}
+
+// src/plugins/QuoteRemovalListenerPlugin.tsx
+import { useLexicalComposerContext as useLexicalComposerContext9 } from "@lexical/react/LexicalComposerContext";
+import { useEffect as useEffect8 } from "react";
+function QuoteRemovalListenerPlugin({ onQuoteRemoved }) {
+  const [editor] = useLexicalComposerContext9();
+  useEffect8(() => {
+    if (!onQuoteRemoved) return;
+    return editor.registerMutationListener(QuoteNode, (mutations) => {
+      let hasDestroyed = false;
+      let hasCreated = false;
+      for (const [, mutation] of mutations) {
+        if (mutation === "destroyed") {
+          hasDestroyed = true;
+        }
+        if (mutation === "created") {
+          hasCreated = true;
+        }
+      }
+      if (hasDestroyed && !hasCreated) {
+        onQuoteRemoved();
+      }
+    });
+  }, [editor, onQuoteRemoved]);
+  return null;
+}
+
+// src/plugins/LinkShortcutPlugin.tsx
+import { useEffect as useEffect9 } from "react";
+import { useLexicalComposerContext as useLexicalComposerContext10 } from "@lexical/react/LexicalComposerContext";
+import {
+  $getSelection as $getSelection6,
+  $isRangeSelection as $isRangeSelection5,
+  $createTextNode as $createTextNode5,
+  $isTextNode as $isTextNode2
+} from "lexical";
+import { $createLinkNode as $createLinkNode2 } from "@lexical/link";
+var MARKDOWN_LINK_REGEX = /\[([^\]]+)\]\((https?:\/\/[^)\s]+)\)\s$/;
+function LinkShortcutPlugin() {
+  const [editor] = useLexicalComposerContext10();
+  useEffect9(() => {
+    const removeListener = editor.registerUpdateListener(({ editorState, prevEditorState, tags }) => {
+      if (tags.has("history-merge") || tags.has("collaboration")) {
+        return;
+      }
+      editorState.read(() => {
+        const selection = $getSelection6();
+        if (!$isRangeSelection5(selection) || !selection.isCollapsed()) {
+          return;
+        }
+        const anchorNode = selection.anchor.getNode();
+        if (!$isTextNode2(anchorNode)) {
+          return;
+        }
+        const textContent = anchorNode.getTextContent();
+        const match = textContent.match(MARKDOWN_LINK_REGEX);
+        if (!match) {
+          return;
+        }
+        const [fullMatch, linkText, url] = match;
+        try {
+          new URL(url);
+        } catch {
+          return;
+        }
+        editor.update(() => {
+          const currentSelection = $getSelection6();
+          if (!$isRangeSelection5(currentSelection) || !currentSelection.isCollapsed()) {
+            return;
+          }
+          const currentNode = currentSelection.anchor.getNode();
+          if (!$isTextNode2(currentNode)) {
+            return;
+          }
+          const currentText = currentNode.getTextContent();
+          const currentMatch = currentText.match(MARKDOWN_LINK_REGEX);
+          if (!currentMatch) {
+            return;
+          }
+          const matchStart = currentText.indexOf(currentMatch[0]);
+          const beforeText = currentText.slice(0, matchStart);
+          const afterText = "";
+          const linkNode = $createLinkNode2(currentMatch[2]);
+          const linkTextNode = $createTextNode5(currentMatch[1]);
+          linkNode.append(linkTextNode);
+          const spaceNode = $createTextNode5(" ");
+          if (beforeText) {
+            const beforeNode = $createTextNode5(beforeText);
+            currentNode.replace(beforeNode);
+            beforeNode.insertAfter(linkNode);
+            linkNode.insertAfter(spaceNode);
+          } else {
+            currentNode.replace(linkNode);
+            linkNode.insertAfter(spaceNode);
+          }
+          spaceNode.select(1, 1);
+        });
+      });
+    });
+    return removeListener;
+  }, [editor]);
+  return null;
+}
+
+// src/plugins/LinkEditPlugin.tsx
+import { useCallback as useCallback6, useEffect as useEffect10, useState as useState4, useRef as useRef7 } from "react";
+import { createPortal } from "react-dom";
+import { useLexicalComposerContext as useLexicalComposerContext11 } from "@lexical/react/LexicalComposerContext";
+import {
+  $getSelection as $getSelection7,
+  $isRangeSelection as $isRangeSelection6,
+  $createTextNode as $createTextNode6,
+  COMMAND_PRIORITY_LOW as COMMAND_PRIORITY_LOW3,
+  CLICK_COMMAND as CLICK_COMMAND2,
+  $getNodeByKey as $getNodeByKey3
+} from "lexical";
+import { $isLinkNode } from "@lexical/link";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var POPUP_WIDTH = 220;
+var POPUP_HEIGHT = 160;
+var POPUP_MARGIN = 6;
+function LinkEditPlugin() {
+  const [editor] = useLexicalComposerContext11();
+  const locale = useLocale();
+  const [editState, setEditState] = useState4({
+    isOpen: false,
+    linkKey: null,
+    text: "",
+    url: "",
+    position: { top: 0, left: 0 }
+  });
+  const popupRef = useRef7(null);
+  const calculatePosition = useCallback6((linkRect, editorRect) => {
+    let top = linkRect.bottom + POPUP_MARGIN;
+    let left = linkRect.left;
+    const maxRight = editorRect.right - POPUP_MARGIN;
+    if (left + POPUP_WIDTH > maxRight) {
+      left = Math.max(editorRect.left + POPUP_MARGIN, maxRight - POPUP_WIDTH);
+    }
+    const minLeft = editorRect.left + POPUP_MARGIN;
+    if (left < minLeft) {
+      left = minLeft;
+    }
+    const maxBottom = editorRect.bottom - POPUP_MARGIN;
+    if (top + POPUP_HEIGHT > maxBottom) {
+      top = linkRect.top - POPUP_HEIGHT - POPUP_MARGIN;
+    }
+    const minTop = editorRect.top + POPUP_MARGIN;
+    if (top < minTop) {
+      top = minTop;
+    }
+    return { top, left };
+  }, []);
+  useEffect10(() => {
+    if (!editState.isOpen) return;
+    const handleClickOutside = (event) => {
+      if (popupRef.current && !popupRef.current.contains(event.target)) {
+        setEditState((prev) => ({ ...prev, isOpen: false }));
+      }
+    };
+    const timer = setTimeout(() => {
+      document.addEventListener("mousedown", handleClickOutside, true);
+    }, 50);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener("mousedown", handleClickOutside, true);
+    };
+  }, [editState.isOpen]);
+  useEffect10(() => {
+    return editor.registerCommand(
+      CLICK_COMMAND2,
+      (event) => {
+        const target = event.target;
+        const linkElement = target.closest("a");
+        const editorElement = editor.getRootElement();
+        if (linkElement && editorElement && editorElement.contains(linkElement)) {
+          event.preventDefault();
+          event.stopPropagation();
+          const composerContainer = editorElement.closest(".im-composer") || editorElement;
+          const containerRect = composerContainer.getBoundingClientRect();
+          const linkRect = linkElement.getBoundingClientRect();
+          const position = calculatePosition(linkRect, containerRect);
+          editor.getEditorState().read(() => {
+            const selection = $getSelection7();
+            if (!$isRangeSelection6(selection)) return;
+            const node = selection.anchor.getNode();
+            const parent = node.getParent();
+            const linkNode = $isLinkNode(node) ? node : $isLinkNode(parent) ? parent : null;
+            if (linkNode && $isLinkNode(linkNode)) {
+              setEditState({
+                isOpen: true,
+                linkKey: linkNode.getKey(),
+                text: linkNode.getTextContent(),
+                url: linkNode.getURL(),
+                position
+              });
+            }
+          });
+          return true;
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_LOW3
+    );
+  }, [editor, calculatePosition]);
+  const handleSave = useCallback6(() => {
+    if (!editState.linkKey) return;
+    const url = sanitizeUrl(editState.url);
+    if (!url) return;
+    editor.update(() => {
+      const linkNode = $getNodeByKey3(editState.linkKey);
+      if (linkNode && $isLinkNode(linkNode)) {
+        linkNode.setURL(url);
+        const currentText = linkNode.getTextContent();
+        if (currentText !== editState.text && editState.text.trim()) {
+          const children = linkNode.getChildren();
+          if (children.length > 0) {
+            for (let i = children.length - 1; i > 0; i--) {
+              children[i].remove();
+            }
+            const firstChild = children[0];
+            if (firstChild.getType() === "text") {
+              firstChild.setTextContent(editState.text);
+            } else {
+              const newTextNode = $createTextNode6(editState.text);
+              firstChild.replace(newTextNode);
+            }
+          } else {
+            linkNode.append($createTextNode6(editState.text));
+          }
+        }
+      }
+    });
+    setEditState((prev) => ({ ...prev, isOpen: false }));
+  }, [editor, editState]);
+  const handleCancel = useCallback6(() => {
+    setEditState((prev) => ({ ...prev, isOpen: false }));
+  }, []);
+  const handleKeyDown = useCallback6((e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleSave();
+    } else if (e.key === "Escape") {
+      handleCancel();
+    }
+  }, [handleSave, handleCancel]);
+  if (!editState.isOpen) {
+    return null;
+  }
+  return createPortal(
+    /* @__PURE__ */ jsx6(
+      "div",
+      {
+        ref: popupRef,
+        className: "im-composer-link-edit-popup ignore-drag",
+        style: {
+          position: "fixed",
+          top: editState.position.top,
+          left: editState.position.left,
+          width: POPUP_WIDTH,
+          zIndex: 99999
+        },
+        onKeyDown: handleKeyDown,
+        children: /* @__PURE__ */ jsxs5("div", { className: "im-composer-link-edit-content", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "im-composer-link-edit-field", children: [
+            /* @__PURE__ */ jsx6("label", { children: locale.linkDialog.textLabel }),
+            /* @__PURE__ */ jsx6(
+              "input",
+              {
+                type: "text",
+                value: editState.text,
+                onChange: (e) => setEditState((prev) => ({ ...prev, text: e.target.value })),
+                autoFocus: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs5("div", { className: "im-composer-link-edit-field", children: [
+            /* @__PURE__ */ jsx6("label", { children: locale.linkDialog.urlLabel }),
+            /* @__PURE__ */ jsx6(
+              "input",
+              {
+                type: "text",
+                value: editState.url,
+                onChange: (e) => setEditState((prev) => ({ ...prev, url: e.target.value }))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs5("div", { className: "im-composer-link-edit-buttons", children: [
+            /* @__PURE__ */ jsx6("button", { type: "button", onClick: handleCancel, className: "remove", children: locale.linkDialog.cancelButton }),
+            /* @__PURE__ */ jsx6("button", { type: "button", onClick: handleSave, className: "save", children: locale.linkDialog.saveButton })
+          ] })
+        ] })
+      }
+    ),
+    document.body
+  );
+}
+
+// src/components/AttachmentPreviewBar.tsx
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function AttachmentPreviewBar({
+  attachments,
+  onRemove,
+  placement = "bottom"
+}) {
+  if (attachments.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx7("div", { className: `im-composer-attachments im-composer-attachments-${placement}`, children: attachments.map((attachment) => /* @__PURE__ */ jsxs6("div", { className: "im-composer-attachment-item", children: [
+    attachment.previewUrl && isImageFile(attachment.file) ? /* @__PURE__ */ jsx7(
+      "img",
+      {
+        src: attachment.previewUrl,
+        alt: attachment.name,
+        className: "im-composer-attachment-preview"
+      }
+    ) : /* @__PURE__ */ jsx7("div", { className: "im-composer-attachment-icon", children: "\u{1F4C4}" }),
+    /* @__PURE__ */ jsxs6("div", { className: "im-composer-attachment-info", children: [
+      /* @__PURE__ */ jsx7("span", { className: "im-composer-attachment-name", title: attachment.name, children: attachment.name }),
+      /* @__PURE__ */ jsx7("span", { className: "im-composer-attachment-size", children: formatFileSize(attachment.size) })
+    ] }),
+    /* @__PURE__ */ jsx7(
+      "button",
+      {
+        type: "button",
+        className: "im-composer-attachment-remove",
+        onClick: () => onRemove(attachment.id),
+        title: "Remove attachment",
+        children: "\xD7"
+      }
+    )
+  ] }, attachment.id)) });
+}
+
+// src/hooks/useAttachments.ts
+import { useState as useState5, useCallback as useCallback7, useEffect as useEffect11, useRef as useRef8 } from "react";
+function useAttachments(options = {}) {
+  const {
+    maxAttachments = 10,
+    maxFileSize,
+    allowedMimeTypes,
+    onLimitExceeded
+  } = options;
+  const [attachments, setAttachments] = useState5([]);
+  const previewUrlsRef = useRef8(/* @__PURE__ */ new Set());
+  useEffect11(() => {
+    return () => {
+      previewUrlsRef.current.forEach((url) => {
+        URL.revokeObjectURL(url);
+      });
+      previewUrlsRef.current.clear();
+    };
+  }, []);
+  const createPreviewUrl = useCallback7((file) => {
+    if (isImageFile(file)) {
+      const url = URL.createObjectURL(file);
+      previewUrlsRef.current.add(url);
+      return url;
+    }
+    return void 0;
+  }, []);
+  const revokePreviewUrl = useCallback7((url) => {
+    if (url && previewUrlsRef.current.has(url)) {
+      URL.revokeObjectURL(url);
+      previewUrlsRef.current.delete(url);
+    }
+  }, []);
+  const addFiles = useCallback7(
+    (files) => {
+      const fileArray = Array.from(files);
+      setAttachments((prev) => {
+        const newAttachments = [];
+        for (const file of fileArray) {
+          if (prev.length + newAttachments.length >= maxAttachments) {
+            onLimitExceeded?.("count", file);
+            continue;
+          }
+          if (maxFileSize && file.size > maxFileSize) {
+            onLimitExceeded?.("size", file);
+            continue;
+          }
+          if (!isMimeTypeAllowed(file.type, allowedMimeTypes)) {
+            onLimitExceeded?.("mime", file);
+            continue;
+          }
+          const attachment = {
+            id: generateId(),
+            file,
+            name: file.name,
+            size: file.size,
+            mime: file.type || "application/octet-stream",
+            lastModified: file.lastModified,
+            previewUrl: createPreviewUrl(file)
+          };
+          newAttachments.push(attachment);
+        }
+        return [...prev, ...newAttachments];
+      });
+    },
+    [maxAttachments, maxFileSize, allowedMimeTypes, onLimitExceeded, createPreviewUrl]
+  );
+  const removeAttachment = useCallback7(
+    (id) => {
+      setAttachments((prev) => {
+        const attachment = prev.find((a) => a.id === id);
+        if (attachment) {
+          revokePreviewUrl(attachment.previewUrl);
+        }
+        return prev.filter((a) => a.id !== id);
+      });
+    },
+    [revokePreviewUrl]
+  );
+  const clearAttachments = useCallback7(() => {
+    setAttachments((prev) => {
+      prev.forEach((attachment) => {
+        revokePreviewUrl(attachment.previewUrl);
+      });
+      return [];
+    });
+  }, [revokePreviewUrl]);
+  const setAttachmentsExternal = useCallback7(
+    (newAttachments) => {
+      attachments.forEach((attachment) => {
+        revokePreviewUrl(attachment.previewUrl);
+      });
+      setAttachments(newAttachments);
+    },
+    [attachments, revokePreviewUrl]
+  );
+  return {
+    attachments,
+    addFiles,
+    removeAttachment,
+    clearAttachments,
+    setAttachments: setAttachmentsExternal
+  };
+}
+
+// src/themes/EditorTheme.ts
+var EditorTheme = {
+  ltr: "ltr",
+  rtl: "rtl",
+  paragraph: "im-composer-paragraph",
+  quote: "im-composer-quote",
+  heading: {
+    h1: "im-composer-heading-h1",
+    h2: "im-composer-heading-h2",
+    h3: "im-composer-heading-h3",
+    h4: "im-composer-heading-h4",
+    h5: "im-composer-heading-h5",
+    h6: "im-composer-heading-h6"
+  },
+  list: {
+    nested: {
+      listitem: "im-composer-nested-listitem"
+    },
+    ol: "im-composer-list-ol",
+    ul: "im-composer-list-ul",
+    listitem: "im-composer-list-item"
+  },
+  image: "im-composer-image",
+  link: "im-composer-link",
+  text: {
+    bold: "im-composer-text-bold",
+    italic: "im-composer-text-italic",
+    overflowed: "im-composer-text-overflowed",
+    hashtag: "im-composer-text-hashtag",
+    underline: "im-composer-text-underline",
+    strikethrough: "im-composer-text-strikethrough",
+    underlineStrikethrough: "im-composer-text-underline-strikethrough",
+    code: "im-composer-text-code"
+  },
+  code: "im-composer-code"
+};
+
+// src/IMComposer.tsx
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function EditorInner({
+  mode,
+  onSend,
+  enableMention = true,
+  mentionProvider,
+  maxMentions,
+  renderMentionItem,
+  enableAttachments = true,
+  showAttachmentPreview = true,
+  attachmentPreviewPlacement = "bottom",
+  attachments,
+  onFilePaste,
+  onRemoveAttachment,
+  markdownOptions,
+  uploadImage,
+  keymap,
+  placeholder,
+  disabled,
+  isUploading,
+  onUploadStart,
+  onUploadEnd,
+  editorRef,
+  onQuoteRemoved,
+  onChange,
+  className,
+  ...restProps
+}) {
+  const [editor] = useLexicalComposerContext12();
+  editorRef.current = editor;
+  useEffect12(() => {
+    if (!onChange) return;
+    return editor.registerUpdateListener(({ editorState, dirtyElements, dirtyLeaves }) => {
+      if (dirtyElements.size > 0 || dirtyLeaves.size > 0) {
+        onChange();
+      }
+    });
+  }, [editor, onChange]);
+  const placeholderText = useMemo(() => {
+    if (typeof placeholder === "string") return placeholder;
+    if (typeof placeholder === "object") {
+      const text = mode === "plain" ? placeholder.plain : placeholder.rich;
+      if (text) return text;
+    }
+    return mode === "plain" ? "Type a message..." : "Type with Markdown...";
+  }, [placeholder, mode]);
+  const canSend = useCallback8(() => {
+    if (disabled || isUploading) return false;
+    const isEmpty = isEditorEmpty(editor);
+    if (mode === "plain" && attachments.length > 0) {
+      return true;
+    }
+    return !isEmpty;
+  }, [editor, disabled, isUploading, mode, attachments.length]);
+  const handleSend = useCallback8(() => {
+    if (!canSend()) return;
+    if (mode === "plain") {
+      const payload = exportPlainPayload(editor, attachments);
+      onSend?.(payload);
+    } else {
+      const payload = exportMarkdownPayload(editor);
+      onSend?.(payload);
+    }
+  }, [editor, mode, attachments, onSend, canSend]);
+  const handleError = useCallback8((error) => {
+    console.error("IMComposer error:", error);
+  }, []);
+  const mergedClassName = [
+    "im-composer",
+    `im-composer-${mode}`,
+    disabled ? "im-composer-disabled" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: mergedClassName,
+      ...restProps,
+      children: [
+        mode === "rich" && /* @__PURE__ */ jsx8(
+          ToolbarPlugin,
+          {
+            uploadImage,
+            enabledSyntax: markdownOptions?.enabledSyntax,
+            onUploadStart,
+            onUploadEnd,
+            onError: handleError
+          }
+        ),
+        mode === "plain" && attachmentPreviewPlacement === "top" && enableAttachments && showAttachmentPreview && /* @__PURE__ */ jsx8(
+          AttachmentPreviewBar,
+          {
+            attachments,
+            onRemove: onRemoveAttachment,
+            placement: "top"
+          }
+        ),
+        /* @__PURE__ */ jsxs7("div", { className: "im-composer-editor-container", children: [
+          /* @__PURE__ */ jsx8(
+            RichTextPlugin,
+            {
+              contentEditable: /* @__PURE__ */ jsx8(
+                ContentEditable,
+                {
+                  className: "im-composer-editor",
+                  "aria-placeholder": placeholderText,
+                  placeholder: /* @__PURE__ */ jsx8("div", { className: "im-composer-placeholder", children: placeholderText })
+                }
+              ),
+              ErrorBoundary: LexicalErrorBoundary
+            }
+          ),
+          /* @__PURE__ */ jsx8(HistoryPlugin, {}),
+          /* @__PURE__ */ jsx8(ListPlugin, {}),
+          /* @__PURE__ */ jsx8(LinkPlugin, {}),
+          mode === "plain" && /* @__PURE__ */ jsxs7(Fragment3, { children: [
+            /* @__PURE__ */ jsx8(
+              MentionPlugin,
+              {
+                mentionProvider,
+                enabled: enableMention,
+                maxMentions,
+                renderMentionItem
+              }
+            ),
+            /* @__PURE__ */ jsx8(
+              PlainTextPastePlugin,
+              {
+                onFilePaste: enableAttachments ? onFilePaste : void 0
+              }
+            ),
+            /* @__PURE__ */ jsx8(DeletionPlugin, {}),
+            /* @__PURE__ */ jsx8(QuoteRemovalListenerPlugin, { onQuoteRemoved })
+          ] }),
+          mode === "rich" && /* @__PURE__ */ jsxs7(Fragment3, { children: [
+            /* @__PURE__ */ jsx8(MarkdownShortcutPlugin, { transformers: TRANSFORMERS3 }),
+            /* @__PURE__ */ jsx8(
+              RichTextPastePlugin,
+              {
+                uploadImage,
+                onUploadStart,
+                onUploadEnd,
+                onError: handleError
+              }
+            ),
+            /* @__PURE__ */ jsx8(LinkShortcutPlugin, {}),
+            /* @__PURE__ */ jsx8(LinkEditPlugin, {}),
+            /* @__PURE__ */ jsx8(DeletionPlugin, {})
+          ] }),
+          /* @__PURE__ */ jsx8(
+            KeymapPlugin,
+            {
+              sendKey: keymap?.send,
+              onSend: handleSend,
+              canSend,
+              disabled
+            }
+          )
+        ] }),
+        mode === "plain" && attachmentPreviewPlacement === "bottom" && enableAttachments && showAttachmentPreview && /* @__PURE__ */ jsx8(
+          AttachmentPreviewBar,
+          {
+            attachments,
+            onRemove: onRemoveAttachment,
+            placement: "bottom"
+          }
+        ),
+        isUploading && /* @__PURE__ */ jsx8("div", { className: "im-composer-uploading", children: "Uploading..." })
+      ]
+    }
+  );
+}
+var IMComposer = forwardRef(
+  function IMComposer2(props, ref) {
+    const {
+      mode: controlledMode,
+      defaultMode = "plain",
+      maxAttachments,
+      maxFileSize,
+      allowedMimeTypes,
+      onAttachmentLimitExceeded,
+      onFilesChange,
+      ...restProps
+    } = props;
+    const [uncontrolledMode, setUncontrolledMode] = useState6(defaultMode);
+    const mode = controlledMode ?? uncontrolledMode;
+    const editorRef = useRef9(null);
+    const [uploadCount, setUploadCount] = useState6(0);
+    const {
+      attachments,
+      addFiles,
+      removeAttachment,
+      clearAttachments,
+      setAttachments
+    } = useAttachments({
+      maxAttachments,
+      maxFileSize,
+      allowedMimeTypes,
+      onLimitExceeded: onAttachmentLimitExceeded
+    });
+    const handleUploadStart = useCallback8(() => {
+      setUploadCount((c) => c + 1);
+    }, []);
+    const handleUploadEnd = useCallback8(() => {
+      setUploadCount((c) => c - 1);
+    }, []);
+    useEffect12(() => {
+      onFilesChange?.(attachments);
+    }, [attachments, onFilesChange]);
+    const initialConfig = useMemo(
+      () => ({
+        namespace: "IMComposer",
+        theme: EditorTheme,
+        nodes: [
+          ImageNode,
+          EmojiNode,
+          MentionNode,
+          HeadingNode,
+          MarkdownQuoteNode,
+          QuoteNode,
+          ListNode,
+          ListItemNode,
+          CodeNode,
+          LinkNode2,
+          AutoLinkNode
+        ],
+        onError: (error) => {
+          console.error("Lexical error:", error);
+        },
+        editable: !props.disabled
+      }),
+      [props.disabled]
+    );
+    useImperativeHandle(
+      ref,
+      () => ({
+        focus: () => {
+          editorRef.current?.focus();
+        },
+        clear: () => {
+          if (editorRef.current) {
+            clearEditor(editorRef.current);
+          }
+          clearAttachments();
+        },
+        exportPayload: () => {
+          if (!editorRef.current) return null;
+          if (mode === "plain") {
+            return exportPlainPayload(editorRef.current, attachments);
+          } else {
+            return exportMarkdownPayload(editorRef.current);
+          }
+        },
+        importMarkdown: (markdown) => {
+          if (editorRef.current && mode === "rich") {
+            importMarkdownToEditor(editorRef.current, markdown);
+          }
+        },
+        getAttachments: () => attachments,
+        setAttachments,
+        insertQuote: (title, content) => {
+          if (editorRef.current && mode === "plain") {
+            editorRef.current.update(() => {
+              const root = $getRoot5();
+              const newQuoteNode = $createQuoteNode(title, content);
+              const children = root.getChildren();
+              let existingQuote = null;
+              for (const child of children) {
+                if ($isQuoteNode(child)) {
+                  existingQuote = child;
+                  break;
+                }
+              }
+              if (existingQuote) {
+                existingQuote.replace(newQuoteNode);
+              } else {
+                const firstChild = root.getFirstChild();
+                if (firstChild) {
+                  firstChild.insertBefore(newQuoteNode);
+                } else {
+                  root.append(newQuoteNode);
+                }
+              }
+            });
+          }
+        },
+        addFiles,
+        removeAttachment,
+        clearAttachments,
+        insertMention: (userId, display) => {
+          if (editorRef.current && mode === "plain") {
+            editorRef.current.update(() => {
+              const selection = $getSelection8();
+              if ($isRangeSelection7(selection)) {
+                const mentionNode = $createMentionNode(userId, display);
+                selection.insertNodes([mentionNode]);
+              }
+            });
+          }
+        },
+        getDraft: () => {
+          let editorState = "";
+          let text = "";
+          if (editorRef.current) {
+            editorRef.current.getEditorState().read(() => {
+              text = $getRoot5().getTextContent().trim();
+            });
+            if (text) {
+              editorState = JSON.stringify(editorRef.current.getEditorState().toJSON());
+            }
+          }
+          return {
+            editorState,
+            text,
+            attachments: attachments.map((a) => ({
+              ...a,
+              file: a.file
+              // Note: File objects can't be serialized to JSON
+            }))
+          };
+        },
+        setDraft: (draft) => {
+          if (editorRef.current && draft.editorState) {
+            try {
+              const parsedState = editorRef.current.parseEditorState(draft.editorState);
+              editorRef.current.setEditorState(parsedState);
+            } catch (e) {
+              console.error("Failed to restore editor state:", e);
+            }
+          }
+          if (draft.attachments) {
+            setAttachments(draft.attachments);
+          }
+        },
+        setText: (text, mentions) => {
+          const editor = editorRef.current;
+          if (!editor) return;
+          editor.update(() => {
+            const root = $getRoot5();
+            root.clear();
+            const paragraph = $createParagraphNode5();
+            if (!text) {
+              root.append(paragraph);
+              return;
+            }
+            if (!mentions || mentions.length === 0) {
+              paragraph.append($createTextNode7(text));
+              root.append(paragraph);
+              return;
+            }
+            const pattern = /@(\S+?)\b/g;
+            let lastIndex = 0;
+            let match;
+            while ((match = pattern.exec(text)) !== null) {
+              const [fullMatch, userId] = match;
+              const matchIndex = match.index;
+              if (matchIndex > lastIndex) {
+                paragraph.append($createTextNode7(text.slice(lastIndex, matchIndex)));
+              }
+              const member = mentions.find((m) => m.userId === userId);
+              if (member) {
+                const mentionNode = $createMentionNode(member.userId, member.display);
+                paragraph.append(mentionNode);
+              } else {
+                paragraph.append($createTextNode7(fullMatch));
+              }
+              lastIndex = matchIndex + fullMatch.length;
+            }
+            if (lastIndex < text.length) {
+              paragraph.append($createTextNode7(text.slice(lastIndex)));
+            }
+            root.append(paragraph);
+          });
+        },
+        insertText: (text) => {
+          const editor = editorRef.current;
+          if (!editor) return;
+          editor.update(() => {
+            const selection = $getSelection8();
+            if ($isRangeSelection7(selection)) {
+              selection.insertText(text);
+            } else {
+              const root = $getRoot5();
+              const lastChild = root.getLastChild();
+              if (lastChild) {
+                lastChild.selectEnd();
+                const newSelection = $getSelection8();
+                if ($isRangeSelection7(newSelection)) {
+                  newSelection.insertText(text);
+                }
+              }
+            }
+          });
+        }
+      }),
+      [mode, attachments, clearAttachments, setAttachments, addFiles, removeAttachment]
+    );
+    const mergedLocale = useMemo(() => mergeLocale(restProps.locale), [restProps.locale]);
+    return /* @__PURE__ */ jsx8(LocaleContext.Provider, { value: mergedLocale, children: /* @__PURE__ */ jsx8(LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsx8(
+      EditorInner,
+      {
+        ...restProps,
+        mode,
+        attachments,
+        onFilePaste: addFiles,
+        onRemoveAttachment: removeAttachment,
+        isUploading: uploadCount > 0,
+        onUploadStart: handleUploadStart,
+        onUploadEnd: handleUploadEnd,
+        editorRef
+      }
+    ) }) });
+  }
+);
+export {
+  $createEmojiNode,
+  $createImageNode,
+  $createMentionNode,
+  $createQuoteNode,
+  $isEmojiNode,
+  $isImageNode,
+  $isMentionNode,
+  $isQuoteNode,
+  EmojiNode,
+  IMComposer,
+  ImageNode,
+  MentionNode,
+  QuoteNode,
+  useAttachments,
+  useImageUpload
+};
+//# sourceMappingURL=index.js.map