hello {
+ await setFixtureHTML("
")
+
+ const element = getEditorElement()
+
+ assert.equal(element.value, "")
+ })
+
+ testIf(TrixEditorElement.formAssociated, "adds [disabled] attribute based on .disabled property", async () => {
+ await setFixtureHTML("
")
+
+ const editor = getEditorElement()
+
+ editor.disabled = true
+
+ assert.equal(editor.hasAttribute("disabled"), true, "adds [disabled] attribute")
+
+ editor.disabled = false
+
+ assert.equal(editor.hasAttribute("disabled"), false, "removes [disabled] attribute")
+ })
+
+ testIf(TrixEditorElement.formAssociated, "removes [contenteditable] and when editor element has [disabled]", async () => {
+ await setFixtureHTML("
")
+
+ const editor = getEditorElement()
+
+ editor.setAttribute("disabled", "")
+
+ assert.equal(editor.matches(":disabled"), true, "sets :disabled CSS pseudostate")
+ assert.equal(editor.disabled, true, "exposes [disabled] attribute as .disabled property")
+ assert.equal(editor.hasAttribute("contenteditable"), false, "removes [contenteditable] attribute")
+
+ editor.removeAttribute("disabled")
+
+ assert.equal(editor.matches(":disabled"), false, "removes sets :disabled pseudostate")
+ assert.equal(editor.disabled, false, "updates .disabled property")
+ assert.equal(editor.hasAttribute("contenteditable"), true, "adds [contenteditable] attribute")
+ })
+
+ testIf(TrixEditorElement.formAssociated, "removes [contenteditable] when editor element is :disabled", async () => {
+ await setFixtureHTML("
", "fieldset")
+
+ const editor = getEditorElement()
+ const fieldset = editor.closest("fieldset")
+
+ fieldset.disabled = true
+
+ assert.equal(editor.matches(":disabled"), true, "sets :disabled CSS pseudostate")
+ assert.equal(editor.disabled, true, "infers disabled state from ancestor")
+ assert.equal(editor.hasAttribute("disabled"), false, "does not set [disabled] attribute")
+ assert.equal(editor.hasAttribute("contenteditable"), false, "removes [contenteditable] attribute")
+
+ fieldset.disabled = false
+
+ assert.equal(editor.matches(":disabled"), false, "removes sets :disabled pseudostate")
+ assert.equal(editor.disabled, false, "updates .disabled property")
+ assert.equal(editor.hasAttribute("disabled"), false, "does not set [disabled] attribute")
+ assert.equal(editor.hasAttribute("contenteditable"), true, "adds [contenteditable] attribute")
+ })
+
+ testIf(TrixEditorElement.formAssociated, "does not receive focus when :disabled", async () => {
+ await setFixtureHTML(`
+
+
+ `)
+
+ const activeEditor = document.getElementById("active")
+ const disabledEditor = document.getElementById("disabled")
+
+ activeEditor.focus()
+
+ assert.equal(activeEditor, document.activeElement)
+
+ disabledEditor.focus()
+
+ assert.equal(activeEditor, document.activeElement, "disabled editor does not receive focus")
+ })
+
+ testIf(TrixEditorElement.formAssociated, "disabled editor does not encode its value when the form is submitted", async () => {
+ await setFixtureHTML(`
+
+ `)
+
+ const editor = getEditorElement()
+
+ editor.value = "Hello world"
+
+ assert.deepEqual(Array.from(new FormData(editor.form).values()), [], "does not write to FormData")
+ })
+})
diff --git a/src/test/system/html_loading_test.js b/src/test/system/html_loading_test.js
new file mode 100644
index 000000000..199c29b44
--- /dev/null
+++ b/src/test/system/html_loading_test.js
@@ -0,0 +1,118 @@
+import { TEST_IMAGE_URL, assert, expectDocument, test, testGroup } from "test/test_helper"
+import { OBJECT_REPLACEMENT_CHARACTER } from "trix/constants"
+import { delay } from "../test_helpers/timing_helpers"
+
+testGroup("HTML loading", () => {
+ testGroup("inline elements", { template: "editor_with_styled_content" }, () => {
+ const cases = {
+ "BR before block element styled otherwise": {
+ html: `a
`,
+ expectedDocument: `a\n${OBJECT_REPLACEMENT_CHARACTER}\n`,
+ },
+
+ "BR in text before block element styled otherwise": {
+ html: `
a
b
`,
+ expectedDocument: `a\nb${OBJECT_REPLACEMENT_CHARACTER}\n`,
+ },
+ }
+
+ for (const name in cases) {
+ const details = cases[name]
+ test(name, () => {
+ getEditor().loadHTML(details.html)
+ expectDocument(details.expectedDocument)
+ })
+ }
+ })
+
+ testGroup("bold elements", { template: "editor_with_bold_styles" }, () => {
+ test("
with font-weight: 500", () => {
+ getEditor().loadHTML("a")
+ assert.textAttributes([ 0, 1 ], { bold: true })
+ expectDocument("a\n")
+ })
+
+ test(" with font-weight: 600", () => {
+ getEditor().loadHTML("a")
+ assert.textAttributes([ 0, 1 ], { bold: true })
+ expectDocument("a\n")
+ })
+
+ test(" with font-weight: bold", () => {
+ getEditor().loadHTML("a")
+ assert.textAttributes([ 0, 1 ], { bold: true })
+ expectDocument("a\n")
+ })
+ })
+
+ testGroup("styled block elements", { template: "editor_with_block_styles" }, () => {
+ test(" in with font-style: italic", () => {
+ getEditor().loadHTML("ab
")
+ assert.textAttributes([ 0, 1 ], {})
+ assert.textAttributes([ 1, 2 ], { italic: true })
+ assert.blockAttributes([ 0, 2 ], [ "quote" ])
+ expectDocument("ab\n")
+ })
+
+ test(" in with font-weight: bold", () => {
+ getEditor().loadHTML("")
+ assert.textAttributes([ 0, 1 ], {})
+ assert.textAttributes([ 1, 2 ], { bold: true })
+ assert.blockAttributes([ 0, 2 ], [ "bulletList", "bullet" ])
+ expectDocument("ab\n")
+ })
+
+ test("newline in with font-weight: bold", () => {
+ getEditor().loadHTML("")
+ assert.textAttributes([ 0, 2 ], {})
+ assert.blockAttributes([ 0, 2 ], [ "bulletList", "bullet" ])
+ expectDocument("a\nb\n")
+ })
+ })
+
+ testGroup("in a table", { template: "editor_in_table" }, () => {
+ test("block elements", () => {
+ getEditor().loadHTML("a
b
")
+ assert.blockAttributes([ 0, 2 ], [ "heading1" ])
+ assert.blockAttributes([ 2, 4 ], [ "quote" ])
+ expectDocument("a\nb\n")
+ })
+ })
+
+ testGroup("images", { template: "editor_empty" }, () => {
+ test("without dimensions", async () => {
+ getEditor().loadHTML(``)
+ await delay(50)
+
+ const attachment = getDocument().getAttachments()[0]
+ const image = getEditorElement().querySelector("img")
+ assert.equal(attachment.getWidth(), 1)
+ assert.equal(attachment.getHeight(), 1)
+ assert.equal(image.getAttribute("width"), "1")
+ assert.equal(image.getAttribute("height"), "1")
+ expectDocument(`${OBJECT_REPLACEMENT_CHARACTER}\n`)
+ })
+
+ test("with dimensions", async () => {
+ getEditor().loadHTML(``)
+ await delay(50)
+
+ const attachment = getDocument().getAttachments()[0]
+ const image = getEditorElement().querySelector("img")
+ assert.equal(attachment.getWidth(), 10)
+ assert.equal(attachment.getHeight(), 20)
+ assert.equal(image.getAttribute("width"), "10")
+ assert.equal(image.getAttribute("height"), "20")
+ expectDocument(`${OBJECT_REPLACEMENT_CHARACTER}\n`)
+ })
+ })
+
+ testGroup("text after closing tag", { template: "editor_empty" }, () => {
+ test("parses text as separate block", () => {
+ getEditor().loadHTML("a
b")
+ assert.blockAttributes([ 0, 2 ], [ "heading1" ])
+ assert.blockAttributes([ 2, 4 ], [])
+ expectDocument("a\nb\n")
+ })
+ })
+})
diff --git a/src/test/system/html_reparsing_test.js b/src/test/system/html_reparsing_test.js
new file mode 100644
index 000000000..49b5d2b1d
--- /dev/null
+++ b/src/test/system/html_reparsing_test.js
@@ -0,0 +1,28 @@
+import { assert, expectDocument, test, testGroup } from "test/test_helper"
+import { nextFrame } from "../test_helpers/timing_helpers"
+
+testGroup("HTML Reparsing", { template: "editor_empty" }, () => {
+ test("mutation resulting in identical blocks", async () => {
+ const element = getEditorElement()
+ element.editor.loadHTML("")
+ await nextFrame()
+ element.querySelector("li").textContent = "b"
+ await nextFrame()
+ assert.blockAttributes([ 0, 1 ], [ "bulletList", "bullet" ])
+ assert.blockAttributes([ 2, 3 ], [ "bulletList", "bullet" ])
+ assert.equal(element.value, "")
+ expectDocument("b\nb\n")
+ })
+
+ test("mutation resulting in identical pieces", async () => {
+ const element = getEditorElement()
+ element.editor.loadHTML("a b
")
+ await nextFrame()
+ element.querySelector("strong").textContent = "b"
+ await nextFrame()
+ assert.textAttributes([ 0, 1 ], { bold: true })
+ assert.textAttributes([ 2, 3 ], { bold: true })
+ assert.equal(element.value, "b b
")
+ expectDocument("b b\n")
+ })
+})
diff --git a/src/test/system/html_replacement_test.js b/src/test/system/html_replacement_test.js
new file mode 100644
index 000000000..5640d821f
--- /dev/null
+++ b/src/test/system/html_replacement_test.js
@@ -0,0 +1,125 @@
+import * as config from "trix/config"
+
+import { assert, expectDocument, testGroup, testIf, triggerEvent } from "test/test_helper"
+import { nextFrame } from "../test_helpers/timing_helpers"
+
+const test = function() {
+ testIf(config.input.getLevel() === 0, ...arguments)
+}
+
+testGroup("Level 0 input: HTML replacement", () =>
+ testGroup("deleting with command+backspace", { template: "editor_empty" }, () => {
+ test("from the end of a line", async () => {
+ getEditor().loadHTML("a
b
c
")
+ getSelectionManager().setLocationRange({ index: 1, offset: 1 })
+ await pressCommandBackspace({ replaceText: "b" })
+ assert.locationRange({ index: 1, offset: 0 })
+ assert.blockAttributes([ 0, 2 ], [])
+ assert.blockAttributes([ 2, 3 ], [ "quote" ])
+ assert.blockAttributes([ 3, 5 ], [])
+ expectDocument("a\n\nc\n")
+ })
+
+ test("in the first block", async () => {
+ getEditor().loadHTML("a
b
")
+ getSelectionManager().setLocationRange({ index: 0, offset: 1 })
+ await pressCommandBackspace({ replaceText: "a" })
+ assert.locationRange({ index: 0, offset: 0 })
+ assert.blockAttributes([ 0, 1 ], [])
+ assert.blockAttributes([ 1, 3 ], [ "quote" ])
+ expectDocument("\nb\n")
+ })
+
+ test("from the middle of a line", async () => {
+ getEditor().loadHTML("a
bc
d
")
+ getSelectionManager().setLocationRange({ index: 1, offset: 1 })
+ await pressCommandBackspace({ replaceText: "b" })
+ assert.locationRange({ index: 1, offset: 0 })
+ assert.blockAttributes([ 0, 2 ], [])
+ assert.blockAttributes([ 2, 4 ], [ "quote" ])
+ assert.blockAttributes([ 4, 6 ], [])
+ expectDocument("a\nc\nd\n")
+ })
+
+ test("from the middle of a line in a multi-line block", async () => {
+ getEditor().loadHTML("a
bc
d
e
")
+ getSelectionManager().setLocationRange({ index: 1, offset: 1 })
+ await pressCommandBackspace({ replaceText: "b" })
+ assert.locationRange({ index: 1, offset: 0 })
+ assert.blockAttributes([ 0, 2 ], [])
+ assert.blockAttributes([ 2, 6 ], [ "quote" ])
+ expectDocument("a\nc\nd\ne\n")
+ })
+
+ test("from the end of a list item", async () => {
+ getEditor().loadHTML("")
+ getSelectionManager().setLocationRange({ index: 1, offset: 1 })
+ await pressCommandBackspace({ replaceText: "b" })
+ assert.locationRange({ index: 1, offset: 0 })
+ assert.blockAttributes([ 0, 2 ], [ "bulletList", "bullet" ])
+ assert.blockAttributes([ 2, 4 ], [ "bulletList", "bullet" ])
+ expectDocument("a\n\n")
+ })
+
+ test("a character that is its text node's only data", async () => {
+ getEditor().loadHTML("a
b
c
")
+ getSelectionManager().setLocationRange({ index: 0, offset: 3 })
+ await pressCommandBackspace({ replaceText: "b" })
+ assert.locationRange({ index: 0, offset: 2 })
+ expectDocument("a\n\nc\n")
+ })
+
+ test("a formatted word", async () => {
+ getEditor().loadHTML("abc
")
+ getSelectionManager().setLocationRange({ index: 0, offset: 4 })
+ await pressCommandBackspace({ replaceElementWithText: "bc" })
+ assert.locationRange({ index: 0, offset: 1 })
+ expectDocument("a\n")
+ })
+ })
+)
+
+const pressCommandBackspace = async ({ replaceText, replaceElementWithText }) => {
+ let previousSibling
+ triggerEvent(document.activeElement, "keydown", { charCode: 0, keyCode: 8, which: 8, metaKey: true })
+ const range = rangy.getSelection().getRangeAt(0)
+
+ if (replaceElementWithText) {
+ const element = getElementWithText(replaceElementWithText)
+ previousSibling = element.previousSibling
+ element.parentNode.removeChild(element)
+ range.collapseAfter(previousSibling)
+ } else {
+ range.findText(replaceText, { direction: "backward" })
+ range.splitBoundaries()
+
+ const node = range.getNodes()[0]
+ previousSibling = node.previousSibling
+ const { nextSibling, parentNode } = node
+
+ if (previousSibling?.nodeType === Node.COMMENT_NODE) {
+ parentNode.removeChild(previousSibling)
+ }
+
+ node.data = ""
+ parentNode.removeChild(node)
+
+ if (!parentNode.hasChildNodes()) {
+ parentNode.appendChild(document.createElement("br"))
+ }
+
+ range.collapseBefore(nextSibling ? nextSibling : parentNode.firstChild)
+ }
+
+ range.select()
+ await nextFrame()
+}
+
+const getElementWithText = function (text) {
+ for (const element of Array.from(document.activeElement.querySelectorAll("*"))) {
+ if (element.innerText === text) {
+ return element
+ }
+ }
+ return null
+}
diff --git a/src/test/system/installation_process_test.js b/src/test/system/installation_process_test.js
new file mode 100644
index 000000000..4ff243720
--- /dev/null
+++ b/src/test/system/installation_process_test.js
@@ -0,0 +1,108 @@
+import EditorController from "trix/controllers/editor_controller"
+
+import { assert, setFixtureHTML, test, testGroup } from "test/test_helper"
+import { nextFrame } from "../test_helpers/timing_helpers"
+
+testGroup("Installation process", { template: "editor_html" }, () => {
+ test("element.editorController", () => {
+ assert.ok(getEditorController() instanceof EditorController)
+ })
+
+ test("creates a contenteditable element", () => assert.ok(getEditorElement()))
+
+ test("loads the initial document", () => {
+ assert.equal(getEditorElement().textContent, "Hello world")
+ })
+
+ test("sets value property", async () => {
+ await nextFrame()
+ assert.equal(getEditorElement().value, "Hello world
")
+ })
+})
+
+testGroup("Installation process without specified elements", { template: "editor_empty" }, () =>
+ test("creates identified toolbar and input elements", () => {
+ const editorElement = getEditorElement()
+
+ const toolbarId = editorElement.getAttribute("toolbar")
+ assert.ok(/trix-toolbar-\d+/.test(toolbarId), `toolbar id not assert.ok ${JSON.stringify(toolbarId)}`)
+ const toolbarElement = document.getElementById(toolbarId)
+ assert.ok(toolbarElement, "toolbar element not assert.ok")
+ assert.equal(editorElement.toolbarElement, toolbarElement)
+
+ const inputId = editorElement.getAttribute("input")
+ assert.ok(/trix-input-\d+/.test(inputId), `input id not assert.ok ${JSON.stringify(inputId)}`)
+ const inputElement = document.getElementById(inputId)
+ assert.ok(inputElement, "input element not assert.ok")
+ assert.equal(editorElement.inputElement, inputElement)
+ })
+)
+
+testGroup("Installation process with specified elements", { template: "editor_with_toolbar_and_input" }, () => {
+ test("uses specified elements", () => {
+ const editorElement = getEditorElement()
+ assert.equal(editorElement.toolbarElement, document.getElementById("my_toolbar"))
+ assert.equal(editorElement.inputElement, document.getElementById("my_input"))
+ 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)
+
+ const { parentElement } = originalElement
+ parentElement.removeChild(originalElement)
+ parentElement.appendChild(clonedElement)
+
+ await nextFrame()
+
+ const editorElement = getEditorElement()
+ assert.equal(editorElement.toolbarElement, document.getElementById("my_toolbar"))
+ assert.equal(editorElement.inputElement, document.getElementById("my_input"))
+ 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/test/system/level_2_input_test.js b/src/test/system/level_2_input_test.js
new file mode 100644
index 000000000..9dd6de8af
--- /dev/null
+++ b/src/test/system/level_2_input_test.js
@@ -0,0 +1,349 @@
+import * as config from "trix/config"
+import { OBJECT_REPLACEMENT_CHARACTER } from "trix/constants"
+
+import {
+ assert,
+ clickToolbarButton,
+ expectDocument,
+ insertNode,
+ insertString,
+ isToolbarButtonActive,
+ selectNode,
+ testGroup,
+ testIf,
+ triggerEvent,
+ triggerInputEvent,
+ typeCharacters,
+} from "test/test_helper"
+import { delay, nextFrame } from "../test_helpers/timing_helpers"
+
+const test = function() {
+ testIf(config.input.getLevel() === 2, ...arguments)
+}
+
+const testOptions = {
+ template: "editor_empty",
+ setup() {
+ addEventListener("beforeinput", recordInputEvent, true)
+ addEventListener("input", recordInputEvent, true)
+ },
+ teardown() {
+ removeEventListener("beforeinput", recordInputEvent, true)
+ removeEventListener("input", recordInputEvent, true)
+ },
+}
+
+let inputEvents = []
+
+const recordInputEvent = function (event) {
+ // Not all browsers dispatch "beforeinput" event when calling execCommand() so
+ // we manually dispatch a synthetic one. If a second one arrives, ignore it.
+ if (event.type === "beforeinput" && inputEvents.length === 1 && inputEvents[0].type === "beforeinput") {
+ event.stopImmediatePropagation()
+ } else {
+ const { type, inputType, data } = event
+ inputEvents.push({ type, inputType, data })
+ }
+}
+
+// Borrowed from https://github.com/web-platform-tests/wpt/blob/master/input-events/input-events-exec-command.html
+const performInputTypeUsingExecCommand = async (command, { inputType, data }) => {
+ inputEvents = []
+
+ await nextFrame()
+
+ const isInsertParagraph = inputType === "insertParagraph"
+
+ triggerInputEvent(document.activeElement, "beforeinput", { inputType, data })
+
+ // See `shouldRenderInmmediatelyToDealWithIOSDictation` to deal with iOS 18+ dictation bug.
+ if (!isInsertParagraph) {
+ document.execCommand(command, false, data)
+ assert.equal(inputEvents[1].type, "input")
+ }
+
+ assert.equal(inputEvents.length, isInsertParagraph ? 1 : 2)
+ assert.equal(inputEvents[0].type, "beforeinput")
+ assert.equal(inputEvents[0].inputType, inputType)
+ assert.equal(inputEvents[0].data, data)
+
+ await nextFrame()
+ await nextFrame()
+}
+
+testGroup("Level 2 Input", testOptions, () => {
+ test("insertText", async () => {
+ await performInputTypeUsingExecCommand("insertText", { inputType: "insertText", data: "abc" })
+ expectDocument("abc\n")
+ })
+
+ test("insertOrderedList", async () => {
+ insertString("a\nb")
+ await performInputTypeUsingExecCommand("insertOrderedList", { inputType: "insertOrderedList" })
+ assert.blockAttributes([ 0, 2 ], [])
+ assert.blockAttributes([ 2, 4 ], [ "numberList", "number" ])
+ assert.ok(isToolbarButtonActive({ attribute: "number" }))
+ expectDocument("a\nb\n")
+ })
+
+ test("insertUnorderedList", async () => {
+ insertString("a\nb")
+ await performInputTypeUsingExecCommand("insertUnorderedList", { inputType: "insertUnorderedList" })
+ assert.blockAttributes([ 0, 2 ], [])
+ assert.blockAttributes([ 2, 4 ], [ "bulletList", "bullet" ])
+ assert.ok(isToolbarButtonActive({ attribute: "bullet" }))
+ expectDocument("a\nb\n")
+ })
+
+ test("insertLineBreak", async () => {
+ await clickToolbarButton({ attribute: "quote" })
+ insertString("abc")
+ await performInputTypeUsingExecCommand("insertLineBreak", { inputType: "insertLineBreak" })
+ await performInputTypeUsingExecCommand("insertLineBreak", { inputType: "insertLineBreak" })
+ assert.blockAttributes([ 0, 6 ], [ "quote" ])
+ expectDocument("abc\n\n\n")
+ })
+
+ test("insertParagraph", async () => {
+ await clickToolbarButton({ attribute: "quote" })
+ insertString("abc")
+ await performInputTypeUsingExecCommand("insertParagraph", { inputType: "insertParagraph" })
+ await performInputTypeUsingExecCommand("insertParagraph", { inputType: "insertParagraph" })
+
+ assert.blockAttributes([ 0, 4 ], [ "quote" ])
+ assert.blockAttributes([ 4, 5 ], [])
+ expectDocument("abc\n\n")
+ })
+
+ test("formatBold", async () => {
+ insertString("abc")
+ getComposition().setSelectedRange([ 1, 2 ])
+ await performInputTypeUsingExecCommand("bold", { inputType: "formatBold" })
+ assert.textAttributes([ 0, 1 ], {})
+ assert.textAttributes([ 1, 2 ], { bold: true })
+ assert.textAttributes([ 2, 3 ], {})
+ expectDocument("abc\n")
+ })
+
+ test("formatItalic", async () => {
+ insertString("abc")
+ getComposition().setSelectedRange([ 1, 2 ])
+ await performInputTypeUsingExecCommand("italic", { inputType: "formatItalic" })
+ assert.textAttributes([ 0, 1 ], {})
+ assert.textAttributes([ 1, 2 ], { italic: true })
+ assert.textAttributes([ 2, 3 ], {})
+ expectDocument("abc\n")
+ })
+
+ test("formatStrikeThrough", async () => {
+ insertString("abc")
+ getComposition().setSelectedRange([ 1, 2 ])
+ await performInputTypeUsingExecCommand("strikeThrough", { inputType: "formatStrikeThrough" })
+ assert.textAttributes([ 0, 1 ], {})
+ assert.textAttributes([ 1, 2 ], { strike: true })
+ assert.textAttributes([ 2, 3 ], {})
+ expectDocument("abc\n")
+ })
+
+ // https://input-inspector.now.sh/profiles/hVXS1cHYFvc2EfdRyTWQ
+ test("correcting a misspelled word", async () => {
+ insertString("onr")
+ getComposition().setSelectedRange([ 0, 3 ])
+ await nextFrame()
+
+ const inputType = "insertReplacementText"
+ const dataTransfer = createDataTransfer({ "text/plain": "one" })
+
+ const targetRange = document.createRange()
+ const textNode = getEditorElement().firstElementChild.lastChild
+ targetRange.setStart(textNode, 0)
+ targetRange.setEnd(textNode, 3)
+
+ const event = createEvent("beforeinput", { inputType, dataTransfer, getTargetRanges: () => [ targetRange ] })
+ document.activeElement.dispatchEvent(event)
+
+ await nextFrame()
+ expectDocument("one\n")
+ })
+
+ // https://input-inspector.now.sh/profiles/XsZVwKtFxakwnsNs0qnX
+ test("correcting a misspelled word in Safari", async () => {
+ insertString("onr")
+ getComposition().setSelectedRange([ 0, 3 ])
+ await nextFrame()
+
+ const inputType = "insertText"
+ const dataTransfer = createDataTransfer({ "text/plain": "one", "text/html": "one" })
+ const event = createEvent("beforeinput", { inputType, dataTransfer })
+ document.activeElement.dispatchEvent(event)
+
+ await nextFrame()
+ expectDocument("one\n")
+ })
+
+ // https://input-inspector.now.sh/profiles/yZlsrfG93QMzp2oyr0BE
+ test("deleting the last character in a composed word on Android", async () => {
+ insertString("c")
+ const element = getEditorElement()
+ const textNode = element.firstChild.lastChild
+ await selectNode(textNode)
+ triggerInputEvent(element, "beforeinput", { inputType: "insertCompositionText", data: "" })
+ triggerEvent(element, "compositionend", { data: "" })
+ await nextFrame()
+ expectDocument("\n")
+ })
+
+ test("pasting a file", async () => {
+ const file = await createFile()
+ const clipboardData = createDataTransfer({ Files: [ file ] })
+ const dataTransfer = createDataTransfer({ Files: [ file ] })
+ await paste({ clipboardData, dataTransfer })
+
+ const attachments = getDocument().getAttachments()
+ assert.equal(attachments.length, 1)
+ assert.equal(attachments[0].getFilename(), file.name)
+ expectDocument(`${OBJECT_REPLACEMENT_CHARACTER}\n`)
+ })
+
+ // "insertFromPaste InputEvent missing pasted files in dataTransfer"
+ // - https://bugs.webkit.org/show_bug.cgi?id=194921
+ test("pasting a file in Safari", async () => {
+ const file = await createFile()
+
+ const clipboardData = createDataTransfer({ Files: [ file ] })
+ const dataTransfer = createDataTransfer({ "text/html": `
` })
+
+ await paste({ clipboardData, dataTransfer })
+ const attachments = getDocument().getAttachments()
+ assert.equal(attachments.length, 1)
+ assert.equal(attachments[0].getFilename(), file.name)
+ expectDocument(`${OBJECT_REPLACEMENT_CHARACTER}\n`)
+ })
+
+ // "insertFromPaste InputEvent missing text/uri-list in dataTransfer for pasted links"
+ // - https://bugs.webkit.org/show_bug.cgi?id=196702
+ test("pasting a link in Safari", async () => {
+ await createFile()
+ const url = "https://bugs.webkit.org"
+ const text = "WebKit Bugzilla"
+ const clipboardData = createDataTransfer({ URL: url, "text/uri-list": url, "text/plain": text })
+ const dataTransfer = createDataTransfer({ "text/html": `${text}`, "text/plain": text })
+ await paste({ clipboardData, dataTransfer })
+ assert.textAttributes([ 0, url.length ], { href: url })
+ expectDocument(`${url}\n`)
+ })
+
+ // Pastes from MS Word include an image of the copied text 🙃
+ // https://input-inspector.now.sh/profiles/QWDITsV60dpEVl1SOZg8
+ test("pasting text from MS Word", async () => {
+ const file = await createFile()
+ const dataTransfer = createDataTransfer({
+ "text/html": `
+
+ abc
+
+ `,
+ "text/plain": "abc",
+ Files: [ file ],
+ })
+
+ await paste({ dataTransfer })
+ const attachments = getDocument().getAttachments()
+ assert.equal(attachments.length, 0)
+ expectDocument("abc\n")
+ })
+
+ // "beforeinput" event is not fired for Paste and Match Style operations
+ // - https://bugs.chromium.org/p/chromium/issues/detail?id=934448
+ test("Paste and Match Style in Chrome", async () => {
+ await typeCharacters("a\n\n")
+ const clipboardData = createDataTransfer({ "text/plain": "b\n\nc" })
+ const pasteEvent = createEvent("paste", { clipboardData })
+
+ if (document.activeElement.dispatchEvent(pasteEvent)) {
+ const node = document.createElement("div")
+ node.innerHTML = "b
c
"
+ await insertNode(node)
+ } else {
+ await nextFrame()
+ }
+ expectDocument("a\n\nb\n\nc\n")
+ })
+
+ // Firefox provides element-level target ranges (startContainer: )
+ // rather than text-node-level ranges for deleteContentBackward. When the
+ // container is an element and offset is 0, the location mapper must count
+ // the block-start comment before breaking, or the block index will be wrong
+ // and the bullet list structure gets corrupted.
+ // - https://github.com/basecamp/trix/issues/1259
+ test("deleteContentBackward with element-level target range in a bullet list (Firefox)", async () => {
+ await clickToolbarButton({ attribute: "bullet" })
+ insertString("foo bar")
+ getComposition().setSelectedRange([ 0, 3 ])
+ await nextFrame()
+
+ // Simulate Firefox's target range: startContainer is the element
+ // (not the text node), startOffset 0, endContainer is the text node, endOffset 3
+ const element = getEditorElement()
+ const li = element.querySelector("li")
+ const textNode = li.lastChild
+
+ const targetRange = document.createRange()
+ targetRange.setStart(li, 0)
+ targetRange.setEnd(textNode, 3)
+
+ const event = createEvent("beforeinput", {
+ inputType: "deleteContentBackward",
+ getTargetRanges: () => [ targetRange ],
+ })
+ document.activeElement.dispatchEvent(event)
+
+ await nextFrame()
+ await nextFrame()
+
+ assert.blockAttributes([ 0, 5 ], [ "bulletList", "bullet" ])
+ expectDocument(" bar\n")
+ })
+})
+
+const createFile = () => {
+ return new Promise((resolve) => {
+ const canvas = document.createElement("canvas")
+ canvas.toBlob((file) => {
+ file.name = "image.png"
+ resolve(file)
+ })
+ })
+}
+
+const createDataTransfer = function (data = {}) {
+ return {
+ types: Object.keys(data),
+ files: data.Files || [],
+ getData: (type) => data[type],
+ }
+}
+
+const createEvent = function (type, properties = {}) {
+ const event = document.createEvent("Events")
+ event.initEvent(type, true, true)
+ for (const key in properties) {
+ const value = properties[key]
+ Object.defineProperty(event, key, { value })
+ }
+ return event
+}
+
+const paste = async (param = {}) => {
+ const { dataTransfer, clipboardData } = param
+ const pasteEvent = createEvent("paste", { clipboardData: clipboardData || dataTransfer })
+ const inputEvent = createEvent("beforeinput", { inputType: "insertFromPaste", dataTransfer })
+ if (document.activeElement.dispatchEvent(pasteEvent)) {
+ document.activeElement.dispatchEvent(inputEvent)
+ }
+
+ await delay(60)
+}
diff --git a/src/test/system/list_formatting_test.js b/src/test/system/list_formatting_test.js
new file mode 100644
index 000000000..3d3ab7c05
--- /dev/null
+++ b/src/test/system/list_formatting_test.js
@@ -0,0 +1,118 @@
+import * as config from "trix/config"
+
+import {
+ assert,
+ clickToolbarButton,
+ expectDocument,
+ moveCursor,
+ pressKey,
+ test,
+ testGroup,
+ testIf,
+ triggerEvent,
+ typeCharacters,
+} from "test/test_helper"
+import { nextFrame } from "../test_helpers/timing_helpers"
+
+testGroup("List formatting", { template: "editor_empty" }, () => {
+ test("creating a new list item", async () => {
+ await typeCharacters("a")
+ await clickToolbarButton({ attribute: "bullet" })
+ await typeCharacters("\n")
+ assert.locationRange({ index: 1, offset: 0 })
+ assert.blockAttributes([ 0, 2 ], [ "bulletList", "bullet" ])
+ assert.blockAttributes([ 2, 3 ], [ "bulletList", "bullet" ])
+ })
+
+ test("breaking out of a list", async () => {
+ await typeCharacters("a")
+ await clickToolbarButton({ attribute: "bullet" })
+ await typeCharacters("\n\n")
+ assert.blockAttributes([ 0, 2 ], [ "bulletList", "bullet" ])
+ assert.blockAttributes([ 2, 3 ], [])
+ expectDocument("a\n\n")
+ })
+
+ test("pressing return at the beginning of a non-empty list item", async () => {
+ await clickToolbarButton({ attribute: "bullet" })
+ await typeCharacters("a\nb")
+ await moveCursor("left")
+ await pressKey("return")
+ assert.blockAttributes([ 0, 2 ], [ "bulletList", "bullet" ])
+ assert.blockAttributes([ 2, 3 ], [ "bulletList", "bullet" ])
+ assert.blockAttributes([ 3, 5 ], [ "bulletList", "bullet" ])
+ expectDocument("a\n\nb\n")
+ })
+
+ test("pressing tab increases nesting level, tab+shift decreases nesting level", async () => {
+ await clickToolbarButton({ attribute: "bullet" })
+ await typeCharacters("a")
+ await pressKey("return")
+ await pressKey("tab")
+ await typeCharacters("b")
+ assert.blockAttributes([ 0, 1 ], [ "bulletList", "bullet" ])
+ assert.blockAttributes([ 2, 3 ], [ "bulletList", "bullet", "bulletList", "bullet" ])
+ await nextFrame()
+ // press shift tab
+ triggerEvent(document.activeElement, "keydown", {
+ key: "Tab",
+ charCode: 0,
+ keyCode: 9,
+ which: 9,
+ shiftKey: true,
+ })
+ assert.blockAttributes([ 0, 1 ], [ "bulletList", "bullet" ])
+ assert.blockAttributes([ 2, 3 ], [ "bulletList", "bullet" ])
+ expectDocument("a\nb\n")
+ })
+
+ testIf(config.input.getLevel() === 0, "pressing shift-return at the end of a list item", async () => {
+ await clickToolbarButton({ attribute: "bullet" })
+ await typeCharacters("a")
+ const pressShiftReturn = triggerEvent(document.activeElement, "keydown", {
+ charCode: 0,
+ keyCode: 13,
+ which: 13,
+ shiftKey: true,
+ })
+ assert.notOk(pressShiftReturn) // Assert defaultPrevented
+ assert.blockAttributes([ 0, 2 ], [ "bulletList", "bullet" ])
+ expectDocument("a\n\n")
+ })
+
+ test("pressing delete at the beginning of a non-empty nested list item", async () => {
+ await clickToolbarButton({ attribute: "bullet" })
+ await typeCharacters("a\n")
+ await clickToolbarButton({ action: "increaseNestingLevel" })
+ await typeCharacters("b\n")
+ await clickToolbarButton({ action: "increaseNestingLevel" })
+ await typeCharacters("c")
+ getSelectionManager().setLocationRange({ index: 1, offset: 0 })
+ getComposition().deleteInDirection("backward")
+ getEditorController().render()
+ await nextFrame()
+ assert.blockAttributes([ 0, 2 ], [ "bulletList", "bullet" ])
+ assert.blockAttributes([ 3, 4 ], [ "bulletList", "bullet", "bulletList", "bullet" ])
+ expectDocument("ab\nc\n")
+ })
+
+ test("decreasing list item's level decreases its nested items level too", async () => {
+ await clickToolbarButton({ attribute: "bullet" })
+ await typeCharacters("a\n")
+ await clickToolbarButton({ action: "increaseNestingLevel" })
+ await typeCharacters("b\n")
+ await clickToolbarButton({ action: "increaseNestingLevel" })
+ await typeCharacters("c")
+ getSelectionManager().setLocationRange({ index: 1, offset: 1 })
+
+ for (let n = 0; n < 3; n++) {
+ getComposition().deleteInDirection("backward")
+ getEditorController().render()
+ }
+
+ assert.blockAttributes([ 0, 2 ], [ "bulletList", "bullet" ])
+ assert.blockAttributes([ 2, 3 ], [])
+ assert.blockAttributes([ 3, 5 ], [ "bulletList", "bullet" ])
+ expectDocument("a\n\nc\n")
+ })
+})
diff --git a/src/test/system/morphing_test.js b/src/test/system/morphing_test.js
new file mode 100644
index 000000000..28bc72035
--- /dev/null
+++ b/src/test/system/morphing_test.js
@@ -0,0 +1,88 @@
+import { assert, test, testGroup } from "test/test_helper"
+import { nextFrame } from "../test_helpers/timing_helpers"
+
+import { Idiomorph } from "idiomorph"
+
+function renderWithMorph(event) {
+ event.render = (editorElement, documentFragment) => {
+ Idiomorph.morph(editorElement, documentFragment, { morphStyle: "innerHTML" })
+ }
+}
+
+testGroup("morphing editor content", {
+ template: "editor_empty",
+ beforeSetup: () => addEventListener("trix-before-render", renderWithMorph),
+ afterTeardown: () => removeEventListener("trix-before-render", renderWithMorph)
+}, () => {
+ test("renders changed elements with morphing", () => {
+ const element = getEditorElement()
+
+ element.editor.loadHTML("hello
")
+
+ const before = element.firstElementChild
+ assert.equal(before.textContent, "hello")
+
+ element.editor.loadHTML("goodbye
")
+
+ const after = element.firstElementChild
+ assert.equal(after.textContent, "goodbye")
+ assert.strictEqual(after, before, "preserves element across renders")
+ })
+
+ test("renders with morphing when ancestor elements are morphed", () => {
+ const element = getEditorElement()
+
+ Idiomorph.morph(
+ element.parentElement,
+ "hello
",
+ { morphStyle: "innerHTML" }
+ )
+
+ const before = element.firstElementChild
+ assert.equal(before.textContent, "hello")
+
+ Idiomorph.morph(
+ element.parentElement,
+ "goodbye
",
+ { morphStyle: "innerHTML" }
+ )
+
+ const after = element.firstElementChild
+ assert.equal(after.textContent, "goodbye")
+ assert.strictEqual(after, before, "preserves element across renders")
+ })
+})
+
+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)
+ })
+})
diff --git a/src/test/system/mutation_input_test.js b/src/test/system/mutation_input_test.js
new file mode 100644
index 000000000..97bdbcb1d
--- /dev/null
+++ b/src/test/system/mutation_input_test.js
@@ -0,0 +1,143 @@
+import * as config from "trix/config"
+
+import {
+ TEST_IMAGE_URL,
+ assert,
+ clickToolbarButton,
+ expectDocument,
+ insertNode,
+ isToolbarButtonActive,
+ testGroup,
+ testIf,
+ triggerEvent,
+ typeCharacters,
+} from "test/test_helper"
+import { nextFrame } from "../test_helpers/timing_helpers"
+
+const test = function() {
+ testIf(config.input.getLevel() === 0, ...arguments)
+}
+
+testGroup("Mutation input", { template: "editor_empty" }, () => {
+ test("deleting a newline", async () => {
+ const element = getEditorElement()
+ element.editor.insertString("a\n\nb")
+
+ triggerEvent(element, "keydown", { charCode: 0, keyCode: 229, which: 229 })
+ const br = element.querySelectorAll("br")[1]
+ br.parentNode.removeChild(br)
+ await nextFrame()
+ expectDocument("a\nb\n")
+ })
+
+ test("typing a space in formatted text at the end of a block", async () => {
+ const element = getEditorElement()
+
+ await clickToolbarButton({ attribute: "bold" })
+ await typeCharacters("a")
+ // Press space key
+ triggerEvent(element, "keydown", { charCode: 0, keyCode: 32, which: 32 })
+ triggerEvent(element, "keypress", { charCode: 32, keyCode: 32, which: 32 })
+
+ const boldElement = element.querySelector("strong")
+ boldElement.appendChild(document.createTextNode(" "))
+ boldElement.appendChild(document.createElement("br"))
+
+ await nextFrame()
+
+ assert.ok(isToolbarButtonActive({ attribute: "bold" }))
+ assert.textAttributes([ 0, 2 ], { bold: true })
+ expectDocument("a \n")
+ })
+
+ test("typing formatted text after a newline at the end of block", async () => {
+ const element = getEditorElement()
+ element.editor.insertHTML("")
+ element.editor.setSelectedRange(3)
+
+ await clickToolbarButton({ attribute: "bold" })
+
+ // Press B key
+ triggerEvent(element, "keydown", { charCode: 0, keyCode: 66, which: 66 })
+ triggerEvent(element, "keypress", { charCode: 98, keyCode: 98, which: 98 })
+
+ const node = document.createTextNode("b")
+ const extraBR = element.querySelectorAll("br")[1]
+ extraBR.parentNode.insertBefore(node, extraBR)
+ extraBR.parentNode.removeChild(extraBR)
+
+ await nextFrame()
+
+ assert.ok(isToolbarButtonActive({ attribute: "bold" }))
+ assert.textAttributes([ 0, 1 ], {})
+ assert.textAttributes([ 3, 4 ], { bold: true })
+ expectDocument("a\n\nb\n")
+ })
+
+ test("typing an emoji after a newline at the end of block", async () => {
+ const element = getEditorElement()
+
+ await typeCharacters("\n")
+
+ // Tap 👏🏻 on iOS
+ triggerEvent(element, "keydown", { charCode: 0, keyCode: 0, which: 0, key: "👏🏻" })
+ triggerEvent(element, "keypress", { charCode: 128079, keyCode: 128079, which: 128079, key: "👏🏻" })
+
+ const node = document.createTextNode("👏🏻")
+ const extraBR = element.querySelectorAll("br")[1]
+ extraBR.parentNode.insertBefore(node, extraBR)
+ extraBR.parentNode.removeChild(extraBR)
+
+ await nextFrame()
+ expectDocument("\n👏🏻\n")
+ })
+
+ test("backspacing an attachment at the beginning of an otherwise empty document", async () => {
+ const element = getEditorElement()
+ element.editor.loadHTML(``)
+
+ await nextFrame()
+
+ element.editor.setSelectedRange([ 0, 1 ])
+ triggerEvent(element, "keydown", { charCode: 0, keyCode: 8, which: 8 })
+
+ element.firstElementChild.innerHTML = "
"
+
+ await nextFrame()
+
+ assert.locationRange({ index: 0, offset: 0 })
+ expectDocument("\n")
+ })
+
+ test("backspacing a block comment node", async (expectDocument) => {
+ const element = getEditorElement()
+ element.editor.loadHTML("a
b
")
+
+ await nextFrame()
+
+ element.editor.setSelectedRange(2)
+ triggerEvent(element, "keydown", { charCode: 0, keyCode: 8, which: 8 })
+ const commentNode = element.lastChild.firstChild
+ commentNode.parentNode.removeChild(commentNode)
+
+ await nextFrame()
+
+ assert.locationRange({ index: 0, offset: 1 })
+ expectDocument("ab\n")
+ })
+
+ test("typing formatted text with autocapitalization on", async () => {
+ const element = getEditorElement()
+
+ await clickToolbarButton({ attribute: "bold" })
+ // Type "b", autocapitalize to "B"
+ triggerEvent(element, "keydown", { charCode: 0, keyCode: 66, which: 66 })
+ triggerEvent(element, "keypress", { charCode: 98, keyCode: 98, which: 98 })
+ triggerEvent(element, "textInput", { data: "B" })
+
+ await insertNode(document.createTextNode("B"))
+ assert.ok(isToolbarButtonActive({ attribute: "bold" }))
+ assert.textAttributes([ 0, 1 ], { bold: true })
+ expectDocument("B\n")
+ })
+})
diff --git a/src/test/system/pasting_test.js b/src/test/system/pasting_test.js
new file mode 100644
index 000000000..c7dc10784
--- /dev/null
+++ b/src/test/system/pasting_test.js
@@ -0,0 +1,408 @@
+import * as config from "trix/config"
+import { OBJECT_REPLACEMENT_CHARACTER } from "trix/constants"
+
+import {
+ TEST_IMAGE_URL,
+ assert,
+ clickToolbarButton,
+ createFile,
+ expandSelection,
+ expectDocument,
+ moveCursor,
+ pasteContent,
+ pressKey,
+ test,
+ testGroup,
+ testIf,
+ triggerEvent,
+ typeCharacters,
+} from "test/test_helper"
+import { delay, nextFrame } from "../test_helpers/timing_helpers"
+
+testGroup("Pasting", { template: "editor_empty" }, () => {
+ test("paste plain text", async () => {
+ await typeCharacters("abc")
+ await moveCursor("left")
+ await pasteContent("text/plain", "!")
+ expectDocument("ab!c\n")
+ })
+
+ test("paste simple html", async () => {
+ await typeCharacters("abc")
+ await moveCursor("left")
+ await pasteContent("text/html", "<")
+ expectDocument("ab {
+ await typeCharacters("abc")
+ await moveCursor("left")
+ await pasteContent("text/html", "Hello world
This is a test
")
+ expectDocument("abHello world\nThis is a test\nc\n")
+ })
+
+ test("paste html in expanded selection", async () => {
+ await typeCharacters("abc")
+ await moveCursor("left")
+ await expandSelection({ direction: "left", times: 2 })
+ await pasteContent("text/html", "x")
+ assert.selectedRange(1)
+ expectDocument("xc\n")
+ })
+
+ test("paste plain text with CRLF ", async () => {
+ await pasteContent("text/plain", "a\r\nb\r\nc")
+ expectDocument("a\nb\nc\n")
+ })
+
+ test("paste html with CRLF ", async () => {
+ await pasteContent("text/html", "a
\r\nb
\r\nc
")
+ expectDocument("a\nb\nc\n")
+ })
+
+ test("paste plain text with CR", async () => {
+ await pasteContent("text/plain", "a\rb\rc")
+ expectDocument("a\nb\nc\n")
+ })
+
+ test("paste html with CR", async () => {
+ await pasteContent("text/html", "a
\rb
\rc
")
+ expectDocument("a\nb\nc\n")
+ })
+
+ test("paste unsafe html", async () => {
+ window.unsanitized = []
+ const pasteData = {
+ "text/plain": "x",
+ "text/html": `\
+
+ 
+
