ct-rich-text-editor 1.3.26 → 1.3.27

package/dist/{index-a2107b7c.js → index-d1d21414.js}

@@ -24,7 +24,7 @@ import { TablePlugin } from "@lexical/react/LexicalTablePlugin";
 import { TableNode, TableCellNode, TableRowNode, $createTableNodeWithDimensions, $isTableRowNode, $isTableCellNode, TableCellHeaderStates, $isTableNode, $isTableSelection, $getTableCellNodeFromLexicalNode, $getTableNodeFromLexicalNodeOrThrow, getTableElement, getTableObserverFromTableElement, $getTableRowIndexFromTableCellNode, $getNodeTriplet, $insertTableRow__EXPERIMENTAL, $getTableColumnIndexFromTableCellNode, $insertTableColumn__EXPERIMENTAL, $deleteTableRow__EXPERIMENTAL, $deleteTableColumn__EXPERIMENTAL, $unmergeCell, $computeTableMapSkipCellCheck, getDOMCellFromTarget, $getTableAndElementByKey } from "@lexical/table";
 import { mergeRegister, $wrapNodeInElement, $findMatchingParent, $getNearestNodeOfType, $getNearestBlockElementAncestorOrThrow, $insertNodeToNearestRoot, $isEditorIsNestedEditor, mediaFileReader, isMimeType, calculateZoomLevel, CAN_USE_DOM } from "@lexical/utils";
 import Stack from "@mui/material/Stack";
-import { createCommand, DecoratorNode, createEditor, $applyNodeReplacement, $insertNodes, $isRootOrShadowRoot, $createParagraphNode, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_LOW, $getSelection, $isRangeSelection, $getNearestNodeFromDOMNode, isHTMLElement as isHTMLElement$1, TextNode, $getRoot, $createTextNode, $getNodeByKey, $isParagraphNode, $isTextNode, FORMAT_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND, KEY_DOWN_COMMAND, COMMAND_PRIORITY_CRITICAL, CAN_UNDO_COMMAND, CAN_REDO_COMMAND, $isElementNode, SELECTION_CHANGE_COMMAND, UNDO_COMMAND, REDO_COMMAND, KEY_SPACE_COMMAND, $isLineBreakNode, $createRangeSelection, $setSelection, COMMAND_PRIORITY_HIGH, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND, KEY_ENTER_COMMAND, $createNodeSelection, $isNodeSelection, getDOMSelection, CLICK_COMMAND, PASTE_COMMAND, ParagraphNode, $createLineBreakNode, isDOMNode } from "lexical";
+import { createCommand, DecoratorNode, createEditor, $applyNodeReplacement, $getSelection, $isRangeSelection, ElementNode, $isRootOrShadowRoot, $createParagraphNode, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_LOW, $insertNodes, $getNearestNodeFromDOMNode, isHTMLElement as isHTMLElement$1, TextNode, $getRoot, $createTextNode, $getNodeByKey, $isParagraphNode, $isTextNode, FORMAT_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND, KEY_DOWN_COMMAND, COMMAND_PRIORITY_CRITICAL, CAN_UNDO_COMMAND, CAN_REDO_COMMAND, $isElementNode, SELECTION_CHANGE_COMMAND, UNDO_COMMAND, REDO_COMMAND, KEY_SPACE_COMMAND, $isLineBreakNode, $createRangeSelection, $setSelection, COMMAND_PRIORITY_HIGH, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND, KEY_ENTER_COMMAND, $createNodeSelection, $isNodeSelection, getDOMSelection, CLICK_COMMAND, PASTE_COMMAND, ParagraphNode, $createLineBreakNode, isDOMNode } from "lexical";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default, { createPortal } from "react-dom";
 import { $isCodeNode, CodeNode, normalizeCodeLang, getLanguageFriendlyName, CodeHighlightNode, CODE_LANGUAGE_MAP, $createCodeNode, registerCodeHighlighting, $isCodeHighlightNode } from "@lexical/code";
@@ -1395,6 +1395,9 @@ const apiEndpoints = {
   },
   transcript: {
     voiceTranscript: "/api/transcript/get-assemblyai-token"
+  },
+  linkPreview: {
+    getPreview: "/api/link-preview"
   }
 };
 const AiJsonResponse = async ({ content }) => {
@@ -1478,7 +1481,7 @@ const AiTextTransform = async ({ content, apiKey }) => {
 const AI_ACTION_COMMAND = createCommand(
   "AI_ACTION_COMMAND"
 );
-const ImageView = React__default.lazy(() => import("./index-01a6d110.js"));
+const ImageView = React__default.lazy(() => import("./index-aa2e3927.js"));
 function isGoogleDocCheckboxImg(img) {
   return img.parentElement != null && img.parentElement.tagName === "LI" && img.previousSibling === null && img.getAttribute("aria-roledescription") === "checkbox";
 }
@@ -1738,7 +1741,37 @@ const ImagePlugin = ({
         INSERT_IMAGE_COMMAND,
         (payload) => {
           const imageNode = $createImageNode(payload);
-          $insertNodes([imageNode]);
+          const selection = $getSelection();
+          if ($isRangeSelection(selection)) {
+            const anchorNode = selection.anchor.getNode();
+            const anchorParent = anchorNode.getParent();
+            if (anchorParent instanceof ElementNode && !$isRootOrShadowRoot(anchorParent)) {
+              const parentType = anchorParent.getType();
+              if (parentType === "paragraph" || parentType === "listitem") {
+                const hasContent = anchorParent.getTextContent().trim().length > 0;
+                const isAtEnd = selection.anchor.offset === anchorNode.getTextContentSize();
+                const isAtStart = selection.anchor.offset === 0;
+                if (hasContent) {
+                  const imageParagraph = $createParagraphNode();
+                  imageParagraph.append(imageNode);
+                  if (isAtEnd) {
+                    anchorParent.insertAfter(imageParagraph);
+                  } else if (isAtStart) {
+                    anchorParent.insertBefore(imageParagraph);
+                  } else {
+                    anchorParent.insertAfter(imageParagraph);
+                  }
+                  const emptyParagraph = $createParagraphNode();
+                  imageParagraph.insertAfter(emptyParagraph);
+                  emptyParagraph.selectEnd();
+                  return true;
+                }
+              }
+            }
+          }
+          if ($isRangeSelection(selection)) {
+            selection.insertNodes([imageNode]);
+          }
           if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
             $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
           }
@@ -2111,20 +2144,20 @@ const createLruCache = (maxCacheSize) => {
     };
   }
   let cacheSize = 0;
-  let cache = /* @__PURE__ */ Object.create(null);
+  let cache2 = /* @__PURE__ */ Object.create(null);
   let previousCache = /* @__PURE__ */ Object.create(null);
   const update = (key, value) => {
-    cache[key] = value;
+    cache2[key] = value;
     cacheSize++;
     if (cacheSize > maxCacheSize) {
       cacheSize = 0;
-      previousCache = cache;
-      cache = /* @__PURE__ */ Object.create(null);
+      previousCache = cache2;
+      cache2 = /* @__PURE__ */ Object.create(null);
     }
   };
   return {
     get(key) {
-      let value = cache[key];
+      let value = cache2[key];
       if (value !== void 0) {
         return value;
       }
@@ -2134,8 +2167,8 @@ const createLruCache = (maxCacheSize) => {
       }
     },
     set(key, value) {
-      if (key in cache) {
-        cache[key] = value;
+      if (key in cache2) {
+        cache2[key] = value;
       } else {
         update(key, value);
       }
@@ -12665,8 +12698,8 @@ function hasFixedPositionAncestor(element, stopNode) {
   }
   return getComputedStyle$1(parentNode).position === "fixed" || hasFixedPositionAncestor(parentNode, stopNode);
 }
-function getClippingElementAncestors(element, cache) {
-  const cachedResult = cache.get(element);
+function getClippingElementAncestors(element, cache2) {
+  const cachedResult = cache2.get(element);
   if (cachedResult) {
     return cachedResult;
   }
@@ -12688,7 +12721,7 @@ function getClippingElementAncestors(element, cache) {
     }
     currentNode = getParentNode(currentNode);
   }
-  cache.set(element, result);
+  cache2.set(element, result);
   return result;
 }
 function getClippingRect(_ref) {
@@ -12986,14 +13019,14 @@ const hide$1 = hide$2;
 const arrow$2 = arrow$3;
 const limitShift$1 = limitShift$2;
 const computePosition = (reference, floating, options) => {
-  const cache = /* @__PURE__ */ new Map();
+  const cache2 = /* @__PURE__ */ new Map();
   const mergedOptions = {
     platform,
     ...options
   };
   const platformWithCache = {
     ...mergedOptions.platform,
-    _c: cache
+    _c: cache2
   };
   return computePosition$1(reference, floating, {
     ...mergedOptions,
@@ -15370,7 +15403,7 @@ const EmbedComponent = ({ url, displayType, alignment, nodeKey }) => {
     }
   );
 };
-const FileComponent = React$1.lazy(() => import("./index-9b519a99.js"));
+const FileComponent = React$1.lazy(() => import("./index-4edbb171.js"));
 function convertFileElement(domNode) {
   if (domNode instanceof HTMLDivElement) {
     const dataUrl = domNode.getAttribute("data-lexical-file-src");
@@ -19160,6 +19193,7 @@ function AIChatDialog({
   selectedTextForInline
 }) {
   const [inputValue, setInputValue] = useState$1("");
+  const [selectedText, setSelectedText] = useState$1("");
   const [isLoading, setIsLoading] = useState$1(false);
   const [errorMessage, setErrorMessage] = useState$1(null);
   const [provider, setProvider] = useState$1("chatgpt");
@@ -19168,7 +19202,11 @@ function AIChatDialog({
   const [purchasedCredits, setPurchasedCredits] = useState$1(0);
   useEffect$1(() => {
     if (open && initialText) {
-      setInputValue(initialText);
+      setSelectedText(initialText);
+      setInputValue("");
+    } else if (!open) {
+      setSelectedText("");
+      setInputValue("");
     }
   }, [open, initialText]);
   const {
@@ -19243,8 +19281,26 @@ function AIChatDialog({
     setIsLoading(true);
     setErrorMessage(null);
     const isImageRequest = isImageGenerationRequest(inputValue);
+    let finalPrompt;
+    const hasSelectedText = selectedText && selectedText.trim() !== "";
+    if (isImageRequest) {
+      if (hasSelectedText) {
+        finalPrompt = `${inputValue}: ${selectedText}`;
+      } else {
+        finalPrompt = inputValue;
+      }
+    } else if (hasSelectedText) {
+      finalPrompt = `${inputValue}
+
+IMPORTANT: Return ONLY the modified/transformed text. Do NOT include any labels, prefixes, explanations, or formatting like "Simplified:", "Result:", "Here is", etc. Just return the pure result text.
+
+Text to transform:
+"${selectedText}"`;
+    } else {
+      finalPrompt = inputValue;
+    }
     try {
-      const response = await AiEditorAction({ content: inputValue, provider, apiKey });
+      const response = await AiEditorAction({ content: finalPrompt, provider, apiKey });
       const htmlString = response.data;
       const parser = new DOMParser();
       const dom = parser.parseFromString(htmlString.trim(), "text/html");
@@ -19281,6 +19337,7 @@ function AIChatDialog({
   const handleClose = () => {
     if (!isLoading) {
       setInputValue("");
+      setSelectedText("");
       setErrorMessage(null);
       onOpenChange(false);
     }
@@ -19345,9 +19402,26 @@ function AIChatDialog({
       ] })
     ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "cteditor-space-y-4 ", children: [
+      selectedText && selectedText.trim() !== "" && /* @__PURE__ */ jsxs("div", { className: "cteditor-space-y-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "cteditor-flex cteditor-items-center cteditor-justify-between", children: [
+          /* @__PURE__ */ jsx(Label$2, { className: "cteditor-text-sm cteditor-font-medium cteditor-text-muted-foreground", children: "Selected Text" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setSelectedText(""),
+              className: "cteditor-text-xs cteditor-text-muted-foreground hover:cteditor-text-foreground cteditor-transition-colors",
+              title: "Clear selected text",
+              children: /* @__PURE__ */ jsx(X$1, { size: 14 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "cteditor-p-3 cteditor-rounded-md cteditor-bg-accent/50 cteditor-border cteditor-border-foreground/10 cteditor-max-h-24 cteditor-overflow-y-auto", children: /* @__PURE__ */ jsx("p", { className: "cteditor-text-xs cteditor-text-foreground/80 cteditor-whitespace-pre-wrap cteditor-break-words", children: selectedText.length > 300 ? selectedText.substring(0, 300) + "..." : selectedText }) }),
+        /* @__PURE__ */ jsx("p", { className: "cteditor-text-xs cteditor-text-muted-foreground", children: "Your prompt will be applied to this selected text" })
+      ] }),
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsxs("div", { className: "cteditor-flex cteditor-justify-between cteditor-gap-1 cteditor-min-h-8 cteditor-items-center", children: [
-          /* @__PURE__ */ jsx(Label$2, { htmlFor: "ai-prompt", className: "cteditor-text-sm cteditor-font-medium cteditor-mb-0 cteditor-block", children: "Your Question" }),
+          /* @__PURE__ */ jsx(Label$2, { htmlFor: "ai-prompt", className: "cteditor-text-sm cteditor-font-medium cteditor-mb-0 cteditor-block", children: selectedText && selectedText.trim() !== "" ? "Your Instruction" : "Your Question" }),
           !isRecording && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
             "button",
             {
@@ -19368,7 +19442,7 @@ function AIChatDialog({
           {
             ref: textareaRef,
             id: "ai-prompt",
-            placeholder: isVoiceLoading ? "Initializing microphone..." : isRecording ? isPaused ? "Paused..." : "Listening..." : "e.g., Improve this text, translate to Spanish, or explain this concept",
+            placeholder: isVoiceLoading ? "Initializing microphone..." : isRecording ? isPaused ? "Paused..." : "Listening..." : selectedText && selectedText.trim() !== "" ? "e.g., Improve this, translate to Spanish, summarize, fix grammar..." : "e.g., Write a paragraph about..., Generate an image of...",
             value: inputValue,
             onChange: (e) => setInputValue(e.target.value),
             disabled: isLoading || isRecording || isVoiceLoading,
@@ -19423,7 +19497,7 @@ function AIChatDialog({
         ] }),
         !isRecording && !voiceError && !isVoiceLoading && /* @__PURE__ */ jsxs("div", { className: "cteditor-flex cteditor-items-center cteditor-gap-2 cteditor-text-xs cteditor-text-muted-foreground", children: [
           /* @__PURE__ */ jsx("svg", { className: "cteditor-w-4 cteditor-h-4 cteditor-opacity-60", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-          /* @__PURE__ */ jsx("span", { children: "Type your question or click the microphone icon to use voice input" })
+          /* @__PURE__ */ jsx("span", { children: selectedText && selectedText.trim() !== "" ? "Enter what you want to do with the selected text, or use voice input" : "Type your question or click the microphone icon to use voice input" })
         ] })
       ] }),
       isVoiceLoading && /* @__PURE__ */ jsx("div", { className: "cteditor-p-3 cteditor-rounded-lg cteditor-bg-gray-100 dark:cteditor-bg-gray-900/50 cteditor-border cteditor-border-gray-300 dark:cteditor-border-gray-700", children: /* @__PURE__ */ jsxs("div", { className: "cteditor-flex cteditor-items-center cteditor-gap-2", children: [
@@ -20486,10 +20560,10 @@ const PDF_CONFIG = {
 };
 const loadHtml2Pdf = async () => {
   try {
-    const mod = await import("./html2pdf.bundle.min-1f376935.js").then((n) => n.h);
+    const mod = await import("./html2pdf.bundle.min-382f2ad4.js").then((n) => n.h);
     return (mod == null ? void 0 : mod.default) || mod;
   } catch {
-    const mod2 = await import("./html2pdf.bundle-41a72ab2.js").then((n) => n.h);
+    const mod2 = await import("./html2pdf.bundle-08dfd2d4.js").then((n) => n.h);
     return (mod2 == null ? void 0 : mod2.default) || mod2;
   }
 };
@@ -27805,7 +27879,7 @@ const STATIC_SUGGESTIONS = [
   "programming"
 ];
 const CACHE_MAX_AGE = 5 * 60 * 1e3;
-const MAX_CACHE_SIZE = 200;
+const MAX_CACHE_SIZE$1 = 200;
 const REQUEST_TIMEOUT = 3e4;
 const MENU_CONFIG = { width: 320, height: 200, padding: 8 };
 const TOOLTIP_CONFIG = {
@@ -27977,7 +28051,7 @@ class GrammarAIService {
       errors,
       checkedAt: Date.now()
     });
-    if (this.sentenceCache.size > MAX_CACHE_SIZE) {
+    if (this.sentenceCache.size > MAX_CACHE_SIZE$1) {
       const oldestKey = this.sentenceCache.keys().next().value;
       if (oldestKey)
         this.sentenceCache.delete(oldestKey);
@@ -31361,7 +31435,51 @@ function LinkPlugin({
     }
   );
 }
-function LinkPreviewPlugin() {
+const cache = /* @__PURE__ */ new Map();
+const CACHE_TTL = 30 * 60 * 1e3;
+const MAX_CACHE_SIZE = 100;
+function getCached(url) {
+  const entry = cache.get(url);
+  if (!entry)
+    return null;
+  if (Date.now() - entry.timestamp > CACHE_TTL) {
+    cache.delete(url);
+    return null;
+  }
+  return entry.data;
+}
+function setCache(url, data) {
+  if (cache.size >= MAX_CACHE_SIZE) {
+    const oldestKey = cache.keys().next().value;
+    if (oldestKey)
+      cache.delete(oldestKey);
+  }
+  cache.set(url, { data, timestamp: Date.now() });
+}
+async function fetchLinkPreview({
+  url,
+  apiKey
+}) {
+  const cached = getCached(url);
+  if (cached)
+    return cached;
+  try {
+    const response = await backendAPI.post(
+      apiEndpoints.linkPreview.getPreview,
+      { url },
+      apiKey ? { headers: { "X-API-Key": apiKey } } : void 0
+    );
+    if (response.data.success && response.data.data) {
+      setCache(url, response.data.data);
+      return response.data.data;
+    }
+    return null;
+  } catch (error) {
+    console.error("Error fetching link preview:", error);
+    return null;
+  }
+}
+function LinkPreviewPlugin({ apiKey }) {
   const [editor] = useLexicalComposerContext();
   const [hoveredLink, setHoveredLink] = useState$1(null);
   useEffect$1(() => {
@@ -31385,20 +31503,14 @@ function LinkPreviewPlugin() {
       if (linkElement && editorElement.contains(linkElement)) {
         const href = linkElement.getAttribute("href");
         if (href && href !== "https://" && href !== "http://" && href !== "#") {
-          if (showTimeout) {
+          if (showTimeout)
             clearTimeout(showTimeout);
-          }
           if (hideTimeout) {
             clearTimeout(hideTimeout);
             hideTimeout = null;
           }
           showTimeout = window.setTimeout(() => {
-            const rect = linkElement.getBoundingClientRect();
-            setHoveredLink({
-              url: href,
-              text: linkElement.textContent || "",
-              rect
-            });
+            setHoveredLink({ url: href, rect: linkElement.getBoundingClientRect() });
           }, 500);
         }
       }
@@ -31408,12 +31520,10 @@ function LinkPreviewPlugin() {
       const relatedTarget = event.relatedTarget;
       if (target.closest(".link-preview-card")) {
         isOverPreview = false;
-        const movingToLink = relatedTarget == null ? void 0 : relatedTarget.closest("a");
-        if (!movingToLink) {
+        if (!(relatedTarget == null ? void 0 : relatedTarget.closest("a"))) {
           hideTimeout = window.setTimeout(() => {
-            if (!isOverPreview) {
+            if (!isOverPreview)
               setHoveredLink(null);
-            }
           }, 300);
         }
         return;
@@ -31424,19 +31534,16 @@ function LinkPreviewPlugin() {
           clearTimeout(showTimeout);
           showTimeout = null;
         }
-        const movingToPreview = relatedTarget == null ? void 0 : relatedTarget.closest(".link-preview-card");
-        if (!movingToPreview) {
+        if (!(relatedTarget == null ? void 0 : relatedTarget.closest(".link-preview-card"))) {
           hideTimeout = window.setTimeout(() => {
-            if (!isOverPreview) {
+            if (!isOverPreview)
               setHoveredLink(null);
-            }
           }, 300);
         }
       }
     };
     const handlePreviewMouseOver = (event) => {
-      const target = event.target;
-      if (target.closest(".link-preview-card")) {
+      if (event.target.closest(".link-preview-card")) {
         isOverPreview = true;
         if (hideTimeout) {
           clearTimeout(hideTimeout);
@@ -31449,12 +31556,10 @@ function LinkPreviewPlugin() {
       const relatedTarget = event.relatedTarget;
       if (target.closest(".link-preview-card")) {
         isOverPreview = false;
-        const movingToLink = relatedTarget == null ? void 0 : relatedTarget.closest("a");
-        if (!movingToLink || !editorElement.contains(movingToLink)) {
+        if (!(relatedTarget == null ? void 0 : relatedTarget.closest("a")) || !editorElement.contains(relatedTarget)) {
           hideTimeout = window.setTimeout(() => {
-            if (!isOverPreview) {
+            if (!isOverPreview)
               setHoveredLink(null);
-            }
           }, 300);
         }
       }
@@ -31464,216 +31569,241 @@ function LinkPreviewPlugin() {
     document.body.addEventListener("mouseover", handlePreviewMouseOver);
     document.body.addEventListener("mouseout", handlePreviewMouseOut);
     return () => {
-      if (showTimeout) {
+      if (showTimeout)
         clearTimeout(showTimeout);
-      }
-      if (hideTimeout) {
+      if (hideTimeout)
         clearTimeout(hideTimeout);
-      }
       editorElement.removeEventListener("mouseover", handleMouseOver);
       editorElement.removeEventListener("mouseout", handleMouseOut);
       document.body.removeEventListener("mouseover", handlePreviewMouseOver);
       document.body.removeEventListener("mouseout", handlePreviewMouseOut);
     };
   }, [editor]);
-  if (!hoveredLink) {
+  if (!hoveredLink)
     return null;
-  }
   return createPortal(
     /* @__PURE__ */ jsx(
       LinkPreview,
       {
         url: hoveredLink.url,
         rect: hoveredLink.rect,
+        apiKey,
         onClose: () => setHoveredLink(null)
       }
     ),
     document.body
   );
 }
-function LinkPreview({ url, rect, onClose }) {
+const PREVIEW_WIDTH = 320;
+function LinkPreview({ url, rect, apiKey, onClose }) {
   const [position, setPosition] = useState$1({ top: 0, left: 0 });
+  const [previewData, setPreviewData] = useState$1(null);
+  const [isLoading, setIsLoading] = useState$1(true);
+  const [hasError, setHasError] = useState$1(false);
+  const fetchedRef = useRef(false);
   useEffect$1(() => {
-    const previewWidth = 300;
-    const previewHeight = 120;
+    if (fetchedRef.current)
+      return;
+    fetchedRef.current = true;
+    setIsLoading(true);
+    setHasError(false);
+    fetchLinkPreview({ url, apiKey }).then((data) => {
+      if (data)
+        setPreviewData(data);
+      else
+        setHasError(true);
+    }).catch(() => setHasError(true)).finally(() => setIsLoading(false));
+  }, [url, apiKey]);
+  useEffect$1(() => {
+    const previewHeight = (previewData == null ? void 0 : previewData.image) ? 280 : 160;
     let top = rect.top + window.scrollY - previewHeight - 10;
     if (rect.top - previewHeight - 10 < 0) {
       top = rect.bottom + window.scrollY + 10;
     }
-    let left = rect.left + window.scrollX + rect.width / 2 - previewWidth / 2;
+    let left = rect.left + window.scrollX + rect.width / 2 - PREVIEW_WIDTH / 2;
     const viewportWidth = window.innerWidth;
-    if (left < 10) {
+    if (left < 10)
       left = 10;
-    } else if (left + previewWidth > viewportWidth - 10) {
-      left = viewportWidth - previewWidth - 10;
-    }
+    else if (left + PREVIEW_WIDTH > viewportWidth - 10)
+      left = viewportWidth - PREVIEW_WIDTH - 10;
     setPosition({ top, left });
-  }, [rect]);
+  }, [rect, previewData]);
   const getDomain = (urlString) => {
     try {
-      const urlObj = new URL(urlString);
-      return urlObj.hostname.replace("www.", "");
+      return new URL(urlString).hostname.replace("www.", "");
     } catch {
       return urlString;
     }
   };
   const domain = getDomain(url);
-  const getProtocol = (urlString) => {
-    try {
-      const urlObj = new URL(urlString);
-      return urlObj.protocol.replace(":", "").toUpperCase();
-    } catch {
-      return "HTTPS";
+  const TypeIcon = ({ type }) => {
+    const iconProps = { style: { width: "14px", height: "14px" }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" };
+    const pathProps = { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2 };
+    switch (type) {
+      case "image":
+        return /* @__PURE__ */ jsx("svg", { ...iconProps, children: /* @__PURE__ */ jsx("path", { ...pathProps, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) });
+      case "video":
+        return /* @__PURE__ */ jsxs("svg", { ...iconProps, children: [
+          /* @__PURE__ */ jsx("path", { ...pathProps, d: "M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" }),
+          /* @__PURE__ */ jsx("path", { ...pathProps, d: "M21 12a9 9 0 11-18 0 9 9 0 0118 0z" })
+        ] });
+      case "pdf":
+        return /* @__PURE__ */ jsx("svg", { ...iconProps, children: /* @__PURE__ */ jsx("path", { ...pathProps, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) });
+      default:
+        return /* @__PURE__ */ jsx("svg", { ...iconProps, children: /* @__PURE__ */ jsx("path", { ...pathProps, d: "M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" }) });
     }
   };
-  const protocol = getProtocol(url);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "link-preview-card",
-      style: {
-        position: "absolute",
-        top: `${position.top}px`,
-        left: `${position.left}px`,
-        zIndex: 1e4,
-        pointerEvents: "auto",
-        animation: "fadeIn 0.2s ease-out"
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              width: "250px",
-              backgroundColor: "#2d2d2d",
-              borderRadius: "12px",
-              boxShadow: "0 10px 40px rgba(0, 0, 0, 0.3)",
-              overflow: "hidden",
-              position: "relative"
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    onClose();
-                  },
-                  style: {
-                    position: "absolute",
-                    top: "8px",
-                    right: "8px",
-                    width: "20px",
-                    height: "20px",
-                    borderRadius: "4px",
-                    backgroundColor: "#404040",
-                    border: "none",
-                    cursor: "pointer",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    transition: "background-color 0.2s",
-                    zIndex: 1
-                  },
-                  onMouseEnter: (e) => {
-                    e.currentTarget.style.backgroundColor = "#525252";
-                  },
-                  onMouseLeave: (e) => {
-                    e.currentTarget.style.backgroundColor = "#404040";
-                  },
-                  title: "Close preview",
-                  children: /* @__PURE__ */ jsx(
-                    "svg",
-                    {
-                      style: { width: "12px", height: "12px", color: "#9ca3af" },
-                      fill: "none",
-                      stroke: "currentColor",
-                      viewBox: "0 0 24 24",
-                      children: /* @__PURE__ */ jsx(
-                        "path",
-                        {
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round",
-                          strokeWidth: 2,
-                          d: "M6 18L18 6M6 6l12 12"
-                        }
-                      )
-                    }
-                  )
+  const cardStyle = {
+    position: "absolute",
+    top: `${position.top}px`,
+    left: `${position.left}px`,
+    zIndex: 1e4,
+    pointerEvents: "auto",
+    animation: "linkPreviewFadeIn 0.2s ease-out"
+  };
+  const containerStyle = {
+    width: `${PREVIEW_WIDTH}px`,
+    backgroundColor: "#1e1e1e",
+    borderRadius: "12px",
+    boxShadow: "0 10px 40px rgba(0, 0, 0, 0.4)",
+    overflow: "hidden",
+    position: "relative",
+    border: "1px solid #333"
+  };
+  const closeButtonStyle = {
+    position: "absolute",
+    top: "8px",
+    right: "8px",
+    width: "24px",
+    height: "24px",
+    borderRadius: "6px",
+    backgroundColor: "rgba(0,0,0,0.5)",
+    border: "none",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 10
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "link-preview-card", style: cardStyle, children: [
+    /* @__PURE__ */ jsxs("div", { style: containerStyle, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onClose();
+          },
+          style: closeButtonStyle,
+          onMouseEnter: (e) => {
+            e.currentTarget.style.backgroundColor = "rgba(0,0,0,0.7)";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.backgroundColor = "rgba(0,0,0,0.5)";
+          },
+          title: "Close preview",
+          children: /* @__PURE__ */ jsx("svg", { style: { width: "14px", height: "14px", color: "#fff" }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+        }
+      ),
+      isLoading && /* @__PURE__ */ jsxs("div", { style: { padding: "40px", textAlign: "center" }, children: [
+        /* @__PURE__ */ jsx("div", { style: {
+          width: "24px",
+          height: "24px",
+          border: "2px solid #444",
+          borderTopColor: "#fff",
+          borderRadius: "50%",
+          animation: "linkPreviewSpin 1s linear infinite",
+          margin: "0 auto 12px"
+        } }),
+        /* @__PURE__ */ jsx("p", { style: { fontSize: "12px", color: "#888" }, children: "Loading preview..." })
+      ] }),
+      !isLoading && hasError && /* @__PURE__ */ jsxs("div", { style: { padding: "16px" }, children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "12px" }, children: [
+          /* @__PURE__ */ jsx("svg", { style: { width: "16px", height: "16px", color: "#fff" }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" }) }),
+          /* @__PURE__ */ jsx("span", { style: { fontSize: "14px", fontWeight: "600", color: "#fff" }, children: domain })
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { backgroundColor: "#2a2a2a", padding: "10px", borderRadius: "6px" }, children: /* @__PURE__ */ jsx("p", { style: { fontSize: "12px", color: "#ccc", wordBreak: "break-all", lineHeight: "1.5" }, children: url }) })
+      ] }),
+      !isLoading && !hasError && previewData && /* @__PURE__ */ jsxs(Fragment, { children: [
+        previewData.image && /* @__PURE__ */ jsx("div", { style: {
+          width: "100%",
+          height: "140px",
+          backgroundColor: "#2a2a2a",
+          backgroundImage: `url(${previewData.image})`,
+          backgroundSize: "cover",
+          backgroundPosition: "center"
+        } }),
+        /* @__PURE__ */ jsxs("div", { style: { padding: "14px" }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "10px" }, children: [
+            previewData.favicon ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: previewData.favicon,
+                alt: "",
+                style: { width: "16px", height: "16px", borderRadius: "2px", objectFit: "contain" },
+                onError: (e) => {
+                  e.currentTarget.style.display = "none";
                 }
-              ),
-              /* @__PURE__ */ jsxs("div", { style: { padding: "16px 16px 12px 16px" }, children: [
-                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: "4px" }, children: [
-                  /* @__PURE__ */ jsx(
-                    "svg",
-                    {
-                      style: { width: "16px", height: "16px", color: "#ffffff" },
-                      fill: "none",
-                      stroke: "currentColor",
-                      viewBox: "0 0 24 24",
-                      children: /* @__PURE__ */ jsx(
-                        "path",
-                        {
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round",
-                          strokeWidth: 2,
-                          d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("span", { style: { fontSize: "14px", fontWeight: "600", color: "#ffffff" }, children: domain })
-                ] }),
-                /* @__PURE__ */ jsx("p", { style: { fontSize: "10px", color: "#9ca3af", marginLeft: "24px" }, children: protocol })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { style: { padding: "0 16px 16px 16px" }, children: [
-                /* @__PURE__ */ jsx("p", { style: { fontSize: "10px", fontWeight: "500", color: "#9ca3af", textTransform: "uppercase", marginBottom: "8px" }, children: "LINK URL" }),
-                /* @__PURE__ */ jsx("div", { style: { backgroundColor: "#1a1a1a", padding: "10px", borderRadius: "6px" }, children: /* @__PURE__ */ jsx("p", { style: { fontSize: "12px", color: "#ffffff", wordBreak: "break-all", lineHeight: "1.5" }, children: url }) })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "8px", padding: "12px", borderTop: "1px solid #404040" }, children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      width: "8px",
-                      height: "8px",
-                      borderRadius: "50%",
-                      backgroundColor: "#10b981",
-                      boxShadow: "0 0 8px rgba(16, 185, 129, 0.6)",
-                      animation: "pulse 2s ease-in-out infinite"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx("span", { style: { fontSize: "10px", fontWeight: "500", color: "#a1a1aa" }, children: "Link Preview" })
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("style", { children: `
-        @keyframes fadeIn {
-          from {
-            opacity: 0;
-            transform: translateY(5px);
-          }
-          to {
-            opacity: 1;
-            transform: translateY(0);
-          }
+              }
+            ) : /* @__PURE__ */ jsx("span", { style: { color: "#888" }, children: /* @__PURE__ */ jsx(TypeIcon, { type: previewData.type }) }),
+            /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "#888", flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: previewData.siteName || domain }),
+            /* @__PURE__ */ jsx("span", { style: {
+              fontSize: "10px",
+              color: "#666",
+              padding: "2px 6px",
+              backgroundColor: "#333",
+              borderRadius: "4px",
+              textTransform: "uppercase"
+            }, children: previewData.type })
+          ] }),
+          previewData.title && /* @__PURE__ */ jsx("h4", { style: {
+            fontSize: "14px",
+            fontWeight: "600",
+            color: "#fff",
+            marginBottom: "6px",
+            lineHeight: "1.4",
+            display: "-webkit-box",
+            WebkitLineClamp: 2,
+            WebkitBoxOrient: "vertical",
+            overflow: "hidden"
+          }, children: previewData.title }),
+          previewData.description && /* @__PURE__ */ jsx("p", { style: {
+            fontSize: "12px",
+            color: "#999",
+            lineHeight: "1.5",
+            display: "-webkit-box",
+            WebkitLineClamp: 2,
+            WebkitBoxOrient: "vertical",
+            overflow: "hidden",
+            marginBottom: "10px"
+          }, children: previewData.description }),
+          /* @__PURE__ */ jsxs("div", { style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "6px",
+            padding: "8px 10px",
+            backgroundColor: "#252525",
+            borderRadius: "6px",
+            marginTop: "8px"
+          }, children: [
+            /* @__PURE__ */ jsx("svg", { style: { width: "12px", height: "12px", color: "#666", flexShrink: 0 }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" }) }),
+            /* @__PURE__ */ jsx("span", { style: { fontSize: "11px", color: "#888", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: url })
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("style", { children: `
+        @keyframes linkPreviewFadeIn {
+          from { opacity: 0; transform: translateY(5px); }
+          to { opacity: 1; transform: translateY(0); }
         }
-        
-        @keyframes pulse {
-          0%, 100% {
-            opacity: 1;
-          }
-          50% {
-            opacity: 0.6;
-          }
+        @keyframes linkPreviewSpin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
         }
       ` })
-      ]
-    }
-  );
+  ] });
 }
 const debounce = (fn, delay) => {
   let timeoutID;
@@ -32887,7 +33017,56 @@ function RichTextPastePlugin() {
                     return true;
                   });
                   if (filteredNodes.length > 0) {
-                    selection.insertNodes(filteredNodes);
+                    const anchorNode = selection.anchor.getNode();
+                    const anchorParent = anchorNode.getParent();
+                    const isInsideParagraphWithContent = anchorParent instanceof ElementNode && anchorParent.getType() === "paragraph" && anchorParent.getTextContent().trim().length > 0;
+                    if (isInsideParagraphWithContent) {
+                      for (const node of filteredNodes) {
+                        if ($isImageNode(node)) {
+                          const currentSelection = $getSelection();
+                          if ($isRangeSelection(currentSelection)) {
+                            const currentAnchor = currentSelection.anchor.getNode();
+                            const currentParent = currentAnchor.getParent();
+                            if (currentParent instanceof ElementNode && currentParent.getType() === "paragraph") {
+                              const imageParagraph = $createParagraphNode();
+                              imageParagraph.append(node);
+                              currentParent.insertAfter(imageParagraph);
+                              imageParagraph.selectEnd();
+                            } else {
+                              currentSelection.insertNodes([node]);
+                            }
+                          }
+                        } else if (node instanceof ParagraphNode) {
+                          const children = node.getChildren();
+                          const hasOnlyImage = children.length === 1 && $isImageNode(children[0]);
+                          if (hasOnlyImage) {
+                            const currentSelection = $getSelection();
+                            if ($isRangeSelection(currentSelection)) {
+                              const currentAnchor = currentSelection.anchor.getNode();
+                              const currentParent = currentAnchor.getParent();
+                              if (currentParent instanceof ElementNode && currentParent.getType() === "paragraph") {
+                                currentParent.insertAfter(node);
+                                node.selectEnd();
+                              } else {
+                                currentSelection.insertNodes([node]);
+                              }
+                            }
+                          } else {
+                            const currentSelection = $getSelection();
+                            if ($isRangeSelection(currentSelection)) {
+                              currentSelection.insertNodes([node]);
+                            }
+                          }
+                        } else {
+                          const currentSelection = $getSelection();
+                          if ($isRangeSelection(currentSelection)) {
+                            currentSelection.insertNodes([node]);
+                          }
+                        }
+                      }
+                    } else {
+                      selection.insertNodes(filteredNodes);
+                    }
                   }
                 }
               } catch (error) {
@@ -38608,4 +38787,4 @@ export {
   useHtmlView as u,
   verifyApiKey as v
 };
-//# sourceMappingURL=index-a2107b7c.js.map
+//# sourceMappingURL=index-d1d21414.js.map