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, "
Hello world
")
})
+ 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
+ }
}