@lexical/html 0.43.1-nightly.20260416.0 → 0.44.0

package/LexicalHtml.dev.mjs

@@ -7,8 +7,8 @@
  */
 
 import { $sliceSelectedTextNodeContent } from '@lexical/selection';
-import { isHTMLElement, isBlockDomNode } from '@lexical/utils';
-import { isDOMDocumentNode, $getRoot, $isElementNode, $isTextNode, getRegisteredNode, isDocumentFragment, $isRootOrShadowRoot, $isBlockElementNode, $createLineBreakNode, ArtificialNode__DO_NOT_USE, isInlineDomNode, $createParagraphNode } from 'lexical';
+import { $getEditor, createState, DEFAULT_EDITOR_DOM_CONFIG, $isLexicalNode, getStaticNodeConfig, defineExtension, shallowMergeConfig, RootNode, $getRoot, $getEditorDOMRenderConfig, isDOMDocumentNode, $isTextNode, $isElementNode, isHTMLElement, isDocumentFragment, $isRootOrShadowRoot, $isBlockElementNode, isBlockDomNode, $createLineBreakNode, ArtificialNode__DO_NOT_USE, isInlineDomNode, $createParagraphNode } from 'lexical';
+import { getKnownTypesAndNodes, LexicalBuilder, getExtensionDependencyFromEditor } from '@lexical/extension';
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -18,6 +18,565 @@ import { isDOMDocumentNode, $getRoot, $isElementNode, $isTextNode, getRegistered
  *
  */
 
+// Do not require this module directly! Use normal `invariant` calls.
+
+function formatDevErrorMessage(message) {
+  throw new Error(message);
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+let activeContext;
+
+/**
+ * @experimental
+ *
+ * The LexicalEditor with context
+ */
+
+/**
+ * @experimental
+ *
+ * @param contextRecord The ContextRecord
+ * @param cfg The configuration
+ * @returns The value or defaultValue of cfg
+ */
+function getContextValue(contextRecord, cfg) {
+  const {
+    key
+  } = cfg;
+  return contextRecord && key in contextRecord ? contextRecord[key] : cfg.defaultValue;
+}
+function getEditorContext(editor) {
+  return activeContext && activeContext.editor === editor ? activeContext : undefined;
+}
+
+/**
+ * @experimental
+ *
+ * @param sym The symbol for this ContextRecord (e.g. DOMRenderContextSymbol)
+ * @param editor The editor
+ * @returns The current context or undefined
+ */
+function getContextRecord(sym, editor) {
+  const editorContext = getEditorContext(editor);
+  return editorContext && editorContext[sym];
+}
+function toPair(contextRecord, pairOrUpdater) {
+  if ('cfg' in pairOrUpdater) {
+    const {
+      cfg,
+      updater
+    } = pairOrUpdater;
+    return [cfg, updater(getContextValue(contextRecord, cfg))];
+  }
+  return pairOrUpdater;
+}
+
+/**
+ * Construct a new context from a parent context and pairs
+ *
+ * @param pairs The pairs and updaters to build the context from
+ * @param parent The parent context
+ * @returns The new context
+ */
+function contextFromPairs(pairs, parent) {
+  let rval = parent;
+  for (const pairOrUpdater of pairs) {
+    const [k, v] = toPair(rval, pairOrUpdater);
+    const key = k.key;
+    if (rval === parent && getContextValue(rval, k) === v) {
+      continue;
+    }
+    const ctx = rval || createChildContext(parent);
+    ctx[key] = v;
+    rval = ctx;
+  }
+  return rval;
+}
+function createChildContext(parent) {
+  return Object.create(parent || null);
+}
+
+/**
+ * Create a context config pair that sets a value in the render context.
+ * @experimental
+ */
+function contextValue(cfg, value) {
+  return [cfg, value];
+}
+
+/**
+ * Create a context config updater that transforms a value in the render context.
+ * @experimental
+ */
+function contextUpdater(cfg, updater) {
+  return {
+    cfg,
+    updater
+  };
+}
+
+/**
+ * @internal
+ * @experimental
+ * @__NO_SIDE_EFFECTS__
+ */
+function $withFullContext(sym, contextRecord, f, editor = $getEditor()) {
+  const prevDOMContext = activeContext;
+  const parentEditorContext = getEditorContext(editor);
+  try {
+    activeContext = {
+      ...parentEditorContext,
+      editor,
+      [sym]: contextRecord
+    };
+    return f();
+  } finally {
+    activeContext = prevDOMContext;
+  }
+}
+
+/**
+ * @internal
+ * @experimental
+ * @__NO_SIDE_EFFECTS__
+ */
+function $withContext(sym, $defaults = () => undefined) {
+  return (cfg, editor = $getEditor()) => {
+    return f => {
+      const parentEditorContext = getEditorContext(editor);
+      const parentContextRecord = parentEditorContext && parentEditorContext[sym];
+      const contextRecord = contextFromPairs(cfg, parentContextRecord || $defaults(editor));
+      if (!contextRecord || contextRecord === parentContextRecord) {
+        return f();
+      }
+      return $withFullContext(sym, contextRecord, f, editor);
+    };
+  };
+}
+
+/**
+ * @experimental
+ * @internal
+ * @__NO_SIDE_EFFECTS__
+ */
+function createContextState(tag, name, getDefaultValue, isEqual) {
+  return Object.assign(createState(Symbol(name), {
+    isEqual,
+    parse: getDefaultValue
+  }), {
+    [tag]: true
+  });
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+const DOMRenderExtensionName = '@lexical/html/DOM';
+const DOMRenderContextSymbol = Symbol.for('@lexical/html/DOMExportContext');
+const ALWAYS_TRUE = () => true;
+
+function buildTypeTree(editorConfig) {
+  const t = {};
+  const {
+    nodes
+  } = getKnownTypesAndNodes(editorConfig);
+  for (const klass of nodes) {
+    const type = klass.getType();
+    t[type] = {
+      klass,
+      types: {}
+    };
+  }
+  for (const baseRec of Object.values(t)) {
+    if (baseRec) {
+      const baseType = baseRec.klass.getType();
+      for (let {
+        klass
+      } = baseRec; $isLexicalNode(klass.prototype); klass = Object.getPrototypeOf(klass)) {
+        const {
+          ownNodeType
+        } = getStaticNodeConfig(klass);
+        const superRec = ownNodeType && t[ownNodeType];
+        if (superRec) {
+          superRec.types[baseType] = true;
+        }
+      }
+    }
+  }
+  return t;
+}
+function buildNodePredicate(klass) {
+  return node => node instanceof klass;
+}
+function getPredicate(typeTree, {
+  nodes
+}) {
+  if (nodes === '*') {
+    return ALWAYS_TRUE;
+  }
+  let types = {};
+  const predicates = [];
+  for (const klassOrPredicate of nodes) {
+    if ('getType' in klassOrPredicate) {
+      const type = klassOrPredicate.getType();
+      if (types) {
+        const tree = typeTree[type];
+        if (!(tree !== undefined)) {
+          formatDevErrorMessage(`Node class ${klassOrPredicate.name} with type ${type} not registered in editor`);
+        }
+        types = Object.assign(types, tree.types);
+      }
+      predicates.push(buildNodePredicate(klassOrPredicate));
+    } else {
+      types = undefined;
+      predicates.push(klassOrPredicate);
+    }
+  }
+  if (types) {
+    return types;
+  } else if (predicates.length === 1) {
+    return predicates[0];
+  }
+  return node => {
+    for (const predicate of predicates) {
+      if (predicate(node)) {
+        return true;
+      }
+    }
+    return false;
+  };
+}
+function makePrerender() {
+  return {
+    $createDOM: [],
+    $decorateDOM: [],
+    $exportDOM: [],
+    $extractWithChild: [],
+    $getDOMSlot: [],
+    $shouldExclude: [],
+    $shouldInclude: [],
+    $updateDOM: []
+  };
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+function ignoreNext2(acc) {
+  return (node, _$next, editor) => acc(node, editor);
+}
+function ignoreNext3(acc) {
+  return (node, a, _$next, editor) => acc(node, a, editor);
+}
+function ignoreNext4(acc) {
+  return (node, a, b, _$next, editor) => acc(node, a, b, editor);
+}
+function ignoreNext5(acc) {
+  return (node, a, b, c, _$next, editor) => acc(node, a, b, c, editor);
+}
+function merge2($acc, $getOverride) {
+  return (node, editor) => {
+    const $next = () => $acc(node, editor);
+    const $override = $getOverride(node);
+    return $override ? $override(node, $next, editor) : $next();
+  };
+}
+function merge3(acc, $getOverride) {
+  return (node, a, editor) => {
+    const $next = () => acc(node, a, editor);
+    const $override = $getOverride(node);
+    return $override ? $override(node, a, $next, editor) : $next();
+  };
+}
+function merge4($acc, $getOverride) {
+  return (node, a, b, editor) => {
+    const $next = () => $acc(node, a, b, editor);
+    const $override = $getOverride(node);
+    return $override ? $override(node, a, b, $next, editor) : $next();
+  };
+}
+function merge5(acc, $getOverride) {
+  return (node, a, b, c, editor) => {
+    const $next = () => acc(node, a, b, c, editor);
+    const $override = $getOverride(node);
+    return $override ? $override(node, a, b, c, $next, editor) : $next();
+  };
+}
+function sequence4($acc, $getOverride) {
+  return (node, a, b, editor) => {
+    $acc(node, a, b, editor);
+    const $override = $getOverride(node);
+    if ($override) {
+      $override(node, a, b, editor);
+    }
+  };
+}
+function compilePrerenderKey(prerender, k, defaults, mergeFunction, ignoreNextFunction) {
+  let acc = defaults[k];
+  for (const pair of prerender[k]) {
+    if (typeof pair[0] === 'function') {
+      const [$predicate, $override] = pair;
+      acc = mergeFunction(acc, node => $predicate(node) && $override || undefined);
+    } else {
+      const typeOverrides = pair[1];
+      const compiled = {};
+      for (const type in typeOverrides) {
+        const arr = typeOverrides[type];
+        if (arr) {
+          compiled[type] = arr.reduce(($acc, $override) => mergeFunction($acc, () => $override), acc);
+        }
+      }
+      acc = mergeFunction(acc, node => {
+        const f = compiled[node.getType()];
+        return f && ignoreNextFunction(f);
+      });
+    }
+  }
+  defaults[k] = acc;
+}
+function addOverride(prerender, k, predicateOrTypes, override) {
+  if (!override) {
+    return;
+  }
+  const arr = prerender[k];
+  if (typeof predicateOrTypes === 'function') {
+    arr.push([predicateOrTypes, override]);
+  } else {
+    const last = arr[arr.length - 1];
+    let types;
+    if (last && last[0] === 'types') {
+      types = last[1];
+    } else {
+      types = {};
+      arr.push(['types', types]);
+    }
+    for (const type in predicateOrTypes) {
+      const typeArr = types[type] || [];
+      types[type] = typeArr;
+      typeArr.push(override);
+    }
+  }
+}
+function isWildcard(override) {
+  return override.nodes === '*';
+}
+function sortedOverrides(overrides) {
+  const byWildcard = [];
+  const byPredicate = [];
+  const byNode = [];
+  for (const override of overrides) {
+    if (isWildcard(override)) {
+      byWildcard.push(override);
+    } else if (Array.isArray(override.nodes)) {
+      for (const klassOrPredicate of override.nodes) {
+        if ($isLexicalNode(klassOrPredicate.prototype)) {
+          byNode.push(override.nodes.length === 1 ? override : {
+            ...override,
+            nodes: [klassOrPredicate]
+          });
+        } else {
+          byPredicate.push(override.nodes.length === 1 ? override : {
+            ...override,
+            nodes: [klassOrPredicate]
+          });
+        }
+      }
+    }
+  }
+  const depths = new Map();
+  const depthOf = klass => {
+    let depth = depths.get(klass);
+    if (depth === undefined) {
+      depth = 0;
+      for (let k = klass; $isLexicalNode(k.prototype); k = Object.getPrototypeOf(k)) {
+        depth++;
+      }
+      depths.set(klass, depth);
+    }
+    return depth;
+  };
+  byNode.sort((a, b) => depthOf(a.nodes[0]) - depthOf(b.nodes[0]));
+  return [...byNode, ...byPredicate, ...byWildcard];
+}
+function precompileDOMRenderConfigOverrides(editorConfig, overrides) {
+  const typeTree = buildTypeTree(editorConfig);
+  const prerender = makePrerender();
+  for (const override of sortedOverrides(overrides)) {
+    const predicateOrTypes = getPredicate(typeTree, override);
+    for (const k_ in prerender) {
+      const k = k_;
+      addOverride(prerender, k, predicateOrTypes, override[k]);
+    }
+  }
+  return prerender;
+}
+function identity(v) {
+  return v;
+}
+function compileDOMRenderConfigOverrides(editorConfig, {
+  overrides
+}) {
+  const prerender = precompileDOMRenderConfigOverrides(editorConfig, overrides);
+  const dom = {
+    ...DEFAULT_EDITOR_DOM_CONFIG,
+    ...editorConfig.dom
+  };
+  compilePrerenderKey(prerender, '$createDOM', dom, merge2, ignoreNext2);
+  compilePrerenderKey(prerender, '$exportDOM', dom, merge2, ignoreNext2);
+  compilePrerenderKey(prerender, '$extractWithChild', dom, merge5, ignoreNext5);
+  compilePrerenderKey(prerender, '$getDOMSlot', dom, merge3, ignoreNext3);
+  compilePrerenderKey(prerender, '$shouldExclude', dom, merge3, ignoreNext3);
+  compilePrerenderKey(prerender, '$shouldInclude', dom, merge3, ignoreNext3);
+  compilePrerenderKey(prerender, '$updateDOM', dom, merge4, ignoreNext4);
+  compilePrerenderKey(prerender, '$decorateDOM', dom, sequence4, identity);
+  return dom;
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+
+/**
+ * @experimental
+ *
+ * An extension that allows overriding the render and export behavior for an
+ * editor. This is highly experimental and subject to change from one version
+ * to the next.
+ **/
+const DOMRenderExtension = defineExtension({
+  build(editor, config, state) {
+    return {
+      defaults: contextFromPairs(config.contextDefaults, undefined)
+    };
+  },
+  config: {
+    contextDefaults: [],
+    overrides: []
+  },
+  html: {
+    // Define a RootNode export for $generateDOMFromRoot
+    export: new Map([[RootNode, () => {
+      const element = document.createElement('div');
+      element.role = 'textbox';
+      return {
+        element
+      };
+    }]])
+  },
+  init(editorConfig, config) {
+    editorConfig.dom = compileDOMRenderConfigOverrides(editorConfig, config);
+  },
+  mergeConfig(config, partial) {
+    const merged = shallowMergeConfig(config, partial);
+    for (const k of ['overrides', 'contextDefaults']) {
+      if (partial[k]) {
+        merged[k] = [...config[k], ...partial[k]];
+      }
+    }
+    return merged;
+  },
+  name: DOMRenderExtensionName
+});
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+/**
+ * Create a context state to be used during render.
+ *
+ * Note that to support the ValueOrUpdater pattern you can not use a
+ * function for V (but you may wrap it in an array or object).
+ *
+ * @experimental
+ * @__NO_SIDE_EFFECTS__
+ */
+function createRenderState(name, getDefaultValue, isEqual) {
+  return createContextState(DOMRenderContextSymbol, name, getDefaultValue, isEqual);
+}
+
+/**
+ * Render context state that is true if the export was initiated from the root of the document.
+ * @experimental
+ */
+const RenderContextRoot = createRenderState('root', Boolean);
+
+/**
+ * Render context state that is true if this is an export operation ($generateHtmlFromNodes).
+ * @experimental
+ */
+const RenderContextExport = createRenderState('isExport', Boolean);
+function getDefaultRenderContext(editor) {
+  const builder = LexicalBuilder.maybeFromEditor(editor);
+  return builder && builder.hasExtensionByName(DOMRenderExtensionName) ? getExtensionDependencyFromEditor(editor, DOMRenderExtension).output.defaults : undefined;
+}
+function getRenderContext(editor) {
+  return getContextRecord(DOMRenderContextSymbol, editor) || getDefaultRenderContext(editor);
+}
+
+/**
+ * Get a render context value during a DOM render or export operation.
+ * @experimental
+ */
+function $getRenderContextValue(cfg, editor = $getEditor()) {
+  return getContextValue(getRenderContext(editor), cfg);
+}
+
+/**
+ * Execute a callback within a render context with the given config pairs.
+ * @experimental
+ */
+const $withRenderContext = $withContext(DOMRenderContextSymbol, getDefaultRenderContext);
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+/**
+ * A convenience function for type inference when constructing DOM overrides for
+ * use with {@link DOMRenderExtension}.
+ *
+ * @experimental
+ * @__NO_SIDE_EFFECTS__
+ */
+
+function domOverride(nodes, config) {
+  return {
+    ...config,
+    nodes
+  };
+}
+
+function isStyleRule(rule) {
+  return rule.constructor.name === CSSStyleRule.name;
+}
 
 /**
  * Inlines CSS rules from <style> tags onto matching elements as inline styles.
@@ -54,7 +613,7 @@ function inlineStylesFromStyleSheets(doc) {
         continue;
       }
       for (const rule of Array.from(rules)) {
-        if (!(rule instanceof CSSStyleRule)) {
+        if (!isStyleRule(rule)) {
           continue;
         }
         let elements;
@@ -64,7 +623,7 @@ function inlineStylesFromStyleSheets(doc) {
           continue;
         }
         for (const el of Array.from(elements)) {
-          if (!(el instanceof HTMLElement)) {
+          if (!isHTMLElement(el)) {
             continue;
           }
           const originalProps = getOriginalInlineProps(el);
@@ -81,6 +640,7 @@ function inlineStylesFromStyleSheets(doc) {
     // styleSheets API not supported in this environment
   }
 }
+const IGNORE_TAGS = new Set(['STYLE', 'SCRIPT']);
 
 /**
  * How you parse your html string to get a document is left up to you. In the browser you can use the native
@@ -92,69 +652,97 @@ function $generateNodesFromDOM(editor, dom) {
     inlineStylesFromStyleSheets(dom);
   }
   const elements = isDOMDocumentNode(dom) ? dom.body.childNodes : dom.childNodes;
-  let lexicalNodes = [];
+  const lexicalNodes = [];
   const allArtificialNodes = [];
   for (const element of elements) {
     if (!IGNORE_TAGS.has(element.nodeName)) {
       const lexicalNode = $createNodesFromDOM(element, editor, allArtificialNodes, false);
       if (lexicalNode !== null) {
-        lexicalNodes = lexicalNodes.concat(lexicalNode);
+        for (const node of lexicalNode) {
+          lexicalNodes.push(node);
+        }
       }
     }
   }
   $unwrapArtificialNodes(allArtificialNodes);
   return lexicalNodes;
 }
-function $generateHtmlFromNodes(editor, selection) {
+
+/**
+ * Generate DOM nodes from the editor state into the given container element,
+ * using the editor's {@link EditorDOMRenderConfig}.
+ * @experimental
+ */
+function $generateDOMFromNodes(container, selection = null, editor = $getEditor()) {
+  return $withRenderContext([contextValue(RenderContextExport, true)], editor)(() => {
+    const root = $getRoot();
+    const domConfig = $getEditorDOMRenderConfig(editor);
+    const parentElementAppend = container.append.bind(container);
+    for (const topLevelNode of root.getChildren()) {
+      $appendNodesToHTML(editor, topLevelNode, parentElementAppend, selection, domConfig);
+    }
+    return container;
+  });
+}
+
+/**
+ * Generate DOM nodes from a root node into the given container element,
+ * including the root node itself. Uses the editor's {@link EditorDOMRenderConfig}.
+ * @experimental
+ */
+function $generateDOMFromRoot(container, root = $getRoot()) {
+  const editor = $getEditor();
+  return $withRenderContext([contextValue(RenderContextExport, true), contextValue(RenderContextRoot, true)], editor)(() => {
+    const selection = null;
+    const domConfig = $getEditorDOMRenderConfig(editor);
+    const parentElementAppend = container.append.bind(container);
+    $appendNodesToHTML(editor, root, parentElementAppend, selection, domConfig);
+    return container;
+  });
+}
+function $generateHtmlFromNodes(editor, selection = null) {
   if (typeof document === 'undefined' || typeof window === 'undefined' && typeof global.window === 'undefined') {
-    throw new Error('To use $generateHtmlFromNodes in headless mode please initialize a headless browser implementation such as JSDom before calling this function.');
-  }
-  const container = document.createElement('div');
-  const root = $getRoot();
-  const topLevelChildren = root.getChildren();
-  for (let i = 0; i < topLevelChildren.length; i++) {
-    const topLevelNode = topLevelChildren[i];
-    $appendNodesToHTML(editor, topLevelNode, container, selection);
+    {
+      formatDevErrorMessage(`To use $generateHtmlFromNodes in headless mode please initialize a headless browser implementation such as JSDom or use withDOM from @lexical/headless/dom before calling this function.`);
+    }
   }
-  return container.innerHTML;
+  return $generateDOMFromNodes(document.createElement('div'), selection, editor).innerHTML;
 }
-function $appendNodesToHTML(editor, currentNode, parentElement, selection = null) {
-  let shouldInclude = selection !== null ? currentNode.isSelected(selection) : true;
-  const shouldExclude = $isElementNode(currentNode) && currentNode.excludeFromCopy('html');
+function $appendNodesToHTML(editor, currentNode, parentElementAppend, selection = null, domConfig = $getEditorDOMRenderConfig(editor)) {
+  let shouldInclude = domConfig.$shouldInclude(currentNode, selection, editor);
+  const shouldExclude = domConfig.$shouldExclude(currentNode, selection, editor);
   let target = currentNode;
   if (selection !== null && $isTextNode(currentNode)) {
     target = $sliceSelectedTextNodeContent(selection, currentNode, 'clone');
   }
-  const children = $isElementNode(target) ? target.getChildren() : [];
-  const registeredNode = getRegisteredNode(editor, target.getType());
-  let exportOutput;
-
-  // Use HTMLConfig overrides, if available.
-  if (registeredNode && registeredNode.exportDOM !== undefined) {
-    exportOutput = registeredNode.exportDOM(editor, target);
-  } else {
-    exportOutput = target.exportDOM(editor);
-  }
+  const exportProps = domConfig.$exportDOM(target, editor);
   const {
     element,
-    after
-  } = exportOutput;
+    after,
+    append,
+    $getChildNodes
+  } = exportProps;
   if (!element) {
     return false;
   }
   const fragment = document.createDocumentFragment();
-  for (let i = 0; i < children.length; i++) {
-    const childNode = children[i];
-    const shouldIncludeChild = $appendNodesToHTML(editor, childNode, fragment, selection);
-    if (!shouldInclude && $isElementNode(currentNode) && shouldIncludeChild && currentNode.extractWithChild(childNode, selection, 'html')) {
+  const children = $getChildNodes ? $getChildNodes() : $isElementNode(target) ? target.getChildren() : [];
+  const fragmentAppend = fragment.append.bind(fragment);
+  for (const childNode of children) {
+    const shouldIncludeChild = $appendNodesToHTML(editor, childNode, fragmentAppend, selection, domConfig);
+    if (!shouldInclude && shouldIncludeChild && domConfig.$extractWithChild(currentNode, childNode, selection, 'html', editor)) {
       shouldInclude = true;
     }
   }
   if (shouldInclude && !shouldExclude) {
     if (isHTMLElement(element) || isDocumentFragment(element)) {
-      element.append(fragment);
+      if (append) {
+        append(fragment);
+      } else {
+        element.append(fragment);
+      }
     }
-    parentElement.append(element);
+    parentElementAppend(element);
     if (after) {
       const newElement = after.call(target, element);
       if (newElement) {
@@ -166,7 +754,7 @@ function $appendNodesToHTML(editor, currentNode, parentElement, selection = null
       }
     }
   } else {
-    parentElement.append(fragment);
+    parentElementAppend(fragment);
   }
   return shouldInclude;
 }
@@ -189,9 +777,8 @@ function getConversionFunction(domNode, editor) {
   }
   return currentConversion !== null ? currentConversion.conversion : null;
 }
-const IGNORE_TAGS = new Set(['STYLE', 'SCRIPT']);
 function $createNodesFromDOM(node, editor, allArtificialNodes, hasBlockAncestorLexicalNode, forChildMap = new Map(), parentLexicalNode) {
-  let lexicalNodes = [];
+  const lexicalNodes = [];
   if (IGNORE_TAGS.has(node.nodeName)) {
     return lexicalNodes;
   }
@@ -245,11 +832,13 @@ function $createNodesFromDOM(node, editor, allArtificialNodes, hasBlockAncestorL
     if (childLexicalNodes.length > 0) {
       // If it hasn't been converted to a LexicalNode, we hoist its children
       // up to the same level as it.
-      lexicalNodes = lexicalNodes.concat(childLexicalNodes);
+      for (const childNode of childLexicalNodes) {
+        lexicalNodes.push(childNode);
+      }
     } else {
       if (isBlockDomNode(node) && isDomNodeBetweenTwoInlineNodes(node)) {
         // Empty block dom node that hasnt been converted, we replace it with a linebreak if its between inline nodes
-        lexicalNodes = lexicalNodes.concat($createLineBreakNode());
+        lexicalNodes.push($createLineBreakNode());
       }
     }
   } else {
@@ -287,18 +876,18 @@ function wrapContinuousInlines(domNode, nodes, createWrapperFn) {
   return out;
 }
 function $unwrapArtificialNodes(allArtificialNodes) {
+  // Replace artificial node with its children, inserting a linebreak
+  // between adjacent artificial nodes
   for (const node of allArtificialNodes) {
-    if (node.getNextSibling() instanceof ArtificialNode__DO_NOT_USE) {
+    if (node.getParent() && node.getNextSibling() instanceof ArtificialNode__DO_NOT_USE) {
       node.insertAfter($createLineBreakNode());
     }
   }
-  // Replace artificial node with it's children
   for (const node of allArtificialNodes) {
-    const children = node.getChildren();
-    for (const child of children) {
-      node.insertBefore(child);
+    const parent = node.getParent();
+    if (parent) {
+      parent.splice(node.getIndexWithinParent(), 1, node.getChildren());
     }
-    node.remove();
   }
 }
 function isDomNodeBetweenTwoInlineNodes(node) {
@@ -308,4 +897,4 @@ function isDomNodeBetweenTwoInlineNodes(node) {
   return isInlineDomNode(node.nextSibling) && isInlineDomNode(node.previousSibling);
 }
 
-export { $generateHtmlFromNodes, $generateNodesFromDOM };
+export { $generateDOMFromNodes, $generateDOMFromRoot, $generateHtmlFromNodes, $generateNodesFromDOM, $getRenderContextValue, $withRenderContext, DOMRenderExtension, RenderContextExport, RenderContextRoot, contextUpdater, contextValue, createRenderState, domOverride };