@asd20/ui-next 2.15.1 → 2.17.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+# [2.17.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.16.0...ui-next-v2.17.0) (2026-08-05)
+
+
+### Features
+
+* add canonical video rendering ([295fbfd](https://github.com/academydistrict20/asd20-ui-next/commit/295fbfd38d3d66c2bc1e0070fb98a15ba6e51d02))
+
+# [2.16.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.15.1...ui-next-v2.16.0) (2026-08-04)
+
+
+### Features
+
+* support canonical TipTap tables ([179eca3](https://github.com/academydistrict20/asd20-ui-next/commit/179eca3f7c0e0f2f226c8d660d84e3564fbf28c2))
+
 ## [2.15.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.15.0...ui-next-v2.15.1) (2026-07-31)
 
 # [2.15.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.14.1...ui-next-v2.15.0) (2026-07-31)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "2.15.1",
+  "version": "2.17.0",
   "private": false,
   "description": "ASD20 UI component library for Vue 3.",
   "license": "MIT",

package/src/components/atoms/Asd20RichBodyContent/index.vue

@@ -114,5 +114,73 @@ export default {
   &__html {
     display: block;
   }
+
+  :deep(.tableWrapper) {
+    max-width: 100%;
+    margin: 0.75rem 0;
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+  }
+
+  :deep(.asd20-message-table) {
+    border-collapse: collapse;
+    font-size: 0.875rem;
+  }
+
+  :deep(.asd20-message-table th),
+  :deep(.asd20-message-table td) {
+    min-width: 3rem;
+    padding: 0.5rem;
+    border-bottom: 1px solid #cfd8e3;
+    vertical-align: top;
+  }
+
+  :deep(.asd20-message-table th) {
+    color: white;
+    background: #003b71;
+    font-weight: 600;
+  }
+
+  :deep(.asd20-message-table caption) {
+    padding: 0 0 0.5rem;
+    color: #263238;
+    font-weight: 600;
+    text-align: left;
+  }
+
+  :deep(.asd20-message-table th > :first-child),
+  :deep(.asd20-message-table td > :first-child) {
+    margin-top: 0;
+  }
+
+  :deep(.asd20-message-table th > :last-child),
+  :deep(.asd20-message-table td > :last-child) {
+    margin-bottom: 0;
+  }
+
+  :deep(.asd20-message-video) {
+    max-width: 100%;
+    margin: 0.75rem 0;
+  }
+
+  :deep(.asd20-message-video__description) {
+    margin: 0 0 0.5rem;
+  }
+
+  :deep(.asd20-message-video__frame) {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    aspect-ratio: 16 / 9;
+    background: #000;
+  }
+
+  :deep(.asd20-message-video__frame iframe) {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
 }
 </style>

package/src/components/atoms/Asd20RichBodyContent/messageDocumentRenderer.js

@@ -55,6 +55,23 @@ const MARK_TYPES = new Set([
   'subscript',
   'superscript',
 ])
+const TABLE_HEADER_SCOPES = new Set(['col', 'row', 'colgroup', 'rowgroup'])
+const VIDEO_TITLE_MAX_LENGTH = 200
+const VIDEO_DESCRIPTION_MAX_LENGTH = 1000
+const VIDEO_PROVIDER_RULES = Object.freeze([
+  {
+    host: 'www.youtube.com',
+    pathPattern: /^\/embed\/([A-Za-z0-9_-]{11})$/,
+  },
+  {
+    host: 'www.youtube-nocookie.com',
+    pathPattern: /^\/embed\/([A-Za-z0-9_-]{11})$/,
+  },
+  {
+    host: 'player.vimeo.com',
+    pathPattern: /^\/video\/([0-9]+)$/,
+  },
+])
 const MARK_RENDER_ORDER = Object.freeze({
   link: 0,
   bold: 1,
@@ -78,10 +95,10 @@ const NODE_ATTRIBUTE_NAMES = Object.freeze({
   listItem: [],
   image: ['src', 'alt', 'title', 'width', 'height'],
   videoEmbed: ['src', 'title', 'descriptiveText'],
-  table: [],
+  table: ['caption'],
   tableRow: [],
   tableCell: ['colspan', 'rowspan', 'colwidth', 'align'],
-  tableHeader: ['colspan', 'rowspan', 'colwidth', 'align'],
+  tableHeader: ['colspan', 'rowspan', 'colwidth', 'align', 'scope'],
   tableauBlock: [
     'blockId',
     'src',
@@ -195,6 +212,45 @@ function isSafeResource(value, allowHash = false) {
   }
 }
 
+function isCanonicalVideoEmbedSource(value) {
+  if (typeof value !== 'string' || !value) return false
+
+  try {
+    const url = new URL(value)
+    if (
+      url.protocol !== 'https:' ||
+      url.username ||
+      url.password ||
+      url.port ||
+      url.search ||
+      url.hash
+    ) {
+      return false
+    }
+
+    const rule = VIDEO_PROVIDER_RULES.find(
+      candidate => candidate.host === url.hostname.toLowerCase()
+    )
+    return Boolean(
+      rule &&
+        rule.pathPattern.test(url.pathname) &&
+        value === `https://${rule.host}${url.pathname}`
+    )
+  } catch (_error) {
+    return false
+  }
+}
+
+function validateRequiredCanonicalText(node, name, path, maximumLength) {
+  const attrIssue = validateStringAttribute(node, name, path, true)
+  if (attrIssue) return attrIssue
+
+  const value = node.attrs[name]
+  return !value || value !== value.trim() || value.length > maximumLength
+    ? issue('malformed-attribute', path, name)
+    : null
+}
+
 function validateMarks(marks, path) {
   if (marks === undefined) return null
   if (!Array.isArray(marks)) return issue('malformed-marks', path)
@@ -395,17 +451,36 @@ function validateNode(node, path) {
     return validateAtom(node, path)
   }
   if (node.type === 'videoEmbed') {
-    const srcIssue = validateStringAttribute(node, 'src', path)
-    if (srcIssue || (node.attrs?.src && !isSafeResource(node.attrs.src))) {
+    const srcIssue = validateStringAttribute(node, 'src', path, true)
+    if (srcIssue || !isCanonicalVideoEmbedSource(node.attrs?.src)) {
       return srcIssue || issue('unsafe-resource', path, 'src')
     }
-    for (const name of ['title', 'descriptiveText']) {
-      const attrIssue = validateStringAttribute(node, name, path)
-      if (attrIssue) return attrIssue
-    }
+    const titleIssue = validateRequiredCanonicalText(
+      node,
+      'title',
+      path,
+      VIDEO_TITLE_MAX_LENGTH
+    )
+    if (titleIssue) return titleIssue
+    const descriptionIssue = validateRequiredCanonicalText(
+      node,
+      'descriptiveText',
+      path,
+      VIDEO_DESCRIPTION_MAX_LENGTH
+    )
+    if (descriptionIssue) return descriptionIssue
     return validateAtom(node, path)
   }
   if (node.type === 'table') {
+    const captionIssue = validateStringAttribute(node, 'caption', path)
+    if (captionIssue) return captionIssue
+    if (
+      node.attrs?.caption !== undefined &&
+      node.attrs?.caption !== null &&
+      !node.attrs.caption.trim()
+    ) {
+      return issue('malformed-attribute', path, 'caption')
+    }
     return validateChildren(node, path, new Set(['tableRow']), true)
   }
   if (node.type === 'tableRow') {
@@ -421,6 +496,7 @@ function validateNode(node, path) {
     const rowspan = node.attrs?.rowspan ?? 1
     const colwidth = node.attrs?.colwidth
     const align = node.attrs?.align
+    const scope = node.attrs?.scope
     if (!Number.isInteger(colspan) || colspan < 1) {
       return issue('malformed-attribute', path, 'colspan')
     }
@@ -443,6 +519,14 @@ function validateNode(node, path) {
     ) {
       return issue('malformed-attribute', path, 'align')
     }
+    if (
+      node.type === 'tableHeader' &&
+      scope !== undefined &&
+      scope !== null &&
+      !TABLE_HEADER_SCOPES.has(scope)
+    ) {
+      return issue('malformed-attribute', path, 'scope')
+    }
     return validateChildren(node, path, STANDARD_BLOCK_NODE_TYPES, true)
   }
   if (node.type === 'tableauBlock') {
@@ -563,14 +647,15 @@ function renderTableCell(node, tagName) {
   const rowspan = node.attrs?.rowspan ?? 1
   const colwidth = node.attrs?.colwidth
   const align = node.attrs?.align
+  const scope = node.attrs?.scope
   return `<${tagName}${attribute('colspan', colspan)}${attribute(
     'rowspan',
     rowspan
   )}${
     Array.isArray(colwidth) ? attribute('colwidth', colwidth.join(',')) : ''
-  }${align ? attribute('style', `text-align: ${align}`) : ''}>${renderChildren(
-    node
-  )}</${tagName}>`
+  }${align ? attribute('style', `text-align: ${align}`) : ''}${
+    scope ? attribute('scope', scope) : ''
+  }>${renderChildren(node)}</${tagName}>`
 }
 
 function renderTable(node) {
@@ -596,12 +681,15 @@ function renderTable(node) {
         : `<col style="min-width: ${minimumWidth}px;">`
     )
     .join('')
-  return `<table${attribute(
+  const caption = node.attrs?.caption
+    ? `<caption>${escapeHtml(node.attrs.caption)}</caption>`
+    : ''
+  return `<div class="tableWrapper"><table class="asd20-message-table"${attribute(
     'style',
     tableStyle
-  )}><colgroup>${colgroup}</colgroup><tbody>${renderChildren(
+  )}>${caption}<colgroup>${colgroup}</colgroup><tbody>${renderChildren(
     node
-  )}</tbody></table>`
+  )}</tbody></table></div>`
 }
 
 function renderStandardNode(node) {
@@ -643,16 +731,25 @@ function renderStandardNode(node) {
     )}${attribute('height', node.attrs.height)}>`
   }
   if (node.type === 'videoEmbed') {
-    return `<div data-cc-node="video"${attribute(
+    return `<div class="asd20-message-video" data-cc-node="video"${attribute(
       'data-src',
       node.attrs.src
     )}${attribute('data-title', node.attrs.title)}${attribute(
       'data-descriptive-text',
       node.attrs.descriptiveText
-    )}><iframe${attribute('src', node.attrs.src)}${attribute(
+    )}><p class="asd20-message-video__description">${escapeHtml(
+      node.attrs.descriptiveText
+    )}</p><div class="asd20-message-video__frame"><iframe${attribute(
+      'src',
+      node.attrs.src
+    )}${attribute(
       'title',
-      node.attrs.title || 'Embedded video'
-    )}></iframe></div>`
+      node.attrs.title
+    )} loading="lazy" referrerpolicy="strict-origin-when-cross-origin"${attribute(
+      'allowfullscreen',
+      '',
+      true
+    )}></iframe></div></div>`
   }
   if (node.type === 'table') return renderTable(node)
   if (node.type === 'tableRow') return `<tr>${renderChildren(node)}</tr>`