lexxy 0.1.25.beta → 0.1.26.beta

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dad8a8750fa3768dec22db124d53c86c503c0e22a8a161f9255f7b7d693bcdfe
-  data.tar.gz: 8d890586e2d4f4579945b0c236fdfefe7d4ac91e005d923781297c776d7badf6
+  metadata.gz: ff57bf7093680549f0e8a16c40c9d2e3b9c399ddea811fb8164b0915e6c869d4
+  data.tar.gz: 2e95ef8aedf887e717f9a7c8ea5b086ed0de1dc7840057fe50f2a4349ceba3d2
 SHA512:
-  metadata.gz: 6e6d60e274a8b0a3cb91dc3ca5f45ee62b27a35058cc4be2a028626d9293ddf8c03489837a568ed611f29c3bfb671d69b7884f0652b6e5bbbb6b832b2b73fb97
-  data.tar.gz: c945dff9eea87287117e078cc21bfd3da2c6644c07ba09ae19b61600a8efb17ce2baaae2764646b1cfdc80c698554bc6e3693be05d88e7df242461d1df56729d
+  metadata.gz: 8eb3289e99dd46a96dc938b4e6b5a3b184b89dcb7650b9dab3ac256229151a74756e5d0d91d175bb4e38c82ead28a4dccfa5bcd31fbbcd7f4c69a270ee4d0e38
+  data.tar.gz: 946690466243ccec4590977b68a00948001c58b2e82f0e77f63b2293d4b850ef3c382b0e6006bd53ae95f0e0a32e8ca58cb304e19fd47ccc4509974998ab9ec1

data/app/assets/javascript/lexxy.js

@@ -6337,6 +6337,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" ]
 
@@ -6348,17 +6435,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) {
@@ -6372,11 +6456,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);
   }
@@ -6386,24 +6471,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 ? zn : undefined } );
   }
 
   #bindHotkeys() {
@@ -6438,9 +6538,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;
     });
   }
 
@@ -6550,6 +6679,7 @@ class LexicalToolbarElement extends HTMLElement {
 
     const isOverflowing = this.#overflowMenu.children.length > 0;
     this.toggleAttribute("overflowing", isOverflowing);
+    this.#overflowMenu.toggleAttribute("disabled", !isOverflowing);
   }
 
   #compactMenu() {
@@ -6601,6 +6731,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)"))
   }
@@ -7598,7 +7732,7 @@ class CommandDispatcher {
   }
 
   #registerKeyboardCommands() {
-    this.editor.registerCommand(Me$2, this.#handleListIndentation.bind(this), Ri);
+    this.editor.registerCommand(Me$2, this.#handleTabKey.bind(this), Ri);
   }
 
   #registerDragAndDropHandlers() {
@@ -7648,18 +7782,28 @@ class CommandDispatcher {
     this.editor.focus();
   }
 
-  #handleListIndentation(event) {
+  #handleTabKey(event) {
     if (this.selection.isInsideList) {
-      event.preventDefault();
-      if (event.shiftKey) {
-        return this.editor.dispatchCommand(De$2, undefined)
-      } else {
-        return this.editor.dispatchCommand(Pe$2, 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? De$2 : Pe$2;
+    return this.editor.dispatchCommand(command)
+  }
+
+  #handleTabForCode() {
+    const selection = Lr();
+    return yr(selection) && selection.isCollapsed()
+  }
+
   // Not using TOGGLE_LINK_COMMAND because it's not handled unless you use React/LinkPlugin
   #toggleLink(url) {
     this.editor.update(() => {
@@ -7836,6 +7980,29 @@ class Selection {
     return getNearestListItemNode(anchorNode) !== null
   }
 
+  get isIndentedList() {
+    const selection = Lr();
+    if (!yr(selection)) return false
+
+    const nodes = selection.getNodes();
+    for (const node of nodes) {
+      const closestListNode = wt$5(node, lt$3);
+      if (closestListNode && W$4(closestListNode) > 1) {
+        return true
+      }
+    }
+
+    return false
+  }
+
+  get isInsideCodeBlock() {
+    const selection = Lr();
+    if (!yr(selection)) return false
+
+    const anchorNode = selection.anchor.getNode();
+    return wt$5(anchorNode, q$1) !== null
+  }
+
   get nodeAfterCursor() {
     const { anchorNode, offset } = this.#getCollapsedSelectionData();
     if (!anchorNode) return null
@@ -10255,8 +10422,6 @@ class ToolbarDropdown extends HTMLElement {
 
     this.container.addEventListener("toggle", this.#handleToggle.bind(this));
     this.container.addEventListener("keydown", this.#handleKeyDown.bind(this));
-
-    this.#setTabIndexValues();
   }
 
   disconnectedCallback() {
@@ -10284,14 +10449,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();
   }
@@ -10321,16 +10486,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 {
@@ -10526,15 +10695,19 @@ class TableHandler extends HTMLElement {
     return Ue$1(currentCell)
   }
 
+  get #tableHandlerButtons() {
+    return Array.from(this.buttonsContainer.querySelectorAll("button, details > summary"))
+  }
+
   #registerKeyboardShortcuts() {
-    this.unregisterKeyboardShortcuts = this.#editor.registerCommand(me$1, this.#handleKeyDown.bind(this), Bi);
+    this.unregisterKeyboardShortcuts = this.#editor.registerCommand(me$1, this.#handleKeyDown, Bi);
   }
 
   #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();
@@ -10552,6 +10725,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"
@@ -10562,6 +10743,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);
   }
@@ -11674,3 +11856,4 @@ function highlightElement(preElement) {
 }
 
 export { highlightAll };
+//# sourceMappingURL=lexxy.js.map