@asd20/ui-next 2.14.0 → 2.15.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+# [2.15.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.14.1...ui-next-v2.15.0) (2026-07-31)
+
+
+### Bug Fixes
+
+* align TipTap document validation ([3e0d95c](https://github.com/academydistrict20/asd20-ui-next/commit/3e0d95cf040a1b1e1d0b22a6ff6b03d635e0c019))
+* preserve TipTap rendering semantics ([3fcec8e](https://github.com/academydistrict20/asd20-ui-next/commit/3fcec8ea4c2c34418d876ea17e4939c73fe32855))
+
+
+### Features
+
+* add TipTap message body dual reader ([1552256](https://github.com/academydistrict20/asd20-ui-next/commit/1552256630fde93026c9667b9854ccf9cd288914))
+
+## [2.14.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.14.0...ui-next-v2.14.1) (2026-07-28)
+
+
+### Bug Fixes
+
+* align multiselect control height ([63b8e84](https://github.com/academydistrict20/asd20-ui-next/commit/63b8e841f558f2df7dc3063ff8b144bc77415167))
+
 # [2.14.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.13.3...ui-next-v2.14.0) (2026-07-28)
 
 

package/package.json

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

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

@@ -2,6 +2,7 @@
   <div
     v-if="renderNodes.length"
     class="asd20-rich-body-content"
+    :data-message-document-status="renderModel.status"
     @click="onContentClick"
   >
     <template v-for="(node, index) in renderNodes">
@@ -40,76 +41,10 @@ import Asd20BodyAccordion from '../../molecules/Asd20BodyAccordion'
 import Asd20TableauEmbed from '../../molecules/Asd20TableauEmbed'
 import { navigateInternalHref } from '../../../helpers/linkPolicy'
 import { applyRichListColumnExceptions } from '../../../helpers/richBodyListColumns'
-
-const BODY_BLOCK_PLACEHOLDER_PATTERN =
-  /<div\b(?=[^>]*\bdata-cc-block=(['"])([^'"]+)\1)(?=[^>]*\bdata-block-id=(['"])([^'"]+)\3)[^>]*><\/div>/gi
-
-function containsBodyBlockPlaceholder(html) {
-  if (!html) return false
-  return new RegExp(BODY_BLOCK_PLACEHOLDER_PATTERN).test(html)
-}
-
-function buildRenderNodes(html, blockMap) {
-  const nodes = []
-  const placeholderPattern = new RegExp(BODY_BLOCK_PLACEHOLDER_PATTERN)
-  let lastIndex = 0
-  let match
-
-  while ((match = placeholderPattern.exec(html))) {
-    const [fullMatch, , blockType, , blockId] = match
-    const htmlBefore = html.slice(lastIndex, match.index)
-    if (htmlBefore) {
-      nodes.push({
-        type: 'html',
-        html: htmlBefore,
-      })
-    }
-
-    const block = blockMap[blockId]
-    if (block && block.type === blockType) {
-      nodes.push({
-        type: blockType,
-        block,
-      })
-    } else {
-      nodes.push({
-        type: 'html',
-        html: fullMatch,
-      })
-    }
-
-    lastIndex = match.index + fullMatch.length
-  }
-
-  const htmlAfter = html.slice(lastIndex)
-  if (htmlAfter) {
-    nodes.push({
-      type: 'html',
-      html: htmlAfter,
-    })
-  }
-
-  return nodes
-}
-
-function parseBodyBlocks(bodyJson) {
-  if (!bodyJson) return []
-
-  let parsed = bodyJson
-  if (typeof bodyJson === 'string') {
-    try {
-      parsed = JSON.parse(bodyJson)
-    } catch (error) {
-      return []
-    }
-  }
-
-  if (!parsed || typeof parsed !== 'object' || !Array.isArray(parsed.blocks)) {
-    return []
-  }
-
-  return parsed.blocks.filter(block => block && typeof block === 'object')
-}
+import {
+  buildRichBodyRenderModel,
+  containsBodyBlockPlaceholder,
+} from './messageDocumentRenderer'
 
 export default {
   name: 'Asd20RichBodyContent',
@@ -126,22 +61,24 @@ export default {
   }),
 
   computed: {
-    blockMap() {
-      return parseBodyBlocks(this.bodyJson).reduce((accumulator, block) => {
-        if (!block.id) return accumulator
-        accumulator[block.id] = block
-        return accumulator
-      }, {})
+    renderModel() {
+      return buildRichBodyRenderModel({
+        bodyContent: this.bodyContent,
+        bodyJson: this.bodyJson,
+      })
     },
     renderNodes() {
       const html = this.bodyContent || ''
-      if (!html) return []
       // Keep SSR and the initial client render on the same raw HTML markup,
       // then enhance block placeholders after hydration.
-      if (!this.hasMounted && containsBodyBlockPlaceholder(html)) {
+      if (
+        this.renderModel.status === 'legacy' &&
+        !this.hasMounted &&
+        containsBodyBlockPlaceholder(html)
+      ) {
         return [{ type: 'html', html }]
       }
-      return buildRenderNodes(html, this.blockMap)
+      return this.renderModel.nodes
     },
   },
 

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

@@ -0,0 +1,808 @@
+const MESSAGE_DOCUMENT_SCHEMA_VERSION = 1
+
+export const BODY_JSON_FORMAT = Object.freeze({
+  EMPTY: 'empty',
+  INVALID: 'invalid',
+  LEGACY_BLOCKS: 'legacy-blocks',
+  TIPTAP: 'tiptap',
+  UNKNOWN: 'unknown',
+})
+
+export const MESSAGE_DOCUMENT_STATUS = Object.freeze({
+  LEGACY: 'legacy',
+  SUPPORTED: 'supported',
+  UNSUPPORTED: 'unsupported',
+})
+
+const LEGACY_PLACEHOLDER_PATTERN =
+  /<div\b(?=[^>]*\bdata-cc-block=(['"])([^'"]+)\1)(?=[^>]*\bdata-block-id=(['"])([^'"]+)\3)[^>]*><\/div>/gi
+
+const INLINE_NODE_TYPES = new Set(['text', 'hardBreak'])
+const STANDARD_BLOCK_NODE_TYPES = new Set([
+  'paragraph',
+  'heading',
+  'blockquote',
+  'codeBlock',
+  'horizontalRule',
+  'bulletList',
+  'orderedList',
+  'image',
+  'videoEmbed',
+  'table',
+])
+const TOP_LEVEL_NODE_TYPES = new Set([
+  ...STANDARD_BLOCK_NODE_TYPES,
+  'accordionBlock',
+  'tableauBlock',
+])
+const KNOWN_NODE_TYPES = new Set([
+  'doc',
+  ...TOP_LEVEL_NODE_TYPES,
+  ...INLINE_NODE_TYPES,
+  'listItem',
+  'tableRow',
+  'tableCell',
+  'tableHeader',
+  'accordionItem',
+  'legacyRecovery',
+])
+const MARK_TYPES = new Set([
+  'bold',
+  'italic',
+  'strike',
+  'code',
+  'link',
+  'subscript',
+  'superscript',
+])
+const MARK_RENDER_ORDER = Object.freeze({
+  link: 0,
+  bold: 1,
+  code: 2,
+  italic: 3,
+  strike: 4,
+  subscript: 5,
+  superscript: 6,
+})
+const NODE_ATTRIBUTE_NAMES = Object.freeze({
+  doc: ['schemaVersion'],
+  text: [],
+  hardBreak: [],
+  paragraph: [],
+  heading: ['level'],
+  blockquote: [],
+  codeBlock: ['language'],
+  horizontalRule: [],
+  bulletList: [],
+  orderedList: ['start', 'type'],
+  listItem: [],
+  image: ['src', 'alt', 'title', 'width', 'height'],
+  videoEmbed: ['src', 'title', 'descriptiveText'],
+  table: [],
+  tableRow: [],
+  tableCell: ['colspan', 'rowspan', 'colwidth', 'align'],
+  tableHeader: ['colspan', 'rowspan', 'colwidth', 'align'],
+  tableauBlock: [
+    'blockId',
+    'src',
+    'height',
+    'toolbar',
+    'hideTabs',
+    'descriptiveText',
+  ],
+  accordionBlock: ['blockId'],
+  accordionItem: ['itemId', 'heading', 'opened'],
+  legacyRecovery: ['reason', 'blockId', 'blockType', 'rawHtml', 'payloadJson'],
+})
+
+function isRecord(value) {
+  return Boolean(value) && typeof value === 'object' && !Array.isArray(value)
+}
+
+function parseBodyJson(value) {
+  if (
+    value === null ||
+    value === undefined ||
+    (typeof value === 'string' && value.trim() === '')
+  ) {
+    return { parsed: null, error: null }
+  }
+  if (typeof value !== 'string') return { parsed: value, error: null }
+
+  try {
+    return { parsed: JSON.parse(value), error: null }
+  } catch (error) {
+    return { parsed: null, error }
+  }
+}
+
+function detectBodyJsonFormat(value) {
+  const { parsed, error } = parseBodyJson(value)
+
+  if (error) {
+    return {
+      format: BODY_JSON_FORMAT.INVALID,
+      value: null,
+      reason: 'bodyJson is not valid JSON.',
+    }
+  }
+  if (parsed === null) {
+    return { format: BODY_JSON_FORMAT.EMPTY, value: null, reason: '' }
+  }
+  if (!isRecord(parsed)) {
+    return {
+      format: BODY_JSON_FORMAT.UNKNOWN,
+      value: parsed,
+      reason: 'bodyJson must contain an object.',
+    }
+  }
+  if (parsed.type === 'doc') {
+    return { format: BODY_JSON_FORMAT.TIPTAP, value: parsed, reason: '' }
+  }
+  if (Array.isArray(parsed.blocks)) {
+    return {
+      format: BODY_JSON_FORMAT.LEGACY_BLOCKS,
+      value: parsed,
+      reason: parsed.version === 1 ? '' : 'Legacy bodyJson must use version 1.',
+    }
+  }
+  return {
+    format: BODY_JSON_FORMAT.UNKNOWN,
+    value: parsed,
+    reason: 'bodyJson is neither a TipTap document nor a legacy block sidecar.',
+  }
+}
+
+function issue(code, path, detail = '') {
+  return { code, path, detail }
+}
+
+function validateAttributeNames(node, path) {
+  const allowedNames = new Set(NODE_ATTRIBUTE_NAMES[node.type] || [])
+  const unknownName = Object.keys(node.attrs || {}).find(
+    name => !allowedNames.has(name)
+  )
+  return unknownName ? issue('unknown-attribute', path, unknownName) : null
+}
+
+function validateStringAttribute(node, name, path, required = false) {
+  const value = node.attrs?.[name]
+  if (value === undefined || value === null) {
+    return required ? issue('malformed-attribute', path, name) : null
+  }
+  return typeof value === 'string'
+    ? null
+    : issue('malformed-attribute', path, name)
+}
+
+function isSafeResource(value, allowHash = false) {
+  if (typeof value !== 'string' || !value.trim()) return false
+  if (
+    value.startsWith('/') ||
+    value.startsWith('?') ||
+    value.startsWith('./') ||
+    value.startsWith('../') ||
+    (allowHash && value.startsWith('#'))
+  ) {
+    return true
+  }
+
+  try {
+    const url = new URL(value, 'https://ui-next.invalid')
+    return ['http:', 'https:', 'mailto:', 'tel:'].includes(url.protocol)
+  } catch (_error) {
+    return false
+  }
+}
+
+function validateMarks(marks, path) {
+  if (marks === undefined) return null
+  if (!Array.isArray(marks)) return issue('malformed-marks', path)
+
+  const seenTypes = new Set()
+  for (let index = 0; index < marks.length; index += 1) {
+    const mark = marks[index]
+    const markPath = `${path}.marks[${index}]`
+    if (!isRecord(mark) || !MARK_TYPES.has(mark.type)) {
+      return issue('unsupported-mark', markPath, mark?.type || 'unknown')
+    }
+    if (mark.attrs !== undefined && !isRecord(mark.attrs)) {
+      return issue('malformed-mark-attributes', markPath)
+    }
+    if (seenTypes.has(mark.type)) {
+      return issue('duplicate-mark', markPath, mark.type)
+    }
+    seenTypes.add(mark.type)
+    if (mark.type === 'link') {
+      const href = mark.attrs?.href
+      if (!isSafeResource(href, true)) {
+        return issue('unsafe-link', markPath, href || '')
+      }
+      const unknownName = Object.keys(mark.attrs || {}).find(
+        name => !['href', 'target', 'rel', 'class', 'title'].includes(name)
+      )
+      if (unknownName) {
+        return issue('unknown-mark-attribute', markPath, unknownName)
+      }
+      for (const name of ['target', 'rel', 'class', 'title']) {
+        const value = mark.attrs?.[name]
+        if (
+          value !== undefined &&
+          value !== null &&
+          typeof value !== 'string'
+        ) {
+          return issue('malformed-mark-attributes', markPath, name)
+        }
+      }
+    } else if (Object.keys(mark.attrs || {}).length) {
+      return issue('unknown-mark-attribute', markPath)
+    }
+  }
+  return null
+}
+
+function validateChildren(node, path, allowedTypes, required = false) {
+  if (node.content === undefined) {
+    return required ? issue('malformed-content', path) : null
+  }
+  if (!Array.isArray(node.content) || (required && !node.content.length)) {
+    return issue('malformed-content', path)
+  }
+
+  for (let index = 0; index < node.content.length; index += 1) {
+    const child = node.content[index]
+    const childPath = `${path}.content[${index}]`
+    if (!isRecord(child)) return issue('malformed-node', childPath)
+    const childIssue = validateNode(child, childPath)
+    if (childIssue) return childIssue
+    if (!allowedTypes.has(child.type)) {
+      return issue('invalid-child-node', childPath, child.type)
+    }
+  }
+  return null
+}
+
+function validateAtom(node, path) {
+  if (
+    node.content !== undefined &&
+    (!Array.isArray(node.content) || node.content.length)
+  ) {
+    return issue('malformed-content', path)
+  }
+  return null
+}
+
+function validateNode(node, path) {
+  if (!isRecord(node) || typeof node.type !== 'string') {
+    return issue('malformed-node', path)
+  }
+  if (node.type === 'legacyRecovery') return issue('recovery-node', path)
+  if (!KNOWN_NODE_TYPES.has(node.type)) {
+    return issue('unknown-node', path, node.type)
+  }
+  if (node.attrs !== undefined && !isRecord(node.attrs)) {
+    return issue('malformed-attributes', path)
+  }
+  const attributeIssue = validateAttributeNames(node, path)
+  if (attributeIssue) return attributeIssue
+
+  if (node.type === 'doc') {
+    if (node.attrs?.schemaVersion !== MESSAGE_DOCUMENT_SCHEMA_VERSION) {
+      return issue(
+        'unsupported-schema-version',
+        path,
+        String(node.attrs?.schemaVersion ?? 'missing')
+      )
+    }
+    return validateChildren(node, path, TOP_LEVEL_NODE_TYPES, true)
+  }
+  if (node.type === 'text') {
+    if (
+      typeof node.text !== 'string' ||
+      node.text.length === 0 ||
+      node.content !== undefined
+    ) {
+      return issue('malformed-text', path)
+    }
+    return validateMarks(node.marks, path)
+  }
+  if (node.type === 'hardBreak') {
+    return validateMarks(node.marks, path) || validateAtom(node, path)
+  }
+  if (node.marks !== undefined) return issue('invalid-node-marks', path)
+
+  if (node.type === 'paragraph') {
+    return node.content === undefined
+      ? null
+      : validateChildren(node, path, INLINE_NODE_TYPES)
+  }
+  if (node.type === 'heading') {
+    const level = node.attrs?.level
+    if (!Number.isInteger(level) || level < 1 || level > 6) {
+      return issue('malformed-attribute', path, 'level')
+    }
+    return node.content === undefined
+      ? null
+      : validateChildren(node, path, INLINE_NODE_TYPES)
+  }
+  if (node.type === 'horizontalRule') {
+    return validateAtom(node, path)
+  }
+  if (node.type === 'codeBlock') {
+    const languageIssue = validateStringAttribute(node, 'language', path)
+    if (languageIssue) return languageIssue
+    const contentIssue =
+      node.content === undefined
+        ? null
+        : validateChildren(node, path, new Set(['text']))
+    if (contentIssue) return contentIssue
+    return (node.content || []).some(child => child.marks?.length)
+      ? issue('invalid-code-block-marks', path)
+      : null
+  }
+  if (node.type === 'blockquote') {
+    return validateChildren(node, path, STANDARD_BLOCK_NODE_TYPES, true)
+  }
+  if (node.type === 'bulletList' || node.type === 'orderedList') {
+    if (
+      node.type === 'orderedList' &&
+      node.attrs?.start !== undefined &&
+      (!Number.isInteger(node.attrs.start) || node.attrs.start < 1)
+    ) {
+      return issue('malformed-attribute', path, 'start')
+    }
+    if (
+      node.type === 'orderedList' &&
+      node.attrs?.type !== undefined &&
+      node.attrs.type !== null &&
+      !['1', 'a', 'A', 'i', 'I'].includes(node.attrs.type)
+    ) {
+      return issue('malformed-attribute', path, 'type')
+    }
+    return validateChildren(node, path, new Set(['listItem']), true)
+  }
+  if (node.type === 'listItem') {
+    const contentIssue = validateChildren(
+      node,
+      path,
+      STANDARD_BLOCK_NODE_TYPES,
+      true
+    )
+    if (contentIssue) return contentIssue
+    return node.content[0].type === 'paragraph'
+      ? null
+      : 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 validateAtom(node, path)
+  }
+  if (node.type === 'videoEmbed') {
+    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 ['title', 'descriptiveText']) {
+      const attrIssue = validateStringAttribute(node, name, path)
+      if (attrIssue) return attrIssue
+    }
+    return validateAtom(node, path)
+  }
+  if (node.type === 'table') {
+    return validateChildren(node, path, new Set(['tableRow']), true)
+  }
+  if (node.type === 'tableRow') {
+    return validateChildren(
+      node,
+      path,
+      new Set(['tableCell', 'tableHeader']),
+      true
+    )
+  }
+  if (node.type === 'tableCell' || node.type === 'tableHeader') {
+    const colspan = node.attrs?.colspan ?? 1
+    const rowspan = node.attrs?.rowspan ?? 1
+    const colwidth = node.attrs?.colwidth
+    const align = node.attrs?.align
+    if (!Number.isInteger(colspan) || colspan < 1) {
+      return issue('malformed-attribute', path, 'colspan')
+    }
+    if (!Number.isInteger(rowspan) || rowspan < 1) {
+      return issue('malformed-attribute', path, 'rowspan')
+    }
+    if (
+      colwidth !== undefined &&
+      colwidth !== null &&
+      (!Array.isArray(colwidth) ||
+        colwidth.length !== colspan ||
+        colwidth.some(width => !Number.isFinite(width) || width <= 0))
+    ) {
+      return issue('malformed-attribute', path, 'colwidth')
+    }
+    if (
+      align !== undefined &&
+      align !== null &&
+      !['left', 'center', 'right'].includes(align)
+    ) {
+      return issue('malformed-attribute', path, 'align')
+    }
+    return validateChildren(node, path, STANDARD_BLOCK_NODE_TYPES, true)
+  }
+  if (node.type === 'tableauBlock') {
+    for (const name of ['blockId', 'src', 'toolbar', 'descriptiveText']) {
+      const attrIssue = validateStringAttribute(node, name, path, false)
+      if (attrIssue) return attrIssue
+    }
+    if (node.attrs?.src && !isSafeResource(node.attrs.src)) {
+      return issue('unsafe-resource', path, 'src')
+    }
+    if (
+      node.attrs?.height !== undefined &&
+      (!Number.isFinite(Number(node.attrs.height)) ||
+        Number(node.attrs.height) <= 0)
+    ) {
+      return issue('malformed-attribute', path, 'height')
+    }
+    if (
+      node.attrs?.hideTabs !== undefined &&
+      typeof node.attrs.hideTabs !== 'boolean'
+    ) {
+      return issue('malformed-attribute', path, 'hideTabs')
+    }
+    return validateAtom(node, path)
+  }
+  if (node.type === 'accordionBlock') {
+    const blockIdIssue = validateStringAttribute(node, 'blockId', path)
+    return (
+      blockIdIssue ||
+      validateChildren(node, path, new Set(['accordionItem']), true)
+    )
+  }
+  if (node.type === 'accordionItem') {
+    for (const name of ['itemId', 'heading']) {
+      const attrIssue = validateStringAttribute(node, name, path)
+      if (attrIssue) return attrIssue
+    }
+    if (
+      node.attrs?.opened !== undefined &&
+      typeof node.attrs.opened !== 'boolean'
+    ) {
+      return issue('malformed-attribute', path, 'opened')
+    }
+    if (!Array.isArray(node.content) || !node.content.length) {
+      return issue('malformed-content', path)
+    }
+    const tableauChildren = node.content.filter(
+      child => child?.type === 'tableauBlock'
+    )
+    if (
+      tableauChildren.length &&
+      (tableauChildren.length !== 1 || node.content.length !== 1)
+    ) {
+      return issue('unsupported-accordion-content', path)
+    }
+    return validateChildren(
+      node,
+      path,
+      tableauChildren.length
+        ? new Set(['tableauBlock'])
+        : STANDARD_BLOCK_NODE_TYPES,
+      true
+    )
+  }
+  return issue('unknown-node', path, node.type)
+}
+
+function escapeHtml(value = '') {
+  return String(value)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+}
+
+function attribute(name, value, preserveEmpty = false) {
+  return value === undefined ||
+    value === null ||
+    (!preserveEmpty && value === '')
+    ? ''
+    : ` ${name}="${escapeHtml(value)}"`
+}
+
+function renderMarkedText(node) {
+  let html = escapeHtml(node.text)
+  const marks = [...(node.marks || [])].sort(
+    (left, right) =>
+      MARK_RENDER_ORDER[left.type] - MARK_RENDER_ORDER[right.type]
+  )
+
+  for (const mark of marks.reverse()) {
+    if (mark.type === 'bold') html = `<strong>${html}</strong>`
+    else if (mark.type === 'italic') html = `<em>${html}</em>`
+    else if (mark.type === 'strike') html = `<s>${html}</s>`
+    else if (mark.type === 'code') html = `<code>${html}</code>`
+    else if (mark.type === 'subscript') html = `<sub>${html}</sub>`
+    else if (mark.type === 'superscript') html = `<sup>${html}</sup>`
+    else if (mark.type === 'link') {
+      html = `<a${attribute('href', mark.attrs.href)}${attribute(
+        'target',
+        mark.attrs.target
+      )}${attribute('rel', mark.attrs.rel)}${attribute(
+        'class',
+        mark.attrs.class
+      )}${attribute('title', mark.attrs.title)}>${html}</a>`
+    }
+  }
+  return html
+}
+
+function renderChildren(node) {
+  return (node.content || []).map(renderStandardNode).join('')
+}
+
+function renderTableCell(node, tagName) {
+  const colspan = node.attrs?.colspan ?? 1
+  const rowspan = node.attrs?.rowspan ?? 1
+  const colwidth = node.attrs?.colwidth
+  const align = node.attrs?.align
+  return `<${tagName}${attribute('colspan', colspan)}${attribute(
+    'rowspan',
+    rowspan
+  )}${
+    Array.isArray(colwidth) ? attribute('colwidth', colwidth.join(',')) : ''
+  }${align ? attribute('style', `text-align: ${align}`) : ''}>${renderChildren(
+    node
+  )}</${tagName}>`
+}
+
+function renderTable(node) {
+  const minimumWidth = 25
+  const firstRow = node.content[0]
+  const columns = firstRow.content.flatMap(cell => {
+    const colspan = cell.attrs?.colspan ?? 1
+    const widths = cell.attrs?.colwidth
+    return Array.from({ length: colspan }, (_value, index) => widths?.[index])
+  })
+  const fixedWidth = columns.every(Boolean)
+  const totalWidth = columns.reduce(
+    (sum, width) => sum + (width || minimumWidth),
+    0
+  )
+  const tableStyle = fixedWidth
+    ? `width: ${totalWidth}px`
+    : `min-width: ${totalWidth}px`
+  const colgroup = columns
+    .map(width =>
+      width
+        ? `<col style="width: ${width}px;">`
+        : `<col style="min-width: ${minimumWidth}px;">`
+    )
+    .join('')
+  return `<table${attribute(
+    'style',
+    tableStyle
+  )}><colgroup>${colgroup}</colgroup><tbody>${renderChildren(
+    node
+  )}</tbody></table>`
+}
+
+function renderStandardNode(node) {
+  if (node.type === 'text') return renderMarkedText(node)
+  if (node.type === 'hardBreak') return '<br>'
+  if (node.type === 'paragraph') return `<p>${renderChildren(node)}</p>`
+  if (node.type === 'heading') {
+    return `<h${node.attrs.level}>${renderChildren(node)}</h${
+      node.attrs.level
+    }>`
+  }
+  if (node.type === 'blockquote') {
+    return `<blockquote>${renderChildren(node)}</blockquote>`
+  }
+  if (node.type === 'codeBlock') {
+    const languageClass = node.attrs?.language
+      ? attribute('class', `language-${node.attrs.language}`)
+      : ''
+    return `<pre><code${languageClass}>${renderChildren(node)}</code></pre>`
+  }
+  if (node.type === 'horizontalRule') return '<hr>'
+  if (node.type === 'bulletList') return `<ul>${renderChildren(node)}</ul>`
+  if (node.type === 'orderedList') {
+    const start = node.attrs?.start
+    const type = node.attrs?.type
+    return `<ol${start && start !== 1 ? attribute('start', start) : ''}${
+      type && type !== '1' ? attribute('type', type) : ''
+    }>${renderChildren(node)}</ol>`
+  }
+  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)}>`
+  }
+  if (node.type === 'videoEmbed') {
+    return `<div 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(
+      'title',
+      node.attrs.title || 'Embedded video'
+    )}></iframe></div>`
+  }
+  if (node.type === 'table') return renderTable(node)
+  if (node.type === 'tableRow') return `<tr>${renderChildren(node)}</tr>`
+  if (node.type === 'tableCell') return renderTableCell(node, 'td')
+  if (node.type === 'tableHeader') return renderTableCell(node, 'th')
+  return ''
+}
+
+function buildLegacyRenderNodes(bodyHtml, blocks) {
+  const blockMap = new Map(
+    blocks.filter(isRecord).map(block => [block.id, block])
+  )
+  const nodes = []
+  const pattern = new RegExp(LEGACY_PLACEHOLDER_PATTERN)
+  let lastIndex = 0
+  let match
+
+  while ((match = pattern.exec(bodyHtml))) {
+    if (match.index > lastIndex) {
+      nodes.push({ type: 'html', html: bodyHtml.slice(lastIndex, match.index) })
+    }
+    const block = blockMap.get(match[4])
+    nodes.push(
+      block && block.type === match[2]
+        ? { type: block.type, block }
+        : { type: 'html', html: match[0] }
+    )
+    lastIndex = match.index + match[0].length
+  }
+  if (lastIndex < bodyHtml.length) {
+    nodes.push({ type: 'html', html: bodyHtml.slice(lastIndex) })
+  }
+  return nodes
+}
+
+function accordionToRenderBlock(node) {
+  return {
+    id: node.attrs?.blockId || '',
+    type: 'accordion',
+    items: node.content.map(item => {
+      const isTableau = item.content[0]?.type === 'tableauBlock'
+      return isTableau
+        ? {
+            id: item.attrs?.itemId || '',
+            heading: item.attrs?.heading || '',
+            opened: Boolean(item.attrs?.opened),
+            contentType: 'tableau',
+            tableau: { ...item.content[0].attrs },
+          }
+        : {
+            id: item.attrs?.itemId || '',
+            heading: item.attrs?.heading || '',
+            opened: Boolean(item.attrs?.opened),
+            contentType: 'text',
+            bodyHtml: item.content.map(renderStandardNode).join(''),
+          }
+    }),
+  }
+}
+
+function buildTiptapRenderNodes(messageDocument) {
+  const nodes = []
+  let standardContent = []
+  const flushStandardContent = () => {
+    if (!standardContent.length) return
+    nodes.push({
+      type: 'html',
+      html: standardContent.map(renderStandardNode).join(''),
+    })
+    standardContent = []
+  }
+
+  messageDocument.content.forEach(node => {
+    if (node.type === 'accordionBlock') {
+      flushStandardContent()
+      nodes.push({ type: 'accordion', block: accordionToRenderBlock(node) })
+    } else if (node.type === 'tableauBlock') {
+      flushStandardContent()
+      nodes.push({
+        type: 'tableau',
+        block: {
+          id: node.attrs?.blockId || '',
+          type: 'tableau',
+          ...node.attrs,
+        },
+      })
+    } else {
+      standardContent.push(node)
+    }
+  })
+  flushStandardContent()
+  return nodes
+}
+
+function unsupportedModel(detected, bodyContent, validationIssue) {
+  return {
+    format: detected.format,
+    status: MESSAGE_DOCUMENT_STATUS.UNSUPPORTED,
+    reason:
+      validationIssue ||
+      issue('unsupported-body-json', 'bodyJson', detected.reason),
+    blocks: [],
+    nodes: bodyContent ? [{ type: 'html', html: bodyContent }] : [],
+  }
+}
+
+export function containsBodyBlockPlaceholder(html) {
+  if (!html) return false
+  return new RegExp(LEGACY_PLACEHOLDER_PATTERN).test(html)
+}
+
+export function buildRichBodyRenderModel({
+  bodyContent = '',
+  bodyJson = '',
+} = {}) {
+  const detected = detectBodyJsonFormat(bodyJson)
+
+  if (detected.format === BODY_JSON_FORMAT.EMPTY) {
+    return {
+      format: BODY_JSON_FORMAT.EMPTY,
+      status: MESSAGE_DOCUMENT_STATUS.LEGACY,
+      reason: null,
+      blocks: [],
+      nodes: buildLegacyRenderNodes(bodyContent, []),
+    }
+  }
+  if (detected.format === BODY_JSON_FORMAT.LEGACY_BLOCKS) {
+    if (detected.reason) return unsupportedModel(detected, bodyContent)
+    const blocks = detected.value.blocks.filter(isRecord)
+    return {
+      format: BODY_JSON_FORMAT.LEGACY_BLOCKS,
+      status: MESSAGE_DOCUMENT_STATUS.LEGACY,
+      reason: null,
+      blocks,
+      nodes: buildLegacyRenderNodes(bodyContent, blocks),
+    }
+  }
+  if (detected.format !== BODY_JSON_FORMAT.TIPTAP) {
+    return unsupportedModel(detected, bodyContent)
+  }
+
+  const validationIssue = validateNode(detected.value, 'bodyJson')
+  if (validationIssue) {
+    return unsupportedModel(detected, bodyContent, validationIssue)
+  }
+  return {
+    format: BODY_JSON_FORMAT.TIPTAP,
+    status: MESSAGE_DOCUMENT_STATUS.SUPPORTED,
+    reason: null,
+    blocks: [],
+    nodes: buildTiptapRenderNodes(detected.value),
+  }
+}

package/src/components/utils/Multiselect.vue

@@ -449,7 +449,7 @@ export default {
   align-items: center;
   gap: 0.375rem;
   min-height: 1.25rem;
-  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
+  padding: 0 2.5rem 0 0.75rem;
   cursor: text;
 }