@37signals/lexxy 0.7.4-beta → 0.7.6-beta

package/dist/lexxy.esm.js

@@ -10,20 +10,20 @@ import 'prismjs/components/prism-json';
 import 'prismjs/components/prism-diff';
 import DOMPurify from 'dompurify';
 import { getStyleObjectFromCSS, getCSSFromStyleObject, $getSelectionStyleValueForProperty, $patchStyleText } from '@lexical/selection';
-import { HISTORY_MERGE_TAG, SKIP_DOM_SELECTION_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $isTextNode, TextNode, $isRangeSelection, $getSelection, DecoratorNode, $getEditor, FORMAT_TEXT_COMMAND, $createTextNode, $isRootOrShadowRoot, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_LOW, KEY_TAB_COMMAND, COMMAND_PRIORITY_NORMAL, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $isNodeSelection, $getRoot, $isLineBreakNode, $isElementNode, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_DELETE_COMMAND, KEY_BACKSPACE_COMMAND, SELECTION_CHANGE_COMMAND, $getNodeByKey, $createNodeSelection, $setSelection, $createParagraphNode, KEY_ENTER_COMMAND, COMMAND_PRIORITY_HIGH, $isParagraphNode, $insertNodes, $createLineBreakNode, PASTE_TAG, createCommand, createState, defineExtension, $setState, $getState, $hasUpdateTag, CLEAR_HISTORY_COMMAND, $addUpdateTag, KEY_SPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
-import { $isListItemNode, $isListNode, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, ListNode, $getListDepth, $createListNode, ListItemNode, registerList } from '@lexical/list';
-import { $isQuoteNode, $isHeadingNode, $createQuoteNode, $createHeadingNode, RichTextExtension, QuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
-import { $isCodeNode, CodeNode, normalizeCodeLang, CodeHighlightNode, registerCodeHighlighting, CODE_LANGUAGE_FRIENDLY_NAME_MAP } from '@lexical/code';
-import { $isLinkNode, $createAutoLinkNode, $toggleLink, $createLinkNode, LinkNode, AutoLinkNode } from '@lexical/link';
-import { $getTableCellNodeFromLexicalNode, INSERT_TABLE_COMMAND, TableCellNode, TableNode, TableRowNode, registerTablePlugin, registerTableSelectionObserver, setScrollableTablesActive, TableCellHeaderStates, $insertTableRowAtSelection, $insertTableColumnAtSelection, $deleteTableRowAtSelection, $deleteTableColumnAtSelection, $findTableNode, $getTableRowIndexFromTableCellNode, $getTableColumnIndexFromTableCellNode, $findCellNode, $getElementForTableNode } from '@lexical/table';
-import { createElement, createAttachmentFigure, isPreviewableImage, dispatchCustomEvent, parseHtml, dispatch, generateDomId } from './lexxy_helpers.esm.js';
-export { highlightCode as highlightAll, highlightCode } from './lexxy_helpers.esm.js';
+import { SKIP_DOM_SELECTION_TAG, $getSelection, $isRangeSelection, DecoratorNode, $getEditor, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $createNodeSelection, $isTextNode, TextNode, createCommand, createState, defineExtension, COMMAND_PRIORITY_NORMAL, $getState, $setState, $hasUpdateTag, PASTE_TAG, FORMAT_TEXT_COMMAND, $createTextNode, $isRootOrShadowRoot, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_LOW, KEY_TAB_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $isNodeSelection, $getRoot, $isLineBreakNode, $isElementNode, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, DELETE_CHARACTER_COMMAND, SELECTION_CHANGE_COMMAND, CLICK_COMMAND, isDOMNode, $getNearestNodeFromDOMNode, $isDecoratorNode, $createParagraphNode, $setSelection, KEY_ENTER_COMMAND, COMMAND_PRIORITY_HIGH, $isParagraphNode, $insertNodes, $getNodeByKey, $createLineBreakNode, ParagraphNode, RootNode, CLEAR_HISTORY_COMMAND, $addUpdateTag, KEY_SPACE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
 import { buildEditorFromExtensions } from '@lexical/extension';
+import { ListNode, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, ListItemNode, $getListDepth, $isListItemNode, $isListNode, $createListNode, registerList } from '@lexical/list';
+import { $createAutoLinkNode, $toggleLink, LinkNode, $createLinkNode, AutoLinkNode, $isLinkNode } from '@lexical/link';
 import { registerPlainText } from '@lexical/plain-text';
+import { RichTextExtension, $isQuoteNode, $createQuoteNode, $createHeadingNode, $isHeadingNode, QuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
 import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
+import { $isCodeNode, CodeNode, normalizeCodeLang, CodeHighlightNode, registerCodeHighlighting, CODE_LANGUAGE_FRIENDLY_NAME_MAP } from '@lexical/code';
 import { registerMarkdownShortcuts, TRANSFORMERS } from '@lexical/markdown';
 import { createEmptyHistoryState, registerHistory } from '@lexical/history';
-import { $getNearestNodeOfType } from '@lexical/utils';
+import { createElement, createAttachmentFigure, isPreviewableImage, parseHtml, dispatch, generateDomId } from './lexxy_helpers.esm.js';
+export { highlightCode as highlightAll, highlightCode } from './lexxy_helpers.esm.js';
+import { $getNearestNodeOfType, mergeRegister, $insertFirst, $firstToLastIterator, $descendantsMatching } from '@lexical/utils';
+import { INSERT_TABLE_COMMAND, $getTableCellNodeFromLexicalNode, TableCellNode, TableNode, TableRowNode, registerTablePlugin, registerTableSelectionObserver, setScrollableTablesActive, TableCellHeaderStates, $insertTableRowAtSelection, $insertTableColumnAtSelection, $deleteTableRowAtSelection, $deleteTableColumnAtSelection, $findTableNode, $getTableRowIndexFromTableCellNode, $getTableColumnIndexFromTableCellNode, $findCellNode, $getElementForTableNode } from '@lexical/table';
 import { marked } from 'marked';
 import { $insertDataTransferForRichText } from '@lexical/clipboard';
 
@@ -156,137 +156,6 @@ function getNonce() {
   return element?.content
 }
 
-const SILENT_UPDATE_TAGS = [ HISTORY_MERGE_TAG, SKIP_DOM_SELECTION_TAG, SKIP_SCROLL_INTO_VIEW_TAG ];
-
-function getNearestListItemNode(node) {
-  let current = node;
-  while (current !== null) {
-    if ($isListItemNode(current)) return current
-    current = current.getParent();
-  }
-  return null
-}
-
-function getListType(node) {
-  let current = node;
-  while (current) {
-    if ($isListNode(current)) {
-      return current.getListType()
-    }
-    current = current.getParent();
-  }
-  return null
-}
-
-function isPrintableCharacter(event) {
-  // Ignore if modifier keys are pressed (except Shift for uppercase)
-  if (event.ctrlKey || event.metaKey || event.altKey) return false
-
-  // Ignore special keys
-  if (event.key.length > 1 && event.key !== "Enter" && event.key !== "Space") return false
-
-  // Accept single character keys (letters, numbers, punctuation)
-  return event.key.length === 1
-}
-
-function extendTextNodeConversion(conversionName, ...callbacks) {
-  return extendConversion(TextNode, conversionName, (conversionOutput, element) => ({
-    ...conversionOutput,
-    forChild: (lexicalNode, parentNode) => {
-      const originalForChild = conversionOutput?.forChild ?? (x => x);
-      let childNode = originalForChild(lexicalNode, parentNode);
-
-
-      if ($isTextNode(childNode)) {
-        childNode = callbacks.reduce(
-          (childNode, callback) => callback(childNode, element) ?? childNode,
-          childNode
-        );
-        return childNode
-      }
-    }
-  }))
-}
-
-function extendConversion(nodeKlass, conversionName, callback = (output => output)) {
-  return (element) => {
-    const converter = nodeKlass.importDOM()?.[conversionName]?.(element);
-    if (!converter) return null
-
-    const conversionOutput = converter.conversion(element);
-    if (!conversionOutput) return conversionOutput
-
-    return callback(conversionOutput, element) ?? conversionOutput
-  }
-}
-
-function isSelectionHighlighted(selection) {
-  if (!$isRangeSelection(selection)) return false
-
-  if (selection.isCollapsed()) {
-    return hasHighlightStyles(selection.style)
-  } else {
-    return selection.hasFormat("highlight")
-  }
-}
-
-function hasHighlightStyles(cssOrStyles) {
-  const styles = typeof cssOrStyles === "string" ? getStyleObjectFromCSS(cssOrStyles) : cssOrStyles;
-  return !!(styles.color || styles["background-color"])
-}
-
-class StyleCanonicalizer {
-  constructor(property, allowedValues= []) {
-    this._property = property;
-    this._allowedValues = allowedValues;
-    this._canonicalValues = this.#allowedValuesIdentityObject;
-  }
-
-  applyCanonicalization(css) {
-    const styles = { ...getStyleObjectFromCSS(css) };
-
-    styles[this._property] = this.getCanonicalAllowedValue(styles[this._property]);
-    if (!styles[this._property]) {
-      delete styles[this._property];
-    }
-
-    return getCSSFromStyleObject(styles)
-  }
-
-  getCanonicalAllowedValue(value) {
-    return this._canonicalValues[value] ||= this.#resolveCannonicalValue(value)
-  }
-
-  // Private
-
-  get #allowedValuesIdentityObject() {
-    return this._allowedValues.reduce((object, value) => ({ ...object, [value]: value }), {})
-  }
-
-  #resolveCannonicalValue(value) {
-    let index = this.#computedAllowedValues.indexOf(value);
-    index ||= this.#computedAllowedValues.indexOf(getComputedStyleForProperty(this._property, value));
-    return index === -1 ? null : this._allowedValues[index]
-  }
-
-  get #computedAllowedValues() {
-    return this._computedAllowedValues ||= this._allowedValues.map(
-      value => getComputedStyleForProperty(this._property, value)
-    )
-  }
-}
-
-function getComputedStyleForProperty(property, value) {
-  const style = `${property}: ${value};`;
-
-  // the element has to be attached to the DOM have computed styles
-  const element = document.body.appendChild(createElement("span", { style: "display: none;" + style }));
-  const computedStyle = window.getComputedStyle(element).getPropertyValue(property);
-  element.remove();
-
-  return computedStyle
-}
-
 function handleRollingTabIndex(elements, event) {
   const previousActiveElement = document.activeElement;
 
@@ -406,6 +275,7 @@ class LexicalToolbarElement extends HTMLElement {
   setEditor(editorElement) {
     this.editorElement = editorElement;
     this.editor = editorElement.editor;
+    this.selection = editorElement.selection;
     this.#bindButtons();
     this.#bindHotkeys();
     this.#resetTabIndexValues();
@@ -565,19 +435,8 @@ class LexicalToolbarElement extends HTMLElement {
     const anchorNode = selection.anchor.getNode();
     if (!anchorNode.getParent()) { return }
 
-    const topLevelElement = anchorNode.getTopLevelElementOrThrow();
-
-    const isBold = selection.hasFormat("bold");
-    const isItalic = selection.hasFormat("italic");
-    const isStrikethrough = selection.hasFormat("strikethrough");
-    const isHighlight = isSelectionHighlighted(selection);
-    const isInLink = this.#isInLink(anchorNode);
-    const isInQuote = $isQuoteNode(topLevelElement);
-    const isInHeading = $isHeadingNode(topLevelElement);
-    const isInCode = $isCodeNode(topLevelElement) || selection.hasFormat("code");
-    const isInList = this.#isInList(anchorNode);
-    const listType = getListType(anchorNode);
-    const isInTable = $getTableCellNodeFromLexicalNode(anchorNode) !== null;
+    const { isBold, isItalic, isStrikethrough, isHighlight, isInLink, isInQuote, isInHeading,
+      isInCode, isInList, listType, isInTable } = this.selection.getFormat();
 
     this.#setButtonPressed("bold", isBold);
     this.#setButtonPressed("italic", isItalic);
@@ -594,24 +453,6 @@ class LexicalToolbarElement extends HTMLElement {
     this.#updateUndoRedoButtonStates();
   }
 
-  #isInList(node) {
-    let current = node;
-    while (current) {
-      if ($isListNode(current) || $isListItemNode(current)) return true
-      current = current.getParent();
-    }
-    return false
-  }
-
-  #isInLink(node) {
-    let current = node;
-    while (current) {
-      if ($isLinkNode(current)) return true
-      current = current.getParent();
-    }
-    return false
-  }
-
   #setButtonPressed(name, isPressed) {
     const button = this.querySelector(`[name="${name}"]`);
     if (button) {
@@ -975,10 +816,6 @@ class ActionTextAttachmentNode extends DecoratorNode {
   createDOM() {
     const figure = this.createAttachmentFigure();
 
-    figure.addEventListener("click", () => {
-      this.#select(figure);
-    });
-
     if (this.isPreviewableAttachment) {
       figure.appendChild(this.#createDOMForImage());
       figure.appendChild(this.#createEditableCaption());
@@ -1091,10 +928,6 @@ class ActionTextAttachmentNode extends DecoratorNode {
     return figcaption
   }
 
-  #select(figure) {
-    dispatchCustomEvent(figure, "lexxy:internal:select-node", { key: this.getKey() });
-  }
-
   #createEditableCaption() {
     const caption = createElement("figcaption", { className: "attachment__caption" });
     const input = createElement("textarea", {
@@ -1125,14 +958,62 @@ class ActionTextAttachmentNode extends DecoratorNode {
 
   #handleCaptionInputKeydown(event) {
     if (event.key === "Enter") {
-      this.#updateCaptionValueFromInput(event.target);
       event.preventDefault();
+      event.stopPropagation();
+      event.target.blur();
 
       this.editor.update(() => {
-        this.selectNext();
-      }, { tag: HISTORY_MERGE_TAG });
+        // Place the cursor after the current image
+        this.selectNext(0, 0);
+      }, {
+        tag: HISTORY_MERGE_TAG
+      });
     }
-    event.stopPropagation();
+
+  }
+}
+
+const SILENT_UPDATE_TAGS = [ HISTORY_MERGE_TAG, SKIP_DOM_SELECTION_TAG, SKIP_SCROLL_INTO_VIEW_TAG ];
+
+function $createNodeSelectionWith(...nodes) {
+  const selection = $createNodeSelection();
+  nodes.forEach(node => selection.add(node.getKey()));
+  return selection
+}
+
+function getListType(node) {
+  const list = $getNearestNodeOfType(node, ListNode);
+  return list?.getListType() ?? null
+}
+
+function extendTextNodeConversion(conversionName, ...callbacks) {
+  return extendConversion(TextNode, conversionName, (conversionOutput, element) => ({
+    ...conversionOutput,
+    forChild: (lexicalNode, parentNode) => {
+      const originalForChild = conversionOutput?.forChild ?? (x => x);
+      let childNode = originalForChild(lexicalNode, parentNode);
+
+
+      if ($isTextNode(childNode)) {
+        childNode = callbacks.reduce(
+          (childNode, callback) => callback(childNode, element) ?? childNode,
+          childNode
+        );
+        return childNode
+      }
+    }
+  }))
+}
+
+function extendConversion(nodeKlass, conversionName, callback = (output => output)) {
+  return (element) => {
+    const converter = nodeKlass.importDOM()?.[conversionName]?.(element);
+    if (!converter) return null
+
+    const conversionOutput = converter.conversion(element);
+    if (!conversionOutput) return conversionOutput
+
+    return callback(conversionOutput, element) ?? conversionOutput
   }
 }
 
@@ -1219,8 +1100,7 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
   }
 
   exportDOM() {
-    const img = document.createElement("img");
-    return { element: img }
+    return { element: null }
   }
 
   exportJSON() {
@@ -1429,10 +1309,6 @@ class HorizontalDividerNode extends DecoratorNode {
     const figure = createElement("figure", { className: "horizontal-divider" });
     const hr = createElement("hr");
 
-    figure.addEventListener("click", (event) => {
-      dispatchCustomEvent(figure, "lexxy:internal:select-node", { key: this.getKey() });
-    });
-
     figure.appendChild(hr);
 
     return figure
@@ -1467,6 +1343,225 @@ class HorizontalDividerNode extends DecoratorNode {
   }
 }
 
+function isSelectionHighlighted(selection) {
+  if (!$isRangeSelection(selection)) return false
+
+  if (selection.isCollapsed()) {
+    return hasHighlightStyles(selection.style)
+  } else {
+    return selection.hasFormat("highlight")
+  }
+}
+
+function hasHighlightStyles(cssOrStyles) {
+  const styles = typeof cssOrStyles === "string" ? getStyleObjectFromCSS(cssOrStyles) : cssOrStyles;
+  return !!(styles.color || styles["background-color"])
+}
+
+function applyCanonicalizers(styles, canonicalizers = []) {
+  return canonicalizers.reduce((css, canonicalizer) => {
+    return canonicalizer.applyCanonicalization(css)
+  }, styles)
+}
+
+class StyleCanonicalizer {
+  constructor(property, allowedValues= []) {
+    this._property = property;
+    this._allowedValues = allowedValues;
+    this._canonicalValues = this.#allowedValuesIdentityObject;
+  }
+
+  applyCanonicalization(css) {
+    const styles = { ...getStyleObjectFromCSS(css) };
+
+    styles[this._property] = this.getCanonicalAllowedValue(styles[this._property]);
+    if (!styles[this._property]) {
+      delete styles[this._property];
+    }
+
+    return getCSSFromStyleObject(styles)
+  }
+
+  getCanonicalAllowedValue(value) {
+    return this._canonicalValues[value] ||= this.#resolveCannonicalValue(value)
+  }
+
+  // Private
+
+  get #allowedValuesIdentityObject() {
+    return this._allowedValues.reduce((object, value) => ({ ...object, [value]: value }), {})
+  }
+
+  #resolveCannonicalValue(value) {
+    let index = this.#computedAllowedValues.indexOf(value);
+    index ||= this.#computedAllowedValues.indexOf(getComputedStyleForProperty(this._property, value));
+    return index === -1 ? null : this._allowedValues[index]
+  }
+
+  get #computedAllowedValues() {
+    return this._computedAllowedValues ||= this._allowedValues.map(
+      value => getComputedStyleForProperty(this._property, value)
+    )
+  }
+}
+
+function getComputedStyleForProperty(property, value) {
+  const style = `${property}: ${value};`;
+
+  // the element has to be attached to the DOM have computed styles
+  const element = document.body.appendChild(createElement("span", { style: "display: none;" + style }));
+  const computedStyle = window.getComputedStyle(element).getPropertyValue(property);
+  element.remove();
+
+  return computedStyle
+}
+
+class LexxyExtension {
+  #editorElement
+
+  constructor(editorElement) {
+    this.#editorElement = editorElement;
+  }
+
+  get editorElement() {
+    return this.#editorElement
+  }
+
+  get editorConfig() {
+    return this.#editorElement.config
+  }
+
+  // optional: defaults to true
+  get enabled() {
+    return true
+  }
+
+  get lexicalExtension() {
+    return null
+  }
+
+  initializeToolbar(_lexxyToolbar) {
+
+  }
+}
+
+const TOGGLE_HIGHLIGHT_COMMAND = createCommand();
+const REMOVE_HIGHLIGHT_COMMAND = createCommand();
+const BLANK_STYLES = { "color": null, "background-color": null };
+
+const hasPastedStylesState = createState("hasPastedStyles", {
+  parse: (value) => value || false
+});
+
+class HighlightExtension extends LexxyExtension {
+  get enabled() {
+    return this.editorElement.supportsRichText
+  }
+
+  get lexicalExtension() {
+    const extension = defineExtension({
+      dependencies: [ RichTextExtension ],
+      name: "lexxy/highlight",
+      config: {
+        color: { buttons: [], permit: [] },
+        "background-color": { buttons: [], permit: [] }
+      },
+      html: {
+        import: {
+          mark: $markConversion
+        }
+      },
+      register(editor, config) {
+        // keep the ref to the canonicalizers for optimized css conversion
+        const canonicalizers = buildCanonicalizers(config);
+
+        return mergeRegister(
+          editor.registerCommand(TOGGLE_HIGHLIGHT_COMMAND, $toggleSelectionStyles, COMMAND_PRIORITY_NORMAL),
+          editor.registerCommand(REMOVE_HIGHLIGHT_COMMAND, () => $toggleSelectionStyles(BLANK_STYLES), COMMAND_PRIORITY_NORMAL),
+          editor.registerNodeTransform(TextNode, $syncHighlightWithStyle),
+          editor.registerNodeTransform(TextNode, (textNode) => $canonicalizePastedStyles(textNode, canonicalizers))
+        )
+      }
+    });
+
+    return [ extension, this.editorConfig.get("highlight") ]
+  }
+}
+
+function $applyHighlightStyle(textNode, element) {
+  const elementStyles = {
+    color: element.style?.color,
+    "background-color": element.style?.backgroundColor
+  };
+
+  if ($hasUpdateTag(PASTE_TAG)) { $setPastedStyles(textNode); }
+  const highlightStyle = getCSSFromStyleObject(elementStyles);
+
+  if (highlightStyle.length) {
+    return textNode.setStyle(textNode.getStyle() + highlightStyle)
+  }
+}
+
+function $markConversion() {
+  return {
+    conversion: extendTextNodeConversion("mark", $applyHighlightStyle),
+    priority: 1
+  }
+}
+
+function buildCanonicalizers(config) {
+  return [
+    new StyleCanonicalizer("color", [ ...config.buttons.color, ...config.permit.color ]),
+    new StyleCanonicalizer("background-color", [ ...config.buttons["background-color"], ...config.permit["background-color"] ])
+  ]
+}
+
+function $toggleSelectionStyles(styles) {
+  const selection = $getSelection();
+  if (!$isRangeSelection(selection)) return
+
+  const patch = {};
+  for (const property in styles) {
+    const oldValue = $getSelectionStyleValueForProperty(selection, property);
+    patch[property] = toggleOrReplace(oldValue, styles[property]);
+  }
+
+  $patchStyleText(selection, patch);
+}
+
+function toggleOrReplace(oldValue, newValue) {
+  return oldValue === newValue ? null : newValue
+}
+
+function $syncHighlightWithStyle(textNode) {
+  if (hasHighlightStyles(textNode.getStyle()) !== textNode.hasFormat("highlight")) {
+    textNode.toggleFormat("highlight");
+  }
+}
+
+function $canonicalizePastedStyles(textNode, canonicalizers = []) {
+  if ($hasPastedStyles(textNode)) {
+    $setPastedStyles(textNode, false);
+
+    const canonicalizedCSS = applyCanonicalizers(textNode.getStyle(), canonicalizers);
+    textNode.setStyle(canonicalizedCSS);
+
+    const selection = $getSelection();
+    if (textNode.isSelected(selection)) {
+      selection.setStyle(textNode.getStyle());
+      selection.setFormat(textNode.getFormat());
+    }
+  }
+}
+
+function $setPastedStyles(textNode, value = true) {
+  $setState(textNode, hasPastedStylesState, value);
+}
+
+function $hasPastedStyles(textNode) {
+  return $getState(textNode, hasPastedStylesState)
+}
+
 const COMMANDS = [
   "bold",
   "italic",
@@ -1500,7 +1595,6 @@ class CommandDispatcher {
     this.selection = editorElement.selection;
     this.contents = editorElement.contents;
     this.clipboard = editorElement.clipboard;
-    this.highlighter = editorElement.highlighter;
 
     this.#registerCommands();
     this.#registerKeyboardCommands();
@@ -1524,11 +1618,11 @@ class CommandDispatcher {
   }
 
   dispatchToggleHighlight(styles) {
-    this.highlighter.toggle(styles);
+    this.editor.dispatchCommand(TOGGLE_HIGHLIGHT_COMMAND, styles);
   }
 
   dispatchRemoveHighlight() {
-    this.highlighter.remove();
+    this.editor.dispatchCommand(REMOVE_HIGHLIGHT_COMMAND);
   }
 
   dispatchLink(url) {
@@ -1593,41 +1687,38 @@ class CommandDispatcher {
 
   dispatchInsertHorizontalDivider() {
     this.contents.insertAtCursorEnsuringLineBelow(new HorizontalDividerNode());
-
     this.editor.focus();
   }
 
   dispatchRotateHeadingFormat() {
-    this.editor.update(() => {
-      const selection = $getSelection();
-      if (!$isRangeSelection(selection)) return
-
-      if ($isRootOrShadowRoot(selection.anchor.getNode())) {
-        selection.insertNodes([ $createHeadingNode("h2") ]);
-        return
-      }
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return
 
-      const topLevelElement = selection.anchor.getNode().getTopLevelElementOrThrow();
-      let nextTag = "h2";
-      if ($isHeadingNode(topLevelElement)) {
-        const currentTag = topLevelElement.getTag();
-        if (currentTag === "h2") {
-          nextTag = "h3";
-        } else if (currentTag === "h3") {
-          nextTag = "h4";
-        } else if (currentTag === "h4") {
-          nextTag = null;
-        } else {
-          nextTag = "h2";
-        }
-      }
+    if ($isRootOrShadowRoot(selection.anchor.getNode())) {
+      selection.insertNodes([ $createHeadingNode("h2") ]);
+      return
+    }
 
-      if (nextTag) {
-        this.contents.insertNodeWrappingEachSelectedLine(() => $createHeadingNode(nextTag));
+    const topLevelElement = selection.anchor.getNode().getTopLevelElementOrThrow();
+    let nextTag = "h2";
+    if ($isHeadingNode(topLevelElement)) {
+      const currentTag = topLevelElement.getTag();
+      if (currentTag === "h2") {
+        nextTag = "h3";
+      } else if (currentTag === "h3") {
+        nextTag = "h4";
+      } else if (currentTag === "h4") {
+        nextTag = null;
       } else {
-        this.contents.removeFormattingFromSelectedLines();
+        nextTag = "h2";
       }
-    });
+    }
+
+    if (nextTag) {
+      this.contents.insertNodeWrappingEachSelectedLine(() => $createHeadingNode(nextTag));
+    } else {
+      this.contents.removeFormattingFromSelectedLines();
+    }
   }
 
   dispatchUploadAttachments() {
@@ -1796,7 +1887,6 @@ class Selection {
 
     this.#listenForNodeSelections();
     this.#processSelectionChangeCommands();
-    this.#handleInputWhenDecoratorNodesSelected();
     this.#containEditorFocus();
   }
 
@@ -1807,12 +1897,10 @@ class Selection {
   }
 
   get hasNodeSelection() {
-    let result = false;
-    this.editor.getEditorState().read(() => {
+    return this.editor.getEditorState().read(() => {
       const selection = $getSelection();
-      result = selection !== null && $isNodeSelection(selection);
-    });
-    return result
+      return selection !== null && $isNodeSelection(selection)
+    })
   }
 
   get cursorPosition() {
@@ -1890,6 +1978,36 @@ class Selection {
     }
   }
 
+  getFormat() {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return {}
+
+    const anchorNode = selection.anchor.getNode();
+    if (!anchorNode.getParent()) return {}
+
+    const topLevelElement = anchorNode.getTopLevelElementOrThrow();
+    const listType = getListType(anchorNode);
+
+    return {
+      isBold: selection.hasFormat("bold"),
+      isItalic: selection.hasFormat("italic"),
+      isStrikethrough: selection.hasFormat("strikethrough"),
+      isHighlight: isSelectionHighlighted(selection),
+      isInLink: $getNearestNodeOfType(anchorNode, LinkNode) !== null,
+      isInQuote: $isQuoteNode(topLevelElement),
+      isInHeading: $isHeadingNode(topLevelElement),
+      isInCode: selection.hasFormat("code") || $getNearestNodeOfType(anchorNode, CodeNode) !== null,
+      isInList: listType !== null,
+      listType,
+      isInTable: $getTableCellNodeFromLexicalNode(anchorNode) !== null
+    }
+  }
+
+  nearestNodeOfType(nodeType) {
+    const anchorNode = $getSelection()?.anchor?.getNode();
+    return $getNearestNodeOfType(anchorNode, nodeType)
+  }
+
   get hasSelectedWordsInSingleLine() {
     const selection = $getSelection();
     if (!$isRangeSelection(selection)) return false
@@ -1917,42 +2035,20 @@ class Selection {
   }
 
   get isInsideList() {
-    const selection = $getSelection();
-    if (!$isRangeSelection(selection)) return false
-
-    const anchorNode = selection.anchor.getNode();
-    return getNearestListItemNode(anchorNode) !== null
+    return this.nearestNodeOfType(ListItemNode)
   }
 
   get isIndentedList() {
-    const selection = $getSelection();
-    if (!$isRangeSelection(selection)) return false
-
-    const nodes = selection.getNodes();
-    for (const node of nodes) {
-      const closestListNode = $getNearestNodeOfType(node, ListNode);
-      if (closestListNode && $getListDepth(closestListNode) > 1) {
-        return true
-      }
-    }
-
-    return false
+    const closestListNode = this.nearestNodeOfType(ListNode);
+    return closestListNode && ($getListDepth(closestListNode) > 1)
   }
 
   get isInsideCodeBlock() {
-    const selection = $getSelection();
-    if (!$isRangeSelection(selection)) return false
-
-    const anchorNode = selection.anchor.getNode();
-    return $getNearestNodeOfType(anchorNode, CodeNode) !== null
+    return this.nearestNodeOfType(CodeNode) !== null
   }
 
   get isTableCellSelected() {
-    const selection = $getSelection();
-    if (!$isRangeSelection(selection)) return false
-
-    const anchorNode = selection.anchor.getNode();
-    return $getNearestNodeOfType(anchorNode, TableCellNode) !== null
+    return this.nearestNodeOfType(TableCellNode) !== null
   }
 
   get nodeAfterCursor() {
@@ -2015,10 +2111,6 @@ class Selection {
     return this.#findPreviousSiblingUp(anchorNode)
   }
 
-  get #contents() {
-    return this.editorElement.contents
-  }
-
   get #currentlySelectedKeys() {
     if (this.currentlySelectedKeys) { return this.currentlySelectedKeys }
 
@@ -2040,84 +2132,24 @@ class Selection {
     this.editor.registerCommand(KEY_ARROW_UP_COMMAND, this.#selectPreviousTopLevelNode.bind(this), COMMAND_PRIORITY_LOW);
     this.editor.registerCommand(KEY_ARROW_DOWN_COMMAND, this.#selectNextTopLevelNode.bind(this), COMMAND_PRIORITY_LOW);
 
-    this.editor.registerCommand(KEY_DELETE_COMMAND, this.#deleteSelectedOrNext.bind(this), COMMAND_PRIORITY_LOW);
-    this.editor.registerCommand(KEY_BACKSPACE_COMMAND, this.#deletePreviousOrNext.bind(this), COMMAND_PRIORITY_LOW);
+    this.editor.registerCommand(DELETE_CHARACTER_COMMAND, this.#selectDecoratorNodeBeforeDeletion.bind(this), COMMAND_PRIORITY_LOW);
 
     this.editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
       this.current = $getSelection();
-    }, COMMAND_PRIORITY_LOW);
-  }
-
-  #listenForNodeSelections() {
-    this.editor.getRootElement().addEventListener("lexxy:internal:select-node", async (event) => {
-      await nextFrame();
-
-      const { key } = event.detail;
-      this.editor.update(() => {
-        const node = $getNodeByKey(key);
-        if (node) {
-          const selection = $createNodeSelection();
-          selection.add(node.getKey());
-          $setSelection(selection);
-        }
-        this.editor.focus();
-      });
-    });
-
-    this.editor.getRootElement().addEventListener("lexxy:internal:move-to-next-line", (event) => {
-      this.#selectOrAppendNextLine();
-    });
-  }
-
-  // In Safari, when the only node in the document is an attachment, it won't let you enter text
-  // before/below it. There is probably a better fix here, but this workaround solves the problem until
-  // we find it.
-  #handleInputWhenDecoratorNodesSelected() {
-    this.editor.getRootElement().addEventListener("keydown", (event) => {
-      if (isPrintableCharacter(event)) {
-        this.editor.update(() => {
-          const selection = $getSelection();
-
-          if ($isRangeSelection(selection) && selection.isCollapsed()) {
-            const anchorNode = selection.anchor.getNode();
-            const offset = selection.anchor.offset;
-
-            const nodeBefore = this.#getNodeBeforePosition(anchorNode, offset);
-            const nodeAfter = this.#getNodeAfterPosition(anchorNode, offset);
-
-            if (nodeBefore instanceof DecoratorNode && !nodeBefore.isInline()) {
-              event.preventDefault();
-              this.#contents.createParagraphAfterNode(nodeBefore, event.key);
-              return
-            } else if (nodeAfter instanceof DecoratorNode && !nodeAfter.isInline()) {
-              event.preventDefault();
-              this.#contents.createParagraphBeforeNode(nodeAfter, event.key);
-              return
-            }
-          }
-        });
-      }
-    }, true);
-  }
-
-  #getNodeBeforePosition(node, offset) {
-    if ($isTextNode(node) && offset === 0) {
-      return node.getPreviousSibling()
-    }
-    if ($isElementNode(node) && offset > 0) {
-      return node.getChildAtIndex(offset - 1)
-    }
-    return null
+    }, COMMAND_PRIORITY_LOW);
   }
 
-  #getNodeAfterPosition(node, offset) {
-    if ($isTextNode(node) && offset === node.getTextContentSize()) {
-      return node.getNextSibling()
-    }
-    if ($isElementNode(node)) {
-      return node.getChildAtIndex(offset)
-    }
-    return null
+  #listenForNodeSelections() {
+    this.editor.registerCommand(CLICK_COMMAND, ({ target }) => {
+      if (!isDOMNode(target)) return false
+
+      const targetNode = $getNearestNodeFromDOMNode(target);
+      return $isDecoratorNode(targetNode) && this.#selectInLexical(targetNode)
+    }, COMMAND_PRIORITY_LOW);
+
+    this.editor.getRootElement().addEventListener("lexxy:internal:move-to-next-line", (event) => {
+      this.#selectOrAppendNextLine();
+    });
   }
 
   #containEditorFocus() {
@@ -2184,33 +2216,33 @@ class Selection {
 
   async #selectPreviousNode() {
     if (this.hasNodeSelection) {
-      await this.#withCurrentNode((currentNode) => currentNode.selectPrevious());
+      return await this.#withCurrentNode((currentNode) => currentNode.selectPrevious())
     } else {
-      this.#selectInLexical(this.nodeBeforeCursor);
+      return this.#selectInLexical(this.nodeBeforeCursor)
     }
   }
 
   async #selectNextNode() {
     if (this.hasNodeSelection) {
-      await this.#withCurrentNode((currentNode) => currentNode.selectNext(0, 0));
+      return await this.#withCurrentNode((currentNode) => currentNode.selectNext(0, 0))
     } else {
-      this.#selectInLexical(this.nodeAfterCursor);
+      return this.#selectInLexical(this.nodeAfterCursor)
     }
   }
 
   async #selectPreviousTopLevelNode() {
     if (this.hasNodeSelection) {
-      await this.#withCurrentNode((currentNode) => currentNode.selectPrevious());
+      return await this.#withCurrentNode((currentNode) => currentNode.getTopLevelElement().selectPrevious())
     } else {
-      this.#selectInLexical(this.topLevelNodeBeforeCursor);
+      return this.#selectInLexical(this.topLevelNodeBeforeCursor)
     }
   }
 
   async #selectNextTopLevelNode() {
     if (this.hasNodeSelection) {
-      await this.#withCurrentNode((currentNode) => currentNode.selectNext(0, 0));
+      return await this.#withCurrentNode((currentNode) => currentNode.getTopLevelElement().selectNext(0, 0))
     } else {
-      this.#selectInLexical(this.topLevelNodeAfterCursor);
+      return this.#selectInLexical(this.topLevelNodeAfterCursor)
     }
   }
 
@@ -2276,37 +2308,24 @@ class Selection {
   }
 
   #selectInLexical(node) {
-    if (!node || !(node instanceof DecoratorNode)) return
-
-    this.editor.update(() => {
-      const selection = $createNodeSelection();
-      selection.add(node.getKey());
+    if ($isDecoratorNode(node)) {
+      const selection = $createNodeSelectionWith(node);
       $setSelection(selection);
-    });
-  }
-
-  #deleteSelectedOrNext() {
-    const node = this.nodeAfterCursor;
-    if (node instanceof DecoratorNode) {
-      this.#selectInLexical(node);
-      return true
+      return selection
     } else {
-      this.#contents.deleteSelectedNodes();
+      return false
     }
-
-    return false
   }
 
-  #deletePreviousOrNext() {
-    const node = this.nodeBeforeCursor;
+  #selectDecoratorNodeBeforeDeletion(backwards) {
+    const node = backwards ? this.nodeBeforeCursor : this.nodeAfterCursor;
     if (node instanceof DecoratorNode) {
       this.#selectInLexical(node);
+
       return true
     } else {
-      this.#contents.deleteSelectedNodes();
+      return false
     }
-
-    return false
   }
 
   #getValidSelectionRange() {
@@ -2600,17 +2619,13 @@ class CustomActionTextAttachmentNode extends DecoratorNode {
   createDOM() {
     const figure = createElement(this.tagName, { "content-type": this.contentType, "data-lexxy-decorator": true });
 
-    figure.addEventListener("click", (event) => {
-      dispatchCustomEvent(figure, "lexxy:internal:select-node", { key: this.getKey() });
-    });
-
     figure.insertAdjacentHTML("beforeend", this.innerHtml);
 
     return figure
   }
 
   updateDOM() {
-    return true
+    return false
   }
 
   getTextContent() {
@@ -2946,20 +2961,18 @@ class Contents {
   }
 
   insertAtCursor(node) {
-    this.editor.update(() => {
-      const selection = $getSelection();
-      const selectedNodes = selection?.getNodes();
+    const selection = $getSelection();
+    const selectedNodes = selection?.getNodes();
 
-      if ($isRangeSelection(selection)) {
-        $insertNodes([ node ]);
-      } else if ($isNodeSelection(selection) && selectedNodes && selectedNodes.length > 0) {
-        const lastNode = selectedNodes[selectedNodes.length - 1];
-        lastNode.insertAfter(node);
-      } else {
-        const root = $getRoot();
-        root.append(node);
-      }
-    });
+    if ($isRangeSelection(selection)) {
+      $insertNodes([ node ]);
+    } else if ($isNodeSelection(selection) && selectedNodes && selectedNodes.length > 0) {
+      const lastNode = selectedNodes.at(-1);
+      lastNode.insertAfter(node);
+    } else {
+      const root = $getRoot();
+      root.append(node);
+    }
   }
 
   insertAtCursorEnsuringLineBelow(node) {
@@ -3187,27 +3200,6 @@ class Contents {
     }, { tag: HISTORY_MERGE_TAG });
   }
 
-  async deleteSelectedNodes() {
-    let focusNode = null;
-
-    this.editor.update(() => {
-      if (this.#selection.hasNodeSelection) {
-        const nodesToRemove = $getSelection().getNodes();
-        if (nodesToRemove.length === 0) return
-
-        focusNode = this.#findAdjacentNodeTo(nodesToRemove);
-        this.#deleteNodes(nodesToRemove);
-      }
-    });
-
-    await nextFrame();
-
-    this.editor.update(() => {
-      this.#selectAfterDeletion(focusNode);
-      this.editor.focus();
-    });
-  }
-
   replaceNodeWithHTML(nodeKey, html, options = {}) {
     this.editor.update(() => {
       const node = $getNodeByKey(nodeKey);
@@ -3246,10 +3238,6 @@ class Contents {
     });
   }
 
-  get #selection() {
-    return this.editorElement.selection
-  }
-
   #insertLineBelowIfLastNode(node) {
     this.editor.update(() => {
       const nextSibling = node.getNextSibling();
@@ -3446,52 +3434,13 @@ class Contents {
     nodesToDelete.forEach((node) => node.remove());
   }
 
-  #deleteNodes(nodes) {
-    // Use splice() instead of node.remove() for proper removal and
-    // reconciliation. Would have issues with removing unintended decorator nodes
-    // with node.remove()
-    nodes.forEach((node) => {
-      const parent = node.getParent();
-      if (!$isElementNode(parent)) return
-
-      const children = parent.getChildren();
-      const index = children.indexOf(node);
-
-      if (index >= 0) {
-        parent.splice(index, 1, []);
-      }
-    });
-  }
-
-  #findAdjacentNodeTo(nodes) {
-    const firstNode = nodes[0];
-    const lastNode = nodes[nodes.length - 1];
-
-    return firstNode?.getPreviousSibling() || lastNode?.getNextSibling()
-  }
-
-  #selectAfterDeletion(focusNode) {
-    const root = $getRoot();
-    if (root.getChildrenSize() === 0) {
-      const newParagraph = $createParagraphNode();
-      root.append(newParagraph);
-      newParagraph.selectStart();
-    } else if (focusNode) {
-      if ($isTextNode(focusNode) || $isParagraphNode(focusNode)) {
-        focusNode.selectEnd();
-      } else {
-        focusNode.selectNext(0, 0);
-      }
-    }
-  }
-
   #collectSelectedListItems(selection) {
     const nodes = selection.getNodes();
     const listItems = new Set();
     const parentLists = new Set();
 
     for (const node of nodes) {
-      const listItem = getNearestListItemNode(node);
+      const listItem = $getNearestNodeOfType(node, ListItemNode);
       if (listItem) {
         listItems.add(listItem);
         const parentList = listItem.getParent();
@@ -3807,8 +3756,16 @@ class Extensions {
     return this.lexxyElement.toolbar
   }
 
+  get #baseExtensions() {
+    return this.lexxyElement.baseExtensions
+  }
+
+  get #configuredExtensions() {
+    return Lexxy.global.get("extensions")
+  }
+
   #initializeExtensions() {
-    const extensionDefinitions = Lexxy.global.get("extensions");
+    const extensionDefinitions = this.#baseExtensions.concat(this.#configuredExtensions);
 
     return extensionDefinitions.map(
       extension => new extension(this.lexxyElement)
@@ -3816,156 +3773,175 @@ class Extensions {
   }
 }
 
-const TOGGLE_HIGHLIGHT_COMMAND = createCommand();
-
-const hasPastedStylesState = createState("hasPastedStyles", {
-  parse: (value) => value || false
-});
-
-const HighlightExtension = defineExtension({
-  dependencies: [ RichTextExtension ],
-  name: "lexxy/highlight",
-  config: {
-    color: { buttons: [], permit: [] },
-    "background-color": { buttons: [], permit: [] }
-  },
-  html: {
-    import: {
-      mark: $markConversion
-    }
-  },
-  register(editor, config) {
-    const canonicalizers = buildCanonicalizers(config);
-
-    editor.registerCommand(TOGGLE_HIGHLIGHT_COMMAND, $toggleSelectionStyles, COMMAND_PRIORITY_NORMAL);
-    editor.registerNodeTransform(TextNode, $syncHighlightWithStyle);
-    editor.registerNodeTransform(TextNode, (textNode) => $canonicalizePastedStyles(textNode, canonicalizers));
+class ProvisionalParagraphNode extends ParagraphNode {
+  $config() {
+    return this.config("provisonal_paragraph", {
+      extends: ParagraphNode,
+      importDOM: () => null,
+      $transform: (node) => {
+        node.concretizeIfEdited(node);
+        node.removeUnlessRequired(node);
+      }
+    })
   }
-});
 
-function $applyHighlightStyle(textNode, element) {
-  const elementStyles = {
-    color: element.style?.color,
-    "background-color": element.style?.backgroundColor
-  };
+  static neededBetween(nodeBefore, nodeAfter) {
+    return !$isSelectableElement(nodeBefore, "next")
+      && !$isSelectableElement(nodeAfter, "previous")
+  }
 
-  if ($hasUpdateTag(PASTE_TAG)) { $setPastedStyles(textNode); }
-  const highlightStyle = getCSSFromStyleObject(elementStyles);
+  createDOM(editor) {
+    const p = super.createDOM(editor);
+    const selected = this.isSelected($getSelection());
+    p.classList.add("provisional-paragraph");
+    p.classList.toggle("hidden", !selected);
+    return p
+  }
 
-  if (highlightStyle.length) {
-    return textNode.setStyle(textNode.getStyle() + highlightStyle)
+  updateDOM(_prevNode, dom) {
+    const selected = this.isSelected($getSelection());
+    dom.classList.toggle("hidden", !selected);
+    return false
   }
-}
 
-function $markConversion() {
-  return {
-    conversion: extendTextNodeConversion("mark", $applyHighlightStyle),
-    priority: 1
+  getTextContent() {
+    return ""
   }
-}
 
-function buildCanonicalizers(config) {
-  return [
-    new StyleCanonicalizer("color", [ ...config.buttons.color, ...config.permit.color ]),
-    new StyleCanonicalizer("background-color", [ ...config.buttons["background-color"], ...config.permit["background-color"] ])
-  ]
-}
+  exportDOM() {
+    return {
+      element: null
+    }
+  }
 
-function $toggleSelectionStyles(styles) {
-  const selection = $getSelection();
-  if (!$isRangeSelection(selection)) return
+  // 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();
+    return targetSelection?.getNodes().some(node => node.is(this) || this.isParentOf(node))
+  }
 
-  const patch = {};
-  for (const property in styles) {
-    const oldValue = $getSelectionStyleValueForProperty(selection, property);
-    patch[property] = toggleOrReplace(oldValue, styles[property]);
+  removeUnlessRequired(self = this.getLatest()) {
+    if (!self.required) self.remove();
   }
 
-  $patchStyleText(selection, patch);
-}
+  concretizeIfEdited(self = this.getLatest()) {
+    if (self.getTextContentSize() > 0) {
+      self.replace($createParagraphNode(), true);
+    }
+  }
 
-function toggleOrReplace(oldValue, newValue) {
-  return oldValue === newValue ? null : newValue
-}
 
-function $syncHighlightWithStyle(textNode) {
-  if (hasHighlightStyles(textNode.getStyle()) !== textNode.hasFormat("highlight")) {
-    textNode.toggleFormat("highlight");
+  get required() {
+    return this.isDirectRootChild && ProvisionalParagraphNode.neededBetween(...this.immediateSiblings)
   }
-}
-
-function $canonicalizePastedStyles(textNode, canonicalizers = []) {
-  if ($hasPastedStyles(textNode)) {
-    $setPastedStyles(textNode, false);
 
-    const canonicalizedCSS = canonicalizers.reduce((css, canonicalizer) => {
-      return canonicalizer.applyCanonicalization(css)
-    }, textNode.getStyle());
+  get isDirectRootChild() {
+    const parent = this.getParent();
+    return $isRootOrShadowRoot(parent)
+  }
 
-    textNode.setStyle(canonicalizedCSS);
+  get immediateSiblings() {
+    return [ this.getPreviousSibling(), this.getNextSibling() ]
   }
 }
 
-function $setPastedStyles(textNode, value = true) {
-  $setState(textNode, hasPastedStylesState, value);
+function $isProvisionalParagraphNode(node) {
+  return node instanceof ProvisionalParagraphNode
 }
 
-function $hasPastedStyles(textNode) {
-  return $getState(textNode, hasPastedStylesState)
+function $isSelectableElement(node, direction) {
+  return $isElementNode(node) && (direction === "next" ? node.canInsertTextBefore() : node.canInsertTextAfter())
 }
 
-class Highlighter {
-
-  constructor(editorElement) {
-    this.editorElement = editorElement;
+class ProvisionalParagraphExtension extends LexxyExtension {
+  get lexicalExtension() {
+    return defineExtension({
+      name: "lexxy/provisional-paragraph",
+      nodes: [
+        ProvisionalParagraphNode
+      ],
+      register(editor) {
+        return mergeRegister(
+          // Process Provisional Paragraph Nodes on RootNode changes as sibling status influences whether
+          // they are required and their visible/hidden status
+          editor.registerNodeTransform(RootNode, $insertRequiredProvisionalParagraphs),
+          editor.registerNodeTransform(RootNode, $removeUnneededProvisionalParagraphs),
+          editor.registerCommand(SELECTION_CHANGE_COMMAND, $markAllProvisionalParagraphsDirty, COMMAND_PRIORITY_HIGH)
+        )
+      }
+    })
   }
+}
 
-  get editor() {
-    return this.editorElement.editor
+function $insertRequiredProvisionalParagraphs(rootNode) {
+  const firstNode = rootNode.getFirstChild();
+  if (ProvisionalParagraphNode.neededBetween(null, firstNode)) {
+    $insertFirst(rootNode, new ProvisionalParagraphNode);
   }
 
-  get lexicalExtension() {
-    return [ HighlightExtension, this.editorElement.config.get("highlight") ]
+  for (const node of $firstToLastIterator(rootNode)) {
+    const nextNode = node.getNextSibling();
+    if (ProvisionalParagraphNode.neededBetween(node, nextNode)) {
+      node.insertAfter(new ProvisionalParagraphNode);
+    }
   }
+}
 
-  toggle(styles) {
-    this.editor.dispatchCommand(TOGGLE_HIGHLIGHT_COMMAND, styles);
+function $removeUnneededProvisionalParagraphs(rootNode) {
+  for (const provisionalParagraph of $getAllProvisionalParagraphs(rootNode)) {
+    provisionalParagraph.removeUnlessRequired();
   }
+}
 
-  remove() {
-    this.toggle({ "color": null, "background-color": null });
+function $markAllProvisionalParagraphsDirty() {
+  for (const provisionalParagraph of $getAllProvisionalParagraphs()) {
+    provisionalParagraph.markDirty();
   }
 }
 
+function $getAllProvisionalParagraphs(rootNode = $getRoot()) {
+  return $descendantsMatching(rootNode.getChildren(), $isProvisionalParagraphNode)
+}
+
 const TRIX_LANGUAGE_ATTR = "language";
 
-const TrixContentExtension = defineExtension({
-  name: "lexxy/trix-content",
-  html: {
-    import: {
-      em: (element) => onlyStyledElements(element, {
-        conversion: extendTextNodeConversion("i", $applyHighlightStyle),
-        priority: 1
-      }),
-      span: (element) => onlyStyledElements(element, {
-        conversion: extendTextNodeConversion("mark", $applyHighlightStyle),
-        priority: 1
-      }),
-      strong: (element) => onlyStyledElements(element, {
-        conversion: extendTextNodeConversion("b", $applyHighlightStyle),
-        priority: 1
-      }),
-      del: () => ({
-        conversion: extendTextNodeConversion("s", $applyStrikethrough, $applyHighlightStyle),
-        priority: 1
-      }),
-      pre: (element) => onlyPreLanguageElements(element, {
-        conversion: extendConversion(CodeNode, "pre", $applyLanguage),
-        priority: 1
-      })
-    }
+class TrixContentExtension extends LexxyExtension {
+
+  get enabled() {
+    return this.editorElement.supportsRichText
   }
-});
+
+  get lexicalExtension() {
+    return defineExtension({
+      name: "lexxy/trix-content",
+      html: {
+        import: {
+          em: (element) => onlyStyledElements(element, {
+            conversion: extendTextNodeConversion("i", $applyHighlightStyle),
+            priority: 1
+          }),
+          span: (element) => onlyStyledElements(element, {
+            conversion: extendTextNodeConversion("mark", $applyHighlightStyle),
+            priority: 1
+          }),
+          strong: (element) => onlyStyledElements(element, {
+            conversion: extendTextNodeConversion("b", $applyHighlightStyle),
+            priority: 1
+          }),
+          del: () => ({
+            conversion: extendTextNodeConversion("s", $applyStrikethrough, $applyHighlightStyle),
+            priority: 1
+          }),
+          pre: (element) => onlyPreLanguageElements(element, {
+            conversion: extendConversion(CodeNode, "pre", $applyLanguage),
+            priority: 1
+          })
+        }
+      }
+    })
+  }
+}
 
 function onlyStyledElements(element, conversion) {
   const elementHighlighted = element.style.color !== "" || element.style.backgroundColor !== "";
@@ -3987,8 +3963,12 @@ function $applyLanguage(conversionOutput, element) {
 }
 
 class WrappedTableNode extends TableNode {
-  static clone(node) {
-    return new WrappedTableNode(node.__key)
+  $config() {
+    return this.config("wrapped_table_node", { extends: TableNode })
+  }
+
+  static importDOM() {
+    return super.importDOM()
   }
 
   exportDOM(editor) {
@@ -4010,99 +3990,106 @@ class WrappedTableNode extends TableNode {
   }
 }
 
-const TablesLexicalExtension = defineExtension({
-  name: "lexxy/tables",
-  nodes: [
-    WrappedTableNode,
-    {
-      replace: TableNode,
-      with: () => new WrappedTableNode()
-    },
-    TableCellNode,
-    TableRowNode
-  ],
-  register(editor) {
-    // Register Lexical table plugins
-    registerTablePlugin(editor);
-    registerTableSelectionObserver(editor, true);
-    setScrollableTablesActive(editor, true);
-
-    // Bug fix: Prevent hardcoded background color (Lexical #8089)
-    editor.registerNodeTransform(TableCellNode, (node) => {
-      if (node.getBackgroundColor() === null) {
-        node.setBackgroundColor("");
-      }
-    });
+class TablesExtension extends LexxyExtension {
 
-    // Bug fix: Fix column header states (Lexical #8090)
-    editor.registerNodeTransform(TableCellNode, (node) => {
-      const headerState = node.getHeaderStyles();
+  get enabled() {
+    return this.editorElement.supportsRichText
+  }
 
-      if (headerState !== TableCellHeaderStates.ROW) return
+  get lexicalExtension() {
+    return defineExtension({
+      name: "lexxy/tables",
+      nodes: [
+        WrappedTableNode,
+        {
+          replace: TableNode,
+          with: () => new WrappedTableNode(),
+          withKlass: WrappedTableNode
+        },
+        TableCellNode,
+        TableRowNode
+      ],
+      register(editor) {
+        return mergeRegister(
+          // Register Lexical table plugins
+          registerTablePlugin(editor),
+          registerTableSelectionObserver(editor, true),
+          setScrollableTablesActive(editor, true),
+
+          // Bug fix: Prevent hardcoded background color (Lexical #8089)
+          editor.registerNodeTransform(TableCellNode, (node) => {
+            if (node.getBackgroundColor() === null) {
+              node.setBackgroundColor("");
+            }
+          }),
 
-      const rowParent = node.getParent();
-      const tableNode = rowParent?.getParent();
-      if (!tableNode) return
+          // Bug fix: Fix column header states (Lexical #8090)
+          editor.registerNodeTransform(TableCellNode, (node) => {
+            const headerState = node.getHeaderStyles();
 
-      const rows = tableNode.getChildren();
-      const cellIndex = rowParent.getChildren().indexOf(node);
+            if (headerState !== TableCellHeaderStates.ROW) return
 
-      const cellsInRow = rowParent.getChildren();
-      const isHeaderRow = cellsInRow.every(cell =>
-        cell.getHeaderStyles() !== TableCellHeaderStates.NO_STATUS
-      );
+            const rowParent = node.getParent();
+            const tableNode = rowParent?.getParent();
+            if (!tableNode) return
 
-      const isHeaderColumn = rows.every(row => {
-        const cell = row.getChildren()[cellIndex];
-        return cell && cell.getHeaderStyles() !== TableCellHeaderStates.NO_STATUS
-      });
+            const rows = tableNode.getChildren();
+            const cellIndex = rowParent.getChildren().indexOf(node);
 
-      let newHeaderState = TableCellHeaderStates.NO_STATUS;
+            const cellsInRow = rowParent.getChildren();
+            const isHeaderRow = cellsInRow.every(cell =>
+              cell.getHeaderStyles() !== TableCellHeaderStates.NO_STATUS
+            );
 
-      if (isHeaderRow) {
-        newHeaderState |= TableCellHeaderStates.ROW;
-      }
+            const isHeaderColumn = rows.every(row => {
+              const cell = row.getChildren()[cellIndex];
+              return cell && cell.getHeaderStyles() !== TableCellHeaderStates.NO_STATUS
+            });
 
-      if (isHeaderColumn) {
-        newHeaderState |= TableCellHeaderStates.COLUMN;
-      }
+            let newHeaderState = TableCellHeaderStates.NO_STATUS;
 
-      if (newHeaderState !== headerState) {
-        node.setHeaderStyles(newHeaderState, TableCellHeaderStates.BOTH);
-      }
-    });
+            if (isHeaderRow) newHeaderState |= TableCellHeaderStates.ROW;
+            if (isHeaderColumn) newHeaderState |= TableCellHeaderStates.COLUMN;
 
-    editor.registerCommand("insertTableRowAfter", () => {
-      $insertTableRowAtSelection(true);
-    }, COMMAND_PRIORITY_NORMAL);
+            if (newHeaderState !== headerState) {
+              node.setHeaderStyles(newHeaderState, TableCellHeaderStates.BOTH);
+            }
+          }),
 
-    editor.registerCommand("insertTableRowBefore", () => {
-      $insertTableRowAtSelection(false);
-    }, COMMAND_PRIORITY_NORMAL);
+          editor.registerCommand("insertTableRowAfter", () => {
+            $insertTableRowAtSelection(true);
+          }, COMMAND_PRIORITY_NORMAL),
 
-    editor.registerCommand("insertTableColumnAfter", () => {
-      $insertTableColumnAtSelection(true);
-    }, COMMAND_PRIORITY_NORMAL);
+          editor.registerCommand("insertTableRowBefore", () => {
+            $insertTableRowAtSelection(false);
+          }, COMMAND_PRIORITY_NORMAL),
 
-    editor.registerCommand("insertTableColumnBefore", () => {
-      $insertTableColumnAtSelection(false);
-    }, COMMAND_PRIORITY_NORMAL);
+          editor.registerCommand("insertTableColumnAfter", () => {
+            $insertTableColumnAtSelection(true);
+          }, COMMAND_PRIORITY_NORMAL),
 
-    editor.registerCommand("deleteTableRow", () => {
-      $deleteTableRowAtSelection();
-    }, COMMAND_PRIORITY_NORMAL);
+          editor.registerCommand("insertTableColumnBefore", () => {
+            $insertTableColumnAtSelection(false);
+          }, COMMAND_PRIORITY_NORMAL),
 
-    editor.registerCommand("deleteTableColumn", () => {
-      $deleteTableColumnAtSelection();
-    }, COMMAND_PRIORITY_NORMAL);
+          editor.registerCommand("deleteTableRow", () => {
+            $deleteTableRowAtSelection();
+          }, COMMAND_PRIORITY_NORMAL),
 
-    editor.registerCommand("deleteTable", () => {
-      const selection = $getSelection();
-      if (!$isRangeSelection(selection)) return false
-      $findTableNode(selection.anchor.getNode())?.remove();
-    }, COMMAND_PRIORITY_NORMAL);
+          editor.registerCommand("deleteTableColumn", () => {
+            $deleteTableColumnAtSelection();
+          }, COMMAND_PRIORITY_NORMAL),
+
+          editor.registerCommand("deleteTable", () => {
+            const selection = $getSelection();
+            if (!$isRangeSelection(selection)) return false
+            $findTableNode(selection.anchor.getNode())?.remove();
+          }, COMMAND_PRIORITY_NORMAL)
+        )
+      }
+    })
   }
-});
+}
 
 class LexicalEditorElement extends HTMLElement {
   static formAssociated = true
@@ -4124,7 +4111,6 @@ class LexicalEditorElement extends HTMLElement {
     this.id ??= generateDomId("lexxy-editor");
     this.config = new EditorConfiguration(this);
     this.extensions = new Extensions(this);
-    this.highlighter = new Highlighter(this);
 
     this.editor = this.#createEditor();
 
@@ -4189,6 +4175,15 @@ class LexicalEditorElement extends HTMLElement {
     return this.toolbar
   }
 
+  get baseExtensions() {
+    return [
+      ProvisionalParagraphExtension,
+      HighlightExtension,
+      TrixContentExtension,
+      TablesExtension
+    ]
+  }
+
   get directUploadUrl() {
     return this.dataset.directUploadUrl
   }
@@ -4271,23 +4266,33 @@ class LexicalEditorElement extends HTMLElement {
 
   #parseHtmlIntoLexicalNodes(html) {
     if (!html) html = "<p></p>";
-    const nodes = $generateNodesFromDOM(this.editor, parseHtml(`<div>${html}</div>`));
+    const nodes = $generateNodesFromDOM(this.editor, parseHtml(`${html}`));
 
-    if (nodes.length === 0) {
-      return [ $createParagraphNode() ]
-    }
+    return nodes
+      .map(this.#wrapTextNode)
+      .map(this.#unwrapDecoratorNode)
+  }
 
-    // Custom decorator block elements such action-text-attachments get wrapped into <p> automatically by Lexical.
-    // We flatten those.
-    return nodes.map(node => {
-      if (node.getType() === "paragraph" && node.getChildrenSize() === 1) {
-        const child = node.getFirstChild();
-        if (child instanceof DecoratorNode && !child.isInline()) {
-          return child
-        }
+  // Raw string values produce TextNodes which cannot be appended directly to the RootNode.
+  // We wrap those in <p>
+  #wrapTextNode(node) {
+    if (!$isTextNode(node)) return node
+
+    const paragraph = $createParagraphNode();
+    paragraph.append(node);
+    return paragraph
+  }
+
+  // Custom decorator block elements such as action-text-attachments get wrapped into <p> automatically by Lexical.
+  // We unwrap those.
+  #unwrapDecoratorNode(node) {
+    if ($isParagraphNode(node) && node.getChildrenSize() === 1) {
+      const child = node.getFirstChild();
+      if ($isDecoratorNode(child) && !child.isInline()) {
+        return child
       }
-      return node
-    })
+    }
+    return node
   }
 
   #initialize() {
@@ -4310,7 +4315,7 @@ class LexicalEditorElement extends HTMLElement {
       theme: theme,
       nodes: this.#lexicalNodes
     },
-      ...this.#lexicalExtensions
+      ...this.extensions.lexicalExtensions
     );
 
     editor.setRootElement(this.editorContentElement);
@@ -4318,23 +4323,6 @@ class LexicalEditorElement extends HTMLElement {
     return editor
   }
 
-  get #lexicalExtensions() {
-    const extensions = [];
-    const richTextExtensions = [
-      this.highlighter.lexicalExtension,
-      TrixContentExtension,
-      TablesLexicalExtension
-    ];
-
-    if (this.supportsRichText) {
-      extensions.push(...richTextExtensions);
-    }
-
-    extensions.push(...this.extensions.lexicalExtensions);
-
-    return extensions
-  }
-
   get #lexicalNodes() {
     const nodes = [ CustomActionTextAttachmentNode ];
 
@@ -4540,6 +4528,7 @@ class LexicalEditorElement extends HTMLElement {
   #attachToolbar() {
     if (this.#hasToolbar) {
       this.toolbarElement.setEditor(this);
+      this.extensions.initializeToolbars();
     }
   }
 
@@ -6274,35 +6263,6 @@ function defineElements() {
   });
 }
 
-class LexxyExtension {
-  #editorElement
-
-  constructor(editorElement) {
-    this.#editorElement = editorElement;
-  }
-
-  get editorElement() {
-    return this.#editorElement
-  }
-
-  get editorConfig() {
-    return this.#editorElement.config
-  }
-
-  // optional: defaults to true
-  get enabled() {
-    return true
-  }
-
-  get lexicalExtension() {
-    return null
-  }
-
-  initializeToolbar(_lexxyToolbar) {
-
-  }
-}
-
 const configure = Lexxy.configure;
 
 // Pushing elements definition to after the current call stack to allow global configuration to take place first