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