@dfosco/storyboard 0.9.6 → 0.10.0

package/src/internals/canvas/widgets/KnobsWidget.test.jsx

@@ -0,0 +1,237 @@
+import { act, cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { initKnobs } from '../../../core/index.js'
+import { _resetWidgetRegistry } from '../../../core/stores/widgetRegistry.js'
+import { setWidgetRef } from '../canvasApi.js'
+import KnobsWidget from './KnobsWidget.jsx'
+
+const KNOBS_ID = 'knobs-1'
+
+const componentKnobs = {
+  Alpha: [{ id: 'title', type: 'text', label: 'Alpha title', default: 'Alpha default' }],
+  Beta: [{ id: 'mode', type: 'select', label: 'Beta mode', default: 'light', options: ['light', 'dark'] }],
+}
+
+function connector(id, start, end) {
+  return {
+    id,
+    type: 'connector',
+    start: { widgetId: start, anchor: 'right' },
+    end: { widgetId: end, anchor: 'left' },
+  }
+}
+
+function storyWidget(id, storyId, alias) {
+  return {
+    id,
+    type: 'story',
+    position: { x: 0, y: 0 },
+    props: { storyId, alias, width: 400, height: 300 },
+  }
+}
+
+function setBridge(widgets, connectors) {
+  window.__storyboardCanvasBridgeState = {
+    canvasId: 'test-canvas',
+    widgets,
+    connectors,
+  }
+}
+
+function dispatchBridgeUpdate() {
+  document.dispatchEvent(new CustomEvent('storyboard:canvas:bridge-updated'))
+}
+
+function paramsFor(targetWindow = window) {
+  return new URLSearchParams(targetWindow.location.hash.replace(/^#/, ''))
+}
+
+function registerIframeWindow(widgetId) {
+  const iframe = document.createElement('iframe')
+  document.body.appendChild(iframe)
+  setWidgetRef(widgetId, { getIframeWindow: () => iframe.contentWindow })
+  return iframe.contentWindow
+}
+
+function renderWidget({ props = {}, onUpdate = vi.fn(), resizable = false } = {}) {
+  return {
+    onUpdate,
+    ...render(
+      <KnobsWidget
+        id={KNOBS_ID}
+        props={{ width: 360, height: 420, ...props }}
+        onUpdate={onUpdate}
+        resizable={resizable}
+      />
+    ),
+  }
+}
+
+describe('KnobsWidget', () => {
+  beforeEach(() => {
+    initKnobs({ componentKnobs })
+    _resetWidgetRegistry()
+    window.history.replaceState(null, '', '/')
+    setBridge([], [])
+  })
+
+  afterEach(() => {
+    setWidgetRef('story-alpha', null)
+    setWidgetRef('story-beta', null)
+    delete window.__storyboardCanvasBridgeState
+    cleanup()
+    initKnobs()
+    _resetWidgetRegistry()
+  })
+
+  it('renders an empty state when there are no connected targets', () => {
+    renderWidget()
+
+    expect(screen.getByText('Connect this widget to a prototype, component, or canvas widget to expose its knobs.')).toBeInTheDocument()
+  })
+
+  it('renders KnobsForm with a single connected target schema', () => {
+    registerIframeWindow('story-alpha')
+    setBridge(
+      [storyWidget('story-alpha', 'Alpha', 'Alpha target')],
+      [connector('connector-alpha', KNOBS_ID, 'story-alpha')],
+    )
+
+    renderWidget()
+
+    expect(screen.queryByRole('tab')).toBeNull()
+    expect(screen.getByLabelText('Alpha title')).toHaveValue('Alpha default')
+  })
+
+  it('renders tabs for multiple connected targets and swaps the active form on click', () => {
+    registerIframeWindow('story-alpha')
+    registerIframeWindow('story-beta')
+    setBridge(
+      [
+        storyWidget('story-alpha', 'Alpha', 'Alpha target'),
+        storyWidget('story-beta', 'Beta', 'Beta target'),
+      ],
+      [
+        connector('connector-alpha', KNOBS_ID, 'story-alpha'),
+        connector('connector-beta', KNOBS_ID, 'story-beta'),
+      ],
+    )
+
+    renderWidget()
+
+    expect(screen.getByRole('tab', { name: 'Alpha target' })).toHaveAttribute('aria-selected', 'true')
+    expect(screen.getByLabelText('Alpha title')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('tab', { name: 'Beta target' }))
+
+    expect(screen.getByRole('tab', { name: 'Beta target' })).toHaveAttribute('aria-selected', 'true')
+    expect(screen.getByText('Beta mode')).toBeInTheDocument()
+    expect(screen.queryByLabelText('Alpha title')).toBeNull()
+  })
+
+  it('uses activeTarget props and persists tab selection through onUpdate', () => {
+    registerIframeWindow('story-alpha')
+    registerIframeWindow('story-beta')
+    setBridge(
+      [
+        storyWidget('story-alpha', 'Alpha', 'Alpha target'),
+        storyWidget('story-beta', 'Beta', 'Beta target'),
+      ],
+      [
+        connector('connector-alpha', KNOBS_ID, 'story-alpha'),
+        connector('connector-beta', KNOBS_ID, 'story-beta'),
+      ],
+    )
+    const onUpdate = vi.fn()
+
+    renderWidget({ props: { activeTarget: 'story-beta' }, onUpdate })
+
+    expect(screen.getByRole('tab', { name: 'Beta target' })).toHaveAttribute('aria-selected', 'true')
+
+    fireEvent.click(screen.getByRole('tab', { name: 'Alpha target' }))
+
+    expect(onUpdate).toHaveBeenCalledWith({ activeTarget: 'story-alpha' })
+    expect(screen.getByRole('tab', { name: 'Alpha target' })).toHaveAttribute('aria-selected', 'true')
+  })
+
+  it('falls back to the first remaining target when the active target disconnects', () => {
+    registerIframeWindow('story-alpha')
+    registerIframeWindow('story-beta')
+    setBridge(
+      [
+        storyWidget('story-alpha', 'Alpha', 'Alpha target'),
+        storyWidget('story-beta', 'Beta', 'Beta target'),
+      ],
+      [
+        connector('connector-alpha', KNOBS_ID, 'story-alpha'),
+        connector('connector-beta', KNOBS_ID, 'story-beta'),
+      ],
+    )
+    const onUpdate = vi.fn()
+
+    renderWidget({ props: { activeTarget: 'story-beta' }, onUpdate })
+    expect(screen.getByText('Beta mode')).toBeInTheDocument()
+
+    act(() => {
+      setBridge(
+        [storyWidget('story-alpha', 'Alpha', 'Alpha target')],
+        [connector('connector-alpha', KNOBS_ID, 'story-alpha')],
+      )
+      dispatchBridgeUpdate()
+    })
+
+    expect(screen.getByLabelText('Alpha title')).toBeInTheDocument()
+    expect(screen.queryByText('Beta mode')).toBeNull()
+    expect(onUpdate).toHaveBeenCalledWith({ activeTarget: 'story-alpha' })
+  })
+
+  it('waits for iframe-backed targets instead of falling back to canvas hash writes', () => {
+    setBridge(
+      [storyWidget('story-alpha', 'Alpha', 'Alpha target')],
+      [connector('connector-alpha', KNOBS_ID, 'story-alpha')],
+    )
+
+    renderWidget()
+
+    expect(screen.getByText('Waiting for Alpha target to finish loading before writing knobs.')).toBeInTheDocument()
+    expect(screen.queryByLabelText('Alpha title')).toBeNull()
+  })
+
+  it('routes iframe writes to the target contentWindow hash, not the canvas hash', () => {
+    const targetWindow = registerIframeWindow('story-alpha')
+    setBridge(
+      [storyWidget('story-alpha', 'Alpha', 'Alpha target')],
+      [connector('connector-alpha', KNOBS_ID, 'story-alpha')],
+    )
+
+    renderWidget()
+
+    fireEvent.change(screen.getByLabelText('Alpha title'), { target: { value: 'Iframe value' } })
+
+    expect(paramsFor(targetWindow).get('knobTitle')).toBe('Iframe value')
+    expect(paramsFor(window).get('knobTitle')).toBeNull()
+  })
+
+  it('preserves resize behavior by applying dimensions and persisting updates', () => {
+    const onUpdate = vi.fn()
+    const { container } = renderWidget({
+      props: { width: 300, height: 240 },
+      onUpdate,
+      resizable: true,
+    })
+    const card = container.querySelector('[data-knobs-widget]')
+    const handle = screen.getByRole('separator', { name: 'Resize' })
+
+    expect(card.style.width).toBe('300px')
+    expect(card.style.height).toBe('240px')
+
+    Object.defineProperty(card, 'offsetWidth', { value: 300, configurable: true })
+    Object.defineProperty(card, 'offsetHeight', { value: 240, configurable: true })
+
+    fireEvent.mouseDown(handle, { clientX: 300, clientY: 240 })
+    fireEvent.mouseMove(document, { clientX: 340, clientY: 280 })
+    fireEvent.mouseUp(document)
+
+    expect(onUpdate).toHaveBeenCalledWith({ width: 340, height: 280 })
+  })
+})

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

@@ -1,7 +1,4 @@
 import { useState, useRef, useEffect, useCallback, useMemo, forwardRef, useImperativeHandle } from 'react'
-import { remark } from 'remark'
-import remarkGfm from 'remark-gfm'
-import remarkHtml from 'remark-html'
 import WidgetWrapper from './WidgetWrapper.jsx'
 import ResizeHandle from './ResizeHandle.jsx'
 import { readProp } from './widgetProps.js'
@@ -9,64 +6,11 @@ import { schemas, getFeaturesForSurface } from './widgetConfig.js'
 import ExpandedPane from './ExpandedPane.jsx'
 import { findAllConnectedSplitTargets, getSplitPaneLabel, buildPaneForWidget, buildSplitLayout } from './expandUtils.js'
 import { useExpandOverride } from './useExpandOverride.js'
+import { MarkdownView, MarkdownTextEditor } from './markdown/MarkdownEditor.jsx'
 import styles from './MarkdownBlock.module.css'
 
 const markdownSchema = schemas['markdown']
 
-/**
- * Renders markdown to HTML using remark with GitHub Flavored Markdown support.
- */
-function renderMarkdown(text) {
-  if (!text) return ''
-  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('../../../core/inspector/highlighter.js').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 forwardRef(function MarkdownBlock({ id, props, onUpdate, resizable }, ref) {
   const content = readProp(props, 'content', markdownSchema)
   const width = readProp(props, 'width', markdownSchema)
@@ -77,7 +21,6 @@ export default forwardRef(function MarkdownBlock({ id, props, onUpdate, resizabl
   const [expandMode, setExpandMode] = useExpandOverride('markdown', id)
   const expanded = expandMode !== null
   const editingActive = canEdit && editing
-  const textareaRef = useRef(null)
   const blockRef = useRef(null)
   const [editHeight, setEditHeight] = useState(null)
 
@@ -93,31 +36,8 @@ export default forwardRef(function MarkdownBlock({ id, props, onUpdate, resizabl
     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(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    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 })
+  const handleContentChange = useCallback((value) => {
+    onUpdate?.({ content: value })
   }, [onUpdate])
 
   const handleReadOnlyCopy = useCallback((e) => {
@@ -130,7 +50,8 @@ export default forwardRef(function MarkdownBlock({ id, props, onUpdate, resizabl
   }, [canEdit, content])
 
   const startEditing = useCallback(() => {
-    // Capture the preview height BEFORE React swaps to the textarea
+    // Capture the preview height BEFORE React swaps to the textarea so the
+    // widget doesn't collapse to its min-height during the transition.
     if (blockRef.current) {
       setEditHeight(blockRef.current.offsetHeight)
       blockRef.current.dataset.scrollTop = blockRef.current.scrollTop
@@ -140,15 +61,10 @@ export default forwardRef(function MarkdownBlock({ id, props, onUpdate, resizabl
 
   useEffect(() => {
     if (editingActive) {
-      if (textareaRef.current) {
-        // Place cursor at end and prevent scroll jump to top
-        const len = textareaRef.current.value.length
-        textareaRef.current.setSelectionRange(len, len)
-        textareaRef.current.focus({ preventScroll: true })
-        // Restore the block's scroll position (captured before React swapped the DOM)
-        if (blockRef.current) {
-          blockRef.current.scrollTop = blockRef.current.dataset.scrollTop || 0
-        }
+      // Restore the block's scroll position (captured before React swapped the
+      // DOM) on the next frame, after the textarea has been laid out.
+      if (blockRef.current) {
+        blockRef.current.scrollTop = blockRef.current.dataset.scrollTop || 0
       }
     } else {
       // eslint-disable-next-line react-hooks/set-state-in-effect
@@ -169,39 +85,27 @@ export default forwardRef(function MarkdownBlock({ id, props, onUpdate, resizabl
         }}
       >
         {editingActive ? (
-          <textarea
-            ref={textareaRef}
+          <MarkdownTextEditor
             className={styles.editor}
-            data-canvas-allow-text-selection
             style={{ flex: 1 }}
-            value={content}
+            content={content}
             onChange={handleContentChange}
-            onBlur={() => setEditing(false)}
-            onMouseDown={(e) => e.stopPropagation()}
-            onPointerDown={(e) => e.stopPropagation()}
-            onKeyDown={(e) => {
-              if (e.key === 'Escape') setEditing(false)
-            }}
-            placeholder="Write markdown…"
+            onExit={() => setEditing(false)}
           />
         ) : (
-          <div
+          <MarkdownView
             className={styles.preview}
             style={!canEdit ? { cursor: 'default' } : undefined}
-            data-canvas-allow-text-selection={!canEdit ? '' : undefined}
-            onClick={!canEdit ? (e) => e.stopPropagation() : undefined}
+            content={content}
+            canEdit={canEdit}
+            onStartEditing={startEditing}
             onCopy={!canEdit ? handleReadOnlyCopy : undefined}
-            onDoubleClick={canEdit ? startEditing : undefined}
-            role={canEdit ? 'button' : undefined}
-            tabIndex={canEdit ? 0 : undefined}
-            onKeyDown={canEdit ? (e) => {
-              if (e.key === 'Enter') startEditing()
-            } : undefined}
-            dangerouslySetInnerHTML={{
-              __html: renderedHtml || (canEdit
-                ? '<p class="placeholder">Double-click to edit…</p>'
-                : '<p class="placeholder">No content</p>'),
-            }}
+            allowTextSelection={!canEdit}
+            size="small"
+            inert
+            emptyHtml={canEdit
+              ? '<p class="placeholder">Double-click to edit…</p>'
+              : '<p class="placeholder">No content</p>'}
           />
         )}
         {resizable && (
@@ -304,54 +208,30 @@ function MarkdownExpandPane({ widgetId, content, splitMode, onClose, onUpdate })
  * Editing state is controlled externally via props (toggle button lives in the title bar).
  */
 export function ExpandedMarkdownEditor({ content, onUpdate, editing, onToggleEdit }) {
-  const textareaRef = useRef(null)
   const canEdit = typeof onUpdate === 'function'
 
-  const rawHtml = useMemo(() => renderMarkdown(content), [content])
-  const [renderedHtml, setRenderedHtml] = useState(rawHtml)
-
-  useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    setRenderedHtml(rawHtml)
-    if (!rawHtml.includes('<code class="language-')) return
-    let cancelled = false
-    highlightCodeBlocks(rawHtml).then((highlighted) => {
-      if (!cancelled) setRenderedHtml(highlighted)
-    })
-    return () => { cancelled = true }
-  }, [rawHtml])
-
-  useEffect(() => {
-    if (editing && textareaRef.current) {
-      const len = textareaRef.current.value.length
-      textareaRef.current.setSelectionRange(len, len)
-      textareaRef.current.focus({ preventScroll: true })
-    }
-  }, [editing])
-
   if (editing && canEdit) {
     return (
       <div className={styles.expandedEditorWrap}>
-        <textarea
-          ref={textareaRef}
+        <MarkdownTextEditor
           className={styles.expandedEditor}
-          value={content}
-          onChange={(e) => onUpdate({ content: e.target.value })}
-          onKeyDown={(e) => { if (e.key === 'Escape') onToggleEdit?.() }}
-          placeholder="Write markdown…"
+          content={content}
+          onChange={(value) => onUpdate({ content: value })}
+          onExit={() => onToggleEdit?.()}
         />
       </div>
     )
   }
 
   return (
-    <div
+    <MarkdownView
       className={styles.expandedPreview}
       style={{ flex: 1, overflow: 'auto' }}
-      onDoubleClick={canEdit ? onToggleEdit : undefined}
-      dangerouslySetInnerHTML={{
-        __html: renderedHtml || '<p>No content</p>',
-      }}
+      content={content}
+      canEdit={canEdit}
+      onStartEditing={onToggleEdit}
+      size="large"
+      emptyHtml="<p>No content</p>"
     />
   )
 }