@sveltia/ui 0.78.3 → 0.79.0

package/dist/components/text-editor/core.js

@@ -1,4 +1,5 @@
 import {
+  CodeExtension,
   CodeHighlightNode,
   CodeNode,
   $createCodeNode as createCodeNode,
@@ -6,7 +7,7 @@ import {
   $isCodeNode as isCodeNode,
 } from '@lexical/code-core';
 import { registerDragonSupport } from '@lexical/dragon';
-import { HorizontalRuleNode } from '@lexical/extension';
+import { buildEditorFromExtensions, HorizontalRuleNode } from '@lexical/extension';
 import { createEmptyHistoryState, registerHistory } from '@lexical/history';
 import {
   $isLinkNode as isLinkNode,
@@ -41,6 +42,7 @@ import {
   COMMAND_PRIORITY_LOW,
   COMMAND_PRIORITY_NORMAL,
   createEditor,
+  defineExtension,
   DELETE_CHARACTER_COMMAND,
   $createParagraphNode as createParagraphNode,
   $createTextNode as createTextNode,
@@ -50,6 +52,7 @@ import {
   $getSelection as getSelection,
   INDENT_CONTENT_COMMAND,
   INSERT_PARAGRAPH_COMMAND,
+  KEY_ENTER_COMMAND,
   $insertNodes as insertNodes,
   $isDecoratorNode as isDecoratorNode,
   $isElementNode as isElementNode,
@@ -87,7 +90,8 @@ import { HR } from './transformers/hr.js';
 import { TABLE } from './transformers/table.js';
 
 /**
- * @import { CreateEditorArgs, LexicalEditor } from 'lexical';
+ * @import { LexicalEditor, LexicalNode } from 'lexical';
+ * @import { ListType } from '@lexical/list';
  * @import { Transformer } from '@lexical/markdown';
  * @import {
  * TextEditorBlockType,
@@ -96,7 +100,7 @@ import { TABLE } from './transformers/table.js';
  * TextEditorInlineType,
  * TextEditorNodeType,
  * TextEditorSelectionState,
- * } from '../../typedefs';
+ * } from '../../typedefs.js';
  */
 
 /**
@@ -160,7 +164,7 @@ export const isStaticDecoratorContent = (target) => {
  * block, or a new paragraph if the adjacent nodes are decorators, where nothing can be typed.
  * @returns {boolean} Whether the selection has been moved.
  */
-export const $moveCaretIntoBlock = () => {
+const $moveCaretIntoBlock = () => {
   const selection = getSelection();
 
   if (
@@ -203,17 +207,29 @@ export const $moveCaretIntoBlock = () => {
 };
 
 /**
- * Move the focus to the editor, and the caret to right after the given decorator node, like an
- * editor component: the start of the next block, or a new paragraph if there’s none to type in.
+ * Move the focus to the editor, and run the given function with the node of the given element
+ * within an editor update.
  * @param {LexicalEditor} editor Editor instance.
- * @param {Element} decorator Element of the decorator node.
+ * @param {Element} element Element of the node.
+ * @param {(node: ReturnType<typeof getNearestNodeFromDOMNode>) => void} callback Function to be
+ * called with the node.
  */
-const placeCaretAfterDecorator = (editor, decorator) => {
+const updateNodeWithFocus = (editor, element, callback) => {
   editor.getRootElement()?.focus({ preventScroll: true });
 
   editor.update(() => {
-    const node = getNearestNodeFromDOMNode(decorator);
+    callback(getNearestNodeFromDOMNode(element));
+  });
+};
 
+/**
+ * Move the focus to the editor, and the caret to right after the given decorator node, like an
+ * editor component: the start of the next block, or a new paragraph if there’s none to type in.
+ * @param {LexicalEditor} editor Editor instance.
+ * @param {Element} decorator Element of the decorator node.
+ */
+const placeCaretAfterDecorator = (editor, decorator) => {
+  updateNodeWithFocus(editor, decorator, (node) => {
     // The element has been found by its `data-lexical-decorator` attribute
     /* v8 ignore next 3 */
     if (!isDecoratorNode(node)) {
@@ -231,11 +247,7 @@ const placeCaretAfterDecorator = (editor, decorator) => {
  * @param {Element} block Element of the block node.
  */
 const placeCaretAtBlockEnd = (editor, block) => {
-  editor.getRootElement()?.focus({ preventScroll: true });
-
-  editor.update(() => {
-    const node = getNearestNodeFromDOMNode(block);
-
+  updateNodeWithFocus(editor, block, (node) => {
     /* v8 ignore next 3 */
     if (!isElementNode(node)) {
       return;
@@ -352,6 +364,14 @@ export const isSafeLinkURL = (url) => {
   return !scheme || SAFE_LINK_URL_SCHEMES.includes(scheme.toLowerCase());
 };
 
+/**
+ * Get the given node itself if it’s an element node, or its nearest element node ancestor.
+ * @param {LexicalNode} node Node.
+ * @returns {ElementNode | null} Element node.
+ */
+const getNearestElementNode = (node) =>
+  node instanceof ElementNode ? node : getNearestNodeOfType(node, ElementNode);
+
 /**
  * Get the current selection’s block node key as well as block and inline level types.
  * @internal
@@ -375,7 +395,7 @@ export const getSelectionTypes = () => {
   const inlineTypes = TEXT_FORMAT_BUTTON_TYPES.filter((type) => selection.hasFormat(type));
 
   if (anchor.getType() !== 'root') {
-    parent = anchor instanceof ElementNode ? anchor : getNearestNodeOfType(anchor, ElementNode);
+    parent = getNearestElementNode(anchor);
 
     if (isLinkNode(parent)) {
       inlineTypes.push('link');
@@ -529,251 +549,208 @@ export const getComponentMarkdown = ({ node, createNode, transformer, createMark
 };
 
 /**
- * Initialize the Lexical editor.
- * @param {TextEditorConfig} config Editor configuration.
- * @returns {InitEditorResult} Editor instance and cleanup.
+ * Combine the given cleanup handlers into one, which calls them in the given order. Missing
+ * handlers, like those of the features that are not enabled, are skipped.
+ * @param {...((() => void) | undefined | null)} unregisters Cleanup handlers.
+ * @returns {() => void} Combined cleanup handler.
  */
-export const initEditor = ({
-  enabledButtons = [],
-  components = [],
-  useMarkdownShortcuts,
-  isCodeEditor = false,
-  defaultLanguage = 'plain',
-}) => {
-  /** @type {CreateEditorArgs} */
-  const editorConfig = {
-    namespace: 'editor',
-    nodes: [
-      ...components.map(({ node }) => node),
-      ...new Set(
-        Object.entries(NODE_MAP)
-          .filter(([button]) => enabledButtons.includes(/** @type {TextEditorNodeType} */ (button)))
-          .flatMap(([, nodes]) => nodes),
-      ),
-      ...(isCodeEditor
-        ? [CodeNode, CodeHighlightNode]
-        : // We haven’t implemented buttons for horizontal rules and tables yet, but we still want
-          // to support them in Markdown, so always include them in the node list
-          [HorizontalRuleNode, TableNode, TableCellNode, TableRowNode]),
-    ],
-    theme: EDITOR_THEME,
-  };
-
-  /** @type {Transformer[]} */
-  const enabledTransformers = [
-    ...components.map(({ transformer }) => transformer),
-    ...new Set(
-      Object.entries(TRANSFORMER_MAP)
-        .filter(([button]) => enabledButtons.includes(/** @type {TextEditorNodeType} */ (button)))
-        .flatMap(([, transformers]) => transformers),
-    ),
-    ...(isCodeEditor
-      ? [CODE]
-      : // See the comment above for why we always include horizontal rules and tables
-        [HR, TABLE]),
-  ];
-
-  const editor = createEditor(editorConfig);
-  /** @type {Array<() => void>} */
-  const unregisters = [];
+const mergeUnregisters = (...unregisters) => {
+  const handlers = unregisters.filter((unregister) => typeof unregister === 'function');
 
-  /**
-   * Add a cleanup handler if it is defined.
-   * @param {(() => void) | undefined | null} unregister Cleanup handler.
-   */
-  const addUnregister = (unregister) => {
-    /* v8 ignore next */
-    if (typeof unregister === 'function') {
-      unregisters.push(unregister);
-    }
+  return () => {
+    handlers.forEach((unregister) => unregister());
   };
+};
 
-  addUnregister(registerRichText(editor));
-  addUnregister(registerDragonSupport(editor));
-  // Cap the undo stack, as each entry holds a snapshot of the whole document
-  addUnregister(
-    registerHistory(
-      editor,
-      createEmptyHistoryState(),
-      1000,
-      undefined,
-      undefined,
-      HISTORY_MAX_DEPTH,
-    ),
-  );
-
-  if (isCodeEditor) {
+/**
+ * Register the commands and transform specific to the code editor, which only holds a single code
+ * block.
+ * @param {LexicalEditor} editor Editor instance.
+ * @param {string} defaultLanguage Default language of the code block.
+ * @returns {() => void} Cleanup handler.
+ */
+const registerCodeEditorCommands = (editor, defaultLanguage) =>
+  mergeUnregisters(
     // Pressing Backspace at the very beginning of a code block converts it to a paragraph by
     // default (`CodeNode.collapseAtStart()`), which makes no sense when the editor only holds a
     // single code block, so ignore it
-    addUnregister(
-      editor.registerCommand(
-        DELETE_CHARACTER_COMMAND,
-        (isBackward) => {
-          const selection = getSelection();
-
-          if (!isBackward || !isRangeSelection(selection) || !selection.isCollapsed()) {
-            return false;
-          }
-
-          const { offset } = selection.anchor;
-          const node = selection.anchor.getNode();
-          const codeNode = isCodeNode(node) ? node : getNearestNodeOfType(node, CodeNode);
-
-          return (
-            !!codeNode &&
-            offset === 0 &&
-            (node.is(codeNode) || !!codeNode.getFirstDescendant()?.is(node))
-          );
-        },
-        COMMAND_PRIORITY_LOW,
-      ),
-    );
-
-    // Make sure the editor always has a single code block. This runs within the same update that
-    // made the change, so the user never gets a chance to type in anything else
-    addUnregister(
-      editor.registerNodeTransform(RootNode, (root) => {
-        const children = root.getChildren();
+    editor.registerCommand(
+      DELETE_CHARACTER_COMMAND,
+      (isBackward) => {
+        const selection = getSelection();
 
-        if (children.length === 1 && isCodeNode(children[0])) {
-          return;
+        if (!isBackward || !isRangeSelection(selection) || !selection.isCollapsed()) {
+          return false;
         }
 
-        const [firstChild] = children;
+        const { offset } = selection.anchor;
+        const node = selection.anchor.getNode();
+        const codeNode = isCodeNode(node) ? node : getNearestNodeOfType(node, CodeNode);
 
-        if (children.length === 1 && isElementNode(firstChild)) {
-          const node = createCodeNode(defaultLanguage);
+        return (
+          !!codeNode &&
+          offset === 0 &&
+          (node.is(codeNode) || !!codeNode.getFirstDescendant()?.is(node))
+        );
+      },
+      COMMAND_PRIORITY_LOW,
+    ),
+    // Pressing Enter after two blank lines at the end of a code block exits it by default
+    // (`CodeExtension`), adding a paragraph after it, which would be left out of the code. Insert a
+    // new line instead, which `CodeNode.insertNewAfter()` does without exiting when the extension
+    // is in place. This has to take priority over the extension’s own handler
+    editor.registerCommand(
+      KEY_ENTER_COMMAND,
+      (event) => {
+        const selection = getSelection();
+
+        if (!isRangeSelection(selection)) {
+          return false;
+        }
 
-          // Keep the content and the selection
-          firstChild.replace(node, true);
-        } else if (children.length === 0) {
-          const node = createCodeNode(defaultLanguage);
+        event?.preventDefault();
 
-          root.append(node);
-          node.selectStart();
-        }
-      }),
-    );
-  }
+        return editor.dispatchCommand(INSERT_PARAGRAPH_COMMAND, undefined);
+      },
+      COMMAND_PRIORITY_NORMAL,
+    ),
+    // Make sure the editor always has a single code block. This runs within the same update that
+    // made the change, so the user never gets a chance to type in anything else
+    editor.registerNodeTransform(RootNode, (root) => {
+      const children = root.getChildren();
 
-  if (useMarkdownShortcuts) {
-    addUnregister(registerMarkdownShortcuts(editor, enabledTransformers));
-  }
+      if (children.length === 1 && isCodeNode(children[0])) {
+        return;
+      }
 
-  if (enabledButtons.includes('code-block') || isCodeEditor) {
-    addUnregister(
-      registerCodeHighlighting(editor, {
-        ...shikiTokenizer,
-        defaultLanguage,
-        defaultTheme: getCodeTheme(),
-      }),
-    );
+      const [firstChild] = children;
 
-    addUnregister(observeCodeTheme(editor));
-  }
+      if (children.length === 1 && isElementNode(firstChild)) {
+        const node = createCodeNode(defaultLanguage);
 
-  // https://github.com/facebook/lexical/blob/main/packages/lexical-link/src/LexicalLinkExtension.ts
-  if (enabledButtons.includes('link')) {
-    addUnregister(
-      editor.registerCommand(
-        TOGGLE_LINK_COMMAND,
-        (payload) => {
-          // Ignore an unsafe URL rather than linking to it
-          if (typeof payload === 'string' && !isSafeLinkURL(payload)) {
-            return true;
-          }
+        // Keep the content and the selection
+        firstChild.replace(node, true);
+      } else if (children.length === 0) {
+        const node = createCodeNode(defaultLanguage);
 
-          toggleLink(typeof payload === 'string' ? payload : null);
+        root.append(node);
+        node.selectStart();
+      }
+    }),
+  );
 
+/**
+ * Register the link command, and the paste handler that turns a pasted URL into a link.
+ * @param {LexicalEditor} editor Editor instance.
+ * @returns {() => void} Cleanup handler.
+ * @see https://github.com/facebook/lexical/blob/main/packages/lexical-link/src/LexicalLinkExtension.ts
+ */
+const registerLinkCommands = (editor) =>
+  mergeUnregisters(
+    editor.registerCommand(
+      TOGGLE_LINK_COMMAND,
+      (payload) => {
+        // Ignore an unsafe URL rather than linking to it
+        if (typeof payload === 'string' && !isSafeLinkURL(payload)) {
           return true;
-        },
-        COMMAND_PRIORITY_NORMAL,
-      ),
-    );
+        }
 
-    addUnregister(
-      editor.registerCommand(
-        PASTE_COMMAND,
-        (event) => {
-          const selection = getSelection();
+        toggleLink(typeof payload === 'string' ? payload : null);
 
-          if (
-            !isRangeSelection(selection) ||
-            !objectKlassEquals(event, ClipboardEvent) ||
-            !event.clipboardData ||
-            /** @type {HTMLElement} */ (event.target).matches('input, textarea')
-          ) {
-            return false;
-          }
+        return true;
+      },
+      COMMAND_PRIORITY_NORMAL,
+    ),
+    editor.registerCommand(
+      PASTE_COMMAND,
+      (event) => {
+        const selection = getSelection();
+
+        if (
+          !isRangeSelection(selection) ||
+          !objectKlassEquals(event, ClipboardEvent) ||
+          !event.clipboardData ||
+          /** @type {HTMLElement} */ (event.target).matches('input, textarea')
+        ) {
+          return false;
+        }
 
-          const clipboardText = event.clipboardData.getData('text').trim();
+        const clipboardText = event.clipboardData.getData('text').trim();
 
-          // Paste an unsafe URL as plain text rather than as a link
-          if (!isURL(clipboardText) || !isSafeLinkURL(clipboardText)) {
-            return false;
-          }
+        // Paste an unsafe URL as plain text rather than as a link
+        if (!isURL(clipboardText) || !isSafeLinkURL(clipboardText)) {
+          return false;
+        }
 
-          if (selection.isCollapsed()) {
-            insertNodes([createTextNode(clipboardText)]);
-          }
+        if (selection.isCollapsed()) {
+          insertNodes([createTextNode(clipboardText)]);
+        }
 
-          if (
-            !selection
-              .getNodes()
-              .some((node) => isElementNode(node) || (isTextNode(node) && !node.isSimpleText()))
-          ) {
-            editor.dispatchCommand(TOGGLE_LINK_COMMAND, clipboardText);
-            event.preventDefault();
-            return true;
-          }
+        if (
+          !selection
+            .getNodes()
+            .some((node) => isElementNode(node) || (isTextNode(node) && !node.isSimpleText()))
+        ) {
+          editor.dispatchCommand(TOGGLE_LINK_COMMAND, clipboardText);
+          event.preventDefault();
+          return true;
+        }
 
-          return false;
-        },
-        COMMAND_PRIORITY_LOW,
-      ),
-    );
-  }
+        return false;
+      },
+      COMMAND_PRIORITY_LOW,
+    ),
+  );
 
-  if (enabledButtons.includes('bulleted-list')) {
-    addUnregister(
-      editor.registerCommand(
-        INSERT_UNORDERED_LIST_COMMAND,
-        () => {
-          insertList('bullet');
+/**
+ * List buttons, along with the command to insert the list and its type.
+ * @type {[TextEditorBlockType, typeof INSERT_UNORDERED_LIST_COMMAND, ListType][]}
+ */
+const LIST_COMMANDS = [
+  ['bulleted-list', INSERT_UNORDERED_LIST_COMMAND, 'bullet'],
+  ['numbered-list', INSERT_ORDERED_LIST_COMMAND, 'number'],
+];
 
-          return true;
-        },
-        COMMAND_PRIORITY_NORMAL,
-      ),
-    );
-  }
+/**
+ * Register the commands for the enabled list buttons.
+ * @param {LexicalEditor} editor Editor instance.
+ * @param {TextEditorConfig['enabledButtons']} enabledButtons Enabled buttons.
+ * @returns {() => void} Cleanup handler.
+ */
+const registerListCommands = (editor, enabledButtons = []) => {
+  const enabledLists = LIST_COMMANDS.filter(([button]) => enabledButtons.includes(button));
 
-  if (enabledButtons.includes('numbered-list')) {
-    addUnregister(
+  return mergeUnregisters(
+    ...enabledLists.map(([, command, listType]) =>
       editor.registerCommand(
-        INSERT_ORDERED_LIST_COMMAND,
+        command,
         () => {
-          insertList('number');
+          insertList(listType);
 
           return true;
         },
         COMMAND_PRIORITY_NORMAL,
       ),
-    );
-  }
-
-  if (enabledButtons.includes('bulleted-list') || enabledButtons.includes('numbered-list')) {
+    ),
     // https://github.com/facebook/lexical/blob/main/packages/lexical-react/src/shared/useList.ts
-    addUnregister(
-      editor.registerCommand(
-        INSERT_PARAGRAPH_COMMAND,
-        () => handleListInsertParagraph(),
-        COMMAND_PRIORITY_NORMAL,
-      ),
-    );
-  }
+    enabledLists.length
+      ? editor.registerCommand(
+          INSERT_PARAGRAPH_COMMAND,
+          () => handleListInsertParagraph(),
+          COMMAND_PRIORITY_NORMAL,
+        )
+      : undefined,
+  );
+};
 
+/**
+ * Register an update listener that triggers the Update event with the Markdown value, debounced so
+ * only the latest update in a burst triggers it.
+ * @param {LexicalEditor} editor Editor instance.
+ * @param {Transformer[]} enabledTransformers Enabled Markdown transformers.
+ * @returns {() => void} Cleanup handler.
+ */
+const registerUpdateEvent = (editor, enabledTransformers) => {
   /** Incremented on every update, so only the latest one in a burst triggers the Update event. */
   let updateCount = 0;
   /** Whether the content has changed since the Update event was last triggered. */
@@ -782,11 +759,10 @@ export const initEditor = ({
   let lastValue = undefined;
   let disposed = false;
 
-  addUnregister(() => {
-    disposed = true;
-  });
-
-  addUnregister(
+  return mergeUnregisters(
+    () => {
+      disposed = true;
+    },
     editor.registerUpdateListener(({ dirtyElements, dirtyLeaves } = /** @type {any} */ ({})) => {
       // An update that only moves the selection leaves no dirty nodes. Remember whether any update
       // in the burst changed the content, so the document is only converted again when needed.
@@ -820,52 +796,147 @@ export const initEditor = ({
       })();
     }),
   );
+};
 
-  // `editor.registerCommand(KEY_TAB_COMMAND, listener, priority)` doesn’t work for some reason, so
-  // use another method
-  addUnregister(
-    editor.registerRootListener((root) => {
-      if (!root) {
-        return undefined;
-      }
-
-      /**
-       * Handle Tab indentation shortcuts.
-       * @param {KeyboardEvent} event Keydown event.
-       */
-      const onKeydown = (event) => {
-        editor.update(() => {
-          if (event.key === 'Tab') {
-            const selection = getSelection();
+/**
+ * Register a handler for the Tab key that indents a list item, or unindents it with Shift.
+ * `editor.registerCommand(KEY_TAB_COMMAND, listener, priority)` doesn’t work for some reason, so
+ * listen to the `keydown` event on the root element instead.
+ * @param {LexicalEditor} editor Editor instance.
+ * @returns {() => void} Cleanup handler.
+ */
+const registerTabIndentation = (editor) =>
+  editor.registerRootListener((root) => {
+    if (!root) {
+      return undefined;
+    }
 
-            if (!isRangeSelection(selection)) {
-              return;
-            }
+    /**
+     * Handle Tab indentation shortcuts.
+     * @param {KeyboardEvent} event Keydown event.
+     */
+    const onKeydown = (event) => {
+      editor.update(() => {
+        if (event.key === 'Tab') {
+          const selection = getSelection();
 
-            const anchor = selection.anchor.getNode();
+          if (!isRangeSelection(selection)) {
+            return;
+          }
 
-            const parent =
-              anchor instanceof ElementNode ? anchor : getNearestNodeOfType(anchor, ElementNode);
+          const parent = getNearestElementNode(selection.anchor.getNode());
 
-            if (isListItemNode(parent) && parent.canIndent()) {
-              if (!event.shiftKey) {
-                event.preventDefault();
-                editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined);
-              } else if (parent.getIndent() > 0) {
-                event.preventDefault();
-                editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined);
-              }
+          if (isListItemNode(parent) && parent.canIndent()) {
+            if (!event.shiftKey) {
+              event.preventDefault();
+              editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined);
+            } else if (parent.getIndent() > 0) {
+              event.preventDefault();
+              editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined);
             }
           }
-        });
-      };
+        }
+      });
+    };
 
-      root.addEventListener('keydown', onKeydown);
+    root.addEventListener('keydown', onKeydown);
 
-      return () => {
-        root.removeEventListener('keydown', onKeydown);
-      };
-    }),
+    return () => {
+      root.removeEventListener('keydown', onKeydown);
+    };
+  });
+
+/**
+ * Initialize the Lexical editor.
+ * @param {TextEditorConfig} config Editor configuration.
+ * @returns {InitEditorResult} Editor instance and cleanup.
+ */
+export const initEditor = ({
+  enabledButtons = [],
+  components = [],
+  useMarkdownShortcuts,
+  isCodeEditor = false,
+  defaultLanguage = 'plain',
+}) => {
+  const hasCodeBlock = enabledButtons.includes('code-block') || isCodeEditor;
+
+  const editorExtension = defineExtension({
+    name: '@sveltia/ui/editor',
+    namespace: 'editor',
+    // `CodeNode` expects the editor to be built with `CodeExtension`, which also registers the
+    // `CodeNode` and `CodeHighlightNode` nodes
+    dependencies: hasCodeBlock ? [CodeExtension] : [],
+    // Start with an empty editor state like `createEditor` does, instead of a blank paragraph. The
+    // Markdown import then becomes the first state in the history, so undoing right after the
+    // editor loads doesn’t revert it to the blank paragraph and clear the value
+    $initialEditorState: null,
+    nodes: [
+      ...components.map(({ node }) => node),
+      ...new Set(
+        Object.entries(NODE_MAP)
+          .filter(([button]) => enabledButtons.includes(/** @type {TextEditorNodeType} */ (button)))
+          .flatMap(([, nodes]) => nodes),
+      ),
+      ...(isCodeEditor
+        ? [CodeNode, CodeHighlightNode]
+        : // We haven’t implemented buttons for horizontal rules and tables yet, but we still want
+          // to support them in Markdown, so always include them in the node list
+          [HorizontalRuleNode, TableNode, TableCellNode, TableRowNode]),
+    ],
+    theme: EDITOR_THEME,
+    /**
+     * Log an error like `createEditor` does by default, instead of throwing it.
+     * @param {Error} error Error.
+     */
+    onError: (error) => {
+      // eslint-disable-next-line no-console
+      console.error(error);
+    },
+  });
+
+  /** @type {Transformer[]} */
+  const enabledTransformers = [
+    ...components.map(({ transformer }) => transformer),
+    ...new Set(
+      Object.entries(TRANSFORMER_MAP)
+        .filter(([button]) => enabledButtons.includes(/** @type {TextEditorNodeType} */ (button)))
+        .flatMap(([, transformers]) => transformers),
+    ),
+    ...(isCodeEditor
+      ? [CODE]
+      : // See the comment above for why we always include horizontal rules and tables
+        [HR, TABLE]),
+  ];
+
+  const editor = buildEditorFromExtensions(editorExtension);
+
+  // The order matters, as listeners with the same priority are called in the registration order
+  const unregister = mergeUnregisters(
+    registerRichText(editor),
+    registerDragonSupport(editor),
+    // Cap the undo stack, as each entry holds a snapshot of the whole document
+    registerHistory(
+      editor,
+      createEmptyHistoryState(),
+      1000,
+      undefined,
+      undefined,
+      HISTORY_MAX_DEPTH,
+    ),
+    isCodeEditor ? registerCodeEditorCommands(editor, defaultLanguage) : undefined,
+    useMarkdownShortcuts ? registerMarkdownShortcuts(editor, enabledTransformers) : undefined,
+    hasCodeBlock
+      ? registerCodeHighlighting(editor, {
+          ...shikiTokenizer,
+          defaultLanguage,
+          defaultTheme: getCodeTheme(),
+        })
+      : undefined,
+    hasCodeBlock ? observeCodeTheme(editor) : undefined,
+    enabledButtons.includes('link') ? registerLinkCommands(editor) : undefined,
+    registerListCommands(editor, enabledButtons),
+    registerUpdateEvent(editor, enabledTransformers),
+    registerTabIndentation(editor),
   );
 
   return {
@@ -875,7 +946,8 @@ export const initEditor = ({
      * Remove all registered Lexical listeners.
      */
     dispose: () => {
-      unregisters.forEach((unregister) => unregister());
+      unregister();
+      editor.dispose();
     },
   };
 };
@@ -898,23 +970,54 @@ export const loadCodeHighlighter = async (lang) => {
   await Promise.all([loadCodeLanguage(normalizeCodeLanguage(lang)), loadCodeTheme(getCodeTheme())]);
 };
 
+/**
+ * Number of the latest Markdown import started for each editor.
+ * @type {WeakMap<LexicalEditor, number>}
+ */
+const latestImports = new WeakMap();
+
 /**
  * Convert Markdown to Lexical nodes.
  * @param {LexicalEditor} editor Editor instance.
  * @param {string} value Current Markdown value.
  * @param {Transformer[]} enabledTransformers List of enabled Markdown transformers.
- * @returns {Promise<string>} The value as the editor exports it once imported, which can differ in
- * style from the given value, e.g. `_text_` for `*text*`.
+ * @returns {Promise<string | undefined>} The value as the editor exports it once imported, which
+ * can differ in style from the given value, e.g. `_text_` for `*text*`. `undefined` if another
+ * import has been started for the same editor in the meantime, in which case this value is skipped.
  * @throws {Error} Failed to convert the value to Lexical nodes.
  */
 export const convertMarkdownToLexical = async (editor, value, enabledTransformers) => {
-  // Preload the highlighter for every language used in the document, so code blocks are highlighted
-  // as soon as they appear rather than a moment later
-  await Promise.all(
-    [...value.matchAll(/^```(?<lang>.+?)\n/gm)].map(async ({ groups: { lang = 'plain' } = {} }) =>
-      loadCodeHighlighter(lang),
-    ),
-  );
+  const importId = (latestImports.get(editor) ?? 0) + 1;
+
+  latestImports.set(editor, importId);
+
+  /**
+   * Check if a newer import has been started while waiting for the highlighter. Imports can finish
+   * out of order, as only those with code blocks have to wait, and an older value must not
+   * overwrite a newer one.
+   * @returns {boolean} Result.
+   */
+  const isSuperseded = () => latestImports.get(editor) !== importId;
+
+  try {
+    // Preload the highlighter for every language used in the document, so code blocks are
+    // highlighted as soon as they appear rather than a moment later
+    await Promise.all(
+      [...value.matchAll(/^```(?<lang>.+?)\n/gm)].map(async ({ groups: { lang = 'plain' } = {} }) =>
+        loadCodeHighlighter(lang),
+      ),
+    );
+  } catch (ex) {
+    if (isSuperseded()) {
+      return undefined;
+    }
+
+    throw ex;
+  }
+
+  if (isSuperseded()) {
+    return undefined;
+  }
 
   // Split multiline formatting into separate lines to prevent Markdown parsing issues
   value = splitMultilineFormatting(value);