Source rebuild

Author: zoltanhosszu

app/assets/javascript/lexxy.js

@@ -9536,6 +9536,10 @@ class LexicalEditorElement extends HTMLElement {
     return this.getAttribute("attachments") !== "false"
   }
 
+  get contentTabIndex() {
+    return parseInt(this.editorContentElement?.getAttribute("tabindex") ?? "0")
+  }
+
   focus() {
     this.editor.focus();
   }
@@ -9856,35 +9860,23 @@ class LexicalEditorElement extends HTMLElement {
 
 customElements.define("lexxy-editor", LexicalEditorElement);
 
-class ToolbarDialog extends HTMLElement {
+class ToolbarDropdown extends HTMLElement {
   connectedCallback() {
-    this.dialog = this.querySelector("dialog");
-    if ("closedBy" in this.dialog.constructor.prototype) {
-      this.dialog.closedBy = "any";
-    }
-    this.#registerHandlers();
+    this.container = this.closest("details");
+
+    this.container.addEventListener("toggle", this.#handleToggle.bind(this));
+    this.container.addEventListener("keydown", this.#handleKeyDown.bind(this));
+
+    this.#assignTabIndexes();
   }
 
   disconnectedCallback() {
     this.#removeClickOutsideHandler();
+    this.container.removeEventListener("keydown", this.#handleKeyDown.bind(this));
   }
 
   updateStateCallback() { }
 
-  show(triggerButton) {
-    if (this.preventImmediateReopen) { return }
-
-    this.triggerButton = triggerButton;
-    this.#positionDialog();
-    this.dialog.show();
-
-    this.#setupClickOutsideHandler();
-  }
-
-  close() {
-    this.dialog.close();
-  }
-
   get toolbar() {
     return this.closest("lexxy-toolbar")
   }
@@ -9893,32 +9885,42 @@ class ToolbarDialog extends HTMLElement {
     return this.toolbar.editor
   }
 
-  get open() { return this.dialog.open }
-
-  #registerHandlers() {
-    this.#setupKeydownHandler();
-    this.dialog.addEventListener("cancel", this.#handleCancel.bind(this));
-    this.dialog.addEventListener("close", this.#handleClose.bind(this));
+  open(triggerButton) {
+    this.triggerButton = triggerButton;
+    this.#interactiveElements[0].focus();
+    this.#setupClickOutsideHandler();
   }
 
-  #handleClose() {
+  close() {
     this.#removeClickOutsideHandler();
     this.triggerButton = null;
     this.editor.focus();
+
+    this.container.removeAttribute("open");
+  }
+
+  #handleToggle(event) {
+    if (this.container.open) {
+      this.open(event.target);
+    } else {
+      this.close();
+    }
   }
 
-  #handleCancel() {
-    this.preventImmediateReopen = true;
-    requestAnimationFrame(() => this.preventImmediateReopen = undefined);
+  #assignTabIndexes() {
+    requestAnimationFrame(() => {
+      this.#interactiveElements.forEach((element) => {
+        element.setAttribute("tabindex", 0);
+      });
+    });
   }
 
-  #positionDialog() {
-    const left = this.triggerButton.offsetLeft;
-    this.dialog.style.insetInlineStart = `${left}px`;
+  get #interactiveElements() {
+    return Array.from(this.querySelectorAll("button, input"))
   }
 
   #setupClickOutsideHandler() {
-    if (this.#browserHandlesClose || this.clickOutsideHandler) return
+    if (this.clickOutsideHandler) return
 
     this.clickOutsideHandler = this.#handleClickOutside.bind(this);
     document.addEventListener("click", this.clickOutsideHandler, true);
@@ -9932,24 +9934,16 @@ class ToolbarDialog extends HTMLElement {
   }
 
   #handleClickOutside({ target }) {
-    if (!this.dialog.open) return
+    if (!this.container.open) return
 
-    const isClickInsideDialog = this.dialog.contains(target);
+    const isClickInsideDropdown = this.contains(target);
     const isClickOnTrigger = this.triggerButton.contains(target);
 
-    if (!isClickInsideDialog && !isClickOnTrigger) {
+    if (!isClickInsideDropdown && !isClickOnTrigger) {
       this.close();
     }
   }
 
-  #setupKeydownHandler() {
-    if (!this.#browserHandlesClose) { this.addEventListener("keydown", this.#handleKeyDown.bind(this)); }
-  }
-
-  get #browserHandlesClose() {
-    return this.dialog.closedBy === "any"
-  }
-
   #handleKeyDown(event) {
     if (event.key === "Escape") {
       event.stopPropagation();
@@ -9958,7 +9952,7 @@ class ToolbarDialog extends HTMLElement {
   }
 }
 
-class LinkDialog extends ToolbarDialog {
+class LinkDropdown extends ToolbarDropdown {
   connectedCallback() {
     super.connectedCallback();
     this.input = this.querySelector("input");
@@ -9971,8 +9965,8 @@ class LinkDialog extends ToolbarDialog {
   }
 
   #registerHandlers() {
-    this.dialog.addEventListener("beforetoggle", this.#handleBeforeToggle.bind(this));
-    this.dialog.addEventListener("submit", this.#handleSubmit.bind(this));
+    this.addEventListener("beforetoggle", this.#handleBeforeToggle.bind(this));
+    this.addEventListener("submit", this.#handleSubmit.bind(this));
     this.querySelector("[value='unlink']").addEventListener("click", this.#handleUnlink.bind(this));
   }
 
@@ -9983,6 +9977,7 @@ class LinkDialog extends ToolbarDialog {
   #handleSubmit(event) {
     const command = event.submitter?.value;
     this.editor.dispatchCommand(command, this.input.value);
+    this.close();
   }
 
   #handleUnlink() {
@@ -10011,9 +10006,7 @@ class LinkDialog extends ToolbarDialog {
   }
 }
 
-// We should extend the native dialog and avoid the intermediary <dialog> but not
-// supported by Safari yet: customElements.define("lexxy-link-dialog", LinkDialog, { extends: "dialog" })
-customElements.define("lexxy-link-dialog", LinkDialog);
+customElements.define("lexxy-dropdown-link", LinkDropdown);
 
 const APPLY_HIGHLIGHT_SELECTOR = "button.lexxy-highlight-button";
 const REMOVE_HIGHLIGHT_SELECTOR = "[data-command='removeHighlight']";
@@ -10023,7 +10016,7 @@ const REMOVE_HIGHLIGHT_SELECTOR = "[data-command='removeHighlight']";
 // see https://github.com/facebook/lexical/issues/8013
 const NO_STYLE = Symbol("no_style");
 
-class HighlightDialog extends ToolbarDialog {
+class HighlightDropdown extends ToolbarDropdown {
   connectedCallback() {
     super.connectedCallback();
 
@@ -10109,9 +10102,7 @@ class HighlightDialog extends ToolbarDialog {
   }
 }
 
-// We should extend the native dialog and avoid the intermediary <dialog> but not
-// supported by Safari yet: customElements.define("lexxy-hightlight-dialog", HighlightDialog, { extends: "dialog" })
-customElements.define("lexxy-highlight-dialog", HighlightDialog);
+customElements.define("lexxy-dropdown-highlight", HighlightDropdown);
 
 class BaseSource {
   // Template method to override