@dfosco/storyboard-react 4.0.0-beta.3 → 4.0.0-beta.30

package/src/canvas/widgets/LinkPreview.test.jsx

@@ -0,0 +1,71 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import LinkPreview from './LinkPreview.jsx'
+
+describe('LinkPreview', () => {
+  it('renders GitHub issue card with markdown body and author byline', () => {
+    const { container } = render(
+      <LinkPreview
+        id="link-1"
+        props={{
+          url: 'https://github.com/dfosco/storyboard/issues/42',
+          title: '#42 Ship GitHub embeds',
+          github: {
+            context: 'GitHub · dfosco/storyboard · Issue #42',
+            body: '## Summary\n\nThis is a **bold** point.\n\n- Item one\n- Item two',
+            authors: ['dfosco'],
+            createdAt: '2026-01-01T00:00:00Z',
+          },
+        }}
+      />,
+    )
+
+    // Title split: text + muted number
+    expect(screen.getByText('Ship GitHub embeds')).toBeInTheDocument()
+    expect(screen.getByText('#42')).toBeInTheDocument()
+
+    // Markdown body renders headings, bold, lists
+    const headings = container.querySelectorAll('h2')
+    expect(headings.length).toBeGreaterThanOrEqual(1)
+    // Find the body heading (not the title)
+    const summaryHeading = Array.from(headings).find(h => h.textContent === 'Summary')
+    expect(summaryHeading).toBeTruthy()
+    expect(container.querySelectorAll('li')).toHaveLength(2)
+
+    // Author byline
+    expect(screen.getByText('dfosco')).toBeInTheDocument()
+  })
+
+  it('does not render GitHub layout for non-GitHub links', () => {
+    render(
+      <LinkPreview
+        id="link-2"
+        props={{
+          url: 'https://example.com/docs',
+          title: 'Example docs',
+        }}
+      />,
+    )
+
+    expect(screen.getByText('Example docs')).toBeInTheDocument()
+    expect(screen.getByText('example.com')).toBeInTheDocument()
+  })
+
+  it('renders plain link-preview without github data', () => {
+    const { container } = render(
+      <LinkPreview
+        id="link-3"
+        props={{
+          url: 'https://figma.com/design/abc',
+          title: 'My design',
+          width: 320,
+          height: 120,
+        }}
+      />,
+    )
+
+    expect(screen.getByText('My design')).toBeInTheDocument()
+    // No issue card rendered
+    expect(container.querySelector('header')).toBeNull()
+  })
+})

package/src/canvas/widgets/MarkdownBlock.jsx

@@ -1,33 +1,73 @@
-import { useState, useRef, useEffect, useCallback } from 'react'
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react'
+import { remark } from 'remark'
+import remarkGfm from 'remark-gfm'
+import remarkHtml from 'remark-html'
 import WidgetWrapper from './WidgetWrapper.jsx'
-import { readProp, markdownSchema } from './widgetProps.js'
+import ResizeHandle from './ResizeHandle.jsx'
+import { readProp } from './widgetProps.js'
+import { schemas } from './widgetConfig.js'
 import styles from './MarkdownBlock.module.css'
 
+const markdownSchema = schemas['markdown']
+
 /**
- * Renders markdown as plain HTML using a minimal built-in converter.
+ * Renders markdown to HTML using remark with GitHub Flavored Markdown support.
  */
 function renderMarkdown(text) {
   if (!text) return ''
-  return text
-    .replace(/^### (.+)$/gm, '<h3>$1</h3>')
-    .replace(/^## (.+)$/gm, '<h2>$1</h2>')
-    .replace(/^# (.+)$/gm, '<h1>$1</h1>')
-    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
-    .replace(/\*(.+?)\*/g, '<em>$1</em>')
-    .replace(/`(.+?)`/g, '<code>$1</code>')
-    .replace(/^- (.+)$/gm, '<li>$1</li>')
-    .replace(/(<li>.*<\/li>)/s, '<ul>$1</ul>')
-    .replace(/\n\n/g, '</p><p>')
-    .replace(/\n/g, '<br>')
-    .replace(/^(.+)$/gm, (line) => {
-      if (line.startsWith('<')) return line
-      return `<p>${line}</p>`
-    })
+  const result = remark()
+    .use(remarkGfm)
+    .use(remarkHtml, { sanitize: false })
+    .processSync(text)
+  // Open all links in new tabs
+  return String(result).replace(/<a\s/g, '<a target="_blank" rel="noopener noreferrer" ')
+}
+
+/**
+ * Post-process rendered HTML to syntax-highlight fenced code blocks.
+ * remark-html outputs <pre><code class="language-xxx">...</code></pre>.
+ * We replace the code content with highlight.js output.
+ */
+let hljsPromise = null
+function getHljs() {
+  if (!hljsPromise) {
+    hljsPromise = import('@dfosco/storyboard-core/inspector/highlighter').then((mod) => mod)
+  }
+  return hljsPromise
+}
+
+async function highlightCodeBlocks(html) {
+  if (!html.includes('<code class="language-')) return html
+  const { createInspectorHighlighter } = await getHljs()
+  const hl = await createInspectorHighlighter()
+  return html.replace(
+    /<pre><code class="language-(\w+)">([\s\S]*?)<\/code><\/pre>/g,
+    (match, lang, code) => {
+      try {
+        // Decode all HTML entities that remark-html may produce
+        const decoded = code
+          .replace(/&#x3C;/gi, '<')
+          .replace(/&#x3E;/gi, '>')
+          .replace(/&#x26;/gi, '&')
+          .replace(/&#x22;/gi, '"')
+          .replace(/&#x27;/gi, "'")
+          .replace(/&lt;/g, '<')
+          .replace(/&gt;/g, '>')
+          .replace(/&quot;/g, '"')
+          .replace(/&amp;/g, '&')
+        // codeToHtml returns a full <pre style="bg;fg"><code>...</code></pre>
+        return hl.codeToHtml(decoded, { lang })
+      } catch {
+        return match
+      }
+    }
+  )
 }
 
-export default function MarkdownBlock({ props, onUpdate }) {
+export default function MarkdownBlock({ props, onUpdate, resizable }) {
   const content = readProp(props, 'content', markdownSchema)
   const width = readProp(props, 'width', markdownSchema)
+  const height = props?.height
   const canEdit = typeof onUpdate === 'function'
   const [editing, setEditing] = useState(false)
   const editingActive = canEdit && editing
@@ -35,6 +75,32 @@ export default function MarkdownBlock({ props, onUpdate }) {
   const blockRef = useRef(null)
   const [editHeight, setEditHeight] = useState(null)
 
+  const handleResize = useCallback((w, h) => {
+    onUpdate?.({ width: w, height: h })
+  }, [onUpdate])
+
+  const rawHtml = useMemo(() => renderMarkdown(content), [content])
+  const [renderedHtml, setRenderedHtml] = useState(rawHtml)
+
+  // Re-highlight when theme changes
+  const [themeKey, setThemeKey] = useState(0)
+  useEffect(() => {
+    function onThemeChanged() { setThemeKey((k) => k + 1) }
+    document.addEventListener('storyboard:theme:changed', onThemeChanged)
+    return () => document.removeEventListener('storyboard:theme:changed', onThemeChanged)
+  }, [])
+
+  // Async-highlight code blocks after initial render or theme change
+  useEffect(() => {
+    setRenderedHtml(rawHtml)
+    if (!rawHtml.includes('<code class="language-')) return
+    let cancelled = false
+    highlightCodeBlocks(rawHtml).then((highlighted) => {
+      if (!cancelled) setRenderedHtml(highlighted)
+    })
+    return () => { cancelled = true }
+  }, [rawHtml, themeKey])
+
   const handleContentChange = useCallback((e) => {
     onUpdate?.({ content: e.target.value })
   }, [onUpdate])
@@ -67,7 +133,7 @@ export default function MarkdownBlock({ props, onUpdate }) {
       <div
         ref={blockRef}
         className={styles.block}
-        style={{ width, minHeight: editHeight || undefined }}
+        style={{ width, ...(height ? { height, overflow: 'auto' } : {}), minHeight: editHeight || undefined }}
       >
         {editingActive ? (
           <textarea
@@ -97,12 +163,20 @@ export default function MarkdownBlock({ props, onUpdate }) {
             tabIndex={canEdit ? 0 : undefined}
             onKeyDown={canEdit ? (e) => { if (e.key === 'Enter') setEditing(true) } : undefined}
             dangerouslySetInnerHTML={{
-              __html: renderMarkdown(content) || (canEdit
+              __html: renderedHtml || (canEdit
                 ? '<p class="placeholder">Double-click to edit…</p>'
                 : '<p class="placeholder">No content</p>'),
             }}
           />
         )}
+        {resizable && (
+          <ResizeHandle
+            targetRef={blockRef}
+            minWidth={200}
+            minHeight={60}
+            onResize={handleResize}
+          />
+        )}
       </div>
     </WidgetWrapper>
   )

package/src/canvas/widgets/MarkdownBlock.module.css

@@ -1,4 +1,5 @@
 .block {
+  position: relative;
   min-height: 80px;
   --sb--markdown-bg: var(--bgColor-default, #ffffff);
   --sb--markdown-fg: var(--fgColor-default, #1f2328);
@@ -23,6 +24,38 @@
   pointer-events: none;
 }
 
+.preview a {
+  color: var(--sb--markdown-accent);
+  text-decoration: none;
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+.preview a:hover {
+  text-decoration: underline;
+}
+
+.preview img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+  border: 1px solid var(--borderColor-default, #d0d7de);
+  margin: 8px 0;
+  display: block;
+  pointer-events: auto;
+}
+
+.preview video {
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+  border: 1px solid var(--borderColor-default, #d0d7de);
+  margin: 8px 0;
+  display: block;
+  pointer-events: auto;
+  background: var(--bgColor-muted, #f6f8fa);
+}
+
 .preview h1 {
   font-size: 20px;
   font-weight: 700;
@@ -52,17 +85,115 @@
   background: var(--bgColor-neutral-muted, #afb8c133);
   padding: 2px 5px;
   border-radius: 4px;
-  font-size: 13px;
-  font-family: ui-monospace, monospace;
+  font-size: 12px;
+  font-weight: 400;
+  font-family: "Ioskeley Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
 }
 
 .preview ul {
   margin: 0 0 8px;
   padding-left: 20px;
+  list-style-type: disc;
 }
 
 .preview li {
   margin: 0 0 2px;
+  display: list-item;
+}
+
+.preview ol {
+  margin: 0 0 8px;
+  padding-left: 20px;
+  list-style-type: decimal;
+}
+
+/* GFM: Task lists — accent-colored checkboxes */
+.preview input[type="checkbox"] {
+  margin-right: 6px;
+  pointer-events: none;
+  accent-color: var(--sb--markdown-accent);
+}
+
+.preview li:has(input[type="checkbox"]) {
+  list-style: none;
+  margin-left: -20px;
+}
+
+/* GFM: Strikethrough */
+.preview del {
+  text-decoration: line-through;
+  color: var(--sb--markdown-muted);
+}
+
+/* GFM: Tables */
+.preview table {
+  border-collapse: collapse;
+  margin: 8px 0;
+  width: 100%;
+  font-size: 13px;
+}
+
+.preview th,
+.preview td {
+  border: 1px solid var(--borderColor-default, #d0d7de);
+  padding: 6px 12px;
+  text-align: left;
+}
+
+.preview th {
+  background: var(--bgColor-muted, #f6f8fa);
+  font-weight: 600;
+}
+
+/* Code blocks */
+.preview pre {
+  padding: 12px 16px;
+  border-radius: 6px;
+  border: 1px solid var(--borderColor-muted, #d8dee4);
+  overflow-x: auto;
+  margin: 8px 0;
+  background: var(--bgColor-neutral-muted, #afb8c133);
+  line-height: 1.4;
+}
+
+/* When inspector highlighter sets inline background, let it through */
+.preview pre[style] {
+  border-radius: 6px;
+  border: 1px solid var(--borderColor-muted, #d8dee4);
+  overflow-x: auto;
+  margin: 8px 0;
+}
+
+.preview pre code {
+  background: none;
+  padding: 0;
+  font-size: 12px;
+  font-weight: 400;
+  font-family: "Ioskeley Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  white-space: pre;
+  word-break: normal;
+  overflow-wrap: normal;
+  display: block;
+}
+
+/* Suppress line numbers from inspector highlighter's .line spans */
+.preview :global(.line::before) {
+  display: none !important;
+}
+
+/* Blockquotes */
+.preview blockquote {
+  border-left: 4px solid var(--borderColor-default, #d0d7de);
+  margin: 8px 0;
+  padding: 4px 16px;
+  color: var(--sb--markdown-muted);
+}
+
+/* Horizontal rules */
+.preview hr {
+  border: none;
+  border-top: 1px solid var(--borderColor-default, #d0d7de);
+  margin: 16px 0;
 }
 
 .preview :global(.placeholder) {

package/src/canvas/widgets/MarkdownBlock.test.jsx

@@ -50,4 +50,43 @@ describe('MarkdownBlock', () => {
 
     expect(setData).toHaveBeenCalledWith('text/plain', '**Hello**\n- item')
   })
+
+  describe('GitHub Flavored Markdown', () => {
+    it('renders tables', () => {
+      const markdown = `| Name | Age |
+| --- | --- |
+| Alice | 30 |`
+      const { container } = render(<MarkdownBlock props={{ content: markdown, width: 420 }} />)
+
+      expect(container.querySelector('table')).not.toBeNull()
+      expect(container.querySelector('th')).not.toBeNull()
+      expect(screen.getByText('Alice')).toBeTruthy()
+    })
+
+    it('renders task lists', () => {
+      const markdown = `- [x] Done
+- [ ] Todo`
+      const { container } = render(<MarkdownBlock props={{ content: markdown, width: 420 }} />)
+
+      const checkboxes = container.querySelectorAll('input[type="checkbox"]')
+      expect(checkboxes).toHaveLength(2)
+      expect(checkboxes[0].checked).toBe(true)
+      expect(checkboxes[1].checked).toBe(false)
+    })
+
+    it('renders strikethrough', () => {
+      const { container } = render(<MarkdownBlock props={{ content: '~~deleted~~', width: 420 }} />)
+
+      expect(container.querySelector('del')).not.toBeNull()
+      expect(screen.getByText('deleted')).toBeTruthy()
+    })
+
+    it('renders autolinks', () => {
+      const { container } = render(<MarkdownBlock props={{ content: 'https://github.com', width: 420 }} />)
+
+      const link = container.querySelector('a')
+      expect(link).not.toBeNull()
+      expect(link.href).toBe('https://github.com/')
+    })
+  })
 })