diff --git a/README.md b/README.md
index 45857423c..4570bf34e 100644
--- a/README.md
+++ b/README.md
@@ -23,16 +23,13 @@ Trix is built with established web standards, notably [Custom Elements](https://
Trix comes bundled in ESM and UMD formats and works with any asset packaging system.
-The easiest way to start with Trix is including it from an npm CDN in the `` of your page and then calling `Trix.start()` to initialize the library:
+The easiest way to start with Trix is including it from an npm CDN in the `` of your page:
```html
…
-
```
@@ -43,9 +40,9 @@ Alternatively, you can install the npm package and import it in your application
```js
import Trix from "trix"
-// Change Trix.config if you need
-
-Trix.start()
+document.addEventListener("trix-before-initialize", () => {
+ // Change Trix.config if you need
+})
```
## Creating an Editor
@@ -354,7 +351,7 @@ element.editor.loadJSON(JSON.parse(localStorage["editorState"]))
The `` element emits several events which you can use to observe and respond to changes in editor state.
-* `trix-before-initialize` fires when the `` element is attached to the DOM just before Trix installs its `editor` object.
+* `trix-before-initialize` fires when the `` element is attached to the DOM just before Trix installs its `editor` object. If you need to use a custom Trix configuration you can change `Trix.config` here.
* `trix-initialize` fires when the `` element is attached to the DOM and its `editor` object is ready for use.
diff --git a/assets/index.html b/assets/index.html
index 23768172d..e4cf73b85 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -68,8 +68,6 @@
}, 30)
}
});
-
- Trix.start()
diff --git a/src/test/test_helper.js b/src/test/test_helper.js
index b68def323..438b9c7b6 100644
--- a/src/test/test_helper.js
+++ b/src/test/test_helper.js
@@ -31,5 +31,3 @@ document.head.insertAdjacentHTML(
#qunit { position: relative !important; }
`
)
-
-Trix.start()
diff --git a/src/trix/trix.js b/src/trix/trix.js
index 42fe0ea22..96777a9b3 100644
--- a/src/trix/trix.js
+++ b/src/trix/trix.js
@@ -10,16 +10,6 @@ import * as operations from "trix/operations"
import * as elements from "trix/elements"
import * as filters from "trix/filters"
-let started = false
-
-function start() {
- if (!started) {
- customElements.define("trix-toolbar", elements.TrixToolbarElement)
- customElements.define("trix-editor", elements.TrixEditorElement)
- started = true
- }
-}
-
const Trix = {
VERSION: version,
config,
@@ -30,10 +20,20 @@ const Trix = {
observers,
operations,
elements,
- filters,
- start
+ filters
+}
+
+function start() {
+ if (!customElements.get("trix-toolbar")) {
+ customElements.define("trix-toolbar", elements.TrixToolbarElement)
+ }
+
+ if (!customElements.get("trix-editor")) {
+ customElements.define("trix-editor", elements.TrixEditorElement)
+ }
}
window.Trix = Trix
+setTimeout(start, 0)
export default Trix