Merge pull request #1008 from basecamp/remove-trix-start

Automatically start Trix on the next tick after import
basecamp · Nov 3, 2022 · 8ded04c · 8ded04c
2 parents d497d81 + a9fa5a2
commit 8ded04c
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 24 deletions.
diff --git 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 `<head>` 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 `<head>` of your page:
 
 ```html
 <head>
   …
   <link rel="stylesheet" type="text/css" href="https://unpkg.com/trix@2.0.0-beta.0/dist/trix.css">
   <script type="text/javascript" src="https://unpkg.com/trix@2.0.0-beta.0/dist/trix.umd.min.js"></script>
-  <script type="text/javascript">
-    Trix.start()
-  </script>
 </head>
 ```
 
@@ -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 `<trix-editor>` element emits several events which you can use to observe and respond to changes in editor state.
 
-* `trix-before-initialize` fires when the `<trix-editor>` element is attached to the DOM just before Trix installs its `editor` object.
+* `trix-before-initialize` fires when the `<trix-editor>` 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 `<trix-editor>` element is attached to the DOM and its `editor` object is ready for use.
 

diff --git a/assets/index.html b/assets/index.html
@@ -68,8 +68,6 @@
           }, 30)
         }
       });
-
-      Trix.start()
     </script>
   </head>
   <body>

diff --git a/src/test/test_helper.js b/src/test/test_helper.js
@@ -31,5 +31,3 @@ document.head.insertAdjacentHTML(
     #qunit { position: relative !important; }
   </style>`
 )
-
-Trix.start()
diff --git 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
-Original file line number
+Diff line change
@@ Expand Up / @@ -68,8 +68,6 @@ @@
               }, 30)
             }
           });
-          Trix.start()
         </script>
       </head>
       <body>
@@ Expand Down @@