ct-rich-text-editor 1.3.19 → 1.3.21

package/dist/{index-23abcbd9.js → index-6360d552.js}

@@ -24,7 +24,7 @@ import { TablePlugin } from "@lexical/react/LexicalTablePlugin";
 import { TableNode, TableCellNode, TableRowNode, $createTableNodeWithDimensions, $isTableRowNode, $isTableCellNode, TableCellHeaderStates, $isTableNode, $isTableSelection, $getTableCellNodeFromLexicalNode, $getTableNodeFromLexicalNodeOrThrow, getTableElement, getTableObserverFromTableElement, $getTableRowIndexFromTableCellNode, $getNodeTriplet, $insertTableRow__EXPERIMENTAL, $getTableColumnIndexFromTableCellNode, $insertTableColumn__EXPERIMENTAL, $deleteTableRow__EXPERIMENTAL, $deleteTableColumn__EXPERIMENTAL, $unmergeCell, $computeTableMapSkipCellCheck, getDOMCellFromTarget, $getTableAndElementByKey } from "@lexical/table";
 import { mergeRegister, $wrapNodeInElement, $findMatchingParent, $getNearestNodeOfType, $getNearestBlockElementAncestorOrThrow, $insertNodeToNearestRoot, $isEditorIsNestedEditor, mediaFileReader, isMimeType, calculateZoomLevel, CAN_USE_DOM } from "@lexical/utils";
 import Stack from "@mui/material/Stack";
-import { createCommand, DecoratorNode, createEditor, $applyNodeReplacement, $insertNodes, $isRootOrShadowRoot, $createParagraphNode, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_LOW, $getSelection, $isRangeSelection, $getNearestNodeFromDOMNode, $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, $createRangeSelection, 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, ParagraphNode, $createLineBreakNode, 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, KEY_DOWN_COMMAND, COMMAND_PRIORITY_CRITICAL, CAN_UNDO_COMMAND, CAN_REDO_COMMAND, $isElementNode, SELECTION_CHANGE_COMMAND, UNDO_COMMAND, REDO_COMMAND, KEY_SPACE_COMMAND, $isLineBreakNode, $createRangeSelection, COMMAND_PRIORITY_HIGH, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND, KEY_ENTER_COMMAND, $createNodeSelection, $isNodeSelection, getDOMSelection, CLICK_COMMAND, PASTE_COMMAND, ParagraphNode, $createLineBreakNode, isDOMNode } from "lexical";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default, { createPortal } from "react-dom";
 import { $isCodeNode, CodeNode, normalizeCodeLang, getLanguageFriendlyName, CodeHighlightNode, CODE_LANGUAGE_MAP, $createCodeNode, registerCodeHighlighting, $isCodeHighlightNode } from "@lexical/code";
@@ -40,15 +40,7 @@ import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
 import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
 import { $isDecoratorBlockNode } from "@lexical/react/LexicalDecoratorBlockNode";
 import EmojiPicker from "emoji-picker-react";
-import CodeIcon$1 from "@mui/icons-material/Code";
-import ContentCopyIcon from "@mui/icons-material/ContentCopy";
-import CropOriginalIcon from "@mui/icons-material/CropOriginal";
-import DeleteIcon from "@mui/icons-material/Delete";
-import FormatAlignCenterIcon from "@mui/icons-material/FormatAlignCenter";
-import FormatAlignLeftIcon from "@mui/icons-material/FormatAlignLeft";
-import FormatAlignRightIcon from "@mui/icons-material/FormatAlignRight";
-import LinkIcon$1 from "@mui/icons-material/Link";
-import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import { Link as Link$1, CropOriginal, Code as Code$1, FormatAlignLeft, FormatAlignCenter, FormatAlignRight, OpenInNew, Delete, ContentCopy } from "@mui/icons-material";
 import { LinkPlugin as LinkPlugin$1 } from "@lexical/react/LexicalLinkPlugin";
 import { useBasicTypeaheadTriggerMatch, LexicalTypeaheadMenuPlugin, MenuOption } from "@lexical/react/LexicalTypeaheadMenuPlugin";
 import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
@@ -1479,7 +1471,7 @@ const AiTextTransform = async ({ content, apiKey }) => {
 const AI_ACTION_COMMAND = createCommand(
   "AI_ACTION_COMMAND"
 );
-const ImageView = React__default.lazy(() => import("./index-913b3634.js"));
+const ImageView = React__default.lazy(() => import("./index-8bcb5b47.js"));
 function isGoogleDocCheckboxImg(img) {
   return img.parentElement != null && img.parentElement.tagName === "LI" && img.previousSibling === null && img.getAttribute("aria-roledescription") === "checkbox";
 }
@@ -15345,7 +15337,7 @@ const EmbedComponent = ({ url, displayType, alignment, nodeKey }) => {
     }
   );
 };
-const FileComponent = React$1.lazy(() => import("./index-afa4eda8.js"));
+const FileComponent = React$1.lazy(() => import("./index-68135c09.js"));
 function convertFileElement(domNode) {
   if (domNode instanceof HTMLDivElement) {
     const dataUrl = domNode.getAttribute("data-lexical-file-src");
@@ -20368,10 +20360,10 @@ const PDF_CONFIG = {
 };
 const loadHtml2Pdf = async () => {
   try {
-    const mod = await import("./html2pdf.bundle.min-f1b4a78e.js").then((n) => n.h);
+    const mod = await import("./html2pdf.bundle.min-08b31c1f.js").then((n) => n.h);
     return (mod == null ? void 0 : mod.default) || mod;
   } catch {
-    const mod2 = await import("./html2pdf.bundle-a30dde70.js").then((n) => n.h);
+    const mod2 = await import("./html2pdf.bundle-0b180070.js").then((n) => n.h);
     return (mod2 == null ? void 0 : mod2.default) || mod2;
   }
 };
@@ -23614,6 +23606,8 @@ const FontFamilyMenu = ({
 }) => {
   const [selectedFont, setSelectedFont] = useState$1("Arial");
   const [detectedFonts, setDetectedFonts] = useState$1(/* @__PURE__ */ new Set());
+  const pendingFontRef = React__default.useRef(null);
+  const userJustSetFontRef = React__default.useRef(false);
   const allFonts = useMemo(() => {
     const fontSet = new Set(fonts);
     detectedFonts.forEach((font) => fontSet.add(font));
@@ -23630,22 +23624,73 @@ const FontFamilyMenu = ({
             "Arial"
           );
           const cleanedFont = fontFamily.replace(/^["']|["']$/g, "").trim();
-          setSelectedFont(cleanedFont);
-          if (cleanedFont && cleanedFont !== "Arial" && !fonts.includes(cleanedFont)) {
-            setDetectedFonts((prev) => {
-              if (prev.has(cleanedFont))
-                return prev;
-              const newSet = new Set(prev);
-              newSet.add(cleanedFont);
-              return newSet;
-            });
+          if (userJustSetFontRef.current) {
+            userJustSetFontRef.current = false;
+            return;
+          }
+          if (!selection.isCollapsed() && pendingFontRef.current !== null) {
+            pendingFontRef.current = null;
+          }
+          if (pendingFontRef.current !== null && cleanedFont !== pendingFontRef.current && cleanedFont !== "Arial") {
+            pendingFontRef.current = null;
+          }
+          if (pendingFontRef.current === null) {
+            setSelectedFont(cleanedFont);
+            if (cleanedFont && cleanedFont !== "Arial" && !fonts.includes(cleanedFont)) {
+              setDetectedFonts((prev) => {
+                if (prev.has(cleanedFont))
+                  return prev;
+                const newSet = new Set(prev);
+                newSet.add(cleanedFont);
+                return newSet;
+              });
+            }
           }
         }
       });
     });
   }, [activeEditor, fonts]);
+  useEffect$1(() => {
+    return activeEditor.registerCommand(
+      KEY_DOWN_COMMAND,
+      (event) => {
+        if (pendingFontRef.current !== null && event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
+          const pendingFont = pendingFontRef.current;
+          const selection = $getSelection();
+          if ($isRangeSelection(selection) && selection.isCollapsed()) {
+            $patchStyleText(selection, { "font-family": pendingFont });
+          }
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_CRITICAL
+    );
+  }, [activeEditor]);
+  useEffect$1(() => {
+    const rootElement = activeEditor.getRootElement();
+    if (!rootElement)
+      return;
+    const handleFocus = () => {
+      if (pendingFontRef.current !== null) {
+        const pendingFont = pendingFontRef.current;
+        activeEditor.update(() => {
+          const selection = $getSelection();
+          if ($isRangeSelection(selection) && selection.isCollapsed()) {
+            userJustSetFontRef.current = true;
+            $patchStyleText(selection, { "font-family": pendingFont });
+          }
+        });
+      }
+    };
+    rootElement.addEventListener("focus", handleFocus);
+    return () => {
+      rootElement.removeEventListener("focus", handleFocus);
+    };
+  }, [activeEditor]);
   const applyFontFamily = useCallback(
     (fontFamily) => {
+      pendingFontRef.current = fontFamily;
+      userJustSetFontRef.current = true;
       activeEditor.update(() => {
         const selection = $getSelection();
         if ($isRangeSelection(selection)) {
@@ -23659,10 +23704,20 @@ const FontFamilyMenu = ({
     setSelectedFont(value);
     applyFontFamily(value);
   };
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Select, { value: selectedFont, onValueChange: handleFontChange, children: [
-    /* @__PURE__ */ jsx(SelectTrigger, { className: "!cteditor-h-7 md:!cteditor-bg-secondary !cteditor-bg-foreground/5 cteditor-text-foreground md:!cteditor-w-[120px] cteditor-text-xs max-md:cteditor-w-full", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select font" }) }),
-    /* @__PURE__ */ jsx(SelectContent, { children: allFonts.map((font) => /* @__PURE__ */ jsx(SelectItem, { value: font, style: { fontFamily: font }, children: font }, font)) })
-  ] }) });
+  const handleMouseDown = (e) => {
+    e.preventDefault();
+  };
+  return /* @__PURE__ */ jsxs(Select, { value: selectedFont, onValueChange: handleFontChange, children: [
+    /* @__PURE__ */ jsx(
+      SelectTrigger,
+      {
+        className: "!cteditor-h-7 md:!cteditor-bg-secondary !cteditor-bg-foreground/5 cteditor-text-foreground md:!cteditor-w-[120px] cteditor-text-xs max-md:cteditor-w-full",
+        onMouseDown: handleMouseDown,
+        children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select font" })
+      }
+    ),
+    /* @__PURE__ */ jsx(SelectContent, { onMouseDown: handleMouseDown, children: allFonts.map((font) => /* @__PURE__ */ jsx(SelectItem, { value: font, style: { fontFamily: font }, onMouseDown: handleMouseDown, children: font }, font)) })
+  ] });
 };
 const MIN_FONT_SIZE = 8;
 const MAX_FONT_SIZE = 72;
@@ -23673,6 +23728,7 @@ const FontSizeControl = () => {
   const [fontSize, setFontSize] = useState$1(DEFAULT_FONT_SIZE);
   const [inputValue, setInputValue] = useState$1(DEFAULT_FONT_SIZE.toString());
   const pendingFontSizeRef = React__default.useRef(null);
+  const userJustSetSizeRef = React__default.useRef(false);
   useEffect$1(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       editorState.read(() => {
@@ -23684,7 +23740,14 @@ const FontSizeControl = () => {
             `${DEFAULT_FONT_SIZE}px`
           );
           const size2 = parseInt(fontSizeStr, 10) || DEFAULT_FONT_SIZE;
-          if (pendingFontSizeRef.current !== null && size2 === pendingFontSizeRef.current) {
+          if (userJustSetSizeRef.current) {
+            userJustSetSizeRef.current = false;
+            return;
+          }
+          if (!selection.isCollapsed() && pendingFontSizeRef.current !== null) {
+            pendingFontSizeRef.current = null;
+          }
+          if (pendingFontSizeRef.current !== null && size2 !== pendingFontSizeRef.current && size2 !== DEFAULT_FONT_SIZE) {
             pendingFontSizeRef.current = null;
           }
           if (pendingFontSizeRef.current === null) {
@@ -23695,6 +23758,22 @@ const FontSizeControl = () => {
       });
     });
   }, [editor]);
+  useEffect$1(() => {
+    return editor.registerCommand(
+      KEY_DOWN_COMMAND,
+      (event) => {
+        if (pendingFontSizeRef.current !== null && event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
+          const pendingSize = pendingFontSizeRef.current;
+          const selection = $getSelection();
+          if ($isRangeSelection(selection) && selection.isCollapsed()) {
+            $patchStyleText(selection, { "font-size": `${pendingSize}px` });
+          }
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_CRITICAL
+    );
+  }, [editor]);
   useEffect$1(() => {
     const rootElement = editor.getRootElement();
     if (!rootElement)
@@ -23704,7 +23783,8 @@ const FontSizeControl = () => {
         const pendingSize = pendingFontSizeRef.current;
         editor.update(() => {
           const selection = $getSelection();
-          if ($isRangeSelection(selection)) {
+          if ($isRangeSelection(selection) && selection.isCollapsed()) {
+            userJustSetSizeRef.current = true;
             $patchStyleText(selection, { "font-size": `${pendingSize}px` });
           }
         });
@@ -23718,6 +23798,7 @@ const FontSizeControl = () => {
   const applyFontSize = useCallback(
     (size2) => {
       pendingFontSizeRef.current = size2;
+      userJustSetSizeRef.current = true;
       editor.update(() => {
         const selection = $getSelection();
         if ($isRangeSelection(selection)) {
@@ -23763,6 +23844,9 @@ const FontSizeControl = () => {
     setInputValue(newSize.toString());
     applyFontSize(newSize);
   };
+  const handleMouseDown = (e) => {
+    e.preventDefault();
+  };
   return /* @__PURE__ */ jsxs("div", { className: "cteditor-flex cteditor-items-center cteditor-gap-1", children: [
     /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
       /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
@@ -23771,6 +23855,7 @@ const FontSizeControl = () => {
           variant: "ghost",
           size: "icon-sm",
           onClick: decreaseFontSize,
+          onMouseDown: handleMouseDown,
           className: "cteditor-text-foreground/50",
           children: /* @__PURE__ */ jsx(Minus, { className: "!cteditor-size-[18px]" })
         }
@@ -23794,6 +23879,7 @@ const FontSizeControl = () => {
           variant: "ghost",
           size: "icon-sm",
           onClick: increaseFontSize,
+          onMouseDown: handleMouseDown,
           className: "cteditor-text-foreground/50",
           children: /* @__PURE__ */ jsx(Plus, { className: "!cteditor-size-[18px]" })
         }
@@ -26202,6 +26288,15 @@ const Toolbar = ({
           if ($isRangeSelection(selection))
             selection.insertRawText(textContent);
         }
+        const newSelection = $getSelection();
+        if ($isRangeSelection(newSelection)) {
+          const anchorNode = newSelection.anchor.getNode();
+          const codeNode = $findMatchingParent(anchorNode, $isCodeNode);
+          if (codeNode) {
+            const paragraphNode = $createParagraphNode();
+            codeNode.insertAfter(paragraphNode);
+          }
+        }
       }
     });
   }, [editor]);
@@ -27369,6 +27464,196 @@ const Toolbar = ({
     )
   ] });
 };
+const IS_ANDROID = typeof navigator !== "undefined" && /Android/i.test(navigator.userAgent);
+function AndroidKeyboardFixPlugin() {
+  const [editor] = useLexicalComposerContext();
+  useEffect$1(() => {
+    if (!IS_ANDROID) {
+      return;
+    }
+    const rootElement = editor.getRootElement();
+    if (!rootElement) {
+      return;
+    }
+    let compositionEndTimer = null;
+    let lastCompositionEndTime = 0;
+    let pendingSpaceInsertion = false;
+    const handleCompositionStart = () => {
+      if (compositionEndTimer) {
+        clearTimeout(compositionEndTimer);
+        compositionEndTimer = null;
+      }
+      pendingSpaceInsertion = false;
+    };
+    const handleCompositionEnd = () => {
+      lastCompositionEndTime = Date.now();
+      compositionEndTimer = setTimeout(() => {
+        compositionEndTimer = null;
+      }, 150);
+    };
+    const handleBeforeInput = (event) => {
+      var _a;
+      const timeSinceCompositionEnd = Date.now() - lastCompositionEndTime;
+      if (event.inputType === "insertText" && event.data === " " && timeSinceCompositionEnd < 200) {
+        pendingSpaceInsertion = true;
+        event.preventDefault();
+        requestAnimationFrame(() => {
+          editor.update(
+            () => {
+              const selection = $getSelection();
+              if ($isRangeSelection(selection)) {
+                selection.insertText(" ");
+              }
+            },
+            { discrete: true }
+          );
+          pendingSpaceInsertion = false;
+        });
+        return;
+      }
+      if (event.inputType === "insertCompositionText" && ((_a = event.data) == null ? void 0 : _a.endsWith(" "))) {
+        const timeSince = Date.now() - lastCompositionEndTime;
+        if (timeSince < 50) {
+          return;
+        }
+      }
+    };
+    const unregisterSpaceCommand = editor.registerCommand(
+      KEY_SPACE_COMMAND,
+      (event) => {
+        const timeSinceCompositionEnd = Date.now() - lastCompositionEndTime;
+        if (timeSinceCompositionEnd < 200 && !pendingSpaceInsertion) {
+          event.preventDefault();
+          requestAnimationFrame(() => {
+            editor.update(
+              () => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                  selection.insertText(" ");
+                }
+              },
+              { discrete: true }
+            );
+          });
+          return true;
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_CRITICAL
+    );
+    rootElement.addEventListener("compositionstart", handleCompositionStart);
+    rootElement.addEventListener("compositionend", handleCompositionEnd);
+    rootElement.addEventListener("beforeinput", handleBeforeInput);
+    return () => {
+      rootElement.removeEventListener(
+        "compositionstart",
+        handleCompositionStart
+      );
+      rootElement.removeEventListener("compositionend", handleCompositionEnd);
+      rootElement.removeEventListener("beforeinput", handleBeforeInput);
+      unregisterSpaceCommand();
+      if (compositionEndTimer) {
+        clearTimeout(compositionEndTimer);
+      }
+    };
+  }, [editor]);
+  return null;
+}
+function normalizeCodeNodeLineBreaks(codeNode) {
+  const children = codeNode.getChildren();
+  const nodesToRemove = [];
+  for (let i2 = 0; i2 < children.length - 1; i2++) {
+    const current = children[i2];
+    const next = children[i2 + 1];
+    if ($isLineBreakNode(current) && $isLineBreakNode(next)) {
+      nodesToRemove.push(next.getKey());
+    }
+  }
+  nodesToRemove.forEach((key) => {
+    const node = $getNodeByKey(key);
+    if (node) {
+      node.remove();
+    }
+  });
+}
+function CodeBlockNormalizerPlugin() {
+  const [editor] = useLexicalComposerContext();
+  useEffect$1(() => {
+    const unregisterMutation = editor.registerMutationListener(
+      CodeNode,
+      (mutations) => {
+        requestAnimationFrame(() => {
+          editor.update(() => {
+            for (const [nodeKey, mutation] of mutations) {
+              if (mutation === "created" || mutation === "updated") {
+                const node = $getNodeByKey(nodeKey);
+                if ($isCodeNode(node)) {
+                  normalizeCodeNodeLineBreaks(node);
+                }
+              }
+            }
+          });
+        });
+      }
+    );
+    return () => {
+      unregisterMutation();
+    };
+  }, [editor]);
+  return null;
+}
+function CodeBlockSelectAllPlugin() {
+  const [editor] = useLexicalComposerContext();
+  useEffect$1(() => {
+    const unregister = editor.registerCommand(
+      KEY_DOWN_COMMAND,
+      (event) => {
+        const isSelectAll = (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "a" && !event.shiftKey && !event.altKey;
+        if (!isSelectAll) {
+          return false;
+        }
+        let codeNode = null;
+        editor.getEditorState().read(() => {
+          const selection = $getSelection();
+          if ($isRangeSelection(selection)) {
+            const anchorNode = selection.anchor.getNode();
+            let currentNode = anchorNode;
+            while (currentNode) {
+              if ($isCodeNode(currentNode)) {
+                codeNode = currentNode;
+                break;
+              }
+              currentNode = currentNode.getParent();
+            }
+          }
+        });
+        if (!codeNode) {
+          return false;
+        }
+        event.preventDefault();
+        editor.update(() => {
+          const code = codeNode;
+          const children = code.getChildren();
+          const childrenCount = children.length;
+          if (childrenCount === 0) {
+            code.select(0, 0);
+            return;
+          }
+          const rangeSelection = $createRangeSelection();
+          rangeSelection.anchor.set(code.getKey(), 0, "element");
+          rangeSelection.focus.set(code.getKey(), childrenCount, "element");
+          $setSelection(rangeSelection);
+        });
+        return true;
+      },
+      COMMAND_PRIORITY_HIGH
+    );
+    return () => {
+      unregister();
+    };
+  }, [editor]);
+  return null;
+}
 const CodeHighlightPlugin = () => {
   const [editor] = useLexicalComposerContext();
   useEffect$1(() => {
@@ -27510,6 +27795,9 @@ const extractTextWithMap = (editorState) => {
     editorState.read(() => {
       const root2 = $getRoot();
       const traverse = (node) => {
+        if ($isCodeNode(node)) {
+          return;
+        }
         if ($isTextNode(node)) {
           const text = node.getTextContent();
           const start = fullText.length;
@@ -29172,7 +29460,7 @@ function FloatingEmbedMenu({
                 handleDisplayTypeChange("url");
               },
               title: "URL",
-              children: /* @__PURE__ */ jsx(LinkIcon$1, { fontSize: "small" })
+              children: /* @__PURE__ */ jsx(Link$1, { fontSize: "small" })
             }
           ),
           /* @__PURE__ */ jsx(
@@ -29184,7 +29472,7 @@ function FloatingEmbedMenu({
                 handleDisplayTypeChange("card");
               },
               title: "Card",
-              children: /* @__PURE__ */ jsx(CropOriginalIcon, { fontSize: "small" })
+              children: /* @__PURE__ */ jsx(CropOriginal, { fontSize: "small" })
             }
           ),
           /* @__PURE__ */ jsx(
@@ -29196,7 +29484,7 @@ function FloatingEmbedMenu({
                 handleDisplayTypeChange("embed");
               },
               title: "Embedded",
-              children: /* @__PURE__ */ jsx(CodeIcon$1, { fontSize: "small" })
+              children: /* @__PURE__ */ jsx(Code$1, { fontSize: "small" })
             }
           )
         ] }) }),
@@ -29211,7 +29499,7 @@ function FloatingEmbedMenu({
                 handleAlignmentChange("left");
               },
               title: "Left",
-              children: /* @__PURE__ */ jsx(FormatAlignLeftIcon, { fontSize: "small" })
+              children: /* @__PURE__ */ jsx(FormatAlignLeft, { fontSize: "small" })
             }
           ),
           /* @__PURE__ */ jsx(
@@ -29223,7 +29511,7 @@ function FloatingEmbedMenu({
                 handleAlignmentChange("center");
               },
               title: "Center",
-              children: /* @__PURE__ */ jsx(FormatAlignCenterIcon, { fontSize: "small" })
+              children: /* @__PURE__ */ jsx(FormatAlignCenter, { fontSize: "small" })
             }
           ),
           /* @__PURE__ */ jsx(
@@ -29235,7 +29523,7 @@ function FloatingEmbedMenu({
                 handleAlignmentChange("right");
               },
               title: "Right",
-              children: /* @__PURE__ */ jsx(FormatAlignRightIcon, { fontSize: "small" })
+              children: /* @__PURE__ */ jsx(FormatAlignRight, { fontSize: "small" })
             }
           )
         ] }) }),
@@ -29247,7 +29535,7 @@ function FloatingEmbedMenu({
               className: "embed-menu-button",
               onClick: handleOpenInNewTab,
               title: "Open in new tab",
-              children: /* @__PURE__ */ jsx(OpenInNewIcon, { fontSize: "small" })
+              children: /* @__PURE__ */ jsx(OpenInNew, { fontSize: "small" })
             }
           ),
           /* @__PURE__ */ jsx(
@@ -29256,7 +29544,7 @@ function FloatingEmbedMenu({
               className: "embed-menu-button",
               onClick: handleRemoveEmbed,
               title: "Remove",
-              children: /* @__PURE__ */ jsx(DeleteIcon, { fontSize: "small" })
+              children: /* @__PURE__ */ jsx(Delete, { fontSize: "small" })
             }
           ),
           /* @__PURE__ */ jsx(
@@ -29265,7 +29553,7 @@ function FloatingEmbedMenu({
               className: "embed-menu-button",
               onClick: handleCopyUrl,
               title: "Copy",
-              children: /* @__PURE__ */ jsx(ContentCopyIcon, { fontSize: "small" })
+              children: /* @__PURE__ */ jsx(ContentCopy, { fontSize: "small" })
             }
           )
         ] }) })
@@ -30518,6 +30806,15 @@ function TextFormatFloatingToolbar({
           if ($isRangeSelection(selection))
             selection.insertRawText(textContent);
         }
+        const newSelection = $getSelection();
+        if ($isRangeSelection(newSelection)) {
+          const anchorNode = newSelection.anchor.getNode();
+          const codeNode = $findMatchingParent(anchorNode, $isCodeNode);
+          if (codeNode) {
+            const paragraphNode = $createParagraphNode();
+            codeNode.insertAfter(paragraphNode);
+          }
+        }
       }
     });
   }, [editor]);
@@ -31684,6 +31981,94 @@ const IS_CODE = 16;
 const IS_SUBSCRIPT = 32;
 const IS_SUPERSCRIPT = 64;
 const IS_HIGHLIGHT = 128;
+function parseColor(color) {
+  if (!color)
+    return null;
+  color = color.trim().toLowerCase();
+  if (color.startsWith("#")) {
+    let hex = color.slice(1);
+    if (hex.length === 3) {
+      hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+    }
+    if (hex.length === 6) {
+      return {
+        r: parseInt(hex.slice(0, 2), 16),
+        g: parseInt(hex.slice(2, 4), 16),
+        b: parseInt(hex.slice(4, 6), 16)
+      };
+    }
+  }
+  const rgbMatch = color.match(/rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+  if (rgbMatch) {
+    return {
+      r: parseInt(rgbMatch[1]),
+      g: parseInt(rgbMatch[2]),
+      b: parseInt(rgbMatch[3])
+    };
+  }
+  const namedColors = {
+    white: { r: 255, g: 255, b: 255 },
+    black: { r: 0, g: 0, b: 0 },
+    red: { r: 255, g: 0, b: 0 },
+    green: { r: 0, g: 128, b: 0 },
+    blue: { r: 0, g: 0, b: 255 },
+    yellow: { r: 255, g: 255, b: 0 },
+    transparent: { r: 0, g: 0, b: 0 }
+    // Will be handled separately
+  };
+  return namedColors[color] || null;
+}
+function getLuminance(r2, g2, b2) {
+  const sR = r2 / 255;
+  const sG = g2 / 255;
+  const sB = b2 / 255;
+  const R = sR <= 0.03928 ? sR / 12.92 : Math.pow((sR + 0.055) / 1.055, 2.4);
+  const G = sG <= 0.03928 ? sG / 12.92 : Math.pow((sG + 0.055) / 1.055, 2.4);
+  const B = sB <= 0.03928 ? sB / 12.92 : Math.pow((sB + 0.055) / 1.055, 2.4);
+  return 0.2126 * R + 0.7152 * G + 0.0722 * B;
+}
+function isLightColor(color) {
+  const parsed = parseColor(color);
+  if (!parsed)
+    return null;
+  return getLuminance(parsed.r, parsed.g, parsed.b) > 0.5;
+}
+function getEditorBackgroundColor(editor) {
+  const rootElement = editor.getRootElement();
+  if (!rootElement)
+    return null;
+  try {
+    const computedStyle = window.getComputedStyle(rootElement);
+    const bgColor = computedStyle.backgroundColor;
+    if (bgColor === "transparent" || bgColor === "rgba(0, 0, 0, 0)") {
+      let parent = rootElement.parentElement;
+      while (parent) {
+        const parentBg = window.getComputedStyle(parent).backgroundColor;
+        if (parentBg && parentBg !== "transparent" && parentBg !== "rgba(0, 0, 0, 0)") {
+          return parentBg;
+        }
+        parent = parent.parentElement;
+      }
+      return "rgb(255, 255, 255)";
+    }
+    return bgColor;
+  } catch {
+    return null;
+  }
+}
+function isEditorDarkMode(editor) {
+  const bgColor = getEditorBackgroundColor(editor);
+  if (!bgColor)
+    return false;
+  const isLight = isLightColor(bgColor);
+  return isLight === false;
+}
+function adjustColorsForTheme(styleInfo) {
+  const adjusted = { ...styleInfo };
+  adjusted.backgroundColor = "";
+  adjusted.color = "";
+  return adjusted;
+}
 function detectCKEditorSource(html) {
   return html.includes('class="image"') || // CKEditor's figure class for images
   html.includes('class="image ') || html.includes("image-style-") || // CKEditor's image alignment classes
@@ -31875,7 +32260,8 @@ function buildStyleString(info) {
 }
 function createStyledTextNode(text, parentElement) {
   const textNode = $createTextNode(text);
-  const styleInfo = getStyleInfoFromElement(parentElement);
+  let styleInfo = getStyleInfoFromElement(parentElement);
+  styleInfo = adjustColorsForTheme(styleInfo);
   if (styleInfo.format) {
     textNode.setFormat(styleInfo.format);
   }
@@ -32149,7 +32535,8 @@ function processChildrenWithStyle(element, parentNode, defaultStyles) {
         if (hasNonWhitespace || isSignificantWhitespace) {
           const normalizedText = text.replace(/\s+/g, " ");
           const textNode = $createTextNode(normalizedText);
-          const styleInfo = getStyleInfoFromElement(element);
+          let styleInfo = getStyleInfoFromElement(element);
+          styleInfo = adjustColorsForTheme(styleInfo);
           if (styleInfo.format) {
             textNode.setFormat(styleInfo.format);
           }
@@ -32263,6 +32650,11 @@ function convertHTMLToNodesWithStyles(html, editor) {
   currentPasteContext = {
     isCKEditor
   };
+  const editorBgColor = getEditorBackgroundColor(editor);
+  ({
+    editorIsDark: isEditorDarkMode(editor),
+    editorBgColor
+  });
   const { container, cleanup } = createStyledDocument(html);
   try {
     const customNodes = processNode(container, null);
@@ -32326,6 +32718,61 @@ function RichTextPastePlugin() {
         const htmlContent = clipboardData.getData("text/html");
         const plainText = clipboardData.getData("text/plain");
         if (htmlContent) {
+          let isInsideCodeBlock = false;
+          editor.getEditorState().read(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+              const anchorNode = selection.anchor.getNode();
+              let currentNode = anchorNode;
+              while (currentNode) {
+                if ($isCodeNode(currentNode)) {
+                  isInsideCodeBlock = true;
+                  break;
+                }
+                currentNode = currentNode.getParent();
+              }
+            }
+          });
+          if (isInsideCodeBlock) {
+            if (plainText) {
+              event.preventDefault();
+              queueMicrotask(() => {
+                editor.update(
+                  () => {
+                    const selection = $getSelection();
+                    if ($isRangeSelection(selection)) {
+                      selection.insertRawText(plainText);
+                    }
+                  },
+                  {
+                    tag: "paste"
+                  }
+                );
+                queueMicrotask(() => {
+                  editor.update(
+                    () => {
+                      const selection = $getSelection();
+                      if ($isRangeSelection(selection)) {
+                        let currentNode = selection.anchor.getNode();
+                        while (currentNode) {
+                          if ($isCodeNode(currentNode)) {
+                            currentNode.selectEnd();
+                            break;
+                          }
+                          currentNode = currentNode.getParent();
+                        }
+                      }
+                    },
+                    {
+                      tag: "history-merge"
+                    }
+                  );
+                });
+              });
+              return true;
+            }
+            return false;
+          }
           event.preventDefault();
           editor.update(
             () => {
@@ -32560,7 +33007,10 @@ function SlashCommandPlugin() {
     makeBlock(() => {
       const selection = $getSelection();
       if ($isRangeSelection(selection)) {
-        selection.insertNodes([$createCodeNode()]);
+        const codeNode = $createCodeNode();
+        selection.insertNodes([codeNode]);
+        const paragraphNode = $createParagraphNode();
+        codeNode.insertAfter(paragraphNode);
       }
     });
   }, [makeBlock]);
@@ -36479,11 +36929,96 @@ const WordCountPlugin = () => {
     }
   );
 };
+function getEditorColors(rootElement) {
+  try {
+    const computedStyle = window.getComputedStyle(rootElement);
+    let bgColor = computedStyle.backgroundColor;
+    let textColor = computedStyle.color;
+    if (bgColor === "transparent" || bgColor === "rgba(0, 0, 0, 0)") {
+      let parent = rootElement.parentElement;
+      while (parent) {
+        const parentBg = window.getComputedStyle(parent).backgroundColor;
+        if (parentBg && parentBg !== "transparent" && parentBg !== "rgba(0, 0, 0, 0)") {
+          bgColor = parentBg;
+          break;
+        }
+        parent = parent.parentElement;
+      }
+      if (bgColor === "transparent" || bgColor === "rgba(0, 0, 0, 0)") {
+        bgColor = "rgb(255, 255, 255)";
+      }
+    }
+    if (!textColor || textColor === "rgba(0, 0, 0, 0)") {
+      textColor = "rgb(0, 0, 0)";
+    }
+    return { bgColor, textColor };
+  } catch {
+    return { bgColor: "rgb(255, 255, 255)", textColor: "rgb(0, 0, 0)" };
+  }
+}
 function exportEditorWithInlineStyle(editor) {
   const rootElement = editor.getRootElement();
   if (!rootElement)
     return "";
+  const { bgColor, textColor } = getEditorColors(rootElement);
   const tableStyleMap = /* @__PURE__ */ new Map();
+  const codeBlockStyles = {
+    backgroundColor: "",
+    textColor: "",
+    gutterBackgroundColor: "",
+    gutterTextColor: "",
+    fontFamily: "Menlo, Consolas, Monaco, monospace",
+    fontSize: "13px",
+    lineHeight: "1.53",
+    tokenColors: /* @__PURE__ */ new Map(),
+    spanColors: /* @__PURE__ */ new Map()
+  };
+  const liveCodeBlocks = rootElement.querySelectorAll("code");
+  if (liveCodeBlocks.length > 0) {
+    liveCodeBlocks.forEach((codeBlock, codeBlockIndex) => {
+      const htmlCodeBlock = codeBlock;
+      if (codeBlockIndex === 0) {
+        const computedStyle = window.getComputedStyle(htmlCodeBlock);
+        codeBlockStyles.backgroundColor = computedStyle.backgroundColor;
+        codeBlockStyles.textColor = computedStyle.color;
+        codeBlockStyles.fontFamily = computedStyle.fontFamily;
+        codeBlockStyles.fontSize = computedStyle.fontSize;
+        codeBlockStyles.lineHeight = computedStyle.lineHeight;
+        const gutterBgColor = window.getComputedStyle(htmlCodeBlock, "::before").backgroundColor;
+        const gutterColor = window.getComputedStyle(htmlCodeBlock, "::before").color;
+        codeBlockStyles.gutterBackgroundColor = gutterBgColor;
+        codeBlockStyles.gutterTextColor = gutterColor;
+      }
+      const spanColorArray = [];
+      const spans = htmlCodeBlock.querySelectorAll("span");
+      spans.forEach((span) => {
+        const htmlSpan = span;
+        const spanComputedStyle = window.getComputedStyle(htmlSpan);
+        const color = spanComputedStyle.color;
+        const text = htmlSpan.textContent || "";
+        spanColorArray.push({ text, color });
+      });
+      codeBlockStyles.spanColors.set(codeBlockIndex, spanColorArray);
+    });
+    const firstCodeBlock = liveCodeBlocks[0];
+    const tokenClasses = [
+      "PlaygroundEditorTheme__tokenComment",
+      "PlaygroundEditorTheme__tokenPunctuation",
+      "PlaygroundEditorTheme__tokenProperty",
+      "PlaygroundEditorTheme__tokenSelector",
+      "PlaygroundEditorTheme__tokenOperator",
+      "PlaygroundEditorTheme__tokenAttr",
+      "PlaygroundEditorTheme__tokenVariable",
+      "PlaygroundEditorTheme__tokenFunction"
+    ];
+    tokenClasses.forEach((tokenClass) => {
+      const tokenSpan = firstCodeBlock.querySelector(`.${tokenClass}`);
+      if (tokenSpan) {
+        const tokenComputedStyle = window.getComputedStyle(tokenSpan);
+        codeBlockStyles.tokenColors.set(tokenClass, tokenComputedStyle.color);
+      }
+    });
+  }
   const liveTables = rootElement.querySelectorAll("table");
   liveTables.forEach((table, index2) => {
     const colors = detectTableColorsFromVariables(table);
@@ -36493,9 +37028,9 @@ function exportEditorWithInlineStyle(editor) {
     const headerBgColors = [];
     headerCells.forEach((th) => {
       const computed = window.getComputedStyle(th);
-      const bgColor = computed.backgroundColor;
-      if (bgColor && bgColor !== "rgba(0, 0, 0, 0)") {
-        headerBgColors.push(bgColor);
+      const bgColor2 = computed.backgroundColor;
+      if (bgColor2 && bgColor2 !== "rgba(0, 0, 0, 0)") {
+        headerBgColors.push(bgColor2);
       } else {
         headerBgColors.push("");
       }
@@ -36530,7 +37065,7 @@ function exportEditorWithInlineStyle(editor) {
   editor.getEditorState().read(() => {
     htmlString = $generateHtmlFromNodes(editor, null);
   });
-  return processHtmlForExport(htmlString, tableStyleMap);
+  return processHtmlForExport(htmlString, tableStyleMap, bgColor, textColor, codeBlockStyles);
 }
 function normalizeColorForComparison(color) {
   if (!color)
@@ -36580,7 +37115,7 @@ function detectTableColorsFromVariables(table) {
   }
   return null;
 }
-function processHtmlForExport(html, tableStyleMap) {
+function processHtmlForExport(html, tableStyleMap, bgColor, textColor, codeBlockStyles) {
   const parser = new DOMParser();
   const doc = parser.parseFromString(html, "text/html");
   const tables = doc.querySelectorAll("table");
@@ -36590,14 +37125,14 @@ function processHtmlForExport(html, tableStyleMap) {
       return;
     const headerCells = table.querySelectorAll("th");
     headerCells.forEach((th, cellIndex) => {
-      const bgColor = styleInfo.headerBgColors[cellIndex];
-      if (bgColor) {
+      const bgColor2 = styleInfo.headerBgColors[cellIndex];
+      if (bgColor2) {
         const el = th;
-        el.style.setProperty("background-color", bgColor, "important");
-        const textColor = getContrastColor(bgColor);
-        el.style.color = textColor;
+        el.style.setProperty("background-color", bgColor2, "important");
+        const textColor2 = getContrastColor(bgColor2);
+        el.style.color = textColor2;
         el.querySelectorAll("*").forEach((nested) => {
-          nested.style.color = textColor;
+          nested.style.color = textColor2;
         });
       }
     });
@@ -36612,27 +37147,37 @@ function processHtmlForExport(html, tableStyleMap) {
         const el = cell;
         const explicitColor = styleInfo.explicitCellColors.get(`${rowIndex}-${cellIndex}`);
         if (explicitColor) {
-          const textColor = getContrastColor(explicitColor);
+          const textColor2 = getContrastColor(explicitColor);
           el.style.setProperty("background-color", explicitColor, "important");
-          el.style.color = textColor;
+          el.style.color = textColor2;
           el.querySelectorAll("*").forEach((nested) => {
-            nested.style.color = textColor;
+            nested.style.color = textColor2;
           });
         } else if (stripingColor) {
-          const textColor = getContrastColor(stripingColor);
+          const textColor2 = getContrastColor(stripingColor);
           el.style.setProperty("background-color", stripingColor, "important");
-          el.style.color = textColor;
+          el.style.color = textColor2;
           el.querySelectorAll("*").forEach((nested) => {
-            nested.style.color = textColor;
+            nested.style.color = textColor2;
           });
         }
       });
     });
   });
   cleanupHeaderCellStructure(doc.body);
-  applyGenericSafeStyles(doc.body);
+  applyCodeSyntaxHighlighting(doc.body, codeBlockStyles);
+  processCodeBlocks(doc.body, codeBlockStyles);
+  applyGenericSafeStyles(doc.body, codeBlockStyles);
   cleanupClasses(doc.body);
-  return doc.body.innerHTML;
+  const wrapper = doc.createElement("div");
+  wrapper.style.backgroundColor = bgColor;
+  wrapper.style.color = textColor;
+  wrapper.style.padding = "1em";
+  wrapper.style.minHeight = "100%";
+  while (doc.body.firstChild) {
+    wrapper.appendChild(doc.body.firstChild);
+  }
+  return wrapper.outerHTML;
 }
 function cleanupHeaderCellStructure(container) {
   const allHeaderCells = container.querySelectorAll("th");
@@ -36654,12 +37199,25 @@ function cleanupHeaderCellStructure(container) {
     });
   });
 }
-function applyGenericSafeStyles(container) {
+function applyGenericSafeStyles(container, codeBlockStyles) {
   const addStyle = (selector, styles) => {
     container.querySelectorAll(selector).forEach((el) => {
       el.style.cssText += "; " + styles;
     });
   };
+  const addStyleIfNotSetOnElementOrChildren = (selector, property, value) => {
+    container.querySelectorAll(selector).forEach((el) => {
+      const currentValue = el.style.getPropertyValue(property);
+      if (currentValue && currentValue !== "initial" && currentValue !== "inherit") {
+        return;
+      }
+      const childrenWithProperty = el.querySelectorAll(`[style*="${property}"]`);
+      if (childrenWithProperty.length > 0) {
+        return;
+      }
+      el.style.setProperty(property, value);
+    });
+  };
   const addStyleIfNotSet = (selector, property, value) => {
     container.querySelectorAll(selector).forEach((el) => {
       const currentValue = el.style.getPropertyValue(property);
@@ -36669,10 +37227,11 @@ function applyGenericSafeStyles(container) {
     });
   };
   const defaultFontFamily = "Arial, sans-serif";
-  const selectors = "table, p, span, li, td, th, div, h1, h2, h3, h4, h5, h6";
-  addStyle(selectors, "line-height: 1.5;");
-  addStyleIfNotSet(selectors, "font-family", defaultFontFamily);
-  addStyleIfNotSet("table, p, span, li, td, th, div", "font-size", "16px");
+  const blockSelectors = "table, p, li, td, th, div, h1, h2, h3, h4, h5, h6";
+  const allSelectors = "table, p, span, li, td, th, div, h1, h2, h3, h4, h5, h6";
+  addStyle(allSelectors, "line-height: 1.5;");
+  addStyleIfNotSetOnElementOrChildren(blockSelectors, "font-family", defaultFontFamily);
+  addStyleIfNotSet("table, p, li, td, th, div", "font-size", "16px");
   addStyle("p", "margin: 0 0 1em 0;");
   addStyle("th p, td p", "margin: 0; padding: 0;");
   addStyle(
@@ -36722,13 +37281,12 @@ function applyGenericSafeStyles(container) {
   addStyle("ul, ol", "margin: 1em 0; padding-left: 40px;");
   addStyle("li", "margin: 0.5em 0;");
   addStyle("a", "color: #0066cc; text-decoration: underline;");
+  const codeBlockBg = codeBlockStyles.backgroundColor || "#f5f5f5";
+  const codeBlockText = codeBlockStyles.textColor || "#333";
+  const codeBlockFont = codeBlockStyles.fontFamily || "Menlo, Consolas, Monaco, monospace";
   addStyle(
-    "code",
-    'font-family: "Courier New", Courier, monospace; background-color: #f5f5f5; padding: 2px 4px; border-radius: 3px;'
-  );
-  addStyle(
-    "pre",
-    'font-family: "Courier New", Courier, monospace; background-color: #f5f5f5; padding: 10px; border-radius: 5px; overflow-x: auto; margin: 1em 0;'
+    "code:not(.code-line-numbers):not(.code-content):not([data-language]):not([data-highlight-language])",
+    `font-family: ${codeBlockFont}; background-color: ${codeBlockBg}; color: ${codeBlockText}; padding: 2px 4px; border-radius: 3px;`
   );
   addStyle(
     "blockquote",
@@ -36738,6 +37296,108 @@ function applyGenericSafeStyles(container) {
   addStyle("em, i", "font-style: italic;");
   addStyle("hr", "border: none; border-top: 1px solid #ddd; margin: 1em 0;");
 }
+function applyCodeSyntaxHighlighting(container, codeBlockStyles) {
+  const codeBlocks = container.querySelectorAll('code, pre[data-language], pre[data-highlight-language], pre[spellcheck="false"]');
+  codeBlocks.forEach((codeBlock, codeBlockIndex) => {
+    const capturedSpanColors = codeBlockStyles.spanColors.get(codeBlockIndex) || [];
+    const spans = codeBlock.querySelectorAll("span");
+    spans.forEach((span, spanIndex) => {
+      const htmlSpan = span;
+      if (spanIndex < capturedSpanColors.length) {
+        const { color } = capturedSpanColors[spanIndex];
+        if (color && color !== codeBlockStyles.textColor) {
+          htmlSpan.style.color = color;
+        }
+      }
+    });
+  });
+}
+function processCodeBlocks(container, codeBlockStyles) {
+  const codeBlocks = container.querySelectorAll('code, pre[data-language], pre[data-highlight-language], pre[spellcheck="false"]');
+  codeBlocks.forEach((codeBlock) => {
+    const htmlCodeBlock = codeBlock;
+    const brElements = Array.from(htmlCodeBlock.querySelectorAll("br"));
+    const toRemove = [];
+    for (let i2 = 0; i2 < brElements.length - 1; i2++) {
+      const currentBr = brElements[i2];
+      const nextBr = brElements[i2 + 1];
+      if (currentBr.nextSibling === nextBr) {
+        toRemove.push(nextBr);
+        i2++;
+      }
+    }
+    toRemove.forEach((br) => br.remove());
+    const brCount = htmlCodeBlock.querySelectorAll("br").length;
+    const lineCount = brCount + 1;
+    const lineNumbers = [];
+    for (let i2 = 1; i2 <= lineCount; i2++) {
+      lineNumbers.push(i2.toString());
+    }
+    const lineNumbersStr = lineNumbers.join("\n");
+    const maxDigits = lineCount.toString().length;
+    const gutterWidth = Math.max(40, 20 + maxDigits * 10);
+    const gutter = container.ownerDocument.createElement("div");
+    gutter.className = "code-line-numbers";
+    gutter.textContent = lineNumbersStr;
+    const fontFamily = codeBlockStyles.fontFamily || "Menlo, Consolas, Monaco, monospace";
+    const fontSize = codeBlockStyles.fontSize || "13px";
+    const lineHeight = codeBlockStyles.lineHeight || "1.53";
+    const gutterBg = codeBlockStyles.gutterBackgroundColor || "rgba(0, 0, 0, 0.1)";
+    const gutterColor = codeBlockStyles.gutterTextColor || "rgba(0, 0, 0, 0.5)";
+    gutter.style.cssText = [
+      "display: table-cell",
+      "vertical-align: top",
+      `width: ${gutterWidth}px`,
+      `min-width: ${gutterWidth}px`,
+      "padding: 10px 8px",
+      `background-color: ${gutterBg}`,
+      `color: ${gutterColor}`,
+      "text-align: right",
+      `font-family: ${fontFamily}`,
+      `font-size: ${fontSize}`,
+      `line-height: ${lineHeight}`,
+      "border-right: 1px solid rgba(128, 128, 128, 0.3)",
+      "border-top-left-radius: 5px",
+      "border-bottom-left-radius: 5px",
+      "user-select: none",
+      "white-space: pre",
+      "box-sizing: border-box"
+    ].join("; ");
+    const codeContent = container.ownerDocument.createElement("div");
+    codeContent.className = "code-content";
+    codeContent.style.cssText = [
+      "display: table-cell",
+      "vertical-align: top",
+      "padding: 10px 10px 10px 12px",
+      `font-family: ${fontFamily}`,
+      `font-size: ${fontSize}`,
+      `line-height: ${lineHeight}`,
+      "white-space: pre",
+      "overflow-x: auto",
+      "width: 100%"
+    ].join("; ");
+    while (htmlCodeBlock.firstChild) {
+      codeContent.appendChild(htmlCodeBlock.firstChild);
+    }
+    const codeBlockBg = codeBlockStyles.backgroundColor || "#f5f5f5";
+    const codeBlockText = codeBlockStyles.textColor || "#333";
+    htmlCodeBlock.style.cssText = [
+      "display: table",
+      "table-layout: fixed",
+      "width: 100%",
+      `background-color: ${codeBlockBg}`,
+      `color: ${codeBlockText}`,
+      "border-radius: 5px",
+      "margin: 1em 0",
+      "overflow: hidden"
+    ].join("; ");
+    htmlCodeBlock.appendChild(gutter);
+    htmlCodeBlock.appendChild(codeContent);
+    htmlCodeBlock.removeAttribute("spellcheck");
+    htmlCodeBlock.removeAttribute("data-gutter");
+    htmlCodeBlock.removeAttribute("dir");
+  });
+}
 function cleanupClasses(container) {
   const classesToRemove = [
     "PlaygroundEditorTheme__",
@@ -36911,7 +37571,24 @@ function preprocessInitialContent(html) {
     return html;
   }
   const parser = new DOMParser();
-  const doc = parser.parseFromString(html, "text/html");
+  let doc = parser.parseFromString(html, "text/html");
+  let body = doc.body;
+  if (body.children.length === 1) {
+    const firstChild = body.children[0];
+    if (firstChild.tagName === "DIV" && firstChild.style.backgroundColor && firstChild.style.color && firstChild.style.padding) {
+      const innerHtml = firstChild.innerHTML;
+      doc = parser.parseFromString(innerHtml, "text/html");
+      body = doc.body;
+    }
+  }
+  const emptyParagraphs = body.querySelectorAll("p");
+  emptyParagraphs.forEach((p2) => {
+    var _a, _b;
+    const hasOnlyBrOrWhitespace = !((_a = p2.textContent) == null ? void 0 : _a.trim()) && (p2.innerHTML.trim() === "" || p2.innerHTML.trim() === "<br>" || p2.querySelector("br") !== null && !((_b = p2.textContent) == null ? void 0 : _b.trim()));
+    if (hasOnlyBrOrWhitespace) {
+      p2.remove();
+    }
+  });
   const tables = doc.querySelectorAll("table");
   tables.forEach((table) => {
     const styles = detectTableStylesFromInline(table);
@@ -36992,6 +37669,48 @@ function preprocessInitialContent(html) {
       htmlEl.setAttribute("style", relevantStyles.join("; "));
     }
   });
+  const codeBlocks = doc.querySelectorAll("code, pre");
+  codeBlocks.forEach((codeBlock) => {
+    const htmlCodeBlock = codeBlock;
+    const lineNumbersGutter = htmlCodeBlock.querySelector(".code-line-numbers");
+    const codeContent = htmlCodeBlock.querySelector(".code-content");
+    if (lineNumbersGutter && codeContent) {
+      lineNumbersGutter.remove();
+      while (codeContent.firstChild) {
+        htmlCodeBlock.appendChild(codeContent.firstChild);
+      }
+      codeContent.remove();
+      htmlCodeBlock.style.removeProperty("display");
+      htmlCodeBlock.style.removeProperty("table-layout");
+      htmlCodeBlock.style.removeProperty("width");
+      htmlCodeBlock.style.removeProperty("background-color");
+      htmlCodeBlock.style.removeProperty("color");
+      htmlCodeBlock.style.removeProperty("border-radius");
+      htmlCodeBlock.style.removeProperty("margin");
+      htmlCodeBlock.style.removeProperty("overflow");
+    }
+    const tableDisplayElements = htmlCodeBlock.querySelectorAll('[style*="display: table-cell"]');
+    if (tableDisplayElements.length > 0) {
+      tableDisplayElements.forEach((cell) => {
+        const htmlCell = cell;
+        const isGutter = htmlCell.style.textAlign === "right" && /^\s*(\d+\n?)+\s*$/.test(htmlCell.textContent || "");
+        if (isGutter) {
+          htmlCell.remove();
+        } else {
+          while (htmlCell.firstChild) {
+            htmlCodeBlock.appendChild(htmlCell.firstChild);
+          }
+          htmlCell.remove();
+        }
+      });
+      htmlCodeBlock.style.removeProperty("display");
+      htmlCodeBlock.style.removeProperty("table-layout");
+      htmlCodeBlock.style.removeProperty("width");
+    }
+    if (!htmlCodeBlock.classList.contains("PlaygroundEditorTheme__code")) {
+      htmlCodeBlock.classList.add("PlaygroundEditorTheme__code");
+    }
+  });
   const headings = doc.querySelectorAll("h1, h2, h3, h4, h5, h6");
   headings.forEach((heading) => {
     const tagName = heading.tagName.toLowerCase();
@@ -37128,6 +37847,172 @@ const OnChangeWrapper = ({
   };
   return /* @__PURE__ */ jsx(OnChangePlugin, { onChange: handleChange });
 };
+function getStyleFromElement(element) {
+  const styles = [];
+  const style = element.style;
+  if (style.fontFamily) {
+    const fontFamily = style.fontFamily.replace(/["']/g, "").trim();
+    if (fontFamily) {
+      styles.push(`font-family: ${fontFamily}`);
+    }
+  }
+  if (style.fontSize) {
+    styles.push(`font-size: ${style.fontSize}`);
+  }
+  if (style.lineHeight) {
+    styles.push(`line-height: ${style.lineHeight}`);
+  }
+  if (style.color && style.color !== "rgb(0, 0, 0)") {
+    styles.push(`color: ${style.color}`);
+  }
+  if (style.backgroundColor && style.backgroundColor !== "rgba(0, 0, 0, 0)" && style.backgroundColor !== "transparent") {
+    styles.push(`background-color: ${style.backgroundColor}`);
+  }
+  if (style.letterSpacing && style.letterSpacing !== "normal") {
+    styles.push(`letter-spacing: ${style.letterSpacing}`);
+  }
+  if (style.wordSpacing && style.wordSpacing !== "normal") {
+    styles.push(`word-spacing: ${style.wordSpacing}`);
+  }
+  return styles.join("; ");
+}
+function collectTextSegmentsFromElement(element) {
+  const segments = [];
+  function traverse(node, inheritedStyle) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      const text = node.textContent || "";
+      if (text) {
+        segments.push({ text, style: inheritedStyle });
+      }
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      const el = node;
+      const tagName = el.tagName.toLowerCase();
+      if (["br", "img", "hr"].includes(tagName)) {
+        return;
+      }
+      const elementStyle = getStyleFromElement(el);
+      const currentStyle = elementStyle || inheritedStyle;
+      const children = el.childNodes;
+      for (let i2 = 0; i2 < children.length; i2++) {
+        traverse(children[i2], currentStyle);
+      }
+    }
+  }
+  traverse(element, "");
+  return segments;
+}
+function splitAndStyleTextNode(textNode, segments) {
+  if (!$isTextNode(textNode) || segments.length === 0) {
+    return;
+  }
+  const nodeText = textNode.getTextContent();
+  const format = textNode.getFormat();
+  const styledSegments = segments.filter((s2) => s2.style);
+  if (styledSegments.length <= 1) {
+    const styledSegment = styledSegments[0];
+    if (styledSegment) {
+      textNode.setStyle(styledSegment.style);
+    }
+    return;
+  }
+  const splitPoints = [];
+  let runningOffset = 0;
+  for (const segment of segments) {
+    const segmentLength = segment.text.length;
+    if (segment.style) {
+      splitPoints.push({
+        offset: runningOffset,
+        style: segment.style
+      });
+    }
+    runningOffset += segmentLength;
+  }
+  if (splitPoints.length === 0) {
+    return;
+  }
+  const offsetsToSplit = [];
+  runningOffset = 0;
+  for (let i2 = 0; i2 < segments.length - 1; i2++) {
+    runningOffset += segments[i2].text.length;
+    if (runningOffset > 0 && runningOffset < nodeText.length) {
+      offsetsToSplit.push(runningOffset);
+    }
+  }
+  if (offsetsToSplit.length === 0) {
+    if (splitPoints[0]) {
+      textNode.setStyle(splitPoints[0].style);
+    }
+    return;
+  }
+  try {
+    const splitNodes = textNode.splitText(...offsetsToSplit);
+    let segmentIndex = 0;
+    for (const splitNode of splitNodes) {
+      if ($isTextNode(splitNode) && segmentIndex < segments.length) {
+        const segment = segments[segmentIndex];
+        if (segment.style) {
+          splitNode.setStyle(segment.style);
+        }
+        splitNode.setFormat(format);
+        segmentIndex++;
+      }
+    }
+  } catch {
+    if (splitPoints[0]) {
+      textNode.setStyle(splitPoints[0].style);
+    }
+  }
+}
+const BLOCK_SELECTORS = "p, h1, h2, h3, h4, h5, h6, li, blockquote";
+function collectBlockStyleMap(container) {
+  const map = /* @__PURE__ */ new Map();
+  const blocks = container.querySelectorAll(BLOCK_SELECTORS);
+  blocks.forEach((block) => {
+    const segments = collectTextSegmentsFromElement(block);
+    const fullText = segments.map((s2) => s2.text).join("").trim();
+    if (fullText && segments.some((s2) => s2.style)) {
+      const normalizedText = fullText.replace(/\s+/g, " ").toLowerCase();
+      map.set(normalizedText, segments);
+    }
+  });
+  return map;
+}
+function applyStylesToBlockNodes(lexicalNodes, blockStyleMap) {
+  for (const node of lexicalNodes) {
+    if ($isElementNode(node)) {
+      const nodeType = node.getType();
+      const isBlockElement = [
+        "paragraph",
+        "heading",
+        "listitem",
+        "quote"
+      ].includes(nodeType);
+      if (isBlockElement) {
+        const nodeText = node.getTextContent().trim();
+        if (nodeText) {
+          const normalizedNodeText = nodeText.replace(/\s+/g, " ").toLowerCase();
+          const segments = blockStyleMap.get(normalizedNodeText);
+          if (segments && segments.length > 0) {
+            const textChildren = node.getChildren().filter($isTextNode);
+            if (textChildren.length === 1) {
+              splitAndStyleTextNode(textChildren[0], segments);
+            } else if (textChildren.length > 0) {
+              for (let i2 = 0; i2 < textChildren.length && i2 < segments.length; i2++) {
+                const textNode = textChildren[i2];
+                const segment = segments[i2];
+                if (segment.style) {
+                  textNode.setStyle(segment.style);
+                }
+              }
+            }
+          }
+        }
+      } else {
+        applyStylesToBlockNodes(node.getChildren(), blockStyleMap);
+      }
+    }
+  }
+}
 const InitialContentPlugin = ({
   initialContent
 }) => {
@@ -37141,7 +38026,9 @@ const InitialContentPlugin = ({
     editor.update(() => {
       const parser = new DOMParser();
       const dom = parser.parseFromString(processedHtml, "text/html");
+      const blockStyleMap = collectBlockStyleMap(dom.body);
       const nodes = $generateNodesFromDOM(editor, dom);
+      applyStylesToBlockNodes(nodes, blockStyleMap);
       const root2 = $getRoot();
       root2.clear();
       root2.append(...nodes);
@@ -37424,7 +38311,10 @@ const ConfigurableEditor = ({
         /* @__PURE__ */ jsx(AIChatPlugin, { apiKey }),
         /* @__PURE__ */ jsx(TextEnhancePlugin, { apiKey }),
         /* @__PURE__ */ jsx(HtmlSyncPlugin, {}),
+        /* @__PURE__ */ jsx(AndroidKeyboardFixPlugin, {}),
         /* @__PURE__ */ jsx(CodeHighlightPlugin, {}),
+        /* @__PURE__ */ jsx(CodeBlockNormalizerPlugin, {}),
+        /* @__PURE__ */ jsx(CodeBlockSelectAllPlugin, {}),
         /* @__PURE__ */ jsx(SlashCommandPlugin, {}),
         /* @__PURE__ */ jsx(CombinedPluginWrapper, {}),
         /* @__PURE__ */ jsx(OnChangeWrapper, { onChange }),
@@ -37655,4 +38545,4 @@ export {
   useHtmlView as u,
   verifyApiKey as v
 };
-//# sourceMappingURL=index-23abcbd9.js.map
+//# sourceMappingURL=index-6360d552.js.map