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.

Author: seanpdoyle

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)

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
+  }
 }