ct-rich-text-editor 1.3.20 → 1.3.22

package/dist/{index-c4b49ec3.js → index-9a8a49b6.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, KEY_DOWN_COMMAND, COMMAND_PRIORITY_CRITICAL, CAN_UNDO_COMMAND, CAN_REDO_COMMAND, $isElementNode, SELECTION_CHANGE_COMMAND, 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, isHTMLElement as isHTMLElement$1, TextNode, $getRoot, $createTextNode, $getNodeByKey, $isParagraphNode, $isTextNode, FORMAT_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND, KEY_DOWN_COMMAND, COMMAND_PRIORITY_CRITICAL, CAN_UNDO_COMMAND, CAN_REDO_COMMAND, $isElementNode, SELECTION_CHANGE_COMMAND, UNDO_COMMAND, REDO_COMMAND, KEY_SPACE_COMMAND, $isLineBreakNode, $createRangeSelection, $setSelection, COMMAND_PRIORITY_HIGH, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND, KEY_ENTER_COMMAND, $createNodeSelection, $isNodeSelection, getDOMSelection, CLICK_COMMAND, PASTE_COMMAND, ParagraphNode, $createLineBreakNode, isDOMNode } from "lexical";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default, { createPortal } from "react-dom";
 import { $isCodeNode, CodeNode, normalizeCodeLang, getLanguageFriendlyName, CodeHighlightNode, CODE_LANGUAGE_MAP, $createCodeNode, registerCodeHighlighting, $isCodeHighlightNode } from "@lexical/code";
@@ -1471,7 +1471,7 @@ const AiTextTransform = async ({ content, apiKey }) => {
 const AI_ACTION_COMMAND = createCommand(
   "AI_ACTION_COMMAND"
 );
-const ImageView = React__default.lazy(() => import("./index-d1931d92.js"));
+const ImageView = React__default.lazy(() => import("./index-84187412.js"));
 function isGoogleDocCheckboxImg(img) {
   return img.parentElement != null && img.parentElement.tagName === "LI" && img.previousSibling === null && img.getAttribute("aria-roledescription") === "checkbox";
 }
@@ -9178,19 +9178,19 @@ function CopyButton({ editor, getCodeDOMNode }) {
   const removeSuccessIcon = useDebounce$1(() => {
     setCopyCompleted(false);
   }, 1e3);
-  async function handleClick() {
+  async function handleClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
     const codeDOMNode = getCodeDOMNode();
     if (!codeDOMNode) {
       return;
     }
     let content = "";
-    editor.update(() => {
+    editor.read(() => {
       const codeNode = $getNearestNodeFromDOMNode(codeDOMNode);
       if ($isCodeNode(codeNode)) {
         content = codeNode.getTextContent();
       }
-      const selection = $getSelection();
-      $setSelection(selection);
     });
     try {
       await navigator.clipboard.writeText(content);
@@ -9200,7 +9200,16 @@ function CopyButton({ editor, getCodeDOMNode }) {
       console.error("Failed to copy: ", err);
     }
   }
-  return /* @__PURE__ */ jsx("button", { className: "menu-item", onClick: handleClick, "aria-label": "copy", children: isCopyCompleted ? /* @__PURE__ */ jsx("i", { className: "format success" }) : /* @__PURE__ */ jsx("i", { className: "format copy" }) });
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: "menu-item",
+      onClick: handleClick,
+      onMouseDown: (e) => e.preventDefault(),
+      "aria-label": "copy",
+      children: isCopyCompleted ? /* @__PURE__ */ jsx("i", { className: "format success" }) : /* @__PURE__ */ jsx("i", { className: "format copy" })
+    }
+  );
 }
 const index$7 = "";
 const PRETTIER_PARSER_MODULES = {
@@ -9250,13 +9259,15 @@ function getPrettierOptions(lang) {
 function PrettierButton({ lang, editor, getCodeDOMNode }) {
   const [syntaxError, setSyntaxError] = useState$1("");
   const [tipsVisible, setTipsVisible] = useState$1(false);
-  async function handleClick() {
+  async function handleClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
     const codeDOMNode = getCodeDOMNode();
     if (!codeDOMNode) {
       return;
     }
     let content = "";
-    editor.update(() => {
+    editor.read(() => {
       const codeNode = $getNearestNodeFromDOMNode(codeDOMNode);
       if ($isCodeNode(codeNode)) {
         content = codeNode.getTextContent();
@@ -9267,12 +9278,26 @@ function PrettierButton({ lang, editor, getCodeDOMNode }) {
     }
     try {
       const format = await loadPrettierFormat();
-      const options = getPrettierOptions(lang);
-      const prettierParsers = await loadPrettierParserByLang(lang);
+      let options = getPrettierOptions(lang);
+      let prettierParsers = await loadPrettierParserByLang(lang);
       options.plugins = prettierParsers.map(
         (parser) => parser.default || parser
       );
-      const formattedCode = await format(content, options);
+      let formattedCode;
+      try {
+        formattedCode = await format(content, options);
+      } catch (firstError) {
+        if (lang === "js" && firstError instanceof Error && (firstError.message.includes("Unexpected token") || firstError.message.includes("expected"))) {
+          options = getPrettierOptions("typescript");
+          prettierParsers = await loadPrettierParserByLang("typescript");
+          options.plugins = prettierParsers.map(
+            (parser) => parser.default || parser
+          );
+          formattedCode = await format(content, options);
+        } else {
+          throw firstError;
+        }
+      }
       editor.update(() => {
         const codeNode = $getNearestNodeFromDOMNode(codeDOMNode);
         if ($isCodeNode(codeNode)) {
@@ -9281,7 +9306,7 @@ function PrettierButton({ lang, editor, getCodeDOMNode }) {
           setSyntaxError("");
           setTipsVisible(false);
         }
-      });
+      }, { discrete: true, tag: "prettier-format" });
     } catch (error) {
       setError(error);
     }
@@ -9310,6 +9335,7 @@ function PrettierButton({ lang, editor, getCodeDOMNode }) {
       {
         className: "menu-item",
         onClick: handleClick,
+        onMouseDown: (e) => e.preventDefault(),
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         "aria-label": "prettier",
@@ -15337,7 +15363,7 @@ const EmbedComponent = ({ url, displayType, alignment, nodeKey }) => {
     }
   );
 };
-const FileComponent = React$1.lazy(() => import("./index-9505418d.js"));
+const FileComponent = React$1.lazy(() => import("./index-bf836d7a.js"));
 function convertFileElement(domNode) {
   if (domNode instanceof HTMLDivElement) {
     const dataUrl = domNode.getAttribute("data-lexical-file-src");
@@ -20360,10 +20386,10 @@ const PDF_CONFIG = {
 };
 const loadHtml2Pdf = async () => {
   try {
-    const mod = await import("./html2pdf.bundle.min-d830ece3.js").then((n) => n.h);
+    const mod = await import("./html2pdf.bundle.min-83517dc2.js").then((n) => n.h);
     return (mod == null ? void 0 : mod.default) || mod;
   } catch {
-    const mod2 = await import("./html2pdf.bundle-dea9d834.js").then((n) => n.h);
+    const mod2 = await import("./html2pdf.bundle-3699b235.js").then((n) => n.h);
     return (mod2 == null ? void 0 : mod2.default) || mod2;
   }
 };
@@ -26288,6 +26314,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]);
@@ -27455,6 +27490,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(() => {
@@ -27596,6 +27821,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;
@@ -30604,6 +30832,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]);
@@ -32507,6 +32744,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(
             () => {
@@ -32741,7 +33033,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]);
@@ -36693,6 +36988,63 @@ function exportEditorWithInlineStyle(editor) {
     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);
@@ -36739,7 +37091,7 @@ function exportEditorWithInlineStyle(editor) {
   editor.getEditorState().read(() => {
     htmlString = $generateHtmlFromNodes(editor, null);
   });
-  return processHtmlForExport(htmlString, tableStyleMap, bgColor, textColor);
+  return processHtmlForExport(htmlString, tableStyleMap, bgColor, textColor, codeBlockStyles);
 }
 function normalizeColorForComparison(color) {
   if (!color)
@@ -36789,7 +37141,7 @@ function detectTableColorsFromVariables(table) {
   }
   return null;
 }
-function processHtmlForExport(html, tableStyleMap, bgColor, textColor) {
+function processHtmlForExport(html, tableStyleMap, bgColor, textColor, codeBlockStyles) {
   const parser = new DOMParser();
   const doc = parser.parseFromString(html, "text/html");
   const tables = doc.querySelectorAll("table");
@@ -36839,7 +37191,9 @@ function processHtmlForExport(html, tableStyleMap, bgColor, textColor) {
     });
   });
   cleanupHeaderCellStructure(doc.body);
-  applyGenericSafeStyles(doc.body);
+  applyCodeSyntaxHighlighting(doc.body, codeBlockStyles);
+  processCodeBlocks(doc.body, codeBlockStyles);
+  applyGenericSafeStyles(doc.body, codeBlockStyles);
   cleanupClasses(doc.body);
   const wrapper = doc.createElement("div");
   wrapper.style.backgroundColor = bgColor;
@@ -36871,7 +37225,7 @@ function cleanupHeaderCellStructure(container) {
     });
   });
 }
-function applyGenericSafeStyles(container) {
+function applyGenericSafeStyles(container, codeBlockStyles) {
   const addStyle = (selector, styles) => {
     container.querySelectorAll(selector).forEach((el) => {
       el.style.cssText += "; " + styles;
@@ -36904,7 +37258,7 @@ function applyGenericSafeStyles(container) {
   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("p", "margin: 0;");
   addStyle("th p, td p", "margin: 0; padding: 0;");
   addStyle(
     "table",
@@ -36953,13 +37307,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",
@@ -36969,6 +37322,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__",
@@ -37240,6 +37695,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();
@@ -37840,7 +38337,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 }),
@@ -38071,4 +38571,4 @@ export {
   useHtmlView as u,
   verifyApiKey as v
 };
-//# sourceMappingURL=index-c4b49ec3.js.map
+//# sourceMappingURL=index-9a8a49b6.js.map