Allow custom HTML attributes in blocks

In particular, keeps the assigned language attribute assigned to code blocks. This is useful for syntax highlighting libraries that use the language attribute to determine the language of the code block.
basecamp · Mar 8, 2024 · 04b32e5 · 04b32e5
1 parent 3f22606
commit 04b32e5
Show file tree

Hide file tree

Showing 11 changed files with 81 additions and 18 deletions.
diff --git a/src/inspector/templates/document.js b/src/inspector/templates/document.js
@@ -13,6 +13,10 @@ window.JST["trix/inspector/templates/document"] = function() {
         Attributes: ${JSON.stringify(block.attributes)}
       </div>
 
+      <div class="htmlAttributes">
+        HTML Attributes: ${JSON.stringify(block.htmlAttributes)}
+      </div>
+
       <div class="text">
         <div class="title">
           Text: ${text.id}, Pieces: ${pieces.length}, Length: ${text.getLength()}

diff --git a/src/test/test_helpers/fixtures/fixtures.js b/src/test/test_helpers/fixtures/fixtures.js
@@ -41,9 +41,9 @@ const { css } = config
 
 const createDocument = function (...parts) {
   const blocks = parts.map((part) => {
-    const [ string, textAttributes, blockAttributes ] = Array.from(part)
+    const [ string, textAttributes, blockAttributes, htmlAttributes = {} ] = Array.from(part)
     const text = Text.textForStringWithAttributes(string, textAttributes)
-    return new Block(text, blockAttributes)
+    return new Block(text, blockAttributes, htmlAttributes)
   })
 
   return new Document(blocks)
@@ -192,6 +192,12 @@ export const fixtures = {
     html: `<pre>${blockComment}12\n3</pre>`,
   },
 
+  "code with custom language": {
+    document: createDocument([ "puts \"Hello world!\"", {}, [ "code" ], { "language": "ruby" } ]),
+    html: `<pre language="ruby">${blockComment}puts "Hello world!"</pre>`,
+    serializedHTML: "<pre language=\"ruby\">puts \"Hello world!\"</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>`,

diff --git a/src/test/unit/html_parser_test.js b/src/test/unit/html_parser_test.js
@@ -17,7 +17,7 @@ const cursorTargetLeft = createCursorTarget("left").outerHTML
 const cursorTargetRight = createCursorTarget("right").outerHTML
 
 testGroup("HTMLParser", () => {
-  eachFixture((name, { html, serializedHTML, document }) => {
+  eachFixture((name, { html, document }) => {
     test(name, () => {
       const parsedDocument = HTMLParser.parse(html).getDocument()
       assert.documentHTMLEqual(parsedDocument.copyUsingObjectsFromDocument(document), html)

diff --git a/src/trix/config/block_attributes.js b/src/trix/config/block_attributes.js
@@ -16,6 +16,7 @@ const attributes = {
   code: {
     tagName: "pre",
     terminal: true,
+    htmlAttributes: [ "language" ],
     text: {
       plaintext: true,
     },

diff --git a/src/trix/models/block.js b/src/trix/models/block.js
@@ -5,19 +5,21 @@ import {
   arraysAreEqual,
   getBlockConfig,
   getListAttributeNames,
+  objectsAreEqual,
   spliceArray,
 } from "trix/core/helpers"
 
 export default class Block extends TrixObject {
   static fromJSON(blockJSON) {
     const text = Text.fromJSON(blockJSON.text)
-    return new this(text, blockJSON.attributes)
+    return new this(text, blockJSON.attributes, blockJSON.htmlAttributes)
   }
 
-  constructor(text, attributes) {
+  constructor(text, attributes, htmlAttributes) {
     super(...arguments)
     this.text = applyBlockBreakToText(text || new Text())
     this.attributes = attributes || []
+    this.htmlAttributes = htmlAttributes || {}
   }
 
   isEmpty() {
@@ -27,19 +29,19 @@ export default class Block extends TrixObject {
   isEqualTo(block) {
     if (super.isEqualTo(block)) return true
 
-    return this.text.isEqualTo(block?.text) && arraysAreEqual(this.attributes, block?.attributes)
+    return this.text.isEqualTo(block?.text) && arraysAreEqual(this.attributes, block?.attributes) && objectsAreEqual(this.htmlAttributes, block?.htmlAttributes)
   }
 
   copyWithText(text) {
-    return new Block(text, this.attributes)
+    return new Block(text, this.attributes, this.htmlAttributes)
   }
 
   copyWithoutText() {
     return this.copyWithText(null)
   }
 
   copyWithAttributes(attributes) {
-    return new Block(this.text, attributes)
+    return new Block(this.text, attributes, this.htmlAttributes)
   }
 
   copyWithoutAttributes() {
@@ -60,6 +62,11 @@ export default class Block extends TrixObject {
     return this.copyWithAttributes(attributes)
   }
 
+  addHTMLAttribute(attribute, value) {
+    const htmlAttributes = Object.assign({}, this.htmlAttributes, { [attribute]: value })
+    return new Block(this.text, this.attributes, htmlAttributes)
+  }
+
   removeAttribute(attribute) {
     const { listAttribute } = getBlockConfig(attribute)
     const attributes = removeLastValue(removeLastValue(this.attributes, attribute), listAttribute)
@@ -173,6 +180,7 @@ export default class Block extends TrixObject {
     return {
       text: this.text,
       attributes: this.attributes,
+      htmlAttributes: this.htmlAttributes,
     }
   }
 

diff --git a/src/trix/models/composition.js b/src/trix/models/composition.js
@@ -341,6 +341,16 @@ export default class Composition extends BasicObject {
     }
   }
 
+  setHTMLAtributeAtPosition(position, attributeName, value) {
+    const block = this.document.getBlockAtPosition(position)
+    const allowedHTMLAttributes = getBlockConfig(block.getLastAttribute())?.htmlAttributes
+
+    if (block && allowedHTMLAttributes?.includes(attributeName)) {
+      const newDocument = this.document.setHTMLAttributeAtPosition(position, attributeName, value)
+      this.setDocument(newDocument)
+    }
+  }
+
   setTextAttribute(attributeName, value) {
     const selectedRange = this.getSelectedRange()
     if (!selectedRange) return

diff --git a/src/trix/models/document.js b/src/trix/models/document.js
@@ -282,6 +282,12 @@ export default class Document extends TrixObject {
     return this.removeAttributeAtRange(attribute, range)
   }
 
+  setHTMLAttributeAtPosition(position, name, value) {
+    const block = this.getBlockAtPosition(position)
+    const updatedBlock = block.addHTMLAttribute(name, value)
+    return this.replaceBlock(block, updatedBlock)
+  }
+
   insertBlockBreakAtRange(range) {
     let blocks
     range = normalizeRange(range)

diff --git a/src/trix/models/editor.js b/src/trix/models/editor.js
@@ -137,6 +137,11 @@ export default class Editor {
     return this.composition.removeCurrentAttribute(name)
   }
 
+  // HTML attributes
+  setHTMLAtributeAtPosition(position, name, value) {
+    this.composition.setHTMLAtributeAtPosition(position, name, value)
+  }
+
   // Nesting level
 
   canDecreaseNestingLevel() {

diff --git a/src/trix/models/html_parser.js b/src/trix/models/html_parser.js
@@ -33,9 +33,9 @@ const pieceForAttachment = (attachment, attributes = {}) => {
   return { attachment, attributes, type }
 }
 
-const blockForAttributes = (attributes = {}) => {
+const blockForAttributes = (attributes = {}, htmlAttributes = {}) => {
   const text = []
-  return { text, attributes }
+  return { text, attributes, htmlAttributes }
 }
 
 const parseTrixDataAttribute = (element, name) => {
@@ -133,8 +133,9 @@ export default class HTMLParser extends BasicObject {
       return this.appendStringWithAttributes("\n")
     } else if (element === this.containerElement || this.isBlockElement(element)) {
       const attributes = this.getBlockAttributes(element)
+      const htmlAttributes = this.getBlockHTMLAttributes(element)
       if (!arraysAreEqual(attributes, this.currentBlock?.attributes)) {
-        this.currentBlock = this.appendBlockForAttributesWithElement(attributes, element)
+        this.currentBlock = this.appendBlockForAttributesWithElement(attributes, element, htmlAttributes)
         this.currentBlockElement = element
       }
     }
@@ -147,9 +148,10 @@ export default class HTMLParser extends BasicObject {
     if (elementIsBlockElement && !this.isBlockElement(element.firstChild)) {
       if (!this.isInsignificantTextNode(element.firstChild) || !this.isBlockElement(element.firstElementChild)) {
         const attributes = this.getBlockAttributes(element)
+        const htmlAttributes = this.getBlockHTMLAttributes(element)
         if (element.firstChild) {
           if (!(currentBlockContainsElement && arraysAreEqual(attributes, this.currentBlock.attributes))) {
-            this.currentBlock = this.appendBlockForAttributesWithElement(attributes, element)
+            this.currentBlock = this.appendBlockForAttributesWithElement(attributes, element, htmlAttributes)
             this.currentBlockElement = element
           } else {
             return this.appendStringWithAttributes("\n")
@@ -233,9 +235,9 @@ export default class HTMLParser extends BasicObject {
 
   // Document construction
 
-  appendBlockForAttributesWithElement(attributes, element) {
+  appendBlockForAttributesWithElement(attributes, element, htmlAttributes = {}) {
     this.blockElements.push(element)
-    const block = blockForAttributes(attributes)
+    const block = blockForAttributes(attributes, htmlAttributes)
     this.blocks.push(block)
     return block
   }
@@ -350,6 +352,20 @@ export default class HTMLParser extends BasicObject {
     return attributes.reverse()
   }
 
+  getBlockHTMLAttributes(element) {
+    const attributes = {}
+    const blockConfig = Object.values(config.blockAttributes).find(c => c.tagName === tagName(element))
+    const allowedAttributes = blockConfig?.htmlAttributes || []
+
+    allowedAttributes.forEach((attribute) => {
+      if (element.hasAttribute(attribute)) {
+        attributes[attribute] = element.getAttribute(attribute)
+      }
+    })
+
+    return attributes
+  }
+
   findBlockElementAncestors(element) {
     const ancestors = []
     while (element && element !== this.containerElement) {

diff --git a/src/trix/models/html_sanitizer.js b/src/trix/models/html_sanitizer.js
@@ -2,7 +2,7 @@ import BasicObject from "trix/core/basic_object"
 
 import { nodeIsAttachmentElement, removeNode, tagName, walkTree } from "trix/core/helpers"
 
-const DEFAULT_ALLOWED_ATTRIBUTES = "style href src width height class".split(" ")
+const DEFAULT_ALLOWED_ATTRIBUTES = "style href src width height language class".split(" ")
 const DEFAULT_FORBIDDEN_PROTOCOLS = "javascript:".split(" ")
 const DEFAULT_FORBIDDEN_ELEMENTS = "script iframe form".split(" ")
 

diff --git a/src/trix/views/block_view.js b/src/trix/views/block_view.js
@@ -42,19 +42,26 @@ export default class BlockView extends ObjectView {
   }
 
   createContainerElement(depth) {
-    let attributes, className
+    const attributes = {}
+    let className
     const attributeName = this.attributes[depth]
 
-    const { tagName } = getBlockConfig(attributeName)
+    const { tagName, htmlAttributes } = getBlockConfig(attributeName)
     if (depth === 0 && this.block.isRTL()) {
-      attributes = { dir: "rtl" }
+      Object.assign(attributes, { dir: "rtl" })
     }
 
     if (attributeName === "attachmentGallery") {
       const size = this.block.getBlockBreakPosition()
       className = `${css.attachmentGallery} ${css.attachmentGallery}--${size}`
     }
 
+    Object.entries(this.block.htmlAttributes).forEach(([ name, value ]) => {
+      if (htmlAttributes.includes(name)) {
+        attributes[name] = value
+      }
+    })
+
     return makeElement({ tagName, className, attributes })
   }