@uniweb/kit 0.7.20 → 0.7.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/kit",
-  "version": "0.7.20",
+  "version": "0.7.21",
   "description": "Standard component library for Uniweb foundations",
   "type": "module",
   "exports": {

package/src/styled/Prose/index.jsx

@@ -1,14 +1,23 @@
 /**
  * Prose Component
  *
- * Typography wrapper for long-form content.
- * Applies prose styling for readable text.
+ * Renders the prose (narrative) portions of parsed content from content.sequence.
+ * Data blocks (tagged code blocks, dataBlocks) are skipped — they're structured
+ * data, not prose. Access them via content.data instead.
+ *
+ * Also works as a pure typography wrapper when given children instead of content.
  *
  * @module @uniweb/kit/styled/Prose
  */
 
 import React from 'react'
-import { cn } from '../../utils/index.js'
+import { cn, getChildBlockRenderer } from '../../utils/index.js'
+import { SafeHtml } from '../../components/SafeHtml/index.js'
+import { Image } from '../../components/Image/index.js'
+import { Media } from '../../components/Media/index.js'
+import { Icon } from '../../components/Icon/index.js'
+import { Link } from '../../components/Link/index.js'
+import { Code } from '../Section/renderers/Code.jsx'
 
 /**
  * Prose sizes
@@ -21,30 +30,154 @@ const SIZE_CLASSES = {
   '2xl': 'prose-2xl'
 }
 
+function generateId(text) {
+  return text
+    .replace(/<[^>]*>/g, '')
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-|-$/g, '')
+}
+
 /**
- * Prose - Typography wrapper for long-form content
+ * Render a single sequence element to React
+ */
+function SequenceElement({ element, block }) {
+  if (!element) return null
+
+  switch (element.type) {
+    case 'heading': {
+      const level = Math.min(element.level || 1, 6)
+      const Tag = `h${level}`
+      const id = generateId(element.text || '')
+      return <Tag id={id}><SafeHtml value={element.text} as="span" /></Tag>
+    }
+
+    case 'paragraph': {
+      if (!element.text) return null
+      return <p><SafeHtml value={element.text} as="span" /></p>
+    }
+
+    case 'image': {
+      const { url, alt, caption, role } = element.attrs || {}
+      if (role === 'icon') {
+        return <Icon {...element.attrs} />
+      }
+      return (
+        <figure>
+          <Image src={url} alt={alt || caption || ''} />
+          {caption && <figcaption>{caption}</figcaption>}
+        </figure>
+      )
+    }
+
+    case 'video': {
+      return <Media src={element.attrs?.src} />
+    }
+
+    case 'codeBlock': {
+      // Tagged code blocks are data, not prose — skip
+      if (element.attrs?.tag) return null
+      const code = typeof element.text === 'string' ? element.text : ''
+      return <Code content={code} language={element.attrs?.language || ''} />
+    }
+
+    case 'dataBlock':
+      return null
+
+    case 'list': {
+      const Tag = element.style === 'ordered' ? 'ol' : 'ul'
+      return (
+        <Tag>
+          {element.children?.map((itemSeq, i) => (
+            <li key={i}>
+              {itemSeq.map((el, j) => (
+                <SequenceElement key={j} element={el} block={block} />
+              ))}
+            </li>
+          ))}
+        </Tag>
+      )
+    }
+
+    case 'blockquote': {
+      return (
+        <blockquote>
+          {element.children?.map((el, i) => (
+            <SequenceElement key={i} element={el} block={block} />
+          ))}
+        </blockquote>
+      )
+    }
+
+    case 'link': {
+      const { href, label, role } = element.attrs || {}
+      // Standalone links promoted from paragraphs
+      return <p><Link to={href}>{label}</Link></p>
+    }
+
+    case 'button': {
+      return <p><Link to={element.attrs?.href}>{element.text}</Link></p>
+    }
+
+    case 'divider':
+      return <hr />
+
+    case 'inset': {
+      if (!block || !element.refId) return null
+      const insetBlock = block.getInset(element.refId)
+      if (!insetBlock) return null
+      const InsetRenderer = getChildBlockRenderer()
+      if (!InsetRenderer) return null
+      return <InsetRenderer blocks={[insetBlock]} />
+    }
+
+    case 'icon': {
+      return <Icon {...element.attrs} />
+    }
+
+    default:
+      return null
+  }
+}
+
+/**
+ * Prose - Renders the narrative content from a parsed content sequence
+ *
+ * Skips data blocks (tagged code blocks, dataBlocks) — those are structured
+ * data accessible via content.data, not prose to render.
  *
- * Applies Tailwind Typography (prose) classes for readable text styling.
- * Use for article bodies, documentation, or any long-form content.
+ * Pass `content` (the parsed content object from component props).
+ * Optionally pass `block` for inset resolution.
  *
  * @param {Object} props
+ * @param {Object} [props.content] - Parsed content object (has .sequence)
+ * @param {Object} [props.block] - Block instance (needed for inset resolution)
  * @param {string} [props.size='lg'] - Text size: sm, base, lg, xl, 2xl
  * @param {string} [props.as='div'] - HTML element to render as
  * @param {string} [props.className] - Additional CSS classes
- * @param {React.ReactNode} props.children - Content to render
+ * @param {React.ReactNode} [props.children] - Alternative to content (pure wrapper mode)
  *
  * @example
- * <Prose>
- *   <h2>Article Title</h2>
- *   <p>Article content...</p>
- * </Prose>
+ * // Typical usage in a section component
+ * function Lesson({ content, block }) {
+ *   return <Prose content={content} block={block} />
+ * }
+ *
+ * @example
+ * // Access data blocks separately
+ * <Prose content={content} block={block} />
+ * {content.data.quiz && <Quiz data={content.data.quiz} />}
  *
  * @example
- * <Prose size="base" className="dark:prose-invert">
- *   <Render content={proseMirrorContent} />
+ * // Pure typography wrapper (backward compatible)
+ * <Prose size="base">
+ *   <h2>Title</h2>
+ *   <p>Content...</p>
  * </Prose>
  */
 export function Prose({
+  block,
+  content,
   size = 'lg',
   as: Component = 'div',
   className,
@@ -52,13 +185,19 @@ export function Prose({
   ...props
 }) {
   const sizeClass = SIZE_CLASSES[size] || SIZE_CLASSES.lg
+  const sequence = content?.sequence
 
   return (
     <Component
       className={cn('prose', sizeClass, 'max-w-none', className)}
       {...props}
     >
-      {children}
+      {sequence
+        ? sequence.map((element, i) => (
+            <SequenceElement key={i} element={element} block={block} />
+          ))
+        : children
+      }
     </Component>
   )
 }