lexxy 0.1.2.beta → 0.1.4.beta

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e3ea5ece1a6a51744b2372f4540cafb1485fb8347c091baf90a024231d276643
-  data.tar.gz: d4fa22597f79e0dadb00d4b6d1b1c20ec4e4e79da4e12acb8c4babda494e8916
+  metadata.gz: a63dfb829afd1242b6a38e4c9f6511ef717ee81b2a4950b11d486531fdd5b7d0
+  data.tar.gz: 78e54bc5f3ce08662c381d8e9dd32995828125da453ba35234b602a368dd65b2
 SHA512:
-  metadata.gz: 42f9ca757740fb29bacdb73f668666984925c5a2c747da67b5b4c51bd21e2e5701994f32164df7b394bb490e39f15891dff064e9cf5eada1eeef12a502ebfd67
-  data.tar.gz: c588ad954bd2f0ae53bdee0a4dcf06a98025f64669738d61856df61fb2c8286227b41f59e97a88c2465985abc6b5818f53ea5e0cd23d85abffae3d761714bb63
+  metadata.gz: 69fb8247e66a3242f475c12a66bc3529132d0e41707e173db743fba3d6bc23b98031b8543c3eee44c240113049810f91d445599c6d628a9001236cde863b857b
+  data.tar.gz: 07cb12a656a71c6a1e944e59789314eeb9855ccf3583f5f86c29d0c51e77cd520c345aad5712385d9a04315fe13179487bf312bf6aca98aaa837f14b7b44eb12

data/README.md

@@ -23,7 +23,7 @@ A modern rich text editor for Rails.
 Add this line to your application's Gemfile:
 
 ```ruby
-gem 'lexxy'
+gem 'lexxy', '~> 0.1.3.beta' # Need to specify the version since it's a pre-release
 ```
 
 And then execute:
@@ -32,18 +32,41 @@ And then execute:
 bundle install
 ```
 
-Then, you need to import the lexxy source in your app. If you are using [propshaft](https://github.com/rails/propshaft) and [import maps](https://github.com/rails/importmap-rails) you can do:
+### Import maps
+
+If you are using [propshaft](https://github.com/rails/propshaft) and [import maps](https://github.com/rails/importmap-rails):
 
 ```ruby
 # importmap.rb
 pin "lexxy", to: "lexxy.js"
+pin "@rails/activestorage", to: "activestorage.esm.js" # to support attachments
+```
+
+Then import it in your JavaScript entry point:
+
+```javascript
+// app/javascript/application.js
+import "@37signals/lexxy"
+```
+
+### JavaScript Bundling (jsbundling-rails, Vite, etc.)
+
+If you're using [jsbundling-rails](https://github.com/rails/jsbundling-rails) with esbuild, webpack, or any other JavaScript bundler, you'll need to install the NPM package:
+
+```bash
+yarn add @37signals/lexxy
+yarn add @rails/activestorage # to support attachments
 ```
 
+Then import it in your JavaScript entry point:
+
 ```javascript
-// application.js
-import "lexxy"
+// app/javascript/application.js
+import "@37signals/lexxy"
 ```
 
+### CSS Setup
+
 For the CSS, you can include it with the standard Rails helper:
 
 ```erb
@@ -83,9 +106,9 @@ Under the hood, this will insert a `<lexxy-editor>` tag, that will be a first-cl
 
 The `<lexxy-editor>` element supports these options:
 
-- `placeholder` - Text displayed when the editor is empty.
-- `toolbar` - Pass `"false"` to disable the toolbar entirely, or pass an element ID to render the toolbar in an external element. By default, the toolbar is bootstrapped and displayed above the editor.
-- `attachments` - Pass `"false"` to disable attachments completely. By default, attachments are supported, including paste and Drag & Drop support.
+- `placeholder`: Text displayed when the editor is empty.
+- `toolbar`: Pass `"false"` to disable the toolbar entirely, or pass an element ID to render the toolbar in an external element. By default, the toolbar is bootstrapped and displayed above the editor.
+- `attachments`: Pass `"false"` to disable attachments completely. By default, attachments are supported, including paste and Drag & Drop support.
 
 Lexxy uses the `ElementInternals` API to participate in HTML forms as any standard control. This means that you can use standard HTML attributes like `name`, `value`, `required`, `disabled`, etc.
 
@@ -103,7 +126,7 @@ Lexxy also lets you configure how to load the items: inline or remotely, and how
 The first thing to do is to add a `<lexxy-prompt>` element to the editor:
 
 ```erb
-<%= form_with model: @post do |form| %>
+<%= form.rich_text_area :body do %>
   <lexxy-prompt trigger="@">
   </lexxy-prompt>
 <% end %>
@@ -238,30 +261,31 @@ By default, the `SPACE` key will select the current item in the prompt. If you w
 
 #### `<lexxy-prompt>`
 
-- `trigger` - The character that activates the prompt (e.g., "@", "#", "/").
-- `src` - Path or URL to load items remotely.
-- `name` - Identifier for the prompt type (determines attachment content type, e.g., `name= "mention"` creates `application/vnd.actiontext.mention`). Mandatory unless using `insert-editable-text`.
-- `empty-results` - Message shown when no matches found. By default it is "Nothing found".
-- `remote-filtering` - Enable server-side filtering instead of loading all options at once.
-- `insert-editable-text` - Insert prompt item HTML directly as editable text instead of Action Text attachments.
-- `supports-space-in-searches` - Allow spaces in search queries (useful with remote filtering for full name searches).
+- `trigger`: The character that activates the prompt (e.g., "@", "#", "/").
+- `src`: Path or URL to load items remotely.
+- `name`: Identifier for the prompt type (determines attachment content type, e.g., `name= "mention"` creates `application/vnd.actiontext.mention`). Mandatory unless using `insert-editable-text`.
+- `empty-results`: Message shown when no matches found. By default it is "Nothing found".
+- `remote-filtering`: Enable server-side filtering instead of loading all options at once.
+- `insert-editable-text`: Insert prompt item HTML directly as editable text instead of Action Text attachments.
+- `supports-space-in-searches`: Allow spaces in search queries (useful with remote filtering for full name searches).
 
 #### `<lexxy-prompt-item>`
 
-- `search` - The text to match against when filtering (can include multiple fields for better search).
-- `sgid` - The signed GlobalID for Action Text attachments (use `attachable_sgid` helper). Mandatory unless using `insert-editable-text`.
+- `search`: The text to match against when filtering (can include multiple fields for better search).
+- `sgid`: The signed GlobalID for Action Text attachments (use `attachable_sgid` helper). Mandatory unless using `insert-editable-text`.
 
 ## Roadmap
 
 This is an early beta. Here's what's coming next:
 
-- Configurable editors in Action Text - Choose your editor like you choose your database.
+- Configurable editors in Action Text: Choose your editor like you choose your database.
 - More editing features:
     - Tables
     - Text highlighting
-- Image galleries - The only remaining feature for full Action Text compatibility
+- Image galleries: The only remaining feature for full Action Text compatibility
 - Install task that generates the necessary JS and adds stylesheets.
-- Standalone JS package - to use in non-Rails environments.
+- Configuration hooks.
+- Standalone JS package: to use in non-Rails environments.
 
 ## Development
 
@@ -279,6 +303,10 @@ bin/rails server
 
 The sandbox app is available at http://localhost:3000. There is also a CRUD example at http://localhost:3000/posts.
 
+## Events
+
+* `lexxy:change`: Fired whenever the editor content changes.
+
 ## Contributing
 
 - Bug reports and pull requests are welcome on [GitHub Issues](https://github.com/basecamp/lexxy/issues). Help is especially welcome with [those tagged as "Help Wanted"](https://github.com/basecamp/lexxy/issues?q=is%3Aissue%20state%3Aopen%20label%3A%22help%20wanted%22).

data/app/assets/javascript/lexxy.js

@@ -3746,6 +3746,21 @@ function getListType(node) {
 }
 
 class LexicalToolbarElement extends HTMLElement {
+  constructor() {
+    super();
+    this.internals = this.attachInternals();
+    this.internals.role = "toolbar";
+  }
+
+  connectedCallback() {
+    this.#refreshToolbarOverflow();
+    window.addEventListener("resize", this.#refreshToolbarOverflow);
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener("resize", this.#refreshToolbarOverflow);
+  }
+
   setEditor(editorElement) {
     this.editorElement = editorElement;
     this.editor = editorElement.editor;
@@ -3810,13 +3825,12 @@ class LexicalToolbarElement extends HTMLElement {
       event.shiftKey ? 'shift' : null,
     ].filter(Boolean);
 
-    return [...modifiers, pressedKey].join('+')
+    return [ ...modifiers, pressedKey ].join('+')
   }
 
   #assignButtonTabindex() {
     const baseTabIndex = parseInt(this.editorElement.editorContentElement.getAttribute("tabindex") ?? "0");
-    const buttons = this.querySelectorAll("button");
-    buttons.forEach((button, index) => {
+    this.#buttons.forEach((button, index) => {
       button.setAttribute("tabindex", `${baseTabIndex + index + 1}`);
     });
   }
@@ -3895,16 +3909,60 @@ class LexicalToolbarElement extends HTMLElement {
     }
   }
 
+  #toolbarIsOverflowing() {
+    return this.scrollWidth > this.clientWidth
+  }
+
+  #refreshToolbarOverflow = () => {
+    this.#resetToolbar();
+    this.#compactMenu();
+
+    this.#overflow.style.display = this.#overflowMenu.children.length ? "block" : "none";
+  }
+
+  get #overflow() {
+    return this.querySelector(".lexxy-editor__toolbar-overflow")
+  }
+
+  get #overflowMenu() {
+    return this.querySelector(".lexxy-editor__toolbar-overflow-menu")
+  }
+
+  #resetToolbar() {
+    while (this.#overflowMenu.children.length > 0) {
+      this.insertBefore(this.#overflowMenu.children[0], this.#overflow);
+    }
+  }
+
+  #compactMenu() {
+    const buttons = this.#buttons.reverse();
+    let movedToOverflow = false;
+
+    for (const button of buttons) {
+      if (this.#toolbarIsOverflowing()) {
+        this.#overflowMenu.appendChild(button);
+        movedToOverflow = true;
+      } else {
+        if (movedToOverflow) this.#overflowMenu.appendChild(button);
+        break
+      }
+    }
+  }
+
+  get #buttons() {
+    return Array.from(this.querySelectorAll(":scope > button"))
+  }
+
   static get defaultTemplate() {
     return `
       <button type="button" name="bold" data-command="bold" title="Bold">
         <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="m4.1 23c-.5 0-.7-.4-.7-.7v-20.6c0-.4.4-.7.7-.7h8.9c2 0 3.8.6 4.9 1.5 1.2 1 1.8 2.4 1.8 4.1s-.9 3.2-2.3 4.1c-.2 0-.3.3-.3.5s0 .4.3.5c1.9.8 3.2 2.7 3.2 5s-.7 3.6-2.1 4.7-3.3 1.7-5.6 1.7h-8.8zm4.2-18.1v5.1h3c1.2 0 2-.3 2.7-.7.6-.5.9-1.1.9-1.9s-.3-1.4-.8-1.8-1.3-.6-2.3-.6-2.4 0-3.5 0zm0 8.5v5.8h3.7c1.3 0 2.2-.3 2.8-.7s.9-1.2.9-2.2-.4-1.7-1-2.1-1.7-.7-2.9-.7-2.4 0-3.5 0z" fill-rule="evenodd"/> </svg>
       </button>
-      
+
       <button type="button" name="italic" data-command="italic" title="Italic">
         <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m18.3 1.7c-1.7.4-2.5 1.3-2.7 2.6l-2.4 15.6c-.2 1.1.5 2.1 1.6 2.4.2 0 .2.2.2.3v.7h-.1c0 .1-.2.3-.3.3h-9c-.2 0-.3-.1-.3-.3v-.7h.1c0-.1.1-.2.2-.2 1.7-.4 2.5-1.3 2.7-2.6l2.4-15.6c.2-1.1-.5-2.1-1.6-2.4-.2 0-.2-.2-.2-.3v-.7h.1c0-.1.2-.3.3-.3h9c.2 0 .3.1.3.3v.7h-.1c0 .1-.1.2-.2.2z" fill-rule="evenodd"/></svg>
       </button>
-      
+
       <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="m22.2 1.8c-1.1-1.2-2.5-1.8-4.3-1.8s-3.1.6-4.4 1.8l-4.4 4.4c-1.2 1.2-1.8 2.7-1.8 4.3s.6 3.1 1.8 4.3h.2c.2.3.5.4 1 .4.7 0 1.1-.3 1.2-.6.3-.3.4-.7.4-1.1s-.2-.8-.5-1.2c-.5-.5-.8-1.2-.8-1.9s.3-1.4.8-1.9l4.4-4.2c.6-.5 1.5-.8 2.1-.8s1.4.2 1.9.7.8 1.2.8 1.9-.3 1.4-.8 1.9l-2.6 2.2c-.3.3-.5.7-.5 1.2s.2.8.5 1.2c.8.6 1.7.6 2.4 0l2.6-2.2c2.4-2.4 2.4-6.1 0-8.5z"/><path d="m12.3 9.3c-.3.3-.5.8-.5 1.3 0 .4.2.8.5 1.1.5.5.8 1.2.8 1.9s-.3 1.4-.9 1.9l-4.4 4.4c-.4.4-1.2.7-1.8.7s-1.4-.2-1.9-.7-.8-1.2-.8-1.9.3-1.4.8-1.9l2.5-2.4c.7-.7.7-1.7 0-2.4-.8-.6-1.7-.6-2.4 0l-2.5 2.4c-1 1.1-1.7 2.6-1.7 4.2s.6 3.1 1.8 4.3c1.3 1.2 2.7 1.8 4.2 1.8s3.2-.7 4.3-1.8l4.4-4.4c2.4-2.4 2.4-6.1 0-8.6-.8-.6-1.7-.6-2.4 0z"/></svg>
       </button>
@@ -3916,33 +3974,38 @@ class LexicalToolbarElement extends HTMLElement {
               <button type="submit" class="btn" value="link">Link</button>
               <button type="button" class="btn" value="unlink">Unlink</button>
             </div>
-          </form> 
-        </dialog> 
+          </form>
+        </dialog>
       </lexxy-link-dialog>
-      
+
       <button type="button" name="quote" data-command="insertQuoteBlock" title="Quote">
         <svg viewBox="0 0 24 22" xmlns="http://www.w3.org/2000/svg"> <path d="m1.1 5.2c.6-.7 1.4-1.3 2.4-1.4 2.6-.4 4.2.4 5.3 1.9 2 2.3 1.9 5.1.6 7.6-1.3 2.4-4 4.6-7.2 5.1-.4 0-.7-.1-1-.4-.1-.3-.1-.7.3-1.1l1.1-1.1c.3-.4.6-.7.7-1.1s.3-.9 0-1.3c0-.4-.6-.7-1-1-1.2-.8-2.3-2.2-2.3-4.1.1-1.4.4-2.4 1.1-3.1z"/> <path d="m14.6 5.2c.6-.7 1.6-1.1 2.6-1.4 2.4-.4 4.2.4 5.3 1.9 2 2.3 1.9 5.1.6 7.6-1.3 2.4-4 4.6-7.2 5.1-.4 0-.7-.1-1-.4-.1-.3-.1-.7.3-1.1l1.1-1.1c.3-.4.6-.7.7-1.1s.3-.9 0-1.3c-.1-.4-.6-.7-1-1-1.3-.6-2.4-2-2.4-3.9s.4-2.6 1-3.3z"/> </svg>
       </button>
-      
+
       <button type="button" name="heading" data-command="rotateHeadingFormat" title="Heading">
         <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m5.7 6.2v16.3h3.8v-16.3h5.7v-3.8h-15.2v3.8zm10.1 16.4h3.8v-8.8h4.4v-3.8h-12.6v3.8h4.4z" fill-rule="evenodd"/></svg>
       </button>
-            
+
       <button type="button" name="code" data-command="insertCodeBlock" title="Code">
         <svg viewBox="0 0 24 22" xmlns="http://www.w3.org/2000/svg"><path d="m8 4.7c-.6-.6-1.6-.6-2.4 0l-5.1 5.2c-.3.3-.5.7-.5 1.2s.2.9.5 1.2l5.1 5.1c.3.3.7.5 1.2.5s.9-.2 1.2-.5c.6-.6.6-1.7 0-2.4l-4-4 4-4c.6-.6.6-1.7 0-2.4z"/><path d="m23.5 9.9-5.1-5.1c-.6-.6-1.8-.6-2.4 0-.3.3-.5.7-.5 1.2s.2.9.5 1.2l4 4-4 4c-.3.3-.5.7-.5 1.2s.2.9.5 1.2c.3.2.7.4 1.1.4s.9-.2 1.2-.5l5.1-5.1c.3-.3.5-.7.5-1.2s-.2-.9-.5-1.2z"/></svg>
       </button>
-      
+
       <button type="button" name="unordered-list" data-command="insertUnorderedList" title="Bullet list">
-        <svg viewBox="0 0 24 22" xmlns="http://www.w3.org/2000/svg"> <path d="m2.1 4.8c1.1 0 2.1-.9 2.1-2.1s-1-2-2.1-2-2.1.9-2.1 2.1.9 2 2.1 2zm4.1-2c0-.8.6-1.4 1.4-1.4h15.1c.7 0 1.3.6 1.3 1.4s-.6 1.4-1.4 1.4h-15.1c-.7 0-1.3-.7-1.3-1.4zm1.3 6.8c-.8 0-1.4.6-1.4 1.4s.6 1.4 1.4 1.4h15.1c.8 0 1.4-.6 1.4-1.4s-.6-1.4-1.4-1.4zm0 8.3c-.8 0-1.4.6-1.4 1.4s.6 1.4 1.4 1.4h15.1c.8 0 1.4-.6 1.4-1.4s-.6-1.4-1.4-1.4zm-3.4-6.9c0 1.1-.9 2.1-2.1 2.1s-2-1-2-2.1.9-2.1 2.1-2.1 2 1 2 2.1zm-2 10.3c1.1 0 2.1-.9 2.1-2.1s-.9-2.1-2.1-2.1-2.1 1-2.1 2.1.9 2.1 2.1 2.1z" fill-rule="evenodd"/> </svg> 
+        <svg viewBox="0 0 24 22" xmlns="http://www.w3.org/2000/svg"> <path d="m2.1 4.8c1.1 0 2.1-.9 2.1-2.1s-1-2-2.1-2-2.1.9-2.1 2.1.9 2 2.1 2zm4.1-2c0-.8.6-1.4 1.4-1.4h15.1c.7 0 1.3.6 1.3 1.4s-.6 1.4-1.4 1.4h-15.1c-.7 0-1.3-.7-1.3-1.4zm1.3 6.8c-.8 0-1.4.6-1.4 1.4s.6 1.4 1.4 1.4h15.1c.8 0 1.4-.6 1.4-1.4s-.6-1.4-1.4-1.4zm0 8.3c-.8 0-1.4.6-1.4 1.4s.6 1.4 1.4 1.4h15.1c.8 0 1.4-.6 1.4-1.4s-.6-1.4-1.4-1.4zm-3.4-6.9c0 1.1-.9 2.1-2.1 2.1s-2-1-2-2.1.9-2.1 2.1-2.1 2 1 2 2.1zm-2 10.3c1.1 0 2.1-.9 2.1-2.1s-.9-2.1-2.1-2.1-2.1 1-2.1 2.1.9 2.1 2.1 2.1z" fill-rule="evenodd"/> </svg>
       </button>
-      
+
       <button type="button" name="ordered-list" data-command="insertOrderedList" title="Numbered list">
         <svg viewBox="0 0 24 22" xmlns="http://www.w3.org/2000/svg"><path d="m6.7 3c0-.7.6-1.3 1.3-1.3h14.7c.7 0 1.3.6 1.3 1.3s-.6 1.3-1.3 1.3h-14.7c-.7 0-1.3-.6-1.3-1.3zm1.3 6.7c-.7 0-1.3.6-1.3 1.3s.6 1.3 1.3 1.3h14.7c.7 0 1.3-.6 1.3-1.3s-.6-1.3-1.3-1.3zm0 8c-.7 0-1.3.6-1.3 1.3s.6 1.3 1.3 1.3h14.7c.7 0 1.3-.6 1.3-1.3s-.6-1.3-1.3-1.3z" fill-rule="evenodd"/><path d="m1.5 19.6v-.9h.5c.4 0 .8-.3.8-.7s-.3-.7-.8-.7-.8.3-.8.7h-1.2c0-.9.8-1.6 2-1.6s2 .5 2 1.5-.4 1.1-1.1 1.2c.7 0 1.2.7 1.2 1.3 0 1.1-1.1 1.6-2.1 1.6s-2-.8-2-1.6h1.2c0 .4.4.7.8.7s.8-.3.8-.7-.3-.7-.8-.7h-.7.1zm0-9.7h-1.2c0-.9.7-1.7 2-1.7s2 .7 2 1.6-.5 1.2-.9 1.7l-1.1 1.2h2.1v1.1h-3.9v-.8l2-2c.3-.3.5-.7.5-1.1s-.3-.7-.7-.7-.7.3-.7.7h-.3zm1.7-4.4h-1.3v-4.3l-1.2.8v-1.2l1.3-.8h1.3v5.5z"/></svg>
       </button>
-      
+
       <button type="button" name="upload" data-command="uploadAttachments" title="Upload file">
         <svg viewBox="0 0 24 20" xmlns="http://www.w3.org/2000/svg"> <path d="m22 20h-20c-1.1 0-2-.9-2-2.1v-15.8c0-1.2.9-2.1 2-2.1h20c1.1 0 2 .9 2 2.1v15.8c0 1.1-.9 2.1-2 2.1zm0-2.9v-14.5c0-.3-.2-.5-.5-.5h-19c-.3 0-.5.2-.5.5v14.5c0 .1.1.2.2.2s.2 0 .2-.1l2.2-3.3c.1-.2.3-.3.5-.3h.7l2.6-4c.1-.2.3-.3.5-.3h.7c.2 0 .4.1.5.3l5.3 8c0 .1.2.2.3.2h.3c.2 0 .4-.2.4-.4s0-.2 0-.2l-1.3-1.9c-.2-.2-.2-.6 0-.8l1.2-1.6c.1-.2.3-.3.5-.3h1.1c.2 0 .4 0 .5.3l3.2 4.4c0 .1.3.2.4 0 .2 0 .2 0 .2-.2zm-5.5-7.6c-1.4 0-2.5-1.2-2.5-2.6s1.1-2.6 2.5-2.6 2.5 1.2 2.5 2.6-1.1 2.6-2.5 2.6z" fill-rule="evenodd"/> </svg>
       </button>
+
+      <details class="lexxy-editor__toolbar-overflow">
+        <summary aria-label="Show more toolbar buttons">•••</summary>
+        <div class="lexxy-editor__toolbar-overflow-menu" aria-label="More toolbar buttons"></div>
+      </details>
     `
   }
 }
@@ -7264,7 +7327,7 @@ class LexicalEditorElement extends HTMLElement {
   constructor() {
     super();
     this.internals = this.attachInternals();
-    this.internals.role = "textbox";
+    this.internals.role = "presentation";
   }
 
   connectedCallback() {
@@ -7416,12 +7479,20 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   #createEditorContentElement() {
-    const editorContentElement = createElement("div", { classList: "lexxy-editor__content", contenteditable: true, placeholder: this.getAttribute("placeholder") });
+    const editorContentElement = createElement("div", {
+      classList: "lexxy-editor__content",
+      contenteditable: true,
+      role: "textbox",
+      "aria-multiline": true,
+      "aria-label": this.#labelText,
+      placeholder: this.getAttribute("placeholder")
+    });
     editorContentElement.id = `${this.id}-content`;
+    this.#ariaAttributes.forEach(attribute => editorContentElement.setAttribute(attribute.name, attribute.value));
     this.appendChild(editorContentElement);
 
     if (this.getAttribute("tabindex")) {
-      this.editorContentElement.setAttribute("tabindex", this.getAttribute("tabindex"));
+      editorContentElement.setAttribute("tabindex", this.getAttribute("tabindex"));
       this.removeAttribute("tabindex");
     } else {
       editorContentElement.setAttribute("tabindex", 0);
@@ -7430,6 +7501,14 @@ class LexicalEditorElement extends HTMLElement {
     return editorContentElement
   }
 
+  get #labelText() {
+    return Array.from(this.internals.labels).map(label => label.textContent).join(" ")
+  }
+
+  get #ariaAttributes() {
+    return Array.from(this.attributes).filter(attribute => attribute.name.startsWith("aria-"))
+  }
+
   set #internalFormValue(html) {
     const changed = this.#internalFormValue !== undefined && this.#internalFormValue !== this.value;