Merge branch 'basecamp:main' into main

Author: Thomaash

README.md

@@ -78,7 +78,7 @@ For example, to apply bold styling to the selected text the button is:
 
 Trix will determine that a range of text is selected and will apply the formatting defined in `Trix.config.textAttributes` (found in `config/text_attributes.js`).
 
-`data-trix-key="b"` tells Trix that this attribute should be applied when you use <kbd>meta</kbd>+<kbd>b</kdb>
+`data-trix-key="b"` tells Trix that this attribute should be applied when you use <kbd>meta</kbd>+<kbd>b</kdb>.
 
 If the attribute is defined in `Trix.config.blockAttributes`, Trix will apply the attribute to the current block of text.
 
@@ -253,7 +253,7 @@ pseudo-class][:disabled].
 
 ## Providing an Accessible Name
 
-Like other form controls, `<trix-editor>` elements should have an accessible name. The `<trix-editor>` element integrates with `<label>` elements and The `<trix-editor>` supports two styles of integrating with `<label>` elements:
+Like other form controls, `<trix-editor>` elements should have an accessible name. The `<trix-editor>` element integrates with `<label>` elements. It supports two styles of integrating with `<label>` elements:
 
 1. render the `<trix-editor>` element with an `[id]` attribute that the `<label>` element references through its `[for]` attribute:
 

karma.conf.js

@@ -53,25 +53,12 @@ if (process.env.SAUCE_ACCESS_KEY) {
       browserVersion: "latest",
       "moz:debuggerAddress": true
     },
-    sl_safari_12_1: {
-      base: "SauceLabs",
-      browserName: "safari",
-      platform: "macOS 10.13",
-      version: "12.1"
-    },
     sl_edge_latest: {
       base: "SauceLabs",
       browserName: "microsoftedge",
       platform: "Windows 10",
       version: "latest"
     },
-    sl_ios_latest: {
-      base: "SauceLabs",
-      browserName: "safari",
-      platform: "ios",
-      device: "iPhone X Simulator",
-      version: "13.0"
-    },
     sl_android_9: {
       base: "SauceLabs",
       browserName: "chrome",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "trix",
-  "version": "2.1.12",
+  "version": "2.1.13",
   "description": "A rich text editor for everyday writing",
   "main": "dist/trix.umd.min.js",
   "module": "dist/trix.esm.min.js",

src/test/system.js

@@ -15,6 +15,7 @@ import "test/system/html_replacement_test"
 import "test/system/installation_process_test"
 import "test/system/level_2_input_test"
 import "test/system/list_formatting_test"
+import "test/system/morphing_test"
 import "test/system/mutation_input_test"
 import "test/system/pasting_test"
 import "test/system/set_selected_range_test"

src/test/system/morphing_test.js

@@ -0,0 +1,36 @@
+import { assert, test, testGroup } from "test/test_helper"
+import { nextFrame } from "../test_helpers/timing_helpers"
+
+testGroup("morphing with internal toolbar", { template: "editor_empty" }, () => {
+  test("removing the 'connected' attribute will reset the editor and recreate toolbar", async () => {
+    const element = getEditorElement()
+
+    assert.ok(element.hasAttribute("connected"))
+
+    const originalToolbar = element.toolbarElement
+    element.toolbarElement.remove()
+    element.removeAttribute("toolbar")
+    element.removeAttribute("connected")
+    await nextFrame()
+
+    assert.ok(element.hasAttribute("connected"))
+    assert.ok(element.toolbarElement)
+    assert.notEqual(originalToolbar, element.toolbarElement)
+  })
+})
+
+testGroup("morphing with external toolbar", { template: "editor_with_toolbar_and_input" }, () => {
+  test("removing the 'connected' attribute will reset the editor leave the toolbar untouched", async () => {
+    const element = getEditorElement()
+
+    assert.ok(element.hasAttribute("connected"))
+
+    const originalToolbar = element.toolbarElement
+    element.removeAttribute("connected")
+    await nextFrame()
+
+    assert.ok(element.hasAttribute("connected"))
+    assert.ok(element.toolbarElement)
+    assert.equal(originalToolbar, element.toolbarElement)
+  })
+})

src/test/unit.js

@@ -4,6 +4,7 @@ import "test/unit/block_test"
 import "test/unit/composition_test"
 import "test/unit/document_test"
 import "test/unit/document_view_test"
+import "test/unit/helpers/custom_elements_test"
 import "test/unit/html_parser_test"
 import "test/unit/html_sanitizer_test"
 import "test/unit/location_mapper_test"

src/test/unit/helpers/custom_elements_test.js

@@ -0,0 +1,55 @@
+import { assert, test, testGroup } from "test/test_helper"
+import { installDefaultCSSForTagName, makeElement } from "trix/core/helpers"
+
+let meta = null
+
+const insertMeta = (attributes) => {
+  meta = makeElement("meta", attributes)
+  document.head.append(meta)
+}
+
+const installDefaultCSS = (tagName, css) => {
+  installDefaultCSSForTagName(tagName, css)
+
+  return document.querySelector(`style[data-tag-name=${tagName}]`)
+}
+
+const teardown = () => meta.remove()
+
+testGroup("Helpers: Custom Elements", { teardown }, () => {
+  test("reads from meta[name=csp-nonce][content]", () => {
+    insertMeta({ name: "csp-nonce", content: "abc123" })
+
+    const style = installDefaultCSS("trix-element", "trix-element { display: block; }")
+
+    assert.equal(style.getAttribute("nonce"), "abc123")
+    assert.equal(style.innerHTML, "trix-element { display: block; }")
+  })
+
+  test("reads from meta[name=trix-csp-nonce][content]", () => {
+    insertMeta({ name: "trix-csp-nonce", content: "abc123" })
+
+    const style = installDefaultCSS("trix-element", "trix-element { display: block; }")
+
+    assert.equal(style.getAttribute("nonce"), "abc123")
+    assert.equal(style.innerHTML, "trix-element { display: block; }")
+  })
+
+  test("reads from meta[name=csp-nonce][nonce]", () => {
+    insertMeta({ name: "csp-nonce", nonce: "abc123" })
+
+    const style = installDefaultCSS("trix-element", "trix-element { display: block; }")
+
+    assert.equal(style.getAttribute("nonce"), "abc123")
+    assert.equal(style.innerHTML, "trix-element { display: block; }")
+  })
+
+  test("reads from meta[name=trix-csp-nonce][nonce]", () => {
+    insertMeta({ name: "trix-csp-nonce", nonce: "abc123" })
+
+    const style = installDefaultCSS("trix-element", "trix-element { display: block; }")
+
+    assert.equal(style.getAttribute("nonce"), "abc123")
+    assert.equal(style.innerHTML, "trix-element { display: block; }")
+  })
+})

src/trix/elements/trix_editor_element.js

@@ -348,6 +348,8 @@ class LegacyDelegate {
 export default class TrixEditorElement extends HTMLElement {
   static formAssociated = "ElementInternals" in window
 
+  static observedAttributes = [ "connected" ]
+
   #delegate
 
   constructor() {
@@ -410,9 +412,9 @@ export default class TrixEditorElement extends HTMLElement {
     } else if (this.parentNode) {
       const toolbarId = `trix-toolbar-${this.trixId}`
       this.setAttribute("toolbar", toolbarId)
-      const element = makeElement("trix-toolbar", { id: toolbarId })
-      this.parentNode.insertBefore(element, this)
-      return element
+      this.internalToolbar = makeElement("trix-toolbar", { id: toolbarId })
+      this.parentNode.insertBefore(this.internalToolbar, this)
+      return this.internalToolbar
     } else {
       return undefined
     }
@@ -453,6 +455,14 @@ export default class TrixEditorElement extends HTMLElement {
     this.editor?.loadHTML(this.defaultValue)
   }
 
+  // Element callbacks
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "connected" && this.isConnected && oldValue != null && oldValue !== newValue) {
+      requestAnimationFrame(() => this.reconnect())
+    }
+  }
+
   // Controller delegate methods
 
   notify(message, data) {
@@ -485,13 +495,27 @@ export default class TrixEditorElement extends HTMLElement {
       }
       this.editorController.registerSelectionManager()
       this.#delegate.connectedCallback()
+
+      this.toggleAttribute("connected", true)
       autofocus(this)
     }
   }
 
   disconnectedCallback() {
     this.editorController?.unregisterSelectionManager()
     this.#delegate.disconnectedCallback()
+    this.toggleAttribute("connected", false)
+  }
+
+  reconnect() {
+    this.removeInternalToolbar()
+    this.disconnectedCallback()
+    this.connectedCallback()
+  }
+
+  removeInternalToolbar() {
+    this.internalToolbar?.remove()
+    this.internalToolbar = null
   }
 
   // Form support