@dfosco/storyboard-react 4.0.0-beta.2 → 4.0.0-beta.20

package/src/canvas/widgets/ComponentWidget.jsx

@@ -1,17 +1,34 @@
-import { useRef, useCallback, useState, useEffect } from 'react'
+import { useRef, useCallback, useState, useEffect, useMemo } from 'react'
 import WidgetWrapper from './WidgetWrapper.jsx'
 import ResizeHandle from './ResizeHandle.jsx'
+import ComponentErrorBoundary from '../ComponentErrorBoundary.jsx'
 import styles from './ComponentWidget.module.css'
+import overlayStyles from './embedOverlay.module.css'
 
 /**
  * Renders a live JSX export from a .canvas.jsx companion file.
- * Content is read-only (re-renders on HMR), only position and size are mutable.
- * Cannot be deleted from canvas — only removed from source code.
+ *
+ * In dev mode (isLocalDev), each component is rendered inside an iframe
+ * via the /_storyboard/canvas/isolate middleware. This isolates broken
+ * components so they cannot crash the entire canvas page.
+ *
+ * In production, the component is rendered directly with an ErrorBoundary
+ * as a fallback safety net.
  *
  * Double-click the overlay to enter interactive mode (dropdowns, buttons work).
  * Click outside to exit interactive mode.
  */
-export default function ComponentWidget({ component: Component, width, height, onUpdate, resizable }) {
+export default function ComponentWidget({
+  component: Component,
+  jsxModule,
+  exportName,
+  canvasTheme,
+  isLocalDev,
+  width,
+  height,
+  onUpdate,
+  resizable,
+}) {
   const containerRef = useRef(null)
   const [interactive, setInteractive] = useState(false)
 
@@ -33,7 +50,21 @@ export default function ComponentWidget({ component: Component, width, height, o
     return () => document.removeEventListener('pointerdown', handlePointerDown)
   }, [interactive])
 
-  if (!Component) return null
+  // Build iframe src for dev isolation
+  const iframeSrc = useMemo(() => {
+    if (!isLocalDev || !jsxModule || !exportName) return null
+    const basePath = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
+    const params = new URLSearchParams({
+      module: jsxModule,
+      export: exportName,
+      theme: canvasTheme || 'light',
+    })
+    return `${basePath}/_storyboard/canvas/isolate?${params}`
+  }, [isLocalDev, jsxModule, exportName, canvasTheme])
+
+  const useIframe = isLocalDev && iframeSrc
+
+  if (!useIframe && !Component) return null
 
   const sizeStyle = {}
   if (typeof width === 'number') sizeStyle.width = `${width}px`
@@ -43,13 +74,40 @@ export default function ComponentWidget({ component: Component, width, height, o
     <WidgetWrapper>
       <div ref={containerRef} className={styles.container} style={sizeStyle}>
         <div className={styles.content}>
-          <Component />
+          {useIframe ? (
+            <iframe
+              src={iframeSrc}
+              className={styles.iframe}
+              title={exportName || 'Component widget'}
+              sandbox="allow-same-origin allow-scripts"
+            />
+          ) : Component ? (
+            <ComponentErrorBoundary name={exportName}>
+              <Component />
+            </ComponentErrorBoundary>
+          ) : null}
         </div>
         {!interactive && (
           <div
-            className={styles.interactOverlay}
-            onDoubleClick={enterInteractive}
-          />
+            className={overlayStyles.interactOverlay}
+            onClick={(e) => {
+              // Don't enter interactive mode for modifier clicks (shift/meta/ctrl for multi-select)
+              if (e.shiftKey || e.metaKey || e.ctrlKey || e.altKey) return
+              enterInteractive()
+            }}
+            role="button"
+            tabIndex={0}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                e.stopPropagation()
+                enterInteractive()
+              }
+            }}
+            aria-label="Click to interact with component"
+          >
+            <span className={overlayStyles.interactHint}>Click to interact</span>
+          </div>
         )}
         {resizable && (
           <ResizeHandle

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

@@ -1,8 +1,11 @@
 .container {
   position: relative;
-  overflow: auto;
+  overflow: hidden;
   min-width: 100px;
   min-height: 60px;
+  background: var(--bgColor-default, #ffffff);
+  width: 100%;
+  height: 100%;
 }
 
 .content {
@@ -10,9 +13,9 @@
   height: 100%;
 }
 
-.interactOverlay {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  cursor: default;
+.iframe {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: none;
 }

package/src/canvas/widgets/FigmaEmbed.jsx

@@ -5,6 +5,7 @@ import { readProp } from './widgetProps.js'
 import { schemas } from './widgetConfig.js'
 import { toFigmaEmbedUrl, getFigmaTitle, getFigmaType, isFigmaUrl } from './figmaUrl.js'
 import styles from './FigmaEmbed.module.css'
+import overlayStyles from './embedOverlay.module.css'
 
 const figmaEmbedSchema = schemas['figma-embed']
 
@@ -126,9 +127,25 @@ export default forwardRef(function FigmaEmbed({ props, onUpdate, resizable }, re
             </div>
             {!interactive && !expanded && (
               <div
-                className={styles.dragOverlay}
-                onDoubleClick={enterInteractive}
-              />
+                className={overlayStyles.interactOverlay}
+                onClick={(e) => {
+                  // Don't enter interactive mode for modifier clicks (shift/meta/ctrl for multi-select)
+                  if (e.shiftKey || e.metaKey || e.ctrlKey || e.altKey) return
+                  enterInteractive()
+                }}
+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault()
+                    e.stopPropagation()
+                    enterInteractive()
+                  }
+                }}
+                aria-label="Click to interact with Figma embed"
+              >
+                <span className={overlayStyles.interactHint}>Click to interact</span>
+              </div>
             )}
           </>
         ) : (
@@ -171,8 +188,13 @@ export default forwardRef(function FigmaEmbed({ props, onUpdate, resizable }, re
         style={expanded && embedUrl ? undefined : { display: 'none' }}
         onClick={() => setExpanded(false)}
         onPointerDown={(e) => e.stopPropagation()}
-        onKeyDown={(e) => e.stopPropagation()}
+        onKeyDown={(e) => {
+          e.stopPropagation()
+          if (e.key === 'Escape') setExpanded(false)
+        }}
         onWheel={(e) => e.stopPropagation()}
+        tabIndex={-1}
+        ref={(el) => { if (el && expanded) el.focus() }}
       >
         <div
           ref={modalContainerRef}

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

@@ -47,13 +47,6 @@
   display: block;
 }
 
-.dragOverlay {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  cursor: grab;
-}
-
 .resizeHandle {
   position: absolute;
   bottom: 0;

package/src/canvas/widgets/MarkdownBlock.jsx

@@ -1,33 +1,72 @@
-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)
+  return String(result)
+}
+
+/**
+ * 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 +74,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 +132,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 +162,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);
@@ -52,17 +53,124 @@
   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 */
+.preview input[type="checkbox"] {
+  margin-right: 6px;
+  pointer-events: none;
+}
+
+.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;
+}
+
+/* GFM: Autolinks */
+.preview a {
+  color: var(--sb--markdown-accent);
+  text-decoration: none;
+}
+
+.preview a:hover {
+  text-decoration: underline;
+}
+
+/* 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/')
+    })
+  })
 })