@37signals/lexxy 0.9.9-beta → 0.9.9-beta.preview2

package/dist/lexxy.esm.js

@@ -1,19 +1,19 @@
 import { isActiveAndVisible, createElement, extractPlainTextFromHtml, createAttachmentFigure, isPreviewableImage, dispatch, parseHtml, addBlockSpacing, generateDomId } from './lexxy_helpers.esm.js';
 export { highlightCode } from './lexxy_helpers.esm.js';
 import DOMPurify from 'dompurify';
-import { getStyleObjectFromCSS, getCSSFromStyleObject, $isAtNodeEnd, $getSelectionStyleValueForProperty, $patchStyleText, $setBlocksType, $forEachSelectedTextNode, $ensureForwardRangeSelection } from '@lexical/selection';
-import { SKIP_DOM_SELECTION_TAG, $getSelection, $isRangeSelection, DecoratorNode, $createParagraphNode, $getNodeByKey, $isTextNode, $createRangeSelection, $setSelection, $createTextNode, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $createNodeSelection, $isDecoratorNode, $isLineBreakNode, $isElementNode, TextNode, createCommand, createState, defineExtension, COMMAND_PRIORITY_NORMAL, $getState, $setState, $hasUpdateTag, PASTE_TAG, FORMAT_TEXT_COMMAND, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_LOW, KEY_ARROW_RIGHT_COMMAND, KEY_TAB_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $getEditor, $getNearestRootOrShadowRoot, $isNodeSelection, $getRoot, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, DELETE_CHARACTER_COMMAND, SELECTION_CHANGE_COMMAND, CLICK_COMMAND, isDOMNode, $getNearestNodeFromDOMNode, ParagraphNode, $isRootOrShadowRoot, ElementNode, $splitNode, $isParagraphNode, $createLineBreakNode, $isRootNode, $getChildCaretAtIndex, RootNode, COMMAND_PRIORITY_HIGH, DRAGSTART_COMMAND, DROP_COMMAND, INSERT_PARAGRAPH_COMMAND, CLEAR_HISTORY_COMMAND, $addUpdateTag, KEY_ENTER_COMMAND, COMMAND_PRIORITY_CRITICAL, KEY_SPACE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
+import { getStyleObjectFromCSS, getCSSFromStyleObject, $isAtNodeEnd, $getSelectionStyleValueForProperty, $patchStyleText, $ensureForwardRangeSelection, $setBlocksType, $forEachSelectedTextNode } from '@lexical/selection';
+import { SKIP_DOM_SELECTION_TAG, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, CAN_REDO_COMMAND, $getSelection, $isRangeSelection, DecoratorNode, $createParagraphNode, $getNodeByKey, $isTextNode, $createRangeSelection, $setSelection, $createTextNode, $isElementNode, $isRootOrShadowRoot, $isRootNode, $createNodeSelection, $isDecoratorNode, $isLineBreakNode, TextNode, createCommand, createState, defineExtension, COMMAND_PRIORITY_NORMAL, $getState, $setState, $hasUpdateTag, PASTE_TAG, FORMAT_TEXT_COMMAND, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_TAB_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, COMMAND_PRIORITY_EDITOR, $getEditor, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $cloneWithProperties, $getNearestRootOrShadowRoot, $isNodeSelection, $getRoot, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, DELETE_CHARACTER_COMMAND, SELECTION_CHANGE_COMMAND, CLICK_COMMAND, isDOMNode, $getNearestNodeFromDOMNode, $addUpdateTag, ElementNode, $splitNode, $getChildCaretAtIndex, $createLineBreakNode, $isParagraphNode, ParagraphNode, RootNode, COMMAND_PRIORITY_HIGH, DRAGSTART_COMMAND, DROP_COMMAND, INSERT_PARAGRAPH_COMMAND, mergeRegister as mergeRegister$1, $findMatchingParent, CLEAR_HISTORY_COMMAND, KEY_ENTER_COMMAND, COMMAND_PRIORITY_CRITICAL, KEY_SPACE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
 import { buildEditorFromExtensions } from '@lexical/extension';
 import { ListNode, ListItemNode, $getListDepth, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, $isListItemNode, $isListNode, registerList } from '@lexical/list';
-import { LinkNode, $createAutoLinkNode, $toggleLink, $createLinkNode, AutoLinkNode, $isLinkNode } from '@lexical/link';
+import { LinkNode, $createAutoLinkNode, $toggleLink, $createLinkNode, $isLinkNode, AutoLinkNode } from '@lexical/link';
 import { $getNearestNodeOfType, $wrapNodeInElement, $lastToFirstIterator, mergeRegister, $insertFirst, $unwrapAndFilterDescendants, $firstToLastIterator, $getNearestBlockElementAncestorOrThrow, $descendantsMatching, IS_APPLE } from '@lexical/utils';
 import { registerPlainText } from '@lexical/plain-text';
-import { RichTextExtension, $isQuoteNode, $isHeadingNode, $createHeadingNode, $createQuoteNode, QuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
+import { RichTextExtension, $isQuoteNode, $isHeadingNode, QuoteNode, $createHeadingNode, $createQuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
 import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
 import { $isCodeNode, CodeHighlightNode, CodeNode, $createCodeNode, $isCodeHighlightNode, $createCodeHighlightNode, normalizeCodeLang, registerCodeHighlighting, CODE_LANGUAGE_FRIENDLY_NAME_MAP } from '@lexical/code';
 import { TRANSFORMERS, registerMarkdownShortcuts } from '@lexical/markdown';
-import { createEmptyHistoryState, registerHistory } from '@lexical/history';
 import { INSERT_TABLE_COMMAND, $getTableCellNodeFromLexicalNode, TableCellNode, TableNode, TableRowNode, setScrollableTablesActive, registerTablePlugin, registerTableSelectionObserver, TableCellHeaderStates, $insertTableRowAtSelection, $insertTableColumnAtSelection, $deleteTableRowAtSelection, $deleteTableColumnAtSelection, $findTableNode, $getTableRowIndexFromTableCellNode, $getTableColumnIndexFromTableCellNode, $findCellNode, $getElementForTableNode } from '@lexical/table';
+import { HistoryExtension } from '@lexical/history';
 import { marked } from 'marked';
 import { $insertDataTransferForRichText } from '@lexical/clipboard';
 import 'prismjs';
@@ -511,19 +511,10 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   #monitorHistoryChanges() {
-    this.#listeners.track(this.editor.registerUpdateListener(() => {
-      this.#updateUndoRedoButtonStates();
-    }));
-  }
-
-  #updateUndoRedoButtonStates() {
-    this.editor.getEditorState().read(() => {
-      const historyState = this.editorElement.historyState;
-      if (historyState) {
-        this.#setButtonDisabled("undo", historyState.undoStack.length === 0);
-        this.#setButtonDisabled("redo", historyState.redoStack.length === 0);
-      }
-    });
+    this.#listeners.track(
+      this.editor.registerCommand(CAN_UNDO_COMMAND, (enabled) => { this.#setButtonDisabled("undo", !enabled); }, COMMAND_PRIORITY_LOW),
+      this.editor.registerCommand(CAN_REDO_COMMAND, (enabled) => { this.#setButtonDisabled("redo", !enabled); }, COMMAND_PRIORITY_LOW),
+    );
   }
 
   #updateButtonStates() {
@@ -557,8 +548,6 @@ class LexicalToolbarElement extends HTMLElement {
     this.#setButtonPressed("code", isInCode);
 
     this.#setButtonPressed("table", isInTable);
-
-    this.#updateUndoRedoButtonStates();
   }
 
   #setButtonPressed(name, isPressed) {
@@ -769,11 +758,11 @@ class LexicalToolbarElement extends HTMLElement {
 
       <div class="lexxy-editor__toolbar-spacer" role="separator"></div>
 
-      <button class="lexxy-editor__toolbar-button" type="button" name="undo" data-command="undo" title="Undo">
+      <button class="lexxy-editor__toolbar-button" type="button" name="undo" data-command="undo" title="Undo" disabled aria-disabled="true">
         ${ToolbarIcons.undo}
       </button>
 
-      <button class="lexxy-editor__toolbar-button" type="button" name="redo" data-command="redo" title="Redo">
+      <button class="lexxy-editor__toolbar-button" type="button" name="redo" data-command="redo" title="Redo" disabled aria-disabled="true">
         ${ToolbarIcons.redo}
       </button>
 
@@ -1332,14 +1321,16 @@ class CustomActionTextAttachmentNode extends DecoratorNode {
   }
 }
 
-const SILENT_UPDATE_TAGS = [ HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG ];
-
 function $createNodeSelectionWith(...nodes) {
   const selection = $createNodeSelection();
   nodes.forEach(node => selection.add(node.getKey()));
   return selection
 }
 
+function $isShadowRoot(node) {
+  return $isElementNode(node) && $isRootOrShadowRoot(node) && !$isRootNode(node)
+}
+
 function $makeSafeForRoot(node) {
   if ($isTextNode(node)) {
     return $wrapNodeInElement(node, $createParagraphNode)
@@ -1356,6 +1347,11 @@ function getListType(node) {
   return list?.getListType() ?? null
 }
 
+function isEditorFocused(editor) {
+  const rootElement = editor.getRootElement();
+  return rootElement !== null && rootElement.contains(document.activeElement)
+}
+
 function $isAtNodeEdge(point, atStart = null) {
   if (atStart === null) {
     return $isAtNodeEdge(point, true) || $isAtNodeEdge(point, false)
@@ -1464,6 +1460,35 @@ function isAttachmentSpacerTextNode(node, previousNode, index, childCount) {
     && previousNode instanceof CustomActionTextAttachmentNode
 }
 
+// Shared, strictly-contained element used to attach ephemeral nodes when we
+// need to read computed styles (e.g. canonicalizing style values, resolving
+// CSS custom properties). The container is created once and attached to
+// `document.body` once; subsequent child mutations happen *inside* the
+// contained subtree so they do not invalidate style on the rest of the page.
+//
+// Without this, `document.body.appendChild(...)` / `element.remove()` calls
+// forced the browser to re-evaluate every ancestor-dependent selector (`:has()`,
+// descendant combinators, universal sibling rules) across the document on each
+// invocation — a 13,000+ element style recalc per call on a typical Basecamp
+// page.
+
+let resolverRoot = null;
+
+function styleResolverRoot() {
+  if (resolverRoot && resolverRoot.isConnected) return resolverRoot
+
+  resolverRoot = document.createElement("div");
+  resolverRoot.setAttribute("aria-hidden", "true");
+  resolverRoot.setAttribute("data-lexxy-style-resolver", "");
+  // `contain: strict` (size, layout, paint, style) isolates everything.
+  // The root itself paints nothing (visibility hidden), has zero
+  // geometric impact (position fixed, intrinsic size via contain), and
+  // never leaks style invalidation to its ancestors.
+  resolverRoot.style.cssText = "contain: strict; position: fixed; top: 0; left: 0; visibility: hidden; pointer-events: none; width: 0; height: 0;";
+  document.body.appendChild(resolverRoot);
+  return resolverRoot
+}
+
 function isSelectionHighlighted(selection) {
   if (!$isRangeSelection(selection)) return false
 
@@ -1544,10 +1569,11 @@ class StyleCanonicalizer {
   }
 }
 
-// Separates DOM writes from layout reads to avoid forced reflows. All resolver
-// elements are built inside a fragment, attached once, then read in a single pass.
-// Reading `getComputedStyle` after a write forces the browser to recompute layout,
-// so interleaving writes and reads inside a loop turns one reflow into N.
+// Separates DOM writes from layout reads to avoid forced reflows, and attaches
+// resolver elements to a strictly-contained root (outside the normal document
+// flow) so neither the attach nor the detach invalidate styles on the rest of
+// the page. Without containment, appending to `document.body` triggered a
+// page-wide style recalc on every canonicalization pass.
 function computeStyleValues(property, values) {
   const fragment = document.createDocumentFragment();
 
@@ -1557,7 +1583,7 @@ function computeStyleValues(property, values) {
     return element
   });
 
-  document.body.appendChild(fragment);
+  styleResolverRoot().appendChild(fragment);
 
   const computed = elements.map(element =>
     window.getComputedStyle(element).getPropertyValue(property)
@@ -2541,6 +2567,10 @@ function debounceAsync(fn, wait) {
   }
 }
 
+function delay(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms))
+}
+
 function nextFrame() {
   return new Promise(requestAnimationFrame)
 }
@@ -2589,6 +2619,109 @@ function parseBoolean(value) {
   return Boolean(value)
 }
 
+// Payload: Record<nodeKey, { patch?, replace? }>
+//   - patch: plain object, shallow-merged into the existing node's properties
+//   - replace: a LexicalNode instance that replaces the node
+const REWRITE_HISTORY_COMMAND = createCommand("REWRITE_HISTORY_COMMAND");
+
+class RewritableHistoryExtension extends LexxyExtension {
+  #historyState = null
+
+  get lexicalExtension() {
+    return defineExtension({
+      name: "lexxy/rewritable-history",
+      dependencies: [ HistoryExtension ],
+      register: (editor, _config, state) => {
+        const historyOutput = state.getDependency(HistoryExtension).output;
+        this.#historyState = historyOutput.historyState.value;
+
+        return editor.registerCommand(
+          REWRITE_HISTORY_COMMAND,
+          (rewrites) => this.#rewriteHistory(rewrites),
+          COMMAND_PRIORITY_EDITOR
+        )
+      }
+    })
+  }
+
+  get historyState() {
+    return this.#historyState
+  }
+
+  get #allHistoryEntries() {
+    const entries = Array.from(this.#historyState.undoStack);
+    if (this.#historyState.current) entries.push(this.#historyState.current);
+    return entries.concat(this.#historyState.redoStack)
+  }
+
+  #rewriteHistory(rewrites) {
+    $getEditor().update(() => {
+      for (const [ nodeKey, { patch, replace } ] of Object.entries(rewrites)) {
+        const node = $getNodeByKey(nodeKey);
+        if (!node) continue
+
+        if (patch) Object.assign(node.getWritable(), patch);
+        if (replace) node.replace(replace);
+      }
+    }, { discrete: true, tag: this.#getBackgroundUpdateTags() });
+
+    const nodeKeys = Object.keys(rewrites);
+
+    for (const entry of this.#allHistoryEntries) {
+      if (!this.#entryHasSomeKeys(entry, nodeKeys)) continue
+
+      for (const [ nodeKey, { patch, replace } ] of Object.entries(rewrites)) {
+        const node = entry.editorState._nodeMap.get(nodeKey);
+        if (!node) continue
+
+        entry.editorState = safeCloneEditorState(entry.editorState);
+
+        if (patch) {
+          entry.editorState._nodeMap.set(nodeKey, $cloneNodeWithPatch(node, patch));
+        } else if (replace) {
+          entry.editorState._nodeMap.set(nodeKey, $cloneNodeAdoptingKey(replace, node));
+        }
+      }
+    }
+
+    return true
+  }
+
+  #entryHasSomeKeys(entry, nodeKeys) {
+    return nodeKeys.some(key => entry.editorState._nodeMap.has(key))
+  }
+
+  #getBackgroundUpdateTags() {
+    const tags = [ HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG ];
+    if (!isEditorFocused(this.editorElement.editor)) { tags.push(SKIP_DOM_SELECTION_TAG); }
+    return tags
+  }
+}
+
+function $cloneNodeWithPatch(node, patch) {
+  const clone = $cloneWithProperties(node);
+  Object.assign(clone, patch);
+  return clone
+}
+
+function $cloneNodeAdoptingKey(source, keyNode) {
+  const clone = $cloneWithProperties(source);
+  clone.__key = keyNode.__key;
+  clone.__parent = keyNode.__parent;
+  clone.__prev = keyNode.__prev;
+  clone.__next = keyNode.__next;
+  return clone
+}
+
+// EditorState#clone() keeps the same map reference.
+// A new Map is needed to prevent editing Lexical's internal map
+// Warning: this bypasses DEV's safety map freezing
+function safeCloneEditorState(editorState) {
+  const clone = editorState.clone();
+  clone._nodeMap = new Map(editorState._nodeMap);
+  return clone
+}
+
 class ActionTextAttachmentNode extends DecoratorNode {
   static getType() {
     return "action_text_attachment"
@@ -2801,6 +2934,18 @@ class ActionTextAttachmentNode extends DecoratorNode {
     return figure
   }
 
+  patchAndRewriteHistory(patch) {
+    this.editor.dispatchCommand(REWRITE_HISTORY_COMMAND, {
+      [this.getKey()]: { patch }
+    });
+  }
+
+  replaceAndRewriteHistory(node) {
+    this.editor.dispatchCommand(REWRITE_HISTORY_COMMAND, {
+      [this.getKey()]: { replace: node }
+    });
+  }
+
   #createDOMForImage(options = {}) {
     const initialSrc = this.previewSrc || this.src;
     const img = createElement("img", { src: initialSrc, draggable: false, alt: this.altText, ...this.#imageDimensions, ...options });
@@ -2829,33 +2974,18 @@ class ActionTextAttachmentNode extends DecoratorNode {
 
   #handleImageLoaded(img, previewSrc) {
     img.src = this.src;
-    this.editor.update(() => {
-      if (this.isAttached()) this.getWritable().previewSrc = null;
-    }, { tag: this.#backgroundUpdateTags });
+    this.patchAndRewriteHistory({ previewSrc: null });
     this.#revokePreviewSrc(previewSrc);
   }
 
   #handleImageLoadError(previewSrc) {
-    this.editor.update(() => {
-      if (this.isAttached()) {
-        this.getWritable().previewSrc = null;
-        this.getWritable().uploadError = true;
-      }
-    }, { tag: this.#backgroundUpdateTags });
+    this.patchAndRewriteHistory({
+      previewSrc: null,
+      uploadError: true
+    });
     this.#revokePreviewSrc(previewSrc);
   }
 
-  get #backgroundUpdateTags() {
-    const rootElement = this.editor.getRootElement();
-    const editorHasFocus = rootElement !== null && rootElement.contains(document.activeElement);
-
-    if (editorHasFocus) {
-      return SILENT_UPDATE_TAGS
-    } else {
-      return [ ...SILENT_UPDATE_TAGS, SKIP_DOM_SELECTION_TAG ]
-    }
-  }
-
   #revokePreviewSrc(previewSrc) {
     if (previewSrc?.startsWith("blob:")) URL.revokeObjectURL(previewSrc);
   }
@@ -2917,9 +3047,7 @@ class ActionTextAttachmentNode extends DecoratorNode {
       figure.appendChild(this.#createEditableCaption());
     });
 
-    this.editor.update(() => {
-      if (this.isAttached()) this.getWritable().pendingPreview = false;
-    }, { tag: this.#backgroundUpdateTags });
+    this.patchAndRewriteHistory({ pendingPreview: false });
   }
 
   #swapFigureContent(figure, fromClass, toClass, renderContent) {
@@ -3034,12 +3162,6 @@ class Selection {
     this.#clearStaleInlineCodeFormat();
   }
 
-  set current(selection) {
-    this.editor.update(() => {
-      this.#syncSelectedClasses();
-    });
-  }
-
   get hasNodeSelection() {
     return this.editor.getEditorState().read(() => {
       const selection = $getSelection();
@@ -3368,7 +3490,7 @@ class Selection {
       this.editor.registerCommand(DELETE_CHARACTER_COMMAND, this.#selectDecoratorNodeBeforeDeletion.bind(this), COMMAND_PRIORITY_LOW),
 
       this.editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
-        this.current = $getSelection();
+        this.#syncSelectedClasses();
       }, COMMAND_PRIORITY_LOW)
     );
   }
@@ -3566,6 +3688,7 @@ class Selection {
 
   #selectInLexical(node) {
     if ($isDecoratorNode(node)) {
+      $addUpdateTag(HISTORY_MERGE_TAG);
       const selection = $createNodeSelectionWith(node);
       $setSelection(selection);
       return selection
@@ -3931,107 +4054,6 @@ class EditorConfiguration {
   }
 }
 
-class ProvisionalParagraphNode extends ParagraphNode {
-  $config() {
-    return this.config("provisonal_paragraph", {
-      extends: ParagraphNode,
-      importDOM: () => null,
-      $transform: (node) => {
-        node.concretizeIfEdited(node);
-        node.removeUnlessRequired(node);
-      }
-    })
-  }
-
-  static neededBetween(nodeBefore, nodeAfter) {
-    return !$isSelectableElement(nodeBefore, "next")
-      && !$isSelectableElement(nodeAfter, "previous")
-  }
-
-  createDOM(editor) {
-    const p = super.createDOM(editor);
-    const selected = this.isSelected($getSelection());
-    p.classList.add("provisional-paragraph");
-    p.classList.toggle("hidden", !selected);
-    return p
-  }
-
-  updateDOM(_prevNode, dom) {
-    const selected = this.isSelected($getSelection());
-    dom.classList.toggle("hidden", !selected);
-    return false
-  }
-
-  getTextContent() {
-    return ""
-  }
-
-  exportDOM() {
-    return {
-      element: null
-    }
-  }
-
-  // override as Lexical has an interesting view of collapsed selection in ElementNodes
-  // https://github.com/facebook/lexical/blob/f1e4f66014377b1f2595aec2b0ee17f5b7ef4dfc/packages/lexical/src/LexicalNode.ts#L646
-  isSelected(selection = null) {
-    const targetSelection = selection || $getSelection();
-    if (!targetSelection) return false
-
-    if (targetSelection.getNodes().some(node => node.is(this) || this.isParentOf(node))) return true
-
-    // A collapsed range selection on the parent element at an offset adjacent to
-    // this node means the caret is visually at this paragraph's position. Treat it
-    // as selected so the paragraph is visible and the caret renders correctly.
-    //
-    // Both the offset matching our index (cursor just before us) and index + 1
-    // (cursor just after us) count, because the provisional paragraph is an
-    // invisible spacer: the browser resolves both offsets to the same visual spot.
-    if ($isRangeSelection(targetSelection) && targetSelection.isCollapsed()) {
-      const { anchor } = targetSelection;
-      const parent = this.getParent();
-      if (parent && anchor.getNode().is(parent) && anchor.type === "element") {
-        const index = this.getIndexWithinParent();
-        return anchor.offset === index || anchor.offset === index + 1
-      }
-    }
-
-    return false
-  }
-
-  removeUnlessRequired(self = this.getLatest()) {
-    if (!self.required) self.remove();
-  }
-
-  concretizeIfEdited(self = this.getLatest()) {
-    if (self.getTextContentSize() > 0) {
-      self.replace($createParagraphNode(), true);
-    }
-  }
-
-
-  get required() {
-    return this.isDirectRootChild && ProvisionalParagraphNode.neededBetween(...this.immediateSiblings)
-  }
-
-  get isDirectRootChild() {
-    const parent = this.getParent();
-    return $isRootOrShadowRoot(parent)
-  }
-
-  get immediateSiblings() {
-    return [ this.getPreviousSibling(), this.getNextSibling() ]
-  }
-}
-
-function $isProvisionalParagraphNode(node) {
-  return node instanceof ProvisionalParagraphNode
-}
-
-function $isSelectableElement(node, direction) {
-  return $isElementNode(node) && (direction === "next" ? node.canInsertTextBefore() : node.canInsertTextAfter())
-}
-
 async function loadFileIntoImage(file, image) {
   return new Promise((resolve) => {
     const reader = new FileReader();
@@ -4067,10 +4089,10 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
   }
 
   constructor(node, key) {
-    const { file, uploadUrl, blobUrlTemplate, progress, width, height, uploadError } = node;
-    super({ ...node, contentType: file.type }, key);
-    this.file = file;
-    this.fileName = file.name;
+    const { file, uploadUrl, blobUrlTemplate, progress, width, height, uploadError, fileName, contentType } = node;
+    super({ ...node, contentType: file?.type ?? contentType }, key);
+    this.file = file ?? null;
+    this.fileName = file?.name ?? fileName;
     this.uploadUrl = uploadUrl;
     this.blobUrlTemplate = blobUrlTemplate;
     this.progress = progress ?? null;
@@ -4127,6 +4149,8 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
       ...super.exportJSON(),
       type: "action_text_attachment_upload",
       version: 1,
+      fileName: this.fileName,
+      contentType: this.contentType,
       uploadUrl: this.uploadUrl,
       blobUrlTemplate: this.blobUrlTemplate,
       progress: this.progress,
@@ -4151,14 +4175,14 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
   }
 
   #getFileExtension() {
-    return this.file.name.split(".").pop().toLowerCase()
+    return (this.fileName || "").split(".").pop().toLowerCase()
   }
 
   #createCaption() {
     const figcaption = createElement("figcaption", { className: "attachment__caption" });
 
-    const nameSpan = createElement("span", { className: "attachment__name", textContent: this.caption || this.file.name || "" });
-    const sizeSpan = createElement("span", { className: "attachment__size", textContent: bytesToHumanSize(this.file.size) });
+    const nameSpan = createElement("span", { className: "attachment__name", textContent: this.caption || this.fileName || "" });
+    const sizeSpan = createElement("span", { className: "attachment__size", textContent: bytesToHumanSize(this.file?.size) });
     figcaption.appendChild(nameSpan);
     figcaption.appendChild(sizeSpan);
 
@@ -4172,11 +4196,7 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
   #setDimensionsFromImage({ width, height }) {
     if (this.#hasDimensions) return
 
-    this.editor.update(() => {
-      const writable = this.getWritable();
-      writable.width = width;
-      writable.height = height;
-    }, { tag: this.#backgroundUpdateTags });
+    this.patchAndRewriteHistory({ width, height });
   }
 
   get #hasDimensions() {
@@ -4203,8 +4223,8 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
       } else {
         this.#dispatchEvent("lexxy:upload-end", { file: this.file, error: null });
         this.editor.update(() => {
-          this.showUploadedAttachment(blob);
-        }, { tag: this.#backgroundUpdateTags });
+          this.$showUploadedAttachment(blob);
+        });
       }
     });
   }
@@ -4219,7 +4239,7 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
       directUploadWillStoreFileWithXHR: (request) => {
         if (shouldAuthenticateUploads) request.withCredentials = true;
 
-        const uploadProgressHandler = (event) => this.#handleUploadProgress(event);
+        const uploadProgressHandler = (event) => this.#handleUploadProgress(event, request);
         request.upload.addEventListener("progress", uploadProgressHandler);
       }
     }
@@ -4229,70 +4249,35 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
     this.#setProgress(1);
   }
 
-  #handleUploadProgress(event) {
+  #handleUploadProgress(event, request) {
     const progress = Math.round(event.loaded / event.total * 100);
-    this.#setProgress(progress);
-    this.#dispatchEvent("lexxy:upload-progress", { file: this.file, progress });
+    try {
+      this.#setProgress(progress);
+      this.#dispatchEvent("lexxy:upload-progress", { file: this.file, progress });
+    } catch {
+      request.abort();
+    }
   }
 
   #setProgress(progress) {
-    this.editor.update(() => {
-      this.getWritable().progress = progress;
-    }, { tag: this.#backgroundUpdateTags });
+    this.patchAndRewriteHistory({ progress });
   }
 
   #handleUploadError(error) {
     console.warn(`Upload error for ${this.file?.name ?? "file"}: ${error}`);
-    this.editor.update(() => {
-      this.getWritable().uploadError = true;
-    }, { tag: this.#backgroundUpdateTags });
+
+    this.patchAndRewriteHistory({ uploadError: true });
   }
 
-  showUploadedAttachment(blob) {
+  $showUploadedAttachment(blob) {
     const previewSrc = this.isPreviewableImage && this.file ? URL.createObjectURL(this.file) : null;
 
     const replacementNode = this.#toActionTextAttachmentNodeWith(blob, previewSrc);
-    const shouldSelectAfterReplacement = this.#selectionIncludesUploadNode;
-    this.replace(replacementNode);
-
-    if (shouldSelectAfterReplacement && $isRootOrShadowRoot(replacementNode.getParent())) {
-      replacementNode.selectNext();
-    }
+    this.replaceAndRewriteHistory(replacementNode);
 
     return replacementNode.getKey()
   }
 
-  // Upload lifecycle methods (progress, completion, errors) run asynchronously and may
-  // fire while the user is focused on another element (e.g., a title field). Without
-  // SKIP_DOM_SELECTION_TAG, Lexical's reconciler would move the DOM selection back into
-  // the editor, stealing focus from wherever the user is currently typing.
-  get #backgroundUpdateTags() {
-    if (this.#editorHasFocus) {
-      return SILENT_UPDATE_TAGS
-    } else {
-      return [ ...SILENT_UPDATE_TAGS, SKIP_DOM_SELECTION_TAG ]
-    }
-  }
-
-  get #editorHasFocus() {
-    const rootElement = this.editor.getRootElement();
-    return rootElement !== null && rootElement.contains(document.activeElement)
-  }
-
-  get #selectionIncludesUploadNode() {
-    const selection = $getSelection();
-    if (selection === null) return false
-
-    if (selection.getNodes().some((node) => node.is(this))) return true
-    if (!$isRangeSelection(selection) || !selection.isCollapsed()) return false
-
-    const anchorNode = selection.anchor.getNode();
-    if (!$isProvisionalParagraphNode(anchorNode) || !anchorNode.isEmpty()) return false
-
-    const previousSibling = anchorNode.getPreviousSibling();
-    return previousSibling !== null && previousSibling.is(this)
-  }
-
   #toActionTextAttachmentNodeWith(blob, previewSrc) {
     const conversion = new AttachmentNodeConversion(this, blob, previewSrc);
     return conversion.toAttachmentNode()
@@ -4642,35 +4627,138 @@ class GalleryUploader extends Uploader {
   }
 }
 
-class Contents {
-  constructor(editorElement) {
-    this.editorElement = editorElement;
-    this.editor = editorElement.editor;
+class NodeInserter {
+  static for(selection) {
+    const INSERTERS = [
+      CodeNodeInserter,
+      QuoteNodeInserter,
+      ShadowRootNodeInserter,
+      NodeSelectionNodeInserter
+    ];
+    const Inserter = INSERTERS.find(inserter => inserter.handles(selection));
+    return Inserter ? new Inserter(selection) : selection
   }
 
-  dispose() {
-    this.editorElement = null;
-    this.editor = null;
+  constructor(selection) {
+    this.selection = selection;
   }
+}
 
-  get selection() { return this.editorElement.selection }
-
-  insertHtml(html, { tag } = {}) {
-    this.insertDOM(parseHtml(html), { tag });
+class CodeNodeInserter extends NodeInserter {
+  static handles(selection) {
+    return $getNearestNodeOfType(selection.anchor?.getNode(), CodeNode)
   }
 
-  insertDOM(doc, { tag } = {}) {
-    this.#unwrapPlaceholderAnchors(doc);
+  insertNodes(nodes) {
+    if (!this.selection.isCollapsed()) { this.selection.removeText(); }
 
-    this.editor.update(() => {
-      if ($hasUpdateTag(PASTE_TAG)) this.#stripTableCellColorStyles(doc);
+    $ensureForwardRangeSelection(this.selection);
+    const focusNode = this.selection.focus.getNode();
+    const codeNode = $getNearestNodeOfType(focusNode, CodeNode);
+    const insertionIndex = focusNode.is(codeNode) ? 0 : focusNode.getIndexWithinParent();
 
-      const nodes = $generateNodesFromDOM(this.editor, doc);
-      if (!this.#insertUploadNodes(nodes)) {
-        this.insertAtCursor(...nodes);
-      }
-    }, { tag });
-  }
+    const caret = $getChildCaretAtIndex(codeNode, insertionIndex + 1, "previous");
+
+    for (const node of nodes) {
+      if (!node.isAttached()) continue
+      if (caret.getNodeAtCaret() && $isElementNode(node)) { caret.insert($createLineBreakNode()); }
+
+      caret.insert(this.#convertNodeToCodeChild(node));
+    }
+
+    caret.getNodeAtCaret().selectEnd();
+  }
+
+  #convertNodeToCodeChild(node) {
+    if ($isLineBreakNode(node)) {
+      return node
+    } else {
+      node.remove();
+      return $createTextNode(node.getTextContent())
+    }
+  }
+
+}
+
+// Lexical will split a QuoteNode when inserting other Elements - we want them simply inserted as-is
+class QuoteNodeInserter extends NodeInserter {
+  static handles(selection) {
+    return $getNearestNodeOfType(selection.anchor?.getNode(), QuoteNode)
+  }
+
+  insertNodes(nodes) {
+    if (!this.selection.isCollapsed()) { this.selection.removeText(); }
+
+    $ensureForwardRangeSelection(this.selection);
+    let lastNode = this.selection.focus.getNode();
+    for (const node of nodes) {
+      lastNode = lastNode.insertAfter(node);
+    }
+
+    lastNode.selectEnd();
+  }
+}
+
+class ShadowRootNodeInserter extends NodeInserter {
+  static handles(selection) {
+    return $isShadowRoot(selection?.anchor.getNode())
+  }
+
+  insertNodes(nodes) {
+    const anchorNode = this.selection.anchor.getNode();
+    const paragraph = $createParagraphNode();
+    anchorNode.append(paragraph);
+
+    paragraph.selectStart().insertNodes(nodes);
+  }
+}
+
+class NodeSelectionNodeInserter extends NodeInserter {
+  static handles(selection) {
+    return $isNodeSelection(selection)
+  }
+
+  insertNodes(nodes) {
+    const selectedNodes = this.selection.getNodes();
+
+    // Overrides Lexical's default behavior of _removing_ the currently selected nodes
+    // https://github.com/facebook/lexical/blob/v0.38.2/packages/lexical/src/LexicalSelection.ts#L412
+    let lastNode = selectedNodes.at(-1);
+    for (const node of nodes) {
+      lastNode = lastNode.insertAfter(node);
+    }
+  }
+}
+
+class Contents {
+  constructor(editorElement) {
+    this.editorElement = editorElement;
+    this.editor = editorElement.editor;
+  }
+
+  dispose() {
+    this.editorElement = null;
+    this.editor = null;
+  }
+
+  get selection() { return this.editorElement.selection }
+
+  insertHtml(html, { tag } = {}) {
+    this.insertDOM(parseHtml(html), { tag });
+  }
+
+  insertDOM(doc, { tag } = {}) {
+    this.#unwrapPlaceholderAnchors(doc);
+
+    this.editor.update(() => {
+      if ($hasUpdateTag(PASTE_TAG)) this.#stripTableCellColorStyles(doc);
+
+      const nodes = $generateNodesFromDOM(this.editor, doc);
+      if (!this.#insertUploadNodes(nodes)) {
+        this.insertAtCursor(...nodes);
+      }
+    }, { tag });
+  }
 
   insertAtCursor(...nodes) {
     const selection = $getSelection() ?? $getRoot().selectEnd();
@@ -4912,7 +5000,7 @@ class Contents {
           const node = $getNodeByKey(nodeKey);
           if (!(node instanceof ActionTextAttachmentUploadNode)) return
 
-          const replacementNodeKey = node.showUploadedAttachment(blob);
+          const replacementNodeKey = node.$showUploadedAttachment(blob);
           if (replacementNodeKey) {
             nodeKey = replacementNodeKey;
           }
@@ -5251,113 +5339,6 @@ class Contents {
   }
 }
 
-function $isShadowRoot(node) {
-  return $isElementNode(node) && $isRootOrShadowRoot(node) && !$isRootNode(node)
-}
-
-class NodeInserter {
-  static for(selection) {
-    const INSERTERS = [
-      CodeNodeInserter,
-      QuoteNodeInserter,
-      ShadowRootNodeInserter,
-      NodeSelectionNodeInserter
-    ];
-    const Inserter = INSERTERS.find(inserter => inserter.handles(selection));
-    return Inserter ? new Inserter(selection) : selection
-  }
-
-  constructor(selection) {
-    this.selection = selection;
-  }
-}
-
-class CodeNodeInserter extends NodeInserter {
-  static handles(selection) {
-    return $getNearestNodeOfType(selection.anchor?.getNode(), CodeNode)
-  }
-
-  insertNodes(nodes) {
-    if (!this.selection.isCollapsed()) { this.selection.removeText(); }
-
-    $ensureForwardRangeSelection(this.selection);
-    const focusNode = this.selection.focus.getNode();
-    const codeNode = $getNearestNodeOfType(focusNode, CodeNode);
-    const insertionIndex = focusNode.is(codeNode) ? 0 : focusNode.getIndexWithinParent();
-
-    const caret = $getChildCaretAtIndex(codeNode, insertionIndex + 1, "previous");
-
-    for (const node of nodes) {
-      if (!node.isAttached()) continue
-      if (caret.getNodeAtCaret() && $isElementNode(node)) { caret.insert($createLineBreakNode()); }
-
-      caret.insert(this.#convertNodeToCodeChild(node));
-    }
-
-    caret.getNodeAtCaret().selectEnd();
-  }
-
-  #convertNodeToCodeChild(node) {
-    if ($isLineBreakNode(node)) {
-      return node
-    } else {
-      node.remove();
-      return $createTextNode(node.getTextContent())
-    }
-  }
-
-}
-
-// Lexical will split a QuoteNode when inserting other Elements - we want them simply inserted as-is
-class QuoteNodeInserter extends NodeInserter {
-  static handles(selection) {
-    return $getNearestNodeOfType(selection.anchor?.getNode(), QuoteNode)
-  }
-
-  insertNodes(nodes) {
-    if (!this.selection.isCollapsed()) { this.selection.removeText(); }
-
-    $ensureForwardRangeSelection(this.selection);
-    let lastNode = this.selection.focus.getNode();
-    for (const node of nodes) {
-      lastNode = lastNode.insertAfter(node);
-    }
-
-    lastNode.selectEnd();
-  }
-}
-
-class ShadowRootNodeInserter extends NodeInserter {
-  static handles(selection) {
-    return $isShadowRoot(selection?.anchor.getNode())
-  }
-
-  insertNodes(nodes) {
-    const anchorNode = this.selection.anchor.getNode();
-    const paragraph = $createParagraphNode();
-    anchorNode.append(paragraph);
-
-    paragraph.selectStart().insertNodes(nodes);
-  }
-}
-
-class NodeSelectionNodeInserter extends NodeInserter {
-  static handles(selection) {
-    return $isNodeSelection(selection)
-  }
-
-  insertNodes(nodes) {
-    const selectedNodes = this.selection.getNodes();
-
-    // Overrides Lexical's default behavior of _removing_ the currently selected nodes
-    // https://github.com/facebook/lexical/blob/v0.38.2/packages/lexical/src/LexicalSelection.ts#L412
-    let lastNode = selectedNodes.at(-1);
-    for (const node of nodes) {
-      lastNode = lastNode.insertAfter(node);
-    }
-  }
-}
-
 class Clipboard {
   constructor(editorElement) {
     this.editorElement = editorElement;
@@ -5664,6 +5645,107 @@ function unwrapSpans(element) {
   return element
 }
 
+class ProvisionalParagraphNode extends ParagraphNode {
+  $config() {
+    return this.config("provisonal_paragraph", {
+      extends: ParagraphNode,
+      importDOM: () => null,
+      $transform: (node) => {
+        node.concretizeIfEdited(node);
+        node.removeUnlessRequired(node);
+      }
+    })
+  }
+
+  static neededBetween(nodeBefore, nodeAfter) {
+    return !$isSelectableElement(nodeBefore, "next")
+      && !$isSelectableElement(nodeAfter, "previous")
+  }
+
+  createDOM(editor) {
+    const p = super.createDOM(editor);
+    const selected = this.isSelected($getSelection());
+    p.classList.add("provisional-paragraph");
+    p.classList.toggle("hidden", !selected);
+    return p
+  }
+
+  updateDOM(_prevNode, dom) {
+    const selected = this.isSelected($getSelection());
+    dom.classList.toggle("hidden", !selected);
+    return false
+  }
+
+  getTextContent() {
+    return ""
+  }
+
+  exportDOM() {
+    return {
+      element: null
+    }
+  }
+
+  // override as Lexical has an interesting view of collapsed selection in ElementNodes
+  // https://github.com/facebook/lexical/blob/f1e4f66014377b1f2595aec2b0ee17f5b7ef4dfc/packages/lexical/src/LexicalNode.ts#L646
+  isSelected(selection = null) {
+    const targetSelection = selection || $getSelection();
+    if (!targetSelection) return false
+
+    if (targetSelection.getNodes().some(node => node.is(this) || this.isParentOf(node))) return true
+
+    // A collapsed range selection on the parent element at an offset adjacent to
+    // this node means the caret is visually at this paragraph's position. Treat it
+    // as selected so the paragraph is visible and the caret renders correctly.
+    //
+    // Both the offset matching our index (cursor just before us) and index + 1
+    // (cursor just after us) count, because the provisional paragraph is an
+    // invisible spacer: the browser resolves both offsets to the same visual spot.
+    if ($isRangeSelection(targetSelection) && targetSelection.isCollapsed()) {
+      const { anchor } = targetSelection;
+      const parent = this.getParent();
+      if (parent && anchor.getNode().is(parent) && anchor.type === "element") {
+        const index = this.getIndexWithinParent();
+        return anchor.offset === index || anchor.offset === index + 1
+      }
+    }
+
+    return false
+  }
+
+  removeUnlessRequired(self = this.getLatest()) {
+    if (!self.required) self.remove();
+  }
+
+  concretizeIfEdited(self = this.getLatest()) {
+    if (self.getTextContentSize() > 0) {
+      self.replace($createParagraphNode(), true);
+    }
+  }
+
+
+  get required() {
+    return this.isDirectRootChild && ProvisionalParagraphNode.neededBetween(...this.immediateSiblings)
+  }
+
+  get isDirectRootChild() {
+    const parent = this.getParent();
+    return $isRootOrShadowRoot(parent)
+  }
+
+  get immediateSiblings() {
+    return [ this.getPreviousSibling(), this.getNextSibling() ]
+  }
+}
+
+function $isProvisionalParagraphNode(node) {
+  return node instanceof ProvisionalParagraphNode
+}
+
+function $isSelectableElement(node, direction) {
+  return $isElementNode(node) && (direction === "next" ? node.canInsertTextBefore() : node.canInsertTextAfter())
+}
+
 class ProvisionalParagraphExtension extends LexxyExtension {
   get lexicalExtension() {
     return defineExtension({
@@ -5685,6 +5767,8 @@ class ProvisionalParagraphExtension extends LexxyExtension {
 }
 
 function $insertRequiredProvisionalParagraphs(rootNode) {
+  const nodeBeforeRootSelection = $nodeBeforeRootSelection(rootNode);
+
   const firstNode = rootNode.getFirstChild();
   if (ProvisionalParagraphNode.neededBetween(null, firstNode)) {
     $insertFirst(rootNode, new ProvisionalParagraphNode);
@@ -5694,10 +5778,18 @@ function $insertRequiredProvisionalParagraphs(rootNode) {
     const nextNode = node.getNextSibling();
     if (ProvisionalParagraphNode.neededBetween(node, nextNode)) {
       node.insertAfter(new ProvisionalParagraphNode);
+      if (node.is(nodeBeforeRootSelection)) node.selectNext();
     }
   }
 }
 
+function $nodeBeforeRootSelection(rootNode) {
+  const selection = $getSelection();
+  if (!$isRootOrShadowRoot(selection?.anchor?.getNode())) return null
+
+  return rootNode.getChildAtIndex(selection.anchor.offset - 1)
+}
+
 function $removeUnneededProvisionalParagraphs(rootNode) {
   for (const provisionalParagraph of $getAllProvisionalParagraphs(rootNode)) {
     provisionalParagraph.removeUnlessRequired();
@@ -5705,6 +5797,9 @@ function $removeUnneededProvisionalParagraphs(rootNode) {
 }
 
 function $markAllProvisionalParagraphsDirty() {
+  // Selection-driven visibility updates must not become standalone undo steps.
+  $addUpdateTag(HISTORY_MERGE_TAG);
+
   for (const provisionalParagraph of $getAllProvisionalParagraphs()) {
     provisionalParagraph.markDirty();
   }
@@ -6585,54 +6680,58 @@ class LinkOpenerExtension extends LexxyExtension {
   get lexicalExtension() {
     return defineExtension({
       name: "lexxy/link-opener",
-      register: () => {
-        return mergeRegister(
-          registerEventListener(window, "keydown", this.#update.bind(this)),
-          registerEventListener(window, "keyup", this.#update.bind(this)),
-          registerEventListener(window, "blur", this.#disable.bind(this)),
-          registerEventListener(window, "focus", this.#refresh.bind(this))
-        )
-      }
+      register: (editor) => mergeRegister$1(
+        editor.registerCommand(CLICK_COMMAND, this.#handleClick.bind(this), COMMAND_PRIORITY_NORMAL),
+        registerEventListener(this.editorElement.editorContentElement, "auxclick", this.#handleAuxClick.bind(this)),
+        registerEventListener(window, "keydown", this.#handleKey.bind(this)),
+        registerEventListener(window, "keyup", this.#handleKey.bind(this)),
+        registerEventListener(window, "focus", this.#handleFocus.bind(this))
+      )
     })
   }
 
-  #update(event) {
+  #handleClick(event) {
     if (this.#isModified(event)) {
-      this.#enable();
+      return $openLink(event.target)
     } else {
-      this.#disable();
+      return false
     }
   }
 
-  #refresh() {
-    // Chrome dispatches events without modifier keys *for a while* after changing tabs
-    setTimeout(() => {
-      window.addEventListener("mousemove", this.#update.bind(this), { once: true });
-    }, 200);
+  #handleAuxClick(event) {
+    if (event.button === 1) {
+      this.editorElement.editor.read(() => $openLink(event.target));
+    }
   }
 
-  #isModified(event) {
-    return IS_APPLE ? event.metaKey : event.ctrlKey
+  #handleKey(event) {
+    this.#updateOpenableAttribute(event);
   }
 
-  #enable() {
-    for (const anchor of this.#anchors) {
-      anchor.setAttribute("contenteditable", "false");
-      anchor.setAttribute("target", "_blank");
-      anchor.setAttribute("rel", "noopener noreferrer");
-    }
+  // Chrome dispatches events without modifier keys *for a while* after changing tabs
+  async #handleFocus() {
+    await delay(200);
+    this.editorElement.addEventListener("mousemove", this.#updateOpenableAttribute.bind(this), { once: true });
   }
 
-  #disable() {
-    for (const anchor of this.#anchors) {
-      anchor.removeAttribute("contenteditable");
-      anchor.removeAttribute("target");
-      anchor.removeAttribute("rel");
-    }
+  #updateOpenableAttribute(event) {
+    this.editorElement.toggleAttribute("data-links-openable", this.#isModified(event));
   }
 
-  get #anchors() {
-    return this.editorElement.editorContentElement?.querySelectorAll("a") ?? []
+  #isModified(event) {
+    return IS_APPLE ? event.metaKey : event.ctrlKey
+  }
+}
+
+function $openLink(target) {
+  const node = $getNearestNodeFromDOMNode(target);
+  const linkNode = $findMatchingParent(node, $isLinkNode);
+  if (linkNode) {
+    const url = linkNode.sanitizeUrl(linkNode.getURL());
+    window.open(url, "_blank", "noopener,noreferrer");
+    return true
+  } else {
+    return false
   }
 }
 
@@ -6648,6 +6747,7 @@ class LexicalEditorElement extends HTMLElement {
   #editorInitializedRafId = null
   #listeners = new ListenerBin()
   #disposables = []
+  #historyState = { undo: false, redo: false }
 
   constructor() {
     super();
@@ -6739,6 +6839,7 @@ class LexicalEditorElement extends HTMLElement {
       HighlightExtension,
       TrixContentExtension,
       TablesExtension,
+      RewritableHistoryExtension,
       AttachmentsExtension,
       FormatEscapeExtension,
       LinkOpenerExtension
@@ -6821,9 +6922,19 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   focus() {
+    // `editor.focus()` commits a reconciler update to position the cursor.
+    // Skip if the contenteditable already owns focus — the update would be a
+    // no-op but still triggers a full style/layout pass on pages with large
+    // DOMs.
+    if (this.#isContentFocused) return
+
     this.editor.focus(() => this.#onFocus());
   }
 
+  get #isContentFocused() {
+    return !!this.editorContentElement && this.editorContentElement.contains(document.activeElement)
+  }
+
   get value() {
     if (!this.cachedValue) {
       this.editor?.getEditorState().read(() => {
@@ -6836,19 +6947,21 @@ class LexicalEditorElement extends HTMLElement {
 
   set value(html) {
     this.editor.update(() => {
-      $addUpdateTag(SKIP_DOM_SELECTION_TAG);
-      const root = $getRoot();
-      root.clear();
-      root.append(...this.#parseHtmlIntoLexicalNodes(html));
-      root.selectEnd();
+      $getRoot()
+        .clear()
+        .selectEnd()
+        .insertNodes(this.#parseHtmlIntoLexicalNodes(html));
 
       this.#toggleEmptyStatus();
+    }, { discrete: true, tag: SKIP_DOM_SELECTION_TAG });
+  }
 
-      // The first time you set the value, when the editor is empty, it seems to leave Lexical
-      // in an inconsistent state until, at least, you focus. You can type but adding attachments
-      // fails because no root node detected. This is a workaround to deal with the issue.
-      requestAnimationFrame(() => this.editor?.update(() => { }));
-    });
+  get canUndo() {
+    return this.#historyState.undo
+  }
+
+  get canRedo() {
+    return this.#historyState.redo
   }
 
   #parseHtmlIntoLexicalNodes(html) {
@@ -6884,6 +6997,7 @@ class LexicalEditorElement extends HTMLElement {
     this.#registerComponents();
     this.#handleEnter();
     this.#registerFocusEvents();
+    this.#registerHistoryEvents();
     this.#attachDebugHooks();
     this.#attachToolbar();
     this.#configureSanitizer();
@@ -6980,8 +7094,10 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   #loadInitialValue() {
-    const initialHtml = this.valueBeforeDisconnect || this.getAttribute("value") || "<p></p>";
-    this.value = this.#initialValue = initialHtml;
+    const initialHtml = this.valueBeforeDisconnect || this.getAttribute("value") || "<p><br></p>";
+    this.editor.update(() => {
+      this.value = this.#initialValue = initialHtml;
+    }, { tag: HISTORY_MERGE_TAG });
   }
 
   #resetBeforeTurboCaches() {
@@ -7031,8 +7147,6 @@ class LexicalEditorElement extends HTMLElement {
     } else {
       registered.push(registerPlainText(this.editor));
     }
-    this.historyState = createEmptyHistoryState();
-    registered.push(registerHistory(this.editor, this.historyState, 20));
 
     this.#listeners.track(...registered);
   }
@@ -7115,6 +7229,12 @@ class LexicalEditorElement extends HTMLElement {
     }
   }
 
+  #registerHistoryEvents() {
+    this.#listeners.track(
+      this.editor.registerCommand(CAN_UNDO_COMMAND, (enabled) => { this.#historyState.undo = enabled; }, COMMAND_PRIORITY_NORMAL),
+      this.editor.registerCommand(CAN_REDO_COMMAND, (enabled) => { this.#historyState.redo = enabled; }, COMMAND_PRIORITY_NORMAL)
+    );
+  }
 
   #attachDebugHooks() {
     return
@@ -7205,8 +7325,8 @@ class LexicalEditorElement extends HTMLElement {
         heading: { active: format.isInHeading, enabled: true },
         "unordered-list": { active: format.isInList && format.listType === "bullet", enabled: true },
         "ordered-list": { active: format.isInList && format.listType === "number", enabled: true },
-        undo: { active: false, enabled: this.historyState?.undoStack.length > 0 },
-        redo: { active: false, enabled: this.historyState?.redoStack.length > 0 }
+        undo: { active: false, enabled: this.canUndo },
+        redo: { active: false, enabled: this.canRedo }
       };
 
       linkHref = linkNode ? linkNode.getURL() : null;
@@ -7282,7 +7402,7 @@ class LexicalEditorElement extends HTMLElement {
       return { element, name: cssValue }
     });
 
-    this.appendChild(container);
+    styleResolverRoot().appendChild(container);
 
     const resolved = resolvers.map(({ element, name }) => ({
       name,

package/dist/stylesheets/lexxy-editor.css

@@ -68,6 +68,10 @@
     outline-offset: var(--lexxy-focus-ring-offset);
   }
 
+  &[data-links-openable] a {
+    cursor: pointer;
+  }
+
   /* Tables */
   /* ------------------------------------------------------------------------ */
 
@@ -399,6 +403,13 @@
   min-block-size: var(--lexxy-editor-rows);
   outline: 0;
   padding: var(--lexxy-editor-padding);
+
+  /* Isolate the contenteditable root's layout and style. Lexical's reconciler
+     commits mutations inside this element (nodes appended, text inserted,
+     class flipped) on every update; containment keeps those mutations from
+     invalidating ancestor-dependent selectors and sibling layout elsewhere
+     in the editor. */
+  contain: layout style;
 }
 
 :where(.lexxy-editor--drag-over) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@37signals/lexxy",
-  "version": "0.9.9-beta",
+  "version": "0.9.9-beta.preview2",
   "description": "Lexxy - A modern rich text editor for Rails.",
   "module": "dist/lexxy.esm.js",
   "type": "module",
@@ -48,21 +48,21 @@
     "release": "yarn build:npm && yarn publish"
   },
   "dependencies": {
-    "@lexical/clipboard": "^0.42.0",
-    "@lexical/code": "^0.42.0",
-    "@lexical/extension": "^0.42.0",
-    "@lexical/history": "^0.42.0",
-    "@lexical/html": "^0.42.0",
-    "@lexical/link": "^0.42.0",
-    "@lexical/list": "^0.42.0",
-    "@lexical/markdown": "^0.42.0",
-    "@lexical/plain-text": "^0.42.0",
-    "@lexical/rich-text": "^0.42.0",
-    "@lexical/selection": "^0.42.0",
-    "@lexical/table": "^0.42.0",
-    "@lexical/utils": "^0.42.0",
+    "@lexical/clipboard": "^0.43.0",
+    "@lexical/code": "^0.43.0",
+    "@lexical/extension": "^0.43.0",
+    "@lexical/history": "^0.43.0",
+    "@lexical/html": "^0.43.0",
+    "@lexical/link": "^0.43.0",
+    "@lexical/list": "^0.43.0",
+    "@lexical/markdown": "^0.43.0",
+    "@lexical/plain-text": "^0.43.0",
+    "@lexical/rich-text": "^0.43.0",
+    "@lexical/selection": "^0.43.0",
+    "@lexical/table": "^0.43.0",
+    "@lexical/utils": "^0.43.0",
     "dompurify": "^3.3.0",
-    "lexical": "^0.42.0",
+    "lexical": "^0.43.0",
     "marked": "^16.4.1",
     "prismjs": "^1.30.0"
   },