@37signals/lexxy 0.9.2-beta → 0.9.3-beta

package/dist/lexxy.esm.js

@@ -10,10 +10,11 @@ import 'prismjs/components/prism-json';
 import 'prismjs/components/prism-diff';
 import DOMPurify from 'dompurify';
 import { getStyleObjectFromCSS, getCSSFromStyleObject, $isAtNodeEnd, $getSelectionStyleValueForProperty, $patchStyleText, $setBlocksType } from '@lexical/selection';
-import { SKIP_DOM_SELECTION_TAG, $getSelection, $isRangeSelection, $getNodeByKey, $isTextNode, $createRangeSelection, $setSelection, DecoratorNode, $createTextNode, $createNodeSelection, $isDecoratorNode, $isLineBreakNode, $isElementNode, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $createParagraphNode, 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, mergeRegister as mergeRegister$1, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, DELETE_CHARACTER_COMMAND, SELECTION_CHANGE_COMMAND, CLICK_COMMAND, isDOMNode, $getNearestNodeFromDOMNode, $isRootOrShadowRoot, ElementNode, $splitNode, $isParagraphNode, $createLineBreakNode, $isRootNode, ParagraphNode, 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 { SKIP_DOM_SELECTION_TAG, $getSelection, $isRangeSelection, $getNodeByKey, $isTextNode, $createRangeSelection, $setSelection, DecoratorNode, $createTextNode, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $createNodeSelection, $isDecoratorNode, $isLineBreakNode, $isElementNode, $createParagraphNode, 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, mergeRegister as mergeRegister$1, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, DELETE_CHARACTER_COMMAND, SELECTION_CHANGE_COMMAND, CLICK_COMMAND, isDOMNode, $getNearestNodeFromDOMNode, $isRootOrShadowRoot, ElementNode, $splitNode, $isParagraphNode, $createLineBreakNode, $isRootNode, ParagraphNode, 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 { buildEditorFromExtensions } from '@lexical/extension';
 import { ListNode, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, ListItemNode, $getListDepth, $isListItemNode, $isListNode, registerList } from '@lexical/list';
 import { $createAutoLinkNode, $toggleLink, LinkNode, $createLinkNode, AutoLinkNode, $isLinkNode } from '@lexical/link';
+import { $getNearestNodeOfType, $wrapNodeInElement, $lastToFirstIterator, mergeRegister, $insertFirst, $unwrapAndFilterDescendants, $firstToLastIterator, $descendantsMatching } from '@lexical/utils';
 import { registerPlainText } from '@lexical/plain-text';
 import { RichTextExtension, $isQuoteNode, $isHeadingNode, $createHeadingNode, $createQuoteNode, QuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
 import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
@@ -23,7 +24,6 @@ import { createEmptyHistoryState, registerHistory } from '@lexical/history';
 import { createElement, extractPlainTextFromHtml, createAttachmentFigure, isPreviewableImage, dispatch, parseHtml, addBlockSpacing, generateDomId } from './lexxy_helpers.esm.js';
 export { highlightCode as highlightAll, highlightCode } from './lexxy_helpers.esm.js';
 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 { $getNearestNodeOfType, $wrapNodeInElement, $lastToFirstIterator, mergeRegister, $insertFirst, $unwrapAndFilterDescendants, $firstToLastIterator, $descendantsMatching } from '@lexical/utils';
 import { marked } from 'marked';
 import { $insertDataTransferForRichText } from '@lexical/clipboard';
 
@@ -1409,6 +1409,24 @@ function isSelectionHighlighted(selection) {
   }
 }
 
+function getHighlightStyles(selection) {
+  if (!$isRangeSelection(selection)) return null
+
+  let styles = getStyleObjectFromCSS(selection.style);
+  if (!styles.color && !styles["background-color"]) {
+    const anchorNode = selection.anchor.getNode();
+    if ($isTextNode(anchorNode)) {
+      styles = getStyleObjectFromCSS(anchorNode.getStyle());
+    }
+  }
+
+  const color = styles.color || null;
+  const backgroundColor = styles["background-color"] || null;
+  if (!color && !backgroundColor) return null
+
+  return { color, backgroundColor }
+}
+
 function hasHighlightStyles(cssOrStyles) {
   const styles = typeof cssOrStyles === "string" ? getStyleObjectFromCSS(cssOrStyles) : cssOrStyles;
   return !!(styles.color || styles["background-color"])
@@ -1971,6 +1989,7 @@ const COMMANDS = [
   "insertOrderedList",
   "insertQuoteBlock",
   "insertCodeBlock",
+  "setCodeLanguage",
   "insertHorizontalDivider",
   "uploadImage",
   "uploadFile",
@@ -2046,7 +2065,14 @@ class CommandDispatcher {
   }
 
   dispatchUnlink() {
-    this.#toggleLink(null);
+    this.editor.update(() => {
+      // Let adapters signal whether unlink should target a frozen link key.
+      if (this.editorElement.adapter.unlinkFrozenNode?.()) {
+        return
+      }
+
+      $toggleLink(null);
+    });
   }
 
   dispatchInsertUnorderedList() {
@@ -2137,6 +2163,17 @@ class CommandDispatcher {
     }
   }
 
+  dispatchSetCodeLanguage(language) {
+    this.editor.update(() => {
+      if (!this.selection.isInsideCodeBlock) return
+
+      const codeNode = this.selection.nearestNodeOfType(CodeNode);
+      if (!codeNode) return
+
+      codeNode.setLanguage(language);
+    });
+  }
+
   dispatchInsertHorizontalDivider() {
     this.contents.insertAtCursorEnsuringLineBelow(new HorizontalDividerNode());
     this.editor.focus();
@@ -2335,16 +2372,6 @@ class CommandDispatcher {
     return $isRangeSelection(selection) && selection.isCollapsed()
   }
 
-  // Not using TOGGLE_LINK_COMMAND because it's not handled unless you use React/LinkPlugin
-  #toggleLink(url) {
-    this.editor.update(() => {
-      if (url === null) {
-        $toggleLink(null);
-      } else {
-        $toggleLink(url);
-      }
-    });
-  }
 }
 
 function capitalize(str) {
@@ -2571,8 +2598,8 @@ class ActionTextAttachmentNode extends DecoratorNode {
     return null
   }
 
-  createAttachmentFigure() {
-    const figure = createAttachmentFigure(this.contentType, this.isPreviewableAttachment, this.fileName);
+  createAttachmentFigure(previewable = this.isPreviewableAttachment) {
+    const figure = createAttachmentFigure(this.contentType, previewable, this.fileName);
     figure.draggable = true;
     figure.dataset.lexicalNodeKey = this.__key;
 
@@ -3657,9 +3684,12 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
     // node is reloaded from saved state such as from history.
     this.#startUploadIfNeeded();
 
-    const figure = this.createAttachmentFigure();
+    // Bridge-managed uploads (uploadUrl is null) don't have file data to show
+    // an image preview, so always show the file icon during upload.
+    const canPreviewFile = this.isPreviewableAttachment && this.uploadUrl != null;
+    const figure = this.createAttachmentFigure(canPreviewFile);
 
-    if (this.isPreviewableAttachment) {
+    if (canPreviewFile) {
       const img = figure.appendChild(this.#createDOMForImage());
 
       // load file locally to set dimensions and prevent vertical shifting
@@ -3759,6 +3789,7 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
 
   async #startUploadIfNeeded() {
     if (this.#uploadStarted) return
+    if (!this.uploadUrl) return // Bridge-managed upload — skip DirectUpload
 
     this.#setUploadStarted();
 
@@ -3775,7 +3806,9 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
         this.#handleUploadError(error);
       } else {
         this.#dispatchEvent("lexxy:upload-end", { file: this.file, error: null });
-        this.#showUploadedAttachment(blob);
+        this.editor.update(() => {
+          this.showUploadedAttachment(blob);
+        }, { tag: this.#backgroundUpdateTags });
       }
     });
   }
@@ -3819,17 +3852,15 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
     }, { tag: this.#backgroundUpdateTags });
   }
 
-  #showUploadedAttachment(blob) {
-    const editorHasFocus = this.#editorHasFocus;
+  showUploadedAttachment(blob) {
+    const replacementNode = this.#toActionTextAttachmentNodeWith(blob);
+    this.replace(replacementNode);
 
-    this.editor.update(() => {
-      const replacementNode = this.#toActionTextAttachmentNodeWith(blob);
-      this.replace(replacementNode);
+    if ($isRootOrShadowRoot(replacementNode.getParent())) {
+      replacementNode.selectNext();
+    }
 
-      if (editorHasFocus && $isRootOrShadowRoot(replacementNode.getParent())) {
-        replacementNode.selectNext();
-      }
-    }, { tag: this.#backgroundUpdateTags });
+    return replacementNode.getKey()
   }
 
   // Upload lifecycle methods (progress, completion, errors) run asynchronously and may
@@ -4431,6 +4462,53 @@ class Contents {
     });
   }
 
+  insertPendingAttachment(file) {
+    if (!this.editorElement.supportsAttachments) return null
+
+    let nodeKey = null;
+    this.editor.update(() => {
+      const uploadNode = new ActionTextAttachmentUploadNode({
+        file,
+        uploadUrl: null,
+        blobUrlTemplate: this.editorElement.blobUrlTemplate,
+        editor: this.editor
+      });
+      this.insertAtCursor(uploadNode);
+      nodeKey = uploadNode.getKey();
+    }, { tag: HISTORY_MERGE_TAG });
+
+    if (!nodeKey) return null
+
+    const editor = this.editor;
+    return {
+      setAttributes(blob) {
+        editor.update(() => {
+          const node = $getNodeByKey(nodeKey);
+          if (!(node instanceof ActionTextAttachmentUploadNode)) return
+
+          const replacementNodeKey = node.showUploadedAttachment(blob);
+          if (replacementNodeKey) {
+            nodeKey = replacementNodeKey;
+          }
+        }, { tag: HISTORY_MERGE_TAG });
+      },
+      setUploadProgress(progress) {
+        editor.update(() => {
+          const node = $getNodeByKey(nodeKey);
+          if (!(node instanceof ActionTextAttachmentUploadNode)) return
+
+          node.getWritable().progress = progress;
+        }, { tag: HISTORY_MERGE_TAG });
+      },
+      remove() {
+        editor.update(() => {
+          const node = $getNodeByKey(nodeKey);
+          if (node) node.remove();
+        });
+      }
+    }
+  }
+
   replaceNodeWithHTML(nodeKey, html, options = {}) {
     this.editor.update(() => {
       const node = $getNodeByKey(nodeKey);
@@ -4915,6 +4993,18 @@ class Extensions {
   }
 }
 
+class BrowserAdapter {
+  frozenLinkKey = null
+
+  dispatchAttributesChange(attributes, linkHref, highlight, headingTag) {}
+  dispatchEditorInitialized(detail) {}
+  freeze() {}
+  thaw() {}
+  unlinkFrozenNode() {
+    return false
+  }
+}
+
 // Custom TextNode exportDOM that avoids redundant bold/italic wrapping.
 //
 // Lexical's built-in TextNode.exportDOM() calls createDOM() which produces semantic tags
@@ -5966,6 +6056,7 @@ class LexicalEditorElement extends HTMLElement {
 
   #initialValue = ""
   #validationTextArea = document.createElement("textarea")
+  #editorInitializedRafId = null
   #disposables = []
 
   constructor() {
@@ -5975,7 +6066,7 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   connectedCallback() {
-    this.id ??= generateDomId("lexxy-editor");
+    this.id ||= generateDomId("lexxy-editor");
     this.config = new EditorConfiguration(this);
     this.extensions = new Extensions(this);
 
@@ -5989,13 +6080,14 @@ class LexicalEditorElement extends HTMLElement {
     this.#disposables.push(this.selection);
 
     this.clipboard = new Clipboard(this);
+    this.adapter = new BrowserAdapter();
 
     const commandDispatcher = CommandDispatcher.configureFor(this);
     this.#disposables.push(commandDispatcher);
 
     this.#initialize();
 
-    requestAnimationFrame(() => dispatch(this, "lexxy:initialize"));
+    this.#scheduleEditorInitializedDispatch();
     this.toggleAttribute("connected", true);
 
     this.#handleAutofocus();
@@ -6004,6 +6096,7 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   disconnectedCallback() {
+    this.#cancelEditorInitializedDispatch();
     this.valueBeforeDisconnect = this.value;
     this.#reset(); // Prevent hangs with Safari when morphing
   }
@@ -6100,6 +6193,32 @@ class LexicalEditorElement extends HTMLElement {
     return this.config.get("richText")
   }
 
+  registerAdapter(adapter) {
+    this.adapter = adapter;
+
+    if (!this.editor) return
+
+    this.#cancelEditorInitializedDispatch();
+    this.#dispatchEditorInitialized();
+    this.#dispatchAttributesChange();
+  }
+
+  freezeSelection() {
+    this.adapter.freeze();
+  }
+
+  thawSelection() {
+    this.adapter.thaw();
+  }
+
+  dispatchAttributesChange() {
+    this.#dispatchAttributesChange();
+  }
+
+  dispatchEditorInitialized() {
+    this.#dispatchEditorInitialized();
+  }
+
   // TODO: Deprecate `single-line` attribute
   get isSingleLineMode() {
     return this.hasAttribute("single-line")
@@ -6224,6 +6343,7 @@ class LexicalEditorElement extends HTMLElement {
     const editorContentElement = createElement("div", {
       classList: "lexxy-editor__content",
       contenteditable: true,
+      autocapitalize: "none",
       role: "textbox",
       "aria-multiline": true,
       "aria-label": this.#labelText,
@@ -6285,6 +6405,7 @@ class LexicalEditorElement extends HTMLElement {
       this.#internalFormValue = this.value;
       this.#toggleEmptyStatus();
       this.#setValidity();
+      this.#dispatchAttributesChange();
     }));
   }
 
@@ -6380,6 +6501,7 @@ class LexicalEditorElement extends HTMLElement {
 
   #handleFocusIn(event) {
     if (this.#elementInEditorOrToolbar(event.target) && !this.currentlyFocused) {
+      this.#dispatchAttributesChange();
       dispatch(this, "lexxy:focus");
       this.currentlyFocused = true;
     }
@@ -6460,7 +6582,112 @@ class LexicalEditorElement extends HTMLElement {
     }
   }
 
+  #dispatchAttributesChange() {
+    let attributes = null;
+    let linkHref = null;
+    let highlight = null;
+    let headingTag = null;
+
+    this.editor.getEditorState().read(() => {
+      const selection = $getSelection();
+      if (!$isRangeSelection(selection)) return
+
+      const format = this.selection.getFormat();
+      if (Object.keys(format).length === 0) return
+
+      const anchorNode = selection.anchor.getNode();
+      const linkNode = $getNearestNodeOfType(anchorNode, LinkNode);
+
+      attributes = {
+        bold: { active: format.isBold, enabled: true },
+        italic: { active: format.isItalic, enabled: true },
+        strikethrough: { active: format.isStrikethrough, enabled: true },
+        code: { active: format.isInCode, enabled: true },
+        highlight: { active: format.isHighlight, enabled: true },
+        link: { active: format.isInLink, enabled: true },
+        quote: { active: format.isInQuote, enabled: true },
+        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 }
+      };
+
+      linkHref = linkNode ? linkNode.getURL() : null;
+      highlight = format.isHighlight ? getHighlightStyles(selection) : null;
+      headingTag = format.headingTag ?? null;
+    });
+
+    if (attributes) {
+      this.adapter.dispatchAttributesChange(attributes, linkHref, highlight, headingTag);
+    }
+  }
+
+  #dispatchEditorInitialized() {
+    if (!this.adapter) return
+
+    this.adapter.dispatchEditorInitialized({
+      highlightColors: this.#resolvedHighlightColors,
+      headingFormats: this.#supportedHeadingFormats
+    });
+  }
+
+  #scheduleEditorInitializedDispatch() {
+    this.#cancelEditorInitializedDispatch();
+    this.#editorInitializedRafId = requestAnimationFrame(() => {
+      this.#editorInitializedRafId = null;
+      if (!this.isConnected || !this.adapter) return
+
+      dispatch(this, "lexxy:initialize");
+      this.#dispatchEditorInitialized();
+    });
+  }
+
+  #cancelEditorInitializedDispatch() {
+    if (this.#editorInitializedRafId == null) return
+
+    cancelAnimationFrame(this.#editorInitializedRafId);
+    this.#editorInitializedRafId = null;
+  }
+
+  get #resolvedHighlightColors() {
+    const buttons = this.config.get("highlight.buttons");
+    if (!buttons) return null
+
+    const colors = this.#resolveColors("color", buttons.color || []);
+    const backgroundColors = this.#resolveColors("background-color", buttons["background-color"] || []);
+    return { colors, backgroundColors }
+  }
+
+  get #supportedHeadingFormats() {
+    if (!this.supportsRichText) return []
+
+    return [
+      { label: "Normal", command: "setFormatParagraph", tag: null },
+      { label: "Large heading", command: "setFormatHeadingLarge", tag: "h2" },
+      { label: "Medium heading", command: "setFormatHeadingMedium", tag: "h3" },
+      { label: "Small heading", command: "setFormatHeadingSmall", tag: "h4" },
+    ]
+  }
+
+  #resolveColors(property, cssValues) {
+    const resolver = document.createElement("span");
+    resolver.style.display = "none";
+    this.appendChild(resolver);
+
+    const resolved = cssValues.map(cssValue => {
+      resolver.style.setProperty(property, cssValue);
+      const value = window.getComputedStyle(resolver).getPropertyValue(property);
+      resolver.style.removeProperty(property);
+      return { name: cssValue, value }
+    });
+
+    resolver.remove();
+    return resolved
+  }
+
   #reset() {
+    this.#cancelEditorInitializedDispatch();
     this.#dispose();
     this.editorContentElement?.remove();
     this.editorContentElement = null;
@@ -6472,6 +6699,7 @@ class LexicalEditorElement extends HTMLElement {
 
   #dispose() {
     this.#unregisterHandlers();
+    this.adapter = null;
     document.removeEventListener("turbo:before-cache", this.#handleTurboBeforeCache);
 
     while (this.#disposables.length) {
@@ -7377,10 +7605,13 @@ class LexicalPromptElement extends HTMLElement {
 }
 
 class CodeLanguagePicker extends HTMLElement {
+  #abortController = null
+
   connectedCallback() {
     this.editorElement = this.closest("lexxy-editor");
     this.editor = this.editorElement.editor;
     this.classList.add("lexxy-floating-controls");
+    this.#abortController = new AbortController();
 
     this.#attachLanguagePicker();
     this.#hide();
@@ -7392,13 +7623,27 @@ class CodeLanguagePicker extends HTMLElement {
   }
 
   dispose() {
+    this.#abortController?.abort();
+    this.#abortController = null;
     this.unregisterUpdateListener?.();
     this.unregisterUpdateListener = null;
   }
 
   #attachLanguagePicker() {
     this.languagePickerElement = this.#findLanguagePicker() ?? this.#createLanguagePicker();
-    this.append(this.languagePickerElement);
+
+    const signal = this.#abortController.signal;
+
+    this.languagePickerElement.addEventListener("change", () => {
+      this.#updateCodeBlockLanguage(this.languagePickerElement.value);
+    }, { signal });
+
+    this.languagePickerElement.addEventListener("mousedown", (event) => {
+      this.#dispatchOpenEvent(event);
+    }, { signal });
+
+    this.languagePickerElement.setAttribute("nonce", getNonce());
+    this.appendChild(this.languagePickerElement);
   }
 
   #findLanguagePicker() {
@@ -7415,12 +7660,6 @@ class CodeLanguagePicker extends HTMLElement {
       selectElement.appendChild(option);
     }
 
-    selectElement.addEventListener("change", () => {
-      this.#updateCodeBlockLanguage(this.languagePickerElement.value);
-    });
-
-    selectElement.setAttribute("nonce", getNonce());
-
     return selectElement
   }
 
@@ -7443,6 +7682,21 @@ class CodeLanguagePicker extends HTMLElement {
     return Object.fromEntries([ plainEntry, ...sortedEntries ])
   }
 
+  #dispatchOpenEvent(event) {
+    const handled = !dispatch(this.editorElement, "lexxy:code-language-picker-open", {
+      languages: this.#bridgeLanguages,
+      currentLanguage: this.languagePickerElement.value
+    }, true);
+
+    if (handled) {
+      event.preventDefault();
+    }
+  }
+
+  get #bridgeLanguages() {
+    return Object.entries(this.#languages).map(([ key, name ]) => ({ key, name }))
+  }
+
   #updateCodeBlockLanguage(language) {
     this.editor.update(() => {
       const codeNode = this.#getCurrentCodeNode();
@@ -8304,9 +8558,107 @@ function defineElements() {
   });
 }
 
+class NativeAdapter {
+  frozenLinkKey = null
+
+  constructor(editorElement) {
+    this.editorElement = editorElement;
+    this.editorContentElement = editorElement.editorContentElement;
+  }
+
+  dispatchAttributesChange(attributes, linkHref, highlight, headingTag) {
+    dispatch(this.editorElement, "lexxy:attributes-change", {
+      attributes,
+      link: linkHref ? { href: linkHref } : null,
+      highlight,
+      headingTag
+    });
+  }
+
+  dispatchEditorInitialized(detail) {
+    dispatch(this.editorElement, "lexxy:editor-initialized", detail);
+  }
+
+  freeze() {
+    let frozenLinkKey = null;
+    this.editorElement.editor?.getEditorState().read(() => {
+      const selection = $getSelection();
+      if (!$isRangeSelection(selection)) return
+
+      const linkNode = $getNearestNodeOfType(selection.anchor.getNode(), LinkNode);
+      if (linkNode) {
+        frozenLinkKey = linkNode.getKey();
+      }
+    });
+
+    this.frozenLinkKey = frozenLinkKey;
+    this.editorContentElement.contentEditable = "false";
+  }
+
+  thaw() {
+    this.editorContentElement.contentEditable = "true";
+  }
+
+  unlinkFrozenNode() {
+    const key = this.frozenLinkKey;
+    if (!key) return false
+
+    const linkNode = $getNodeByKey(key);
+    if (!$isLinkNode(linkNode)) {
+      this.frozenLinkKey = null;
+      return false
+    }
+
+    const children = linkNode.getChildren();
+    for (const child of children) {
+      linkNode.insertBefore(child);
+    }
+    linkNode.remove();
+
+    // Select the former link text so a follow-up createLink can re-wrap it.
+    const firstText = this.#findFirstTextDescendant(children);
+    const lastText = this.#findLastTextDescendant(children);
+    if (firstText && lastText) {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection)) {
+        selection.anchor.set(firstText.getKey(), 0, "text");
+        selection.focus.set(lastText.getKey(), lastText.getTextContent().length, "text");
+      }
+    }
+
+    this.frozenLinkKey = null;
+    return true
+  }
+
+  #findFirstTextDescendant(nodes) {
+    for (const node of nodes) {
+      if ($isTextNode(node)) return node
+      if ($isElementNode(node)) {
+        const nestedTextNode = this.#findFirstTextDescendant(node.getChildren());
+        if (nestedTextNode) return nestedTextNode
+      }
+    }
+
+    return null
+  }
+
+  #findLastTextDescendant(nodes) {
+    for (let index = nodes.length - 1; index >= 0; index--) {
+      const node = nodes[index];
+      if ($isTextNode(node)) return node
+      if ($isElementNode(node)) {
+        const nestedTextNode = this.#findLastTextDescendant(node.getChildren());
+        if (nestedTextNode) return nestedTextNode
+      }
+    }
+
+    return null
+  }
+}
+
 const configure = Lexxy.configure;
 
 // Pushing elements definition to after the current call stack to allow global configuration to take place first
 setTimeout(defineElements, 0);
 
-export { $createActionTextAttachmentNode, $createActionTextAttachmentUploadNode, $isActionTextAttachmentNode, ActionTextAttachmentNode, ActionTextAttachmentUploadNode, CustomActionTextAttachmentNode, LexxyExtension as Extension, HorizontalDividerNode, configure };
+export { $createActionTextAttachmentNode, $createActionTextAttachmentUploadNode, $isActionTextAttachmentNode, ActionTextAttachmentNode, ActionTextAttachmentUploadNode, CustomActionTextAttachmentNode, LexxyExtension as Extension, HorizontalDividerNode, NativeAdapter, configure };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@37signals/lexxy",
-  "version": "0.9.2-beta",
+  "version": "0.9.3-beta",
   "description": "Lexxy - A modern rich text editor for Rails.",
   "module": "dist/lexxy.esm.js",
   "type": "module",