@dfosco/storyboard-react 4.0.0-beta.9 → 4.0.0

package/src/canvas/widgets/LinkPreview.jsx

@@ -1,24 +1,309 @@
+import { useCallback, useEffect, useMemo, useRef, useState } 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({ 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
+
+  // All hooks must be called before any early return
+  const ogImage = props?.ogImage || null
+  const description = props?.description || ''
+  const canEdit = typeof onUpdate === 'function'
+  const cardRef = useRef(null)
+  const inputRef = useRef(null)
+  const [editing, setEditing] = useState(false)
+
+  const startEditing = useCallback(() => {
+    if (!canEdit) return
+    setEditing(true)
+  }, [canEdit])
+
+  const handleTitleChange = useCallback((e) => {
+    onUpdate?.({ title: e.target.value })
+  }, [onUpdate])
+
+  useEffect(() => {
+    if (editing && inputRef.current) {
+      inputRef.current.focus()
+      inputRef.current.select()
+    }
+  }, [editing])
+
+  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>}
+    <div className={styles.container}>
+      <div ref={cardRef} className={styles.card} style={sizeStyle}>
+        {ogImage && (
+          <img
+            className={styles.ogImage}
+            src={ogImage}
+            alt=""
+            loading="lazy"
+            onError={(e) => { e.target.style.display = 'none' }}
+          />
+        )}
+        <div className={styles.body}>
+          {editing ? (
+            <input
+              ref={inputRef}
+              className={styles.titleInput}
+              data-canvas-allow-text-selection
+              type="text"
+              value={title}
+              onChange={handleTitleChange}
+              onBlur={() => setEditing(false)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === 'Escape') setEditing(false)
+              }}
+              onMouseDown={(e) => e.stopPropagation()}
+              onPointerDown={(e) => e.stopPropagation()}
+            />
+          ) : (
+            <p
+              className={styles.title}
+              data-canvas-allow-text-selection={!canEdit ? '' : undefined}
+              onDoubleClick={startEditing}
+              role={canEdit ? 'button' : undefined}
+              tabIndex={canEdit ? 0 : undefined}
+              onKeyDown={canEdit ? (e) => { if (e.key === 'Enter') startEditing() } : undefined}
+            >
+              {title || hostname || url || 'Untitled'}
+            </p>
+          )}
+          {description && <p className={styles.description}>{description}</p>}
           <a
-            href={url}
+            href={url || '#'}
             target="_blank"
             rel="noopener noreferrer"
             className={styles.url}
@@ -29,6 +314,7 @@ export default function LinkPreview({ props }) {
           </a>
         </div>
       </div>
-    </WidgetWrapper>
+      {resizable && <ResizeHandle targetRef={cardRef} width={width} height={height} onResize={handleResize} />}
+    </div>
   )
 }