ct-rich-text-editor 1.3.7 → 1.3.8

package/dist/{index-a8476eee.js → index-158a9bd4.js}

@@ -6,7 +6,7 @@ var __publicField = (obj, key, value) => {
 };
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
-import React__default, { createContext, useContext, useState as useState$1, forwardRef, createElement, useImperativeHandle, useRef, useEffect as useEffect$1, useMemo, useCallback, useLayoutEffect as useLayoutEffect$1, Suspense, Component } from "react";
+import React__default, { createContext, useContext, useState as useState$1, Suspense, useEffect as useEffect$1, forwardRef, createElement, useImperativeHandle, useRef, useMemo, useCallback, useLayoutEffect as useLayoutEffect$1, Component } from "react";
 import axios from "axios";
 import styled from "@emotion/styled";
 import { $generateNodesFromDOM, $generateHtmlFromNodes } from "@lexical/html";
@@ -21,10 +21,10 @@ import { ListPlugin } from "@lexical/react/LexicalListPlugin";
 import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import { TablePlugin } from "@lexical/react/LexicalTablePlugin";
-import { TableNode, TableCellNode, TableRowNode, $createTableNodeWithDimensions, $isTableRowNode, $isTableCellNode, TableCellHeaderStates, $isTableNode, $isTableSelection, $getTableCellNodeFromLexicalNode, $getTableNodeFromLexicalNodeOrThrow, getTableElement, getTableObserverFromTableElement, $insertTableRow__EXPERIMENTAL, $insertTableColumn__EXPERIMENTAL, $getNodeTriplet, $deleteTableRow__EXPERIMENTAL, $deleteTableColumn__EXPERIMENTAL, $getTableRowIndexFromTableCellNode, $getTableColumnIndexFromTableCellNode, $unmergeCell, $computeTableMapSkipCellCheck, getDOMCellFromTarget, $getTableAndElementByKey } from "@lexical/table";
-import { $findMatchingParent, $getNearestNodeOfType, mergeRegister, $getNearestBlockElementAncestorOrThrow, $insertNodeToNearestRoot, $wrapNodeInElement, $isEditorIsNestedEditor, mediaFileReader, isMimeType, calculateZoomLevel, CAN_USE_DOM } from "@lexical/utils";
+import { TableNode, TableCellNode, TableRowNode, $createTableNodeWithDimensions, $isTableRowNode, $isTableCellNode, TableCellHeaderStates, $isTableNode, $isTableSelection, $getTableCellNodeFromLexicalNode, $getTableNodeFromLexicalNodeOrThrow, getTableElement, getTableObserverFromTableElement, $getNodeTriplet, $getTableRowIndexFromTableCellNode, $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, COMMAND_PRIORITY_LOW, $getSelection, $isRangeSelection, $insertNodes, $getNearestNodeFromDOMNode, $setSelection, isHTMLElement as isHTMLElement$1, TextNode, $applyNodeReplacement, $getRoot, $createTextNode, $getNodeByKey, DecoratorNode, createEditor, COMMAND_PRIORITY_EDITOR, $createParagraphNode, $isRootOrShadowRoot, $isParagraphNode, $isTextNode, FORMAT_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND, CAN_UNDO_COMMAND, CAN_REDO_COMMAND, $isElementNode, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_CRITICAL, UNDO_COMMAND, REDO_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND, KEY_ENTER_COMMAND, $createNodeSelection, $isNodeSelection, getDOMSelection, CLICK_COMMAND, COMMAND_PRIORITY_HIGH, $isLineBreakNode, PASTE_COMMAND, isDOMNode } from "lexical";
+import { createCommand, DecoratorNode, createEditor, $applyNodeReplacement, $insertNodes, $isRootOrShadowRoot, $createParagraphNode, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_LOW, $getSelection, $isRangeSelection, $getNearestNodeFromDOMNode, $setSelection, isHTMLElement as isHTMLElement$1, TextNode, $getRoot, $createTextNode, $getNodeByKey, $isParagraphNode, $isTextNode, FORMAT_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND, CAN_UNDO_COMMAND, CAN_REDO_COMMAND, $isElementNode, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_CRITICAL, UNDO_COMMAND, REDO_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND, KEY_ENTER_COMMAND, $createNodeSelection, $isNodeSelection, getDOMSelection, CLICK_COMMAND, COMMAND_PRIORITY_HIGH, $isLineBreakNode, PASTE_COMMAND, 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";
@@ -1463,6 +1463,236 @@ const GetUserInfo = async ({ apiKey }) => {
 const AI_ACTION_COMMAND = createCommand(
   "AI_ACTION_COMMAND"
 );
+const ImageView = React__default.lazy(() => import("./index-42136c92.js"));
+function isGoogleDocCheckboxImg(img) {
+  return img.parentElement != null && img.parentElement.tagName === "LI" && img.previousSibling === null && img.getAttribute("aria-roledescription") === "checkbox";
+}
+function $convertImageElement(domNode) {
+  const img = domNode;
+  if (img.src.startsWith("file:///") || isGoogleDocCheckboxImg(img)) {
+    return null;
+  }
+  const { alt: altText, src, width, height } = img;
+  const node = $createImageNode({ altText, height, src, width });
+  return { node };
+}
+class ImageNode extends DecoratorNode {
+  constructor(src, altText, maxWidth, width, height, showCaption, caption, captionsEnabled, originalPrompt, key) {
+    super(key);
+    __publicField(this, "__src");
+    __publicField(this, "__altText");
+    __publicField(this, "__width");
+    __publicField(this, "__height");
+    __publicField(this, "__maxWidth");
+    __publicField(this, "__showCaption");
+    __publicField(this, "__caption");
+    // Captions cannot yet be used within editor cells
+    __publicField(this, "__captionsEnabled");
+    __publicField(this, "__originalPrompt");
+    this.__src = src;
+    this.__altText = altText;
+    this.__maxWidth = maxWidth;
+    this.__width = width || "inherit";
+    this.__height = height || "inherit";
+    this.__showCaption = showCaption || false;
+    this.__caption = caption || createEditor({
+      nodes: []
+    });
+    this.__captionsEnabled = captionsEnabled || captionsEnabled === void 0;
+    this.__originalPrompt = originalPrompt || "";
+  }
+  // to identify the image node and must unique too
+  static getType() {
+    return "image";
+  }
+  // Clones the ImageNode when needed (during editor updates)
+  static clone(node) {
+    return new ImageNode(
+      node.__src,
+      node.__altText,
+      node.__maxWidth,
+      node.__width,
+      node.__height,
+      node.__showCaption,
+      node.__caption,
+      node.__captionsEnabled,
+      node.__originalPrompt,
+      node.__key
+    );
+  }
+  // importing to json format
+  static importJSON(serializedNode) {
+    const { altText, height, width, maxWidth, caption, src, showCaption, originalPrompt } = serializedNode;
+    const node = $createImageNode({
+      altText,
+      height,
+      maxWidth,
+      showCaption,
+      src,
+      width,
+      originalPrompt: originalPrompt || ""
+      // Default to empty string if undefined
+    });
+    const nestedEditor = node.__caption;
+    const editorState = nestedEditor.parseEditorState(caption.editorState);
+    if (!editorState.isEmpty()) {
+      nestedEditor.setEditorState(editorState);
+    }
+    return node;
+  }
+  // Exports this node as an actual <img> tag in the DOM when needed
+  exportDOM() {
+    const element = document.createElement("img");
+    element.setAttribute("src", this.__src);
+    element.setAttribute("alt", this.__altText);
+    element.setAttribute("width", this.__width.toString());
+    element.setAttribute("height", this.__height.toString());
+    return { element };
+  }
+  // convert img tag into image node in the editor using convertImageElement func
+  static importDOM() {
+    return {
+      img: (node) => ({
+        conversion: $convertImageElement,
+        priority: 0
+      })
+    };
+  }
+  exportJSON() {
+    return {
+      altText: this.getAltText(),
+      caption: this.__caption.toJSON(),
+      height: this.__height === "inherit" ? 0 : this.__height,
+      maxWidth: this.__maxWidth,
+      showCaption: this.__showCaption,
+      src: this.getSrc(),
+      type: "image",
+      version: 1,
+      width: this.__width === "inherit" ? 0 : this.__width,
+      originalPrompt: this.__originalPrompt
+    };
+  }
+  // setting width and height when resizing
+  setWidthAndHeight(width, height) {
+    const writable = this.getWritable();
+    writable.__width = width;
+    writable.__height = height;
+  }
+  // state to update to show the caption
+  setShowCaption(showCaption) {
+    const writable = this.getWritable();
+    writable.__showCaption = showCaption;
+  }
+  // To create a dom representation of image view
+  createDOM(config) {
+    const span = document.createElement("span");
+    const theme2 = config.theme;
+    const className = theme2.image;
+    if (className !== void 0) {
+      span.className = className;
+    }
+    return span;
+  }
+  updateDOM() {
+    return false;
+  }
+  // to get the image src
+  getSrc() {
+    return this.__src;
+  }
+  // to set the image src (for image refinement)
+  setSrc(src) {
+    const writable = this.getWritable();
+    writable.__src = src;
+  }
+  getAltText() {
+    return this.__altText;
+  }
+  // to get the original prompt
+  getOriginalPrompt() {
+    return this.__originalPrompt;
+  }
+  // to set/update the original prompt (when refining)
+  setOriginalPrompt(prompt) {
+    const writable = this.getWritable();
+    writable.__originalPrompt = prompt;
+  }
+  // to render the image tag
+  decorate() {
+    return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+      ImageView,
+      {
+        src: this.__src,
+        altText: this.__altText,
+        width: this.__width,
+        height: this.__height,
+        maxWidth: this.__maxWidth,
+        nodeKey: this.getKey(),
+        showCaption: this.__showCaption,
+        caption: this.__caption,
+        captionsEnabled: this.__captionsEnabled,
+        resizable: true,
+        originalPrompt: this.__originalPrompt
+      }
+    ) });
+  }
+}
+function $createImageNode({
+  altText,
+  height,
+  maxWidth = 500,
+  captionsEnabled,
+  src,
+  width,
+  showCaption,
+  caption,
+  key,
+  originalPrompt
+}) {
+  return $applyNodeReplacement(
+    new ImageNode(
+      src,
+      altText,
+      maxWidth,
+      width,
+      height,
+      showCaption,
+      caption,
+      captionsEnabled,
+      originalPrompt,
+      key
+    )
+  );
+}
+function $isImageNode(node) {
+  return node instanceof ImageNode;
+}
+const INSERT_IMAGE_COMMAND = createCommand("INSERT_IMAGE_COMMAND");
+const ImagePlugin = ({
+  captionsEnabled
+}) => {
+  const [editor] = useLexicalComposerContext();
+  useEffect$1(() => {
+    if (!editor.hasNodes([ImageNode])) {
+      throw new Error("ImagesPlugin: ImageNode not registered on editor");
+    }
+    return mergeRegister(
+      editor.registerCommand(
+        INSERT_IMAGE_COMMAND,
+        (payload) => {
+          const imageNode = $createImageNode(payload);
+          $insertNodes([imageNode]);
+          if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
+            $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
+          }
+          return true;
+        },
+        COMMAND_PRIORITY_EDITOR
+      )
+    );
+  }, [captionsEnabled, editor]);
+  return null;
+};
 function setRef(ref, value) {
   if (typeof ref === "function") {
     return ref(value);
@@ -7769,6 +7999,7 @@ const ImageGenerationDialog = ({
   open,
   onOpenChange,
   onGenerate,
+  onInsertImage,
   isGenerating,
   initialText
 }) => {
@@ -7778,11 +8009,29 @@ const ImageGenerationDialog = ({
       setPrompt(initialText);
     }
   }, [open, initialText]);
+  React__default.useEffect(() => {
+    if (!open) {
+      setPrompt("");
+    }
+  }, [open]);
   const handleGenerate = async () => {
     if (!prompt.trim())
       return;
-    await onGenerate(prompt.trim());
-    setPrompt("");
+    try {
+      const trimmedPrompt = prompt.trim();
+      const cleanPrompt = trimmedPrompt.replace(/^(generate|create|make|draw|paint)\s+(a|an|me|)\s*(image|picture|photo|drawing|illustration)\s+(of|with|showing|depicting)\s+/gi, "").replace(/^(generate|create|make|draw|paint)\s+(a|an|me|)\s*/gi, "").trim();
+      const finalPrompt = cleanPrompt || trimmedPrompt;
+      const imageUrl = await onGenerate(trimmedPrompt);
+      if (!imageUrl || !imageUrl.includes("http")) {
+        throw new Error("Invalid image URL received");
+      }
+      onInsertImage(imageUrl, finalPrompt);
+      await new Promise((resolve) => setTimeout(resolve, 200));
+      handleClose();
+    } catch (error) {
+      console.error("Error generating image:", error);
+      throw error;
+    }
   };
   const handleClose = () => {
     if (!isGenerating) {
@@ -7790,7 +8039,7 @@ const ImageGenerationDialog = ({
       onOpenChange(false);
     }
   };
-  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[500px]", children: [
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[500px] max-h-[90vh] overflow-y-auto", children: [
     /* @__PURE__ */ jsxs(DialogHeader, { children: [
       /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2 text-xl", children: [
         /* @__PURE__ */ jsx("span", { className: "text-2xl", children: "✨" }),
@@ -7800,12 +8049,12 @@ const ImageGenerationDialog = ({
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "space-y-4 py-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx(Label$2, { htmlFor: "image-prompt", children: "Image Description" }),
+        /* @__PURE__ */ jsx(Label$2, { htmlFor: "image-prompt", children: "What do you want to see?" }),
         /* @__PURE__ */ jsx(
           Input$1,
           {
             id: "image-prompt",
-            placeholder: "e.g., A beautiful sunset over mountains with a lake",
+            placeholder: "Mountains and rivers with birds flying in the sky",
             value: prompt,
             onChange: (e) => setPrompt(e.target.value),
             disabled: isGenerating,
@@ -7817,7 +8066,7 @@ const ImageGenerationDialog = ({
             }
           }
         ),
-        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Be specific and descriptive for best results" })
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "💡 Just describe what you want - be specific and detailed for best results" })
       ] }),
       isGenerating && /* @__PURE__ */ jsx("div", { className: "p-4 rounded-lg bg-blue-50 dark:bg-blue-950/20 border border-blue-200 dark:border-blue-800", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ jsx("div", { className: "h-5 w-5 animate-spin rounded-full border-2 border-blue-600 border-t-transparent" }),
@@ -7829,12 +8078,13 @@ const ImageGenerationDialog = ({
       !isGenerating && /* @__PURE__ */ jsx("div", { className: "p-3 rounded-lg bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-800", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
         /* @__PURE__ */ jsx("span", { className: "text-lg", children: "💡" }),
         /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-600 dark:text-gray-400", children: [
-          /* @__PURE__ */ jsx("p", { className: "font-medium mb-1", children: "Tips for better results:" }),
-          /* @__PURE__ */ jsxs("ul", { className: "list-disc list-inside space-y-0.5", children: [
-            /* @__PURE__ */ jsx("li", { children: "Be specific about style, colors, and mood" }),
-            /* @__PURE__ */ jsx("li", { children: "Mention key objects and their positions" }),
-            /* @__PURE__ */ jsx("li", { children: 'Add artistic style references (e.g., "oil painting")' })
-          ] })
+          /* @__PURE__ */ jsx("p", { className: "font-medium mb-1.5", children: "Good examples:" }),
+          /* @__PURE__ */ jsxs("ul", { className: "list-none space-y-1 ml-1", children: [
+            /* @__PURE__ */ jsx("li", { children: '✅ "Mountains and rivers at sunset"' }),
+            /* @__PURE__ */ jsx("li", { children: '✅ "A cat sitting on a windowsill"' }),
+            /* @__PURE__ */ jsx("li", { children: '✅ "Modern city skyline at night"' })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "mt-2 text-amber-600 dark:text-amber-400", children: `⚠️ Don't include "generate" or "create" - just describe!` })
         ] })
       ] }) })
     ] }),
@@ -7858,14 +8108,14 @@ const ImageGenerationDialog = ({
             "Generating..."
           ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("span", { className: "mr-2", children: "✨" }),
-            "Generate Image"
+            "Generate & Insert"
           ] })
         }
       )
     ] })
   ] }) });
 };
-const ImageGenerationManager = forwardRef(({ onGenerate }, ref) => {
+const ImageGenerationManager = forwardRef(({ onGenerate, onInsertImage }, ref) => {
   const [open, setOpen] = useState$1(false);
   const [isGenerating, setIsGenerating] = useState$1(false);
   const [initialText, setInitialText] = useState$1(void 0);
@@ -7879,20 +8129,26 @@ const ImageGenerationManager = forwardRef(({ onGenerate }, ref) => {
   const handleGenerate = async (prompt) => {
     setIsGenerating(true);
     try {
-      await onGenerate(prompt);
-      setOpen(false);
+      const imageUrl = await onGenerate(prompt);
+      return imageUrl;
     } catch (error) {
       console.error("Error generating image:", error);
+      throw error;
     } finally {
       setIsGenerating(false);
     }
   };
+  const handleInsertImage = (imageUrl, prompt) => {
+    onInsertImage(imageUrl, prompt);
+    setOpen(false);
+  };
   return /* @__PURE__ */ jsx(
     ImageGenerationDialog,
     {
       open,
       onOpenChange: setOpen,
       onGenerate: handleGenerate,
+      onInsertImage: handleInsertImage,
       isGenerating,
       initialText
     }
@@ -8006,6 +8262,20 @@ const AIRephrasePlugin = () => {
     (_a = imageDialogRef.current) == null ? void 0 : _a.openDialog(selectedText);
     return true;
   };
+  const extractImageUrlFromHtml = (htmlString) => {
+    try {
+      const parser = new DOMParser();
+      const dom = parser.parseFromString(htmlString, "text/html");
+      const imgElement = dom.querySelector("img");
+      if (!imgElement || !imgElement.src) {
+        throw new Error("No image element found in response");
+      }
+      return imgElement.src;
+    } catch (error) {
+      console.error("Error extracting image URL:", error);
+      throw new Error("Failed to extract image URL from response");
+    }
+  };
   const generateImageFromPrompt = async (promptText) => {
     try {
       const response = await AiJsonResponse({ content: `Generate Image: ${promptText}` });
@@ -8014,21 +8284,26 @@ const AIRephrasePlugin = () => {
         console.warn("No HTML returned from agent for image generation");
         throw new Error("Failed to generate image via agent");
       }
-      editor.update(() => {
-        const currentSelection = $getSelection();
-        if (!currentSelection || !$isRangeSelection(currentSelection))
-          return;
-        const parser = new DOMParser();
-        const dom = parser.parseFromString(htmlString, "text/html");
-        const nodes = $generateNodesFromDOM(editor, dom);
-        currentSelection.insertText("");
-        $insertNodes(nodes);
-      });
+      const imageUrl = extractImageUrlFromHtml(htmlString);
+      return imageUrl;
     } catch (error) {
       console.error("Error generating image via agent:", error);
       throw error;
     }
   };
+  const insertImageIntoEditor = (imageUrl, prompt) => {
+    try {
+      editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
+        src: imageUrl,
+        altText: "Generated image",
+        originalPrompt: prompt
+        // Store the prompt for refinement
+      });
+    } catch (error) {
+      console.error("Error inserting image into editor:", error);
+      throw error;
+    }
+  };
   useEffect$1(() => {
     return editor.registerCommand(
       AI_ACTION_COMMAND,
@@ -8065,7 +8340,8 @@ const AIRephrasePlugin = () => {
     ImageGenerationManager,
     {
       ref: imageDialogRef,
-      onGenerate: generateImageFromPrompt
+      onGenerate: generateImageFromPrompt,
+      onInsertImage: insertImageIntoEditor
     }
   );
 };
@@ -14395,7 +14671,7 @@ const EmbedComponent = ({ url, displayType, alignment, nodeKey }) => {
     }
   );
 };
-const FileComponent = React$1.lazy(() => import("./index-f0d8f7a8.js"));
+const FileComponent = React$1.lazy(() => import("./index-9548fdb4.js"));
 function convertFileElement(domNode) {
   if (domNode instanceof HTMLDivElement) {
     const dataUrl = domNode.getAttribute("data-lexical-file-src");
@@ -14503,187 +14779,6 @@ function $createFileNode({ src, fileName, fileSize, key }) {
 function $isFileNode(node) {
   return node instanceof FileNode;
 }
-const ImageView = React__default.lazy(() => import("./index-308e13ae.js"));
-function isGoogleDocCheckboxImg(img) {
-  return img.parentElement != null && img.parentElement.tagName === "LI" && img.previousSibling === null && img.getAttribute("aria-roledescription") === "checkbox";
-}
-function $convertImageElement(domNode) {
-  const img = domNode;
-  if (img.src.startsWith("file:///") || isGoogleDocCheckboxImg(img)) {
-    return null;
-  }
-  const { alt: altText, src, width, height } = img;
-  const node = $createImageNode({ altText, height, src, width });
-  return { node };
-}
-class ImageNode extends DecoratorNode {
-  constructor(src, altText, maxWidth, width, height, showCaption, caption, captionsEnabled, key) {
-    super(key);
-    __publicField(this, "__src");
-    __publicField(this, "__altText");
-    __publicField(this, "__width");
-    __publicField(this, "__height");
-    __publicField(this, "__maxWidth");
-    __publicField(this, "__showCaption");
-    __publicField(this, "__caption");
-    // Captions cannot yet be used within editor cells
-    __publicField(this, "__captionsEnabled");
-    this.__src = src;
-    this.__altText = altText;
-    this.__maxWidth = maxWidth;
-    this.__width = width || "inherit";
-    this.__height = height || "inherit";
-    this.__showCaption = showCaption || false;
-    this.__caption = caption || createEditor({
-      nodes: []
-    });
-    this.__captionsEnabled = captionsEnabled || captionsEnabled === void 0;
-  }
-  // to identify the image node and must unique too
-  static getType() {
-    return "image";
-  }
-  // Clones the ImageNode when needed (during editor updates)
-  static clone(node) {
-    return new ImageNode(
-      node.__src,
-      node.__altText,
-      node.__maxWidth,
-      node.__width,
-      node.__height,
-      node.__showCaption,
-      node.__caption,
-      node.__captionsEnabled,
-      node.__key
-    );
-  }
-  // importing to json format
-  static importJSON(serializedNode) {
-    const { altText, height, width, maxWidth, caption, src, showCaption } = serializedNode;
-    const node = $createImageNode({
-      altText,
-      height,
-      maxWidth,
-      showCaption,
-      src,
-      width
-    });
-    const nestedEditor = node.__caption;
-    const editorState = nestedEditor.parseEditorState(caption.editorState);
-    if (!editorState.isEmpty()) {
-      nestedEditor.setEditorState(editorState);
-    }
-    return node;
-  }
-  // Exports this node as an actual <img> tag in the DOM when needed
-  exportDOM() {
-    const element = document.createElement("img");
-    element.setAttribute("src", this.__src);
-    element.setAttribute("alt", this.__altText);
-    element.setAttribute("width", this.__width.toString());
-    element.setAttribute("height", this.__height.toString());
-    return { element };
-  }
-  // convert img tag into image node in the editor using convertImageElement func
-  static importDOM() {
-    return {
-      img: (node) => ({
-        conversion: $convertImageElement,
-        priority: 0
-      })
-    };
-  }
-  exportJSON() {
-    return {
-      altText: this.getAltText(),
-      caption: this.__caption.toJSON(),
-      height: this.__height === "inherit" ? 0 : this.__height,
-      maxWidth: this.__maxWidth,
-      showCaption: this.__showCaption,
-      src: this.getSrc(),
-      type: "image",
-      version: 1,
-      width: this.__width === "inherit" ? 0 : this.__width
-    };
-  }
-  // setting width and height when resizing
-  setWidthAndHeight(width, height) {
-    const writable = this.getWritable();
-    writable.__width = width;
-    writable.__height = height;
-  }
-  // state to update to show the caption
-  setShowCaption(showCaption) {
-    const writable = this.getWritable();
-    writable.__showCaption = showCaption;
-  }
-  // To create a dom representation of image view
-  createDOM(config) {
-    const span = document.createElement("span");
-    const theme2 = config.theme;
-    const className = theme2.image;
-    if (className !== void 0) {
-      span.className = className;
-    }
-    return span;
-  }
-  updateDOM() {
-    return false;
-  }
-  // to get the image src
-  getSrc() {
-    return this.__src;
-  }
-  getAltText() {
-    return this.__altText;
-  }
-  // to render the image tag
-  decorate() {
-    return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
-      ImageView,
-      {
-        src: this.__src,
-        altText: this.__altText,
-        width: this.__width,
-        height: this.__height,
-        maxWidth: this.__maxWidth,
-        nodeKey: this.getKey(),
-        showCaption: this.__showCaption,
-        caption: this.__caption,
-        captionsEnabled: this.__captionsEnabled,
-        resizable: true
-      }
-    ) });
-  }
-}
-function $createImageNode({
-  altText,
-  height,
-  maxWidth = 500,
-  captionsEnabled,
-  src,
-  width,
-  showCaption,
-  caption,
-  key
-}) {
-  return $applyNodeReplacement(
-    new ImageNode(
-      src,
-      altText,
-      maxWidth,
-      width,
-      height,
-      showCaption,
-      caption,
-      captionsEnabled,
-      key
-    )
-  );
-}
-function $isImageNode(node) {
-  return node instanceof ImageNode;
-}
 function $convertMentionElement(domNode) {
   const textContent = domNode.textContent;
   const mentionName = domNode.getAttribute("data-lexical-mention-name");
@@ -15618,24 +15713,6 @@ const BoldIcon = () => /* @__PURE__ */ jsx(
     )
   }
 );
-const PlusIcon = () => /* @__PURE__ */ jsxs(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    children: [
-      /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
-      /* @__PURE__ */ jsx("path", { d: "M12 5v14" })
-    ]
-  }
-);
 const ChevronDownIcon = () => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -16038,7 +16115,6 @@ const RecordingIcon = () => /* @__PURE__ */ jsx(
   }
 );
 const AddCommentIcon = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M19 14.3333C19 14.7459 18.8361 15.1416 18.5444 15.4333C18.2527 15.725 17.857 15.8889 17.4444 15.8889H8.11111L5 19V6.55556C5 6.143 5.16389 5.74733 5.45561 5.45561C5.74733 5.16389 6.143 5 6.55556 5H17.4444C17.857 5 18.2527 5.16389 18.5444 5.45561C18.8361 5.74733 19 6.143 19 6.55556V14.3333Z", stroke: "currentColor", strokeWidth: "1.33333", strokeLinecap: "round", strokeLinejoin: "round" }) });
-const CheckIcon = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
 const QuoteIcon = () => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [
   /* @__PURE__ */ jsx("path", { d: "M4.75 19C7 19 10 18.2222 10 12.7779V6.55575C10 5.58354 9.433 4.98699 8.5 5.00022H5.5C4.5625 5.00022 4 5.58354 4 6.53397V11.2223C4 12.1945 4.5625 12.7779 5.5 12.7779C6.25 12.7779 6.25 12.7779 6.25 13.5556V14.3334C6.25 15.1112 5.5 15.8889 4.75 15.8889C4 15.8889 4 15.8952 4 16.6908V18.2222C4 19 4 19 4.75 19Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
   /* @__PURE__ */ jsx("path", { d: "M14.75 19C17 19 20 18.2222 20 12.7779V6.55575C20 5.58354 19.4323 4.98699 18.5 5.00022H15.5C14.5625 5.00022 14 5.58354 14 6.53397V11.2223C14 12.1945 14.5625 12.7779 15.5 12.7779H16.0625C16.0625 14.5278 16.25 15.8889 14 15.8889V18.2222C14 19 14 19 14.75 19Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
@@ -16184,6 +16260,154 @@ const formatMenuItems = [
   }
 ];
 const LOWEST_PRIORITY = 1;
+class FeatureSuggestionAPI {
+  static async createSuggestion(data, apiKey) {
+    const response = await backendAPI.post(
+      "/api/feature-suggestions",
+      data,
+      apiKey ? { headers: { "X-API-Key": apiKey } } : void 0
+    );
+    return response.data;
+  }
+}
+function FeatureSuggestionDialog({
+  open,
+  onOpenChange
+}) {
+  const { apiKey } = useEditor();
+  const [title, setTitle] = useState$1("");
+  const [description, setDescription] = useState$1("");
+  const [isSubmitting, setIsSubmitting] = useState$1(false);
+  const [errors, setErrors] = useState$1({});
+  const validateForm = () => {
+    const newErrors = {};
+    if (!title.trim()) {
+      newErrors.title = "Title is required";
+    }
+    if (!description.trim()) {
+      newErrors.description = "Description is required";
+    } else if (description.trim().length < 10) {
+      newErrors.description = "Description must be at least 10 characters";
+    }
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!validateForm()) {
+      return;
+    }
+    setIsSubmitting(true);
+    try {
+      await FeatureSuggestionAPI.createSuggestion(
+        {
+          title: title.trim(),
+          description: description.trim()
+        },
+        apiKey || void 0
+      );
+      toast.success("Success!", {
+        description: "Your feature suggestion has been submitted successfully!"
+      });
+      setTitle("");
+      setDescription("");
+      setErrors({});
+      onOpenChange(false);
+    } catch (error) {
+      console.error("Error submitting suggestion:", error);
+      toast.error("Error", {
+        description: "Failed to submit feature suggestion. Please try again."
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const handleCancel = () => {
+    setTitle("");
+    setDescription("");
+    setErrors({});
+    onOpenChange(false);
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[500px]", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsxs(DialogTitle, { className: "cteditor-flex cteditor-items-center cteditor-gap-2", children: [
+        /* @__PURE__ */ jsx(Lightbulb, { className: "cteditor-h-5 cteditor-w-5 cteditor-text-primary" }),
+        "Suggest a Feature"
+      ] }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: "Help us improve by suggesting new features you'd like to see" })
+    ] }),
+    /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ jsxs("div", { className: "cteditor-grid cteditor-gap-4 cteditor-py-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "cteditor-grid cteditor-gap-2", children: [
+          /* @__PURE__ */ jsx(Label$2, { htmlFor: "title", children: "Feature Name *" }),
+          /* @__PURE__ */ jsx(
+            Input$1,
+            {
+              id: "title",
+              placeholder: "Enter a title for your feature suggestion",
+              value: title,
+              onChange: (e) => {
+                setTitle(e.target.value);
+                if (errors.title) {
+                  setErrors({ ...errors, title: void 0 });
+                }
+              },
+              className: errors.title ? "cteditor-border-red-500 focus-visible:cteditor-ring-red-500" : ""
+            }
+          ),
+          errors.title && /* @__PURE__ */ jsx("p", { className: "cteditor-text-sm cteditor-text-red-500", children: errors.title })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "cteditor-grid cteditor-gap-2", children: [
+          /* @__PURE__ */ jsx(Label$2, { htmlFor: "description", children: "Description *" }),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              id: "description",
+              placeholder: "Describe your feature suggestion in detail. What problem would it solve? How would it work?",
+              value: description,
+              onChange: (e) => {
+                setDescription(e.target.value);
+                if (errors.description) {
+                  setErrors({ ...errors, description: void 0 });
+                }
+              },
+              className: `cteditor-flex cteditor-min-h-[120px] cteditor-w-full cteditor-rounded-md cteditor-border cteditor-border-input cteditor-bg-transparent cteditor-px-3 cteditor-py-2 cteditor-text-base cteditor-shadow-sm placeholder:cteditor-text-muted-foreground focus-visible:cteditor-outline-none focus-visible:cteditor-ring-1 focus-visible:cteditor-ring-ring disabled:cteditor-cursor-not-allowed disabled:cteditor-opacity-50 ${errors.description ? "cteditor-border-red-500 focus-visible:cteditor-ring-red-500" : ""}`
+            }
+          ),
+          errors.description && /* @__PURE__ */ jsx("p", { className: "cteditor-text-sm cteditor-text-red-500", children: errors.description })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "cteditor-p-3 cteditor-bg-muted/50 cteditor-rounded-lg", children: [
+          /* @__PURE__ */ jsxs("div", { className: "cteditor-flex cteditor-items-center cteditor-gap-1 cteditor-mb-2", children: [
+            /* @__PURE__ */ jsx(Lightbulb, { className: "cteditor-h-4 cteditor-w-4" }),
+            /* @__PURE__ */ jsx("h3", { className: "cteditor-text-sm cteditor-font-medium", children: "Tips for a great suggestion:" })
+          ] }),
+          /* @__PURE__ */ jsxs("ul", { className: "cteditor-text-xs cteditor-text-muted-foreground cteditor-space-y-1", children: [
+            /* @__PURE__ */ jsx("li", { children: "• Be specific about what you want and why it would be useful" }),
+            /* @__PURE__ */ jsx("li", { children: "• Explain the problem your suggestion would solve" }),
+            /* @__PURE__ */ jsx("li", { children: "• Consider how other users might benefit from this feature" }),
+            /* @__PURE__ */ jsx("li", { children: "• Include any relevant examples or use cases" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(DialogFooter, { children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            onClick: handleCancel,
+            disabled: isSubmitting,
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { type: "submit", disabled: isSubmitting, children: isSubmitting ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Loader2, { className: "cteditor-h-4 cteditor-w-4 cteditor-animate-spin cteditor-mr-2" }),
+          "Submitting..."
+        ] }) : "Submit Suggestion" })
+      ] })
+    ] })
+  ] }) });
+}
 const DEFAULT_FONT_SIZE = 15;
 const INITIAL_TOOLBAR_STATE = {
   bgColor: "#fff",
@@ -17013,254 +17237,80 @@ function AIChatPlugin({
   const [editor] = useLexicalComposerContext();
   return useAIChatToolbar(editor, apiKey);
 }
-const OPEN_TABLE_MODAL_COMMAND = createCommand();
-const getContrastColor = (hexColor) => {
-  const hex = hexColor.replace("#", "");
-  const r2 = parseInt(hex.substr(0, 2), 16);
-  const g2 = parseInt(hex.substr(2, 2), 16);
-  const b2 = parseInt(hex.substr(4, 2), 16);
-  const luminance = (0.299 * r2 + 0.587 * g2 + 0.114 * b2) / 255;
-  return luminance > 0.5 ? "#000000" : "#FFFFFF";
-};
+const CREATE_TABLE_COMMAND = createCommand();
 function TableOptionPlugin() {
-  const [isOpen, setIsOpen] = useState$1(false);
-  const [rows, setRows] = useState$1("");
-  const [columns, setColumns] = useState$1("");
-  const [includeHeaders, setIncludeHeaders] = useState$1(false);
-  const [columnHeadings, setColumnHeadings] = useState$1([]);
-  const [headerColor, setHeaderColor] = useState$1("#4A90E2");
   const [editor] = useLexicalComposerContext();
-  useEffect$1(() => {
-    return editor.registerCommand(
-      OPEN_TABLE_MODAL_COMMAND,
-      () => {
-        setIsOpen(true);
-        return true;
-      },
-      COMMAND_PRIORITY_EDITOR
-    );
-  }, [editor]);
-  const onAddTable = () => {
-    const rowCount = Number(rows);
-    const colCount = Number(columns);
-    if (!rowCount || !colCount)
-      return;
+  const createInstantTable = React__default.useCallback(() => {
+    const rowCount = 3;
+    const colCount = 3;
+    const headerColor = "#565656ff";
     editor.update(() => {
-      const tableNode = $createTableNodeWithDimensions(
+      const selection = $getSelection();
+      let shouldReplaceCurrentNode = false;
+      if ($isRangeSelection(selection)) {
+        const anchorNode = selection.anchor.getNode();
+        const parent = anchorNode.getParent();
+        if (parent) {
+          try {
+            const element = anchorNode.getTopLevelElementOrThrow();
+            if ($isParagraphNode(element) && element.getTextContent().trim() === "") {
+              shouldReplaceCurrentNode = true;
+            }
+          } catch (error) {
+            shouldReplaceCurrentNode = false;
+          }
+        }
+      }
+      const tableNode = $createTableNodeWithDimensions(
         rowCount,
         colCount,
         false
         // Don't use built-in headers, we'll set them manually
       );
-      if (includeHeaders) {
-        const rowsNodes = tableNode.getChildren();
-        const headerRow = rowsNodes[0];
-        if ($isTableRowNode(headerRow)) {
-          const cells = headerRow.getChildren();
-          for (let i2 = 0; i2 < cells.length; i2++) {
-            const cellNode = cells[i2];
-            if ($isTableCellNode(cellNode)) {
-              cellNode.clear();
-              const headingText = (columnHeadings[i2] || "").trim();
-              if (headingText) {
-                cellNode.append($createTextNode(headingText));
-              }
-              cellNode.setHeaderStyles(TableCellHeaderStates.COLUMN);
-              cellNode.setBackgroundColor(headerColor);
-            }
+      const rowsNodes = tableNode.getChildren();
+      const headerRow = rowsNodes[0];
+      if ($isTableRowNode(headerRow)) {
+        const cells = headerRow.getChildren();
+        for (let i2 = 0; i2 < cells.length; i2++) {
+          const cellNode = cells[i2];
+          if ($isTableCellNode(cellNode)) {
+            cellNode.setHeaderStyles(TableCellHeaderStates.COLUMN);
+            cellNode.setBackgroundColor(headerColor);
+            const textNode = $createTextNode("​");
+            cellNode.append(textNode);
           }
         }
       }
-      $insertNodeToNearestRoot(tableNode);
-    });
-    if (includeHeaders) {
-      const textColor = getContrastColor(headerColor);
-      requestAnimationFrame(() => {
-        const applyStyles = () => {
-          const rootElement = editor.getRootElement();
-          if (!rootElement)
-            return false;
-          const tables = rootElement.querySelectorAll("table");
-          if (tables.length > 0) {
-            const latestTable = tables[tables.length - 1];
-            const rows2 = latestTable.querySelectorAll("tr");
-            if (rows2.length > 0) {
-              const firstRow = rows2[0];
-              const cells = firstRow.querySelectorAll("th, td");
-              cells.forEach((cell) => {
-                const htmlCell = cell;
-                htmlCell.style.setProperty("background-color", headerColor, "important");
-                htmlCell.style.setProperty("color", textColor, "important");
-                htmlCell.style.setProperty("font-weight", "bold", "important");
-                htmlCell.style.setProperty("padding", "8px", "important");
-              });
-              return true;
-            }
-          }
-          return false;
-        };
-        if (!applyStyles()) {
-          setTimeout(applyStyles, 100);
+      if (shouldReplaceCurrentNode && $isRangeSelection(selection)) {
+        try {
+          const anchorNode = selection.anchor.getNode();
+          const element = anchorNode.getTopLevelElementOrThrow();
+          element.replace(tableNode);
+        } catch (error) {
+          $insertNodeToNearestRoot(tableNode);
         }
-      });
-    }
-    setRows("");
-    setColumns("");
-    setIncludeHeaders(false);
-    setColumnHeadings([]);
-    setHeaderColor("#4A90E2");
-    setIsOpen(false);
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxs(DialogContent, { children: [
-      /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Add Table" }) }),
-      /* @__PURE__ */ jsxs("div", { className: "cteditor-grid cteditor-gap-4 cteditor-py-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "cteditor-grid cteditor-gap-2", children: [
-          /* @__PURE__ */ jsx(Label$2, { htmlFor: "rows", children: "Rows" }),
-          /* @__PURE__ */ jsx(
-            Input$1,
-            {
-              id: "rows",
-              type: "number",
-              value: rows,
-              onChange: (e) => setRows(e.target.value),
-              autoFocus: true
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "cteditor-grid cteditor-gap-2", children: [
-          /* @__PURE__ */ jsx(Label$2, { htmlFor: "columns", children: "Columns" }),
-          /* @__PURE__ */ jsx(
-            Input$1,
-            {
-              id: "columns",
-              type: "number",
-              value: columns,
-              onChange: (e) => {
-                const value = e.target.value;
-                setColumns(value);
-                const count2 = Number(value);
-                if (!Number.isNaN(count2) && includeHeaders) {
-                  setColumnHeadings((prev) => {
-                    const next = [...prev];
-                    next.length = Math.max(0, count2);
-                    for (let i2 = 0; i2 < count2; i2++) {
-                      if (typeof next[i2] !== "string")
-                        next[i2] = "";
-                    }
-                    return next;
-                  });
-                }
-              }
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "cteditor-flex cteditor-items-center cteditor-gap-2", children: /* @__PURE__ */ jsxs(
-          "label",
-          {
-            htmlFor: "include-headers",
-            className: "cteditor-flex cteditor-items-center cteditor-space-x-2 cteditor-cursor-pointer cteditor-select-none",
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "cteditor-relative cteditor-h-5", children: [
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    id: "include-headers",
-                    type: "checkbox",
-                    checked: includeHeaders,
-                    onChange: (e) => {
-                      const checked = e.target.checked;
-                      setIncludeHeaders(checked);
-                      const count2 = Number(columns);
-                      if (checked && count2 > 0) {
-                        setColumnHeadings((prev) => {
-                          const next = [...prev];
-                          next.length = count2;
-                          for (let i2 = 0; i2 < count2; i2++) {
-                            if (typeof next[i2] !== "string")
-                              next[i2] = "";
-                          }
-                          return next;
-                        });
-                      }
-                      if (!checked) {
-                        setColumnHeadings([]);
-                      }
-                    },
-                    className: "\n          cteditor-peer\n          cteditor-appearance-none\n          cteditor-w-5 cteditor-h-5\n          cteditor-border cteditor-border-gray-400 cteditor-rounded\n          cteditor-transition-all cteditor-duration-200\n          checked:cteditor-bg-blue-600 checked:cteditor-border-blue-600\n          hover:cteditor-border-blue-500 [&>span]:checked:cteditor-opacity-100\n         \n        "
-                  }
-                ),
-                /* @__PURE__ */ jsx("span", { className: "cteditor-absolute cteditor-top-1/2 cteditor-left-1/2 [&>svg]:cteditor-size-4 -cteditor-translate-x-1/2 -cteditor-translate-y-1/2 cteditor-opacity-0 peer-checked:cteditor-opacity-100", children: /* @__PURE__ */ jsx(CheckIcon, {}) })
-              ] }),
-              /* @__PURE__ */ jsx("span", { className: "cteditor-text-sm cteditor-font-medium ", children: "Add column headers" })
-            ]
-          }
-        ) }),
-        includeHeaders && Number(columns) > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("div", { className: "cteditor-grid cteditor-gap-2 cteditor-space-y-1", children: [
-            /* @__PURE__ */ jsx(Label$2, { children: "Header titles" }),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "cteditor-grid cteditor-gap-2",
-                style: { gridTemplateColumns: "repeat(2, minmax(0, 1fr))" },
-                children: Array.from({ length: Number(columns) }).map((_, i2) => /* @__PURE__ */ jsxs("div", { className: "cteditor-grid cteditor-gap-1", children: [
-                  /* @__PURE__ */ jsxs(
-                    Label$2,
-                    {
-                      className: "cteditor-font-normal",
-                      htmlFor: `col-heading-${i2}`,
-                      children: [
-                        "Column ",
-                        i2 + 1
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Input$1,
-                    {
-                      id: `col-heading-${i2}`,
-                      type: "text",
-                      value: columnHeadings[i2] ?? "",
-                      onChange: (e) => {
-                        const value = e.target.value;
-                        setColumnHeadings((prev) => {
-                          const next = [...prev];
-                          next[i2] = value;
-                          return next;
-                        });
-                      }
-                    }
-                  )
-                ] }, i2))
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "cteditor-grid cteditor-gap-2", children: [
-            /* @__PURE__ */ jsx(Label$2, { htmlFor: "header-color", children: "Header color" }),
-            /* @__PURE__ */ jsxs("div", { className: "cteditor-flex cteditor-items-center cteditor-gap-3", children: [
-              /* @__PURE__ */ jsx("div", { className: "cteditor-size-9 cteditor-rounded-md cteditor-relative cteditor-overflow-hidden", children: /* @__PURE__ */ jsx(
-                "input",
-                {
-                  id: "header-color",
-                  type: "color",
-                  value: headerColor,
-                  onChange: (e) => setHeaderColor(e.target.value),
-                  className: "cteditor-w-12 cteditor-h-10 cteditor-border cteditor-border-gray-300 cteditor-rounded cteditor-cursor-pointer cteditor-scale-150"
-                }
-              ) }),
-              /* @__PURE__ */ jsx("div", { className: "cteditor-flex cteditor-items-center cteditor-gap-2", children: /* @__PURE__ */ jsx("span", { className: "cteditor-text-sm ", children: headerColor }) })
-            ] })
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs(DialogFooter, { children: [
-        /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => setIsOpen(false), children: "Cancel" }),
-        /* @__PURE__ */ jsx(Button, { onClick: onAddTable, disabled: !rows || !columns, children: "Add" })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: () => setIsOpen(true), size: "icon-sm", children: /* @__PURE__ */ jsx("span", { className: "[&_svg]:!cteditor-size-4", children: /* @__PURE__ */ jsx(PerspectiveIcon, {}) }) })
-  ] });
+      } else {
+        $insertNodeToNearestRoot(tableNode);
+      }
+      if ($isTableRowNode(headerRow)) {
+        const cells = headerRow.getChildren();
+        if (cells.length > 0 && $isTableCellNode(cells[0])) {
+          cells[0].selectStart();
+        }
+      }
+    });
+  }, [editor]);
+  useEffect$1(() => {
+    return editor.registerCommand(
+      CREATE_TABLE_COMMAND,
+      () => {
+        createInstantTable();
+        return true;
+      },
+      COMMAND_PRIORITY_EDITOR
+    );
+  }, [editor, createInstantTable]);
+  return /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: createInstantTable, size: "icon-sm", children: /* @__PURE__ */ jsx("span", { className: "[&_svg]:!cteditor-size-4", children: /* @__PURE__ */ jsx(PerspectiveIcon, {}) }) });
 }
 createCommand();
 const INSERT_TRANSCRIPT_COMMAND = createCommand();
@@ -17780,10 +17830,10 @@ const PDF_CONFIG = {
 };
 const loadHtml2Pdf = async () => {
   try {
-    const mod = await import("./html2pdf.bundle.min-bb81d5dc.js").then((n) => n.h);
+    const mod = await import("./html2pdf.bundle.min-b3120e0c.js").then((n) => n.h);
     return (mod == null ? void 0 : mod.default) || mod;
   } catch {
-    const mod2 = await import("./html2pdf.bundle-40cc5697.js").then((n) => n.h);
+    const mod2 = await import("./html2pdf.bundle-6d32d085.js").then((n) => n.h);
     return (mod2 == null ? void 0 : mod2.default) || mod2;
   }
 };
@@ -22132,32 +22182,6 @@ const HighlightColorPicker = ({
     )
   ] });
 };
-const INSERT_IMAGE_COMMAND = createCommand("INSERT_IMAGE_COMMAND");
-const ImagePlugin = ({
-  captionsEnabled
-}) => {
-  const [editor] = useLexicalComposerContext();
-  useEffect$1(() => {
-    if (!editor.hasNodes([ImageNode])) {
-      throw new Error("ImagesPlugin: ImageNode not registered on editor");
-    }
-    return mergeRegister(
-      editor.registerCommand(
-        INSERT_IMAGE_COMMAND,
-        (payload) => {
-          const imageNode = $createImageNode(payload);
-          $insertNodes([imageNode]);
-          if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
-            $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
-          }
-          return true;
-        },
-        COMMAND_PRIORITY_EDITOR
-      )
-    );
-  }, [captionsEnabled, editor]);
-  return null;
-};
 const useS3Uploader = (apiKey) => {
   const [uploadState, setUploadState] = useState$1({
     progress: 0,
@@ -23976,6 +24000,7 @@ const Toolbar = ({
   const contentRef = useRef(null);
   const [hiddenItemIds, setHiddenItemIds] = useState$1(/* @__PURE__ */ new Set());
   const [isImageDialogOpen, setIsImageDialogOpen] = useState$1(false);
+  const [isFeatureSuggestionDialogOpen, setIsFeatureSuggestionDialogOpen] = useState$1(false);
   const classes = useStyles$1();
   const { hasFormat, isEditorEmpty, blockType, clearFormatting } = useEditorToolbar();
   const { clearEditorContent } = useCustomCommands();
@@ -25266,7 +25291,24 @@ const Toolbar = ({
                 ] }) })
               ]
             }
-          )
+          ),
+          /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+              Button,
+              {
+                "data-toolbar-item": "suggestFeature",
+                variant: "ghost",
+                size: "sm",
+                onClick: () => setIsFeatureSuggestionDialogOpen(true),
+                className: "cteditor-relative",
+                children: [
+                  /* @__PURE__ */ jsx(Lightbulb, { className: "!cteditor-size-4" }),
+                  /* @__PURE__ */ jsx("span", {})
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Suggest a Feature" }) })
+          ] }) })
         ]
       }
     ),
@@ -25276,6 +25318,13 @@ const Toolbar = ({
         activeEditor,
         onClose: closeImageDialog
       }
+    ),
+    /* @__PURE__ */ jsx(
+      FeatureSuggestionDialog,
+      {
+        open: isFeatureSuggestionDialogOpen,
+        onOpenChange: setIsFeatureSuggestionDialogOpen
+      }
     )
   ] });
 };
@@ -27908,7 +27957,7 @@ function FloatingLinkEditor({
       return;
     }
     const rootElement = editor.getRootElement();
-    const isCreatingNewLink = isLinkEditMode && linkUrl === "https://";
+    const isInEditMode = isLinkEditMode;
     if (selection !== null && nativeSelection !== null && rootElement !== null && rootElement.contains(nativeSelection.anchorNode) && editor.isEditable()) {
       const domRect = (_b = (_a = nativeSelection.focusNode) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.getBoundingClientRect();
       if (domRect) {
@@ -27917,7 +27966,7 @@ function FloatingLinkEditor({
       }
       setLastSelection(selection);
     } else if (!activeElement || activeElement.className !== "link-input") {
-      if (!isCreatingNewLink) {
+      if (!isInEditMode) {
         if (rootElement !== null) {
           setFloatingElemPositionForLinkEditor(null, editorElem, anchorElem);
         }
@@ -28047,7 +28096,7 @@ function FloatingLinkEditor({
     "div",
     {
       ref: editorRef,
-      className: "link-editor  cteditor-border cteditor-border-background/20 cteditor-rounded-md cteditor-shadow-2xl cteditor-overflow-hidden cteditor-backdrop-blur-sm",
+      className: "link-editor cteditor-bg-white cteditor-border cteditor-border-gray-200 cteditor-rounded-md cteditor-shadow-2xl cteditor-overflow-hidden",
       children: shouldShowEditMode ? (
         // EDIT MODE - Input to edit URL
         /* @__PURE__ */ jsxs("div", { className: "cteditor-flex cteditor-items-center cteditor-gap-2 cteditor-p-1 cteditor-w-full", children: [
@@ -28055,7 +28104,7 @@ function FloatingLinkEditor({
             "input",
             {
               ref: inputRef,
-              className: "link-input cteditor-w-full cteditor-px-4 cteditor-py-2.5 cteditor-text-sm cteditor-border cteditor-border-background/20 cteditor-rounded-md cteditor-bg-transparent cteditor-transition-all cteditor-duration-200 cteditor-text-background placeholder:cteditor-text-background cteditor-font-medium cteditor-outline-background/30",
+              className: "link-input cteditor-w-full cteditor-px-4 cteditor-py-2.5 cteditor-text-sm cteditor-border cteditor-border-gray-300 cteditor-rounded-md cteditor-bg-white cteditor-transition-all cteditor-duration-200 cteditor-text-gray-900 placeholder:cteditor-text-gray-500 cteditor-font-medium focus:cteditor-outline-none focus:cteditor-ring-2 focus:cteditor-ring-blue-500",
               value: editedLinkUrl,
               placeholder: "Enter URL (e.g., https://example.com)",
               onChange: (event) => setEditedLinkUrl(event.target.value),
@@ -28078,7 +28127,7 @@ function FloatingLinkEditor({
           /* @__PURE__ */ jsx(
             "button",
             {
-              className: "cteditor-p-2.5 cteditor-rounded-lg cteditor-bg-background hover:cteditor-bg-background/80 cteditor-text-foreground hover:cteditor-text-foreground cteditor-transition-all cteditor-duration-200 hover:cteditor-scale-105 active:cteditor-scale-95",
+              className: "cteditor-p-2.5 cteditor-rounded-lg cteditor-bg-green-500 hover:cteditor-bg-green-600 cteditor-text-white cteditor-transition-all cteditor-duration-200 hover:cteditor-scale-105 active:cteditor-scale-95",
               onClick: handleLinkSubmission,
               title: "Save link",
               children: /* @__PURE__ */ jsx(Check, { className: "cteditor-size-4" })
@@ -28087,7 +28136,7 @@ function FloatingLinkEditor({
           /* @__PURE__ */ jsx(
             "button",
             {
-              className: "cteditor-p-2.5 cteditor-rounded-lg cteditor-bg-background hover:cteditor-bg-background/80 cteditor-text-foreground hover:cteditor-text-foreground cteditor-transition-all cteditor-duration-200 hover:cteditor-scale-105 active:cteditor-scale-95",
+              className: "cteditor-p-2.5 cteditor-rounded-lg cteditor-bg-gray-200 hover:cteditor-bg-gray-300 cteditor-text-gray-700 cteditor-transition-all cteditor-duration-200 hover:cteditor-scale-105 active:cteditor-scale-95",
               onClick: () => {
                 if (linkUrl === "https://") {
                   editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
@@ -28104,15 +28153,15 @@ function FloatingLinkEditor({
       ) : showUrlView ? (
         // URL VIEW - Shows URL with edit and delete buttons
         /* @__PURE__ */ jsxs("div", { className: "cteditor-p-3 cteditor-space-y-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "cteditor-flex cteditor-items-center cteditor-gap-2", children: /* @__PURE__ */ jsxs("div", { className: "cteditor-flex-1 cteditor-flex cteditor-items-center cteditor-gap-2 cteditor-px-3 cteditor-py-2 cteditor-bg-accent/30 cteditor-rounded-lg cteditor-border cteditor-border-border/30", children: [
-            /* @__PURE__ */ jsx(ExternalLink, { className: "cteditor-size-3.5 cteditor-text-primary cteditor-flex-shrink-0" }),
+          /* @__PURE__ */ jsx("div", { className: "cteditor-flex cteditor-items-center cteditor-gap-2", children: /* @__PURE__ */ jsxs("div", { className: "cteditor-flex-1 cteditor-flex cteditor-items-center cteditor-gap-2 cteditor-px-3 cteditor-py-2 cteditor-bg-blue-50 cteditor-rounded-lg cteditor-border cteditor-border-blue-200", children: [
+            /* @__PURE__ */ jsx(ExternalLink, { className: "cteditor-size-3.5 cteditor-text-blue-600 cteditor-flex-shrink-0" }),
             /* @__PURE__ */ jsx(
               "a",
               {
                 href: sanitizeUrl(linkUrl),
                 target: "_blank",
                 rel: "noopener noreferrer",
-                className: "cteditor-flex-1 cteditor-text-xs cteditor-text-primary hover:cteditor-text-primary/80 cteditor-font-medium cteditor-truncate cteditor-transition-colors cteditor-no-underline",
+                className: "cteditor-flex-1 cteditor-text-xs cteditor-text-blue-600 hover:cteditor-text-blue-800 cteditor-font-medium cteditor-truncate cteditor-transition-colors cteditor-no-underline",
                 title: linkUrl,
                 children: linkUrl
               }
@@ -28122,8 +28171,14 @@ function FloatingLinkEditor({
             /* @__PURE__ */ jsxs(
               "button",
               {
-                className: "cteditor-flex-1 cteditor-px-3 cteditor-py-2 cteditor-rounded-lg cteditor-bg-primary/10 hover:cteditor-bg-primary hover:cteditor-text-primary-foreground cteditor-text-primary cteditor-text-xs cteditor-font-medium cteditor-transition-all cteditor-duration-200 hover:cteditor-scale-[1.02] active:cteditor-scale-95 cteditor-flex cteditor-items-center cteditor-justify-center cteditor-gap-1.5",
-                onClick: () => {
+                className: "cteditor-flex-1 cteditor-px-3 cteditor-py-2 cteditor-rounded-lg cteditor-bg-blue-100 hover:cteditor-bg-blue-600 hover:cteditor-text-white cteditor-text-blue-700 cteditor-text-xs cteditor-font-medium cteditor-transition-all cteditor-duration-200 hover:cteditor-scale-[1.02] active:cteditor-scale-95 cteditor-flex cteditor-items-center cteditor-justify-center cteditor-gap-1.5",
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                },
+                onClick: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
                   setEditedLinkUrl(linkUrl);
                   setIsLinkEditMode(true);
                   setShowUrlView(false);
@@ -28138,8 +28193,14 @@ function FloatingLinkEditor({
             /* @__PURE__ */ jsxs(
               "button",
               {
-                className: "cteditor-flex-1 cteditor-px-3 cteditor-py-2 cteditor-rounded-lg cteditor-bg-destructive/10 hover:cteditor-bg-destructive hover:cteditor-text-destructive-foreground cteditor-text-destructive cteditor-text-xs cteditor-font-medium cteditor-transition-all cteditor-duration-200 hover:cteditor-scale-[1.02] active:cteditor-scale-95 cteditor-flex cteditor-items-center cteditor-justify-center cteditor-gap-1.5",
-                onClick: () => {
+                className: "cteditor-flex-1 cteditor-px-3 cteditor-py-2 cteditor-rounded-lg cteditor-bg-red-100 hover:cteditor-bg-red-600 hover:cteditor-text-white cteditor-text-red-700 cteditor-text-xs cteditor-font-medium cteditor-transition-all cteditor-duration-200 hover:cteditor-scale-[1.02] active:cteditor-scale-95 cteditor-flex cteditor-items-center cteditor-justify-center cteditor-gap-1.5",
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                },
+                onClick: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
                   editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
                   setShowUrlView(false);
                 },
@@ -28157,13 +28218,21 @@ function FloatingLinkEditor({
         /* @__PURE__ */ jsxs(
           "button",
           {
-            className: "cteditor-w-full cteditor-px-4 cteditor-py-2.5 cteditor-text-sm cteditor-text-foreground cteditor-font-medium cteditor-truncate cteditor-transition-all cteditor-duration-200 hover:cteditor-bg-accent/50 cteditor-text-left cteditor-flex cteditor-items-center cteditor-gap-2 cteditor-group",
-            onClick: () => setShowUrlView(true),
+            className: "cteditor-w-full cteditor-px-4 cteditor-py-2.5 cteditor-text-sm cteditor-text-gray-900 cteditor-font-medium cteditor-truncate cteditor-transition-all cteditor-duration-200 hover:cteditor-bg-gray-100 cteditor-text-left cteditor-flex cteditor-items-center cteditor-gap-2 cteditor-group",
+            onMouseDown: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            },
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              setShowUrlView(true);
+            },
             title: "Click to view URL and options",
             children: [
-              /* @__PURE__ */ jsx(ExternalLink, { className: "cteditor-size-3.5 cteditor-text-muted-foreground group-hover:cteditor-text-primary cteditor-transition-colors cteditor-flex-shrink-0" }),
+              /* @__PURE__ */ jsx(ExternalLink, { className: "cteditor-size-3.5 cteditor-text-gray-500 group-hover:cteditor-text-blue-600 cteditor-transition-colors cteditor-flex-shrink-0" }),
               /* @__PURE__ */ jsx("span", { className: "cteditor-truncate", children: linkText || "Link" }),
-              /* @__PURE__ */ jsx("span", { className: "cteditor-ml-auto cteditor-text-xs cteditor-text-muted-foreground group-hover:cteditor-text-foreground cteditor-transition-colors", children: "Click to view" })
+              /* @__PURE__ */ jsx("span", { className: "cteditor-ml-auto cteditor-text-xs cteditor-text-gray-500 group-hover:cteditor-text-gray-700 cteditor-transition-colors", children: "Click to view" })
             ]
           }
         )
@@ -28813,77 +28882,366 @@ function LinkPlugin({
     }
   );
 }
-const debounce = (fn, delay) => {
-  let timeoutID;
-  return function(...args) {
-    clearTimeout(timeoutID);
-    timeoutID = window.setTimeout(() => fn.apply(this, args), delay);
-  };
-};
-const LocalStoragePlugin = ({ namespace }) => {
+function LinkPreviewPlugin() {
   const [editor] = useLexicalComposerContext();
-  const saveContent = useCallback(
-    (content) => {
-      localStorage.setItem(namespace, content);
-    },
-    [namespace]
-  );
-  const debouncedSaveContent = debounce(saveContent, 500);
+  const [hoveredLink, setHoveredLink] = useState$1(null);
   useEffect$1(() => {
-    return editor.registerUpdateListener(
-      ({ editorState, dirtyElements, dirtyLeaves }) => {
-        if (dirtyElements.size === 0 && dirtyLeaves.size === 0)
-          return;
-        const serializedState = JSON.stringify(editorState);
-        debouncedSaveContent(serializedState);
+    const editorElement = editor.getRootElement();
+    if (!editorElement)
+      return;
+    let showTimeout = null;
+    let hideTimeout = null;
+    let isOverPreview = false;
+    const handleMouseOver = (event) => {
+      const target = event.target;
+      if (target.closest(".link-preview-card")) {
+        isOverPreview = true;
+        if (hideTimeout) {
+          clearTimeout(hideTimeout);
+          hideTimeout = null;
+        }
+        return;
       }
-    );
-  }, [debouncedSaveContent, editor]);
-  return null;
-};
-const LocalStoragePlugin$1 = LocalStoragePlugin;
-const index$2 = "";
-const PUNCTUATION = `\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'"~=<>_:;`;
-const NAME = "\\b[A-Z][^\\s" + PUNCTUATION + "]";
-const DocumentMentionsRegex = {
-  NAME,
-  PUNCTUATION
-};
-const PUNC = DocumentMentionsRegex.PUNCTUATION;
-const TRIGGERS = ["@"].join("");
-const VALID_CHARS = "[^" + TRIGGERS + PUNC + "\\s]";
-const VALID_JOINS = "(?:\\.[ |$]| |[" + PUNC + "]|)";
-const LENGTH_LIMIT = 75;
-const AtSignMentionsRegex = new RegExp(
-  "(^|\\s|\\()([" + TRIGGERS + "]((?:" + VALID_CHARS + VALID_JOINS + "){0," + LENGTH_LIMIT + "}))$"
-);
-const SUGGESTION_LIST_LENGTH_LIMIT = 5;
-const mentionsCache = /* @__PURE__ */ new Map();
-const userLookupService = {
-  search(userList, string, callback) {
-    setTimeout(() => {
-      const results = userList.filter(
-        (mention) => mention.toLowerCase().includes(string.toLowerCase())
-      );
-      callback(results);
-    }, 500);
+      const linkElement = target.closest("a");
+      if (linkElement) {
+        const href = linkElement.getAttribute("href");
+        if (href && href !== "https://" && href !== "http://" && href !== "#") {
+          if (showTimeout) {
+            clearTimeout(showTimeout);
+          }
+          if (hideTimeout) {
+            clearTimeout(hideTimeout);
+            hideTimeout = null;
+          }
+          showTimeout = window.setTimeout(() => {
+            const rect = linkElement.getBoundingClientRect();
+            setHoveredLink({
+              url: href,
+              text: linkElement.textContent || "",
+              rect
+            });
+          }, 500);
+        }
+      }
+    };
+    const handleMouseOut = (event) => {
+      const target = event.target;
+      const relatedTarget = event.relatedTarget;
+      if (target.closest(".link-preview-card")) {
+        isOverPreview = false;
+        const movingToLink = relatedTarget == null ? void 0 : relatedTarget.closest("a");
+        if (!movingToLink) {
+          hideTimeout = window.setTimeout(() => {
+            if (!isOverPreview) {
+              setHoveredLink(null);
+            }
+          }, 300);
+        }
+        return;
+      }
+      const linkElement = target.closest("a");
+      if (linkElement) {
+        if (showTimeout) {
+          clearTimeout(showTimeout);
+          showTimeout = null;
+        }
+        const movingToPreview = relatedTarget == null ? void 0 : relatedTarget.closest(".link-preview-card");
+        if (!movingToPreview) {
+          hideTimeout = window.setTimeout(() => {
+            if (!isOverPreview) {
+              setHoveredLink(null);
+            }
+          }, 300);
+        }
+      }
+    };
+    editorElement.addEventListener("mouseover", handleMouseOver);
+    editorElement.addEventListener("mouseout", handleMouseOut);
+    document.body.addEventListener("mouseover", handleMouseOver);
+    document.body.addEventListener("mouseout", handleMouseOut);
+    return () => {
+      if (showTimeout) {
+        clearTimeout(showTimeout);
+      }
+      if (hideTimeout) {
+        clearTimeout(hideTimeout);
+      }
+      editorElement.removeEventListener("mouseover", handleMouseOver);
+      editorElement.removeEventListener("mouseout", handleMouseOut);
+      document.body.removeEventListener("mouseover", handleMouseOver);
+      document.body.removeEventListener("mouseout", handleMouseOut);
+    };
+  }, [editor]);
+  if (!hoveredLink) {
+    return null;
   }
-};
-function useMentionLookupService(userList = [], mentionString) {
-  const [results, setResults] = useState$1([]);
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      LinkPreview,
+      {
+        url: hoveredLink.url,
+        rect: hoveredLink.rect,
+        onClose: () => setHoveredLink(null)
+      }
+    ),
+    document.body
+  );
+}
+function LinkPreview({ url, rect, onClose }) {
+  const [position, setPosition] = useState$1({ top: 0, left: 0 });
   useEffect$1(() => {
-    const cachedResults = mentionsCache.get(mentionString);
-    if (mentionString == null) {
-      setResults([]);
-      return;
+    const previewWidth = 300;
+    const previewHeight = 120;
+    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;
+    const viewportWidth = window.innerWidth;
+    if (left < 10) {
+      left = 10;
+    } else if (left + previewWidth > viewportWidth - 10) {
+      left = viewportWidth - previewWidth - 10;
+    }
+    setPosition({ top, left });
+  }, [rect]);
+  const getDomain = (urlString) => {
+    try {
+      const urlObj = new URL(urlString);
+      return urlObj.hostname.replace("www.", "");
+    } catch {
+      return urlString;
     }
-    if (cachedResults === null) {
-      return;
-    } else if (cachedResults !== void 0) {
-      setResults(cachedResults);
-      return;
+  };
+  const domain = getDomain(url);
+  const getProtocol = (urlString) => {
+    try {
+      const urlObj = new URL(urlString);
+      return urlObj.protocol.replace(":", "").toUpperCase();
+    } catch {
+      return "HTTPS";
     }
-    mentionsCache.set(mentionString, null);
+  };
+  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"
+                        }
+                      )
+                    }
+                  )
+                }
+              ),
+              /* @__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);
+          }
+        }
+        
+        @keyframes pulse {
+          0%, 100% {
+            opacity: 1;
+          }
+          50% {
+            opacity: 0.6;
+          }
+        }
+      ` })
+      ]
+    }
+  );
+}
+const debounce = (fn, delay) => {
+  let timeoutID;
+  return function(...args) {
+    clearTimeout(timeoutID);
+    timeoutID = window.setTimeout(() => fn.apply(this, args), delay);
+  };
+};
+const LocalStoragePlugin = ({ namespace }) => {
+  const [editor] = useLexicalComposerContext();
+  const saveContent = useCallback(
+    (content) => {
+      localStorage.setItem(namespace, content);
+    },
+    [namespace]
+  );
+  const debouncedSaveContent = debounce(saveContent, 500);
+  useEffect$1(() => {
+    return editor.registerUpdateListener(
+      ({ editorState, dirtyElements, dirtyLeaves }) => {
+        if (dirtyElements.size === 0 && dirtyLeaves.size === 0)
+          return;
+        const serializedState = JSON.stringify(editorState);
+        debouncedSaveContent(serializedState);
+      }
+    );
+  }, [debouncedSaveContent, editor]);
+  return null;
+};
+const LocalStoragePlugin$1 = LocalStoragePlugin;
+const index$2 = "";
+const PUNCTUATION = `\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'"~=<>_:;`;
+const NAME = "\\b[A-Z][^\\s" + PUNCTUATION + "]";
+const DocumentMentionsRegex = {
+  NAME,
+  PUNCTUATION
+};
+const PUNC = DocumentMentionsRegex.PUNCTUATION;
+const TRIGGERS = ["@"].join("");
+const VALID_CHARS = "[^" + TRIGGERS + PUNC + "\\s]";
+const VALID_JOINS = "(?:\\.[ |$]| |[" + PUNC + "]|)";
+const LENGTH_LIMIT = 75;
+const AtSignMentionsRegex = new RegExp(
+  "(^|\\s|\\()([" + TRIGGERS + "]((?:" + VALID_CHARS + VALID_JOINS + "){0," + LENGTH_LIMIT + "}))$"
+);
+const SUGGESTION_LIST_LENGTH_LIMIT = 5;
+const mentionsCache = /* @__PURE__ */ new Map();
+const userLookupService = {
+  search(userList, string, callback) {
+    setTimeout(() => {
+      const results = userList.filter(
+        (mention) => mention.toLowerCase().includes(string.toLowerCase())
+      );
+      callback(results);
+    }, 500);
+  }
+};
+function useMentionLookupService(userList = [], mentionString) {
+  const [results, setResults] = useState$1([]);
+  useEffect$1(() => {
+    const cachedResults = mentionsCache.get(mentionString);
+    if (mentionString == null) {
+      setResults([]);
+      return;
+    }
+    if (cachedResults === null) {
+      return;
+    } else if (cachedResults !== void 0) {
+      setResults(cachedResults);
+      return;
+    }
+    mentionsCache.set(mentionString, null);
     userLookupService.search(userList, mentionString, (newResults) => {
       mentionsCache.set(mentionString, newResults);
       setResults(newResults);
@@ -29412,7 +29770,7 @@ function SlashCommandPlugin() {
     });
   }, [makeBlock]);
   const insertTable = useCallback(() => {
-    editor.dispatchCommand(OPEN_TABLE_MODAL_COMMAND, void 0);
+    editor.dispatchCommand(CREATE_TABLE_COMMAND, void 0);
   }, [editor]);
   const formatBold = useCallback(() => {
     editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
@@ -29466,9 +29824,6 @@ function SlashCommandPlugin() {
   const openAIChat = useCallback(() => {
     editor.dispatchCommand(TOGGLE_AI_CHAT_COMMAND, void 0);
   }, [editor]);
-  const aiGenerateImage = useCallback(() => {
-    editor.dispatchCommand(AI_IMAGE_COMMAND, void 0);
-  }, [editor]);
   const baseOptions = useMemo(() => {
     return [
       // Block types
@@ -29522,8 +29877,8 @@ function SlashCommandPlugin() {
       // AI features
       new SlashMenuOption("__label__AI", () => {
       }),
-      new SlashMenuOption("AI Chat", openAIChat),
-      new SlashMenuOption("AI Generate image", aiGenerateImage)
+      new SlashMenuOption("AI Chat", openAIChat)
+      // new SlashMenuOption("AI Generate image", aiGenerateImage),
     ];
   }, [
     insertParagraph,
@@ -29549,8 +29904,7 @@ function SlashCommandPlugin() {
     handleClearFormatting,
     handleClearContent,
     addComment,
-    openAIChat,
-    aiGenerateImage
+    openAIChat
   ]);
   const options = useMemo(() => {
     const query = searchQuery || queryString || "";
@@ -30153,10 +30507,12 @@ function TableActionMenu({
     columns: 1,
     rows: 1
   });
+  const [selectionType, setSelectionType] = useState$1(null);
   const [canMergeCells, setCanMergeCells] = useState$1(false);
   const [canUnmergeCell, setCanUnmergeCell] = useState$1(false);
   const [backgroundColor, setBackgroundColor] = useState$1("");
   const [stripingColor, setStripingColor] = useState$1("");
+  const [isHeaderCell, setIsHeaderCell] = useState$1(false);
   useEffect$1(() => {
     updateTableCellNode(_tableCellNode);
   }, [_tableCellNode]);
@@ -30184,10 +30540,43 @@ function TableActionMenu({
         setCanMergeCells(
           currentSelectionCounts.columns > 1 || currentSelectionCounts.rows > 1
         );
+        const anchorNode = $getTableCellNodeFromLexicalNode(selection.anchor.getNode());
+        if (anchorNode) {
+          const tableNode = $getTableNodeFromLexicalNodeOrThrow(anchorNode);
+          const tableRowCount = tableNode.getChildrenSize();
+          const firstRow = tableNode.getFirstChild();
+          const tableColumnCount = firstRow && $isTableRowNode(firstRow) ? firstRow.getChildrenSize() : 0;
+          const nodes = selection.getNodes();
+          const hasHeaderCell = nodes.some((node) => {
+            if ($isTableCellNode(node)) {
+              return node.getHeaderStyles() !== 0;
+            }
+            return false;
+          });
+          setIsHeaderCell(hasHeaderCell);
+          if (currentSelectionCounts.rows === tableRowCount && currentSelectionCounts.columns < tableColumnCount) {
+            setSelectionType("column");
+          } else if (currentSelectionCounts.columns === tableColumnCount && currentSelectionCounts.rows < tableRowCount) {
+            setSelectionType("row");
+          } else {
+            setSelectionType("cell");
+          }
+        } else {
+          setSelectionType(null);
+          setIsHeaderCell(false);
+        }
+      } else {
+        setSelectionType(null);
+        const node = $getTableCellNodeFromLexicalNode(tableCellNode);
+        if (node && $isTableCellNode(node)) {
+          setIsHeaderCell(node.getHeaderStyles() !== 0);
+        } else {
+          setIsHeaderCell(false);
+        }
       }
       setCanUnmergeCell($canUnmerge());
     });
-  }, [editor]);
+  }, [editor, tableCellNode]);
   useEffect$1(() => {
     const menuButtonElement = contextRef.current;
     const dropDownElement = dropDownRef.current;
@@ -30196,6 +30585,7 @@ function TableActionMenu({
       dropDownElement.style.opacity = "1";
       const dropDownElementRect = dropDownElement.getBoundingClientRect();
       const margin = 8;
+      const viewportHeight = window.innerHeight;
       if (contextMenuPosition) {
         let leftPosition = contextMenuPosition.x + margin;
         let topPosition = contextMenuPosition.y + margin;
@@ -30211,6 +30601,12 @@ function TableActionMenu({
         if (topPosition < margin) {
           topPosition = margin;
         }
+        const availableHeight = viewportHeight - topPosition - margin;
+        if (availableHeight < dropDownElementRect.height) {
+          dropDownElement.style.maxHeight = `${availableHeight}px`;
+        } else {
+          dropDownElement.style.maxHeight = "none";
+        }
         dropDownElement.style.left = `${leftPosition}px`;
         dropDownElement.style.top = `${topPosition}px`;
       } else if (chevronPositionRef.current != null) {
@@ -30230,6 +30626,12 @@ function TableActionMenu({
         if (topPosition < margin) {
           topPosition = margin;
         }
+        const availableHeight = viewportHeight - topPosition - margin;
+        if (availableHeight < dropDownElementRect.height) {
+          dropDownElement.style.maxHeight = `${availableHeight}px`;
+        } else {
+          dropDownElement.style.maxHeight = "none";
+        }
         dropDownElement.style.top = `${topPosition}px`;
       } else if (menuButtonElement != null) {
         const menuButtonRect = menuButtonElement.getBoundingClientRect();
@@ -30248,6 +30650,12 @@ function TableActionMenu({
         if (topPosition < margin) {
           topPosition = margin;
         }
+        const availableHeight = viewportHeight - topPosition - margin;
+        if (availableHeight < dropDownElementRect.height) {
+          dropDownElement.style.maxHeight = `${availableHeight}px`;
+        } else {
+          dropDownElement.style.maxHeight = "none";
+        }
         dropDownElement.style.top = `${topPosition}px`;
       }
     }
@@ -30357,8 +30765,29 @@ function TableActionMenu({
   const insertTableRowAtSelection = useCallback(
     (shouldInsertAfter) => {
       editor.update(() => {
+        const selection = $getSelection();
+        if (!($isRangeSelection(selection) || $isTableSelection(selection))) {
+          onClose();
+          return;
+        }
+        const [cell] = $getNodeTriplet(selection.anchor);
+        const tableNode = $getTableNodeFromLexicalNodeOrThrow(cell);
+        const rowIndex = $getTableRowIndexFromTableCellNode(cell);
         for (let i2 = 0; i2 < selectionCounts.rows; i2++) {
           $insertTableRow__EXPERIMENTAL(shouldInsertAfter);
+          const targetRowIndex = shouldInsertAfter ? rowIndex + i2 + 1 : rowIndex - i2;
+          const rows = tableNode.getChildren();
+          if (targetRowIndex >= 0 && targetRowIndex < rows.length) {
+            const newRow = rows[targetRowIndex];
+            if ($isTableRowNode(newRow)) {
+              const cells = newRow.getChildren();
+              cells.forEach((cellNode) => {
+                if ($isTableCellNode(cellNode)) {
+                  cellNode.setHeaderStyles(TableCellHeaderStates.NO_STATUS);
+                }
+              });
+            }
+          }
         }
         onClose();
       });
@@ -30368,33 +30797,57 @@ function TableActionMenu({
   const insertTableColumnAtSelection = useCallback(
     (shouldInsertAfter) => {
       editor.update(() => {
+        const selection = $getSelection();
+        if (!($isRangeSelection(selection) || $isTableSelection(selection))) {
+          onClose();
+          return;
+        }
+        const [cell] = $getNodeTriplet(selection.anchor);
+        if (!$isTableCellNode(cell)) {
+          onClose();
+          return;
+        }
+        const tableNode = $getTableNodeFromLexicalNodeOrThrow(cell);
+        const rows = tableNode.getChildren();
+        let hasColumnHeaders = false;
+        let headerBackgroundColor = null;
+        if (rows.length > 0 && $isTableRowNode(rows[0])) {
+          const firstRow = rows[0];
+          const cells = firstRow.getChildren();
+          if (cells.length > 0 && $isTableCellNode(cells[0])) {
+            const firstCell = cells[0];
+            hasColumnHeaders = (firstCell.getHeaderStyles() & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN;
+            headerBackgroundColor = firstCell.getBackgroundColor();
+          }
+        }
+        const cellColumnIndex = $getTableColumnIndexFromTableCellNode(cell);
         for (let i2 = 0; i2 < selectionCounts.columns; i2++) {
           $insertTableColumn__EXPERIMENTAL(shouldInsertAfter);
         }
-        const selection = $getSelection();
-        if ($isRangeSelection(selection) || $isTableSelection(selection)) {
-          const [cell] = $getNodeTriplet(selection.anchor);
-          if ($isTableCellNode(cell)) {
-            const tableNode = $getTableNodeFromLexicalNodeOrThrow(cell);
-            const rows = tableNode.getChildren();
-            if (rows.length > 0 && $isTableRowNode(rows[0])) {
-              const firstRow = rows[0];
-              const firstRowCells = firstRow.getChildren();
-              if (firstRowCells.length > 0 && $isTableCellNode(firstRowCells[0])) {
-                const firstCell = firstRowCells[0];
-                const hasColumnHeaders = (firstCell.getHeaderStyles() & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN;
-                if (hasColumnHeaders) {
-                  const headerBackgroundColor = firstCell.getBackgroundColor();
-                  for (let i2 = 0; i2 < selectionCounts.columns; i2++) {
-                    const newHeaderCellIndex = firstRowCells.length - 1 - i2;
-                    if (newHeaderCellIndex >= 0) {
-                      const newHeaderCell = firstRowCells[newHeaderCellIndex];
-                      if ($isTableCellNode(newHeaderCell)) {
-                        newHeaderCell.setHeaderStyles(TableCellHeaderStates.COLUMN);
-                        if (headerBackgroundColor) {
-                          newHeaderCell.setBackgroundColor(headerBackgroundColor);
-                        }
-                      }
+        if (hasColumnHeaders) {
+          const updatedFirstRow = tableNode.getChildren()[0];
+          if ($isTableRowNode(updatedFirstRow)) {
+            const updatedCells = updatedFirstRow.getChildren();
+            const startIndex = shouldInsertAfter ? cellColumnIndex + 1 : cellColumnIndex;
+            for (let i2 = 0; i2 < selectionCounts.columns; i2++) {
+              const newColumnIndex = startIndex + i2;
+              if (newColumnIndex >= 0 && newColumnIndex < updatedCells.length) {
+                const newHeaderCell = updatedCells[newColumnIndex];
+                if ($isTableCellNode(newHeaderCell)) {
+                  newHeaderCell.setHeaderStyles(TableCellHeaderStates.COLUMN);
+                  if (headerBackgroundColor) {
+                    newHeaderCell.setBackgroundColor(headerBackgroundColor);
+                  }
+                  if (newHeaderCell.getChildrenSize() === 0) {
+                    const paragraph = $createParagraphNode();
+                    const textNode = $createTextNode("​");
+                    paragraph.append(textNode);
+                    newHeaderCell.append(paragraph);
+                  } else {
+                    const firstChild = newHeaderCell.getFirstChild();
+                    if ($isParagraphNode(firstChild) && firstChild.getTextContentSize() === 0) {
+                      const textNode = $createTextNode("​");
+                      firstChild.append(textNode);
                     }
                   }
                 }
@@ -30404,46 +30857,6 @@ function TableActionMenu({
         }
         onClose();
       });
-      requestAnimationFrame(() => {
-        const applyHeaderStyles = () => {
-          const rootElement = editor.getRootElement();
-          if (!rootElement)
-            return false;
-          const tables = rootElement.querySelectorAll("table");
-          tables.forEach((table) => {
-            const rows = table.querySelectorAll("tr");
-            if (rows.length > 0) {
-              const firstRow = rows[0];
-              const cells = firstRow.querySelectorAll("th, td");
-              if (cells.length > 1) {
-                const firstHeaderCell = cells[0];
-                const headerColor = firstHeaderCell.getAttribute("data-header-color");
-                const textColor = firstHeaderCell.getAttribute("data-text-color");
-                if (headerColor && textColor) {
-                  for (let i2 = 0; i2 < selectionCounts.columns; i2++) {
-                    const cellIndex = cells.length - 1 - i2;
-                    if (cellIndex >= 0) {
-                      const newCell = cells[cellIndex];
-                      newCell.setAttribute("data-header-color", headerColor);
-                      newCell.setAttribute("data-text-color", textColor);
-                      newCell.style.setProperty("background-color", headerColor, "important");
-                      newCell.style.setProperty("color", textColor, "important");
-                      newCell.style.setProperty("padding", "8px", "important");
-                      newCell.style.setProperty("border", "1px solid #ddd", "important");
-                      newCell.style.setProperty("font-weight", "bold", "important");
-                      newCell.style.setProperty("white-space", "nowrap", "important");
-                    }
-                  }
-                }
-              }
-            }
-          });
-          return true;
-        };
-        if (!applyHeaderStyles()) {
-          setTimeout(applyHeaderStyles, 100);
-        }
-      });
     },
     [editor, onClose, selectionCounts.columns]
   );
@@ -30608,7 +31021,7 @@ function TableActionMenu({
   }, [editor, tableCellNode, $clearTableSelectionInline]);
   const handleCellBackgroundColor = useCallback(
     (value) => {
-      const getContrastColor2 = (hexColor) => {
+      const getContrastColor = (hexColor) => {
         const hex = hexColor.replace("#", "");
         const r2 = parseInt(hex.substr(0, 2), 16);
         const g2 = parseInt(hex.substr(2, 2), 16);
@@ -30616,7 +31029,7 @@ function TableActionMenu({
         const luminance = (0.299 * r2 + 0.587 * g2 + 0.114 * b2) / 255;
         return luminance > 0.5 ? "#000000" : "#FFFFFF";
       };
-      const textColor = getContrastColor2(value);
+      const textColor = getContrastColor(value);
       const cellKeysToStyle = [];
       editor.update(() => {
         if (tableCellNode.isAttached()) {
@@ -30641,6 +31054,7 @@ function TableActionMenu({
           if (cellElement instanceof HTMLElement) {
             cellElement.style.setProperty("background-color", value, "important");
             cellElement.style.setProperty("color", textColor, "important");
+            cellElement.style.setProperty("border-color", "#bbb", "important");
             const nestedElements = cellElement.querySelectorAll("*");
             nestedElements.forEach((elem) => {
               if (elem instanceof HTMLElement) {
@@ -30720,7 +31134,7 @@ function TableActionMenu({
               children: /* @__PURE__ */ jsx("span", { className: "text", children: "Background color" })
             }
           ),
-          /* @__PURE__ */ jsx(
+          selectionType !== "column" && /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -30745,7 +31159,7 @@ function TableActionMenu({
             }
           ),
           /* @__PURE__ */ jsx("div", { className: "cteditor-border-b cteditor-border-foreground/15 cteditor-my-1" }),
-          /* @__PURE__ */ jsx(
+          !isHeaderCell && /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -30811,7 +31225,7 @@ function TableActionMenu({
             }
           ),
           /* @__PURE__ */ jsx("div", { className: "border-b border-foreground/15 my-1" }),
-          /* @__PURE__ */ jsx(
+          selectionType !== "row" && /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -30821,7 +31235,7 @@ function TableActionMenu({
               children: /* @__PURE__ */ jsx("span", { className: "text", children: "Delete column" })
             }
           ),
-          /* @__PURE__ */ jsx(
+          selectionType !== "column" && /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -30842,7 +31256,7 @@ function TableActionMenu({
             }
           ),
           /* @__PURE__ */ jsx("div", { className: "cteditor-border-b cteditor-border-foreground/15 cteditor-my-1" }),
-          /* @__PURE__ */ jsx(
+          selectionType !== "column" && /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -30855,7 +31269,7 @@ function TableActionMenu({
               ] })
             }
           ),
-          /* @__PURE__ */ jsx(
+          selectionType !== "row" && /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -30877,8 +31291,7 @@ function TableActionMenu({
 }
 function TableCellActionMenuContainer({
   anchorElem,
-  cellMerge,
-  isSmallWidthViewport
+  cellMerge
 }) {
   const [editor] = useLexicalComposerContext();
   const menuButtonRef = useRef(null);
@@ -31001,6 +31414,15 @@ function TableCellActionMenuContainer({
       }
       return false;
     };
+    const handleScroll2 = () => {
+      editor.getEditorState().read($moveMenu);
+    };
+    const editorElement = editor.getRootElement();
+    const scrollableParent = editorElement == null ? void 0 : editorElement.closest(".cteditor-content");
+    if (scrollableParent) {
+      scrollableParent.addEventListener("scroll", handleScroll2, { capture: true, passive: true });
+    }
+    window.addEventListener("scroll", handleScroll2, { capture: true, passive: true });
     const handleContextMenu = (event) => {
       event.stopPropagation();
       const target = event.target;
@@ -31070,7 +31492,15 @@ function TableCellActionMenuContainer({
           delayedCallback();
         }
       }),
-      () => clearTimeout(timeoutId)
+      () => {
+        clearTimeout(timeoutId);
+        const editorElement2 = editor.getRootElement();
+        const scrollableParent2 = editorElement2 == null ? void 0 : editorElement2.closest(".cteditor-content");
+        if (scrollableParent2) {
+          scrollableParent2.removeEventListener("scroll", handleScroll2);
+        }
+        window.removeEventListener("scroll", handleScroll2);
+      }
     );
   });
   const prevTableCellDOM = useRef(tableCellNode);
@@ -31160,7 +31590,8 @@ function TableActionMenuPlugin({
 }
 const index = "";
 const MIN_ROW_HEIGHT = 33;
-const MIN_COLUMN_WIDTH = 92;
+const MIN_COLUMN_WIDTH = 50;
+const DEFAULT_COLUMN_WIDTH = 80;
 function TableCellResizer({ editor }) {
   const targetRef = useRef(null);
   const resizerRef = useRef(null);
@@ -31168,10 +31599,13 @@ function TableCellResizer({ editor }) {
   const mouseStartPosRef = useRef(null);
   const [mouseCurrentPos, updateMouseCurrentPos] = useState$1(null);
   const [activeCell, updateActiveCell] = useState$1(null);
-  const [isMouseDown, updateIsMouseDown] = useState$1(false);
+  const [_isMouseDown, updateIsMouseDown] = useState$1(false);
   const [draggingDirection, updateDraggingDirection] = useState$1(null);
   const [currentDimension, setCurrentDimension] = useState$1(null);
   const [hoveredDirection, setHoveredDirection] = useState$1(null);
+  const [initialDimension, setInitialDimension] = useState$1(null);
+  const updateColumnWidthToValueRef = useRef(null);
+  const updateRowHeightToValueRef = useRef(null);
   const resetState = useCallback(() => {
     updateActiveCell(null);
     targetRef.current = null;
@@ -31180,6 +31614,7 @@ function TableCellResizer({ editor }) {
     tableRectRef.current = null;
     setCurrentDimension(null);
     setHoveredDirection(null);
+    setInitialDimension(null);
   }, []);
   const isMouseDownOnEvent = (event) => {
     return (event.buttons & 1) === 1;
@@ -31187,54 +31622,41 @@ function TableCellResizer({ editor }) {
   useEffect$1(() => {
     return editor.registerNodeTransform(TableNode, (tableNode) => {
       const existingWidths = tableNode.getColWidths();
-      const numColumns = tableNode.getColumnCount();
-      const tableElement = editor.getElementByKey(tableNode.getKey());
-      if (existingWidths && existingWidths.length > 0) {
-        if (tableElement) {
-          const totalWidth = existingWidths.reduce((sum, w2) => sum + w2, 0);
-          const currentWidth = tableElement.style.width;
-          if (!currentWidth || parseInt(currentWidth) !== totalWidth) {
-            tableElement.style.setProperty("width", `${totalWidth}px`, "important");
-          }
-        }
+      if (existingWidths) {
         return tableNode;
       }
-      if (tableElement) {
-        const firstRow = tableElement.querySelector("tr");
-        if (firstRow) {
-          const cells = Array.from(firstRow.querySelectorAll("th, td"));
-          const actualWidths = cells.map((cell) => {
-            const width = cell.offsetWidth;
-            return Math.max(width || MIN_COLUMN_WIDTH, MIN_COLUMN_WIDTH);
-          });
-          if (actualWidths.length === numColumns) {
-            tableNode.setColWidths(actualWidths);
-            const totalWidth = actualWidths.reduce((sum, w2) => sum + w2, 0);
-            tableElement.style.setProperty("width", `${totalWidth}px`, "important");
-            return tableNode;
-          }
-        }
-      }
-      const fallbackWidths = Array(numColumns).fill(MIN_COLUMN_WIDTH);
-      tableNode.setColWidths(fallbackWidths);
-      if (tableElement) {
-        const totalWidth = fallbackWidths.reduce((sum, w2) => sum + w2, 0);
-        tableElement.style.setProperty("width", `${totalWidth}px`, "important");
-      }
+      const numColumns = tableNode.getColumnCount();
+      const initialWidths = Array(numColumns).fill(DEFAULT_COLUMN_WIDTH);
+      tableNode.setColWidths(initialWidths);
       return tableNode;
     });
   }, [editor]);
   useEffect$1(() => {
     const onMouseMove = (event) => {
+      var _a, _b;
       const target = event.target;
       if (!isHTMLElement$1(target)) {
         return;
       }
-      if (draggingDirection) {
-        updateMouseCurrentPos({
+      if (draggingDirection && mouseStartPosRef.current && initialDimension !== null) {
+        const newPos = {
           x: event.clientX,
           y: event.clientY
-        });
+        };
+        updateMouseCurrentPos(newPos);
+        const zoom = calculateZoomLevel(event.target);
+        const { x: x2, y: y2 } = mouseStartPosRef.current;
+        if (isHeightChanging(draggingDirection)) {
+          const heightChange = (newPos.y - y2) / zoom;
+          const newHeight = Math.max(initialDimension + heightChange, MIN_ROW_HEIGHT);
+          setCurrentDimension(newHeight);
+          (_a = updateRowHeightToValueRef.current) == null ? void 0 : _a.call(updateRowHeightToValueRef, newHeight);
+        } else {
+          const widthChange = (newPos.x - x2) / zoom;
+          const newWidth = Math.max(initialDimension + widthChange, MIN_COLUMN_WIDTH);
+          setCurrentDimension(newWidth);
+          (_b = updateColumnWidthToValueRef.current) == null ? void 0 : _b.call(updateColumnWidthToValueRef, newWidth);
+        }
         return;
       }
       updateIsMouseDown(isMouseDownOnEvent(event));
@@ -31270,10 +31692,10 @@ function TableCellResizer({ editor }) {
         }
       }
     };
-    const onMouseDown = (event) => {
+    const onMouseDown = (_event) => {
       updateIsMouseDown(true);
     };
-    const onMouseUp = (event) => {
+    const onMouseUp = (_event) => {
       updateIsMouseDown(false);
       if (draggingDirection) {
         updateDraggingDirection(null);
@@ -31294,52 +31716,44 @@ function TableCellResizer({ editor }) {
     return () => {
       removeRootListener();
     };
-  }, [activeCell, draggingDirection, editor, resetState, setCurrentDimension]);
+  }, [activeCell, draggingDirection, editor, resetState, initialDimension]);
   const isHeightChanging = (direction) => {
     if (direction === "bottom") {
       return true;
     }
     return false;
   };
-  const updateRowHeight = useCallback(
-    (heightChange) => {
+  const updateRowHeightToValue = useCallback(
+    (newHeight) => {
       if (!activeCell) {
-        throw new Error("TableCellResizer: Expected active cell.");
+        return;
       }
       editor.update(
         () => {
           const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
           if (!$isTableCellNode(tableCellNode)) {
-            throw new Error("TableCellResizer: Table cell node not found.");
+            return;
           }
           const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
           const tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode) + tableCellNode.getRowSpan() - 1;
           const tableRows = tableNode.getChildren();
           if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
-            throw new Error("Expected table cell to be inside of table row.");
+            return;
           }
           const tableRow = tableRows[tableRowIndex];
           if (!$isTableRowNode(tableRow)) {
-            throw new Error("Expected table row");
-          }
-          let height = tableRow.getHeight();
-          if (height === void 0) {
-            const rowCells = tableRow.getChildren();
-            height = Math.min(
-              ...rowCells.map(
-                (cell) => getCellNodeHeight(cell, editor) ?? Infinity
-              )
-            );
+            return;
           }
-          const newHeight = Math.max(height + heightChange, MIN_ROW_HEIGHT);
-          tableRow.setHeight(newHeight);
-          setCurrentDimension(newHeight);
+          tableRow.setHeight(Math.max(newHeight, MIN_ROW_HEIGHT));
         },
         { tag: "skip-scroll-into-view" }
       );
     },
     [activeCell, editor]
   );
+  useEffect$1(() => {
+    updateRowHeightToValueRef.current = updateRowHeightToValue;
+  }, [updateRowHeightToValue]);
   const autoFitRowHeight = useCallback(() => {
     if (!activeCell)
       return;
@@ -31375,16 +31789,16 @@ function TableCellResizer({ editor }) {
     }
     return void 0;
   };
-  const updateColumnWidth = useCallback(
-    (widthChange) => {
+  const updateColumnWidthToValue = useCallback(
+    (newWidth) => {
       if (!activeCell) {
-        throw new Error("TableCellResizer: Expected active cell.");
+        return;
       }
       editor.update(
         () => {
           const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
           if (!$isTableCellNode(tableCellNode)) {
-            throw new Error("TableCellResizer: Table cell node not found.");
+            return;
           }
           const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
           const [tableMap] = $computeTableMapSkipCellCheck(
@@ -31392,64 +31806,65 @@ function TableCellResizer({ editor }) {
             null,
             null
           );
-          let startColumnIndex;
-          for (let row = 0; row < tableMap.length; row++) {
-            for (let column = 0; column < tableMap[row].length; column++) {
-              if (tableMap[row][column].cell === tableCellNode) {
-                startColumnIndex = column;
-                break;
-              }
-            }
-            if (startColumnIndex !== void 0)
-              break;
-          }
-          if (startColumnIndex === void 0) {
-            throw new Error("TableCellResizer: Table column not found.");
+          const columnIndex = getCellColumnIndex(tableCellNode, tableMap);
+          if (columnIndex === void 0) {
+            return;
           }
-          const colSpan = tableCellNode.getColSpan() || 1;
-          const columnIndex = startColumnIndex + colSpan - 1;
           const colWidths = tableNode.getColWidths();
-          if (!colWidths || columnIndex >= colWidths.length) {
+          if (!colWidths) {
             return;
           }
-          const width = colWidths[columnIndex];
-          if (width === void 0) {
+          const tableElement = editor.getElementByKey(tableNode.getKey());
+          if (!tableElement) {
             return;
           }
-          const newWidth = Math.max(width + widthChange, MIN_COLUMN_WIDTH);
-          const newColWidths = colWidths.map((w2, i2) => {
-            if (i2 === columnIndex) {
-              return newWidth;
-            }
-            return w2;
-          });
-          tableNode.setColWidths(newColWidths);
-          setCurrentDimension(newWidth);
-          const totalWidth = newColWidths.reduce((sum, w2) => sum + w2, 0);
-          const tableElement = editor.getElementByKey(tableNode.getKey());
-          if (tableElement) {
-            tableElement.style.setProperty("width", `${totalWidth}px`, "important");
+          const currentCellRect = activeCell.elem.getBoundingClientRect();
+          const constrainedNewWidth = Math.max(newWidth, MIN_COLUMN_WIDTH);
+          const oldWidth = currentCellRect.width;
+          const oldLexicalWidth = colWidths[columnIndex];
+          const widthRatio = constrainedNewWidth / oldWidth;
+          const newLexicalWidth = oldLexicalWidth * widthRatio;
+          const newColWidths = [...colWidths];
+          const lexicalWidthDelta = newLexicalWidth - oldLexicalWidth;
+          newColWidths[columnIndex] = newLexicalWidth;
+          let nextColumnIndex = columnIndex + 1;
+          while (nextColumnIndex < colWidths.length) {
+            const nextColWidth = colWidths[nextColumnIndex];
+            if (nextColWidth !== void 0 && nextColWidth > 0) {
+              const potentialNewWidth = nextColWidth - lexicalWidthDelta;
+              let nextColumnCell = null;
+              for (let row = 0; row < tableMap.length; row++) {
+                const cellInfo = tableMap[row][nextColumnIndex];
+                if (cellInfo && cellInfo.cell) {
+                  nextColumnCell = cellInfo.cell;
+                  break;
+                }
+              }
+              if (nextColumnCell) {
+                const nextCellElement = editor.getElementByKey(nextColumnCell.getKey());
+                if (nextCellElement) {
+                  const nextCellRect = nextCellElement.getBoundingClientRect();
+                  const nextCellWidthRatio = potentialNewWidth / nextColWidth;
+                  const nextCellPotentialPixelWidth = nextCellRect.width * nextCellWidthRatio;
+                  if (nextCellPotentialPixelWidth >= MIN_COLUMN_WIDTH) {
+                    newColWidths[nextColumnIndex] = potentialNewWidth;
+                    break;
+                  }
+                }
+              }
+            }
+            nextColumnIndex++;
           }
+          tableNode.setColWidths(newColWidths);
         },
         { tag: "skip-scroll-into-view" }
       );
-      setTimeout(() => {
-        editor.getEditorState().read(() => {
-          const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
-          if (!$isTableCellNode(tableCellNode))
-            return;
-          const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
-          const tableElement = editor.getElementByKey(tableNode.getKey());
-          const colWidths = tableNode.getColWidths();
-          if (tableElement && colWidths) {
-            const totalWidth = colWidths.reduce((sum, w2) => sum + w2, 0);
-            tableElement.style.width = `${totalWidth}px`;
-          }
-        });
-      }, 0);
     },
     [activeCell, editor]
   );
+  useEffect$1(() => {
+    updateColumnWidthToValueRef.current = updateColumnWidthToValue;
+  }, [updateColumnWidthToValue]);
   const autoFitColumnWidth = useCallback(() => {
     if (!activeCell)
       return;
@@ -31480,60 +31895,25 @@ function TableCellResizer({ editor }) {
         const newColWidths = [...colWidths];
         newColWidths[columnIndex] = Math.max(maxContentWidth, MIN_COLUMN_WIDTH);
         tableNode.setColWidths(newColWidths);
-        const totalWidth = newColWidths.reduce((sum, w2) => sum + w2, 0);
-        const tableElement = editor.getElementByKey(tableNode.getKey());
-        if (tableElement) {
-          tableElement.style.setProperty("width", `${totalWidth}px`, "important");
-        }
       },
       { tag: "skip-scroll-into-view" }
     );
-    setTimeout(() => {
-      editor.getEditorState().read(() => {
-        const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
-        if (!$isTableCellNode(tableCellNode))
-          return;
-        const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
-        const tableElement = editor.getElementByKey(tableNode.getKey());
-        const colWidths = tableNode.getColWidths();
-        if (tableElement && colWidths) {
-          const totalWidth = colWidths.reduce((sum, w2) => sum + w2, 0);
-          tableElement.style.setProperty("width", `${totalWidth}px`, "important");
-        }
-      });
-    }, 0);
   }, [activeCell, editor]);
   const mouseUpHandler = useCallback(
-    (direction) => {
+    (_direction) => {
       const handler = (event) => {
         event.preventDefault();
         event.stopPropagation();
-        if (!activeCell) {
-          throw new Error("TableCellResizer: Expected active cell.");
-        }
-        if (mouseStartPosRef.current) {
-          const { x: x2, y: y2 } = mouseStartPosRef.current;
-          if (activeCell === null) {
-            return;
-          }
-          const zoom = calculateZoomLevel(event.target);
-          if (isHeightChanging(direction)) {
-            const heightChange = (event.clientY - y2) / zoom;
-            updateRowHeight(heightChange);
-          } else {
-            const widthChange = (event.clientX - x2) / zoom;
-            updateColumnWidth(widthChange);
-          }
-          updateDraggingDirection(null);
-          updateMouseCurrentPos(null);
-          mouseStartPosRef.current = null;
-          setCurrentDimension(null);
-          document.removeEventListener("mouseup", handler);
-        }
+        updateDraggingDirection(null);
+        updateMouseCurrentPos(null);
+        mouseStartPosRef.current = null;
+        setCurrentDimension(null);
+        setInitialDimension(null);
+        document.removeEventListener("mouseup", handler);
       };
       return handler;
     },
-    [activeCell, updateColumnWidth, updateRowHeight]
+    []
   );
   const toggleResize = useCallback(
     (direction) => (event) => {
@@ -31542,6 +31922,36 @@ function TableCellResizer({ editor }) {
       if (!activeCell) {
         throw new Error("TableCellResizer: Expected active cell.");
       }
+      editor.read(() => {
+        const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
+        if (!$isTableCellNode(tableCellNode)) {
+          return;
+        }
+        const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+        if (isHeightChanging(direction)) {
+          const tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode) + tableCellNode.getRowSpan() - 1;
+          const tableRows = tableNode.getChildren();
+          if (tableRowIndex >= 0 && tableRowIndex < tableRows.length) {
+            const tableRow = tableRows[tableRowIndex];
+            if ($isTableRowNode(tableRow)) {
+              let height = tableRow.getHeight();
+              if (height === void 0) {
+                const rowCells = tableRow.getChildren();
+                height = Math.min(
+                  ...rowCells.map(
+                    (cell) => getCellNodeHeight(cell, editor) ?? Infinity
+                  )
+                );
+              }
+              setInitialDimension(height || MIN_ROW_HEIGHT);
+            }
+          }
+        } else {
+          const cellRect = activeCell.elem.getBoundingClientRect();
+          const actualWidth = cellRect.width;
+          setInitialDimension(actualWidth);
+        }
+      });
       mouseStartPosRef.current = {
         x: event.clientX,
         y: event.clientY
@@ -31550,7 +31960,7 @@ function TableCellResizer({ editor }) {
       updateDraggingDirection(direction);
       document.addEventListener("mouseup", mouseUpHandler(direction));
     },
-    [activeCell, mouseUpHandler]
+    [activeCell, editor, mouseUpHandler]
   );
   const handleDoubleClick = useCallback(
     (direction) => (event) => {
@@ -31590,15 +32000,16 @@ function TableCellResizer({ editor }) {
         }
       };
       const tableRect = tableRectRef.current;
-      if (draggingDirection && mouseCurrentPos && tableRect) {
+      if (draggingDirection && mouseCurrentPos && tableRect && currentDimension !== null) {
         if (isHeightChanging(draggingDirection)) {
           styles[draggingDirection].left = `${window.pageXOffset + tableRect.left}px`;
           styles[draggingDirection].top = `${window.pageYOffset + mouseCurrentPos.y / zoom}px`;
           styles[draggingDirection].height = "3px";
           styles[draggingDirection].width = `${tableRect.width}px`;
         } else {
+          const lineLeft = window.pageXOffset + left + currentDimension;
           styles[draggingDirection].top = `${window.pageYOffset + tableRect.top}px`;
-          styles[draggingDirection].left = `${window.pageXOffset + mouseCurrentPos.x / zoom}px`;
+          styles[draggingDirection].left = `${lineLeft}px`;
           styles[draggingDirection].width = "3px";
           styles[draggingDirection].height = `${tableRect.height}px`;
         }
@@ -31613,7 +32024,7 @@ function TableCellResizer({ editor }) {
       right: null,
       top: null
     };
-  }, [activeCell, draggingDirection, mouseCurrentPos]);
+  }, [activeCell, draggingDirection, mouseCurrentPos, currentDimension]);
   const resizerStyles = getResizers();
   return /* @__PURE__ */ jsxs("div", { ref: resizerRef, children: [
     activeCell != null && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -31688,127 +32099,695 @@ function useDebounce(fn, ms, maxWait) {
     [ms, maxWait]
   );
 }
-const BUTTON_WIDTH_PX = 20;
+const DOT_SIZE = 8;
+const DOT_HOVER_SIZE = 16;
+const SELECTOR_BUTTON_SIZE = 12;
 function TableHoverActionsContainer({
   anchorElem
 }) {
   const [editor] = useLexicalComposerContext();
   const isEditable = useLexicalEditable();
-  const [isShownRow, setShownRow] = useState$1(false);
-  const [isShownColumn, setShownColumn] = useState$1(false);
   const [shouldListenMouseMove, setShouldListenMouseMove] = useState$1(false);
-  const [position, setPosition] = useState$1({});
+  const [dots, setDots] = useState$1([]);
+  const [selectorButtons, setSelectorButtons] = useState$1([]);
+  const [hoveredDot, setHoveredDot] = useState$1(null);
+  const [hoveredSelector, setHoveredSelector] = useState$1(null);
+  const [hoveredRowColumn, setHoveredRowColumn] = useState$1({ row: null, column: null });
+  const [activeTableDOM, setActiveTableDOM] = useState$1(null);
+  const [dragState, setDragState] = useState$1(null);
+  const [dragPreviewLine, setDragPreviewLine] = useState$1(null);
+  const [highlightedRow, setHighlightedRow] = useState$1(null);
+  const [highlightedColumn, setHighlightedColumn] = useState$1(null);
+  const [targetHighlightedRow, setTargetHighlightedRow] = useState$1(null);
+  const [targetHighlightedColumn, setTargetHighlightedColumn] = useState$1(null);
   const tableSetRef = useRef(/* @__PURE__ */ new Set());
-  const tableCellDOMNodeRef = useRef(null);
+  const currentTableRef = useRef(null);
+  const currentTableKeyRef = useRef(null);
+  const calculateDotPositions = useCallback((tableDOMElement) => {
+    const tableRect = tableDOMElement.getBoundingClientRect();
+    const { left: editorLeft, top: editorTop } = anchorElem.getBoundingClientRect();
+    const rows = tableDOMElement.querySelectorAll("tr");
+    const newDots = [];
+    const newSelectors = [];
+    rows.forEach((row, index2) => {
+      const rowRect = row.getBoundingClientRect();
+      const dotTop = rowRect.bottom - editorTop - DOT_SIZE / 2;
+      const dotLeft = tableRect.left - editorLeft - 20;
+      newDots.push({
+        left: dotLeft,
+        top: dotTop,
+        type: "row",
+        index: index2 + 1,
+        // This dot will insert at position index+1 (after current row)
+        isHovered: false
+      });
+    });
+    const lastRow = rows[rows.length - 1];
+    if (lastRow) {
+      const lastRowRect = lastRow.getBoundingClientRect();
+      newDots.push({
+        left: tableRect.left - editorLeft - 20,
+        top: lastRowRect.bottom - editorTop - DOT_SIZE / 2,
+        type: "row",
+        index: rows.length,
+        isHovered: false
+      });
+    }
+    if (rows.length > 0) {
+      const firstRow = rows[0];
+      const cells = firstRow.querySelectorAll("td, th");
+      cells.forEach((cell, index2) => {
+        const cellRect = cell.getBoundingClientRect();
+        const dotLeft = cellRect.right - editorLeft - DOT_SIZE / 2;
+        const dotTop = tableRect.top - editorTop - 12;
+        newDots.push({
+          left: dotLeft,
+          top: dotTop,
+          type: "column",
+          index: index2 + 1,
+          // This dot will insert at position index+1 (after current column)
+          isHovered: false
+        });
+      });
+      const lastCell = cells[cells.length - 1];
+      if (lastCell) {
+        const lastCellRect = lastCell.getBoundingClientRect();
+        newDots.push({
+          left: lastCellRect.right - editorLeft - DOT_SIZE / 2,
+          top: tableRect.top - editorTop - 12,
+          type: "column",
+          index: cells.length,
+          isHovered: false
+        });
+      }
+    }
+    rows.forEach((row, index2) => {
+      const rowRect = row.getBoundingClientRect();
+      const buttonTop = rowRect.top - editorTop + (rowRect.height - SELECTOR_BUTTON_SIZE) / 2;
+      const buttonLeft = tableRect.left - editorLeft - SELECTOR_BUTTON_SIZE / 2;
+      newSelectors.push({
+        left: buttonLeft,
+        top: buttonTop,
+        type: "row",
+        index: index2,
+        // The actual row index
+        isHovered: false
+      });
+    });
+    if (rows.length > 0) {
+      const firstRow = rows[0];
+      const cells = firstRow.querySelectorAll("td, th");
+      cells.forEach((cell, index2) => {
+        const cellRect = cell.getBoundingClientRect();
+        const buttonLeft = cellRect.left - editorLeft + (cellRect.width - SELECTOR_BUTTON_SIZE) / 2;
+        const buttonTop = tableRect.top - editorTop - SELECTOR_BUTTON_SIZE / 2;
+        newSelectors.push({
+          left: buttonLeft,
+          top: buttonTop,
+          type: "column",
+          index: index2,
+          // The actual column index
+          isHovered: false
+        });
+      });
+    }
+    setDots(newDots);
+    setSelectorButtons(newSelectors);
+  }, [anchorElem]);
   const debouncedOnMouseMove = useDebounce(
     (event) => {
-      window.lastMouseX = event.clientX;
-      window.lastMouseY = event.clientY;
       const { isOutside, tableDOMNode } = getMouseInfo(event);
-      if (isOutside) {
-        setShownRow(false);
-        setShownColumn(false);
+      if (isOutside || !tableDOMNode) {
+        const hasFocusInTable = editor.getEditorState().read(() => {
+          const selection = editor.getEditorState()._selection;
+          if (!selection)
+            return false;
+          const nodes = selection.getNodes();
+          for (const node of nodes) {
+            const tableCell = $findMatchingParent(node, (n) => $isTableCellNode(n));
+            if (tableCell && $isTableCellNode(tableCell)) {
+              return true;
+            }
+          }
+          return false;
+        });
+        if (!hasFocusInTable) {
+          setDots([]);
+          setSelectorButtons([]);
+          setHoveredDot(null);
+          setHoveredRowColumn({ row: null, column: null });
+          currentTableRef.current = null;
+          currentTableKeyRef.current = null;
+        }
         return;
       }
-      if (!tableDOMNode) {
-        return;
+      if (tableDOMNode && currentTableRef.current) {
+        const tableElement = currentTableRef.current;
+        const rows = tableElement.querySelectorAll("tr");
+        const target = event.target;
+        const cellElement = target.closest("td, th");
+        if (cellElement) {
+          const rowElement = cellElement.closest("tr");
+          const rowIndex = Array.from(rows).indexOf(rowElement);
+          const row = rowElement;
+          const cells = row.querySelectorAll("td, th");
+          const colIndex = Array.from(cells).indexOf(cellElement);
+          setHoveredRowColumn({ row: rowIndex, column: colIndex });
+        }
       }
-      tableCellDOMNodeRef.current = tableDOMNode;
-      let tableDOMElement = null;
-      editor.getEditorState().read(
-        () => {
-          const maybeTableCell = $getNearestNodeFromDOMNode(tableDOMNode);
-          if ($isTableCellNode(maybeTableCell)) {
-            const table = $findMatchingParent(
-              maybeTableCell,
-              (node) => $isTableNode(node)
-            );
-            if (!$isTableNode(table)) {
-              return;
+    },
+    50,
+    250
+  );
+  const handleDotClick = (type, index2) => {
+    if (!currentTableKeyRef.current)
+      return;
+    editor.update(() => {
+      const tableNode = editor.getEditorState().read(() => {
+        const nodeKey = currentTableKeyRef.current;
+        if (!nodeKey)
+          return null;
+        const node = editor.getEditorState()._nodeMap.get(nodeKey);
+        return $isTableNode(node) ? node : null;
+      });
+      if (!tableNode)
+        return;
+      if (type === "row") {
+        const rows = tableNode.getChildren();
+        const targetRowIndex = index2 - 1;
+        if (targetRowIndex >= 0 && targetRowIndex < rows.length) {
+          const targetRow = rows[targetRowIndex];
+          if (targetRow) {
+            const cells = targetRow.getChildren();
+            if (cells.length > 0) {
+              cells[0].selectEnd();
+              $insertTableRow__EXPERIMENTAL(true);
+              const updatedRows = tableNode.getChildren();
+              const newRowIndex = targetRowIndex + 1;
+              if (newRowIndex < updatedRows.length) {
+                const newRow = updatedRows[newRowIndex];
+                const newCells = newRow.getChildren();
+                newCells.forEach((cell) => {
+                  cell.setHeaderStyles(TableCellHeaderStates.NO_STATUS);
+                  if (cell.getChildrenSize() === 0) {
+                    const paragraph = $createParagraphNode();
+                    cell.append(paragraph);
+                  }
+                });
+              }
             }
-            tableDOMElement = getTableElement(
-              table,
-              editor.getElementByKey(table.getKey())
-            );
           }
-        },
-        { editor }
-      );
-      if (tableDOMElement) {
-        const {
-          width: tableElemWidth,
-          y: tableElemY,
-          left: tableElemLeft,
-          bottom: tableElemBottom,
-          height: tableElemHeight
-        } = tableDOMElement.getBoundingClientRect();
-        const { y: editorElemY, left: editorElemLeft } = anchorElem.getBoundingClientRect();
-        setShownRow(true);
-        setShownColumn(true);
-        let actualTableWidth = tableElemWidth;
-        const firstRow = tableDOMElement.querySelector("tr");
-        if (firstRow) {
-          const cells = firstRow.querySelectorAll("td, th");
+        }
+      } else {
+        const rows = tableNode.getChildren();
+        if (rows.length > 0) {
+          const firstRow = rows[0];
+          const cells = firstRow.getChildren();
+          const targetCellIndex = index2 - 1;
+          if (targetCellIndex >= 0 && targetCellIndex < cells.length) {
+            const targetCell = cells[targetCellIndex];
+            if (targetCell) {
+              targetCell.selectEnd();
+              $insertTableColumn__EXPERIMENTAL(true);
+              const hasColumnHeaders = (cells[0].getHeaderStyles() & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN;
+              if (hasColumnHeaders) {
+                const updatedFirstRow = tableNode.getChildren()[0];
+                const updatedCells = updatedFirstRow.getChildren();
+                const newHeaderCell = updatedCells[index2];
+                if (newHeaderCell && $isTableCellNode(newHeaderCell)) {
+                  newHeaderCell.setHeaderStyles(TableCellHeaderStates.COLUMN);
+                  const headerBackgroundColor = cells[0].getBackgroundColor();
+                  if (headerBackgroundColor) {
+                    newHeaderCell.setBackgroundColor(headerBackgroundColor);
+                  }
+                  if (newHeaderCell.getChildrenSize() === 0) {
+                    const paragraph = $createParagraphNode();
+                    const textNode = $createTextNode("​");
+                    paragraph.append(textNode);
+                    newHeaderCell.append(paragraph);
+                  } else {
+                    const firstChild = newHeaderCell.getFirstChild();
+                    if ($isParagraphNode(firstChild) && firstChild.getTextContentSize() === 0) {
+                      const textNode = $createTextNode("​");
+                      firstChild.append(textNode);
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    });
+    setTimeout(() => {
+      if (currentTableRef.current) {
+        calculateDotPositions(currentTableRef.current);
+      }
+    }, 100);
+  };
+  const handleSelectorClick = (type, index2) => {
+    if (!currentTableKeyRef.current)
+      return;
+    console.log(`[HoverPlugin] Selector clicked - Type: ${type}, Index: ${index2}`);
+    editor.update(() => {
+      const { tableNode } = $getTableAndElementByKey(currentTableKeyRef.current);
+      if (!tableNode || !$isTableNode(tableNode)) {
+        console.log("[HoverPlugin] Table node not found");
+        return;
+      }
+      console.log("[HoverPlugin] Table node found, creating selection");
+      if (type === "row") {
+        const rows = tableNode.getChildren();
+        if (index2 >= 0 && index2 < rows.length) {
+          const targetRow = rows[index2];
+          const cells = targetRow.getChildren();
           if (cells.length > 0) {
-            let sumWidth = 0;
-            cells.forEach((cell) => {
-              sumWidth += cell.offsetWidth;
-            });
-            if (sumWidth > 0 && sumWidth < tableElemWidth) {
-              actualTableWidth = sumWidth;
+            const firstCell = cells[0];
+            const lastCell = cells[cells.length - 1];
+            console.log(`[HoverPlugin] Selecting row ${index2}, cells: ${cells.length}`);
+            firstCell.selectEnd();
+            const selection = firstCell.select();
+            if (selection) {
+              selection.focus.set(lastCell.getKey(), lastCell.getChildrenSize(), "element");
+              console.log("[HoverPlugin] Row selection created");
+              setTimeout(() => {
+                const firstCellDOM = editor.getElementByKey(firstCell.getKey());
+                if (firstCellDOM) {
+                  const event = new MouseEvent("contextmenu", {
+                    bubbles: true,
+                    cancelable: true,
+                    view: window,
+                    button: 2,
+                    clientX: firstCellDOM.getBoundingClientRect().left + 10,
+                    clientY: firstCellDOM.getBoundingClientRect().top + 10
+                  });
+                  firstCellDOM.dispatchEvent(event);
+                  console.log("[HoverPlugin] Context menu triggered");
+                }
+              }, 50);
             }
           }
         }
-        const tableRelativeLeft = tableElemLeft - editorElemLeft;
-        const tableRelativeRight = tableRelativeLeft + actualTableWidth;
-        setPosition({
-          row: {
-            height: BUTTON_WIDTH_PX,
-            left: tableRelativeLeft,
-            top: tableElemBottom - editorElemY + 5,
-            width: actualTableWidth
-          },
-          column: {
-            height: tableElemHeight,
-            left: tableRelativeRight + 5,
-            top: tableElemY - editorElemY,
-            width: BUTTON_WIDTH_PX
+      } else {
+        const rows = tableNode.getChildren();
+        if (rows.length > 0) {
+          const firstRow = rows[0];
+          const firstRowCells = firstRow.getChildren();
+          if (index2 >= 0 && index2 < firstRowCells.length) {
+            const firstCell = firstRowCells[index2];
+            const lastRow = rows[rows.length - 1];
+            const lastRowCells = lastRow.getChildren();
+            const lastCell = lastRowCells[index2];
+            console.log(`[HoverPlugin] Selecting column ${index2}, rows: ${rows.length}`);
+            if (firstCell && lastCell) {
+              firstCell.selectEnd();
+              const selection = firstCell.select();
+              if (selection) {
+                selection.focus.set(lastCell.getKey(), lastCell.getChildrenSize(), "element");
+                console.log("[HoverPlugin] Column selection created");
+                setTimeout(() => {
+                  const firstCellDOM = editor.getElementByKey(firstCell.getKey());
+                  if (firstCellDOM) {
+                    const event = new MouseEvent("contextmenu", {
+                      bubbles: true,
+                      cancelable: true,
+                      view: window,
+                      button: 2,
+                      clientX: firstCellDOM.getBoundingClientRect().left + 10,
+                      clientY: firstCellDOM.getBoundingClientRect().top + 10
+                    });
+                    firstCellDOM.dispatchEvent(event);
+                    console.log("[HoverPlugin] Context menu triggered");
+                  }
+                }, 50);
+              }
+            }
           }
+        }
+      }
+    });
+  };
+  const handleDragStart = (e, type, index2) => {
+    e.stopPropagation();
+    setTimeout(() => {
+      setDragState({ type, sourceIndex: index2, targetIndex: null });
+    }, 0);
+    setTimeout(() => {
+      if (type === "row") {
+        setHighlightedRow(index2);
+      } else {
+        setHighlightedColumn(index2);
+      }
+    }, 0);
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.dropEffect = "move";
+    e.dataTransfer.setData("application/x-table-dnd", JSON.stringify({ type, index: index2 }));
+    if (currentTableRef.current) {
+      const dragPreview = document.createElement("div");
+      dragPreview.style.position = "absolute";
+      dragPreview.style.top = "-1000px";
+      dragPreview.style.padding = "8px 16px";
+      dragPreview.style.backgroundColor = "#3b82f6";
+      dragPreview.style.color = "white";
+      dragPreview.style.borderRadius = "6px";
+      dragPreview.style.fontSize = "14px";
+      dragPreview.style.fontWeight = "600";
+      dragPreview.style.boxShadow = "0 4px 12px rgba(0,0,0,0.3)";
+      dragPreview.style.pointerEvents = "none";
+      dragPreview.textContent = `${type === "row" ? "↕" : "↔"} Moving ${type} ${index2 + 1}`;
+      document.body.appendChild(dragPreview);
+      e.dataTransfer.setDragImage(dragPreview, dragPreview.offsetWidth / 2, dragPreview.offsetHeight / 2);
+      setTimeout(() => {
+        if (document.body.contains(dragPreview)) {
+          document.body.removeChild(dragPreview);
+        }
+      }, 0);
+    }
+  };
+  const handleDragOver = (e, type, targetIndex) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    if (!dragState || dragState.type !== type) {
+      return;
+    }
+    if (dragState.targetIndex !== targetIndex) {
+      setDragState((prev) => prev ? { ...prev, targetIndex } : null);
+    }
+    if (type === "row") {
+      setTargetHighlightedRow(targetIndex);
+      setTargetHighlightedColumn(null);
+    } else {
+      setTargetHighlightedColumn(targetIndex);
+      setTargetHighlightedRow(null);
+    }
+    if (currentTableRef.current) {
+      const tableRect = currentTableRef.current.getBoundingClientRect();
+      const { left: editorLeft, top: editorTop } = anchorElem.getBoundingClientRect();
+      if (type === "row") {
+        const rows = currentTableRef.current.querySelectorAll("tr");
+        if (targetIndex >= 0 && targetIndex < rows.length) {
+          const targetRow = rows[targetIndex];
+          const rowRect = targetRow.getBoundingClientRect();
+          const sourceIndex = dragState.sourceIndex;
+          if (sourceIndex < targetIndex) {
+            setDragPreviewLine({
+              top: rowRect.bottom - editorTop,
+              left: tableRect.left - editorLeft,
+              width: tableRect.width,
+              height: 3,
+              isHorizontal: true
+            });
+          } else {
+            setDragPreviewLine({
+              top: rowRect.top - editorTop,
+              left: tableRect.left - editorLeft,
+              width: tableRect.width,
+              height: 3,
+              isHorizontal: true
+            });
+          }
+        }
+      } else {
+        const rows = currentTableRef.current.querySelectorAll("tr");
+        if (rows.length > 0) {
+          const firstRow = rows[0];
+          const cells = firstRow.querySelectorAll("td, th");
+          if (targetIndex >= 0 && targetIndex < cells.length) {
+            const targetCell = cells[targetIndex];
+            const cellRect = targetCell.getBoundingClientRect();
+            const sourceIndex = dragState.sourceIndex;
+            if (sourceIndex < targetIndex) {
+              setDragPreviewLine({
+                top: tableRect.top - editorTop,
+                left: cellRect.right - editorLeft,
+                width: 3,
+                height: tableRect.height,
+                isHorizontal: false
+              });
+            } else {
+              setDragPreviewLine({
+                top: tableRect.top - editorTop,
+                left: cellRect.left - editorLeft,
+                width: 3,
+                height: tableRect.height,
+                isHorizontal: false
+              });
+            }
+          }
+        }
+      }
+    }
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    if (!dragState) {
+      setDragPreviewLine(null);
+      setHighlightedRow(null);
+      setHighlightedColumn(null);
+      setTargetHighlightedRow(null);
+      setTargetHighlightedColumn(null);
+      return;
+    }
+    const targetIndex = dragState.targetIndex;
+    if (targetIndex === null) {
+      setDragState(null);
+      setDragPreviewLine(null);
+      setHighlightedRow(null);
+      setHighlightedColumn(null);
+      setTargetHighlightedRow(null);
+      setTargetHighlightedColumn(null);
+      return;
+    }
+    if (dragState.sourceIndex === targetIndex) {
+      setDragState(null);
+      setDragPreviewLine(null);
+      setHighlightedRow(null);
+      setHighlightedColumn(null);
+      setTargetHighlightedRow(null);
+      setTargetHighlightedColumn(null);
+      return;
+    }
+    const { type, sourceIndex } = dragState;
+    let actualColWidths = [];
+    let tableActualWidth = 0;
+    if (currentTableRef.current) {
+      tableActualWidth = currentTableRef.current.getBoundingClientRect().width;
+      const firstRow = currentTableRef.current.querySelector("tr");
+      if (firstRow) {
+        const cells = firstRow.querySelectorAll("td, th");
+        actualColWidths = Array.from(cells).map((cell) => {
+          return cell.getBoundingClientRect().width;
         });
       }
-    },
-    50,
-    250
-  );
+    }
+    console.log("[TABLE-DND] BEFORE DROP:");
+    console.log("  - Table actual width:", tableActualWidth);
+    console.log("  - Captured DOM column widths:", actualColWidths);
+    console.log("  - Source index:", sourceIndex, "Target index:", targetIndex, "Type:", type);
+    editor.update(() => {
+      if (!currentTableKeyRef.current) {
+        return;
+      }
+      try {
+        const result = $getTableAndElementByKey(currentTableKeyRef.current);
+        const tableNode = result.tableNode;
+        if (!tableNode || !$isTableNode(tableNode)) {
+          return;
+        }
+        const preservedColWidths = tableNode.getColWidths();
+        console.log("[TABLE-DND] Lexical stored column widths:", preservedColWidths);
+        if (type === "row") {
+          const rows = tableNode.getChildren();
+          if (sourceIndex >= 0 && sourceIndex < rows.length && targetIndex >= 0 && targetIndex < rows.length) {
+            const sourceRow = rows[sourceIndex];
+            sourceRow.remove();
+            const updatedRows = tableNode.getChildren();
+            let movedRow = null;
+            if (sourceIndex < targetIndex) {
+              const adjustedTargetIndex = targetIndex - 1;
+              if (adjustedTargetIndex >= 0 && adjustedTargetIndex < updatedRows.length) {
+                const adjustedTarget = updatedRows[adjustedTargetIndex];
+                adjustedTarget.insertAfter(sourceRow);
+                movedRow = adjustedTarget.getNextSibling();
+              } else {
+                tableNode.append(sourceRow);
+                movedRow = tableNode.getLastChild();
+              }
+            } else {
+              if (targetIndex < updatedRows.length) {
+                const adjustedTarget = updatedRows[targetIndex];
+                adjustedTarget.insertBefore(sourceRow);
+                movedRow = adjustedTarget.getPreviousSibling();
+              } else {
+                tableNode.append(sourceRow);
+                movedRow = tableNode.getLastChild();
+              }
+            }
+            if (movedRow && movedRow.getChildrenSize() > 0) {
+              const firstCell = movedRow.getFirstChild();
+              if (firstCell && $isTableCellNode(firstCell)) {
+                firstCell.select();
+              }
+            }
+          }
+        } else {
+          const rows = tableNode.getChildren();
+          rows.forEach((row) => {
+            const cells = row.getChildren();
+            if (sourceIndex >= 0 && sourceIndex < cells.length && targetIndex >= 0 && targetIndex < cells.length) {
+              const sourceCell = cells[sourceIndex];
+              sourceCell.remove();
+              const updatedCells = row.getChildren();
+              if (sourceIndex < targetIndex) {
+                const adjustedTargetIndex = targetIndex - 1;
+                if (adjustedTargetIndex >= 0 && adjustedTargetIndex < updatedCells.length) {
+                  const adjustedTarget = updatedCells[adjustedTargetIndex];
+                  adjustedTarget.insertAfter(sourceCell);
+                } else {
+                  row.append(sourceCell);
+                }
+              } else {
+                if (targetIndex < updatedCells.length) {
+                  const adjustedTarget = updatedCells[targetIndex];
+                  adjustedTarget.insertBefore(sourceCell);
+                } else {
+                  row.append(sourceCell);
+                }
+              }
+            }
+          });
+        }
+        const widthsToRestore = actualColWidths.length > 0 ? actualColWidths : preservedColWidths;
+        console.log("[TABLE-DND] Widths to restore:", widthsToRestore);
+        if (widthsToRestore && widthsToRestore.length > 0) {
+          tableNode.setColWidths(widthsToRestore);
+          console.log("[TABLE-DND] Column widths restored");
+        } else {
+          console.log("[TABLE-DND] WARNING: No widths available to restore!");
+        }
+      } catch (error) {
+        console.error(`[TABLE-DND] ERROR during swap:`, error);
+      }
+    });
+    setTimeout(() => {
+      if (currentTableRef.current) {
+        const newTableWidth = currentTableRef.current.getBoundingClientRect().width;
+        const firstRow = currentTableRef.current.querySelector("tr");
+        let newColWidths = [];
+        if (firstRow) {
+          const cells = firstRow.querySelectorAll("td, th");
+          newColWidths = Array.from(cells).map((cell) => {
+            return cell.getBoundingClientRect().width;
+          });
+        }
+        console.log("[TABLE-DND] AFTER DROP:");
+        console.log("  - Table actual width:", newTableWidth);
+        console.log("  - New DOM column widths:", newColWidths);
+        console.log("  - Width changed:", tableActualWidth !== newTableWidth);
+      }
+    }, 100);
+    setDragState(null);
+    setDragPreviewLine(null);
+    setHighlightedRow(null);
+    setHighlightedColumn(null);
+    setTargetHighlightedRow(null);
+    setTargetHighlightedColumn(null);
+    setTimeout(() => {
+      if (currentTableRef.current) {
+        calculateDotPositions(currentTableRef.current);
+      }
+    }, 50);
+  };
+  const handleDragEnd = (_e) => {
+    setTimeout(() => {
+      setDragState(null);
+      setDragPreviewLine(null);
+      setHighlightedRow(null);
+      setHighlightedColumn(null);
+      setTargetHighlightedRow(null);
+      setTargetHighlightedColumn(null);
+    }, 50);
+  };
   const tableResizeObserver = useMemo(() => {
     return new ResizeObserver(() => {
-      const lastX = window.lastMouseX || 0;
-      const lastY = window.lastMouseY || 0;
-      const mouseEvent = new MouseEvent("mousemove", {
-        clientX: lastX,
-        clientY: lastY
-      });
-      const { isOutside } = getMouseInfo(mouseEvent);
-      if (isOutside) {
-        setShownRow(false);
-        setShownColumn(false);
+      if (currentTableRef.current) {
+        calculateDotPositions(currentTableRef.current);
       }
     });
-  }, []);
+  }, [calculateDotPositions]);
   useEffect$1(() => {
     if (!shouldListenMouseMove) {
       return;
     }
     document.addEventListener("mousemove", debouncedOnMouseMove);
     return () => {
-      setShownRow(false);
-      setShownColumn(false);
+      setDots([]);
+      setSelectorButtons([]);
+      setHoveredDot(null);
       debouncedOnMouseMove.cancel();
       document.removeEventListener("mousemove", debouncedOnMouseMove);
     };
   }, [shouldListenMouseMove, debouncedOnMouseMove]);
+  useEffect$1(() => {
+    if (!activeTableDOM)
+      return;
+    const handleScroll2 = () => {
+      requestAnimationFrame(() => {
+        calculateDotPositions(activeTableDOM);
+      });
+    };
+    window.addEventListener("scroll", handleScroll2, { capture: true, passive: true });
+    window.addEventListener("resize", handleScroll2);
+    return () => {
+      window.removeEventListener("scroll", handleScroll2, { capture: true });
+      window.removeEventListener("resize", handleScroll2);
+    };
+  }, [activeTableDOM, calculateDotPositions]);
   useEffect$1(() => {
     return mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          const selection = editorState._selection;
+          if (!selection) {
+            setDots([]);
+            setSelectorButtons([]);
+            setHoveredDot(null);
+            currentTableRef.current = null;
+            currentTableKeyRef.current = null;
+            return;
+          }
+          const nodes = selection.getNodes();
+          let foundTable = false;
+          for (const node of nodes) {
+            const tableCell = $findMatchingParent(node, (n) => $isTableCellNode(n));
+            if (tableCell && $isTableCellNode(tableCell)) {
+              const table = $findMatchingParent(tableCell, (n) => $isTableNode(n));
+              if (table && $isTableNode(table)) {
+                const tableElement = getTableElement(
+                  table,
+                  editor.getElementByKey(table.getKey())
+                );
+                if (tableElement) {
+                  currentTableRef.current = tableElement;
+                  currentTableKeyRef.current = table.getKey();
+                  setActiveTableDOM(tableElement);
+                  calculateDotPositions(tableElement);
+                  foundTable = true;
+                }
+                return;
+              }
+            }
+          }
+          if (!foundTable) {
+            setDots([]);
+            setSelectorButtons([]);
+            setHoveredDot(null);
+            currentTableRef.current = null;
+            currentTableKeyRef.current = null;
+            setActiveTableDOM(null);
+          }
+        });
+      }),
       editor.registerMutationListener(
         TableNode,
         (mutations) => {
@@ -31844,109 +32823,404 @@ function TableHoverActionsContainer({
         { skipInitialization: false }
       )
     );
-  }, [editor, tableResizeObserver]);
-  const insertAction = (insertRow) => {
-    editor.update(() => {
-      if (tableCellDOMNodeRef.current) {
-        const maybeTableNode = $getNearestNodeFromDOMNode(
-          tableCellDOMNodeRef.current
-        );
-        maybeTableNode == null ? void 0 : maybeTableNode.selectEnd();
-        if (insertRow) {
-          $insertTableRow__EXPERIMENTAL();
-          setShownRow(false);
-        } else {
-          $insertTableColumn__EXPERIMENTAL();
-          setShownColumn(false);
-          const tableCellNode = $getNearestNodeFromDOMNode(tableCellDOMNodeRef.current);
-          if ($isTableCellNode(tableCellNode)) {
-            const tableNode = $findMatchingParent(
-              tableCellNode,
-              (node) => $isTableNode(node)
-            );
-            if ($isTableNode(tableNode)) {
-              const rows = tableNode.getChildren();
-              if (rows.length > 0) {
-                const firstRow = rows[0];
-                const firstRowCells = firstRow.getChildren();
-                if (firstRowCells.length > 0) {
-                  const firstCell = firstRowCells[0];
-                  const hasColumnHeaders = (firstCell.getHeaderStyles() & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN;
-                  if (hasColumnHeaders) {
-                    const newHeaderCell = firstRowCells[firstRowCells.length - 1];
-                    newHeaderCell.setHeaderStyles(TableCellHeaderStates.COLUMN);
-                    const headerBackgroundColor = firstCell.getBackgroundColor();
-                    if (headerBackgroundColor) {
-                      newHeaderCell.setBackgroundColor(headerBackgroundColor);
-                    }
-                  }
+  }, [editor, tableResizeObserver, calculateDotPositions]);
+  if (!isEditable) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    dots.map((dot, idx) => {
+      const isHovered = (hoveredDot == null ? void 0 : hoveredDot.type) === dot.type && (hoveredDot == null ? void 0 : hoveredDot.index) === dot.index;
+      const size2 = isHovered ? DOT_HOVER_SIZE : DOT_SIZE;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: `${dot.left - 12}px`,
+            // Center hover zone on dot position
+            top: `${dot.top - 12}px`,
+            width: `${DOT_HOVER_SIZE + 16}px`,
+            // Fixed larger hover zone
+            height: `${DOT_HOVER_SIZE + 16}px`,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 1e3
+          },
+          onMouseEnter: () => setHoveredDot({ type: dot.type, index: dot.index }),
+          onMouseLeave: () => setHoveredDot(null),
+          children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: `table-insert-dot ${isHovered ? "hovered" : ""}`,
+              style: {
+                width: `${size2}px`,
+                height: `${size2}px`,
+                borderRadius: "50%",
+                backgroundColor: isHovered ? "white" : "transparent",
+                border: `2px solid ${isHovered ? "#4b5563" : "#9ca3af"}`,
+                cursor: "pointer",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                transition: "all 0.2s ease",
+                padding: 0,
+                position: "relative",
+                transform: isHovered ? "scale(1)" : "scale(1)"
+                // Keep centered while scaling
+              },
+              onClick: () => handleDotClick(dot.type, dot.index),
+              "aria-label": `Insert ${dot.type} ${dot.type === "row" ? "here" : "here"}`,
+              role: "button",
+              tabIndex: 0,
+              children: isHovered && /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  width: "10",
+                  height: "10",
+                  viewBox: "0 0 10 10",
+                  style: {
+                    position: "absolute",
+                    top: "50%",
+                    left: "50%",
+                    transform: "translate(-50%, -50%)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("line", { x1: "5", y1: "1", x2: "5", y2: "9", stroke: "#4b5563", strokeWidth: "1.5", strokeLinecap: "round" }),
+                    /* @__PURE__ */ jsx("line", { x1: "1", y1: "5", x2: "9", y2: "5", stroke: "#4b5563", strokeWidth: "1.5", strokeLinecap: "round" })
+                  ]
                 }
-              }
+              )
             }
+          )
+        },
+        `${dot.type}-${dot.index}-${idx}`
+      );
+    }),
+    selectorButtons.map((selector, idx) => {
+      const isDirectHover = (hoveredSelector == null ? void 0 : hoveredSelector.type) === selector.type && (hoveredSelector == null ? void 0 : hoveredSelector.index) === selector.index;
+      const isRowColumnHovered = selector.type === "row" && hoveredRowColumn.row === selector.index || selector.type === "column" && hoveredRowColumn.column === selector.index;
+      const shouldShow = isDirectHover || isRowColumnHovered;
+      const isDragging = (dragState == null ? void 0 : dragState.type) === selector.type && (dragState == null ? void 0 : dragState.sourceIndex) === selector.index;
+      const isDropTarget = (dragState == null ? void 0 : dragState.type) === selector.type && (dragState == null ? void 0 : dragState.targetIndex) === selector.index;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: `${selector.left - (isDirectHover ? 4 : 0)}px`,
+            // Expand left when hovered
+            top: `${selector.top - (isDirectHover ? 4 : 0)}px`,
+            // Expand top when hovered
+            width: `${isDirectHover ? SELECTOR_BUTTON_SIZE + 8 : SELECTOR_BUTTON_SIZE}px`,
+            // Expand to ~20px when hovered
+            height: `${isDirectHover ? SELECTOR_BUTTON_SIZE + 8 : SELECTOR_BUTTON_SIZE}px`,
+            zIndex: 1e3,
+            opacity: isDragging ? 0.5 : 1
+          },
+          onMouseEnter: () => {
+            setHoveredSelector({ type: selector.type, index: selector.index });
+            if (selector.type === "row") {
+              setHighlightedRow(selector.index);
+            } else {
+              setHighlightedColumn(selector.index);
+            }
+          },
+          onMouseLeave: () => {
+            setHoveredSelector(null);
+            if (!dragState) {
+              setHighlightedRow(null);
+              setHighlightedColumn(null);
+            }
+          },
+          children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "table-selector-button",
+              draggable: shouldShow,
+              onDragStart: (e) => {
+                if (!shouldShow) {
+                  e.preventDefault();
+                  return;
+                }
+                handleDragStart(e, selector.type, selector.index);
+              },
+              onDragEnd: handleDragEnd,
+              style: {
+                width: "100%",
+                height: "100%",
+                borderRadius: "3px",
+                backgroundColor: isDropTarget ? "#22c55e" : isDirectHover ? "#3b82f6" : isRowColumnHovered ? "#6b7280" : "transparent",
+                border: "none",
+                cursor: isDragging ? "grabbing" : isDirectHover ? "grab" : "pointer",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                transition: "all 0.15s ease",
+                padding: 0,
+                opacity: shouldShow ? isDirectHover ? 1 : 0.6 : 0,
+                boxShadow: isDirectHover ? "0 2px 4px rgba(0,0,0,0.2)" : "none"
+              },
+              onClick: () => {
+                if (!dragState) {
+                  handleSelectorClick(selector.type, selector.index);
+                }
+              },
+              "aria-label": `Drag to move or click to select ${selector.type} ${selector.index + 1}`,
+              role: "button",
+              tabIndex: 0,
+              children: isDirectHover && /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 16 16",
+                  fill: "none",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  style: { pointerEvents: "none" },
+                  children: [
+                    /* @__PURE__ */ jsx("circle", { cx: "5.5", cy: "3.5", r: "1.2", fill: "white" }),
+                    /* @__PURE__ */ jsx("circle", { cx: "10.5", cy: "3.5", r: "1.2", fill: "white" }),
+                    /* @__PURE__ */ jsx("circle", { cx: "5.5", cy: "8", r: "1.2", fill: "white" }),
+                    /* @__PURE__ */ jsx("circle", { cx: "10.5", cy: "8", r: "1.2", fill: "white" }),
+                    /* @__PURE__ */ jsx("circle", { cx: "5.5", cy: "12.5", r: "1.2", fill: "white" }),
+                    /* @__PURE__ */ jsx("circle", { cx: "10.5", cy: "12.5", r: "1.2", fill: "white" })
+                  ]
+                }
+              )
+            }
+          )
+        },
+        `selector-${selector.type}-${selector.index}-${idx}`
+      );
+    }),
+    dragState && currentTableRef.current && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: `${currentTableRef.current.getBoundingClientRect().left - anchorElem.getBoundingClientRect().left}px`,
+          top: `${currentTableRef.current.getBoundingClientRect().top - anchorElem.getBoundingClientRect().top}px`,
+          width: `${currentTableRef.current.getBoundingClientRect().width}px`,
+          height: `${currentTableRef.current.getBoundingClientRect().height}px`,
+          zIndex: 1e3,
+          pointerEvents: "auto"
+        },
+        onDragOver: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          if (!dragState) {
+            return;
           }
-        }
-      }
-    });
-    if (!insertRow) {
-      requestAnimationFrame(() => {
-        const applyHeaderStyles = () => {
-          const rootElement = editor.getRootElement();
-          if (!rootElement)
-            return false;
-          const tables = rootElement.querySelectorAll("table");
-          tables.forEach((table) => {
-            const rows = table.querySelectorAll("tr");
-            if (rows.length > 0) {
+          e.dataTransfer.dropEffect = "move";
+          if (!currentTableRef.current)
+            return;
+          if (dragState.type === "row") {
+            const rows = currentTableRef.current.querySelectorAll("tr");
+            const mouseY = e.clientY;
+            let targetRowIndex = -1;
+            for (let i2 = 0; i2 < rows.length; i2++) {
+              const row = rows[i2];
+              const rect = row.getBoundingClientRect();
+              if (mouseY >= rect.top && mouseY <= rect.bottom) {
+                targetRowIndex = i2;
+                break;
+              } else if (mouseY < rect.top && i2 === 0) {
+                targetRowIndex = 0;
+                break;
+              } else if (i2 === rows.length - 1 && mouseY > rect.bottom) {
+                targetRowIndex = rows.length - 1;
+                break;
+              }
+            }
+            if (targetRowIndex === 0) {
               const firstRow = rows[0];
-              const cells = firstRow.querySelectorAll("th, td");
-              if (cells.length > 1) {
-                const firstHeaderCell = cells[0];
-                const headerColor = firstHeaderCell.getAttribute("data-header-color");
-                const textColor = firstHeaderCell.getAttribute("data-text-color");
-                if (headerColor && textColor) {
-                  const lastCell = cells[cells.length - 1];
-                  lastCell.setAttribute("data-header-color", headerColor);
-                  lastCell.setAttribute("data-text-color", textColor);
-                  lastCell.style.setProperty("background-color", headerColor, "important");
-                  lastCell.style.setProperty("color", textColor, "important");
-                  lastCell.style.setProperty("padding", "8px", "important");
-                  lastCell.style.setProperty("border", "1px solid #ddd", "important");
-                  lastCell.style.setProperty("font-weight", "bold", "important");
-                  lastCell.style.setProperty("white-space", "nowrap", "important");
+              const firstCell = firstRow == null ? void 0 : firstRow.querySelector("th");
+              if (firstCell) {
+                e.dataTransfer.dropEffect = "none";
+                setDragPreviewLine(null);
+                setTargetHighlightedRow(null);
+                return;
+              }
+            }
+            if (targetRowIndex !== -1 && targetRowIndex !== dragState.sourceIndex) {
+              handleDragOver(e, "row", targetRowIndex);
+            } else if (targetRowIndex === dragState.sourceIndex) {
+              setDragPreviewLine(null);
+              setTargetHighlightedRow(dragState.sourceIndex);
+            }
+          } else {
+            const rows = currentTableRef.current.querySelectorAll("tr");
+            if (rows.length > 0) {
+              const cells = rows[0].querySelectorAll("td, th");
+              const mouseX = e.clientX;
+              let targetColIndex = -1;
+              for (let i2 = 0; i2 < cells.length; i2++) {
+                const cell = cells[i2];
+                const rect = cell.getBoundingClientRect();
+                if (mouseX >= rect.left && mouseX <= rect.right) {
+                  targetColIndex = i2;
+                  break;
+                } else if (mouseX < rect.left && i2 === 0) {
+                  targetColIndex = 0;
+                  break;
+                } else if (i2 === cells.length - 1 && mouseX > rect.right) {
+                  targetColIndex = cells.length - 1;
+                  break;
                 }
               }
+              if (targetColIndex !== -1 && targetColIndex !== dragState.sourceIndex) {
+                handleDragOver(e, "column", targetColIndex);
+              } else if (targetColIndex === dragState.sourceIndex) {
+                setDragPreviewLine(null);
+                setTargetHighlightedColumn(dragState.sourceIndex);
+              }
             }
-          });
-          return true;
-        };
-        if (!applyHeaderStyles()) {
-          setTimeout(applyHeaderStyles, 100);
+          }
+        },
+        onDrop: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          handleDrop(e);
         }
-      });
-    }
-  };
-  if (!isEditable) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    isShownRow && position.row && /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: "PlaygroundEditorTheme__tableAddRows ",
-        style: { ...position.row },
-        onClick: () => insertAction(true),
-        children: /* @__PURE__ */ jsx(PlusIcon, {})
       }
     ),
-    isShownColumn && position.column && /* @__PURE__ */ jsx(
-      "button",
+    dragPreviewLine && /* @__PURE__ */ jsx(
+      "div",
       {
-        className: "PlaygroundEditorTheme__tableAddColumns",
-        style: { ...position.column },
-        onClick: () => insertAction(false),
-        children: /* @__PURE__ */ jsx(PlusIcon, {})
+        style: {
+          position: "absolute",
+          left: `${dragPreviewLine.left}px`,
+          top: `${dragPreviewLine.top}px`,
+          width: dragPreviewLine.isHorizontal ? `${dragPreviewLine.width}px` : `${dragPreviewLine.width}px`,
+          height: dragPreviewLine.isHorizontal ? `${dragPreviewLine.height}px` : `${dragPreviewLine.height}px`,
+          backgroundColor: "#22c55e",
+          zIndex: 1001,
+          pointerEvents: "none",
+          boxShadow: "0 0 8px rgba(34, 197, 94, 0.6)"
+        }
       }
-    )
+    ),
+    highlightedRow !== null && currentTableRef.current && (() => {
+      const tableRect = currentTableRef.current.getBoundingClientRect();
+      const { left: editorLeft, top: editorTop } = anchorElem.getBoundingClientRect();
+      const rows = currentTableRef.current.querySelectorAll("tr");
+      if (highlightedRow >= 0 && highlightedRow < rows.length) {
+        const row = rows[highlightedRow];
+        const rowRect = row.getBoundingClientRect();
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: `${tableRect.left - editorLeft}px`,
+              top: `${rowRect.top - editorTop}px`,
+              width: `${tableRect.width}px`,
+              height: `${rowRect.height}px`,
+              backgroundColor: dragState ? "rgba(59, 130, 246, 0.2)" : "rgba(59, 130, 246, 0.15)",
+              zIndex: 999,
+              pointerEvents: "none",
+              border: "2px solid rgba(59, 130, 246, 0.5)",
+              boxSizing: "border-box",
+              transition: "all 0.15s ease"
+            }
+          }
+        );
+      }
+      return null;
+    })(),
+    targetHighlightedRow !== null && dragState && currentTableRef.current && (() => {
+      const tableRect = currentTableRef.current.getBoundingClientRect();
+      const { left: editorLeft, top: editorTop } = anchorElem.getBoundingClientRect();
+      const rows = currentTableRef.current.querySelectorAll("tr");
+      if (targetHighlightedRow >= 0 && targetHighlightedRow < rows.length) {
+        const row = rows[targetHighlightedRow];
+        const rowRect = row.getBoundingClientRect();
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: `${tableRect.left - editorLeft}px`,
+              top: `${rowRect.top - editorTop}px`,
+              width: `${tableRect.width}px`,
+              height: `${rowRect.height}px`,
+              backgroundColor: "rgba(34, 197, 94, 0.25)",
+              zIndex: 1e3,
+              pointerEvents: "none",
+              border: "2px solid rgba(34, 197, 94, 0.6)",
+              boxSizing: "border-box",
+              transition: "all 0.15s ease"
+            }
+          }
+        );
+      }
+      return null;
+    })(),
+    highlightedColumn !== null && currentTableRef.current && (() => {
+      const tableRect = currentTableRef.current.getBoundingClientRect();
+      const { left: editorLeft, top: editorTop } = anchorElem.getBoundingClientRect();
+      const rows = currentTableRef.current.querySelectorAll("tr");
+      if (rows.length > 0) {
+        const firstRow = rows[0];
+        const cells = firstRow.querySelectorAll("td, th");
+        if (highlightedColumn >= 0 && highlightedColumn < cells.length) {
+          const cell = cells[highlightedColumn];
+          const cellRect = cell.getBoundingClientRect();
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: `${cellRect.left - editorLeft}px`,
+                top: `${tableRect.top - editorTop}px`,
+                width: `${cellRect.width}px`,
+                height: `${tableRect.height}px`,
+                backgroundColor: dragState ? "rgba(59, 130, 246, 0.2)" : "rgba(59, 130, 246, 0.15)",
+                zIndex: 999,
+                pointerEvents: "none",
+                border: "2px solid rgba(59, 130, 246, 0.5)",
+                boxSizing: "border-box",
+                transition: "all 0.15s ease"
+              }
+            }
+          );
+        }
+      }
+      return null;
+    })(),
+    targetHighlightedColumn !== null && dragState && currentTableRef.current && (() => {
+      const tableRect = currentTableRef.current.getBoundingClientRect();
+      const { left: editorLeft, top: editorTop } = anchorElem.getBoundingClientRect();
+      const rows = currentTableRef.current.querySelectorAll("tr");
+      if (rows.length > 0) {
+        const firstRow = rows[0];
+        const cells = firstRow.querySelectorAll("td, th");
+        if (targetHighlightedColumn >= 0 && targetHighlightedColumn < cells.length) {
+          const cell = cells[targetHighlightedColumn];
+          const cellRect = cell.getBoundingClientRect();
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: `${cellRect.left - editorLeft}px`,
+                top: `${tableRect.top - editorTop}px`,
+                width: `${cellRect.width}px`,
+                height: `${tableRect.height}px`,
+                backgroundColor: "rgba(34, 197, 94, 0.25)",
+                zIndex: 1e3,
+                pointerEvents: "none",
+                border: "2px solid rgba(34, 197, 94, 0.6)",
+                boxSizing: "border-box",
+                transition: "all 0.15s ease"
+              }
+            }
+          );
+        }
+      }
+      return null;
+    })()
   ] });
 }
 function getMouseInfo(event) {
@@ -31955,11 +33229,7 @@ function getMouseInfo(event) {
     const tableDOMNode = target.closest(
       "td.PlaygroundEditorTheme__tableCell, th.PlaygroundEditorTheme__tableCell"
     );
-    const isOutside = !(tableDOMNode || target.closest(
-      "button.PlaygroundEditorTheme__tableAddRows"
-    ) || target.closest(
-      "button.PlaygroundEditorTheme__tableAddColumns"
-    ) || target.closest("div.TableCellResizer__resizer"));
+    const isOutside = !(tableDOMNode || target.closest("button.table-insert-dot") || target.closest("button.table-selector-button") || target.closest("div.TableCellResizer__resizer"));
     return { isOutside, tableDOMNode };
   } else {
     return { isOutside: true, tableDOMNode: null };
@@ -32181,6 +33451,7 @@ const CellBackgroundPersistencePlugin = () => {
                   const textColor = luminance > 0.5 ? "#000000" : "#FFFFFF";
                   htmlCell.style.setProperty("background-color", bgColor, "important");
                   htmlCell.style.setProperty("color", textColor, "important");
+                  htmlCell.style.setProperty("border-color", "#bbb", "important");
                   const nestedElements = htmlCell.querySelectorAll("*");
                   nestedElements.forEach((elem) => {
                     if (elem instanceof HTMLElement) {
@@ -32189,8 +33460,7 @@ const CellBackgroundPersistencePlugin = () => {
                   });
                   const hasHeaderStyles = cellNode.getHeaderStyles();
                   if (hasHeaderStyles) {
-                    htmlCell.style.setProperty("font-weight", "bold", "important");
-                    htmlCell.style.setProperty("padding", "8px", "important");
+                    htmlCell.style.setProperty("font-weight", "600", "important");
                   }
                 }
               }
@@ -32313,6 +33583,7 @@ const ConfigurableEditor = ({
         /* @__PURE__ */ jsx(LocalStoragePlugin$1, { namespace: initialConfig.namespace }),
         /* @__PURE__ */ jsx(ListPlugin, {}),
         /* @__PURE__ */ jsx(LinkPlugin, { hasLinkAttributes: false }),
+        /* @__PURE__ */ jsx(LinkPreviewPlugin, {}),
         /* @__PURE__ */ jsx(DragDropPaste, {}),
         /* @__PURE__ */ jsx(RichTextPastePlugin, {}),
         /* @__PURE__ */ jsx(FilePlugin, {}),
@@ -32485,22 +33756,32 @@ const ConfigurableEditorWithAuth = ({
 };
 export {
   $isFileNode as $,
+  AiJsonResponse as A,
+  Button as B,
   ConfigurableEditorWithAuth as C,
   Download as D,
   ExternalLink as E,
   HtmlViewProvider as H,
   LocalStoragePlugin$1 as L,
+  Sparkles as S,
   Trash2 as T,
   createLucideIcon as a,
-  $isImageNode as b,
+  Dialog as b,
   commonjsGlobal as c,
-  EditorProvider as d,
-  useEditor as e,
-  ConfigurableEditor as f,
+  DialogContent as d,
+  DialogHeader as e,
+  DialogTitle as f,
   getDefaultExportFromCjs as g,
-  editorConfig as h,
+  DialogDescription as h,
   initialConfig as i,
+  DialogFooter as j,
+  $isImageNode as k,
+  EditorProvider as l,
+  useEditor as m,
+  ConfigurableEditor as n,
+  editorConfig as o,
+  toast as t,
   useHtmlView as u,
   verifyApiKey as v
 };
-//# sourceMappingURL=index-a8476eee.js.map
+//# sourceMappingURL=index-158a9bd4.js.map