@dfosco/storyboard-react 4.2.0-beta.1 → 4.2.0-beta.18

package/src/canvas/widgets/MarkdownBlock.jsx

@@ -1,11 +1,13 @@
-import { useState, useRef, useEffect, useCallback, useMemo } from 'react'
+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'
-import { schemas } from './widgetConfig.js'
+import { schemas, getFeaturesForSurface } from './widgetConfig.js'
+import ExpandedPane from './ExpandedPane.jsx'
+import { findAllConnectedSplitTargets, getSplitPaneLabel, buildPaneForWidget, buildSplitLayout } from './expandUtils.js'
 import styles from './MarkdownBlock.module.css'
 
 const markdownSchema = schemas['markdown']
@@ -64,18 +66,28 @@ async function highlightCodeBlocks(html) {
   )
 }
 
-export default function MarkdownBlock({ props, onUpdate, resizable }) {
+export default forwardRef(function MarkdownBlock({ id, props, onUpdate, resizable }, ref) {
   const content = readProp(props, 'content', markdownSchema)
   const width = readProp(props, 'width', markdownSchema)
   const height = props?.height
   const collapsed = !!props?.collapsed
   const canEdit = typeof onUpdate === 'function'
   const [editing, setEditing] = useState(false)
+  const [expandMode, setExpandMode] = useState(null)
+  const expanded = expandMode !== null
   const editingActive = canEdit && editing
   const textareaRef = useRef(null)
   const blockRef = useRef(null)
   const [editHeight, setEditHeight] = useState(null)
 
+  useImperativeHandle(ref, () => ({
+    handleAction(actionId) {
+      if (actionId === 'expand' || actionId === 'expand-single') { setExpandMode('single'); return true }
+      if (actionId === 'split-screen') { setExpandMode('split'); return true }
+      return false
+    },
+  }), [])
+
   const handleResize = useCallback((w, h) => {
     onUpdate?.({ width: w, height: h })
   }, [onUpdate])
@@ -115,12 +127,17 @@ export default function MarkdownBlock({ props, onUpdate, resizable }) {
     }
   }, [canEdit, content])
 
+  const startEditing = useCallback(() => {
+    // Capture the preview height BEFORE React swaps to the textarea
+    if (blockRef.current) {
+      setEditHeight(blockRef.current.offsetHeight)
+      blockRef.current.dataset.scrollTop = blockRef.current.scrollTop
+    }
+    setEditing(true)
+  }, [])
+
   useEffect(() => {
     if (editingActive) {
-      // Capture the preview height before switching to editor
-      if (blockRef.current && !editHeight) {
-        setEditHeight(blockRef.current.offsetHeight)
-      }
       if (textareaRef.current) {
         // Place cursor at end and prevent scroll jump to top
         const len = textareaRef.current.value.length
@@ -134,9 +151,10 @@ export default function MarkdownBlock({ props, onUpdate, resizable }) {
     } else {
       setEditHeight(null)
     }
-  }, [editingActive, editHeight])
+  }, [editingActive])
 
   return (
+    <>
     <WidgetWrapper>
       <div
         ref={blockRef}
@@ -170,18 +188,11 @@ export default function MarkdownBlock({ props, onUpdate, resizable }) {
             data-canvas-allow-text-selection={!canEdit ? '' : undefined}
             onClick={!canEdit ? (e) => e.stopPropagation() : undefined}
             onCopy={!canEdit ? handleReadOnlyCopy : undefined}
-            onDoubleClick={canEdit ? () => {
-              // Save scroll position before switching to editor
-              if (blockRef.current) blockRef.current.dataset.scrollTop = blockRef.current.scrollTop
-              setEditing(true)
-            } : undefined}
+            onDoubleClick={canEdit ? startEditing : undefined}
             role={canEdit ? 'button' : undefined}
             tabIndex={canEdit ? 0 : undefined}
             onKeyDown={canEdit ? (e) => {
-              if (e.key === 'Enter') {
-                if (blockRef.current) blockRef.current.dataset.scrollTop = blockRef.current.scrollTop
-                setEditing(true)
-              }
+              if (e.key === 'Enter') startEditing()
             } : undefined}
             dangerouslySetInnerHTML={{
               __html: renderedHtml || (canEdit
@@ -200,5 +211,141 @@ export default function MarkdownBlock({ props, onUpdate, resizable }) {
         )}
       </div>
     </WidgetWrapper>
+    {expanded && (
+      <MarkdownExpandPane
+        widgetId={id}
+        content={content}
+        splitMode={expandMode === 'split'}
+        onClose={() => setExpandMode(null)}
+        onUpdate={onUpdate}
+      />
+    )}
+    </>
+  )
+})
+
+/**
+ * Builds pane configs and renders ExpandedPane for an expanded markdown widget.
+ */
+function MarkdownExpandPane({ widgetId, content, splitMode, onClose, onUpdate }) {
+  const [editing, setEditing] = useState(false)
+  const canEdit = typeof onUpdate === 'function'
+
+  const connectedWidgets = useMemo(
+    () => splitMode ? findAllConnectedSplitTargets(widgetId) : [],
+    [widgetId, splitMode],
+  )
+  const primaryWidget = useMemo(() => {
+    const bridge = window.__storyboardCanvasBridgeState
+    return bridge?.widgets?.find((w) => w.id === widgetId) || { id: widgetId, type: 'markdown', position: { x: 0, y: 0 }, props: {} }
+  }, [widgetId])
+
+  // Surface: fullbar for single expand, splitbar for split
+  const surface = splitMode ? 'splitbar' : 'fullbar'
+  const surfaceFeatures = useMemo(
+    () => canEdit ? getFeaturesForSurface('markdown', surface) : [],
+    [canEdit, surface],
+  )
+
+  const getState = useCallback((key) => {
+    if (key === 'editing') return editing
+    return undefined
+  }, [editing])
+
+  const handleAction = useCallback((actionId) => {
+    if (actionId === 'toggle-edit') {
+      setEditing((v) => !v)
+    }
+  }, [])
+
+  const buildPaneFn = useCallback((widget) => {
+    if (widget.id === widgetId) {
+      return {
+        id: widgetId,
+        label: getSplitPaneLabel(primaryWidget) || 'Markdown',
+        widgetType: 'markdown',
+        kind: 'react',
+        features: surfaceFeatures,
+        getState,
+        onAction: handleAction,
+        render: () => (
+          <ExpandedMarkdownEditor
+            content={content}
+            onUpdate={onUpdate}
+            editing={editing}
+            onToggleEdit={() => setEditing((v) => !v)}
+          />
+        ),
+      }
+    }
+    return buildPaneForWidget(widget, surface)
+  }, [widgetId, primaryWidget, content, onUpdate, editing, surfaceFeatures, getState, handleAction, surface])
+
+  const layout = useMemo(
+    () => buildSplitLayout(primaryWidget, connectedWidgets, buildPaneFn),
+    [primaryWidget, connectedWidgets, buildPaneFn],
+  )
+
+  return (
+    <ExpandedPane
+      initialLayout={layout}
+      variant={layout.flat().length <= 1 ? 'modal' : 'full'}
+      onClose={onClose}
+    />
+  )
+}
+
+/**
+ * Editable markdown view for expanded/split-screen panes.
+ * Self-contained: renders markdown from raw content with syntax highlighting.
+ * 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(() => {
+    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 (
+      <textarea
+        ref={textareaRef}
+        className={styles.expandedEditor}
+        value={content}
+        onChange={(e) => onUpdate({ content: e.target.value })}
+        onKeyDown={(e) => { if (e.key === 'Escape') onToggleEdit?.() }}
+        placeholder="Write markdown…"
+      />
+    )
+  }
+
+  return (
+    <div
+      className={styles.expandedPreview}
+      style={{ flex: 1, overflow: 'auto' }}
+      onDoubleClick={canEdit ? onToggleEdit : undefined}
+      dangerouslySetInnerHTML={{
+        __html: renderedHtml || '<p>No content</p>',
+      }}
+    />
   )
 }

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

@@ -227,3 +227,151 @@
   color: var(--sb--markdown-fg);
   resize: none;
 }
+
+/* ── Expanded preview in modal ──────────────────────────────────── */
+
+.expandedPreview {
+  --sb--markdown-bg: var(--bgColor-default, #ffffff);
+  --sb--markdown-fg: var(--fgColor-default, #1f2328);
+  --sb--markdown-muted: var(--fgColor-muted, #656d76);
+  --sb--markdown-accent: var(--bgColor-accent-emphasis, #2f81f7);
+  padding: 32px 40px;
+  font-size: 15px;
+  line-height: 1.7;
+  color: var(--sb--markdown-fg);
+  background: var(--sb--markdown-bg);
+  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.expandedPreview * {
+  pointer-events: auto;
+  color: inherit;
+}
+
+.expandedPreview a {
+  color: var(--sb--markdown-accent);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.expandedPreview a:hover {
+  text-decoration: underline;
+}
+
+.expandedPreview img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+  border: 1px solid var(--borderColor-default, #d0d7de);
+  margin: 8px 0;
+  display: block;
+}
+
+.expandedPreview video {
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+  border: 1px solid var(--borderColor-default, #d0d7de);
+  margin: 8px 0;
+  display: block;
+}
+
+.expandedPreview h1 { font-size: 24px; font-weight: 700; margin: 0 0 12px; line-height: 1.3; }
+.expandedPreview h2 { font-size: 20px; font-weight: 600; margin: 0 0 10px; line-height: 1.3; }
+.expandedPreview h3 { font-size: 17px; font-weight: 600; margin: 0 0 6px; line-height: 1.3; }
+.expandedPreview p { margin: 0 0 12px; }
+
+.expandedPreview code {
+  background: var(--bgColor-neutral-muted, #afb8c133);
+  padding: 2px 5px;
+  border-radius: 4px;
+  font-size: 13px;
+  font-family: ui-monospace, SFMono-Regular, monospace;
+}
+
+.expandedPreview 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;
+}
+
+.expandedPreview pre code {
+  background: none;
+  padding: 0;
+  font-size: 13px;
+  white-space: pre;
+  display: block;
+}
+
+.expandedPreview ul { margin: 0 0 12px; padding-left: 24px; list-style: disc; }
+.expandedPreview ol { margin: 0 0 12px; padding-left: 24px; list-style: decimal; }
+.expandedPreview li { margin: 0 0 4px; display: list-item; }
+
+.expandedPreview blockquote {
+  border-left: 4px solid var(--borderColor-default, #d0d7de);
+  margin: 12px 0;
+  padding: 4px 16px;
+  color: var(--sb--markdown-muted);
+}
+
+.expandedPreview table {
+  border-collapse: collapse;
+  margin: 12px 0;
+  width: 100%;
+  font-size: 14px;
+}
+
+.expandedPreview th,
+.expandedPreview td {
+  border: 1px solid var(--borderColor-default, #d0d7de);
+  padding: 6px 12px;
+  text-align: left;
+}
+
+.expandedPreview th {
+  background: var(--bgColor-muted, #f6f8fa);
+  font-weight: 600;
+}
+
+.expandedPreview hr {
+  border: none;
+  border-top: 1px solid var(--borderColor-default, #d0d7de);
+  margin: 16px 0;
+}
+
+.expandedPreview input[type="checkbox"] {
+  margin-right: 6px;
+  pointer-events: none;
+  accent-color: var(--sb--markdown-accent);
+}
+
+.expandedPreview li:has(input[type="checkbox"]) {
+  list-style: none;
+  margin-left: -24px;
+}
+
+/* ── Expanded editor ─────────────────────────────────────────────── */
+
+.expandedEditor {
+  display: block;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 32px 40px;
+  border: none;
+  outline: none;
+  resize: none;
+  background: var(--bgColor-default, #ffffff);
+  font-family: ui-monospace, SFMono-Regular, monospace;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--fgColor-default, #1f2328);
+  max-width: 800px;
+  margin: 0 auto;
+}