vapid 0.1.0

data/lib/vapid/vendor/trix/test/src/system/text_formatting_test.coffee

@@ -0,0 +1,151 @@
+{assert, clickToolbarButton, clickToolbarDialogButton, collapseSelection, expandSelection, insertString, insertText, isToolbarButtonActive, isToolbarButtonDisabled, isToolbarDialogActive, moveCursor, pressKey, test, testGroup, typeCharacters, typeInToolbarDialog, typeToolbarKeyCommand} = Trix.TestHelpers
+
+testGroup "Text formatting", template: "editor_empty", ->
+  test "applying attributes to text", (done) ->
+    typeCharacters "abc", ->
+      expandSelection "left", ->
+        clickToolbarButton attribute: "bold", ->
+          assert.textAttributes([0, 2], {})
+          assert.textAttributes([2, 3], bold: true)
+          assert.textAttributes([3, 4], blockBreak: true)
+          done()
+
+  test "applying a link to text", (done) ->
+    typeCharacters "abc", ->
+      moveCursor "left", ->
+        expandSelection "left", ->
+          clickToolbarButton attribute: "href", ->
+            assert.ok isToolbarDialogActive(attribute: "href")
+            typeInToolbarDialog "http://example.com", attribute: "href", ->
+              assert.textAttributes([0, 1], {})
+              assert.textAttributes([1, 2], href: "http://example.com")
+              assert.textAttributes([2, 3], {})
+              done()
+
+  test "inserting a link", (expectDocument) ->
+    typeCharacters "a", ->
+      clickToolbarButton attribute: "href", ->
+        assert.ok isToolbarDialogActive(attribute: "href")
+        typeInToolbarDialog "http://example.com", attribute: "href", ->
+          assert.textAttributes([0, 1], {})
+          assert.textAttributes([1, 19], href: "http://example.com")
+          expectDocument("ahttp://example.com\n")
+
+  test "editing a link", (done) ->
+    insertString("a")
+    text = Trix.Text.textForStringWithAttributes("bc", href: "http://example.com")
+    insertText(text)
+    insertString("d")
+    moveCursor direction: "left", times: 2, ->
+      clickToolbarButton attribute: "href", ->
+        assert.ok isToolbarDialogActive(attribute: "href")
+        assert.locationRange({index: 0, offset: 1}, {index: 0, offset: 3})
+        typeInToolbarDialog "http://example.org", attribute: "href", ->
+          assert.textAttributes([0, 1], {})
+          assert.textAttributes([1, 3], href: "http://example.org")
+          assert.textAttributes([3, 4], {})
+          done()
+
+  test "removing a link", (done) ->
+    text = Trix.Text.textForStringWithAttributes("ab", href: "http://example.com")
+    insertText(text)
+    assert.textAttributes([0, 2], href: "http://example.com")
+    expandSelection direction: "left", times: 2, ->
+      clickToolbarButton attribute: "href", ->
+        clickToolbarDialogButton method: "removeAttribute", ->
+          assert.textAttributes([0, 2], {})
+          done()
+
+  test "applying a link to an attachment with a host-provided href", (done) ->
+    text = fixtures["file attachment"].document.getBlockAtIndex(0).getTextWithoutBlockBreak()
+    insertText(text)
+    typeCharacters "a", ->
+      assert.notOk isToolbarButtonDisabled(attribute: "href")
+      expandSelection "left", ->
+        assert.notOk isToolbarButtonDisabled(attribute: "href")
+        expandSelection "left", ->
+          assert.ok isToolbarButtonDisabled(attribute: "href")
+          done()
+
+  test "typing after a link", (done) ->
+    typeCharacters "ab", ->
+      expandSelection direction: "left", times: 2, ->
+        clickToolbarButton attribute: "href", ->
+          typeInToolbarDialog "http://example.com", attribute: "href", ->
+            collapseSelection "right", ->
+              assert.locationRange(index: 0, offset: 2)
+              typeCharacters "c", ->
+                assert.textAttributes([0, 2], href: "http://example.com")
+                assert.textAttributes([2, 3], {})
+                moveCursor "left", ->
+                  assert.notOk isToolbarButtonActive(attribute: "href")
+                  moveCursor "left", ->
+                    assert.ok isToolbarButtonActive(attribute: "href")
+                    done()
+
+  test "applying formatting and then typing", (done) ->
+    typeCharacters "a", ->
+      clickToolbarButton attribute: "bold", ->
+        typeCharacters "bcd", ->
+          clickToolbarButton attribute: "bold", ->
+            typeCharacters "e", ->
+              assert.textAttributes([0, 1], {})
+              assert.textAttributes([1, 4], bold: true)
+              assert.textAttributes([4, 5], {})
+              done()
+
+  test "applying formatting and then moving the cursor away", (done) ->
+    typeCharacters "abc", ->
+      moveCursor "left", ->
+        assert.notOk isToolbarButtonActive(attribute: "bold")
+        clickToolbarButton attribute: "bold", ->
+          assert.ok isToolbarButtonActive(attribute: "bold")
+          moveCursor "right", ->
+            assert.notOk isToolbarButtonActive(attribute: "bold")
+            moveCursor "left", ->
+              assert.notOk isToolbarButtonActive(attribute: "bold")
+              assert.textAttributes([0, 3], {})
+              assert.textAttributes([3, 4], blockBreak: true)
+              done()
+
+  test "applying formatting to an unfocused editor", (done) ->
+    input = Trix.makeElement("input", type: "text")
+    document.body.appendChild(input)
+    input.focus()
+
+    clickToolbarButton attribute: "bold", ->
+      typeCharacters "a", ->
+        assert.textAttributes([0, 1], bold: true)
+        document.body.removeChild(input)
+        done()
+
+  test "editing formatted text", (done) ->
+    clickToolbarButton attribute: "bold", ->
+      typeCharacters "ab", ->
+        clickToolbarButton attribute: "bold", ->
+          typeCharacters "c", ->
+            assert.notOk isToolbarButtonActive(attribute: "bold")
+            moveCursor "left", ->
+              assert.ok isToolbarButtonActive(attribute: "bold")
+              moveCursor "left", ->
+                assert.ok isToolbarButtonActive(attribute: "bold")
+                typeCharacters "Z", ->
+                  assert.ok isToolbarButtonActive(attribute: "bold")
+                  assert.textAttributes([0, 3], bold: true)
+                  assert.textAttributes([3, 4], {})
+                  assert.textAttributes([4, 5], blockBreak: true)
+                  moveCursor "right", ->
+                    assert.ok isToolbarButtonActive(attribute: "bold")
+                    moveCursor "right", ->
+                      assert.notOk isToolbarButtonActive(attribute: "bold")
+                      done()
+
+  test "key command activates toolbar button", (done) ->
+    typeToolbarKeyCommand attribute: "bold", ->
+      assert.ok isToolbarButtonActive(attribute: "bold")
+      done()
+
+  test "backspacing newline after text", (expectDocument) ->
+    typeCharacters "a\n", ->
+      pressKey "backspace", ->
+        expectDocument("a\n")

data/lib/vapid/vendor/trix/test/src/system/undo_test.coffee

@@ -0,0 +1,48 @@
+{assert, clickToolbarButton, expandSelection, moveCursor, test, testGroup, typeCharacters} = Trix.TestHelpers
+
+testGroup "Undo/Redo", template: "editor_empty", ->
+  test "typing and undoing", (done) ->
+    first = getDocument().copy()
+    typeCharacters "abc", ->
+      assert.notOk getDocument().isEqualTo(first)
+      clickToolbarButton action: "undo", ->
+        assert.ok getDocument().isEqualTo(first)
+        done()
+
+  test "typing, formatting, typing, and undoing", (done) ->
+    first = getDocument().copy()
+    typeCharacters "abc", ->
+      second = getDocument().copy()
+      clickToolbarButton attribute: "bold", ->
+        typeCharacters "def", ->
+          third = getDocument().copy()
+          clickToolbarButton action: "undo", ->
+            assert.ok getDocument().isEqualTo(second)
+            clickToolbarButton action: "undo", ->
+              assert.ok getDocument().isEqualTo(first)
+              clickToolbarButton action: "redo", ->
+                assert.ok getDocument().isEqualTo(second)
+                clickToolbarButton action: "redo", ->
+                  assert.ok getDocument().isEqualTo(third)
+                  done()
+
+  test "formatting changes are batched by location range", (done) ->
+    typeCharacters "abc", ->
+      first = getDocument().copy()
+      expandSelection "left", ->
+        clickToolbarButton attribute: "bold", ->
+          clickToolbarButton attribute: "italic", ->
+            second = getDocument().copy()
+            moveCursor "left", ->
+              expandSelection "left", ->
+                clickToolbarButton attribute: "italic", ->
+                  third = getDocument().copy()
+                  clickToolbarButton action: "undo", ->
+                    assert.ok getDocument().isEqualTo(second)
+                    clickToolbarButton action: "undo", ->
+                      assert.ok getDocument().isEqualTo(first)
+                      clickToolbarButton action: "redo", ->
+                        assert.ok getDocument().isEqualTo(second)
+                        clickToolbarButton action: "redo", ->
+                          assert.ok getDocument().isEqualTo(third)
+                          done()

data/lib/vapid/vendor/trix/test/src/test.coffee

@@ -0,0 +1,16 @@
+#= require trix/core/helpers/global
+#= require ./test_helpers/index
+#= require_tree ./system
+#= require_tree ./unit
+
+Trix.config.undoInterval = 0
+
+document.head.insertAdjacentHTML "beforeend", """
+  <style type="text/css">
+    #trix-container { height: 150px; }
+    trix-toolbar { margin-bottom: 10px; }
+    trix-toolbar button { border: 1px solid #ccc; background: #fff; }
+    trix-toolbar button.active { background: #d3e6fd; }
+    trix-toolbar button:disabled { color: #ccc; }
+  </style>
+"""

data/lib/vapid/vendor/trix/test/src/test_helpers/assertions.coffee

@@ -0,0 +1,38 @@
+{normalizeRange, rangesAreEqual} = Trix
+
+helpers = Trix.TestHelpers
+helpers.assert = QUnit.assert
+
+helpers.assert.locationRange = (start, end) ->
+  expectedLocationRange = normalizeRange([start, end])
+  actualLocationRange = getEditorController().getLocationRange()
+  @deepEqual(actualLocationRange, expectedLocationRange)
+
+helpers.assert.textAttributes = (range, attributes) ->
+  document = getDocument().getDocumentAtRange(range)
+  blocks = document.getBlocks()
+  throw "range #{JSON.stringify(range)} spans more than one block" unless blocks.length is 1
+
+  locationRange = getDocument().locationRangeFromRange(range)
+  textIndex = locationRange[0].index
+  textRange = [locationRange[0].offset, locationRange[1].offset]
+  text = getDocument().getTextAtIndex(textIndex).getTextAtRange(textRange)
+  pieces = text.getPieces()
+  throw "range #{JSON.stringify(range)} must only span one piece" unless pieces.length is 1
+
+  piece = pieces[0]
+  @deepEqual piece.getAttributes(), attributes
+
+helpers.assert.blockAttributes = (range, attributes) ->
+  document = getDocument().getDocumentAtRange(range)
+  blocks = document.getBlocks()
+  throw "range #{JSON.stringify(range)} spans more than one block" unless blocks.length is 1
+
+  block = blocks[0]
+  @deepEqual block.getAttributes(), attributes
+
+helpers.assert.documentHTMLEqual = (trixDocument, html) ->
+  @equal helpers.getHTML(trixDocument), html
+
+helpers.getHTML = (trixDocument) ->
+  Trix.DocumentView.render(trixDocument).innerHTML

data/lib/vapid/vendor/trix/test/src/test_helpers/editor_helpers.coffee

@@ -0,0 +1,37 @@
+helpers = Trix.TestHelpers
+
+helpers.extend
+  insertString: (string) ->
+    getComposition().insertString(string)
+    render()
+
+  insertText: (text) ->
+    getComposition().insertText(text)
+    render()
+
+  insertDocument: (document) ->
+    getComposition().insertDocument(document)
+    render()
+
+  insertFile: (file) ->
+    getComposition().insertFile(file)
+    render()
+
+  insertImageAttachment: (attributes) ->
+    attributes ?=
+      url: TEST_IMAGE_URL
+      width: 10
+      height: 10
+      filename: "image.gif"
+      contentType: "image/gif"
+
+    attachment = new Trix.Attachment attributes
+    text = Trix.Text.textForAttachmentWithAttributes(attachment)
+    helpers.insertText(text)
+
+  replaceDocument: (document) ->
+    getComposition().setDocument(document)
+    render()
+
+render = ->
+  getEditorController().render()

data/lib/vapid/vendor/trix/test/src/test_helpers/fixtures/editor_empty.jst.eco

@@ -0,0 +1 @@
+<trix-editor autofocus placeholder="Say hello..."></trix-editor>

data/lib/vapid/vendor/trix/test/src/test_helpers/fixtures/editor_html.jst.eco

@@ -0,0 +1,2 @@
+<trix-editor input="my_input" autofocus placeholder="Say hello..."></trix-editor>
+<input id="my_input" type="hidden" value="&lt;div&gt;Hello world&lt;/div&gt;">

data/lib/vapid/vendor/trix/test/src/test_helpers/fixtures/editor_in_table.jst.eco

@@ -0,0 +1,7 @@
+<table>
+  <tr>
+    <td>
+      <trix-editor></trix-editor>
+    </td>
+  </tr>
+</table>

data/lib/vapid/vendor/trix/test/src/test_helpers/fixtures/editor_with_block_styles.jst.eco

@@ -0,0 +1,6 @@
+<style type="text/css">
+  blockquote { font-style: italic; }
+  li { font-weight: bold; }
+</style>
+
+<trix-editor class="trix-content"></trix-editor>

data/lib/vapid/vendor/trix/test/src/test_helpers/fixtures/editor_with_bold_styles.jst.eco

@@ -0,0 +1,7 @@
+<style type="text/css">
+  strong { font-weight: 500; }
+  span { font-weight: 600; }
+  article { font-weight: bold; }
+</style>
+
+<trix-editor class="trix-content"></trix-editor>

data/lib/vapid/vendor/trix/test/src/test_helpers/fixtures/editor_with_image.jst.eco

@@ -0,0 +1,2 @@
+<trix-editor input="my_input" autofocus placeholder="Say hello..."></trix-editor>
+<input id="my_input" type="hidden" value="ab&lt;img src=&quot;<%= TEST_IMAGE_URL %>&quot; width=&quot;10&quot; height=&quot;10&quot;&gt;">

data/lib/vapid/vendor/trix/test/src/test_helpers/fixtures/editor_with_styled_content.jst.eco

@@ -0,0 +1,7 @@
+<style type="text/css">
+  .trix-content figure.attachment {
+    display: inline-block;
+  }
+</style>
+
+<trix-editor class="trix-content"></trix-editor>

data/lib/vapid/vendor/trix/test/src/test_helpers/fixtures/editor_with_toolbar_and_input.jst.eco

@@ -0,0 +1,5 @@
+<ul id="my_editor">
+  <li><trix-toolbar id="my_toolbar"></trix-toolbar></li>
+  <li><trix-editor toolbar="my_toolbar" input="my_input" autofocus placeholder="Say hello..."></trix-editor></li>
+  <li><input id="my_input" type="hidden" value="&lt;div&gt;Hello world&lt;/div&gt;"></li>
+</ul>

data/lib/vapid/vendor/trix/test/src/test_helpers/fixtures/fixtures.coffee

@@ -0,0 +1,536 @@
+{classNames} = Trix.config.css
+
+@TEST_IMAGE_URL = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs="
+
+createDocument = (parts...) ->
+  blocks = for part in parts
+    [string, textAttributes, blockAttributes] = part
+    text = Trix.Text.textForStringWithAttributes(string, textAttributes)
+    new Trix.Block text, blockAttributes
+  new Trix.Document blocks
+
+blockComment = "<!--block-->"
+
+cursorTarget = Trix.makeElement(
+  tagName: "span"
+  textContent: Trix.ZERO_WIDTH_SPACE
+  data: trixSelection: true, trixCursorTarget: true, trixSerialize: false
+).outerHTML
+
+removeWhitespace = (string) ->
+  string.replace(/\s/g, "")
+
+@fixtures =
+  "bold text":
+    document: createDocument(["abc", bold: true])
+    html: "<div>#{blockComment}<strong>abc</strong></div>"
+    serializedHTML: "<div><strong>abc</strong></div>"
+
+  "bold, italic text":
+    document: createDocument(["abc", bold: true, italic: true])
+    html: "<div>#{blockComment}<strong><em>abc</em></strong></div>"
+
+  "text with newline":
+    document: createDocument(["ab\nc"])
+    html: "<div>#{blockComment}ab<br>c</div>"
+
+  "text with link":
+    document: createDocument(["abc", href: "http://example.com"])
+    html: """<div>#{blockComment}<a href="http://example.com">abc</a></div>"""
+
+  "text with link and formatting":
+    document: createDocument(["abc", italic: true, href: "http://example.com"])
+    html: """<div>#{blockComment}<a href="http://example.com"><em>abc</em></a></div>"""
+
+  "partially formatted link":
+    document: new Trix.Document [
+      new Trix.Block new Trix.Text [
+          new Trix.StringPiece "ab", href: "http://example.com"
+          new Trix.StringPiece "c", href: "http://example.com", italic: true
+        ]
+      ]
+    html: """<div>#{blockComment}<a href="http://example.com">ab<em>c</em></a></div>"""
+
+  "spaces 1":
+    document: createDocument([" a"])
+    html: """<div>#{blockComment}&nbsp;a</div>"""
+
+  "spaces 2":
+    document: createDocument(["  a"])
+    html: """<div>#{blockComment}&nbsp; a</div>"""
+
+  "spaces 3":
+    document: createDocument(["   a"])
+    html: """<div>#{blockComment}&nbsp; &nbsp;a</div>"""
+
+  "spaces 4":
+    document: createDocument([" a "])
+    html: """<div>#{blockComment}&nbsp;a&nbsp;</div>"""
+
+  "spaces 5":
+    document: createDocument(["a  b"])
+    html: """<div>#{blockComment}a&nbsp; b</div>"""
+
+  "spaces 6":
+    document: createDocument(["a   b"])
+    html: """<div>#{blockComment}a &nbsp; b</div>"""
+
+  "spaces 7":
+    document: createDocument(["a    b"])
+    html: """<div>#{blockComment}a&nbsp; &nbsp; b</div>"""
+
+  "spaces 8":
+    document: createDocument(["a b "])
+    html: """<div>#{blockComment}a b&nbsp;</div>"""
+
+  "spaces 9":
+    document: createDocument(["a b c"])
+    html: """<div>#{blockComment}a b c</div>"""
+
+  "spaces 10":
+    document: createDocument(["a "])
+    html: """<div>#{blockComment}a&nbsp;</div>"""
+
+  "spaces 11":
+    document: createDocument(["a  "])
+    html: """<div>#{blockComment}a &nbsp;</div>"""
+
+  "spaces and formatting":
+    document: new Trix.Document [
+      new Trix.Block new Trix.Text [
+          new Trix.StringPiece " a "
+          new Trix.StringPiece "b", href: "http://b.com"
+          new Trix.StringPiece " "
+          new Trix.StringPiece "c", bold: true
+          new Trix.StringPiece " d"
+          new Trix.StringPiece " e ", italic: true
+          new Trix.StringPiece " f  "
+        ]
+      ]
+    html: """<div>#{blockComment}&nbsp;a <a href="http://b.com">b</a> <strong>c</strong> d<em> e </em>&nbsp;f &nbsp;</div>"""
+
+  "quote formatted block":
+    document: createDocument(["abc", {}, ["quote"]])
+    html: "<blockquote>#{blockComment}abc</blockquote>"
+
+  "code formatted block":
+    document: createDocument(["123", {}, ["code"]])
+    html: "<pre>#{blockComment}123</pre>"
+
+  "code with newline":
+    document: createDocument(["12\n3", {}, ["code"]])
+    html: "<pre>#{blockComment}12\n3</pre>"
+
+  "multiple blocks with block comments in their text":
+    document: createDocument(["a#{blockComment}b", {}, ["quote"]], ["#{blockComment}c", {}, ["code"]])
+    html: "<blockquote>#{blockComment}a&lt;!--block--&gt;b</blockquote><pre>#{blockComment}&lt;!--block--&gt;c</pre>"
+    serializedHTML: "<blockquote>a&lt;!--block--&gt;b</blockquote><pre>&lt;!--block--&gt;c</pre>"
+
+  "unordered list with one item":
+    document: createDocument(["a", {}, ["bulletList", "bullet"]])
+    html: "<ul><li>#{blockComment}a</li></ul>"
+
+  "unordered list with bold text":
+    document: createDocument(["a", { bold: true }, ["bulletList", "bullet"]])
+    html: "<ul><li>#{blockComment}<strong>a</strong></li></ul>"
+
+  "unordered list with partially formatted text":
+    document: new Trix.Document [
+        new Trix.Block(
+          new Trix.Text([
+            new Trix.StringPiece("a")
+            new Trix.StringPiece("b", italic: true)
+          ]),
+          ["bulletList", "bullet"]
+        )
+      ]
+    html: "<ul><li>#{blockComment}a<em>b</em></li></ul>"
+
+  "unordered list with two items":
+    document: createDocument(["a", {}, ["bulletList", "bullet"]], ["b", {}, ["bulletList", "bullet"]])
+    html: "<ul><li>#{blockComment}a</li><li>#{blockComment}b</li></ul>"
+
+  "unordered list surrounded by unformatted blocks":
+    document: createDocument(["a"], ["b", {}, ["bulletList", "bullet"]], ["c"])
+    html: "<div>#{blockComment}a</div><ul><li>#{blockComment}b</li></ul><div>#{blockComment}c</div>"
+
+  "ordered list":
+    document: createDocument(["a", {}, ["numberList", "number"]])
+    html: "<ol><li>#{blockComment}a</li></ol>"
+
+  "ordered list and an unordered list":
+    document: createDocument(["a", {}, ["bulletList", "bullet"]], ["b", {}, ["numberList", "number"]])
+    html: "<ul><li>#{blockComment}a</li></ul><ol><li>#{blockComment}b</li></ol>"
+
+  "empty block with attributes":
+    document: createDocument(["", {}, ["quote"]])
+    html: "<blockquote>#{blockComment}<br></blockquote>"
+
+  "image attachment": do ->
+    attrs = url: TEST_IMAGE_URL, filename: "example.png", filesize: 98203, contentType: "image/png", width: 1, height: 1
+    attachment = new Trix.Attachment attrs
+    text = Trix.Text.textForAttachmentWithAttributes(attachment)
+
+    image = Trix.makeElement("img", src: attrs.url, "data-trix-mutable": true, width: 1, height: 1)
+    image.dataset.trixStoreKey = ["imageElement", attachment.id, image.src, image.width, image.height].join("/")
+
+    caption = Trix.makeElement(tagName: "figcaption", className: classNames.attachment.caption)
+    caption.innerHTML = """#{attrs.filename} <span class="#{classNames.attachment.size}">95.9 KB</span>"""
+
+    figure = Trix.makeElement
+      tagName: "figure"
+      className: "attachment attachment-preview png"
+
+    data =
+      trixAttachment: JSON.stringify(attachment)
+      trixContentType: "image/png"
+      trixId: attachment.id
+
+    figure.dataset[key] = value for key, value of data
+    figure.setAttribute("contenteditable", false)
+    figure.appendChild(image)
+    figure.appendChild(caption)
+
+    serializedFigure = figure.cloneNode(true)
+    for attribute in ["data-trix-id", "data-trix-mutable", "data-trix-store-key", "contenteditable"]
+      serializedFigure.removeAttribute(attribute)
+      for element in serializedFigure.querySelectorAll("[#{attribute}]")
+        element.removeAttribute(attribute)
+
+    html: "<div>#{blockComment}#{cursorTarget}#{figure.outerHTML}#{cursorTarget}</div>"
+    serializedHTML: "<div>#{serializedFigure.outerHTML}</div>"
+    document: new Trix.Document [new Trix.Block text]
+
+  "text with newlines and image attachment": do ->
+    stringText = Trix.Text.textForStringWithAttributes("a\nb")
+
+    attrs = url: TEST_IMAGE_URL, filename: "example.png", filesize: 98203, contentType: "image/png", width: 1, height: 1
+    attachment = new Trix.Attachment attrs
+    attachmentText = Trix.Text.textForAttachmentWithAttributes(attachment)
+
+    image = Trix.makeElement("img", src: attrs.url, "data-trix-mutable": true, width: 1, height: 1)
+    image.dataset.trixStoreKey = ["imageElement", attachment.id, image.src, image.width, image.height].join("/")
+
+    caption = Trix.makeElement(tagName: "figcaption", className: classNames.attachment.caption)
+    caption.innerHTML = """#{attrs.filename} <span class="#{classNames.attachment.size}">95.9 KB</span>"""
+
+    figure = Trix.makeElement
+      tagName: "figure"
+      className: "attachment attachment-preview png"
+
+    data =
+      trixAttachment: JSON.stringify(attachment)
+      trixContentType: "image/png"
+      trixId: attachment.id
+
+    figure.dataset[key] = value for key, value of data
+    figure.setAttribute("contenteditable", false)
+    figure.appendChild(image)
+    figure.appendChild(caption)
+
+    serializedFigure = figure.cloneNode(true)
+    for attribute in ["data-trix-id", "data-trix-mutable", "data-trix-store-key", "contenteditable"]
+      serializedFigure.removeAttribute(attribute)
+      for element in serializedFigure.querySelectorAll("[#{attribute}]")
+        element.removeAttribute(attribute)
+
+    text = stringText.appendText(attachmentText)
+
+    html: "<div>#{blockComment}a<br>b#{cursorTarget}#{figure.outerHTML}#{cursorTarget}</div>"
+    serializedHTML: "<div>a<br>b#{serializedFigure.outerHTML}</div>"
+    document: new Trix.Document [new Trix.Block text]
+
+  "image attachment with edited caption": do ->
+    attrs = url: TEST_IMAGE_URL, filename: "example.png", filesize: 123, contentType: "image/png", width: 1, height: 1
+    attachment = new Trix.Attachment attrs
+    textAttrs = caption: "Example"
+    text = Trix.Text.textForAttachmentWithAttributes(attachment, textAttrs)
+
+    image = Trix.makeElement("img", src: attrs.url, "data-trix-mutable": true, width: 1, height: 1)
+    image.dataset.trixStoreKey = ["imageElement", attachment.id, image.src, image.width, image.height].join("/")
+
+    caption = Trix.makeElement(tagName: "figcaption", className: "#{classNames.attachment.caption} #{classNames.attachment.captionEdited}", textContent: "Example")
+
+    figure = Trix.makeElement
+      tagName: "figure"
+      className: "attachment attachment-preview png"
+
+    data =
+      trixAttachment: JSON.stringify(attachment)
+      trixContentType: "image/png"
+      trixId: attachment.id
+      trixAttributes: JSON.stringify(textAttrs)
+
+    figure.dataset[key] = value for key, value of data
+    figure.setAttribute("contenteditable", false)
+    figure.appendChild(image)
+    figure.appendChild(caption)
+
+    html: "<div>#{blockComment}#{cursorTarget}#{figure.outerHTML}#{cursorTarget}</div>"
+    document: new Trix.Document [new Trix.Block text]
+
+  "file attachment": do ->
+    attrs = href: "http://example.com/example.pdf", filename: "example.pdf", filesize: 34038769, contentType: "application/pdf"
+    attachment = new Trix.Attachment attrs
+    text = Trix.Text.textForAttachmentWithAttributes(attachment)
+
+    figure = Trix.makeElement
+      tagName: "figure"
+      className: "attachment attachment-file pdf"
+
+    data =
+      trixAttachment: JSON.stringify(attachment)
+      trixContentType: "application/pdf"
+      trixId: attachment.id
+
+    link = Trix.makeElement("a", href: attrs.href)
+    link.dataset[key] = value for key, value of data
+    link.setAttribute("contenteditable", false)
+    link.appendChild(figure)
+
+    caption = """<figcaption class="#{classNames.attachment.caption}">#{attrs.filename} <span class="#{classNames.attachment.size}">32.46 MB</span></figcaption>"""
+    figure.innerHTML = caption
+
+    html: """<div>#{blockComment}#{cursorTarget}#{link.outerHTML}#{cursorTarget}</div>"""
+    document: new Trix.Document [new Trix.Block text]
+
+  "pending file attachment": do ->
+    attrs = filename: "example.pdf", filesize: 34038769, contentType: "application/pdf"
+    attachment = new Trix.Attachment attrs
+    attachment.file = {}
+    text = Trix.Text.textForAttachmentWithAttributes(attachment)
+
+    figure = Trix.makeElement
+      tagName: "figure"
+      className: "attachment attachment-file pdf"
+
+    data =
+      trixAttachment: JSON.stringify(attachment)
+      trixContentType: "application/pdf"
+      trixId: attachment.id
+      trixSerialize: false
+
+    figure.dataset[key] = value for key, value of data
+    figure.setAttribute("contenteditable", false)
+
+    progress = Trix.makeElement
+      tagName: "progress"
+      attributes:
+        class: "progress"
+        value: 0
+        max: 100
+      data:
+        trixMutable: true
+        trixStoreKey: ["progressElement", attachment.id].join("/")
+
+    caption = """<figcaption class="#{classNames.attachment.caption}">#{attrs.filename} <span class="#{classNames.attachment.size}">32.46 MB</span></figcaption>"""
+    figure.innerHTML = caption + progress.outerHTML
+
+    html: """<div>#{blockComment}#{cursorTarget}#{figure.outerHTML}#{cursorTarget}</div>"""
+    document: new Trix.Document [new Trix.Block text]
+
+  "content attachment": do ->
+    content = """<blockquote class="twitter-tweet" data-cards="hidden"><p>ruby-build 20150413 is out, with definitions for 2.2.2, 2.1.6, and 2.0.0-p645 to address recent security issues: <a href="https://t.co/YEwV6NtRD8">https://t.co/YEwV6NtRD8</a></p>&mdash; Sam Stephenson (@sstephenson) <a href="https://twitter.com/sstephenson/status/587715996783218688">April 13, 2015</a></blockquote>"""
+    href = "https://twitter.com/sstephenson/status/587715996783218688"
+    contentType = "embed/twitter"
+
+    attachment = new Trix.Attachment {content, contentType, href}
+    text = Trix.Text.textForAttachmentWithAttributes(attachment)
+
+    figure = Trix.makeElement
+      tagName: "figure"
+      className: "attachment attachment-content"
+
+    figure.innerHTML = content
+
+    caption = Trix.makeElement(tagName: "figcaption", className: classNames.attachment.caption)
+    figure.appendChild(caption)
+
+    data =
+      trixAttachment: JSON.stringify(attachment)
+      trixContentType: contentType
+      trixId: attachment.id
+
+    figure.dataset[key] = value for key, value of data
+    figure.setAttribute("contenteditable", false)
+
+    html: """<div>#{blockComment}#{cursorTarget}#{figure.outerHTML}#{cursorTarget}</div>"""
+    document: new Trix.Document [new Trix.Block text]
+
+  "nested quote and code formatted block":
+    document: createDocument(["ab3", {}, ["quote", "code"]])
+    html: "<blockquote><pre>#{blockComment}ab3</pre></blockquote>"
+
+  "nested code and quote formatted block":
+    document: createDocument(["ab3", {}, ["code", "quote"]])
+    html: "<pre><blockquote>#{blockComment}ab3</blockquote></pre>"
+
+  "nested code blocks in quote":
+    document: createDocument(
+      ["a\n", {}, ["quote"]],
+      ["b", {}, ["quote", "code"]],
+      ["\nc\n", {}, ["quote"]],
+      ["d", {}, ["quote", "code"]]
+    )
+    html: removeWhitespace """
+      <blockquote>
+        #{blockComment}
+        a
+        <br>
+        <br>
+        <pre>
+          #{blockComment}
+          b
+        </pre>
+        #{blockComment}
+        <br>
+        c
+        <br>
+        <br>
+        <pre>
+          #{blockComment}
+          d
+        </pre>
+      </blockquote>
+    """
+    serializedHTML: removeWhitespace """
+      <blockquote>
+        a
+        <br>
+        <br>
+        <pre>
+          b
+        </pre>
+        <br>
+        c
+        <br>
+        <br>
+        <pre>
+          d
+        </pre>
+      </blockquote>
+    """
+
+  "nested code, quote, and list in quote":
+    document: createDocument(
+      ["a\n", {}, ["quote"]],
+      ["b", {}, ["quote", "code"]],
+      ["\nc\n", {}, ["quote"]],
+      ["d", {}, ["quote", "quote"]],
+      ["\ne\n", {}, ["quote"]],
+      ["f", {}, ["quote", "bulletList", "bullet"]]
+    )
+    html: removeWhitespace """
+     <blockquote>
+      #{blockComment}
+      a
+      <br>
+      <br>
+      <pre>
+        #{blockComment}
+        b
+      </pre>
+      #{blockComment}
+      <br>
+      c
+      <br>
+      <br>
+      <blockquote>
+        #{blockComment}
+        d
+      </blockquote>
+      #{blockComment}
+      <br>
+      e
+      <br>
+      <br>
+      <ul>
+        <li>
+          #{blockComment}
+          f
+        </li>
+      </ul>
+    </blockquote>
+    """
+    serializedHTML: removeWhitespace """
+      <blockquote>
+        a
+        <br>
+        <br>
+        <pre>
+          b
+        </pre>
+        <br>
+        c
+        <br>
+        <br>
+        <blockquote>
+          d
+        </blockquote>
+        <br>
+        e
+        <br>
+        <br>
+        <ul>
+          <li>
+            f
+          </li>
+        </ul>
+      </blockquote>
+    """
+
+  "nested quote and list":
+    document: createDocument(["ab3", {}, ["quote", "bulletList", "bullet"]])
+    html: "<blockquote><ul><li>#{blockComment}ab3</li></ul></blockquote>"
+
+  "nested list and quote":
+    document: createDocument(["ab3", {}, ["bulletList", "bullet", "quote"]])
+    html: "<ul><li><blockquote>#{blockComment}ab3</blockquote></li></ul>"
+
+  "nested lists and quotes":
+    document: createDocument(["a", {}, ["bulletList", "bullet", "quote"]], ["b", {}, ["bulletList", "bullet", "quote"]])
+    html: "<ul><li><blockquote>#{blockComment}a</blockquote></li><li><blockquote>#{blockComment}b</blockquote></li></ul>"
+
+  "nested quote and list with two items":
+    document: createDocument(["a", {}, ["quote", "bulletList", "bullet"]], ["b", {}, ["quote", "bulletList", "bullet"]])
+    html: "<blockquote><ul><li>#{blockComment}a</li><li>#{blockComment}b</li></ul></blockquote>"
+
+  "nested unordered lists":
+    document: createDocument(["a", {}, ["bulletList", "bullet"]], ["b", {}, ["bulletList", "bullet", "bulletList", "bullet"]], ["c", {}, ["bulletList", "bullet", "bulletList", "bullet"]])
+    html: "<ul><li>#{blockComment}a<ul><li>#{blockComment}b</li><li>#{blockComment}c</li></ul></li></ul>"
+
+  "nested lists":
+    document: createDocument(["a", {}, ["numberList", "number"]], ["b", {}, ["numberList", "number", "bulletList", "bullet"]], ["c", {}, ["numberList", "number", "bulletList", "bullet"]])
+    html: "<ol><li>#{blockComment}a<ul><li>#{blockComment}b</li><li>#{blockComment}c</li></ul></li></ol>"
+
+  "blocks beginning with newlines":
+    document: createDocument(["\na", {}, ["quote"]], ["\nb", {}, []], ["\nc", {}, ["quote"]])
+    html: "<blockquote>#{blockComment}<br>a</blockquote><div>#{blockComment}<br>b</div><blockquote>#{blockComment}<br>c</blockquote>"
+
+  "blocks beginning with formatted text":
+    document: createDocument(["a", { bold: true }, ["quote"]], ["b", { italic: true }, []], ["c", { bold: true }, ["quote"]])
+    html: "<blockquote>#{blockComment}<strong>a</strong></blockquote><div>#{blockComment}<em>b</em></div><blockquote>#{blockComment}<strong>c</strong></blockquote>"
+
+  "text with newlines before block":
+    document: createDocument(["a\nb"], ["c", {}, ["quote"]])
+    html: "<div>#{blockComment}a<br>b</div><blockquote>#{blockComment}c</blockquote>"
+
+  "empty heading block":
+    document: createDocument(["", {}, ["heading1"]])
+    html: "<h1>#{blockComment}<br></h1>"
+
+  "two adjacent headings":
+    document: createDocument( ["a", {}, ["heading1"]], ["b", {}, ["heading1"]])
+    html: "<h1>#{blockComment}a</h1><h1>#{blockComment}b</h1>"
+
+  "heading in ordered list":
+    document: createDocument(["a", {}, ["numberList", "number", "heading1"]])
+    html: "<ol><li><h1>#{blockComment}a</h1></li></ol>"
+
+  "headings with formatted text":
+    document: createDocument(["a", { bold: true }, ["heading1"]], ["b", { italic: true, bold: true }, ["heading1"]])
+    html: "<h1>#{blockComment}<strong>a</strong></h1><h1>#{blockComment}<strong><em>b</em></strong></h1>"
+
+@eachFixture = (callback) ->
+  for name, details of @fixtures
+    callback(name, details)