@37signals/lexxy 0.9.33 → 1.0.1

package/README.md

@@ -8,6 +8,7 @@ A modern rich text editor for Rails.
 
 - Built on top of [Lexical](https://lexical.dev), the powerful text editor framework from Meta.
 - Good HTML semantics. Paragraphs are real `<p>` tags, as they should be.
+- Designed with [accessibility](https://lexxy.dev/docs/accessibility.html) in mind.
 - Markdown support: shortcuts, auto-formatting on paste.
 - Real-time code syntax highlighting.
 - Create links by pasting URLs on selected text.

package/dist/lexxy.esm.js

@@ -1,7 +1,7 @@
 export { highlightCode, highlightElement } from './lexxy_helpers.esm.js';
 import createDOMPurify from 'dompurify';
 import { getStyleObjectFromCSS, getCSSFromStyleObject, $getSelectionStyleValueForProperty, $ensureForwardRangeSelection, $isAtNodeEnd, $patchStyleText, $setBlocksType, $forEachSelectedTextNode } from '@lexical/selection';
-import { SKIP_DOM_SELECTION_TAG, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, CAN_REDO_COMMAND, $getSelection, $isRangeSelection, $isTextNode, DecoratorNode, $createTextNode, defineExtension, $createNodeSelection, $getRoot, $caretFromPoint, $setSelectionFromCaretRange, $getCaretRange, $normalizeCaret, $getChildCaret, $getCaretInDirection, $isParagraphNode, $isLineBreakNode, $createParagraphNode, $isElementNode, $isRootOrShadowRoot, $isRootNode, $isDecoratorNode, $getSiblingCaret, $rewindSiblingCaret, $splitAtPointCaretNext, $normalizeSelection__EXPERIMENTAL, $isNodeSelection, $isChildCaret, $isTextPointCaret, $isExtendableTextPointCaret, $isSiblingCaret, $getCommonAncestor, $findMatchingParent, TextNode, createCommand, COMMAND_PRIORITY_EDITOR, $getEditor, $getNodeByKey, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $cloneWithProperties, $getNearestRootOrShadowRoot, $createRangeSelection, $setSelection, ElementNode, $splitNode, createState, COMMAND_PRIORITY_NORMAL, $getState, $setState, $hasUpdateTag, PASTE_TAG, FORMAT_TEXT_COMMAND, UNDO_COMMAND, REDO_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_TAB_COMMAND, INSERT_LINE_BREAK_COMMAND, COMMAND_PRIORITY_HIGH, INSERT_PARAGRAPH_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, DELETE_CHARACTER_COMMAND, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_CRITICAL, $addUpdateTag, CLICK_COMMAND, isDOMNode, $getNearestNodeFromDOMNode, $getChildCaretAtIndex, $createLineBreakNode, SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, PASTE_COMMAND, $onUpdate, ParagraphNode, RootNode, DRAGSTART_COMMAND, DROP_COMMAND, KEY_DOWN_COMMAND, flipDirection, mergeRegister as mergeRegister$1, $createRangeSelectionFromDom, CLEAR_HISTORY_COMMAND, KEY_ENTER_COMMAND, KEY_SPACE_COMMAND, INPUT_COMMAND, KEY_BACKSPACE_COMMAND } from 'lexical';
+import { SKIP_DOM_SELECTION_TAG, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, CAN_REDO_COMMAND, $getSelection, $isRangeSelection, $isTextNode, DecoratorNode, $createTextNode, defineExtension, $createNodeSelection, $getRoot, $caretFromPoint, $setSelectionFromCaretRange, $getCaretRange, $normalizeCaret, $getChildCaret, $getCaretInDirection, $isParagraphNode, $isLineBreakNode, $createParagraphNode, $isElementNode, $isRootOrShadowRoot, $isRootNode, $isDecoratorNode, $getSiblingCaret, $rewindSiblingCaret, $splitAtPointCaretNext, $normalizeSelection__EXPERIMENTAL, $isNodeSelection, $isChildCaret, $isTextPointCaret, $isExtendableTextPointCaret, $isSiblingCaret, $getCommonAncestor, $findMatchingParent, TextNode, createCommand, COMMAND_PRIORITY_EDITOR, $getEditor, $getNodeByKey, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $cloneWithProperties, $getNearestRootOrShadowRoot, $createRangeSelection, $setSelection, ElementNode, $splitNode, createState, COMMAND_PRIORITY_NORMAL, $getState, $setState, $hasUpdateTag, PASTE_TAG, FORMAT_TEXT_COMMAND, UNDO_COMMAND, REDO_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_TAB_COMMAND, INSERT_LINE_BREAK_COMMAND, COMMAND_PRIORITY_HIGH, INSERT_PARAGRAPH_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, DELETE_CHARACTER_COMMAND, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_CRITICAL, $addUpdateTag, CLICK_COMMAND, isDOMNode, $getNearestNodeFromDOMNode, $getChildCaretAtIndex, $createLineBreakNode, SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, PASTE_COMMAND, $onUpdate, ParagraphNode, RootNode, DRAGSTART_COMMAND, DROP_COMMAND, KEY_DOWN_COMMAND, flipDirection, mergeRegister as mergeRegister$1, $createRangeSelectionFromDom, CLEAR_HISTORY_COMMAND, KEY_ENTER_COMMAND, KEY_SPACE_COMMAND, INPUT_COMMAND, HISTORY_PUSH_TAG, KEY_BACKSPACE_COMMAND } from 'lexical';
 import * as lexical from 'lexical';
 export { lexical as Lexical };
 import { LinkNode, $createAutoLinkNode, $toggleLink, $createLinkNode, $isLinkNode, AutoLinkNode } from '@lexical/link';
@@ -589,6 +589,35 @@ function isKeyboardActivation(event) {
   return event instanceof PointerEvent && event.pointerId === -1
 }
 
+function trapFocusAtTabBoundary(container, event) {
+  if (event.key !== "Tab") return
+
+  const tabStops = Array.from(container.querySelectorAll("a[href], area[href], button, input:not([type='hidden']), select, textarea, iframe, object, embed, [contenteditable]:not([contenteditable='false']), [tabindex], summary, audio[controls], video[controls]"))
+    .filter(element => element.tabIndex >= 0 && !element.matches(":disabled") && !element.closest("[inert]") && isActiveAndVisible(element))
+    .sort((first, second) => {
+      if (first.tabIndex > 0 && second.tabIndex > 0) {
+        return first.tabIndex - second.tabIndex
+      } else if (first.tabIndex > 0) {
+        return -1
+      } else if (second.tabIndex > 0) {
+        return 1
+      } else {
+        return 0
+      }
+    });
+
+  const firstTabStop = tabStops[0];
+  const lastTabStop = tabStops.at(-1);
+
+  if (event.shiftKey && document.activeElement === firstTabStop) {
+    event.preventDefault();
+    lastTabStop.focus();
+  } else if (!event.shiftKey && document.activeElement === lastTabStop) {
+    event.preventDefault();
+    firstTabStop.focus();
+  }
+}
+
 function handleRollingTabIndex(elements, event, { orientation = "horizontal", wrap = false } = {}) {
   const previousActiveElement = document.activeElement;
 
@@ -1443,10 +1472,12 @@ class ToolbarDropdown extends HTMLElement {
   }
 
   #handleKeyDown = (event) => {
-    if (event.key === "Escape") {
+    if (event.key === "Escape" && this.isOpen) {
       event.stopPropagation();
       this.close({ focusEditor: !this.#shouldReturnFocusToTrigger });
       if (this.#shouldReturnFocusToTrigger) this.trigger?.focus();
+    } else if (this.isOpen && this.panel.role === "dialog") {
+      trapFocusAtTabBoundary(this.panel, event);
     } else if (this.#isNavigatingMenu(event)) {
       event.stopPropagation();
       handleRollingTabIndex(this.#buttons, event, { orientation: "both", wrap: true });
@@ -1461,7 +1492,7 @@ class ToolbarDropdown extends HTMLElement {
     // Ask for the ring explicitly: opening the menu with the mouse otherwise leaves the
     // first item focused without a focus ring, since focus() inherits the mouse modality.
     this.#interactiveElements[0]?.focus({ focusVisible: true });
-    await this.#resetTabIndexValues();
+    if (this.panel.role === "menu") await this.#resetTabIndexValues();
   }
 
   async #resetTabIndexValues() {
@@ -2233,12 +2264,33 @@ class CustomActionTextAttachmentNode extends DecoratorNode {
     const trimmedLabel = this.label.trim();
     const matches = [ ...figure.querySelectorAll("span") ].filter((span) => span.textContent.trim() === trimmedLabel);
     const deepest = matches.filter((span) => !matches.some((other) => other !== span && span.contains(other)));
+    const labelImage = figure.querySelector("[data-lexxy-label-image]");
+
     for (const span of deepest) {
       if (span.getAttribute("aria-hidden") !== "true") {
-        span.setAttribute("data-lexxy-label-mirror", "");
+        if (span.contains(labelImage)) {
+          this.#wrapLabelTextNodesIn(span);
+        } else {
+          span.setAttribute("data-lexxy-label-mirror", "");
+        }
       }
     }
   }
+
+  #wrapLabelTextNodesIn(element) {
+    const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+    const textNodes = [];
+
+    while (walker.nextNode()) {
+      if (walker.currentNode.textContent.trim()) textNodes.push(walker.currentNode);
+    }
+
+    for (const textNode of textNodes) {
+      const mirror = createElement("span", { "data-lexxy-label-mirror": "" });
+      textNode.replaceWith(mirror);
+      mirror.append(textNode);
+    }
+  }
 }
 
 function $isCustomActionTextAttachmentNode(node) {
@@ -2422,14 +2474,14 @@ function extendTextNodeConversion(conversionName, ...callbacks) {
     ...conversionOutput,
     forChild: (lexicalNode, parentNode) => {
       const originalForChild = conversionOutput?.forChild ?? (x => x);
-      let childNode = originalForChild(lexicalNode, parentNode);
-
+      const childNode = originalForChild(lexicalNode, parentNode);
 
       if ($isTextNode(childNode)) {
-        childNode = callbacks.reduce(
+        return callbacks.reduce(
           (childNode, callback) => callback(childNode, element) ?? childNode,
           childNode
-        );
+        )
+      } else {
         return childNode
       }
     }
@@ -2975,7 +3027,7 @@ class ActionTextAttachmentNode extends DecoratorNode {
               node: new ActionTextAttachmentNode({
                 src: img.getAttribute("src"),
                 fileName: fileName,
-                caption: img.getAttribute("alt") || "",
+                altText: img.getAttribute("alt"),
                 contentType: "image/*",
                 width: img.getAttribute("width"),
                 height: img.getAttribute("height")
@@ -3300,8 +3352,9 @@ class ActionTextAttachmentNode extends DecoratorNode {
   }
 
   #swapToPreviewDOM(figure, previewSrc) {
+    const altText = this.editor.read(() => this.getLatest().altText);
     this.#swapFigureContent(figure, "attachment--file", "attachment--preview", () => {
-      const img = createElement("img", { src: previewSrc, draggable: false, alt: this.altText });
+      const img = createElement("img", { src: previewSrc, draggable: false, alt: altText });
       img.onerror = () => this.#swapPreviewToFileDOM(img);
       const container = createElement("div", { className: "attachment__container" });
       container.appendChild(img);
@@ -6184,6 +6237,11 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
   updateDOM(prevNode, dom) {
     if (this.uploadError !== prevNode.uploadError) return true
 
+    const image = dom.querySelector("img");
+    if (image && prevNode.altText !== this.altText) {
+      image.alt = this.altText;
+    }
+
     if (prevNode.progress !== this.progress) {
       const progress = dom.querySelector("progress");
       progress.value = this.progress ?? 0;
@@ -6217,7 +6275,7 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
   }
 
   #createDOMForImage() {
-    return createElement("img")
+    return createElement("img", { alt: this.altText })
   }
 
   #createDOMForFile() {
@@ -6382,7 +6440,6 @@ class AttachmentNodeConversion {
     const { blob } = this;
     return {
       sgid: blob.attachable_sgid,
-      altText: blob.filename,
       contentType: blob.content_type,
       fileName: blob.filename,
       fileSize: blob.byte_size,
@@ -6787,6 +6844,7 @@ class PastedContentFormatter {
   format() {
     this.#inlinePreservableStyles();
     this.#stripStyleElements();
+    this.#stripInterchangeNewlines();
     this.#unwrapPlaceholderAnchors();
     this.#stripTableCellColorStyles();
     new OfficeFormatter(this.doc).format();
@@ -6822,6 +6880,35 @@ class PastedContentFormatter {
     }
   }
 
+  // Chrome and Safari append <br class="Apple-interchange-newline"> when the
+  // copied selection ends at a line end (Google Docs does this on every copy).
+  // It marks the end of the selection, not a line the author wrote, so left in
+  // place it pastes as an extra empty paragraph. Only the trailing marker goes:
+  // one at the start of the fragment is a real line boundary.
+  #stripInterchangeNewlines() {
+    for (const br of this.doc.querySelectorAll("br.Apple-interchange-newline")) {
+      if (this.#isAtEndOfBody(br)) {
+        br.remove();
+      }
+    }
+  }
+
+  #isAtEndOfBody(node) {
+    for (let current = node; current && current !== this.doc.body; current = current.parentNode) {
+      for (let sibling = current.nextSibling; sibling; sibling = sibling.nextSibling) {
+        if (!this.#isIgnorableTrailingNode(sibling)) return false
+      }
+    }
+    return true
+  }
+
+  #isIgnorableTrailingNode(node) {
+    if (node.nodeType === Node.COMMENT_NODE) {
+      return true
+    }
+    return node.nodeType === Node.TEXT_NODE && node.textContent.trim() === ""
+  }
+
   // Anchors with non-meaningful hrefs (e.g. "#", "") appear in content copied
   // from rendered views where mentions and interactive elements are wrapped in
   // <a href="#"> tags. Unwrap them so their text content pastes as plain text
@@ -7260,7 +7347,7 @@ class Contents {
     this.#performTextReplacement(anchorNode, lastIndex, stringToReplace, replacementNodes);
   }
 
-  uploadFiles(files, { selectLast } = {}) {
+  uploadFiles(files, { selectLast, altText } = {}) {
     if (!this.editorElement) return // Disposed (e.g. on turbo:before-cache); a late drop can still land here
 
     if (!this.editorElement.supportsAttachments) {
@@ -7273,6 +7360,10 @@ class Contents {
       const uploader = Uploader.for(this.editorElement, validFiles);
       uploader.$uploadFiles();
 
+      if (altText && files.length === 1 && uploader.nodes.length === 1) {
+        uploader.nodes[0].getWritable().altText = altText;
+      }
+
       if (selectLast && uploader.nodes?.length) {
         const lastNode = uploader.nodes.at(-1);
         lastNode.selectEnd();
@@ -7985,46 +8076,51 @@ class Clipboard {
   }
 
   #handlePastedFiles(clipboardData) {
-    if (!this.editorElement.supportsAttachments) return false
-
-    const html = clipboardData.getData("text/html");
-    const files = clipboardData.files;
-
-    if (files.length && this.#isCopiedImageHTML(html)) {
-      this.#uploadFilesPreservingScroll(files);
-      return true
-    }
-
-    if (html && !this.#isLexicalClipboardData(clipboardData)) {
-      this.contents.insertHtml(html, { tag: PASTE_TAG });
-      return true
-    }
+    if (this.editorElement.supportsAttachments) {
+      const html = clipboardData.getData("text/html");
+      const files = clipboardData.files;
+      const copiedImage = files.length && this.#copiedImage(html);
 
-    if (files.length) {
-      this.#uploadFilesPreservingScroll(files);
-      return true
+      if (copiedImage) {
+        this.#uploadFilesPreservingScroll(files, copiedImage.getAttribute("alt"));
+        return true
+      } else if (html && !this.#isLexicalClipboardData(clipboardData)) {
+        this.contents.insertHtml(html, { tag: PASTE_TAG });
+        return true
+      } else if (files.length) {
+        this.#uploadFilesPreservingScroll(files);
+        return true
+      } else {
+        return false
+      }
+    } else {
+      return false
     }
-
-    return false
   }
 
   #isLexicalClipboardData(clipboardData) {
     return Array.from(clipboardData.types).includes("application/x-lexical-editor")
   }
 
-  #isCopiedImageHTML(html) {
-    if (!html) return false
-
-    const doc = parseHtml(html);
-    const elementChildren = Array.from(doc.body.children);
+  #copiedImage(html) {
+    if (html) {
+      const doc = parseHtml(html);
+      const elementChildren = Array.from(doc.body.children);
 
-    return elementChildren.length === 1 && elementChildren[0].tagName === "IMG"
+      if (elementChildren.length === 1 && elementChildren[0].tagName === "IMG") {
+        return elementChildren[0]
+      } else {
+        return null
+      }
+    } else {
+      return null
+    }
   }
 
-  #uploadFilesPreservingScroll(files) {
+  #uploadFilesPreservingScroll(files, altText) {
     this.#preservingScrollPosition(() => {
       if (files.length) {
-        this.contents.uploadFiles(files, { selectLast: true });
+        this.contents.uploadFiles(files, { selectLast: true, altText });
       }
     });
   }
@@ -8588,7 +8684,7 @@ class TrixContentExtension extends LexxyExtension {
             priority: 1
           }),
           span: (element) => onlyStyledElements(element, {
-            conversion: extendTextNodeConversion("mark", $applyHighlightStyle),
+            conversion: extendTextNodeConversion("span", $applyHighlightStyle),
             priority: 1
           }),
           strong: (element) => onlyStyledElements(element, {
@@ -10324,6 +10420,7 @@ class LexicalEditorElement extends HTMLElement {
   #historyState = { undo: false, redo: false }
 
   #validity = new Map()
+  #validationAttempted = false
   #validationTextArea = document.createElement("textarea")
   #uploadRequests
   #liveRegion
@@ -10408,10 +10505,13 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   requiredChangedCallback() {
+    if (this.editorContentElement) this.#synchronizeAriaAttribute("aria-required");
     if (this.isConnected) this.#requestValidityRefresh();
   }
 
   formResetCallback() {
+    this.#validationAttempted = false;
+    this.#synchronizeAriaAttribute("aria-invalid");
     this.value = this.#initialValue;
     this.editor.dispatchCommand(CLEAR_HISTORY_COMMAND, undefined);
   }
@@ -10438,6 +10538,15 @@ class LexicalEditorElement extends HTMLElement {
     return this.internals.validity
   }
 
+  get validationMessage() {
+    return this.internals.validationMessage
+  }
+
+  setCustomValidity(message) {
+    this.#validationTextArea.setCustomValidity(message);
+    this.#refreshValidity();
+  }
+
   checkValidity() {
     return this.internals.checkValidity()
   }
@@ -10675,6 +10784,7 @@ class LexicalEditorElement extends HTMLElement {
     this.#attachDebugHooks();
     this.#attachToolbar();
     this.#resetBeforeTurboCaches();
+    this.#observeAriaAttributes();
 
     this.#setInternalFormValue(this.value, { suppressEvent: true });
     this.#synchronizeWithChanges();
@@ -10747,7 +10857,9 @@ class LexicalEditorElement extends HTMLElement {
       classList: "lexxy-editor__content",
       contenteditable: true,
       role: "textbox",
-      "aria-multiline": true,
+      "aria-multiline": this.supportsMultiLine,
+      "aria-required": this.required,
+      "aria-invalid": false,
       "aria-label": this.#labelText,
       placeholder: this.getAttribute("placeholder")
     });
@@ -10780,6 +10892,46 @@ class LexicalEditorElement extends HTMLElement {
     return Array.from(this.attributes).filter(attribute => attribute.name.startsWith("aria-"))
   }
 
+  #observeAriaAttributes() {
+    const observer = new MutationObserver(mutations => {
+      for (const { attributeName } of mutations) {
+        if (attributeName.startsWith("aria-")) {
+          this.#synchronizeAriaAttribute(attributeName);
+        } else if (attributeName === "single-line") {
+          this.#synchronizeAriaAttribute("aria-multiline");
+        }
+      }
+    });
+    observer.observe(this, { attributes: true });
+
+    this.#listeners.track(
+      () => observer.disconnect(),
+      registerEventListener(this, "invalid", () => {
+        this.#validationAttempted = true;
+        this.#synchronizeAriaAttribute("aria-invalid");
+      })
+    );
+  }
+
+  #synchronizeAriaAttribute(name) {
+    const value = this.getAttribute(name) ?? this.#defaultAriaValue(name);
+    if (value === null) {
+      this.editorContentElement.removeAttribute(name);
+    } else if (this.editorContentElement.getAttribute(name) !== String(value)) {
+      this.editorContentElement.setAttribute(name, value);
+    }
+  }
+
+  #defaultAriaValue(name) {
+    switch (name) {
+      case "aria-label": return this.#labelText
+      case "aria-required": return this.required
+      case "aria-multiline": return this.supportsMultiLine
+      case "aria-invalid": return this.#validationAttempted && !this.validity.valid
+      default: return null
+    }
+  }
+
   #setInternalFormValue(html, { suppressEvent = false } = {}) {
     const changed = html !== this.#previousInternalFormValue;
 
@@ -10836,11 +10988,16 @@ class LexicalEditorElement extends HTMLElement {
   #refreshValidity() {
     this.#refreshInternalValidity();
     const { validity, message } = this.#calculateValidity();
-    this.internals.setValidity(validity, message, this.editorContentElement);
+    this.internals.setValidity(validity, message, this.editorContentElement ?? undefined);
+    if (this.editorContentElement) {
+      this.#synchronizeAriaAttribute("aria-invalid");
+    }
   }
 
   #refreshInternalValidity() {
-    this.#validationTextArea.required = this.required && this.isBlank;
+    if (this.editorContentElement) {
+      this.#validationTextArea.required = this.required && this.isBlank;
+    }
     const flags = this.#validationTextArea.validity;
     const message = this.#validationTextArea.validationMessage;
 
@@ -10855,12 +11012,14 @@ class LexicalEditorElement extends HTMLElement {
       // internal TextArea's ValidityState can contain `valid: true`
       if (flags.valid === true) continue
 
+      let hasError = false;
       for (const flag in flags) {
         if (flags[flag]) {
           validity[flag] = true;
-          messages.push(message);
+          hasError = true;
         }
       }
+      if (hasError) messages.push(message);
     }
 
     return { validity, message: messages.join("\n") }
@@ -11178,6 +11337,7 @@ class LexicalEditorElement extends HTMLElement {
 
   #resetValidity() {
     this.#validity = new Map();
+    this.#validationAttempted = false;
   }
 }
 
@@ -12123,6 +12283,111 @@ class CodeLanguagePicker extends HTMLElement {
   }
 }
 
+class AlternativeTextDialog {
+  #editor
+  #editorElement
+  #dialog
+  #input
+  #nodeKey
+  #elementToRefocus
+  #listeners = new ListenerBin()
+
+  constructor(editorElement) {
+    this.#editor = editorElement.editor;
+    this.#editorElement = editorElement;
+    this.#dialog = createElement("dialog", { className: "lexxy-alternative-text-dialog", ariaLabel: "Alternative text" });
+    this.#input = createElement("textarea", { rows: 1, autofocus: true, ariaLabel: "Description", placeholder: "Keep it short, but enough to convey the context…" });
+
+    const title = createElement("h2", { textContent: "Describe the image for people who can't see it:" });
+
+    const actions = createElement("div", { className: "lexxy-alternative-text-dialog__actions" });
+    const cancel = createElement("button", { type: "button", textContent: "Cancel" });
+    const save = createElement("button", { type: "button", className: "lexxy-alternative-text-dialog__save", textContent: "Save" });
+    actions.append(cancel, save);
+
+    const controls = createElement("div", { className: "lexxy-alternative-text-dialog__controls" });
+    controls.append(this.#input, actions);
+    this.#dialog.append(title, controls);
+    editorElement.appendChild(this.#dialog);
+
+    this.#listeners.track(
+      registerEventListener(cancel, "click", () => this.#close()),
+      registerEventListener(save, "click", () => this.#save()),
+      registerEventListener(this.#dialog, "keydown", this.#handleKeyDown),
+      registerEventListener(document, "pointerdown", this.#closeOnClickOutside)
+    );
+  }
+
+  dispose() {
+    this.#dialog.remove();
+    this.#listeners.dispose();
+  }
+
+  open(nodeKey) {
+    const description = this.#editor.read(() => {
+      const node = $getNodeByKey(nodeKey);
+      if ($isActionTextAttachmentNode(node)) {
+        return node.altText
+      }
+    });
+
+    if (description !== undefined) {
+      this.#nodeKey = nodeKey;
+      this.#input.value = description;
+      this.#anchorBelowAttachment(nodeKey);
+      this.#elementToRefocus = document.activeElement;
+      this.#editorElement.querySelector("lexxy-toolbar")?.closeDropdowns();
+      this.#dialog.show();
+      this.#input.focus();
+    }
+  }
+
+  #anchorBelowAttachment(nodeKey) {
+    const figureElement = this.#editor.getElementByKey(nodeKey);
+    if (figureElement) {
+      const rect = figureElement.getBoundingClientRect();
+      const editorRect = this.#editorElement.getBoundingClientRect();
+      const bottom = rect.bottom - editorRect.top - this.#editorElement.clientTop + this.#editorElement.scrollTop;
+      this.#dialog.style.setProperty("--lexxy-anchor-bottom", `${bottom}px`);
+    }
+  }
+
+  #save() {
+    const description = this.#input.value.trim();
+    this.#editor.update(() => {
+      const node = $getNodeByKey(this.#nodeKey);
+      if ($isActionTextAttachmentNode(node) && node.altText !== description) {
+        node.getWritable().altText = description;
+      }
+    }, { tag: [ HISTORY_PUSH_TAG, SKIP_DOM_SELECTION_TAG ] });
+    this.#close();
+  }
+
+  #handleKeyDown = (event) => {
+    event.stopPropagation();
+    if (event.key === "Escape") {
+      this.#close();
+    } else {
+      trapFocusAtTabBoundary(this.#dialog, event);
+    }
+  }
+
+  // Dismissing by clicking elsewhere must leave focus where the click landed.
+  #closeOnClickOutside = (event) => {
+    if (this.#dialog.open && !this.#dialog.contains(event.target)) {
+      this.#close({ refocus: false });
+    }
+  }
+
+  #close({ refocus = true } = {}) {
+    this.#dialog.close();
+    if (refocus && this.#elementToRefocus?.isConnected) {
+      this.#elementToRefocus.focus();
+    }
+    this.#elementToRefocus = null;
+  }
+}
+
 const DELETE_ICON = `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
   <path d="M11.2041 1.01074C12.2128 1.113 13 1.96435 13 3V4H15L15.1025 4.00488C15.6067 4.05621 16 4.48232 16 5C16 5.55228 15.5523 6 15 6H14.8457L14.1416 15.1533C14.0614 16.1953 13.1925 17 12.1475 17H5.85254L5.6582 16.9902C4.76514 16.9041 4.03607 16.2296 3.88184 15.3457L3.8584 15.1533L3.1543 6H3C2.44772 6 2 5.55228 2 5C2 4.44772 2.44772 4 3 4H5V3C5 1.89543 5.89543 1 7 1H11L11.2041 1.01074ZM5.85254 15H12.1475L12.8398 6H5.16016L5.85254 15ZM7 4H11V3H7V4Z"/>
 </svg>`;
@@ -12130,6 +12395,8 @@ const DELETE_ICON = `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"
 class AttachmentToolbar extends HTMLElement {
   #listeners = new ListenerBin()
   #buttons = []
+  #alternativeTextButton
+  #alternativeTextDialog
   #currentNodeKey = null
   #reflowObserver = new ResizeObserver(() => this.#updatePosition())
   #presentationObserver = new MutationObserver(() => this.#refresh())
@@ -12156,6 +12423,7 @@ class AttachmentToolbar extends HTMLElement {
     this.#listeners.dispose();
     this.#reflowObserver.disconnect();
     this.#presentationObserver.disconnect();
+    this.#alternativeTextDialog?.dispose();
   }
 
   get #editor() {
@@ -12170,7 +12438,9 @@ class AttachmentToolbar extends HTMLElement {
     this.innerHTML = "";
 
     const container = createElement("div", { className: "lexxy-floating-controls__group" });
+    container.appendChild(this.#createAlternativeTextButton());
     container.appendChild(this.#createRemoveButton());
+    this.#alternativeTextDialog = new AlternativeTextDialog(this.#editorElement);
     this.appendChild(container);
 
     this.#buttons = Array.from(this.querySelectorAll("button"));
@@ -12203,6 +12473,22 @@ class AttachmentToolbar extends HTMLElement {
     return this.#currentNodeKey !== null
   }
 
+  #createAlternativeTextButton() {
+    this.#alternativeTextButton = createElement("button", {
+      type: "button",
+      className: "lexxy-attachment-toolbar__alternative-text",
+      ariaLabel: "Alternative text",
+      title: "Alternative text",
+      ariaHasPopup: "dialog",
+      tabIndex: -1
+    });
+    this.#alternativeTextButton.appendChild(createElement("span", null, "ALT"));
+    this.#listeners.track(registerEventListener(this.#alternativeTextButton, "click", () => {
+      this.#alternativeTextDialog.open(this.#currentNodeKey);
+    }));
+    return this.#alternativeTextButton
+  }
+
   #navigateOrExit = (event) => {
     if (event.key === "Escape") {
       event.preventDefault();
@@ -12275,6 +12561,7 @@ class AttachmentToolbar extends HTMLElement {
 
     this.#editor.getEditorState().read(() => {
       const node = $getNodeByKey(nodeKey);
+      this.#alternativeTextButton.hidden = !this.#canEditAlternativeText(node);
       this.dataset.nodeType = node.getType();
       this.dataset.presentation = this.#presentationOf(node, element);
 
@@ -12286,6 +12573,12 @@ class AttachmentToolbar extends HTMLElement {
     });
   }
 
+  #canEditAlternativeText(node) {
+    return this.#editorElement.dataset.actionTextSupportsAlt !== "false"
+      && node.getType() === "action_text_attachment"
+      && node.isPreviewableAttachment
+  }
+
   #presentationOf(node, element) {
     if ($isImageGalleryNode(node.getParent())) {
       return "gallery"
@@ -12307,8 +12600,11 @@ class AttachmentToolbar extends HTMLElement {
     if (figureElement) {
       const rect = figureElement.getBoundingClientRect();
       const editorRect = this.#editorElement.getBoundingClientRect();
-      this.style.setProperty("--lexxy-anchor-top", `${rect.top - editorRect.top}px`);
-      this.style.setProperty("--lexxy-anchor-left", `${rect.left - editorRect.left}px`);
+      // We are positioned against the editor's padding box, but the rect measures its border box.
+      const borderTop = this.#editorElement.clientTop;
+      const borderLeft = this.#editorElement.clientLeft;
+      this.style.setProperty("--lexxy-anchor-top", `${rect.top - editorRect.top - borderTop}px`);
+      this.style.setProperty("--lexxy-anchor-left", `${rect.left - editorRect.left - borderLeft}px`);
       this.style.setProperty("--lexxy-anchor-width", `${rect.width}px`);
       this.style.setProperty("--lexxy-anchor-height", `${rect.height}px`);
       this.#flipWhenOverflowing(editorRect);
@@ -12348,7 +12644,7 @@ class AttachmentToolbar extends HTMLElement {
   #focusToolbarOnAltF10 = (event) => {
     if (this.#hasSelectedNode && event.altKey && event.key === "F10") {
       event.preventDefault();
-      this.#buttons[0]?.focus();
+      this.#buttons.find(isActiveAndVisible)?.focus();
       return true
     } else {
       return false

package/dist/stylesheets/lexxy-editor.css

@@ -855,7 +855,7 @@
 
   .lexxy-table-control__more-menu-trigger {
     aspect-ratio: auto;
-    box-shadow: 0 0 0 1px inset rgba(128, 128, 128, 0.3);
+    box-shadow: 0 0 0 1px inset var(--lexxy-color-floating-controls-separator);
     font-weight: normal;
     padding: 0 1.25ch;
   }
@@ -981,7 +981,7 @@
     /* The anchor is measured in px from the editor's top-left, so these stay physical. */
     left: calc(var(--lexxy-anchor-left) + var(--lexxy-anchor-width));
     top: var(--lexxy-anchor-top);
-    transform: translate(-100%, 0);
+    transform: translate(calc(-100% - 1.5ch), 1.5ch);
 
     &[hidden] {
       display: none;
@@ -1006,6 +1006,39 @@
       }
     }
 
+    .lexxy-floating-controls__group {
+      display: flex;
+    }
+
+    button[hidden] {
+      display: none;
+    }
+
+    .lexxy-attachment-toolbar__alternative-text {
+      aspect-ratio: auto;
+      margin-inline-end: calc(var(--lexxy-toolbar-spacing) + 1px);
+      padding-inline: 1ch;
+      position: relative;
+
+      span {
+        display: inline-block;
+        font-size: 0.9em;
+      }
+
+      &:after {
+        background-color: var(--lexxy-color-floating-controls-separator);
+        block-size: 1.125em;
+        content: "";
+        display: block;
+        inline-size: 1px;
+        inset-block: 0;
+        inset-inline-end: calc(-1 * var(--lexxy-toolbar-spacing));
+        margin: auto;
+        pointer-events: none;
+        position: absolute;
+      }
+    }
+
     .lexxy-attachment-toolbar__remove:hover,
     .lexxy-attachment-toolbar__remove:focus-visible {
       background-color: var(--lexxy-color-red);
@@ -1181,3 +1214,105 @@ action-text-attachment[content-type^="application/vnd.actiontext"] {
     display: none;
   }
 }
+
+.lexxy-alternative-text-dialog {
+  background: var(--lexxy-color-canvas);
+  border: 2px solid var(--lexxy-color-selected-hover);
+  border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
+  box-shadow: var(--lexxy-shadow);
+  box-sizing: border-box;
+  color: var(--lexxy-color-ink);
+  font: inherit;
+  inline-size: 60%;
+  inset-block: calc(var(--lexxy-anchor-bottom) + var(--lexxy-toolbar-spacing)) auto;
+  inset-inline: 0;
+  margin-block: 0;
+  margin-inline: auto;
+  min-inline-size: min(20rem, 100%);
+  overflow: auto;
+  padding: var(--lexxy-toolbar-spacing);
+  z-index: 3;
+
+  h2 {
+    font-size: inherit;
+    font-weight: bold;
+    line-height: 1.5;
+    margin: 0;
+    padding-block-start: calc(0.25 * var(--lexxy-text-small));
+    padding-inline: calc(0.5 * var(--lexxy-text-small));
+    text-align: center;
+  }
+
+  .lexxy-alternative-text-dialog__controls {
+    align-items: stretch;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+    margin-block-start: 0.5em;
+  }
+
+  textarea {
+    background: var(--lexxy-color-canvas);
+    border: 1px solid var(--lexxy-color-ink-lighter);
+    border-radius: var(--lexxy-radius);
+    box-sizing: border-box;
+    color: inherit;
+    display: block;
+    font: inherit;
+    font-size: var(--lexxy-text-small);
+    font-weight: normal;
+    min-block-size: calc(2lh + 1em + 2px);
+    min-inline-size: 0;
+    padding: 0.5em;
+
+    @supports (field-sizing: content) {
+      field-sizing: content;
+    }
+
+    @supports (resize: none) {
+      resize: none;
+    }
+  }
+
+  button {
+    background-color: var(--lexxy-color-ink-lightest);
+    block-size: var(--lexxy-toolbar-button-size);
+    border: 0;
+    border-radius: var(--lexxy-radius);
+    color: currentColor;
+    cursor: pointer;
+    display: grid;
+    font-size: var(--lexxy-text-small);
+    inline-size: 100%;
+    line-height: inherit;
+    padding-inline: 2ch;
+    place-items: center;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  .lexxy-alternative-text-dialog__save {
+    background-color: var(--lexxy-color-accent-dark);
+    color: var(--lexxy-color-ink-inverted);
+
+    &:hover {
+      background-color: var(--lexxy-color-accent-medium);
+    }
+  }
+
+  textarea:focus-visible {
+    outline: var(--lexxy-focus-ring-size) solid var(--lexxy-focus-ring-color);
+    outline-offset: var(--lexxy-focus-ring-offset);
+  }
+
+  .lexxy-alternative-text-dialog__actions {
+    display: flex;
+    gap: 0.5em;
+
+    button {
+      flex: 1;
+    }
+  }
+}

package/dist/stylesheets/lexxy-variables.css

@@ -35,6 +35,7 @@
   --lexxy-color-selected-dark: var(--lexxy-color-blue);
   --lexxy-color-selected-50: color-mix(in oklch, var(--lexxy-color-selected-dark) 50%, transparent);
   --lexxy-color-code-bg: var(--lexxy-color-ink-lightest);
+  --lexxy-color-floating-controls-separator: rgba(128, 128, 128, 0.3);
 
   /* Text color highlights */
   --highlight-1: rgb(136, 118, 38);

package/package.json

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