diff --git a/README.md b/README.md index 960f7cc2a..f1ea10da9 100644 --- a/README.md +++ b/README.md @@ -181,7 +181,18 @@ To populate a `` with stored content, include that content in the a ``` -Always use an associated input element to safely populate an editor. Trix won’t load any HTML content inside a `` tag. +Use an associated input element to initially populate an editor. When an associated input element is absent, Trix will safely sanitize then load any HTML content inside a `` tag. + +```html +
+ Editor content goes here +
+``` + +> [!WARNING] +> When a `` element initially connects with both HTML content *and* +> an associated input element, Trix will *always* disregard the HTML content and +> load its initial content from the associated input element. ## Validating the Editor diff --git a/action_text-trix/app/assets/javascripts/trix.js b/action_text-trix/app/assets/javascripts/trix.js index 80bd48fc1..5a88a0f33 100644 --- a/action_text-trix/app/assets/javascripts/trix.js +++ b/action_text-trix/app/assets/javascripts/trix.js @@ -13720,6 +13720,7 @@ $\ triggerEvent("trix-before-initialize", { onElement: this }); + this.defaultValue = this.inputElement ? this.inputElement.value : this.innerHTML; if (!this.hasAttribute("input") && this.parentNode && this.willCreateInput) { const inputId = "trix-input-".concat(this.trixId); this.setAttribute("input", inputId); @@ -13731,7 +13732,7 @@ $\ } this.editorController = new EditorController({ editorElement: this, - html: this.defaultValue = this.value + html: this.defaultValue }); requestAnimationFrame(() => triggerEvent("trix-initialize", { onElement: this diff --git a/src/test/system/installation_process_test.js b/src/test/system/installation_process_test.js index fc6195fbd..5c3dfc6b7 100644 --- a/src/test/system/installation_process_test.js +++ b/src/test/system/installation_process_test.js @@ -1,6 +1,6 @@ import EditorController from "trix/controllers/editor_controller" -import { assert, test, testGroup } from "test/test_helper" +import { assert, setFixtureHTML, test, testGroup } from "test/test_helper" import { nextFrame } from "../test_helpers/timing_helpers" testGroup("Installation process", { template: "editor_html" }, () => { @@ -62,3 +62,38 @@ testGroup("Installation process with specified elements", { template: "editor_wi assert.equal(editorElement.value, "
Hello world
") }) }) + +testGroup("Installation process with content and without specified elements", () => { + test("loads the trix-editor element's innerHTML on boot", async () => { + await setFixtureHTML("
Hello world
") + + const editorElement = getEditorElement() + + assert.equal(1, editorElement.childElementCount, "sanitzes HTML") + assert.equal(editorElement.value, "
Hello world
") + assert.equal(editorElement.value, editorElement.inputElement.value) + }) + + test("sanitizes the trix-editor element's innerHTML on boot", async () => { + await setFixtureHTML("") + + const editorElement = getEditorElement() + + assert.equal(0, editorElement.querySelectorAll("script").length, "sanitzes HTML") + assert.equal(editorElement.value, "") + assert.equal(editorElement.value, editorElement.inputElement.value) + }) +}) + +testGroup("Installation process with content and input", () => { + test("prioritzes loading its initial state from the input over the content", async () => { + await setFixtureHTML(` +
from editor
+ + `) + + const editorElement = getEditorElement() + + assert.equal(editorElement.value, "
from input
") + }) +}) diff --git a/src/trix/elements/trix_editor_element.js b/src/trix/elements/trix_editor_element.js index 38f97eb75..d2c6b8729 100644 --- a/src/trix/elements/trix_editor_element.js +++ b/src/trix/elements/trix_editor_element.js @@ -563,6 +563,7 @@ export default class TrixEditorElement extends HTMLElement { if (!this.editorController) { triggerEvent("trix-before-initialize", { onElement: this }) + this.defaultValue = this.inputElement ? this.inputElement.value : this.innerHTML if (!this.hasAttribute("input") && this.parentNode && this.willCreateInput) { const inputId = `trix-input-${this.trixId}` this.setAttribute("input", inputId) @@ -571,7 +572,7 @@ export default class TrixEditorElement extends HTMLElement { } this.editorController = new EditorController({ editorElement: this, - html: this.defaultValue = this.value + html: this.defaultValue }) requestAnimationFrame(() => triggerEvent("trix-initialize", { onElement: this })) }