@asd20/ui-next 2.18.0 → 2.20.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+# [2.20.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.19.0...ui-next-v2.20.0) (2026-08-07)
+
+
+### Features
+
+* adjust video descriptions rendering for tiptap messages ([fbe3171](https://github.com/academydistrict20/asd20-ui-next/commit/fbe3171d365aeffeb7f66add00756ab9689f40a2))
+
+# [2.19.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.18.0...ui-next-v2.19.0) (2026-08-06)
+
+
+### Features
+
+* add azure blob mp4 and myvrspot video urls for tiptap editor ([b7bc2e9](https://github.com/academydistrict20/asd20-ui-next/commit/b7bc2e94bf8502bb990bfb063c14b6631f981f80))
+
 # [2.18.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.17.0...ui-next-v2.18.0) (2026-08-06)
 
 

package/package.json

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

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

@@ -59,6 +59,10 @@ const MARK_TYPES = new Set([
 const TABLE_HEADER_SCOPES = new Set(['col', 'row', 'colgroup', 'rowgroup'])
 const VIDEO_TITLE_MAX_LENGTH = 200
 const VIDEO_DESCRIPTION_MAX_LENGTH = 1000
+const MYVRSPOT_VIDEO_ID_PATTERN = /^[A-Za-z0-9_-]{16,256}$/
+const MYVRSPOT_HOST = 'live.myvrspot.com'
+const ASD20_VIDEO_HOST = 'asd20websitestorage.blob.core.windows.net'
+const ASD20_VIDEO_PATH_PREFIX = '/asd20-images/videos/'
 const VIDEO_PROVIDER_RULES = Object.freeze([
   {
     host: 'www.youtube.com',
@@ -236,14 +240,36 @@ function isCanonicalVideoEmbedSource(value) {
       url.username ||
       url.password ||
       url.port ||
-      url.search ||
       url.hash
     ) {
       return false
     }
 
+    const host = url.hostname.toLowerCase()
+    if (host === MYVRSPOT_HOST) {
+      const videoId = url.searchParams.get('v') || ''
+      return (
+        url.pathname === '/iframe' &&
+        MYVRSPOT_VIDEO_ID_PATTERN.test(videoId) &&
+        url.searchParams.get('share') === '1' &&
+        [...url.searchParams].length === 2 &&
+        value === `https://${MYVRSPOT_HOST}/iframe?v=${videoId}&share=1`
+      )
+    }
+
+    if (host === ASD20_VIDEO_HOST) {
+      return (
+        !url.search &&
+        url.pathname.startsWith(ASD20_VIDEO_PATH_PREFIX) &&
+        url.pathname.toLowerCase().endsWith('.mp4') &&
+        value === `https://${ASD20_VIDEO_HOST}${url.pathname}`
+      )
+    }
+
+    if (url.search) return false
+
     const rule = VIDEO_PROVIDER_RULES.find(
-      candidate => candidate.host === url.hostname.toLowerCase()
+      candidate => candidate.host === host
     )
     return Boolean(
       rule &&
@@ -265,6 +291,16 @@ function validateRequiredCanonicalText(node, name, path, maximumLength) {
     : null
 }
 
+function validateOptionalCanonicalText(node, name, path, maximumLength) {
+  const value = node.attrs?.[name]
+  if (value === undefined) return null
+  return typeof value !== 'string' ||
+    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)
@@ -505,7 +541,7 @@ function validateNode(node, path) {
       VIDEO_TITLE_MAX_LENGTH
     )
     if (titleIssue) return titleIssue
-    const descriptionIssue = validateRequiredCanonicalText(
+    const descriptionIssue = validateOptionalCanonicalText(
       node,
       'descriptiveText',
       path,
@@ -783,15 +819,14 @@ function renderStandardNode(node) {
       .join('')}</div></figure>`
   }
   if (node.type === 'videoEmbed') {
+    const description = node.attrs?.descriptiveText || ''
     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
-    )}><p class="asd20-message-video__description">${escapeHtml(
-      node.attrs.descriptiveText
-    )}</p><div class="asd20-message-video__frame"><iframe${attribute(
+      description
+    )}><div class="asd20-message-video__frame"><iframe${attribute(
       'src',
       node.attrs.src
     )}${attribute(
@@ -801,7 +836,13 @@ function renderStandardNode(node) {
       'allowfullscreen',
       '',
       true
-    )}></iframe></div></div>`
+    )}></iframe></div>${
+      description
+        ? `<p class="asd20-message-video__description">${escapeHtml(
+            description
+          )}</p>`
+        : ''
+    }</div>`
   }
   if (node.type === 'table') return renderTable(node)
   if (node.type === 'tableRow') return `<tr>${renderChildren(node)}</tr>`