@asd20/ui-next 2.15.1 → 2.16.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+# [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.16.0",
   "private": false,
   "description": "ASD20 UI component library for Vue 3.",
   "license": "MIT",

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

@@ -114,5 +114,48 @@ 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;
+  }
 }
 </style>

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

@@ -55,6 +55,7 @@ const MARK_TYPES = new Set([
   'subscript',
   'superscript',
 ])
+const TABLE_HEADER_SCOPES = new Set(['col', 'row', 'colgroup', 'rowgroup'])
 const MARK_RENDER_ORDER = Object.freeze({
   link: 0,
   bold: 1,
@@ -78,10 +79,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',
@@ -406,6 +407,15 @@ function validateNode(node, path) {
     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 +431,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 +454,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 +582,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 +616,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) {