@asd20/ui-next 2.16.0 → 2.18.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+# [2.18.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.17.0...ui-next-v2.18.0) (2026-08-06)
+
+
+### Features
+
+* add tiptap gallery support ([7371f56](https://github.com/academydistrict20/asd20-ui-next/commit/7371f561c6c0a3e6a2275a9537beba72c86e6837))
+
+# [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)
 
 

package/package.json

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

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

@@ -157,5 +157,61 @@ export default {
   :deep(.asd20-message-table td > :last-child) {
     margin-bottom: 0;
   }
+
+  :deep(.asd20-message-image-gallery) {
+    box-sizing: border-box;
+    max-width: 100%;
+    margin: 1rem 0;
+    overflow: hidden;
+  }
+
+  :deep(.asd20-message-image-gallery__images) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    width: 100%;
+    height: auto !important;
+    max-height: min(32rem, 70vh) !important;
+    overflow: hidden;
+  }
+
+  :deep(.asd20-message-image-gallery__images > img) {
+    box-sizing: border-box;
+    display: block;
+    flex: 0 1 auto;
+    width: auto !important;
+    min-width: 0;
+    max-width: none !important;
+    height: auto !important;
+    max-height: min(32rem, 70vh) !important;
+    margin: 0 !important;
+    object-fit: contain;
+  }
+
+  :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

@@ -27,6 +27,7 @@ const STANDARD_BLOCK_NODE_TYPES = new Set([
   'bulletList',
   'orderedList',
   'image',
+  'imageGallery',
   'videoEmbed',
   'table',
 ])
@@ -56,6 +57,22 @@ const MARK_TYPES = new Set([
   '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,6 +95,7 @@ const NODE_ATTRIBUTE_NAMES = Object.freeze({
   orderedList: ['start', 'type'],
   listItem: [],
   image: ['src', 'alt', 'title', 'width', 'height'],
+  imageGallery: ['images'],
   videoEmbed: ['src', 'title', 'descriptiveText'],
   table: ['caption'],
   tableRow: [],
@@ -196,6 +214,57 @@ function isSafeResource(value, allowHash = false) {
   }
 }
 
+function isSafeImageResource(value) {
+  if (typeof value !== 'string' || !value.trim()) return false
+  if (value.trim().startsWith('#')) return false
+
+  try {
+    const url = new URL(value.trim(), 'https://ui-next.invalid')
+    return url.protocol === 'http:' || url.protocol === 'https:'
+  } catch (_error) {
+    return 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)
@@ -273,6 +342,33 @@ function validateAtom(node, path) {
   return null
 }
 
+function validateImageAttributes(node, path, requiredSource = false) {
+  const srcIssue = validateStringAttribute(
+    node,
+    'src',
+    path,
+    requiredSource
+  )
+  if (srcIssue || (node.attrs?.src && !isSafeImageResource(node.attrs.src))) {
+    return srcIssue || issue('unsafe-resource', path, 'src')
+  }
+  for (const name of ['alt', 'title']) {
+    const attrIssue = validateStringAttribute(node, name, path)
+    if (attrIssue) return attrIssue
+  }
+  for (const name of ['width', 'height']) {
+    const value = node.attrs?.[name]
+    if (
+      value !== undefined &&
+      value !== null &&
+      (!Number.isFinite(value) || value <= 0)
+    ) {
+      return issue('malformed-attribute', path, name)
+    }
+  }
+  return null
+}
+
 function validateNode(node, path) {
   if (!isRecord(node) || typeof node.type !== 'string') {
     return issue('malformed-node', path)
@@ -375,35 +471,47 @@ function validateNode(node, path) {
       : issue('invalid-child-node', `${path}.content[0]`, node.content[0].type)
   }
   if (node.type === 'image') {
-    const srcIssue = validateStringAttribute(node, 'src', path)
-    if (srcIssue || (node.attrs?.src && !isSafeResource(node.attrs.src))) {
-      return srcIssue || issue('unsafe-resource', path, 'src')
-    }
-    for (const name of ['alt', 'title']) {
-      const attrIssue = validateStringAttribute(node, name, path)
-      if (attrIssue) return attrIssue
-    }
-    for (const name of ['width', 'height']) {
-      const value = node.attrs?.[name]
-      if (
-        value !== undefined &&
-        value !== null &&
-        (!Number.isFinite(value) || value <= 0)
-      ) {
-        return issue('malformed-attribute', path, name)
+    return validateImageAttributes(node, path) || validateAtom(node, path)
+  }
+  if (node.type === 'imageGallery') {
+    const atomIssue = validateAtom(node, path)
+    if (atomIssue) return atomIssue
+    const images = node.attrs?.images
+    if (!Array.isArray(images) || images.length < 2 || images.length > 3) {
+      return issue('malformed-attribute', path, 'images')
+    }
+    for (let index = 0; index < images.length; index += 1) {
+      const imagePath = `${path}.attrs.images[${index}]`
+      if (!isRecord(images[index])) {
+        return issue('malformed-attribute', imagePath, 'image')
       }
+      const imageNode = { type: 'image', attrs: images[index] }
+      const attributeNameIssue = validateAttributeNames(imageNode, imagePath)
+      if (attributeNameIssue) return attributeNameIssue
+      const imageIssue = validateImageAttributes(imageNode, imagePath, true)
+      if (imageIssue) return imageIssue
     }
-    return validateAtom(node, path)
+    return null
   }
   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') {
@@ -627,6 +735,17 @@ function renderTable(node) {
   )}</tbody></table></div>`
 }
 
+function renderImage(attrs) {
+  return `<img${attribute('src', attrs.src)}${attribute(
+    'alt',
+    attrs.alt,
+    true
+  )}${attribute('title', attrs.title)}${attribute(
+    'width',
+    attrs.width
+  )}${attribute('height', attrs.height)}>`
+}
+
 function renderStandardNode(node) {
   if (node.type === 'text') return renderMarkedText(node)
   if (node.type === 'hardBreak') return '<br>'
@@ -656,26 +775,33 @@ function renderStandardNode(node) {
   }
   if (node.type === 'listItem') return `<li>${renderChildren(node)}</li>`
   if (node.type === 'image') {
-    return `<img${attribute('src', node.attrs.src)}${attribute(
-      'alt',
-      node.attrs.alt,
-      true
-    )}${attribute('title', node.attrs.title)}${attribute(
-      'width',
-      node.attrs.width
-    )}${attribute('height', node.attrs.height)}>`
+    return renderImage(node.attrs)
+  }
+  if (node.type === 'imageGallery') {
+    return `<figure class="asd20-message-image-gallery" data-cc-node="image-gallery"><div class="asd20-message-image-gallery__images" data-cc-gallery-images="">${node.attrs.images
+      .map(renderImage)
+      .join('')}</div></figure>`
   }
   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>`