@37signals/lexxy 0.1.25-beta → 0.1.26-beta

package/dist/lexxy.esm.js

@@ -10,8 +10,8 @@ import 'prismjs/components/prism-json';
 import 'prismjs/components/prism-diff';
 import DOMPurify from 'dompurify';
 import { getStyleObjectFromCSS, getCSSFromStyleObject, $getSelectionStyleValueForProperty, $patchStyleText } from '@lexical/selection';
-import { $isTextNode, TextNode, $isRangeSelection, $getSelection, DecoratorNode, $getNodeByKey, HISTORY_MERGE_TAG, FORMAT_TEXT_COMMAND, $createTextNode, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_LOW, KEY_TAB_COMMAND, COMMAND_PRIORITY_NORMAL, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $isNodeSelection, $getRoot, $isLineBreakNode, $isElementNode, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_DELETE_COMMAND, KEY_BACKSPACE_COMMAND, SELECTION_CHANGE_COMMAND, $createNodeSelection, $setSelection, $createParagraphNode, KEY_ENTER_COMMAND, COMMAND_PRIORITY_HIGH, $isParagraphNode, $insertNodes, $createLineBreakNode, CLEAR_HISTORY_COMMAND, $addUpdateTag, SKIP_DOM_SELECTION_TAG, createEditor, BLUR_COMMAND, FOCUS_COMMAND, KEY_DOWN_COMMAND, KEY_SPACE_COMMAND } from 'lexical';
-import { $isListNode, $isListItemNode, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, $createListNode, ListNode, ListItemNode, registerList } from '@lexical/list';
+import { $isTextNode, TextNode, $isRangeSelection, SKIP_DOM_SELECTION_TAG, $getSelection, DecoratorNode, $getNodeByKey, HISTORY_MERGE_TAG, FORMAT_TEXT_COMMAND, $createTextNode, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_LOW, KEY_TAB_COMMAND, COMMAND_PRIORITY_NORMAL, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $isNodeSelection, $getRoot, $isLineBreakNode, $isElementNode, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_DELETE_COMMAND, KEY_BACKSPACE_COMMAND, SELECTION_CHANGE_COMMAND, $createNodeSelection, $setSelection, $createParagraphNode, KEY_ENTER_COMMAND, COMMAND_PRIORITY_HIGH, $isParagraphNode, $insertNodes, $createLineBreakNode, CLEAR_HISTORY_COMMAND, $addUpdateTag, createEditor, BLUR_COMMAND, FOCUS_COMMAND, KEY_DOWN_COMMAND, KEY_SPACE_COMMAND } from 'lexical';
+import { $isListNode, $isListItemNode, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, ListNode, $getListDepth, $createListNode, ListItemNode, registerList } from '@lexical/list';
 import { $isQuoteNode, $isHeadingNode, $createQuoteNode, $createHeadingNode, QuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
 import { $isCodeNode, CodeNode, normalizeCodeLang, CodeHighlightNode, registerCodeHighlighting, CODE_LANGUAGE_FRIENDLY_NAME_MAP } from '@lexical/code';
 import { $isLinkNode, $createAutoLinkNode, $toggleLink, $createLinkNode, LinkNode, AutoLinkNode } from '@lexical/link';
@@ -20,6 +20,7 @@ import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
 import { registerMarkdownShortcuts, TRANSFORMERS } from '@lexical/markdown';
 import { createEmptyHistoryState, registerHistory } from '@lexical/history';
 import { DirectUpload } from '@rails/activestorage';
+import { $getNearestNodeOfType } from '@lexical/utils';
 import { marked } from 'marked';
 
 // Configure Prism for manual highlighting mode
@@ -145,6 +146,93 @@ function hasHighlightStyles(cssOrStyles) {
   return !!(styles.color || styles["background-color"])
 }
 
+function handleRollingTabIndex(elements, event) {
+  const previousActiveElement = document.activeElement;
+
+  if (elements.includes(previousActiveElement)) {
+    const finder = new NextElementFinder(elements, event.key);
+
+    if (finder.selectNext(previousActiveElement)) {
+      event.preventDefault();
+    }
+  }
+}
+
+class NextElementFinder {
+  constructor(elements, key) {
+    this.elements = elements;
+    this.key = key;
+  }
+
+  selectNext(fromElement) {
+    const nextElement = this.#findNextElement(fromElement);
+
+    if (nextElement) {
+      const inactiveElements = this.elements.filter(element => element !== nextElement);
+      this.#unsetTabIndex(inactiveElements);
+      this.#focusWithActiveTabIndex(nextElement);
+      return true
+    }
+
+    return false
+  }
+
+  #findNextElement(fromElement) {
+    switch (this.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        return this.#findNextSibling(fromElement)
+
+      case "ArrowLeft":
+      case "ArrowUp":
+        return this.#findPreviousSibling(fromElement)
+
+      case "Home":
+        return this.#findFirst()
+
+      case "End":
+        return this.#findLast()
+    }
+  }
+
+  #findFirst(elements = this.elements) {
+    return elements.find(isActiveAndVisible)
+  }
+
+  #findLast(elements = this.elements) {
+    return elements.findLast(isActiveAndVisible)
+  }
+
+  #findNextSibling(element) {
+    const afterElements = this.elements.slice(this.#indexOf(element) + 1);
+    return this.#findFirst(afterElements)
+  }
+
+  #findPreviousSibling(element) {
+    const beforeElements = this.elements.slice(0, this.#indexOf(element));
+    return this.#findLast(beforeElements)
+  }
+
+  #indexOf(element) {
+    return this.elements.indexOf(element)
+  }
+
+  #focusWithActiveTabIndex(element) {
+    if (isActiveAndVisible(element)) {
+      element.tabIndex = 0;
+      element.focus();
+    }
+  }
+
+  #unsetTabIndex(elements) {
+    elements.forEach(element => element.tabIndex = -1);
+  }
+}
+
+function isActiveAndVisible(element) {
+  return element && !element.disabled && element.checkVisibility()
+}
+
 class LexicalToolbarElement extends HTMLElement {
   static observedAttributes = [ "connected" ]
 
@@ -156,17 +244,14 @@ class LexicalToolbarElement extends HTMLElement {
 
   connectedCallback() {
     requestAnimationFrame(() => this.#refreshToolbarOverflow());
-
-    this._resizeObserver = new ResizeObserver(() => this.#refreshToolbarOverflow());
-    this._resizeObserver.observe(this);
+    this.setAttribute("role", "toolbar");
+    this.#installResizeObserver();
   }
 
   disconnectedCallback() {
-    if (this._resizeObserver) {
-      this._resizeObserver.disconnect();
-      this._resizeObserver = null;
-    }
+    this.#uninstallResizeObserver();
     this.#unbindHotkeys();
+    this.#unbindFocusListeners();
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -180,11 +265,12 @@ class LexicalToolbarElement extends HTMLElement {
     this.editor = editorElement.editor;
     this.#bindButtons();
     this.#bindHotkeys();
-    this.#setTabIndexValues();
+    this.#resetTabIndexValues();
     this.#setItemPositionValues();
     this.#monitorSelectionChanges();
     this.#monitorHistoryChanges();
     this.#refreshToolbarOverflow();
+    this.#bindFocusListeners();
 
     this.toggleAttribute("connected", true);
   }
@@ -194,24 +280,39 @@ class LexicalToolbarElement extends HTMLElement {
     this.connectedCallback();
   }
 
+  #installResizeObserver() {
+    this.resizeObserver = new ResizeObserver(() => this.#refreshToolbarOverflow());
+    this.resizeObserver.observe(this);
+  }
+
+  #uninstallResizeObserver() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+  }
+
   #bindButtons() {
     this.addEventListener("click", this.#handleButtonClicked.bind(this));
   }
 
-  #handleButtonClicked({ target }) {
-    this.#handleTargetClicked(target, "[data-command]", this.#dispatchButtonCommand.bind(this));
+  #handleButtonClicked(event) {
+    this.#handleTargetClicked(event, "[data-command]", this.#dispatchButtonCommand.bind(this));
   }
 
-  #handleTargetClicked(target, selector, callback) {
-    const button = target.closest(selector);
+  #handleTargetClicked(event, selector, callback) {
+    const button = event.target.closest(selector);
     if (button) {
-      callback(button);
+      callback(event, button);
     }
   }
 
-  #dispatchButtonCommand(button) {
-    const { command, payload } = button.dataset;
-    this.editor.dispatchCommand(command, payload);
+  #dispatchButtonCommand(event, { dataset: { command, payload } }) {
+    const isKeyboard = event instanceof PointerEvent && event.pointerId === -1;
+
+    this.editor.update(() => {
+      this.editor.dispatchCommand(command, payload);
+    }, { tag: isKeyboard ? SKIP_DOM_SELECTION_TAG : undefined } );
   }
 
   #bindHotkeys() {
@@ -246,9 +347,38 @@ class LexicalToolbarElement extends HTMLElement {
     return [ ...modifiers, pressedKey ].join("+")
   }
 
-  #setTabIndexValues() {
-    this.#buttons.forEach((button) => {
-      button.setAttribute("tabindex", 0);
+  #bindFocusListeners() {
+    this.editorElement.addEventListener("lexxy:focus", this.#handleFocus);
+    this.editorElement.addEventListener("lexxy:blur", this.#handleFocusOut);
+    this.addEventListener("focusout", this.#handleFocusOut);
+    this.addEventListener("keydown", this.#handleKeydown);
+  }
+
+  #unbindFocusListeners() {
+    this.editorElement.removeEventListener("lexxy:focus", this.#handleFocus);
+    this.editorElement.removeEventListener("lexxy:blur", this.#handleFocusOut);
+    this.removeEventListener("focusout", this.#handleFocusOut);
+    this.removeEventListener("keydown", this.#handleKeydown);
+  }
+
+  #handleFocus = () => {
+    this.#resetTabIndexValues();
+    this.#focusableItems[0].tabIndex = 0;
+  }
+
+  #handleFocusOut = () => {
+    if (!this.contains(document.activeElement)) {
+      this.#resetTabIndexValues();
+    }
+  }
+
+  #handleKeydown = (event) => {
+    handleRollingTabIndex(this.#focusableItems, event);
+  }
+
+  #resetTabIndexValues() {
+    this.#focusableItems.forEach((button) => {
+      button.tabIndex = -1;
     });
   }
 
@@ -358,6 +488,7 @@ class LexicalToolbarElement extends HTMLElement {
 
     const isOverflowing = this.#overflowMenu.children.length > 0;
     this.toggleAttribute("overflowing", isOverflowing);
+    this.#overflowMenu.toggleAttribute("disabled", !isOverflowing);
   }
 
   #compactMenu() {
@@ -409,6 +540,10 @@ class LexicalToolbarElement extends HTMLElement {
     return Array.from(this.querySelectorAll(":scope > button"))
   }
 
+  get #focusableItems() {
+    return Array.from(this.querySelectorAll(":scope button, :scope > details > summary"))
+  }
+
   get #toolbarItems() {
     return Array.from(this.querySelectorAll(":scope > *:not(.lexxy-editor__toolbar-overflow)"))
   }
@@ -1386,7 +1521,7 @@ class CommandDispatcher {
   }
 
   #registerKeyboardCommands() {
-    this.editor.registerCommand(KEY_TAB_COMMAND, this.#handleListIndentation.bind(this), COMMAND_PRIORITY_NORMAL);
+    this.editor.registerCommand(KEY_TAB_COMMAND, this.#handleTabKey.bind(this), COMMAND_PRIORITY_NORMAL);
   }
 
   #registerDragAndDropHandlers() {
@@ -1436,18 +1571,28 @@ class CommandDispatcher {
     this.editor.focus();
   }
 
-  #handleListIndentation(event) {
+  #handleTabKey(event) {
     if (this.selection.isInsideList) {
-      event.preventDefault();
-      if (event.shiftKey) {
-        return this.editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined)
-      } else {
-        return this.editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined)
-      }
+      return this.#handleTabForList(event)
+    } else if (this.selection.isInsideCodeBlock) {
+      return this.#handleTabForCode()
     }
     return false
   }
 
+  #handleTabForList(event) {
+    if (event.shiftKey && !this.selection.isIndentedList) return false
+
+    event.preventDefault();
+    const command = event.shiftKey? OUTDENT_CONTENT_COMMAND : INDENT_CONTENT_COMMAND;
+    return this.editor.dispatchCommand(command)
+  }
+
+  #handleTabForCode() {
+    const selection = $getSelection();
+    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(() => {
@@ -1624,6 +1769,29 @@ class Selection {
     return getNearestListItemNode(anchorNode) !== null
   }
 
+  get isIndentedList() {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return false
+
+    const nodes = selection.getNodes();
+    for (const node of nodes) {
+      const closestListNode = $getNearestNodeOfType(node, ListNode);
+      if (closestListNode && $getListDepth(closestListNode) > 1) {
+        return true
+      }
+    }
+
+    return false
+  }
+
+  get isInsideCodeBlock() {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return false
+
+    const anchorNode = selection.anchor.getNode();
+    return $getNearestNodeOfType(anchorNode, CodeNode) !== null
+  }
+
   get nodeAfterCursor() {
     const { anchorNode, offset } = this.#getCollapsedSelectionData();
     if (!anchorNode) return null
@@ -3971,8 +4139,6 @@ class ToolbarDropdown extends HTMLElement {
 
     this.container.addEventListener("toggle", this.#handleToggle.bind(this));
     this.container.addEventListener("keydown", this.#handleKeyDown.bind(this));
-
-    this.#setTabIndexValues();
   }
 
   disconnectedCallback() {
@@ -4000,14 +4166,14 @@ class ToolbarDropdown extends HTMLElement {
     }
   }
 
-  #handleOpen(trigger) {
-    this.trigger = trigger;
+  #handleOpen() {
     this.#interactiveElements[0].focus();
     this.#setupClickOutsideHandler();
+
+    this.#resetTabIndexValues();
   }
 
   #handleClose() {
-    this.trigger = null;
     this.#removeClickOutsideHandler();
     this.editor.focus();
   }
@@ -4037,16 +4203,20 @@ class ToolbarDropdown extends HTMLElement {
     }
   }
 
-  async #setTabIndexValues() {
+  async #resetTabIndexValues() {
     await nextFrame();
-    this.#interactiveElements.forEach((element) => {
-      element.setAttribute("tabindex", 0);
+    this.#buttons.forEach((element, index) => {
+      element.setAttribute("tabindex", index === 0 ? 0 : "-1");
     });
   }
 
   get #interactiveElements() {
     return Array.from(this.querySelectorAll("button, input"))
   }
+
+  get #buttons() {
+    return Array.from(this.querySelectorAll("button"))
+  }
 }
 
 class LinkDropdown extends ToolbarDropdown {
@@ -4242,15 +4412,19 @@ class TableHandler extends HTMLElement {
     return $getTableColumnIndexFromTableCellNode(currentCell)
   }
 
+  get #tableHandlerButtons() {
+    return Array.from(this.buttonsContainer.querySelectorAll("button, details > summary"))
+  }
+
   #registerKeyboardShortcuts() {
-    this.unregisterKeyboardShortcuts = this.#editor.registerCommand(KEY_DOWN_COMMAND, this.#handleKeyDown.bind(this), COMMAND_PRIORITY_HIGH);
+    this.unregisterKeyboardShortcuts = this.#editor.registerCommand(KEY_DOWN_COMMAND, this.#handleKeyDown, COMMAND_PRIORITY_HIGH);
   }
 
   #unregisterKeyboardShortcuts() {
     this.unregisterKeyboardShortcuts();
   }
 
-  #handleKeyDown(event) {
+  #handleKeyDown = (event) => {
     if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key === "F10") {
       const firstButton = this.buttonsContainer?.querySelector("button, [tabindex]:not([tabindex='-1'])");
       this.#setFocusStateOnSelectedCell();
@@ -4268,6 +4442,14 @@ class TableHandler extends HTMLElement {
     }
   }
 
+  #handleTableHandlerKeydown = (event) => {
+    if (event.key === "Escape") {
+      this.#editor.focus();
+    } else {
+      handleRollingTabIndex(this.#tableHandlerButtons, event);
+    }
+  }
+
   #setUpButtons() {
     this.buttonsContainer = createElement("div", {
       className: "lexxy-table-handle-buttons"
@@ -4278,6 +4460,7 @@ class TableHandler extends HTMLElement {
 
     this.moreMenu = this.#createMoreMenu();
     this.buttonsContainer.appendChild(this.moreMenu);
+    this.buttonsContainer.addEventListener("keydown", this.#handleTableHandlerKeydown);
 
     this.#editorElement.appendChild(this.buttonsContainer);
   }

package/dist/stylesheets/lexxy-editor.css

@@ -437,17 +437,6 @@
       }
     }
   }
-
-  .lexxy-editor__table-edit {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    gap: 0;
-
-    button {
-
-    }
-  }
 }
 
 /* Table handle buttons
@@ -455,6 +444,7 @@
 
 :where(.lexxy-table-handle-buttons) {
   --button-size: 2.5lh;
+
   color: var(--lexxy-color-ink-inverted);
   display: none;
   flex-direction: row;
@@ -491,8 +481,7 @@
       min-inline-size: var(--button-size);
       padding: 0;
 
-      &:hover,
-      &:focus-visible {
+      &:hover {
         background-color: var(--lexxy-color-ink-medium);
       }
 
@@ -506,6 +495,16 @@
         display: none;
       }
     }
+
+    button,
+    summary {
+      &:focus,
+      &:focus-visible {
+        background-color: var(--lexxy-color-ink-medium);
+        outline: var(--lexxy-focus-ring-size) solid var(--lexxy-focus-ring-color);
+        outline-offset: var(--lexxy-focus-ring-offset);
+      }
+    }
   }
 
   .lexxy-table-control__more-menu {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@37signals/lexxy",
-  "version": "0.1.25-beta",
+  "version": "0.1.26-beta",
   "description": "Lexxy - A modern rich text editor for Rails.",
   "module": "dist/lexxy.esm.js",
   "type": "module",
@@ -25,7 +25,7 @@
   "scripts": {
     "build": "rollup -c",
     "build:npm": "rollup -c rollup.config.npm.mjs",
-    "watch": "NODE_ENV=development rollup -wc --watch.onEnd=\"rails restart\"",
+    "watch": "rollup -wc --watch.onEnd=\"rails restart\"",
     "lint": "eslint",
     "prerelease": "yarn build:npm",
     "release": "yarn build:npm && yarn publish"