@asd20/ui-next 2.17.0 → 2.18.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # 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)
 
 

package/package.json

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

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

@@ -158,6 +158,37 @@ export default {
     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;

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

@@ -27,6 +27,7 @@ const STANDARD_BLOCK_NODE_TYPES = new Set([
   'bulletList',
   'orderedList',
   'image',
+  'imageGallery',
   'videoEmbed',
   'table',
 ])
@@ -94,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: [],
@@ -212,6 +214,18 @@ 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
 
@@ -328,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)
@@ -430,25 +471,27 @@ 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, true)
@@ -692,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>'
@@ -721,14 +775,12 @@ 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 class="asd20-message-video" data-cc-node="video"${attribute(