@instructure/ui-truncate-text 11.7.4-snapshot-136 → 11.7.4-snapshot-142

package/CHANGELOG.md

@@ -3,11 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.4-snapshot-136](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-136) (2026-07-24)
+## [11.7.4-snapshot-142](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-142) (2026-07-24)
 
 
 ### Bug Fixes
 
+* **many:** do not allow javascript: and data: hrefs ([4a0ac03](https://github.com/instructure/instructure-ui/commit/4a0ac038c6a4102646e04d27c1c3251f97367822))
+* **ui-truncate-text,ui-scripts:** replace innerHTML with manual DOM construction ([434d381](https://github.com/instructure/instructure-ui/commit/434d3810892129e9abcff94acd3efea3397e268c))
 * **ui-truncate-text:** remove lineHeight as a theme input and use the 1.2 as the default ([d4f938f](https://github.com/instructure/instructure-ui/commit/d4f938f2fd3a8618e716987c054f17060a5009e5))
 
 

package/es/TruncateText/v1/utils/truncate.js

@@ -22,7 +22,6 @@
  * SOFTWARE.
  */
 
-import escapeHtml from 'escape-html';
 import { cloneArray } from '@instructure/ui-utils';
 import { logError as error } from '@instructure/console';
 import { getCSSStyleDeclaration, getBoundingClientRect, isVisible } from '@instructure/ui-dom-utils';
@@ -157,32 +156,31 @@ class Truncator {
     }
     return nodeDataIndexes;
   }
-  domString(data) {
-    let html = '';
+  checkFit(data) {
+    const node = this._options.maxLines === 'auto' ? this._stage : this._parent;
+    let fits = true;
+    while (this._stage.firstChild) {
+      this._stage.removeChild(this._stage.firstChild);
+    }
     for (let i = 0; i < data.length; i++) {
-      const mapItem = this._nodeMap[i];
+      const {
+        node: mapNode
+      } = this._nodeMap[i];
       const text = data[i].join('');
-      const safeText = escapeHtml(text);
-      if (mapItem.node.nodeType === Node.ELEMENT_NODE) {
-        const name = mapItem.node.nodeName;
-        const attr = mapItem.node.attributes;
-        let attributes = '';
+      if (mapNode.nodeType === Node.ELEMENT_NODE) {
+        const el = document.createElement(mapNode.nodeName);
+        const attr = mapNode.attributes;
         for (let j = 0; j < attr.length; j++) {
           const att = attr[j];
-          attributes += ` ${att.nodeName}="${att.nodeValue}"`;
+          el.setAttribute(att.nodeName, att.nodeValue ?? '');
         }
-        html += `<${name}${attributes}>${safeText}</${name}>`;
-      } else if (mapItem.node.nodeType === 3) {
-        html += safeText;
+        el.textContent = text;
+        this._stage.appendChild(el);
+      } else if (mapNode.nodeType === Node.TEXT_NODE) {
+        this._stage.appendChild(document.createTextNode(text));
       }
     }
-    return html;
-  }
-  checkFit(data) {
-    const html = this.domString(data);
-    const node = this._options.maxLines === 'auto' ? this._stage : this._parent;
-    let fits = true;
-    this._stage.innerHTML = html;
+
     // allow a 0.5 px margin of error for browser calculation discrepancies
     if (getBoundingClientRect(node).height - this._maxHeight > 0.5) {
       fits = false;

package/es/TruncateText/v2/utils/truncate.js

@@ -22,7 +22,6 @@
  * SOFTWARE.
  */
 
-import escapeHtml from 'escape-html';
 import { cloneArray } from '@instructure/ui-utils';
 import { logError as error } from '@instructure/console';
 import { getCSSStyleDeclaration, getBoundingClientRect, isVisible } from '@instructure/ui-dom-utils';
@@ -157,32 +156,31 @@ class Truncator {
     }
     return nodeDataIndexes;
   }
-  domString(data) {
-    let html = '';
+  checkFit(data) {
+    const node = this._options.maxLines === 'auto' ? this._stage : this._parent;
+    let fits = true;
+    while (this._stage.firstChild) {
+      this._stage.removeChild(this._stage.firstChild);
+    }
     for (let i = 0; i < data.length; i++) {
-      const mapItem = this._nodeMap[i];
+      const {
+        node: mapNode
+      } = this._nodeMap[i];
       const text = data[i].join('');
-      const safeText = escapeHtml(text);
-      if (mapItem.node.nodeType === Node.ELEMENT_NODE) {
-        const name = mapItem.node.nodeName;
-        const attr = mapItem.node.attributes;
-        let attributes = '';
+      if (mapNode.nodeType === Node.ELEMENT_NODE) {
+        const el = document.createElement(mapNode.nodeName);
+        const attr = mapNode.attributes;
         for (let j = 0; j < attr.length; j++) {
           const att = attr[j];
-          attributes += ` ${att.nodeName}="${att.nodeValue}"`;
+          el.setAttribute(att.nodeName, att.nodeValue ?? '');
         }
-        html += `<${name}${attributes}>${safeText}</${name}>`;
-      } else if (mapItem.node.nodeType === 3) {
-        html += safeText;
+        el.textContent = text;
+        this._stage.appendChild(el);
+      } else if (mapNode.nodeType === Node.TEXT_NODE) {
+        this._stage.appendChild(document.createTextNode(text));
       }
     }
-    return html;
-  }
-  checkFit(data) {
-    const html = this.domString(data);
-    const node = this._options.maxLines === 'auto' ? this._stage : this._parent;
-    let fits = true;
-    this._stage.innerHTML = html;
+
     // allow a 0.5 px margin of error for browser calculation discrepancies
     if (getBoundingClientRect(node).height - this._maxHeight > 0.5) {
       fits = false;

package/lib/TruncateText/v1/utils/truncate.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _escapeHtml = _interopRequireDefault(require("escape-html"));
 var _cloneArray = require("@instructure/ui-utils/lib/cloneArray.js");
 var _console = require("@instructure/console");
 var _getCSSStyleDeclaration = require("@instructure/ui-dom-utils/lib/getCSSStyleDeclaration.js");
@@ -166,32 +165,31 @@ class Truncator {
     }
     return nodeDataIndexes;
   }
-  domString(data) {
-    let html = '';
+  checkFit(data) {
+    const node = this._options.maxLines === 'auto' ? this._stage : this._parent;
+    let fits = true;
+    while (this._stage.firstChild) {
+      this._stage.removeChild(this._stage.firstChild);
+    }
     for (let i = 0; i < data.length; i++) {
-      const mapItem = this._nodeMap[i];
+      const {
+        node: mapNode
+      } = this._nodeMap[i];
       const text = data[i].join('');
-      const safeText = (0, _escapeHtml.default)(text);
-      if (mapItem.node.nodeType === Node.ELEMENT_NODE) {
-        const name = mapItem.node.nodeName;
-        const attr = mapItem.node.attributes;
-        let attributes = '';
+      if (mapNode.nodeType === Node.ELEMENT_NODE) {
+        const el = document.createElement(mapNode.nodeName);
+        const attr = mapNode.attributes;
         for (let j = 0; j < attr.length; j++) {
           const att = attr[j];
-          attributes += ` ${att.nodeName}="${att.nodeValue}"`;
+          el.setAttribute(att.nodeName, att.nodeValue ?? '');
         }
-        html += `<${name}${attributes}>${safeText}</${name}>`;
-      } else if (mapItem.node.nodeType === 3) {
-        html += safeText;
+        el.textContent = text;
+        this._stage.appendChild(el);
+      } else if (mapNode.nodeType === Node.TEXT_NODE) {
+        this._stage.appendChild(document.createTextNode(text));
       }
     }
-    return html;
-  }
-  checkFit(data) {
-    const html = this.domString(data);
-    const node = this._options.maxLines === 'auto' ? this._stage : this._parent;
-    let fits = true;
-    this._stage.innerHTML = html;
+
     // allow a 0.5 px margin of error for browser calculation discrepancies
     if ((0, _getBoundingClientRect.getBoundingClientRect)(node).height - this._maxHeight > 0.5) {
       fits = false;

package/lib/TruncateText/v2/utils/truncate.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _escapeHtml = _interopRequireDefault(require("escape-html"));
 var _cloneArray = require("@instructure/ui-utils/lib/cloneArray.js");
 var _console = require("@instructure/console");
 var _getCSSStyleDeclaration = require("@instructure/ui-dom-utils/lib/getCSSStyleDeclaration.js");
@@ -166,32 +165,31 @@ class Truncator {
     }
     return nodeDataIndexes;
   }
-  domString(data) {
-    let html = '';
+  checkFit(data) {
+    const node = this._options.maxLines === 'auto' ? this._stage : this._parent;
+    let fits = true;
+    while (this._stage.firstChild) {
+      this._stage.removeChild(this._stage.firstChild);
+    }
     for (let i = 0; i < data.length; i++) {
-      const mapItem = this._nodeMap[i];
+      const {
+        node: mapNode
+      } = this._nodeMap[i];
       const text = data[i].join('');
-      const safeText = (0, _escapeHtml.default)(text);
-      if (mapItem.node.nodeType === Node.ELEMENT_NODE) {
-        const name = mapItem.node.nodeName;
-        const attr = mapItem.node.attributes;
-        let attributes = '';
+      if (mapNode.nodeType === Node.ELEMENT_NODE) {
+        const el = document.createElement(mapNode.nodeName);
+        const attr = mapNode.attributes;
         for (let j = 0; j < attr.length; j++) {
           const att = attr[j];
-          attributes += ` ${att.nodeName}="${att.nodeValue}"`;
+          el.setAttribute(att.nodeName, att.nodeValue ?? '');
         }
-        html += `<${name}${attributes}>${safeText}</${name}>`;
-      } else if (mapItem.node.nodeType === 3) {
-        html += safeText;
+        el.textContent = text;
+        this._stage.appendChild(el);
+      } else if (mapNode.nodeType === Node.TEXT_NODE) {
+        this._stage.appendChild(document.createTextNode(text));
       }
     }
-    return html;
-  }
-  checkFit(data) {
-    const html = this.domString(data);
-    const node = this._options.maxLines === 'auto' ? this._stage : this._parent;
-    let fits = true;
-    this._stage.innerHTML = html;
+
     // allow a 0.5 px margin of error for browser calculation discrepancies
     if ((0, _getBoundingClientRect.getBoundingClientRect)(node).height - this._maxHeight > 0.5) {
       fits = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-truncate-text",
-  "version": "11.7.4-snapshot-136",
+  "version": "11.7.4-snapshot-142",
   "description": "A TruncateText component made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,25 +15,23 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "escape-html": "^1.0.3",
-    "@instructure/console": "11.7.4-snapshot-136",
-    "@instructure/shared-types": "11.7.4-snapshot-136",
-    "@instructure/debounce": "11.7.4-snapshot-136",
-    "@instructure/emotion": "11.7.4-snapshot-136",
-    "@instructure/ui-dom-utils": "11.7.4-snapshot-136",
-    "@instructure/ui-react-utils": "11.7.4-snapshot-136",
-    "@instructure/ui-themes": "11.7.4-snapshot-136",
-    "@instructure/ui-utils": "11.7.4-snapshot-136"
+    "@instructure/debounce": "11.7.4-snapshot-142",
+    "@instructure/console": "11.7.4-snapshot-142",
+    "@instructure/emotion": "11.7.4-snapshot-142",
+    "@instructure/shared-types": "11.7.4-snapshot-142",
+    "@instructure/ui-dom-utils": "11.7.4-snapshot-142",
+    "@instructure/ui-react-utils": "11.7.4-snapshot-142",
+    "@instructure/ui-themes": "11.7.4-snapshot-142",
+    "@instructure/ui-utils": "11.7.4-snapshot-142"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "16.3.2",
-    "@types/escape-html": "^1.0.4",
     "vitest": "^4.1.9",
-    "@instructure/ui-babel-preset": "11.7.4-snapshot-136",
-    "@instructure/ui-axe-check": "11.7.4-snapshot-136",
-    "@instructure/ui-text": "11.7.4-snapshot-136",
-    "@instructure/ui-color-utils": "11.7.4-snapshot-136"
+    "@instructure/ui-axe-check": "11.7.4-snapshot-142",
+    "@instructure/ui-color-utils": "11.7.4-snapshot-142",
+    "@instructure/ui-babel-preset": "11.7.4-snapshot-142",
+    "@instructure/ui-text": "11.7.4-snapshot-142"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/TruncateText/v1/utils/truncate.ts

@@ -22,8 +22,6 @@
  * SOFTWARE.
  */
 
-import escapeHtml from 'escape-html'
-
 import { cloneArray } from '@instructure/ui-utils'
 import { logError as error } from '@instructure/console'
 import {
@@ -210,35 +208,32 @@ class Truncator {
     return nodeDataIndexes
   }
 
-  domString(data: string[][]) {
-    let html = ''
+  checkFit(data: string[][]) {
+    const node = this._options.maxLines === 'auto' ? this._stage : this._parent
+    let fits = true
+
+    while (this._stage.firstChild) {
+      this._stage.removeChild(this._stage.firstChild)
+    }
 
     for (let i = 0; i < data.length; i++) {
-      const mapItem = this._nodeMap[i]
+      const { node: mapNode } = this._nodeMap[i]
       const text = data[i].join('')
-      const safeText = escapeHtml(text)
 
-      if (mapItem.node.nodeType === Node.ELEMENT_NODE) {
-        const name = mapItem.node.nodeName
-        const attr = (mapItem.node as Element).attributes
-        let attributes = ''
+      if (mapNode.nodeType === Node.ELEMENT_NODE) {
+        const el = document.createElement(mapNode.nodeName)
+        const attr = (mapNode as Element).attributes
         for (let j = 0; j < attr.length; j++) {
           const att = attr[j]
-          attributes += ` ${att.nodeName}="${att.nodeValue}"`
+          el.setAttribute(att.nodeName, att.nodeValue ?? '')
         }
-        html += `<${name}${attributes}>${safeText}</${name}>`
-      } else if (mapItem.node.nodeType === 3) {
-        html += safeText
+        el.textContent = text
+        this._stage.appendChild(el)
+      } else if (mapNode.nodeType === Node.TEXT_NODE) {
+        this._stage.appendChild(document.createTextNode(text))
       }
     }
-    return html
-  }
 
-  checkFit(data: string[][]) {
-    const html = this.domString(data)
-    const node = this._options.maxLines === 'auto' ? this._stage : this._parent
-    let fits = true
-    this._stage.innerHTML = html
     // allow a 0.5 px margin of error for browser calculation discrepancies
     if (getBoundingClientRect(node).height - this._maxHeight > 0.5) {
       fits = false

package/src/TruncateText/v2/utils/truncate.ts

@@ -22,8 +22,6 @@
  * SOFTWARE.
  */
 
-import escapeHtml from 'escape-html'
-
 import { cloneArray } from '@instructure/ui-utils'
 import { logError as error } from '@instructure/console'
 import {
@@ -210,35 +208,32 @@ class Truncator {
     return nodeDataIndexes
   }
 
-  domString(data: string[][]) {
-    let html = ''
+  checkFit(data: string[][]) {
+    const node = this._options.maxLines === 'auto' ? this._stage : this._parent
+    let fits = true
+
+    while (this._stage.firstChild) {
+      this._stage.removeChild(this._stage.firstChild)
+    }
 
     for (let i = 0; i < data.length; i++) {
-      const mapItem = this._nodeMap[i]
+      const { node: mapNode } = this._nodeMap[i]
       const text = data[i].join('')
-      const safeText = escapeHtml(text)
 
-      if (mapItem.node.nodeType === Node.ELEMENT_NODE) {
-        const name = mapItem.node.nodeName
-        const attr = (mapItem.node as Element).attributes
-        let attributes = ''
+      if (mapNode.nodeType === Node.ELEMENT_NODE) {
+        const el = document.createElement(mapNode.nodeName)
+        const attr = (mapNode as Element).attributes
         for (let j = 0; j < attr.length; j++) {
           const att = attr[j]
-          attributes += ` ${att.nodeName}="${att.nodeValue}"`
+          el.setAttribute(att.nodeName, att.nodeValue ?? '')
         }
-        html += `<${name}${attributes}>${safeText}</${name}>`
-      } else if (mapItem.node.nodeType === 3) {
-        html += safeText
+        el.textContent = text
+        this._stage.appendChild(el)
+      } else if (mapNode.nodeType === Node.TEXT_NODE) {
+        this._stage.appendChild(document.createTextNode(text))
       }
     }
-    return html
-  }
 
-  checkFit(data: string[][]) {
-    const html = this.domString(data)
-    const node = this._options.maxLines === 'auto' ? this._stage : this._parent
-    let fits = true
-    this._stage.innerHTML = html
     // allow a 0.5 px margin of error for browser calculation discrepancies
     if (getBoundingClientRect(node).height - this._maxHeight > 0.5) {
       fits = false