fictoan-react 1.9.1-alpha.25 → 1.9.3

package/dist/components/CodeBlock/CodeBlock.js

@@ -1,2347 +1,214 @@
 "use client";
 "use client;";
-import React$1, { useState } from "react";
-import { c as commonjsGlobal, g as getDefaultExportFromCjs, P as Prism } from "../../prism-3zG3kdoy.js";
-import { Element as Element$1 } from "../Element/Element.js";
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import { Element } from "../Element/Element.js";
 import { Button } from "../Button/Button.js";
 import { Badge } from "../Badge/Badge.js";
-var lib$3 = {};
-var htmlToDom = {};
-var domparser$1 = {};
-Object.defineProperty(domparser$1, "__esModule", { value: true });
-domparser$1.default = domparser;
-var HTML = "html";
-var HEAD = "head";
-var BODY = "body";
-var FIRST_TAG_REGEX = /<([a-zA-Z]+[0-9]?)/;
-var HEAD_TAG_REGEX = /<head[^]*>/i;
-var BODY_TAG_REGEX = /<body[^]*>/i;
-var parseFromDocument = function(html, tagName) {
-  throw new Error("This browser does not support `document.implementation.createHTMLDocument`");
-};
-var parseFromString = function(html, tagName) {
-  throw new Error("This browser does not support `DOMParser.prototype.parseFromString`");
-};
-var DOMParser = typeof window === "object" && window.DOMParser;
-if (typeof DOMParser === "function") {
-  var domParser_1 = new DOMParser();
-  var mimeType_1 = "text/html";
-  parseFromString = function(html, tagName) {
-    if (tagName) {
-      html = "<".concat(tagName, ">").concat(html, "</").concat(tagName, ">");
-    }
-    return domParser_1.parseFromString(html, mimeType_1);
-  };
-  parseFromDocument = parseFromString;
-}
-if (typeof document === "object" && document.implementation) {
-  var htmlDocument_1 = document.implementation.createHTMLDocument();
-  parseFromDocument = function(html, tagName) {
-    if (tagName) {
-      var element = htmlDocument_1.documentElement.querySelector(tagName);
-      if (element) {
-        element.innerHTML = html;
-      }
-      return htmlDocument_1;
-    }
-    htmlDocument_1.documentElement.innerHTML = html;
-    return htmlDocument_1;
-  };
-}
-var template = typeof document === "object" && document.createElement("template");
-var parseFromTemplate;
-if (template && template.content) {
-  parseFromTemplate = function(html) {
-    template.innerHTML = html;
-    return template.content.childNodes;
-  };
-}
-function domparser(html) {
-  var _a, _b;
-  var match = html.match(FIRST_TAG_REGEX);
-  var firstTagName = match && match[1] ? match[1].toLowerCase() : "";
-  switch (firstTagName) {
-    case HTML: {
-      var doc = parseFromString(html);
-      if (!HEAD_TAG_REGEX.test(html)) {
-        var element = doc.querySelector(HEAD);
-        (_a = element === null || element === void 0 ? void 0 : element.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(element);
-      }
-      if (!BODY_TAG_REGEX.test(html)) {
-        var element = doc.querySelector(BODY);
-        (_b = element === null || element === void 0 ? void 0 : element.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(element);
-      }
-      return doc.querySelectorAll(HTML);
-    }
-    case HEAD:
-    case BODY: {
-      var elements = parseFromDocument(html).querySelectorAll(firstTagName);
-      if (BODY_TAG_REGEX.test(html) && HEAD_TAG_REGEX.test(html)) {
-        return elements[0].parentNode.childNodes;
-      }
-      return elements;
-    }
-    default: {
-      if (parseFromTemplate) {
-        return parseFromTemplate(html);
-      }
-      var element = parseFromDocument(html, BODY).querySelector(BODY);
-      return element.childNodes;
-    }
-  }
-}
-var utilities$2 = {};
-var lib$2 = {};
-var lib$1 = {};
-(function(exports) {
-  Object.defineProperty(exports, "__esModule", { value: true });
-  exports.Doctype = exports.CDATA = exports.Tag = exports.Style = exports.Script = exports.Comment = exports.Directive = exports.Text = exports.Root = exports.isTag = exports.ElementType = void 0;
-  var ElementType;
-  (function(ElementType2) {
-    ElementType2["Root"] = "root";
-    ElementType2["Text"] = "text";
-    ElementType2["Directive"] = "directive";
-    ElementType2["Comment"] = "comment";
-    ElementType2["Script"] = "script";
-    ElementType2["Style"] = "style";
-    ElementType2["Tag"] = "tag";
-    ElementType2["CDATA"] = "cdata";
-    ElementType2["Doctype"] = "doctype";
-  })(ElementType = exports.ElementType || (exports.ElementType = {}));
-  function isTag2(elem) {
-    return elem.type === ElementType.Tag || elem.type === ElementType.Script || elem.type === ElementType.Style;
-  }
-  exports.isTag = isTag2;
-  exports.Root = ElementType.Root;
-  exports.Text = ElementType.Text;
-  exports.Directive = ElementType.Directive;
-  exports.Comment = ElementType.Comment;
-  exports.Script = ElementType.Script;
-  exports.Style = ElementType.Style;
-  exports.Tag = ElementType.Tag;
-  exports.CDATA = ElementType.CDATA;
-  exports.Doctype = ElementType.Doctype;
-})(lib$1);
-var node = {};
-var __extends = commonjsGlobal && commonjsGlobal.__extends || /* @__PURE__ */ function() {
-  var extendStatics = function(d, b) {
-    extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d2, b2) {
-      d2.__proto__ = b2;
-    } || function(d2, b2) {
-      for (var p in b2) if (Object.prototype.hasOwnProperty.call(b2, p)) d2[p] = b2[p];
-    };
-    return extendStatics(d, b);
-  };
-  return function(d, b) {
-    if (typeof b !== "function" && b !== null)
-      throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-    extendStatics(d, b);
-    function __() {
-      this.constructor = d;
-    }
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-  };
-}();
-var __assign = commonjsGlobal && commonjsGlobal.__assign || function() {
-  __assign = Object.assign || function(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-        t[p] = s[p];
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
-};
-Object.defineProperty(node, "__esModule", { value: true });
-node.cloneNode = node.hasChildren = node.isDocument = node.isDirective = node.isComment = node.isText = node.isCDATA = node.isTag = node.Element = node.Document = node.CDATA = node.NodeWithChildren = node.ProcessingInstruction = node.Comment = node.Text = node.DataNode = node.Node = void 0;
-var domelementtype_1 = lib$1;
-var Node = (
-  /** @class */
-  function() {
-    function Node2() {
-      this.parent = null;
-      this.prev = null;
-      this.next = null;
-      this.startIndex = null;
-      this.endIndex = null;
-    }
-    Object.defineProperty(Node2.prototype, "parentNode", {
-      // Read-write aliases for properties
-      /**
-       * Same as {@link parent}.
-       * [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
-       */
-      get: function() {
-        return this.parent;
-      },
-      set: function(parent) {
-        this.parent = parent;
-      },
-      enumerable: false,
-      configurable: true
-    });
-    Object.defineProperty(Node2.prototype, "previousSibling", {
-      /**
-       * Same as {@link prev}.
-       * [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
-       */
-      get: function() {
-        return this.prev;
-      },
-      set: function(prev) {
-        this.prev = prev;
-      },
-      enumerable: false,
-      configurable: true
-    });
-    Object.defineProperty(Node2.prototype, "nextSibling", {
-      /**
-       * Same as {@link next}.
-       * [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
-       */
-      get: function() {
-        return this.next;
-      },
-      set: function(next) {
-        this.next = next;
-      },
-      enumerable: false,
-      configurable: true
-    });
-    Node2.prototype.cloneNode = function(recursive) {
-      if (recursive === void 0) {
-        recursive = false;
+const CodeBlock = React.forwardRef(({
+  children,
+  source,
+  language = "json",
+  showCopyButton,
+  showLineNumbers,
+  description,
+  withSyntaxHighlighting = false,
+  contentEditable = false,
+  onChange,
+  ...props
+}, ref) => {
+  const [isCodeCopied, setIsCodeCopied] = useState(false);
+  const [prismModule, setPrismModule] = useState(null);
+  const [isLoading, setIsLoading] = useState(withSyntaxHighlighting);
+  const [codeElement, setCodeElement] = useState(null);
+  const preRef = useRef(null);
+  let initialCode = typeof children === "string" ? children : React.Children.toArray(children).join("");
+  if (!children) {
+    initialCode = typeof source === "object" ? JSON.stringify(source, null, 2) : source ?? "";
+  }
+  useEffect(() => {
+    if (!withSyntaxHighlighting) return;
+    const loadPrismWithLanguage = async () => {
+      setIsLoading(true);
+      try {
+        const [prism] = await Promise.all([
+          import("prismjs"),
+          language !== "plain" ? import(`prismjs/components/prism-${language}`) : Promise.resolve()
+        ]);
+        setPrismModule(prism.default);
+      } catch (error) {
+        console.warn(`Failed to load syntax highlighting for ${language}:`, error);
+      } finally {
+        setIsLoading(false);
       }
-      return cloneNode(this, recursive);
     };
-    return Node2;
-  }()
-);
-node.Node = Node;
-var DataNode = (
-  /** @class */
-  function(_super) {
-    __extends(DataNode2, _super);
-    function DataNode2(data) {
-      var _this = _super.call(this) || this;
-      _this.data = data;
-      return _this;
-    }
-    Object.defineProperty(DataNode2.prototype, "nodeValue", {
-      /**
-       * Same as {@link data}.
-       * [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
-       */
-      get: function() {
-        return this.data;
-      },
-      set: function(data) {
-        this.data = data;
-      },
-      enumerable: false,
-      configurable: true
-    });
-    return DataNode2;
-  }(Node)
-);
-node.DataNode = DataNode;
-var Text = (
-  /** @class */
-  function(_super) {
-    __extends(Text2, _super);
-    function Text2() {
-      var _this = _super !== null && _super.apply(this, arguments) || this;
-      _this.type = domelementtype_1.ElementType.Text;
-      return _this;
-    }
-    Object.defineProperty(Text2.prototype, "nodeType", {
-      get: function() {
-        return 3;
-      },
-      enumerable: false,
-      configurable: true
-    });
-    return Text2;
-  }(DataNode)
-);
-node.Text = Text;
-var Comment = (
-  /** @class */
-  function(_super) {
-    __extends(Comment2, _super);
-    function Comment2() {
-      var _this = _super !== null && _super.apply(this, arguments) || this;
-      _this.type = domelementtype_1.ElementType.Comment;
-      return _this;
-    }
-    Object.defineProperty(Comment2.prototype, "nodeType", {
-      get: function() {
-        return 8;
-      },
-      enumerable: false,
-      configurable: true
-    });
-    return Comment2;
-  }(DataNode)
-);
-node.Comment = Comment;
-var ProcessingInstruction = (
-  /** @class */
-  function(_super) {
-    __extends(ProcessingInstruction2, _super);
-    function ProcessingInstruction2(name, data) {
-      var _this = _super.call(this, data) || this;
-      _this.name = name;
-      _this.type = domelementtype_1.ElementType.Directive;
-      return _this;
-    }
-    Object.defineProperty(ProcessingInstruction2.prototype, "nodeType", {
-      get: function() {
-        return 1;
-      },
-      enumerable: false,
-      configurable: true
-    });
-    return ProcessingInstruction2;
-  }(DataNode)
-);
-node.ProcessingInstruction = ProcessingInstruction;
-var NodeWithChildren = (
-  /** @class */
-  function(_super) {
-    __extends(NodeWithChildren2, _super);
-    function NodeWithChildren2(children) {
-      var _this = _super.call(this) || this;
-      _this.children = children;
-      return _this;
-    }
-    Object.defineProperty(NodeWithChildren2.prototype, "firstChild", {
-      // Aliases
-      /** First child of the node. */
-      get: function() {
-        var _a;
-        return (_a = this.children[0]) !== null && _a !== void 0 ? _a : null;
-      },
-      enumerable: false,
-      configurable: true
-    });
-    Object.defineProperty(NodeWithChildren2.prototype, "lastChild", {
-      /** Last child of the node. */
-      get: function() {
-        return this.children.length > 0 ? this.children[this.children.length - 1] : null;
-      },
-      enumerable: false,
-      configurable: true
-    });
-    Object.defineProperty(NodeWithChildren2.prototype, "childNodes", {
-      /**
-       * Same as {@link children}.
-       * [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
-       */
-      get: function() {
-        return this.children;
-      },
-      set: function(children) {
-        this.children = children;
-      },
-      enumerable: false,
-      configurable: true
-    });
-    return NodeWithChildren2;
-  }(Node)
-);
-node.NodeWithChildren = NodeWithChildren;
-var CDATA = (
-  /** @class */
-  function(_super) {
-    __extends(CDATA2, _super);
-    function CDATA2() {
-      var _this = _super !== null && _super.apply(this, arguments) || this;
-      _this.type = domelementtype_1.ElementType.CDATA;
-      return _this;
-    }
-    Object.defineProperty(CDATA2.prototype, "nodeType", {
-      get: function() {
-        return 4;
-      },
-      enumerable: false,
-      configurable: true
-    });
-    return CDATA2;
-  }(NodeWithChildren)
-);
-node.CDATA = CDATA;
-var Document = (
-  /** @class */
-  function(_super) {
-    __extends(Document2, _super);
-    function Document2() {
-      var _this = _super !== null && _super.apply(this, arguments) || this;
-      _this.type = domelementtype_1.ElementType.Root;
-      return _this;
-    }
-    Object.defineProperty(Document2.prototype, "nodeType", {
-      get: function() {
-        return 9;
-      },
-      enumerable: false,
-      configurable: true
-    });
-    return Document2;
-  }(NodeWithChildren)
-);
-node.Document = Document;
-var Element = (
-  /** @class */
-  function(_super) {
-    __extends(Element2, _super);
-    function Element2(name, attribs, children, type) {
-      if (children === void 0) {
-        children = [];
-      }
-      if (type === void 0) {
-        type = name === "script" ? domelementtype_1.ElementType.Script : name === "style" ? domelementtype_1.ElementType.Style : domelementtype_1.ElementType.Tag;
-      }
-      var _this = _super.call(this, children) || this;
-      _this.name = name;
-      _this.attribs = attribs;
-      _this.type = type;
-      return _this;
-    }
-    Object.defineProperty(Element2.prototype, "nodeType", {
-      get: function() {
-        return 1;
-      },
-      enumerable: false,
-      configurable: true
-    });
-    Object.defineProperty(Element2.prototype, "tagName", {
-      // DOM Level 1 aliases
-      /**
-       * Same as {@link name}.
-       * [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
-       */
-      get: function() {
-        return this.name;
-      },
-      set: function(name) {
-        this.name = name;
-      },
-      enumerable: false,
-      configurable: true
-    });
-    Object.defineProperty(Element2.prototype, "attributes", {
-      get: function() {
-        var _this = this;
-        return Object.keys(this.attribs).map(function(name) {
-          var _a, _b;
-          return {
-            name,
-            value: _this.attribs[name],
-            namespace: (_a = _this["x-attribsNamespace"]) === null || _a === void 0 ? void 0 : _a[name],
-            prefix: (_b = _this["x-attribsPrefix"]) === null || _b === void 0 ? void 0 : _b[name]
-          };
-        });
-      },
-      enumerable: false,
-      configurable: true
-    });
-    return Element2;
-  }(NodeWithChildren)
-);
-node.Element = Element;
-function isTag(node2) {
-  return (0, domelementtype_1.isTag)(node2);
-}
-node.isTag = isTag;
-function isCDATA(node2) {
-  return node2.type === domelementtype_1.ElementType.CDATA;
-}
-node.isCDATA = isCDATA;
-function isText(node2) {
-  return node2.type === domelementtype_1.ElementType.Text;
-}
-node.isText = isText;
-function isComment(node2) {
-  return node2.type === domelementtype_1.ElementType.Comment;
-}
-node.isComment = isComment;
-function isDirective(node2) {
-  return node2.type === domelementtype_1.ElementType.Directive;
-}
-node.isDirective = isDirective;
-function isDocument(node2) {
-  return node2.type === domelementtype_1.ElementType.Root;
-}
-node.isDocument = isDocument;
-function hasChildren(node2) {
-  return Object.prototype.hasOwnProperty.call(node2, "children");
-}
-node.hasChildren = hasChildren;
-function cloneNode(node2, recursive) {
-  if (recursive === void 0) {
-    recursive = false;
-  }
-  var result;
-  if (isText(node2)) {
-    result = new Text(node2.data);
-  } else if (isComment(node2)) {
-    result = new Comment(node2.data);
-  } else if (isTag(node2)) {
-    var children = recursive ? cloneChildren(node2.children) : [];
-    var clone_1 = new Element(node2.name, __assign({}, node2.attribs), children);
-    children.forEach(function(child) {
-      return child.parent = clone_1;
-    });
-    if (node2.namespace != null) {
-      clone_1.namespace = node2.namespace;
-    }
-    if (node2["x-attribsNamespace"]) {
-      clone_1["x-attribsNamespace"] = __assign({}, node2["x-attribsNamespace"]);
-    }
-    if (node2["x-attribsPrefix"]) {
-      clone_1["x-attribsPrefix"] = __assign({}, node2["x-attribsPrefix"]);
-    }
-    result = clone_1;
-  } else if (isCDATA(node2)) {
-    var children = recursive ? cloneChildren(node2.children) : [];
-    var clone_2 = new CDATA(children);
-    children.forEach(function(child) {
-      return child.parent = clone_2;
-    });
-    result = clone_2;
-  } else if (isDocument(node2)) {
-    var children = recursive ? cloneChildren(node2.children) : [];
-    var clone_3 = new Document(children);
-    children.forEach(function(child) {
-      return child.parent = clone_3;
-    });
-    if (node2["x-mode"]) {
-      clone_3["x-mode"] = node2["x-mode"];
-    }
-    result = clone_3;
-  } else if (isDirective(node2)) {
-    var instruction = new ProcessingInstruction(node2.name, node2.data);
-    if (node2["x-name"] != null) {
-      instruction["x-name"] = node2["x-name"];
-      instruction["x-publicId"] = node2["x-publicId"];
-      instruction["x-systemId"] = node2["x-systemId"];
-    }
-    result = instruction;
-  } else {
-    throw new Error("Not implemented yet: ".concat(node2.type));
-  }
-  result.startIndex = node2.startIndex;
-  result.endIndex = node2.endIndex;
-  if (node2.sourceCodeLocation != null) {
-    result.sourceCodeLocation = node2.sourceCodeLocation;
-  }
-  return result;
-}
-node.cloneNode = cloneNode;
-function cloneChildren(childs) {
-  var children = childs.map(function(child) {
-    return cloneNode(child, true);
-  });
-  for (var i = 1; i < children.length; i++) {
-    children[i].prev = children[i - 1];
-    children[i - 1].next = children[i];
-  }
-  return children;
-}
-(function(exports) {
-  var __createBinding = commonjsGlobal && commonjsGlobal.__createBinding || (Object.create ? function(o, m, k, k2) {
-    if (k2 === void 0) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() {
-        return m[k];
-      } };
-    }
-    Object.defineProperty(o, k2, desc);
-  } : function(o, m, k, k2) {
-    if (k2 === void 0) k2 = k;
-    o[k2] = m[k];
-  });
-  var __exportStar = commonjsGlobal && commonjsGlobal.__exportStar || function(m, exports2) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports2, p)) __createBinding(exports2, m, p);
-  };
-  Object.defineProperty(exports, "__esModule", { value: true });
-  exports.DomHandler = void 0;
-  var domelementtype_12 = lib$1;
-  var node_js_1 = node;
-  __exportStar(node, exports);
-  var defaultOpts = {
-    withStartIndices: false,
-    withEndIndices: false,
-    xmlMode: false
-  };
-  var DomHandler = (
-    /** @class */
-    function() {
-      function DomHandler2(callback, options, elementCB) {
-        this.dom = [];
-        this.root = new node_js_1.Document(this.dom);
-        this.done = false;
-        this.tagStack = [this.root];
-        this.lastNode = null;
-        this.parser = null;
-        if (typeof options === "function") {
-          elementCB = options;
-          options = defaultOpts;
-        }
-        if (typeof callback === "object") {
-          options = callback;
-          callback = void 0;
-        }
-        this.callback = callback !== null && callback !== void 0 ? callback : null;
-        this.options = options !== null && options !== void 0 ? options : defaultOpts;
-        this.elementCB = elementCB !== null && elementCB !== void 0 ? elementCB : null;
-      }
-      DomHandler2.prototype.onparserinit = function(parser) {
-        this.parser = parser;
-      };
-      DomHandler2.prototype.onreset = function() {
-        this.dom = [];
-        this.root = new node_js_1.Document(this.dom);
-        this.done = false;
-        this.tagStack = [this.root];
-        this.lastNode = null;
-        this.parser = null;
-      };
-      DomHandler2.prototype.onend = function() {
-        if (this.done)
-          return;
-        this.done = true;
-        this.parser = null;
-        this.handleCallback(null);
-      };
-      DomHandler2.prototype.onerror = function(error) {
-        this.handleCallback(error);
-      };
-      DomHandler2.prototype.onclosetag = function() {
-        this.lastNode = null;
-        var elem = this.tagStack.pop();
-        if (this.options.withEndIndices) {
-          elem.endIndex = this.parser.endIndex;
-        }
-        if (this.elementCB)
-          this.elementCB(elem);
-      };
-      DomHandler2.prototype.onopentag = function(name, attribs) {
-        var type = this.options.xmlMode ? domelementtype_12.ElementType.Tag : void 0;
-        var element = new node_js_1.Element(name, attribs, void 0, type);
-        this.addNode(element);
-        this.tagStack.push(element);
-      };
-      DomHandler2.prototype.ontext = function(data) {
-        var lastNode = this.lastNode;
-        if (lastNode && lastNode.type === domelementtype_12.ElementType.Text) {
-          lastNode.data += data;
-          if (this.options.withEndIndices) {
-            lastNode.endIndex = this.parser.endIndex;
+    loadPrismWithLanguage();
+  }, [withSyntaxHighlighting, language]);
+  const getCursorPosition = useCallback(() => {
+    var _a;
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) return null;
+    const range = selection.getRangeAt(0);
+    const currentNode = range.startContainer;
+    const cursorOffset = range.startOffset;
+    let absoluteOffset = cursorOffset;
+    if (currentNode && currentNode !== codeElement && codeElement) {
+      const treeWalker = document.createTreeWalker(
+        codeElement,
+        NodeFilter.SHOW_TEXT,
+        null
+      );
+      let node;
+      while (node = treeWalker.nextNode()) {
+        if (node === currentNode) break;
+        absoluteOffset += ((_a = node.textContent) == null ? void 0 : _a.length) || 0;
+      }
+    }
+    return absoluteOffset;
+  }, [codeElement]);
+  const highlightCode = useCallback((content) => {
+    var _a;
+    if (!codeElement || !withSyntaxHighlighting || !prismModule) return;
+    try {
+      const cursorPosition = contentEditable ? getCursorPosition() : null;
+      const highlighted = prismModule.highlight(
+        content,
+        prismModule.languages[language] || prismModule.languages.plain,
+        language
+      );
+      codeElement.innerHTML = highlighted;
+      if (contentEditable && cursorPosition !== null) {
+        const selection = window.getSelection();
+        const newRange = document.createRange();
+        const treeWalker = document.createTreeWalker(
+          codeElement,
+          NodeFilter.SHOW_TEXT,
+          null
+        );
+        let currentOffset = 0;
+        let node;
+        while (node = treeWalker.nextNode()) {
+          const length = ((_a = node.textContent) == null ? void 0 : _a.length) || 0;
+          if (currentOffset + length >= cursorPosition) {
+            newRange.setStart(node, cursorPosition - currentOffset);
+            newRange.setEnd(node, cursorPosition - currentOffset);
+            selection == null ? void 0 : selection.removeAllRanges();
+            selection == null ? void 0 : selection.addRange(newRange);
+            break;
           }
-        } else {
-          var node2 = new node_js_1.Text(data);
-          this.addNode(node2);
-          this.lastNode = node2;
+          currentOffset += length;
         }
-      };
-      DomHandler2.prototype.oncomment = function(data) {
-        if (this.lastNode && this.lastNode.type === domelementtype_12.ElementType.Comment) {
-          this.lastNode.data += data;
-          return;
-        }
-        var node2 = new node_js_1.Comment(data);
-        this.addNode(node2);
-        this.lastNode = node2;
-      };
-      DomHandler2.prototype.oncommentend = function() {
-        this.lastNode = null;
-      };
-      DomHandler2.prototype.oncdatastart = function() {
-        var text = new node_js_1.Text("");
-        var node2 = new node_js_1.CDATA([text]);
-        this.addNode(node2);
-        text.parent = node2;
-        this.lastNode = text;
-      };
-      DomHandler2.prototype.oncdataend = function() {
-        this.lastNode = null;
-      };
-      DomHandler2.prototype.onprocessinginstruction = function(name, data) {
-        var node2 = new node_js_1.ProcessingInstruction(name, data);
-        this.addNode(node2);
-      };
-      DomHandler2.prototype.handleCallback = function(error) {
-        if (typeof this.callback === "function") {
-          this.callback(error, this.dom);
-        } else if (error) {
-          throw error;
-        }
-      };
-      DomHandler2.prototype.addNode = function(node2) {
-        var parent = this.tagStack[this.tagStack.length - 1];
-        var previousSibling = parent.children[parent.children.length - 1];
-        if (this.options.withStartIndices) {
-          node2.startIndex = this.parser.startIndex;
-        }
-        if (this.options.withEndIndices) {
-          node2.endIndex = this.parser.endIndex;
-        }
-        parent.children.push(node2);
-        if (previousSibling) {
-          node2.prev = previousSibling;
-          previousSibling.next = node2;
-        }
-        node2.parent = parent;
-        this.lastNode = null;
-      };
-      return DomHandler2;
-    }()
-  );
-  exports.DomHandler = DomHandler;
-  exports.default = DomHandler;
-})(lib$2);
-var constants = {};
-(function(exports) {
-  Object.defineProperty(exports, "__esModule", { value: true });
-  exports.CASE_SENSITIVE_TAG_NAMES_MAP = exports.CASE_SENSITIVE_TAG_NAMES = void 0;
-  exports.CASE_SENSITIVE_TAG_NAMES = [
-    "animateMotion",
-    "animateTransform",
-    "clipPath",
-    "feBlend",
-    "feColorMatrix",
-    "feComponentTransfer",
-    "feComposite",
-    "feConvolveMatrix",
-    "feDiffuseLighting",
-    "feDisplacementMap",
-    "feDropShadow",
-    "feFlood",
-    "feFuncA",
-    "feFuncB",
-    "feFuncG",
-    "feFuncR",
-    "feGaussianBlur",
-    "feImage",
-    "feMerge",
-    "feMergeNode",
-    "feMorphology",
-    "feOffset",
-    "fePointLight",
-    "feSpecularLighting",
-    "feSpotLight",
-    "feTile",
-    "feTurbulence",
-    "foreignObject",
-    "linearGradient",
-    "radialGradient",
-    "textPath"
-  ];
-  exports.CASE_SENSITIVE_TAG_NAMES_MAP = exports.CASE_SENSITIVE_TAG_NAMES.reduce(function(accumulator, tagName) {
-    accumulator[tagName.toLowerCase()] = tagName;
-    return accumulator;
-  }, {});
-})(constants);
-Object.defineProperty(utilities$2, "__esModule", { value: true });
-utilities$2.formatAttributes = formatAttributes;
-utilities$2.formatDOM = formatDOM;
-var domhandler_1 = lib$2;
-var constants_1 = constants;
-function getCaseSensitiveTagName(tagName) {
-  return constants_1.CASE_SENSITIVE_TAG_NAMES_MAP[tagName];
-}
-function formatAttributes(attributes) {
-  var map = {};
-  var index = 0;
-  var attributesLength = attributes.length;
-  for (; index < attributesLength; index++) {
-    var attribute = attributes[index];
-    map[attribute.name] = attribute.value;
-  }
-  return map;
-}
-function formatTagName(tagName) {
-  tagName = tagName.toLowerCase();
-  var caseSensitiveTagName = getCaseSensitiveTagName(tagName);
-  if (caseSensitiveTagName) {
-    return caseSensitiveTagName;
-  }
-  return tagName;
-}
-function formatDOM(nodes, parent, directive) {
-  if (parent === void 0) {
-    parent = null;
-  }
-  var domNodes = [];
-  var current;
-  var index = 0;
-  var nodesLength = nodes.length;
-  for (; index < nodesLength; index++) {
-    var node2 = nodes[index];
-    switch (node2.nodeType) {
-      case 1: {
-        var tagName = formatTagName(node2.nodeName);
-        current = new domhandler_1.Element(tagName, formatAttributes(node2.attributes));
-        current.children = formatDOM(
-          // template children are on content
-          tagName === "template" ? node2.content.childNodes : node2.childNodes,
-          current
-        );
-        break;
       }
-      case 3:
-        current = new domhandler_1.Text(node2.nodeValue);
-        break;
-      case 8:
-        current = new domhandler_1.Comment(node2.nodeValue);
-        break;
-      default:
-        continue;
-    }
-    var prev = domNodes[index - 1] || null;
-    if (prev) {
-      prev.next = current;
-    }
-    current.parent = parent;
-    current.prev = prev;
-    current.next = null;
-    domNodes.push(current);
-  }
-  if (directive) {
-    current = new domhandler_1.ProcessingInstruction(directive.substring(0, directive.indexOf(" ")).toLowerCase(), directive);
-    current.next = domNodes[0] || null;
-    current.parent = parent;
-    domNodes.unshift(current);
-    if (domNodes[1]) {
-      domNodes[1].prev = domNodes[0];
-    }
-  }
-  return domNodes;
-}
-var __importDefault$3 = commonjsGlobal && commonjsGlobal.__importDefault || function(mod) {
-  return mod && mod.__esModule ? mod : { "default": mod };
-};
-Object.defineProperty(htmlToDom, "__esModule", { value: true });
-htmlToDom.default = HTMLDOMParser;
-var domparser_1 = __importDefault$3(domparser$1);
-var utilities_1$3 = utilities$2;
-var DIRECTIVE_REGEX = /<(![a-zA-Z\s]+)>/;
-function HTMLDOMParser(html) {
-  if (typeof html !== "string") {
-    throw new TypeError("First argument must be a string");
-  }
-  if (!html) {
-    return [];
-  }
-  var match = html.match(DIRECTIVE_REGEX);
-  var directive = match ? match[1] : void 0;
-  return (0, utilities_1$3.formatDOM)((0, domparser_1.default)(html), null, directive);
-}
-var attributesToProps$1 = {};
-var lib = {};
-var possibleStandardNamesOptimized$1 = {};
-var SAME$1 = 0;
-possibleStandardNamesOptimized$1.SAME = SAME$1;
-var CAMELCASE$1 = 1;
-possibleStandardNamesOptimized$1.CAMELCASE = CAMELCASE$1;
-possibleStandardNamesOptimized$1.possibleStandardNames = {
-  accept: 0,
-  acceptCharset: 1,
-  "accept-charset": "acceptCharset",
-  accessKey: 1,
-  action: 0,
-  allowFullScreen: 1,
-  alt: 0,
-  as: 0,
-  async: 0,
-  autoCapitalize: 1,
-  autoComplete: 1,
-  autoCorrect: 1,
-  autoFocus: 1,
-  autoPlay: 1,
-  autoSave: 1,
-  capture: 0,
-  cellPadding: 1,
-  cellSpacing: 1,
-  challenge: 0,
-  charSet: 1,
-  checked: 0,
-  children: 0,
-  cite: 0,
-  class: "className",
-  classID: 1,
-  className: 1,
-  cols: 0,
-  colSpan: 1,
-  content: 0,
-  contentEditable: 1,
-  contextMenu: 1,
-  controls: 0,
-  controlsList: 1,
-  coords: 0,
-  crossOrigin: 1,
-  dangerouslySetInnerHTML: 1,
-  data: 0,
-  dateTime: 1,
-  default: 0,
-  defaultChecked: 1,
-  defaultValue: 1,
-  defer: 0,
-  dir: 0,
-  disabled: 0,
-  disablePictureInPicture: 1,
-  disableRemotePlayback: 1,
-  download: 0,
-  draggable: 0,
-  encType: 1,
-  enterKeyHint: 1,
-  for: "htmlFor",
-  form: 0,
-  formMethod: 1,
-  formAction: 1,
-  formEncType: 1,
-  formNoValidate: 1,
-  formTarget: 1,
-  frameBorder: 1,
-  headers: 0,
-  height: 0,
-  hidden: 0,
-  high: 0,
-  href: 0,
-  hrefLang: 1,
-  htmlFor: 1,
-  httpEquiv: 1,
-  "http-equiv": "httpEquiv",
-  icon: 0,
-  id: 0,
-  innerHTML: 1,
-  inputMode: 1,
-  integrity: 0,
-  is: 0,
-  itemID: 1,
-  itemProp: 1,
-  itemRef: 1,
-  itemScope: 1,
-  itemType: 1,
-  keyParams: 1,
-  keyType: 1,
-  kind: 0,
-  label: 0,
-  lang: 0,
-  list: 0,
-  loop: 0,
-  low: 0,
-  manifest: 0,
-  marginWidth: 1,
-  marginHeight: 1,
-  max: 0,
-  maxLength: 1,
-  media: 0,
-  mediaGroup: 1,
-  method: 0,
-  min: 0,
-  minLength: 1,
-  multiple: 0,
-  muted: 0,
-  name: 0,
-  noModule: 1,
-  nonce: 0,
-  noValidate: 1,
-  open: 0,
-  optimum: 0,
-  pattern: 0,
-  placeholder: 0,
-  playsInline: 1,
-  poster: 0,
-  preload: 0,
-  profile: 0,
-  radioGroup: 1,
-  readOnly: 1,
-  referrerPolicy: 1,
-  rel: 0,
-  required: 0,
-  reversed: 0,
-  role: 0,
-  rows: 0,
-  rowSpan: 1,
-  sandbox: 0,
-  scope: 0,
-  scoped: 0,
-  scrolling: 0,
-  seamless: 0,
-  selected: 0,
-  shape: 0,
-  size: 0,
-  sizes: 0,
-  span: 0,
-  spellCheck: 1,
-  src: 0,
-  srcDoc: 1,
-  srcLang: 1,
-  srcSet: 1,
-  start: 0,
-  step: 0,
-  style: 0,
-  summary: 0,
-  tabIndex: 1,
-  target: 0,
-  title: 0,
-  type: 0,
-  useMap: 1,
-  value: 0,
-  width: 0,
-  wmode: 0,
-  wrap: 0,
-  about: 0,
-  accentHeight: 1,
-  "accent-height": "accentHeight",
-  accumulate: 0,
-  additive: 0,
-  alignmentBaseline: 1,
-  "alignment-baseline": "alignmentBaseline",
-  allowReorder: 1,
-  alphabetic: 0,
-  amplitude: 0,
-  arabicForm: 1,
-  "arabic-form": "arabicForm",
-  ascent: 0,
-  attributeName: 1,
-  attributeType: 1,
-  autoReverse: 1,
-  azimuth: 0,
-  baseFrequency: 1,
-  baselineShift: 1,
-  "baseline-shift": "baselineShift",
-  baseProfile: 1,
-  bbox: 0,
-  begin: 0,
-  bias: 0,
-  by: 0,
-  calcMode: 1,
-  capHeight: 1,
-  "cap-height": "capHeight",
-  clip: 0,
-  clipPath: 1,
-  "clip-path": "clipPath",
-  clipPathUnits: 1,
-  clipRule: 1,
-  "clip-rule": "clipRule",
-  color: 0,
-  colorInterpolation: 1,
-  "color-interpolation": "colorInterpolation",
-  colorInterpolationFilters: 1,
-  "color-interpolation-filters": "colorInterpolationFilters",
-  colorProfile: 1,
-  "color-profile": "colorProfile",
-  colorRendering: 1,
-  "color-rendering": "colorRendering",
-  contentScriptType: 1,
-  contentStyleType: 1,
-  cursor: 0,
-  cx: 0,
-  cy: 0,
-  d: 0,
-  datatype: 0,
-  decelerate: 0,
-  descent: 0,
-  diffuseConstant: 1,
-  direction: 0,
-  display: 0,
-  divisor: 0,
-  dominantBaseline: 1,
-  "dominant-baseline": "dominantBaseline",
-  dur: 0,
-  dx: 0,
-  dy: 0,
-  edgeMode: 1,
-  elevation: 0,
-  enableBackground: 1,
-  "enable-background": "enableBackground",
-  end: 0,
-  exponent: 0,
-  externalResourcesRequired: 1,
-  fill: 0,
-  fillOpacity: 1,
-  "fill-opacity": "fillOpacity",
-  fillRule: 1,
-  "fill-rule": "fillRule",
-  filter: 0,
-  filterRes: 1,
-  filterUnits: 1,
-  floodOpacity: 1,
-  "flood-opacity": "floodOpacity",
-  floodColor: 1,
-  "flood-color": "floodColor",
-  focusable: 0,
-  fontFamily: 1,
-  "font-family": "fontFamily",
-  fontSize: 1,
-  "font-size": "fontSize",
-  fontSizeAdjust: 1,
-  "font-size-adjust": "fontSizeAdjust",
-  fontStretch: 1,
-  "font-stretch": "fontStretch",
-  fontStyle: 1,
-  "font-style": "fontStyle",
-  fontVariant: 1,
-  "font-variant": "fontVariant",
-  fontWeight: 1,
-  "font-weight": "fontWeight",
-  format: 0,
-  from: 0,
-  fx: 0,
-  fy: 0,
-  g1: 0,
-  g2: 0,
-  glyphName: 1,
-  "glyph-name": "glyphName",
-  glyphOrientationHorizontal: 1,
-  "glyph-orientation-horizontal": "glyphOrientationHorizontal",
-  glyphOrientationVertical: 1,
-  "glyph-orientation-vertical": "glyphOrientationVertical",
-  glyphRef: 1,
-  gradientTransform: 1,
-  gradientUnits: 1,
-  hanging: 0,
-  horizAdvX: 1,
-  "horiz-adv-x": "horizAdvX",
-  horizOriginX: 1,
-  "horiz-origin-x": "horizOriginX",
-  ideographic: 0,
-  imageRendering: 1,
-  "image-rendering": "imageRendering",
-  in2: 0,
-  in: 0,
-  inlist: 0,
-  intercept: 0,
-  k1: 0,
-  k2: 0,
-  k3: 0,
-  k4: 0,
-  k: 0,
-  kernelMatrix: 1,
-  kernelUnitLength: 1,
-  kerning: 0,
-  keyPoints: 1,
-  keySplines: 1,
-  keyTimes: 1,
-  lengthAdjust: 1,
-  letterSpacing: 1,
-  "letter-spacing": "letterSpacing",
-  lightingColor: 1,
-  "lighting-color": "lightingColor",
-  limitingConeAngle: 1,
-  local: 0,
-  markerEnd: 1,
-  "marker-end": "markerEnd",
-  markerHeight: 1,
-  markerMid: 1,
-  "marker-mid": "markerMid",
-  markerStart: 1,
-  "marker-start": "markerStart",
-  markerUnits: 1,
-  markerWidth: 1,
-  mask: 0,
-  maskContentUnits: 1,
-  maskUnits: 1,
-  mathematical: 0,
-  mode: 0,
-  numOctaves: 1,
-  offset: 0,
-  opacity: 0,
-  operator: 0,
-  order: 0,
-  orient: 0,
-  orientation: 0,
-  origin: 0,
-  overflow: 0,
-  overlinePosition: 1,
-  "overline-position": "overlinePosition",
-  overlineThickness: 1,
-  "overline-thickness": "overlineThickness",
-  paintOrder: 1,
-  "paint-order": "paintOrder",
-  panose1: 0,
-  "panose-1": "panose1",
-  pathLength: 1,
-  patternContentUnits: 1,
-  patternTransform: 1,
-  patternUnits: 1,
-  pointerEvents: 1,
-  "pointer-events": "pointerEvents",
-  points: 0,
-  pointsAtX: 1,
-  pointsAtY: 1,
-  pointsAtZ: 1,
-  prefix: 0,
-  preserveAlpha: 1,
-  preserveAspectRatio: 1,
-  primitiveUnits: 1,
-  property: 0,
-  r: 0,
-  radius: 0,
-  refX: 1,
-  refY: 1,
-  renderingIntent: 1,
-  "rendering-intent": "renderingIntent",
-  repeatCount: 1,
-  repeatDur: 1,
-  requiredExtensions: 1,
-  requiredFeatures: 1,
-  resource: 0,
-  restart: 0,
-  result: 0,
-  results: 0,
-  rotate: 0,
-  rx: 0,
-  ry: 0,
-  scale: 0,
-  security: 0,
-  seed: 0,
-  shapeRendering: 1,
-  "shape-rendering": "shapeRendering",
-  slope: 0,
-  spacing: 0,
-  specularConstant: 1,
-  specularExponent: 1,
-  speed: 0,
-  spreadMethod: 1,
-  startOffset: 1,
-  stdDeviation: 1,
-  stemh: 0,
-  stemv: 0,
-  stitchTiles: 1,
-  stopColor: 1,
-  "stop-color": "stopColor",
-  stopOpacity: 1,
-  "stop-opacity": "stopOpacity",
-  strikethroughPosition: 1,
-  "strikethrough-position": "strikethroughPosition",
-  strikethroughThickness: 1,
-  "strikethrough-thickness": "strikethroughThickness",
-  string: 0,
-  stroke: 0,
-  strokeDasharray: 1,
-  "stroke-dasharray": "strokeDasharray",
-  strokeDashoffset: 1,
-  "stroke-dashoffset": "strokeDashoffset",
-  strokeLinecap: 1,
-  "stroke-linecap": "strokeLinecap",
-  strokeLinejoin: 1,
-  "stroke-linejoin": "strokeLinejoin",
-  strokeMiterlimit: 1,
-  "stroke-miterlimit": "strokeMiterlimit",
-  strokeWidth: 1,
-  "stroke-width": "strokeWidth",
-  strokeOpacity: 1,
-  "stroke-opacity": "strokeOpacity",
-  suppressContentEditableWarning: 1,
-  suppressHydrationWarning: 1,
-  surfaceScale: 1,
-  systemLanguage: 1,
-  tableValues: 1,
-  targetX: 1,
-  targetY: 1,
-  textAnchor: 1,
-  "text-anchor": "textAnchor",
-  textDecoration: 1,
-  "text-decoration": "textDecoration",
-  textLength: 1,
-  textRendering: 1,
-  "text-rendering": "textRendering",
-  to: 0,
-  transform: 0,
-  typeof: 0,
-  u1: 0,
-  u2: 0,
-  underlinePosition: 1,
-  "underline-position": "underlinePosition",
-  underlineThickness: 1,
-  "underline-thickness": "underlineThickness",
-  unicode: 0,
-  unicodeBidi: 1,
-  "unicode-bidi": "unicodeBidi",
-  unicodeRange: 1,
-  "unicode-range": "unicodeRange",
-  unitsPerEm: 1,
-  "units-per-em": "unitsPerEm",
-  unselectable: 0,
-  vAlphabetic: 1,
-  "v-alphabetic": "vAlphabetic",
-  values: 0,
-  vectorEffect: 1,
-  "vector-effect": "vectorEffect",
-  version: 0,
-  vertAdvY: 1,
-  "vert-adv-y": "vertAdvY",
-  vertOriginX: 1,
-  "vert-origin-x": "vertOriginX",
-  vertOriginY: 1,
-  "vert-origin-y": "vertOriginY",
-  vHanging: 1,
-  "v-hanging": "vHanging",
-  vIdeographic: 1,
-  "v-ideographic": "vIdeographic",
-  viewBox: 1,
-  viewTarget: 1,
-  visibility: 0,
-  vMathematical: 1,
-  "v-mathematical": "vMathematical",
-  vocab: 0,
-  widths: 0,
-  wordSpacing: 1,
-  "word-spacing": "wordSpacing",
-  writingMode: 1,
-  "writing-mode": "writingMode",
-  x1: 0,
-  x2: 0,
-  x: 0,
-  xChannelSelector: 1,
-  xHeight: 1,
-  "x-height": "xHeight",
-  xlinkActuate: 1,
-  "xlink:actuate": "xlinkActuate",
-  xlinkArcrole: 1,
-  "xlink:arcrole": "xlinkArcrole",
-  xlinkHref: 1,
-  "xlink:href": "xlinkHref",
-  xlinkRole: 1,
-  "xlink:role": "xlinkRole",
-  xlinkShow: 1,
-  "xlink:show": "xlinkShow",
-  xlinkTitle: 1,
-  "xlink:title": "xlinkTitle",
-  xlinkType: 1,
-  "xlink:type": "xlinkType",
-  xmlBase: 1,
-  "xml:base": "xmlBase",
-  xmlLang: 1,
-  "xml:lang": "xmlLang",
-  xmlns: 0,
-  "xml:space": "xmlSpace",
-  xmlnsXlink: 1,
-  "xmlns:xlink": "xmlnsXlink",
-  xmlSpace: 1,
-  y1: 0,
-  y2: 0,
-  y: 0,
-  yChannelSelector: 1,
-  z: 0,
-  zoomAndPan: 1
-};
-const RESERVED = 0;
-const STRING = 1;
-const BOOLEANISH_STRING = 2;
-const BOOLEAN = 3;
-const OVERLOADED_BOOLEAN = 4;
-const NUMERIC = 5;
-const POSITIVE_NUMERIC = 6;
-function getPropertyInfo(name) {
-  return properties.hasOwnProperty(name) ? properties[name] : null;
-}
-function PropertyInfoRecord(name, type, mustUseProperty, attributeName, attributeNamespace, sanitizeURL, removeEmptyString) {
-  this.acceptsBooleans = type === BOOLEANISH_STRING || type === BOOLEAN || type === OVERLOADED_BOOLEAN;
-  this.attributeName = attributeName;
-  this.attributeNamespace = attributeNamespace;
-  this.mustUseProperty = mustUseProperty;
-  this.propertyName = name;
-  this.type = type;
-  this.sanitizeURL = sanitizeURL;
-  this.removeEmptyString = removeEmptyString;
-}
-const properties = {};
-const reservedProps = [
-  "children",
-  "dangerouslySetInnerHTML",
-  // TODO: This prevents the assignment of defaultValue to regular
-  // elements (not just inputs). Now that ReactDOMInput assigns to the
-  // defaultValue property -- do we need this?
-  "defaultValue",
-  "defaultChecked",
-  "innerHTML",
-  "suppressContentEditableWarning",
-  "suppressHydrationWarning",
-  "style"
-];
-reservedProps.forEach((name) => {
-  properties[name] = new PropertyInfoRecord(
-    name,
-    RESERVED,
-    false,
-    // mustUseProperty
-    name,
-    // attributeName
-    null,
-    // attributeNamespace
-    false,
-    // sanitizeURL
-    false
-    // removeEmptyString
-  );
-});
-[
-  ["acceptCharset", "accept-charset"],
-  ["className", "class"],
-  ["htmlFor", "for"],
-  ["httpEquiv", "http-equiv"]
-].forEach(([name, attributeName]) => {
-  properties[name] = new PropertyInfoRecord(
-    name,
-    STRING,
-    false,
-    // mustUseProperty
-    attributeName,
-    // attributeName
-    null,
-    // attributeNamespace
-    false,
-    // sanitizeURL
-    false
-    // removeEmptyString
-  );
-});
-["contentEditable", "draggable", "spellCheck", "value"].forEach((name) => {
-  properties[name] = new PropertyInfoRecord(
-    name,
-    BOOLEANISH_STRING,
-    false,
-    // mustUseProperty
-    name.toLowerCase(),
-    // attributeName
-    null,
-    // attributeNamespace
-    false,
-    // sanitizeURL
-    false
-    // removeEmptyString
-  );
-});
-[
-  "autoReverse",
-  "externalResourcesRequired",
-  "focusable",
-  "preserveAlpha"
-].forEach((name) => {
-  properties[name] = new PropertyInfoRecord(
-    name,
-    BOOLEANISH_STRING,
-    false,
-    // mustUseProperty
-    name,
-    // attributeName
-    null,
-    // attributeNamespace
-    false,
-    // sanitizeURL
-    false
-    // removeEmptyString
-  );
-});
-[
-  "allowFullScreen",
-  "async",
-  // Note: there is a special case that prevents it from being written to the DOM
-  // on the client side because the browsers are inconsistent. Instead we call focus().
-  "autoFocus",
-  "autoPlay",
-  "controls",
-  "default",
-  "defer",
-  "disabled",
-  "disablePictureInPicture",
-  "disableRemotePlayback",
-  "formNoValidate",
-  "hidden",
-  "loop",
-  "noModule",
-  "noValidate",
-  "open",
-  "playsInline",
-  "readOnly",
-  "required",
-  "reversed",
-  "scoped",
-  "seamless",
-  // Microdata
-  "itemScope"
-].forEach((name) => {
-  properties[name] = new PropertyInfoRecord(
-    name,
-    BOOLEAN,
-    false,
-    // mustUseProperty
-    name.toLowerCase(),
-    // attributeName
-    null,
-    // attributeNamespace
-    false,
-    // sanitizeURL
-    false
-    // removeEmptyString
-  );
-});
-[
-  "checked",
-  // Note: `option.selected` is not updated if `select.multiple` is
-  // disabled with `removeAttribute`. We have special logic for handling this.
-  "multiple",
-  "muted",
-  "selected"
-  // NOTE: if you add a camelCased prop to this list,
-  // you'll need to set attributeName to name.toLowerCase()
-  // instead in the assignment below.
-].forEach((name) => {
-  properties[name] = new PropertyInfoRecord(
-    name,
-    BOOLEAN,
-    true,
-    // mustUseProperty
-    name,
-    // attributeName
-    null,
-    // attributeNamespace
-    false,
-    // sanitizeURL
-    false
-    // removeEmptyString
-  );
-});
-[
-  "capture",
-  "download"
-  // NOTE: if you add a camelCased prop to this list,
-  // you'll need to set attributeName to name.toLowerCase()
-  // instead in the assignment below.
-].forEach((name) => {
-  properties[name] = new PropertyInfoRecord(
-    name,
-    OVERLOADED_BOOLEAN,
-    false,
-    // mustUseProperty
-    name,
-    // attributeName
-    null,
-    // attributeNamespace
-    false,
-    // sanitizeURL
-    false
-    // removeEmptyString
-  );
-});
-[
-  "cols",
-  "rows",
-  "size",
-  "span"
-  // NOTE: if you add a camelCased prop to this list,
-  // you'll need to set attributeName to name.toLowerCase()
-  // instead in the assignment below.
-].forEach((name) => {
-  properties[name] = new PropertyInfoRecord(
-    name,
-    POSITIVE_NUMERIC,
-    false,
-    // mustUseProperty
-    name,
-    // attributeName
-    null,
-    // attributeNamespace
-    false,
-    // sanitizeURL
-    false
-    // removeEmptyString
-  );
-});
-["rowSpan", "start"].forEach((name) => {
-  properties[name] = new PropertyInfoRecord(
-    name,
-    NUMERIC,
-    false,
-    // mustUseProperty
-    name.toLowerCase(),
-    // attributeName
-    null,
-    // attributeNamespace
-    false,
-    // sanitizeURL
-    false
-    // removeEmptyString
-  );
-});
-const CAMELIZE = /[\-\:]([a-z])/g;
-const capitalize$1 = (token) => token[1].toUpperCase();
-[
-  "accent-height",
-  "alignment-baseline",
-  "arabic-form",
-  "baseline-shift",
-  "cap-height",
-  "clip-path",
-  "clip-rule",
-  "color-interpolation",
-  "color-interpolation-filters",
-  "color-profile",
-  "color-rendering",
-  "dominant-baseline",
-  "enable-background",
-  "fill-opacity",
-  "fill-rule",
-  "flood-color",
-  "flood-opacity",
-  "font-family",
-  "font-size",
-  "font-size-adjust",
-  "font-stretch",
-  "font-style",
-  "font-variant",
-  "font-weight",
-  "glyph-name",
-  "glyph-orientation-horizontal",
-  "glyph-orientation-vertical",
-  "horiz-adv-x",
-  "horiz-origin-x",
-  "image-rendering",
-  "letter-spacing",
-  "lighting-color",
-  "marker-end",
-  "marker-mid",
-  "marker-start",
-  "overline-position",
-  "overline-thickness",
-  "paint-order",
-  "panose-1",
-  "pointer-events",
-  "rendering-intent",
-  "shape-rendering",
-  "stop-color",
-  "stop-opacity",
-  "strikethrough-position",
-  "strikethrough-thickness",
-  "stroke-dasharray",
-  "stroke-dashoffset",
-  "stroke-linecap",
-  "stroke-linejoin",
-  "stroke-miterlimit",
-  "stroke-opacity",
-  "stroke-width",
-  "text-anchor",
-  "text-decoration",
-  "text-rendering",
-  "underline-position",
-  "underline-thickness",
-  "unicode-bidi",
-  "unicode-range",
-  "units-per-em",
-  "v-alphabetic",
-  "v-hanging",
-  "v-ideographic",
-  "v-mathematical",
-  "vector-effect",
-  "vert-adv-y",
-  "vert-origin-x",
-  "vert-origin-y",
-  "word-spacing",
-  "writing-mode",
-  "xmlns:xlink",
-  "x-height"
-  // NOTE: if you add a camelCased prop to this list,
-  // you'll need to set attributeName to name.toLowerCase()
-  // instead in the assignment below.
-].forEach((attributeName) => {
-  const name = attributeName.replace(CAMELIZE, capitalize$1);
-  properties[name] = new PropertyInfoRecord(
-    name,
-    STRING,
-    false,
-    // mustUseProperty
-    attributeName,
-    null,
-    // attributeNamespace
-    false,
-    // sanitizeURL
-    false
-    // removeEmptyString
-  );
-});
-[
-  "xlink:actuate",
-  "xlink:arcrole",
-  "xlink:role",
-  "xlink:show",
-  "xlink:title",
-  "xlink:type"
-  // NOTE: if you add a camelCased prop to this list,
-  // you'll need to set attributeName to name.toLowerCase()
-  // instead in the assignment below.
-].forEach((attributeName) => {
-  const name = attributeName.replace(CAMELIZE, capitalize$1);
-  properties[name] = new PropertyInfoRecord(
-    name,
-    STRING,
-    false,
-    // mustUseProperty
-    attributeName,
-    "http://www.w3.org/1999/xlink",
-    false,
-    // sanitizeURL
-    false
-    // removeEmptyString
-  );
-});
-[
-  "xml:base",
-  "xml:lang",
-  "xml:space"
-  // NOTE: if you add a camelCased prop to this list,
-  // you'll need to set attributeName to name.toLowerCase()
-  // instead in the assignment below.
-].forEach((attributeName) => {
-  const name = attributeName.replace(CAMELIZE, capitalize$1);
-  properties[name] = new PropertyInfoRecord(
-    name,
-    STRING,
-    false,
-    // mustUseProperty
-    attributeName,
-    "http://www.w3.org/XML/1998/namespace",
-    false,
-    // sanitizeURL
-    false
-    // removeEmptyString
-  );
-});
-["tabIndex", "crossOrigin"].forEach((attributeName) => {
-  properties[attributeName] = new PropertyInfoRecord(
-    attributeName,
-    STRING,
-    false,
-    // mustUseProperty
-    attributeName.toLowerCase(),
-    // attributeName
-    null,
-    // attributeNamespace
-    false,
-    // sanitizeURL
-    false
-    // removeEmptyString
-  );
-});
-const xlinkHref = "xlinkHref";
-properties[xlinkHref] = new PropertyInfoRecord(
-  "xlinkHref",
-  STRING,
-  false,
-  // mustUseProperty
-  "xlink:href",
-  "http://www.w3.org/1999/xlink",
-  true,
-  // sanitizeURL
-  false
-  // removeEmptyString
-);
-["src", "href", "action", "formAction"].forEach((attributeName) => {
-  properties[attributeName] = new PropertyInfoRecord(
-    attributeName,
-    STRING,
-    false,
-    // mustUseProperty
-    attributeName.toLowerCase(),
-    // attributeName
-    null,
-    // attributeNamespace
-    true,
-    // sanitizeURL
-    true
-    // removeEmptyString
-  );
-});
-const {
-  CAMELCASE,
-  SAME,
-  possibleStandardNames: possibleStandardNamesOptimized
-} = possibleStandardNamesOptimized$1;
-const ATTRIBUTE_NAME_START_CHAR = ":A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD";
-const ATTRIBUTE_NAME_CHAR = ATTRIBUTE_NAME_START_CHAR + "\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040";
-const isCustomAttribute = RegExp.prototype.test.bind(
-  // eslint-disable-next-line no-misleading-character-class
-  new RegExp("^(data|aria)-[" + ATTRIBUTE_NAME_CHAR + "]*$")
-);
-const possibleStandardNames = Object.keys(
-  possibleStandardNamesOptimized
-).reduce((accumulator, standardName) => {
-  const propName = possibleStandardNamesOptimized[standardName];
-  if (propName === SAME) {
-    accumulator[standardName] = standardName;
-  } else if (propName === CAMELCASE) {
-    accumulator[standardName.toLowerCase()] = standardName;
-  } else {
-    accumulator[standardName] = propName;
-  }
-  return accumulator;
-}, {});
-lib.BOOLEAN = BOOLEAN;
-lib.BOOLEANISH_STRING = BOOLEANISH_STRING;
-lib.NUMERIC = NUMERIC;
-lib.OVERLOADED_BOOLEAN = OVERLOADED_BOOLEAN;
-lib.POSITIVE_NUMERIC = POSITIVE_NUMERIC;
-lib.RESERVED = RESERVED;
-lib.STRING = STRING;
-lib.getPropertyInfo = getPropertyInfo;
-lib.isCustomAttribute = isCustomAttribute;
-lib.possibleStandardNames = possibleStandardNames;
-var utilities$1 = {};
-var cjs$1 = {};
-var COMMENT_REGEX = /\/\*[^*]*\*+([^/*][^*]*\*+)*\//g;
-var NEWLINE_REGEX = /\n/g;
-var WHITESPACE_REGEX = /^\s*/;
-var PROPERTY_REGEX = /^(\*?[-#/*\\\w]+(\[[0-9a-z_-]+\])?)\s*/;
-var COLON_REGEX = /^:\s*/;
-var VALUE_REGEX = /^((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^)]*?\)|[^};])+)/;
-var SEMICOLON_REGEX = /^[;\s]*/;
-var TRIM_REGEX = /^\s+|\s+$/g;
-var NEWLINE = "\n";
-var FORWARD_SLASH = "/";
-var ASTERISK = "*";
-var EMPTY_STRING = "";
-var TYPE_COMMENT = "comment";
-var TYPE_DECLARATION = "declaration";
-var inlineStyleParser = function(style, options) {
-  if (typeof style !== "string") {
-    throw new TypeError("First argument must be a string");
-  }
-  if (!style) return [];
-  options = options || {};
-  var lineno = 1;
-  var column = 1;
-  function updatePosition(str) {
-    var lines = str.match(NEWLINE_REGEX);
-    if (lines) lineno += lines.length;
-    var i = str.lastIndexOf(NEWLINE);
-    column = ~i ? str.length - i : column + str.length;
-  }
-  function position() {
-    var start = { line: lineno, column };
-    return function(node2) {
-      node2.position = new Position(start);
-      whitespace();
-      return node2;
+    } catch (error) {
+      console.warn("Error highlighting code:", error);
+      if (codeElement) {
+        codeElement.textContent = content;
+      }
+    }
+  }, [language, withSyntaxHighlighting, contentEditable, prismModule, getCursorPosition, codeElement]);
+  const handleInput = useCallback((event) => {
+    if (!codeElement) return;
+    const content = codeElement.textContent || "";
+    onChange == null ? void 0 : onChange(content);
+    requestAnimationFrame(() => {
+      highlightCode(content);
+    });
+  }, [highlightCode, onChange, codeElement]);
+  useEffect(() => {
+    const element = codeElement;
+    if (!element || !contentEditable) return;
+    element.addEventListener("input", handleInput);
+    return () => {
+      element.removeEventListener("input", handleInput);
     };
-  }
-  function Position(start) {
-    this.start = start;
-    this.end = { line: lineno, column };
-    this.source = options.source;
-  }
-  Position.prototype.content = style;
-  function error(msg) {
-    var err = new Error(
-      options.source + ":" + lineno + ":" + column + ": " + msg
-    );
-    err.reason = msg;
-    err.filename = options.source;
-    err.line = lineno;
-    err.column = column;
-    err.source = style;
-    if (options.silent) ;
-    else {
-      throw err;
-    }
-  }
-  function match(re) {
-    var m = re.exec(style);
-    if (!m) return;
-    var str = m[0];
-    updatePosition(str);
-    style = style.slice(str.length);
-    return m;
-  }
-  function whitespace() {
-    match(WHITESPACE_REGEX);
-  }
-  function comments(rules) {
-    var c;
-    rules = rules || [];
-    while (c = comment()) {
-      if (c !== false) {
-        rules.push(c);
-      }
-    }
-    return rules;
-  }
-  function comment() {
-    var pos = position();
-    if (FORWARD_SLASH != style.charAt(0) || ASTERISK != style.charAt(1)) return;
-    var i = 2;
-    while (EMPTY_STRING != style.charAt(i) && (ASTERISK != style.charAt(i) || FORWARD_SLASH != style.charAt(i + 1))) {
-      ++i;
-    }
-    i += 2;
-    if (EMPTY_STRING === style.charAt(i - 1)) {
-      return error("End of comment missing");
-    }
-    var str = style.slice(2, i - 2);
-    column += 2;
-    updatePosition(str);
-    style = style.slice(i);
-    column += 2;
-    return pos({
-      type: TYPE_COMMENT,
-      comment: str
-    });
-  }
-  function declaration() {
-    var pos = position();
-    var prop = match(PROPERTY_REGEX);
-    if (!prop) return;
-    comment();
-    if (!match(COLON_REGEX)) return error("property missing ':'");
-    var val = match(VALUE_REGEX);
-    var ret = pos({
-      type: TYPE_DECLARATION,
-      property: trim(prop[0].replace(COMMENT_REGEX, EMPTY_STRING)),
-      value: val ? trim(val[0].replace(COMMENT_REGEX, EMPTY_STRING)) : EMPTY_STRING
-    });
-    match(SEMICOLON_REGEX);
-    return ret;
-  }
-  function declarations() {
-    var decls = [];
-    comments(decls);
-    var decl;
-    while (decl = declaration()) {
-      if (decl !== false) {
-        decls.push(decl);
-        comments(decls);
-      }
-    }
-    return decls;
-  }
-  whitespace();
-  return declarations();
-};
-function trim(str) {
-  return str ? str.replace(TRIM_REGEX, EMPTY_STRING) : EMPTY_STRING;
-}
-var __importDefault$2 = commonjsGlobal && commonjsGlobal.__importDefault || function(mod) {
-  return mod && mod.__esModule ? mod : { "default": mod };
-};
-Object.defineProperty(cjs$1, "__esModule", { value: true });
-cjs$1.default = StyleToObject;
-var inline_style_parser_1 = __importDefault$2(inlineStyleParser);
-function StyleToObject(style, iterator) {
-  var styleObject = null;
-  if (!style || typeof style !== "string") {
-    return styleObject;
-  }
-  var declarations = (0, inline_style_parser_1.default)(style);
-  var hasIterator = typeof iterator === "function";
-  declarations.forEach(function(declaration) {
-    if (declaration.type !== "declaration") {
-      return;
-    }
-    var property = declaration.property, value = declaration.value;
-    if (hasIterator) {
-      iterator(property, value, declaration);
-    } else if (value) {
-      styleObject = styleObject || {};
-      styleObject[property] = value;
-    }
-  });
-  return styleObject;
-}
-var utilities = {};
-Object.defineProperty(utilities, "__esModule", { value: true });
-utilities.camelCase = void 0;
-var CUSTOM_PROPERTY_REGEX = /^--[a-zA-Z0-9_-]+$/;
-var HYPHEN_REGEX = /-([a-z])/g;
-var NO_HYPHEN_REGEX = /^[^-]+$/;
-var VENDOR_PREFIX_REGEX = /^-(webkit|moz|ms|o|khtml)-/;
-var MS_VENDOR_PREFIX_REGEX = /^-(ms)-/;
-var skipCamelCase = function(property) {
-  return !property || NO_HYPHEN_REGEX.test(property) || CUSTOM_PROPERTY_REGEX.test(property);
-};
-var capitalize = function(match, character) {
-  return character.toUpperCase();
-};
-var trimHyphen = function(match, prefix) {
-  return "".concat(prefix, "-");
-};
-var camelCase = function(property, options) {
-  if (options === void 0) {
-    options = {};
-  }
-  if (skipCamelCase(property)) {
-    return property;
-  }
-  property = property.toLowerCase();
-  if (options.reactCompat) {
-    property = property.replace(MS_VENDOR_PREFIX_REGEX, trimHyphen);
-  } else {
-    property = property.replace(VENDOR_PREFIX_REGEX, trimHyphen);
-  }
-  return property.replace(HYPHEN_REGEX, capitalize);
-};
-utilities.camelCase = camelCase;
-var __importDefault$1 = commonjsGlobal && commonjsGlobal.__importDefault || function(mod) {
-  return mod && mod.__esModule ? mod : { "default": mod };
-};
-var style_to_object_1 = __importDefault$1(cjs$1);
-var utilities_1$2 = utilities;
-function StyleToJS(style, options) {
-  var output = {};
-  if (!style || typeof style !== "string") {
-    return output;
-  }
-  (0, style_to_object_1.default)(style, function(property, value) {
-    if (property && value) {
-      output[(0, utilities_1$2.camelCase)(property, options)] = value;
-    }
-  });
-  return output;
-}
-StyleToJS.default = StyleToJS;
-var cjs = StyleToJS;
-(function(exports) {
-  var __importDefault2 = commonjsGlobal && commonjsGlobal.__importDefault || function(mod) {
-    return mod && mod.__esModule ? mod : { "default": mod };
-  };
-  Object.defineProperty(exports, "__esModule", { value: true });
-  exports.returnFirstArg = exports.canTextBeChildOfNode = exports.ELEMENTS_WITH_NO_TEXT_CHILDREN = exports.PRESERVE_CUSTOM_ATTRIBUTES = void 0;
-  exports.isCustomComponent = isCustomComponent;
-  exports.setStyleProp = setStyleProp;
-  var react_12 = React$1;
-  var style_to_js_1 = __importDefault2(cjs);
-  var RESERVED_SVG_MATHML_ELEMENTS = /* @__PURE__ */ new Set([
-    "annotation-xml",
-    "color-profile",
-    "font-face",
-    "font-face-src",
-    "font-face-uri",
-    "font-face-format",
-    "font-face-name",
-    "missing-glyph"
-  ]);
-  function isCustomComponent(tagName, props) {
-    if (!tagName.includes("-")) {
-      return Boolean(props && typeof props.is === "string");
-    }
-    if (RESERVED_SVG_MATHML_ELEMENTS.has(tagName)) {
-      return false;
-    }
-    return true;
-  }
-  var styleOptions = {
-    reactCompat: true
-  };
-  function setStyleProp(style, props) {
-    if (typeof style !== "string") {
-      return;
-    }
-    if (!style.trim()) {
-      props.style = {};
-      return;
-    }
+  }, [contentEditable, handleInput, codeElement]);
+  useEffect(() => {
+    if (!codeElement || !prismModule) return;
+    highlightCode(initialCode);
+  }, [highlightCode, initialCode, prismModule, codeElement]);
+  const copyToClipboard = async () => {
     try {
-      props.style = (0, style_to_js_1.default)(style, styleOptions);
-    } catch (error) {
-      props.style = {};
+      const textToCopy = codeElement ? codeElement.textContent || "" : initialCode;
+      await navigator.clipboard.writeText(textToCopy);
+      setIsCodeCopied(true);
+      setTimeout(() => setIsCodeCopied(false), 3e3);
+    } catch (err) {
+      console.error("Could not copy text: ", err);
     }
-  }
-  exports.PRESERVE_CUSTOM_ATTRIBUTES = Number(react_12.version.split(".")[0]) >= 16;
-  exports.ELEMENTS_WITH_NO_TEXT_CHILDREN = /* @__PURE__ */ new Set([
-    "tr",
-    "tbody",
-    "thead",
-    "tfoot",
-    "colgroup",
-    "table",
-    "head",
-    "html",
-    "frameset"
-  ]);
-  var canTextBeChildOfNode = function(node2) {
-    return !exports.ELEMENTS_WITH_NO_TEXT_CHILDREN.has(node2.name);
   };
-  exports.canTextBeChildOfNode = canTextBeChildOfNode;
-  var returnFirstArg = function(arg) {
-    return arg;
-  };
-  exports.returnFirstArg = returnFirstArg;
-})(utilities$1);
-Object.defineProperty(attributesToProps$1, "__esModule", { value: true });
-attributesToProps$1.default = attributesToProps;
-var react_property_1 = lib;
-var utilities_1$1 = utilities$1;
-var UNCONTROLLED_COMPONENT_ATTRIBUTES = ["checked", "value"];
-var UNCONTROLLED_COMPONENT_NAMES = ["input", "select", "textarea"];
-var valueOnlyInputs = {
-  reset: true,
-  submit: true
-};
-function attributesToProps(attributes, nodeName) {
-  if (attributes === void 0) {
-    attributes = {};
-  }
-  var props = {};
-  var isInputValueOnly = Boolean(attributes.type && valueOnlyInputs[attributes.type]);
-  for (var attributeName in attributes) {
-    var attributeValue = attributes[attributeName];
-    if ((0, react_property_1.isCustomAttribute)(attributeName)) {
-      props[attributeName] = attributeValue;
-      continue;
-    }
-    var attributeNameLowerCased = attributeName.toLowerCase();
-    var propName = getPropName(attributeNameLowerCased);
-    if (propName) {
-      var propertyInfo = (0, react_property_1.getPropertyInfo)(propName);
-      if (UNCONTROLLED_COMPONENT_ATTRIBUTES.includes(propName) && UNCONTROLLED_COMPONENT_NAMES.includes(nodeName) && !isInputValueOnly) {
-        propName = getPropName("default" + attributeNameLowerCased);
-      }
-      props[propName] = attributeValue;
-      switch (propertyInfo && propertyInfo.type) {
-        case react_property_1.BOOLEAN:
-          props[propName] = true;
-          break;
-        case react_property_1.OVERLOADED_BOOLEAN:
-          if (attributeValue === "") {
-            props[propName] = true;
-          }
-          break;
-      }
-      continue;
+  const handleKeyDown = async (e) => {
+    if ((e.key === "Enter" || e.key === " ") && e.target === preRef.current) {
+      e.preventDefault();
+      await copyToClipboard();
     }
-    if (utilities_1$1.PRESERVE_CUSTOM_ATTRIBUTES) {
-      props[attributeName] = attributeValue;
-    }
-  }
-  (0, utilities_1$1.setStyleProp)(attributes.style, props);
-  return props;
-}
-function getPropName(attributeName) {
-  return react_property_1.possibleStandardNames[attributeName];
-}
-var domToReact$1 = {};
-var __importDefault = commonjsGlobal && commonjsGlobal.__importDefault || function(mod) {
-  return mod && mod.__esModule ? mod : { "default": mod };
-};
-Object.defineProperty(domToReact$1, "__esModule", { value: true });
-domToReact$1.default = domToReact;
-var react_1 = React$1;
-var attributes_to_props_1 = __importDefault(attributesToProps$1);
-var utilities_1 = utilities$1;
-var React = {
-  cloneElement: react_1.cloneElement,
-  createElement: react_1.createElement,
-  isValidElement: react_1.isValidElement
-};
-function domToReact(nodes, options) {
-  if (options === void 0) {
-    options = {};
-  }
-  var reactElements = [];
-  var hasReplace = typeof options.replace === "function";
-  var transform = options.transform || utilities_1.returnFirstArg;
-  var _a = options.library || React, cloneElement = _a.cloneElement, createElement = _a.createElement, isValidElement = _a.isValidElement;
-  var nodesLength = nodes.length;
-  for (var index = 0; index < nodesLength; index++) {
-    var node2 = nodes[index];
-    if (hasReplace) {
-      var replaceElement = options.replace(node2, index);
-      if (isValidElement(replaceElement)) {
-        if (nodesLength > 1) {
-          replaceElement = cloneElement(replaceElement, {
-            key: replaceElement.key || index
-          });
-        }
-        reactElements.push(transform(replaceElement, node2, index));
-        continue;
-      }
-    }
-    if (node2.type === "text") {
-      var isWhitespace = !node2.data.trim().length;
-      if (isWhitespace && node2.parent && !(0, utilities_1.canTextBeChildOfNode)(node2.parent)) {
-        continue;
-      }
-      if (options.trim && isWhitespace) {
-        continue;
-      }
-      reactElements.push(transform(node2.data, node2, index));
-      continue;
-    }
-    var element = node2;
-    var props = {};
-    if (skipAttributesToProps(element)) {
-      (0, utilities_1.setStyleProp)(element.attribs.style, element.attribs);
-      props = element.attribs;
-    } else if (element.attribs) {
-      props = (0, attributes_to_props_1.default)(element.attribs, element.name);
-    }
-    var children = void 0;
-    switch (node2.type) {
-      case "script":
-      case "style":
-        if (node2.children[0]) {
-          props.dangerouslySetInnerHTML = {
-            __html: node2.children[0].data
-          };
-        }
-        break;
-      case "tag":
-        if (node2.name === "textarea" && node2.children[0]) {
-          props.defaultValue = node2.children[0].data;
-        } else if (node2.children && node2.children.length) {
-          children = domToReact(node2.children, options);
-        }
-        break;
-      default:
-        continue;
-    }
-    if (nodesLength > 1) {
-      props.key = index;
-    }
-    reactElements.push(transform(createElement(node2.name, props, children), node2, index));
-  }
-  return reactElements.length === 1 ? reactElements[0] : reactElements;
-}
-function skipAttributesToProps(node2) {
-  return utilities_1.PRESERVE_CUSTOM_ATTRIBUTES && node2.type === "tag" && (0, utilities_1.isCustomComponent)(node2.name, node2.attribs);
-}
-(function(exports) {
-  var __importDefault2 = commonjsGlobal && commonjsGlobal.__importDefault || function(mod) {
-    return mod && mod.__esModule ? mod : { "default": mod };
   };
-  Object.defineProperty(exports, "__esModule", { value: true });
-  exports.htmlToDOM = exports.domToReact = exports.attributesToProps = exports.Text = exports.ProcessingInstruction = exports.Element = exports.Comment = void 0;
-  exports.default = HTMLReactParser2;
-  var html_dom_parser_1 = __importDefault2(htmlToDom);
-  exports.htmlToDOM = html_dom_parser_1.default;
-  var attributes_to_props_12 = __importDefault2(attributesToProps$1);
-  exports.attributesToProps = attributes_to_props_12.default;
-  var dom_to_react_1 = __importDefault2(domToReact$1);
-  exports.domToReact = dom_to_react_1.default;
-  var domhandler_12 = lib$2;
-  Object.defineProperty(exports, "Comment", { enumerable: true, get: function() {
-    return domhandler_12.Comment;
-  } });
-  Object.defineProperty(exports, "Element", { enumerable: true, get: function() {
-    return domhandler_12.Element;
-  } });
-  Object.defineProperty(exports, "ProcessingInstruction", { enumerable: true, get: function() {
-    return domhandler_12.ProcessingInstruction;
-  } });
-  Object.defineProperty(exports, "Text", { enumerable: true, get: function() {
-    return domhandler_12.Text;
-  } });
-  var domParserOptions = { lowerCaseAttributeNames: false };
-  function HTMLReactParser2(html, options) {
-    if (typeof html !== "string") {
-      throw new TypeError("First argument must be a string");
-    }
-    if (!html) {
-      return [];
-    }
-    return (0, dom_to_react_1.default)((0, html_dom_parser_1.default)(html, (options === null || options === void 0 ? void 0 : options.htmlparser2) || domParserOptions), options);
-  }
-})(lib$3);
-const HTMLReactParser = /* @__PURE__ */ getDefaultExportFromCjs(lib$3);
-const parse = HTMLReactParser.default || HTMLReactParser;
-const CodeBlock = React$1.forwardRef(
-  ({
-    children,
-    source,
-    language = "json",
-    showCopyButton,
-    showLineNumbers,
-    description,
-    ...props
-  }, ref) => {
-    const [isCodeCopied, setIsCodeCopied] = useState(false);
-    let code = typeof children === "string" ? children : React$1.Children.toArray(children).join("");
-    if (!children) {
-      code = typeof source === "object" ? JSON.stringify(source, null, 2) : source ?? "";
-    }
-    let classNames = [];
-    if (showLineNumbers) {
-      classNames.push("show-line-numbers");
-    }
-    const lines = code.split(/\r\n|\r|\n/gm);
-    const highlightElement = () => {
-      const languageGrammar = Prism.languages[language];
-      return typeof languageGrammar === "undefined" ? code : Prism.highlight(code, languageGrammar, language);
-    };
-    const copyToClipboard = async () => {
-      try {
-        await navigator.clipboard.writeText(code);
-        setIsCodeCopied(true);
-        setTimeout(() => setIsCodeCopied(false), 3e3);
-      } catch (err) {
-        console.error("Could not copy text: ", err);
-      }
-    };
-    const handleKeyDown = async (e) => {
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        await copyToClipboard();
-      }
-    };
-    return /* @__PURE__ */ React$1.createElement(
-      Element$1,
+  let classNames = [];
+  if (showLineNumbers) {
+    classNames.push("show-line-numbers");
+  }
+  const lines = initialCode.split(/\r\n|\r|\n/gm);
+  return /* @__PURE__ */ React.createElement(
+    Element,
+    {
+      "data-code-block": true,
+      as: "div",
+      classNames,
+      role: "region",
+      "aria-label": description || `Code block in ${language}`,
+      ...props
+    },
+    showCopyButton ? isCodeCopied ? /* @__PURE__ */ React.createElement(
+      Badge,
       {
-        "data-code-block": true,
-        as: "div",
-        classNames,
-        role: "region",
-        "aria-label": description || `Code block in ${language}`,
-        ...props
+        className: "code-block-copied-badge",
+        size: "tiny",
+        shape: "rounded",
+        "aria-live": "polite"
+      },
+      "Copied!"
+    ) : /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "button",
+        className: "code-block-copy-button",
+        size: "tiny",
+        shape: "rounded",
+        onClick: copyToClipboard,
+        onKeyDown: handleKeyDown,
+        "aria-label": "Copy code to clipboard"
+      },
+      "Copy"
+    ) : null,
+    /* @__PURE__ */ React.createElement(
+      "pre",
+      {
+        ref: preRef,
+        className: `language-${language}`,
+        tabIndex: 0,
+        "aria-label": `Code in ${language}`
       },
-      showCopyButton ? isCodeCopied ? /* @__PURE__ */ React$1.createElement(
-        Badge,
-        {
-          className: "code-block-copied-badge",
-          size: "tiny",
-          shape: "rounded",
-          "aria-live": "polite"
-        },
-        "Copied!"
-      ) : /* @__PURE__ */ React$1.createElement(
-        Button,
+      showLineNumbers && Array.from(Array(lines.length).keys()).map((index) => /* @__PURE__ */ React.createElement(
+        "span",
         {
-          type: "button",
-          className: "code-block-copy-button",
-          size: "tiny",
-          shape: "rounded",
-          onClick: copyToClipboard,
-          onKeyDown: handleKeyDown,
-          "aria-label": "Copy code to clipboard"
+          key: index,
+          className: "line-numbers",
+          "aria-hidden": "true"
         },
-        "Copy"
-      ) : null,
-      /* @__PURE__ */ React$1.createElement(
-        "pre",
+        index + 1
+      )),
+      /* @__PURE__ */ React.createElement(
+        "code",
         {
-          ref,
-          className: `language-${language}`,
-          tabIndex: 0,
-          "aria-label": `Code in ${language}`
+          ref: setCodeElement,
+          contentEditable,
+          suppressContentEditableWarning: true,
+          spellCheck: "false",
+          className: `language-${language} ${isLoading ? "is-loading" : ""}`
         },
-        showLineNumbers && Array.from(Array(lines.length).keys()).map((index) => /* @__PURE__ */ React$1.createElement(
-          "span",
-          {
-            key: index,
-            className: "line-numbers",
-            "aria-hidden": "true"
-          },
-          index + 1
-        )),
-        parse(highlightElement())
+        initialCode
       )
-    );
-  }
-);
+    )
+  );
+});
 export {
   CodeBlock
 };