@37signals/lexxy 0.1.12-beta → 0.1.14-beta

package/README.md

@@ -87,7 +87,11 @@ For the CSS, you can include it with the standard Rails helper:
 <%= stylesheet_link_tag "lexxy" %>
 ```
 
-Of course, you can copy the CSS to your project and adapt it to your needs.
+You can copy the CSS to your project and adapt it to your needs.
+
+#### Custom styles and dark mode
+
+All of Lexxy's color styles are defiend as CSS variables in `app/stylesheets/lexxy-variables.css`. This enables a straightforward way to customize Lexxy to match your application's theme. You can see an example implementation of a custom dark mode style in the Sandbox's stylesheet at `test/dummy/app/assets/stylesheets/sandbox.css`.
 
 #### Rendered Action Text content
 
@@ -104,6 +108,8 @@ To apply syntax highlighting to rendered Action Text content, you need to call t
 ```javascript
 import { Controller } from "@hotwired/stimulus"
 import { highlightAll } from "lexxy"
+// Or if you installed via a javascript bundler:
+// import { highlightAll } from "@37signals/lexxy"
 
 export default class extends Controller {
   connect() {

package/dist/lexxy.esm.js

@@ -1,26 +1,26 @@
 import DOMPurify from 'dompurify';
-import { $getSelection, $isRangeSelection, $isTextNode, DecoratorNode, $getNodeByKey, HISTORY_MERGE_TAG, FORMAT_TEXT_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_LOW, $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, $createNodeSelection, $setSelection, $createParagraphNode, $createTextNode, $isParagraphNode, $insertNodes, $createLineBreakNode, CLEAR_HISTORY_COMMAND, $addUpdateTag, SKIP_DOM_SELECTION_TAG, createEditor, KEY_ENTER_COMMAND, COMMAND_PRIORITY_NORMAL, COMMAND_PRIORITY_HIGH, KEY_TAB_COMMAND, KEY_SPACE_COMMAND } from 'lexical';
+import { $getSelection, $isRangeSelection, DecoratorNode, $getNodeByKey, HISTORY_MERGE_TAG, FORMAT_TEXT_COMMAND, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_LOW, $isNodeSelection, $getRoot, $isLineBreakNode, $isTextNode, $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, $createNodeSelection, $setSelection, $createParagraphNode, $createTextNode, $insertNodes, $isParagraphNode, $createLineBreakNode, CLEAR_HISTORY_COMMAND, $addUpdateTag, SKIP_DOM_SELECTION_TAG, createEditor, KEY_ENTER_COMMAND, COMMAND_PRIORITY_NORMAL, COMMAND_PRIORITY_HIGH, KEY_TAB_COMMAND, KEY_SPACE_COMMAND } from 'lexical';
 import { $isListNode, $isListItemNode, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, ListNode, ListItemNode, registerList } from '@lexical/list';
 import { $isQuoteNode, $isHeadingNode, $createQuoteNode, $createHeadingNode, QuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
-import { $isCodeNode, $isCodeHighlightNode, CodeNode, CodeHighlightNode, registerCodeHighlighting, CODE_LANGUAGE_FRIENDLY_NAME_MAP, normalizeCodeLang } from '@lexical/code';
+import { $isCodeNode, CodeNode, CodeHighlightNode, registerCodeHighlighting, CODE_LANGUAGE_FRIENDLY_NAME_MAP, normalizeCodeLang } from '@lexical/code';
 import { $isLinkNode, $toggleLink, $createLinkNode, LinkNode, AutoLinkNode } from '@lexical/link';
 import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
 import { registerMarkdownShortcuts, TRANSFORMERS } from '@lexical/markdown';
-import { registerHistory, createEmptyHistoryState } from '@lexical/history';
+import { createEmptyHistoryState, registerHistory } from '@lexical/history';
 import { DirectUpload } from '@rails/activestorage';
 import { marked } from 'marked';
 import 'prismjs/components/prism-ruby';
 
 DOMPurify.addHook("uponSanitizeElement", (node, data) => {
   if (data.tagName === "strong" || data.tagName === "em") {
-    node.removeAttribute('class');
+    node.removeAttribute("class");
   }
 });
 
-const getNonce = () => {
+function getNonce() {
   const element = document.head.querySelector("meta[name=csp-nonce]");
   return element?.content
-};
+}
 
 function getNearestListItemNode(node) {
   let current = node;
@@ -47,7 +47,7 @@ function isPrintableCharacter(event) {
   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
+  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
@@ -61,12 +61,17 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   connectedCallback() {
-    this.#refreshToolbarOverflow();
-    window.addEventListener("resize", this.#refreshToolbarOverflow);
+    requestAnimationFrame(() => this.#refreshToolbarOverflow());
+
+    this._resizeObserver = new ResizeObserver(() => this.#refreshToolbarOverflow());
+    this._resizeObserver.observe(this);
   }
 
   disconnectedCallback() {
-    window.removeEventListener("resize", this.#refreshToolbarOverflow);
+    if (this._resizeObserver) {
+      this._resizeObserver.disconnect();
+      this._resizeObserver = null;
+    }
   }
 
   setEditor(editorElement) {
@@ -76,6 +81,8 @@ class LexicalToolbarElement extends HTMLElement {
     this.#bindHotkeys();
     this.#assignButtonTabindex();
     this.#monitorSelectionChanges();
+    this.#monitorHistoryChanges();
+    this.#refreshToolbarOverflow();
   }
 
   #bindButtons() {
@@ -101,7 +108,7 @@ class LexicalToolbarElement extends HTMLElement {
 
   // Not using popover because of CSS anchoring still not widely available.
   #toggleDialog(button) {
-    const dialog = document.getElementById(button.dataset.dialogTarget).parentNode;
+    const dialog = this.querySelector("lexxy-link-dialog .link-dialog").parentNode;
 
     if (dialog.open) {
       dialog.close();
@@ -111,7 +118,7 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   #bindHotkeys() {
-    this.editorElement.addEventListener('keydown', (event) => {
+    this.editorElement.addEventListener("keydown", (event) => {
       const buttons = this.querySelectorAll("[data-hotkey]");
       buttons.forEach((button) => {
         const hotkeys = button.dataset.hotkey.toLowerCase().split(/\s+/);
@@ -127,13 +134,13 @@ class LexicalToolbarElement extends HTMLElement {
   #keyCombinationFor(event) {
     const pressedKey = event.key.toLowerCase();
     const modifiers = [
-      event.ctrlKey ? 'ctrl' : null,
-      event.metaKey ? 'cmd' : null,
-      event.altKey ? 'alt' : null,
-      event.shiftKey ? 'shift' : null,
+      event.ctrlKey ? "ctrl" : null,
+      event.metaKey ? "cmd" : null,
+      event.altKey ? "alt" : null,
+      event.shiftKey ? "shift" : null,
     ].filter(Boolean);
 
-    return [ ...modifiers, pressedKey ].join('+')
+    return [ ...modifiers, pressedKey ].join("+")
   }
 
   #assignButtonTabindex() {
@@ -151,6 +158,30 @@ class LexicalToolbarElement extends HTMLElement {
     });
   }
 
+  #monitorHistoryChanges() {
+    this.editor.registerUpdateListener(() => {
+      this.#updateUndoRedoButtonStates();
+    });
+  }
+
+  #updateUndoRedoButtonStates() {
+    this.editor.getEditorState().read(() => {
+      const historyState = this.editorElement.historyState;
+      if (historyState) {
+        this.#setButtonDisabled("undo", historyState.undoStack.length === 0);
+        this.#setButtonDisabled("redo", historyState.redoStack.length === 0);
+      }
+    });
+  }
+
+  #setButtonDisabled(name, isDisabled) {
+    const button = this.querySelector(`[name="${name}"]`);
+    if (button) {
+      button.disabled = isDisabled;
+      button.setAttribute("aria-disabled", isDisabled.toString());
+    }
+  }
+
   #updateButtonStates() {
     const selection = $getSelection();
     if (!$isRangeSelection(selection)) return
@@ -162,6 +193,7 @@ class LexicalToolbarElement extends HTMLElement {
 
     const isBold = selection.hasFormat("bold");
     const isItalic = selection.hasFormat("italic");
+    const isStrikethrough = selection.hasFormat("strikethrough");
     const isInCode = $isCodeNode(topLevelElement) || selection.hasFormat("code");
     const isInList = this.#isInList(anchorNode);
     const listType = getListType(anchorNode);
@@ -171,25 +203,15 @@ class LexicalToolbarElement extends HTMLElement {
 
     this.#setButtonPressed("bold", isBold);
     this.#setButtonPressed("italic", isItalic);
+    this.#setButtonPressed("strikethrough", isStrikethrough);
     this.#setButtonPressed("code", isInCode);
     this.#setButtonPressed("unordered-list", isInList && listType === "bullet");
     this.#setButtonPressed("ordered-list", isInList && listType === "number");
     this.#setButtonPressed("quote", isInQuote);
     this.#setButtonPressed("heading", isInHeading);
     this.#setButtonPressed("link", isInLink);
-  }
 
-  #isSelectionInInlineCode(selection) {
-    const nodes = selection.getNodes();
-    return nodes.some(node => {
-      if ($isCodeHighlightNode(node)) return true
-      // Check parent for text nodes inside code highlight
-      if ($isTextNode(node)) {
-        const parent = node.getParent();
-        if (parent && $isCodeHighlightNode(parent)) return true
-      }
-      return false
-    })
+    this.#updateUndoRedoButtonStates();
   }
 
   #isInList(node) {
@@ -249,17 +271,17 @@ class LexicalToolbarElement extends HTMLElement {
 
     for (const button of buttons) {
       if (this.#toolbarIsOverflowing()) {
-        this.#overflowMenu.appendChild(button);
+        this.#overflowMenu.prepend(button);
         movedToOverflow = true;
       } else {
-        if (movedToOverflow) this.#overflowMenu.appendChild(button);
+        if (movedToOverflow) this.#overflowMenu.prepend(button);
         break
       }
     }
   }
 
   get #buttons() {
-    return Array.from(this.querySelectorAll(":scope > button"))
+    return Array.from(this.querySelectorAll(":scope > button, :scope > [role=separator]"))
   }
 
   static get defaultTemplate() {
@@ -272,12 +294,18 @@ class LexicalToolbarElement extends HTMLElement {
         <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17.1 4h-1.5l-3.2 16h1.5l-.4 2h-7l.4-2h1.5l3.2-16h-1.5l.4-2h7l-.4 2z"/></svg>
       </button>
 
+      <button class="lexxy-editor__toolbar-button" type="button" name="strikethrough" data-command="strikethrough" title="Strikethrough">
+        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M4.70588 16.1591C4.81459 19.7901 7.48035 22 11.6668 22C15.9854 22 18.724 19.6296 18.724 15.8779C18.724 15.5007 18.6993 15.1427 18.6474 14.8066H14.3721C14.8637 15.2085 15.0799 15.7037 15.0799 16.3471C15.0799 17.7668 13.7532 18.7984 11.8113 18.7984C9.88053 18.7984 8.38582 17.7531 8.21659 16.1591H4.70588ZM5.23953 9.31962H9.88794C9.10723 8.88889 8.75888 8.33882 8.75888 7.57339C8.75888 6.13992 9.96576 5.18793 11.7631 5.18793C13.5852 5.18793 14.8761 6.1797 14.9959 7.81344H18.4102C18.3485 4.31824 15.8038 2 11.752 2C7.867 2 5.09129 4.35802 5.09129 7.92044C5.09129 8.41838 5.14071 8.88477 5.23953 9.31962ZM2.23529 10.6914C1.90767 10.6914 1.59347 10.8359 1.36181 11.0931C1.13015 11.3504 1 11.6993 1 12.0631C1 12.4269 1.13015 12.7758 1.36181 13.0331C1.59347 13.2903 1.90767 13.4348 2.23529 13.4348H20.7647C21.0923 13.4348 21.4065 13.2903 21.6382 13.0331C21.8699 12.7758 22 12.4269 22 12.0631C22 11.6993 21.8699 11.3504 21.6382 11.0931C21.4065 10.8359 21.0923 10.6914 20.7647 10.6914H2.23529Z"/>
+        </svg>
+      </button>
+
       <button class="lexxy-editor__toolbar-button" type="button" name="link" title="Link" data-dialog-target="link-dialog" data-hotkey="cmd+k ctrl+k">
         <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.111 9.546a1.5 1.5 0 012.121 0 5.5 5.5 0 010 7.778l-2.828 2.828a5.5 5.5 0 01-7.778 0 5.498 5.498 0 010-7.777l2.828-2.83a1.5 1.5 0 01.355-.262 6.52 6.52 0 00.351 3.799l-1.413 1.414a2.499 2.499 0 000 3.535 2.499 2.499 0 003.535 0l2.83-2.828a2.5 2.5 0 000-3.536 1.5 1.5 0 010-2.121z"/><path d="M12.111 3.89a5.5 5.5 0 117.778 7.777l-2.828 2.829a1.496 1.496 0 01-.355.262 6.522 6.522 0 00-.351-3.8l1.413-1.412a2.5 2.5 0 10-3.536-3.535l-2.828 2.828a2.5 2.5 0 000 3.536 1.5 1.5 0 01-2.122 2.12 5.5 5.5 0 010-7.777l2.83-2.829z"/></svg>
       </button>
 
       <lexxy-link-dialog class="lexxy-link-dialog">
-        <dialog id="link-dialog" closedby="any">
+        <dialog class="link-dialog" closedby="any">
           <form method="dialog">
             <input type="url" placeholder="Enter a URL…" class="input" required>
             <div class="lexxy-dialog-actions">
@@ -312,6 +340,20 @@ class LexicalToolbarElement extends HTMLElement {
         <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16 8a2 2 0 110 4 2 2 0 010-4z""/><path d="M22 2a1 1 0 011 1v18a1 1 0 01-1 1H2a1 1 0 01-1-1V3a1 1 0 011-1h20zM3 18.714L9 11l5.25 6.75L17 15l4 4V4H3v14.714z"/></svg>
       </button>
 
+      <button class="lexxy-editor__toolbar-button" type="button" name="divider" data-command="insertHorizontalDivider" title="Insert a divider">
+        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 12C0 11.4477 0.447715 11 1 11H23C23.5523 11 24 11.4477 24 12C24 12.5523 23.5523 13 23 13H1C0.447716 13 0 12.5523 0 12Z"/><path d="M4 5C4 3.89543 4.89543 3 6 3H18C19.1046 3 20 3.89543 20 5C20 6.10457 19.1046 7 18 7H6C4.89543 7 4 6.10457 4 5Z"/><path d="M4 19C4 17.8954 4.89543 17 6 17H18C19.1046 17 20 17.8954 20 19C20 20.1046 19.1046 21 18 21H6C4.89543 21 4 20.1046 4 19Z"/></svg>
+      </button>
+      
+      <div class="lexxy-editor__toolbar-spacer" role="separator"></div>
+      
+      <button class="lexxy-editor__toolbar-button" type="button" name="undo" data-command="undo" title="Undo" data-hotkey="cmd+z ctrl+z">
+        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5.64648 8.26531C7.93911 6.56386 10.7827 5.77629 13.624 6.05535C16.4655 6.33452 19.1018 7.66079 21.0195 9.77605C22.5839 11.5016 23.5799 13.6516 23.8936 15.9352C24.0115 16.7939 23.2974 17.4997 22.4307 17.4997C21.5641 17.4997 20.8766 16.7915 20.7148 15.9401C20.4295 14.4379 19.7348 13.0321 18.6943 11.8844C17.3 10.3464 15.3835 9.38139 13.3174 9.17839C11.2514 8.97546 9.18359 9.54856 7.5166 10.7858C6.38259 11.6275 5.48981 12.7361 4.90723 13.9997H8.5C9.3283 13.9997 9.99979 14.6714 10 15.4997C10 16.3281 9.32843 16.9997 8.5 16.9997H1.5C0.671573 16.9997 0 16.3281 0 15.4997V8.49968C0.000213656 7.67144 0.671705 6.99968 1.5 6.99968C2.3283 6.99968 2.99979 7.67144 3 8.49968V11.0212C3.7166 9.9704 4.60793 9.03613 5.64648 8.26531Z"/></svg>
+      </button>
+
+      <button class="lexxy-editor__toolbar-button" type="button" name="redo" data-command="redo" title="Redo" data-hotkey="cmd+shift+z ctrl+shift+z ctrl+y">
+        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.2599 8.26531C15.9672 6.56386 13.1237 5.77629 10.2823 6.05535C7.4408 6.33452 4.80455 7.66079 2.88681 9.77605C1.32245 11.5016 0.326407 13.6516 0.0127834 15.9352C-0.105117 16.7939 0.608975 17.4997 1.47567 17.4997C2.34228 17.4997 3.02969 16.7915 3.19149 15.9401C3.47682 14.4379 4.17156 13.0321 5.212 11.8844C6.60637 10.3464 8.52287 9.38139 10.589 9.17839C12.655 8.97546 14.7227 9.54856 16.3897 10.7858C17.5237 11.6275 18.4165 12.7361 18.9991 13.9997H15.4063C14.578 13.9997 13.9066 14.6714 13.9063 15.4997C13.9063 16.3281 14.5779 16.9997 15.4063 16.9997H22.4063C23.2348 16.9997 23.9063 16.3281 23.9063 15.4997V8.49968C23.9061 7.67144 23.2346 6.99968 22.4063 6.99968C21.578 6.99968 20.9066 7.67144 20.9063 8.49968V11.0212C20.1897 9.9704 19.2984 9.03613 18.2599 8.26531Z"/></svg>
+      </button>
+
       <details class="lexxy-editor__toolbar-overflow">
         <summary class="lexxy-editor__toolbar-button" aria-label="Show more toolbar buttons">•••</summary>
         <div class="lexxy-editor__toolbar-overflow-menu" aria-label="More toolbar buttons"></div>
@@ -326,69 +368,62 @@ var theme = {
   text: {
     bold: "lexxy-content__bold",
     italic: "lexxy-content__italic",
+    strikethrough: "lexxy-content__strikethrough",
     underline: "lexxy-content__underline",
   },
   codeHighlight: {
-    atrule: 'code-token__attr',
-    attr: 'code-token__attr',
-    'attr-name': 'code-token__attr',
-    'attr-value': 'code-token__selector',
-    boolean: 'code-token__property',
-    bold: 'code-token__variable',
-    builtin: 'code-token__selector',
-    cdata: 'code-token__comment',
-    char: 'code-token__selector',
-    class: 'code-token__function',
-    'class-name': 'code-token__function',
-    color: 'code-token__property',
-    comment: 'code-token__comment',
-    constant: 'code-token__property',
-    coord: 'code-token__property',
-    decorator: 'code-token__function',
-    deleted: 'code-token__property',
-    doctype: 'code-token__comment',
-    entity: 'code-token__operator',
-    function: 'code-token__function',
-    hexcode: 'code-token__property',
-    important: 'code-token__variable',
-    inserted: 'code-token__selector',
-    italic: 'code-token__comment',
-    keyword: 'code-token__attr',
-    namespace: 'code-token__variable',
-    number: 'code-token__property',
-    operator: 'code-token__operator',
-    parameter: 'code-token__variable',
-    prolog: 'code-token__comment',
-    property: 'code-token__property',
-    punctuation: 'code-token__punctuation',
-    regex: 'code-token__variable',
-    script: 'code-token__function',
-    selector: 'code-token__selector',
-    string: 'code-token__selector',
-    style: 'code-token__function',
-    symbol: 'code-token__property',
-    tag: 'code-token__property',
-    title: 'code-token__function',
-    url: 'code-token__operator',
-    variable: 'code-token__variable',
+    atrule: "code-token__attr",
+    attr: "code-token__attr",
+    "attr-name": "code-token__attr",
+    "attr-value": "code-token__selector",
+    boolean: "code-token__property",
+    bold: "code-token__variable",
+    builtin: "code-token__selector",
+    cdata: "code-token__comment",
+    char: "code-token__selector",
+    class: "code-token__function",
+    "class-name": "code-token__function",
+    color: "code-token__property",
+    comment: "code-token__comment",
+    constant: "code-token__property",
+    coord: "code-token__property",
+    decorator: "code-token__function",
+    deleted: "code-token__property",
+    doctype: "code-token__comment",
+    entity: "code-token__operator",
+    function: "code-token__function",
+    hexcode: "code-token__property",
+    important: "code-token__variable",
+    inserted: "code-token__selector",
+    italic: "code-token__comment",
+    keyword: "code-token__attr",
+    namespace: "code-token__variable",
+    number: "code-token__property",
+    operator: "code-token__operator",
+    parameter: "code-token__variable",
+    prolog: "code-token__comment",
+    property: "code-token__property",
+    punctuation: "code-token__punctuation",
+    regex: "code-token__variable",
+    script: "code-token__function",
+    selector: "code-token__selector",
+    string: "code-token__selector",
+    style: "code-token__function",
+    symbol: "code-token__property",
+    tag: "code-token__property",
+    title: "code-token__function",
+    url: "code-token__operator",
+    variable: "code-token__variable",
   }
 };
 
-function bytesToHumanSize(bytes) {
-  if (bytes === 0) return "0 B"
-  const sizes = [ "B", "KB", "MB", "GB", "TB", "PB" ];
-  const i = Math.floor(Math.log(bytes) / Math.log(1024));
-  const value = bytes / Math.pow(1024, i);
-  return `${ value.toFixed(2) } ${ sizes[i] }`
-}
-
 const VISUALLY_RELEVANT_ELEMENTS_SELECTOR = [
   "img", "video", "audio", "iframe", "embed", "object", "picture", "source", "canvas", "svg", "math",
-  "form", "input", "textarea", "select", "button", "code", "blockquote"
+  "form", "input", "textarea", "select", "button", "code", "blockquote", "hr"
 ].join(",");
 
 const ALLOWED_HTML_TAGS = [ "a", "action-text-attachment", "b", "blockquote", "br", "code", "em",
-  "figcaption", "figure", "h1", "h2", "h3", "h4", "h5", "h6", "i", "img", "li", "ol", "p", "pre", "q", "strong", "ul" ];
+  "figcaption", "figure", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "i", "img", "li", "ol", "p", "pre", "q", "s", "strong", "ul" ];
 
 const ALLOWED_HTML_ATTRIBUTES = [ "alt", "caption", "class", "content", "content-type", "contenteditable",
   "data-direct-upload-id", "data-sgid", "filename", "filesize", "height", "href", "presentation",
@@ -412,9 +447,9 @@ function parseHtml(html) {
 }
 
 function createAttachmentFigure(contentType, isPreviewable, fileName) {
-  const extension = fileName ? fileName.split('.').pop().toLowerCase() : "unknown";
+  const extension = fileName ? fileName.split(".").pop().toLowerCase() : "unknown";
   return createElement("figure", {
-    className: `attachment attachment--${isPreviewable ? 'preview' : 'file'} attachment--${extension}`,
+    className: `attachment attachment--${isPreviewable ? "preview" : "file"} attachment--${extension}`,
     "data-content-type": contentType
   })
 }
@@ -454,13 +489,21 @@ function generateDomId(prefix) {
   return `${prefix}-${randomPart}`
 }
 
+function bytesToHumanSize(bytes) {
+  if (bytes === 0) return "0 B"
+  const sizes = [ "B", "KB", "MB", "GB", "TB", "PB" ];
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  const value = bytes / Math.pow(1024, i);
+  return `${ value.toFixed(2) } ${ sizes[i] }`
+}
+
 class ActionTextAttachmentNode extends DecoratorNode {
   static getType() {
     return "action_text_attachment"
   }
 
   static clone(node) {
-    return new ActionTextAttachmentNode({ ...node }, node.__key);
+    return new ActionTextAttachmentNode({ ...node }, node.__key)
   }
 
   static importJSON(serializedNode) {
@@ -501,6 +544,22 @@ class ActionTextAttachmentNode extends DecoratorNode {
           }),
           priority: 1
         }
+      },
+      "video": (video) => {
+        const videoSource = video.getAttribute("src") || video.querySelector("source")?.src;
+        const fileName = videoSource?.split("/")?.pop();
+        const contentType = video.querySelector("source")?.getAttribute("content-type") || "video/*";
+
+        return {
+          conversion: () => ({
+            node: new ActionTextAttachmentNode({
+              src: videoSource,
+              fileName: fileName,
+              contentType: contentType
+            })
+          }),
+          priority: 1
+        }
       }
     }
   }
@@ -514,7 +573,7 @@ class ActionTextAttachmentNode extends DecoratorNode {
     this.altText = altText || "";
     this.caption = caption || "";
     this.contentType = contentType || "";
-    this.fileName = fileName;
+    this.fileName = fileName || "";
     this.fileSize = fileSize;
     this.width = width;
     this.height = height;
@@ -598,7 +657,7 @@ class ActionTextAttachmentNode extends DecoratorNode {
   }
 
   #createDOMForImage() {
-    return createElement("img", { src: this.src, alt: this.altText, ...this.#imageDimensions})
+    return createElement("img", { src: this.src, alt: this.altText, ...this.#imageDimensions })
   }
 
   get #imageDimensions() {
@@ -610,18 +669,21 @@ class ActionTextAttachmentNode extends DecoratorNode {
   }
 
   #createDOMForFile() {
-    const extension = this.fileName ? this.fileName.split('.').pop().toLowerCase() : 'unknown';
-    return createElement("span", { className: "attachment__icon", textContent: `${extension}`})
+    const extension = this.fileName ? this.fileName.split(".").pop().toLowerCase() : "unknown";
+    return createElement("span", { className: "attachment__icon", textContent: `${extension}` })
   }
 
   #createDOMForNotImage() {
     const figcaption = createElement("figcaption", { className: "attachment__caption" });
 
     const nameTag = createElement("strong", { className: "attachment__name", textContent: this.caption || this.fileName });
-    const sizeSpan = createElement("span", { className: "attachment__size", textContent: bytesToHumanSize(this.fileSize) });
 
     figcaption.appendChild(nameTag);
-    figcaption.appendChild(sizeSpan);
+
+    if (this.fileSize) {
+      const sizeSpan = createElement("span", { className: "attachment__size", textContent: bytesToHumanSize(this.fileSize) });
+      figcaption.appendChild(sizeSpan);
+    }
 
     return figcaption
   }
@@ -648,9 +710,6 @@ class ActionTextAttachmentNode extends DecoratorNode {
     return caption
   }
 
-  #updateCaption(input) {
-  }
-
   #handleCaptionInputBlurred(event) {
     const input = event.target;
 
@@ -694,7 +753,7 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
   }
 
   static clone(node) {
-    return new ActionTextAttachmentUploadNode({ ...node }, node.__key);
+    return new ActionTextAttachmentUploadNode({ ...node }, node.__key)
   }
 
   constructor({ file, uploadUrl, blobUrlTemplate, editor, progress }, key) {
@@ -747,7 +806,7 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
   }
 
   #getFileExtension() {
-    return this.file.name.split('.').pop().toLowerCase()
+    return this.file.name.split(".").pop().toLowerCase()
   }
 
   #createCaption() {
@@ -777,7 +836,7 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
       directUploadWillStoreFileWithXHR: (request) => {
         request.upload.addEventListener("progress", (event) => {
           this.editor.update(() => {
-            progressBar.value = Math.round((event.loaded / event.total) * 100);
+            progressBar.value = Math.round(event.loaded / event.total * 100);
           });
         });
       }
@@ -842,17 +901,89 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
   }
 }
 
+class HorizontalDividerNode extends DecoratorNode {
+  static getType() {
+    return "horizontal_divider"
+  }
+
+  static clone(node) {
+    return new HorizontalDividerNode(node.__key)
+  }
+
+  static importJSON(serializedNode) {
+    return new HorizontalDividerNode()
+  }
+
+  static importDOM() {
+    return {
+      "hr": (hr) => {
+        return {
+          conversion: () => ({
+            node: new HorizontalDividerNode()
+          }),
+          priority: 1
+        }
+      }
+    }
+  }
+
+  constructor(key) {
+    super(key);
+  }
+
+  createDOM() {
+    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
+  }
+
+  updateDOM() {
+    return true
+  }
+
+  isInline() {
+    return false
+  }
+
+  exportDOM() {
+    const hr = createElement("hr");
+    return { element: hr }
+  }
+
+  exportJSON() {
+    return {
+      type: "horizontal_divider",
+      version: 1
+    }
+  }
+
+  decorate() {
+    return null
+  }
+}
+
 const COMMANDS = [
   "bold",
-  "rotateHeadingFormat",
   "italic",
+  "strikethrough",
   "link",
   "unlink",
+  "rotateHeadingFormat",
   "insertUnorderedList",
   "insertOrderedList",
   "insertQuoteBlock",
   "insertCodeBlock",
-  "uploadAttachments"
+  "insertHorizontalDivider",
+  "uploadAttachments",
+  "undo",
+  "redo"
 ];
 
 class CommandDispatcher {
@@ -883,6 +1014,10 @@ class CommandDispatcher {
     this.editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
   }
 
+  dispatchStrikethrough() {
+    this.editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
+  }
+
   dispatchLink(url) {
     this.#toggleLink(url);
   }
@@ -893,7 +1028,7 @@ class CommandDispatcher {
 
   dispatchInsertUnorderedList() {
     const selection = $getSelection();
-    if (!selection) return;
+    if (!selection) return
 
     const anchorNode = selection.anchor.getNode();
 
@@ -906,7 +1041,7 @@ class CommandDispatcher {
 
   dispatchInsertOrderedList() {
     const selection = $getSelection();
-    if (!selection) return;
+    if (!selection) return
 
     const anchorNode = selection.anchor.getNode();
 
@@ -931,6 +1066,12 @@ class CommandDispatcher {
     });
   }
 
+  dispatchInsertHorizontalDivider() {
+    this.editor.update(() => {
+      this.contents.insertAtCursor(new HorizontalDividerNode());
+    });
+  }
+
   dispatchRotateHeadingFormat() {
     this.editor.update(() => {
       const selection = $getSelection();
@@ -978,6 +1119,14 @@ class CommandDispatcher {
     setTimeout(() => input.remove(), 1000);
   }
 
+  dispatchUndo() {
+    this.editor.dispatchCommand(UNDO_COMMAND, undefined);
+  }
+
+  dispatchRedo() {
+    this.editor.dispatchCommand(REDO_COMMAND, undefined);
+  }
+
   #registerCommands() {
     for (const command of COMMANDS) {
       const methodName = `dispatch${capitalize(command)}`;
@@ -1335,11 +1484,11 @@ class Selection {
     // above when navigating UP/DOWN when Lexical shows its fake cursor on custom decorator nodes.
     this.editorContentElement.addEventListener("keydown", (event) => {
       if (event.key === "ArrowUp") {
-        const lexicalCursor = this.editor.getRootElement().querySelector('[data-lexical-cursor]');
+        const lexicalCursor = this.editor.getRootElement().querySelector("[data-lexical-cursor]");
 
         if (lexicalCursor) {
           let currentElement = lexicalCursor.previousElementSibling;
-          while (currentElement && currentElement.hasAttribute('data-lexical-cursor')) {
+          while (currentElement && currentElement.hasAttribute("data-lexical-cursor")) {
             currentElement = currentElement.previousElementSibling;
           }
 
@@ -1350,11 +1499,11 @@ class Selection {
       }
 
       if (event.key === "ArrowDown") {
-        const lexicalCursor = this.editor.getRootElement().querySelector('[data-lexical-cursor]');
+        const lexicalCursor = this.editor.getRootElement().querySelector("[data-lexical-cursor]");
 
         if (lexicalCursor) {
           let currentElement = lexicalCursor.nextElementSibling;
-          while (currentElement && currentElement.hasAttribute('data-lexical-cursor')) {
+          while (currentElement && currentElement.hasAttribute("data-lexical-cursor")) {
             currentElement = currentElement.nextElementSibling;
           }
 
@@ -1542,7 +1691,7 @@ class Selection {
   }
 
   #isRectUnreliable(rect) {
-    return (rect.width === 0 && rect.height === 0) || (rect.top === 0 && rect.left === 0)
+    return rect.width === 0 && rect.height === 0 || rect.top === 0 && rect.left === 0
   }
 
   #createAndInsertMarker(range) {
@@ -1573,7 +1722,7 @@ class Selection {
 
   #calculateCursorPosition(rect, range) {
     const rootRect = this.editor.getRootElement().getBoundingClientRect();
-    let x = rect.left - rootRect.left;
+    const x = rect.left - rootRect.left;
     let y = rect.top - rootRect.top;
 
     const fontSize = this.#getFontSizeForCursor(range);
@@ -1788,6 +1937,23 @@ class Contents {
     });
   }
 
+  insertAtCursor(node) {
+    this.editor.update(() => {
+      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);
+      }
+    });
+  }
+
   insertNodeWrappingEachSelectedLine(newNodeFn) {
     this.editor.update(() => {
       const selection = $getSelection();
@@ -1859,22 +2025,6 @@ class Contents {
     return result
   }
 
-  hasSelectedWords() {
-    let result = false;
-
-    this.editor.update(() => {
-      const selection = $getSelection();
-      if (!$isRangeSelection(selection)) return
-
-      // Check if we have selected text within a line (not entire lines)
-      result = !selection.isCollapsed() &&
-        selection.anchor.getNode().getTopLevelElement() ===
-        selection.focus.getNode().getTopLevelElement();
-    });
-
-    return result
-  }
-
   unwrapSelectedListItems() {
     this.editor.update(() => {
       const selection = $getSelection();
@@ -1899,7 +2049,7 @@ class Contents {
 
       const selection = $getSelection();
       if ($isRangeSelection(selection)) {
-        selection.insertNodes([linkNode]);
+        selection.insertNodes([ linkNode ]);
         linkNodeKey = linkNode.getKey();
       }
     });
@@ -1965,7 +2115,7 @@ class Contents {
   }
 
   replaceTextBackUntil(stringToReplace, replacementNodes) {
-    replacementNodes = Array.isArray(replacementNodes) ? replacementNodes : [replacementNodes];
+    replacementNodes = Array.isArray(replacementNodes) ? replacementNodes : [ replacementNodes ];
 
     this.editor.update(() => {
       const { anchorNode, offset } = this.#getTextAnchorData();
@@ -2016,55 +2166,30 @@ class Contents {
     const blobUrlTemplate = this.editorElement.blobUrlTemplate;
 
     this.editor.update(() => {
-      const selection = $getSelection();
-      const anchorNode = selection?.anchor.getNode();
-      const currentParagraph = anchorNode?.getTopLevelElement();
-
       const uploadedImageNode = new ActionTextAttachmentUploadNode({ file: file, uploadUrl: uploadUrl, blobUrlTemplate: blobUrlTemplate, editor: this.editor });
-
-      if (currentParagraph && $isParagraphNode(currentParagraph) && currentParagraph.getChildrenSize() === 0) {
-        // If we're inside an empty paragraph, replace it
-        currentParagraph.replace(uploadedImageNode);
-      } else if (currentParagraph && $isElementNode(currentParagraph)) {
-        currentParagraph.insertAfter(uploadedImageNode);
-      } else {
-        $insertNodes([uploadedImageNode]);
-      }
+      this.insertAtCursor(uploadedImageNode);
     }, { tag: HISTORY_MERGE_TAG });
   }
 
-  deleteSelectedNodes() {
+  async deleteSelectedNodes() {
+    let focusNode = null;
+
     this.editor.update(() => {
       if ($isNodeSelection(this.#selection.current)) {
         const nodesToRemove = this.#selection.current.getNodes();
         if (nodesToRemove.length === 0) return
 
-        // Use splice() instead of node.remove() for proper removal and
-        // reconciliation. Would have issues with removing unintended decorator nodes
-        // with node.remove()
-        nodesToRemove.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, []);
-          }
-        });
-
-        // Check if root is empty after all removals
-        const root = $getRoot();
-        if (root.getChildrenSize() === 0) {
-          root.append($createParagraphNode());
-        }
+        focusNode = this.#findAdjacentNodeTo(nodesToRemove);
+        this.#deleteNodes(nodesToRemove);
+      }
+    });
 
-        this.#selection.clear();
-        this.editor.focus();
+    await nextFrame();
 
-        return true
-      }
+    this.editor.update(() => {
+      this.#selectAfterDeletion(focusNode);
+      this.#selection.clear();
+      this.editor.focus();
     });
   }
 
@@ -2122,7 +2247,7 @@ class Contents {
       wrappingNode.append(...topLevelElement.getChildren());
       topLevelElement.replace(wrappingNode);
     } else {
-      $insertNodes([newNodeFn()]);
+      $insertNodes([ newNodeFn() ]);
     }
   }
 
@@ -2199,6 +2324,45 @@ 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();
@@ -2290,8 +2454,8 @@ class Contents {
     firstParagraph.selectStart();
     const currentSelection = $getSelection();
     if (currentSelection && $isRangeSelection(currentSelection)) {
-      currentSelection.anchor.set(firstParagraph.getKey(), 0, 'element');
-      currentSelection.focus.set(lastParagraph.getKey(), lastParagraph.getChildrenSize(), 'element');
+      currentSelection.anchor.set(firstParagraph.getKey(), 0, "element");
+      currentSelection.focus.set(lastParagraph.getKey(), lastParagraph.getChildrenSize(), "element");
     }
   }
 
@@ -2345,14 +2509,14 @@ class Contents {
       const last = children[children.length - 1];
       const beforeLast = children[children.length - 2];
 
-      if (($isTextNode(last) && last.getTextContent() === "") && (beforeLast && !$isTextNode(beforeLast))) {
+      if ($isTextNode(last) && last.getTextContent() === "" && (beforeLast && !$isTextNode(beforeLast))) {
         paragraph.append($createLineBreakNode());
       }
     }
   }
 
   #createCustomAttachmentNodeWithHtml(html, options = {}) {
-    const attachmentConfig = typeof options === 'object' ? options : {};
+    const attachmentConfig = typeof options === "object" ? options : {};
 
     return new CustomActionTextAttachmentNode({
       sgid: attachmentConfig.sgid || null,
@@ -2367,7 +2531,7 @@ class Contents {
   }
 
   #shouldUploadFile(file) {
-    return dispatch(this.editorElement, 'lexxy:file-accept', { file }, true)
+    return dispatch(this.editorElement, "lexxy:file-accept", { file }, true)
   }
 }
 
@@ -2375,7 +2539,7 @@ function isUrl(string) {
   try {
     new URL(string);
     return true
-  } catch (_) {
+  } catch {
     return false
   }
 }
@@ -2450,7 +2614,7 @@ class Clipboard {
   #handlePastedFiles(clipboardData) {
     if (!this.editorElement.supportsAttachments) return
 
-    const html = clipboardData.getData('text/html');
+    const html = clipboardData.getData("text/html");
     if (html) return // Ignore if image copied from browser since we will load it as a remote image
 
     this.#preservingScrollPosition(() => {
@@ -2480,7 +2644,7 @@ class Clipboard {
 class LexicalEditorElement extends HTMLElement {
   static formAssociated = true
   static debug = true
-  static commands = [ "bold", "italic", "" ]
+  static commands = [ "bold", "italic", "strikethrough" ]
 
   static observedAttributes = [ "connected", "required" ]
 
@@ -2642,6 +2806,7 @@ class LexicalEditorElement extends HTMLElement {
       CodeHighlightNode,
       LinkNode,
       AutoLinkNode,
+      HorizontalDividerNode,
 
       CustomActionTextAttachmentNode,
     ];
@@ -2736,7 +2901,8 @@ class LexicalEditorElement extends HTMLElement {
 
   #registerComponents() {
     registerRichText(this.editor);
-    registerHistory(this.editor, createEmptyHistoryState(), 20);
+    this.historyState = createEmptyHistoryState();
+    registerHistory(this.editor, this.historyState, 20);
     registerList(this.editor);
     this.#registerCodeHiglightingComponents();
     registerMarkdownShortcuts(this.editor, TRANSFORMERS);
@@ -2813,6 +2979,7 @@ class LexicalEditorElement extends HTMLElement {
   #createDefaultToolbar() {
     const toolbar = createElement("lexxy-toolbar");
     toolbar.innerHTML = LexicalToolbarElement.defaultTemplate;
+    toolbar.setAttribute("data-attachments", this.supportsAttachments); // Drives toolbar CSS styles
     this.prepend(toolbar);
     return toolbar
   }
@@ -3366,7 +3533,7 @@ class LexicalPromptElement extends HTMLElement {
     popoverContainer.classList.add("lexxy-prompt-menu");
     popoverContainer.style.position = "absolute";
     popoverContainer.setAttribute("nonce", getNonce());
-    popoverContainer.append(...(await this.source.buildListItems()));
+    popoverContainer.append(...await this.source.buildListItems());
     popoverContainer.addEventListener("click", this.#handlePopoverClick);
     this.#editorElement.appendChild(popoverContainer);
     return popoverContainer

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@37signals/lexxy",
-  "version": "0.1.12-beta",
+  "version": "0.1.14-beta",
   "description": "Lexxy - A modern rich text editor for Rails.",
   "module": "dist/lexxy.esm.js",
   "type": "module",
@@ -12,8 +12,10 @@
   "author": "Jorge Manrubia <jorge@37signals.com>",
   "license": "MIT",
   "devDependencies": {
+    "@eslint/js": "^9.15.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-terser": "^0.4.4",
+    "eslint": "^9.15.0",
     "rollup": "^4.44.1",
     "rollup-plugin-gzip": "^4.1.1"
   },
@@ -21,6 +23,7 @@
     "build": "rollup -c",
     "build:npm": "rollup -c rollup.config.npm.mjs",
     "watch": "rollup -wc",
+    "lint": "eslint",
     "prerelease": "yarn build:npm",
     "release": "yarn build:npm && yarn publish"
   },