@dfosco/storyboard-react 4.2.0-beta.0 → 4.2.0-beta.17

package/src/canvas/widgets/LinkPreview.jsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState, forwardRef, useImperativeHandle } from 'react'
 import { remark } from 'remark'
 import remarkGfm from 'remark-gfm'
 import remarkHtml from 'remark-html'
@@ -6,6 +6,7 @@ import { MarkGithubIcon } from '@primer/octicons-react'
 import WidgetWrapper from './WidgetWrapper.jsx'
 import ResizeHandle from './ResizeHandle.jsx'
 import { readProp, linkPreviewSchema } from './widgetProps.js'
+import SplitExpandModal from './SplitExpandModal.jsx'
 import styles from './LinkPreview.module.css'
 
 const VIDEO_EXT_RE = /\.(mp4|mov|webm|ogg)(\?[^)]*)?$/i
@@ -106,7 +107,7 @@ function getCommentKindLabel(github) {
   return 'Comment'
 }
 
-function GitHubIssueCard({ url, title, github, width, collapsed, onUpdate }) {
+function GitHubIssueCard({ id, url, title, github, width, collapsed, expanded, onCloseExpand }) {
   const authors = Array.isArray(github?.authors)
     ? github.authors.filter((a) => typeof a === 'string' && a.trim())
     : []
@@ -146,6 +147,7 @@ function GitHubIssueCard({ url, title, github, width, collapsed, onUpdate }) {
   }
 
   return (
+    <>
     <WidgetWrapper>
       <div className={`${styles.issueCard} ${collapsed ? styles.issueCardCollapsed : ''}`} style={sizeStyle}>
         <div className={styles.typeBar}>
@@ -204,10 +206,38 @@ function GitHubIssueCard({ url, title, github, width, collapsed, onUpdate }) {
         )}
       </div>
     </WidgetWrapper>
+    <SplitExpandModal
+      expanded={expanded}
+      onClose={onCloseExpand}
+      widgetId={id}
+      title={`${kindLabel}: ${titleText || url || 'GitHub'}`}
+    >
+      <div className={styles.expandedIssue}>
+        <header className={styles.expandedIssueHeader}>
+          <h2 className={styles.expandedIssueTitle}>
+            <a href={url || '#'} target="_blank" rel="noopener noreferrer">
+              {titleText || url}
+              {issueNumber && <span className={styles.expandedIssueNumber}> {issueNumber}</span>}
+            </a>
+          </h2>
+          <div className={styles.expandedByline}>
+            {primaryAuthor && (
+              <a href={`https://github.com/${primaryAuthor}`} target="_blank" rel="noopener noreferrer" className={styles.expandedAuthor}>
+                <img src={`https://github.com/${primaryAuthor}.png?size=40`} alt="" width="20" height="20" className={styles.avatar} loading="lazy" />
+                {primaryAuthor}
+              </a>
+            )}
+            {createdAgo && <span className={styles.expandedBylineText}>{primaryAuthor ? ` opened ${createdAgo}` : `Opened ${createdAgo}`}</span>}
+          </div>
+        </header>
+        {bodyHtml && <div className={styles.expandedIssueBody} dangerouslySetInnerHTML={{ __html: bodyHtml }} />}
+      </div>
+    </SplitExpandModal>
+    </>
   )
 }
 
-export default function LinkPreview({ props, onUpdate, resizable }) {
+export default forwardRef(function LinkPreview({ id, props, onUpdate, resizable }, ref) {
   const url = readProp(props, 'url', linkPreviewSchema)
   const title = readProp(props, 'title', linkPreviewSchema)
   const github = props?.github && typeof props.github === 'object' ? props.github : null
@@ -222,6 +252,18 @@ export default function LinkPreview({ props, onUpdate, resizable }) {
   const cardRef = useRef(null)
   const inputRef = useRef(null)
   const [editing, setEditing] = useState(false)
+  const [expanded, setExpanded] = useState(false)
+
+  useImperativeHandle(ref, () => ({
+    handleAction(actionId) {
+      if (actionId === 'expand' || actionId === 'split-screen') { setExpanded(true); return true }
+      if (actionId === 'open-external') {
+        if (url) window.open(url, '_blank', 'noopener')
+        return true
+      }
+      return false
+    },
+  }), [url])
 
   const startEditing = useCallback(() => {
     if (!canEdit) return
@@ -242,12 +284,14 @@ export default function LinkPreview({ props, onUpdate, resizable }) {
   if (github) {
     return (
       <GitHubIssueCard
+        id={id}
         url={url}
         title={title}
         github={github}
         width={width}
         collapsed={!!props?.collapsed}
-        onUpdate={onUpdate}
+        expanded={expanded}
+        onCloseExpand={() => setExpanded(false)}
       />
     )
   }
@@ -262,6 +306,7 @@ export default function LinkPreview({ props, onUpdate, resizable }) {
   const handleResize = (w, h) => onUpdate?.({ width: w, height: h })
 
   return (
+    <>
     <div className={styles.container}>
       <div ref={cardRef} className={styles.card} style={sizeStyle}>
         {ogImage && (
@@ -316,5 +361,19 @@ export default function LinkPreview({ props, onUpdate, resizable }) {
       </div>
       {resizable && <ResizeHandle targetRef={cardRef} width={width} height={height} onResize={handleResize} />}
     </div>
+    <SplitExpandModal
+      expanded={expanded}
+      onClose={() => setExpanded(false)}
+      widgetId={id}
+      title={title || hostname || 'Link Preview'}
+    >
+      <div className={styles.expandedLink}>
+        {ogImage && <img className={styles.expandedOgImage} src={ogImage} alt="" loading="lazy" />}
+        <h2 className={styles.expandedTitle}>{title || hostname || url || 'Untitled'}</h2>
+        {description && <p className={styles.expandedDescription}>{description}</p>}
+        {url && <a href={url} target="_blank" rel="noopener noreferrer" className={styles.expandedUrl}>{url}</a>}
+      </div>
+    </SplitExpandModal>
+    </>
   )
-}
+})

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

@@ -417,3 +417,130 @@
   font-size: 12px;
   color: var(--fgColor-danger, #cf222e);
 }
+
+/* ── Expanded issue view in modal ─────────────────────────────────── */
+
+.expandedIssue {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--bgColor-default, #ffffff);
+  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
+}
+
+.expandedIssueHeader {
+  padding: 24px 40px 16px;
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+}
+
+.expandedIssueTitle {
+  margin: 0 0 8px;
+  font-size: 28px;
+  font-weight: 400;
+  line-height: 1.25;
+  color: var(--fgColor-default, #1f2328);
+}
+
+.expandedIssueTitle a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.expandedIssueTitle a:hover {
+  text-decoration: underline;
+}
+
+.expandedIssueNumber {
+  color: var(--fgColor-muted, #656d76);
+}
+
+.expandedByline {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+}
+
+.expandedAuthor {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  text-decoration: none;
+  color: var(--fgColor-default, #1f2328);
+  font-weight: 600;
+}
+
+.expandedAuthor:hover {
+  text-decoration: underline;
+}
+
+.expandedBylineText {
+  color: var(--fgColor-muted, #656d76);
+}
+
+.expandedIssueBody {
+  flex: 1;
+  overflow: auto;
+  padding: 24px 40px;
+  font-size: 15px;
+  line-height: 1.7;
+  color: var(--fgColor-default, #1f2328);
+  max-width: 800px;
+}
+
+.expandedIssueBody * { pointer-events: auto; }
+.expandedIssueBody a { color: var(--fgColor-accent, #0969da); text-decoration: none; }
+.expandedIssueBody a:hover { text-decoration: underline; }
+.expandedIssueBody img { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; display: block; }
+.expandedIssueBody video { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; display: block; }
+.expandedIssueBody h1 { font-size: 20px; font-weight: 700; margin: 16px 0 8px; border-bottom: 1px solid var(--borderColor-muted, #d8dee4); padding-bottom: 4px; }
+.expandedIssueBody h2 { font-size: 17px; font-weight: 600; margin: 14px 0 6px; }
+.expandedIssueBody h3 { font-size: 15px; font-weight: 600; margin: 12px 0 4px; }
+.expandedIssueBody p { margin: 0 0 12px; }
+.expandedIssueBody code { background: var(--bgColor-neutral-muted, #afb8c133); padding: 2px 5px; border-radius: 4px; font-size: 13px; font-family: ui-monospace, SFMono-Regular, monospace; }
+.expandedIssueBody pre { padding: 12px 16px; border-radius: 6px; border: 1px solid var(--borderColor-muted, #d8dee4); overflow-x: auto; margin: 12px 0; background: var(--bgColor-neutral-muted, #afb8c133); }
+.expandedIssueBody pre code { background: none; padding: 0; }
+.expandedIssueBody ul { margin: 0 0 12px; padding-left: 24px; list-style: disc; }
+.expandedIssueBody ol { margin: 0 0 12px; padding-left: 24px; list-style: decimal; }
+.expandedIssueBody li { margin: 0 0 4px; display: list-item; }
+.expandedIssueBody blockquote { border-left: 4px solid var(--borderColor-default, #d0d7de); margin: 12px 0; padding: 4px 16px; color: var(--fgColor-muted, #656d76); }
+
+/* ── Expanded plain link view ─────────────────────────────────────── */
+
+.expandedLink {
+  padding: 32px 40px;
+  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
+}
+
+.expandedOgImage {
+  max-width: 100%;
+  max-height: 400px;
+  object-fit: cover;
+  border-radius: 8px;
+  margin-bottom: 16px;
+  display: block;
+}
+
+.expandedTitle {
+  margin: 0 0 8px;
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--fgColor-default, #1f2328);
+}
+
+.expandedDescription {
+  margin: 0 0 12px;
+  font-size: 15px;
+  line-height: 1.5;
+  color: var(--fgColor-muted, #656d76);
+}
+
+.expandedUrl {
+  font-size: 14px;
+  color: var(--fgColor-accent, #0969da);
+  text-decoration: none;
+}
+
+.expandedUrl:hover {
+  text-decoration: underline;
+}

package/src/canvas/widgets/MarkdownBlock.jsx

@@ -1,4 +1,4 @@
-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'
@@ -6,6 +6,7 @@ import WidgetWrapper from './WidgetWrapper.jsx'
 import ResizeHandle from './ResizeHandle.jsx'
 import { readProp } from './widgetProps.js'
 import { schemas } from './widgetConfig.js'
+import SplitExpandModal from './SplitExpandModal.jsx'
 import styles from './MarkdownBlock.module.css'
 
 const markdownSchema = schemas['markdown']
@@ -64,18 +65,26 @@ 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 [expanded, setExpanded] = useState(false)
   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 === 'split-screen') { setExpanded(true); return true }
+      return false
+    },
+  }), [])
+
   const handleResize = useCallback((w, h) => {
     onUpdate?.({ width: w, height: h })
   }, [onUpdate])
@@ -115,12 +124,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 +148,10 @@ export default function MarkdownBlock({ props, onUpdate, resizable }) {
     } else {
       setEditHeight(null)
     }
-  }, [editingActive, editHeight])
+  }, [editingActive])
 
   return (
+    <>
     <WidgetWrapper>
       <div
         ref={blockRef}
@@ -170,18 +185,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 +208,19 @@ export default function MarkdownBlock({ props, onUpdate, resizable }) {
         )}
       </div>
     </WidgetWrapper>
+    <SplitExpandModal
+      expanded={expanded}
+      onClose={() => setExpanded(false)}
+      widgetId={id}
+      title="Markdown"
+    >
+      <div
+        className={styles.expandedPreview}
+        dangerouslySetInnerHTML={{
+          __html: renderedHtml || '<p>No content</p>',
+        }}
+      />
+    </SplitExpandModal>
+    </>
   )
-}
+})

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

@@ -227,3 +227,126 @@
   color: var(--sb--markdown-fg);
   resize: none;
 }
+
+/* ── Expanded preview in modal ──────────────────────────────────── */
+
+.expandedPreview {
+  padding: 32px 40px;
+  font-size: 15px;
+  line-height: 1.7;
+  color: var(--sb--markdown-fg);
+  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;
+}