From d34cf52591841d6eac4eabf318163bcb4d39bc96 Mon Sep 17 00:00:00 2001
From: Sean Doyle <sean.p.doyle24@gmail.com>
Date: Sun, 21 Jan 2024 13:24:54 -0500
Subject: [PATCH] Define `TrixToolbarElement.editorElements`

Define properties for accessing all `<trix-editor>` elements that
declare a relationship with a `<trix-toolbar>` element through a
`[toolbar]`-`[id]` attribute relationship.

Since multiple `<trix-editor>` elements can reference a `<trix-toolbar>`
element by name, this commit introduces both an `.editorElements` and
`.editorElement` properties.

The `.editorElement` property returns the first item in
`.editorElements`, if there are any.
---
 src/test/system/installation_process_test.js |  9 +++++++++
 src/trix/elements/trix_toolbar_element.js    | 19 +++++++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/src/test/system/installation_process_test.js b/src/test/system/installation_process_test.js
index fc6195fbd..fdb78c0dd 100644
--- a/src/test/system/installation_process_test.js
+++ b/src/test/system/installation_process_test.js
@@ -46,6 +46,15 @@ testGroup("Installation process with specified elements", { template: "editor_wi
     assert.equal(editorElement.value, "<div>Hello world</div>")
   })
 
+  test("trix-toolbar can reference editorElements and editorElement", () => {
+    const editorElement = getEditorElement()
+    const toolbarElement = editorElement.toolbarElement
+
+    assert.equal(toolbarElement, document.getElementById("my_toolbar"))
+    assert.deepEqual(Array.from(toolbarElement.editorElements), [ editorElement ])
+    assert.equal(toolbarElement.editorElement, editorElement)
+  })
+
   test("can be cloned", async () => {
     const originalElement = document.getElementById("my_editor")
     const clonedElement = originalElement.cloneNode(true)
diff --git a/src/trix/elements/trix_toolbar_element.js b/src/trix/elements/trix_toolbar_element.js
index 80a362c1e..f291d43d5 100644
--- a/src/trix/elements/trix_toolbar_element.js
+++ b/src/trix/elements/trix_toolbar_element.js
@@ -32,4 +32,23 @@ export default class TrixToolbarElement extends HTMLElement {
       this.innerHTML = config.toolbar.getDefaultHTML()
     }
   }
+
+  // Properties
+
+  get editorElements() {
+    if (this.hasAttribute("id")) {
+      const selector = `[toolbar="${this.getAttribute("id")}"]`
+      const nodeList = this.ownerDocument?.querySelectorAll(selector)
+
+      return Array.from(nodeList)
+    } else {
+      return []
+    }
+  }
+
+  get editorElement() {
+    const [ editorElement ] = this.editorElements
+
+    return editorElement
+  }
 }