@dfosco/storyboard-react 4.0.0-beta.27 → 4.0.0-beta.28

package/src/canvas/widgets/LinkPreview.jsx

@@ -1,34 +1,263 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { remark } from 'remark'
+import remarkGfm from 'remark-gfm'
+import remarkHtml from 'remark-html'
+import { MarkGithubIcon } from '@primer/octicons-react'
 import WidgetWrapper from './WidgetWrapper.jsx'
+import ResizeHandle from './ResizeHandle.jsx'
 import { readProp, linkPreviewSchema } from './widgetProps.js'
 import styles from './LinkPreview.module.css'
 
-export default function LinkPreview({ props }) {
+const VIDEO_EXT_RE = /\.(mp4|mov|webm|ogg)(\?[^)]*)?$/i
+const VIDEO_URL_LINE_RE = /^<p>\s*(https?:\/\/[^\s<]+\.(mp4|mov|webm|ogg)(?:\?[^\s<]*)?)\s*<\/p>$/gim
+
+/**
+ * Post-process HTML body for canvas rendering:
+ * - Links open in new tabs
+ * - Unwrap <details> wrappers around videos (GitHub wraps them)
+ * - Convert bare video URLs and video-linked images to <video> elements
+ * - Mark checked checkboxes with data attribute for accent styling
+ */
+function postProcessHtml(html) {
+  if (!html) return ''
+  let out = html
+
+  // Open all links in new tabs
+  out = out.replace(/<a\s/g, '<a target="_blank" rel="noopener noreferrer" ')
+  // Dedupe target if GitHub already set it
+  out = out.replace(/target="_blank"\s*rel="noopener noreferrer"\s*target="_blank"/g, 'target="_blank"')
+
+  // Unwrap <details><summary>...</summary><video ...></details> → just the <video>
+  out = out.replace(/<details[^>]*>\s*<summary[^>]*>[\s\S]*?<\/summary>\s*(<video[\s\S]*?<\/video>)\s*<\/details>/gi, '$1')
+
+  // Convert bare video URLs (wrapped in <p>) into <video> elements
+  out = out.replace(VIDEO_URL_LINE_RE, (_, url) =>
+    `<video src="${url}" controls preload="none"></video>`
+  )
+
+  // Convert img tags pointing at video files to <video>
+  out = out.replace(/<img\s+([^>]*?)src="([^"]+\.(mp4|mov|webm|ogg)(?:\?[^"]*)?)"([^>]*)\/?>/gi, (_, _pre, url) =>
+    `<video src="${url}" controls preload="none"></video>`
+  )
+
+  // Existing <video> tags from GitHub: set preload=none to prevent auto-loading spinner
+  out = out.replace(/<video\s/g, '<video preload="none" ')
+  // Dedupe if we already added it
+  out = out.replace(/preload="none"\s+preload="[^"]*"/g, 'preload="none"')
+
+  // Remove disabled from checkboxes so accent-color works (CSS blocks interaction instead)
+  out = out.replace(/<input\s+([^>]*?)disabled([^>]*)>/gi, (match, before, after) => {
+    if (!match.includes('type="checkbox"')) return match
+    return `<input ${before}${after}>`
+  })
+
+  return out
+}
+
+function renderMarkdown(text) {
+  if (!text) return ''
+  const result = remark()
+    .use(remarkGfm)
+    .use(remarkHtml, { sanitize: false })
+    .processSync(text)
+  return postProcessHtml(String(result))
+}
+
+function timeAgo(dateStr) {
+  if (!dateStr) return ''
+  const date = new Date(dateStr)
+  if (Number.isNaN(date.getTime())) return ''
+  const seconds = Math.floor((Date.now() - date.getTime()) / 1000)
+  if (seconds < 60) return 'just now'
+  const minutes = Math.floor(seconds / 60)
+  if (minutes < 60) return `${minutes} minute${minutes === 1 ? '' : 's'} ago`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours} hour${hours === 1 ? '' : 's'} ago`
+  const days = Math.floor(hours / 24)
+  if (days < 30) return `${days} day${days === 1 ? '' : 's'} ago`
+  const months = Math.floor(days / 30)
+  if (months < 12) return `${months} month${months === 1 ? '' : 's'} ago`
+  const years = Math.floor(months / 12)
+  return `${years} year${years === 1 ? '' : 's'} ago`
+}
+
+/**
+ * Split a title like "#42 Ship GitHub embeds" into { number: "#42", rest: "Ship GitHub embeds" }.
+ */
+function splitIssueTitle(title) {
+  if (!title) return { number: '', rest: '' }
+  const match = title.match(/^(#\d+)\s+(.*)$/)
+  if (match) return { number: match[1], rest: match[2] }
+  return { number: '', rest: title }
+}
+
+const KIND_LABELS = {
+  issue: 'Issue',
+  pull_request: 'Pull Request',
+  discussion: 'Discussion',
+  comment: 'Comment',
+}
+
+function getCommentKindLabel(github) {
+  if (github?.kind !== 'comment') return KIND_LABELS[github?.kind] || 'GitHub'
+  if (github?.parentKind === 'issue') return 'Issue Comment'
+  if (github?.parentKind === 'pull_request') return 'PR Comment'
+  if (github?.parentKind === 'discussion') return 'Discussion Comment'
+  return 'Comment'
+}
+
+function GitHubIssueCard({ url, title, github, width, collapsed, onUpdate }) {
+  const authors = Array.isArray(github?.authors)
+    ? github.authors.filter((a) => typeof a === 'string' && a.trim())
+    : []
+  const primaryAuthor = authors[0] || ''
+  const createdAgo = timeAgo(github?.createdAt)
+  const { number: issueNumber, rest: titleText } = splitIssueTitle(title)
+
+  const kindLabel = getCommentKindLabel(github)
+
+  // Prefer pre-rendered bodyHtml (has signed image URLs), fall back to remark for discussions
+  const bodyHtml = useMemo(() => {
+    if (github?.bodyHtml) return postProcessHtml(github.bodyHtml)
+    return renderMarkdown(github?.body || '')
+  }, [github?.bodyHtml, github?.body])
+
+  // Set body HTML via ref — avoids React destroying/recreating video elements on re-render
+  const bodyRef = useRef(null)
+  const lastHtmlRef = useRef('')
+  useEffect(() => {
+    if (bodyRef.current && bodyHtml !== lastHtmlRef.current) {
+      bodyRef.current.innerHTML = bodyHtml
+      lastHtmlRef.current = bodyHtml
+    }
+  }, [bodyHtml])
+
+  // Also set on initial mount via callback ref
+  const setBodyRef = useCallback((el) => {
+    bodyRef.current = el
+    if (el && bodyHtml && bodyHtml !== lastHtmlRef.current) {
+      el.innerHTML = bodyHtml
+      lastHtmlRef.current = bodyHtml
+    }
+  }, [bodyHtml])
+
+  const sizeStyle = {
+    ...(width ? { width: `${width}px` } : {}),
+  }
+
+  return (
+    <WidgetWrapper>
+      <div className={`${styles.issueCard} ${collapsed ? styles.issueCardCollapsed : ''}`} style={sizeStyle}>
+        <div className={styles.typeBar}>
+          <MarkGithubIcon size={16} />
+          <span>{kindLabel}</span>
+        </div>
+        <header className={styles.issueHeader}>
+          <h2 className={styles.issueTitle}>
+            <a
+              href={url || '#'}
+              target="_blank"
+              rel="noopener noreferrer"
+              className={styles.issueTitleLink}
+              onMouseDown={(e) => e.stopPropagation()}
+              onPointerDown={(e) => e.stopPropagation()}
+            >
+              {titleText || url}
+              {issueNumber && <span className={styles.issueNumber}> {issueNumber}</span>}
+            </a>
+          </h2>
+        </header>
+
+        <div className={styles.issueByline}>
+          <div className={styles.issueBylineLeft}>
+            {primaryAuthor && (
+              <a
+                href={`https://github.com/${primaryAuthor}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className={styles.authorLink}
+                onMouseDown={(e) => e.stopPropagation()}
+                onPointerDown={(e) => e.stopPropagation()}
+              >
+                <img
+                  className={styles.avatar}
+                  src={`https://github.com/${primaryAuthor}.png?size=40`}
+                  alt=""
+                  width="20"
+                  height="20"
+                  loading="lazy"
+                />
+                {primaryAuthor}
+              </a>
+            )}
+            <span className={styles.bylineText}>
+              {primaryAuthor && createdAgo ? ` opened ${createdAgo}` : createdAgo ? `Opened ${createdAgo}` : ''}
+            </span>
+          </div>
+        </div>
+
+        {bodyHtml && (
+          <div
+            className={`${styles.issueBody} ${collapsed ? styles.issueBodyScrollable : ''}`}
+            ref={setBodyRef}
+          />
+        )}
+      </div>
+    </WidgetWrapper>
+  )
+}
+
+export default function LinkPreview({ id, props, onUpdate, resizable }) {
   const url = readProp(props, 'url', linkPreviewSchema)
   const title = readProp(props, 'title', linkPreviewSchema)
+  const github = props?.github && typeof props.github === 'object' ? props.github : null
+
+  const width = typeof props?.width === 'number' ? props.width : null
+  const height = typeof props?.height === 'number' ? props.height : null
+
+  if (github) {
+    return (
+      <GitHubIssueCard
+        url={url}
+        title={title}
+        github={github}
+        width={width}
+        collapsed={!!props?.collapsed}
+        onUpdate={onUpdate}
+      />
+    )
+  }
+
+  const sizeStyle = (width || height)
+    ? { ...(width ? { width: `${width}px` } : {}), ...(height ? { minHeight: `${height}px` } : {}) }
+    : undefined
 
   let hostname = ''
-  try {
-    hostname = new URL(url).hostname
-  } catch { /* invalid URL */ }
+  try { hostname = new URL(url).hostname } catch { /* */ }
+
+  const handleResize = (w, h) => onUpdate?.({ width: w, height: h })
 
   return (
     <WidgetWrapper>
-      <div className={styles.card}>
-        <span className={styles.icon}>🔗</span>
-        <div className={styles.text}>
-          {title && <p className={styles.title}>{title}</p>}
-          <a
-            href={url}
-            target="_blank"
-            rel="noopener noreferrer"
-            className={styles.url}
-            onMouseDown={(e) => e.stopPropagation()}
-            onPointerDown={(e) => e.stopPropagation()}
-          >
-            {hostname || url}
-          </a>
+      <div className={styles.card} style={sizeStyle}>
+        <div className={styles.header}>
+          <span className={styles.icon}>🔗</span>
+          <div className={styles.text}>
+            {title && <p className={styles.title}>{title}</p>}
+          </div>
         </div>
+        <a
+          href={url || '#'}
+          target="_blank"
+          rel="noopener noreferrer"
+          className={styles.url}
+          onMouseDown={(e) => e.stopPropagation()}
+          onPointerDown={(e) => e.stopPropagation()}
+        >
+          {hostname || url}
+        </a>
       </div>
+      {resizable && <ResizeHandle width={width} height={height} onResize={handleResize} />}
     </WidgetWrapper>
   )
 }

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

@@ -1,16 +1,31 @@
+/* ── Plain link-preview card ──────────────────────────────────────── */
+
 .card {
   display: flex;
-  align-items: center;
-  gap: 12px;
+  flex-direction: column;
+  gap: 10px;
   padding: 14px 16px;
   text-decoration: none;
   color: inherit;
-  min-width: 240px;
-  transition: background 150ms;
+  width: 320px;
+  min-height: 120px;
+  border-radius: 10px;
+  border: 1px solid var(--borderColor-default, #d1d9e0);
+  background: var(--bgColor-default, #ffffff);
+  transition: background 150ms, border-color 150ms;
+  box-sizing: border-box;
 }
 
 .card:hover {
   background: var(--bgColor-muted, #f6f8fa);
+  border-color: var(--borderColor-muted, #afb8c1);
+}
+
+.header {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  width: 100%;
 }
 
 .icon {
@@ -21,17 +36,15 @@
 .text {
   overflow: hidden;
   min-width: 0;
+  flex: 1;
 }
 
 .title {
   margin: 0;
   font-size: 14px;
   font-weight: 600;
-  line-height: 1.4;
+  line-height: 1.35;
   color: var(--fgColor-default, #1f2328);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .url {
@@ -49,3 +62,331 @@
   text-decoration: underline;
   color: var(--fgColor-accent, #0969da);
 }
+
+/* ── GitHub issue / discussion card ──────────────────────────────── */
+
+.issueCard {
+  display: flex;
+  flex-direction: column;
+  width: 580px;
+  min-height: 300px;
+  border-radius: 10px;
+  border: 1px solid var(--borderColor-default, #d1d9e0);
+  background: var(--bgColor-default, #ffffff);
+  box-sizing: border-box;
+  overflow: hidden;
+  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
+}
+
+.issueCardCollapsed {
+  max-height: 800px;
+}
+
+.typeBar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--fgColor-muted, #656d76);
+  background: var(--bgColor-muted, #f6f8fa);
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  white-space: nowrap;
+  user-select: none;
+}
+
+.issueBodyScrollable {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  pointer-events: auto;
+}
+
+.issueHeader {
+  padding: 24px 24px 0;
+}
+
+.issueTitle {
+  margin: 0 0 4px;
+  font-size: 32px;
+  font-weight: 400;
+  line-height: 1.25;
+  color: var(--fgColor-default, #1f2328);
+}
+
+.issueTitleLink {
+  color: var(--fgColor-default, #1f2328) !important;
+  text-decoration: none !important;
+}
+
+.issueTitleLink:hover {
+  text-decoration: underline !important;
+  color: var(--fgColor-default, #1f2328) !important;
+}
+
+.issueNumber {
+  font-size: 32px;
+  font-weight: 400;
+  color: var(--fgColor-muted, #656d76);
+}
+
+.issueContext {
+  margin: 0;
+  font-size: 12px;
+  color: var(--fgColor-muted, #656d76);
+}
+
+.issueByline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 12px 24px;
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+}
+
+.issueBylineLeft {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.avatar {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.authorLink {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-decoration: none !important;
+  color: var(--fgColor-default, #1f2328) !important;
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.authorLink:hover {
+  text-decoration: underline !important;
+  color: var(--fgColor-default, #1f2328) !important;
+}
+
+.bylineText {
+  font-size: 13px;
+  color: var(--fgColor-muted, #656d76);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.bylineText strong {
+  font-weight: 600;
+  color: var(--fgColor-default, #1f2328);
+}
+
+/* ── Issue body (rendered markdown) ──────────────────────────────── */
+
+.issueBody {
+  padding: 16px 24px 24px;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--fgColor-default, #1f2328);
+}
+
+.issueBody :global(*) {
+  pointer-events: none;
+}
+
+.issueBody a {
+  color: var(--fgColor-accent, #0969da);
+  text-decoration: none;
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+.issueBody a:hover {
+  text-decoration: underline;
+}
+
+.issueBody img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+  border: 1px solid var(--borderColor-muted, #d8dee4);
+  margin: 8px 0;
+  display: block;
+  pointer-events: auto;
+}
+
+.issueBody video {
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+  border: 1px solid var(--borderColor-muted, #d8dee4);
+  margin: 8px 0;
+  display: block;
+  pointer-events: auto;
+  background: var(--bgColor-muted, #f6f8fa);
+}
+.issueBody h1 {
+  font-size: 20px;
+  font-weight: 700;
+  margin: 16px 0 8px;
+  padding-bottom: 4px;
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  line-height: 1.3;
+}
+
+.issueBody h1:first-child {
+  margin-top: 0;
+}
+
+.issueBody h2 {
+  font-size: 17px;
+  font-weight: 600;
+  margin: 14px 0 6px;
+  padding-bottom: 3px;
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  line-height: 1.3;
+}
+
+.issueBody h3 {
+  font-size: 15px;
+  font-weight: 600;
+  margin: 12px 0 4px;
+  line-height: 1.3;
+}
+
+.issueBody p {
+  margin: 0 0 12px;
+}
+
+.issueBody code {
+  background: var(--bgColor-neutral-muted, #afb8c133);
+  padding: 2px 5px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 400;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+}
+
+.issueBody ul {
+  margin: 0 0 12px;
+  padding-left: 24px;
+  list-style-type: disc;
+}
+
+.issueBody ol {
+  margin: 0 0 12px;
+  padding-left: 24px;
+  list-style-type: decimal;
+}
+
+.issueBody li {
+  margin: 0 0 4px;
+  display: list-item;
+}
+
+.issueBody li > ul,
+.issueBody li > ol {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
+/* Accent-color checkboxes */
+.issueBody input[type="checkbox"] {
+  margin-right: 6px;
+  pointer-events: none;
+  accent-color: var(--fgColor-accent, #0969da);
+}
+
+.issueBody li:has(input[type="checkbox"]) {
+  list-style: none;
+  margin-left: -24px;
+}
+
+/* GFM: Strikethrough */
+.issueBody del {
+  text-decoration: line-through;
+  color: var(--fgColor-muted, #656d76);
+}
+
+/* GFM: Tables */
+.issueBody table {
+  border-collapse: collapse;
+  margin: 12px 0;
+  width: 100%;
+  font-size: 13px;
+}
+
+.issueBody th,
+.issueBody td {
+  border: 1px solid var(--borderColor-default, #d0d7de);
+  padding: 6px 12px;
+  text-align: left;
+}
+
+.issueBody th {
+  background: var(--bgColor-muted, #f6f8fa);
+  font-weight: 600;
+}
+
+/* Code blocks */
+.issueBody 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);
+  line-height: 1.4;
+}
+
+.issueBody pre code {
+  background: none;
+  padding: 0;
+  font-size: 12px;
+  white-space: pre;
+  word-break: normal;
+  overflow-wrap: normal;
+  display: block;
+}
+
+/* Blockquotes */
+.issueBody blockquote {
+  border-left: 4px solid var(--borderColor-default, #d0d7de);
+  margin: 12px 0;
+  padding: 4px 16px;
+  color: var(--fgColor-muted, #656d76);
+}
+
+/* Horizontal rules */
+.issueBody hr {
+  border: none;
+  border-top: 1px solid var(--borderColor-default, #d0d7de);
+  margin: 16px 0;
+}
+
+/* Details/summary — show content expanded, no collapse UI */
+.issueBody details {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+.issueBody summary {
+  display: none;
+}
+
+.error {
+  margin: 0;
+  padding: 0 24px 12px;
+  font-size: 12px;
+  color: var(--fgColor-danger, #cf222e);
+}