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

package/src/canvas/widgets/MarkdownBlock.jsx

@@ -3,9 +3,13 @@ import { remark } from 'remark'
 import remarkGfm from 'remark-gfm'
 import remarkHtml from 'remark-html'
 import WidgetWrapper from './WidgetWrapper.jsx'
-import { readProp, markdownSchema } from './widgetProps.js'
+import ResizeHandle from './ResizeHandle.jsx'
+import { readProp } from './widgetProps.js'
+import { schemas } from './widgetConfig.js'
 import styles from './MarkdownBlock.module.css'
 
+const markdownSchema = schemas['markdown']
+
 /**
  * Renders markdown to HTML using remark with GitHub Flavored Markdown support.
  */
@@ -15,12 +19,55 @@ function renderMarkdown(text) {
     .use(remarkGfm)
     .use(remarkHtml, { sanitize: false })
     .processSync(text)
-  return String(result)
+  // 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('@dfosco/storyboard-core/inspector/highlighter').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 function MarkdownBlock({ props, onUpdate }) {
+export default function MarkdownBlock({ props, onUpdate, resizable }) {
   const content = readProp(props, 'content', markdownSchema)
   const width = readProp(props, 'width', markdownSchema)
+  const height = props?.height
   const canEdit = typeof onUpdate === 'function'
   const [editing, setEditing] = useState(false)
   const editingActive = canEdit && editing
@@ -28,6 +75,32 @@ export default function MarkdownBlock({ props, onUpdate }) {
   const blockRef = useRef(null)
   const [editHeight, setEditHeight] = useState(null)
 
+  const handleResize = useCallback((w, h) => {
+    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(() => {
+    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 })
   }, [onUpdate])
@@ -60,7 +133,7 @@ export default function MarkdownBlock({ props, onUpdate }) {
       <div
         ref={blockRef}
         className={styles.block}
-        style={{ width, minHeight: editHeight || undefined }}
+        style={{ width, ...(height ? { height, overflow: 'auto' } : {}), minHeight: editHeight || undefined }}
       >
         {editingActive ? (
           <textarea
@@ -90,12 +163,20 @@ export default function MarkdownBlock({ props, onUpdate }) {
             tabIndex={canEdit ? 0 : undefined}
             onKeyDown={canEdit ? (e) => { if (e.key === 'Enter') setEditing(true) } : undefined}
             dangerouslySetInnerHTML={{
-              __html: renderMarkdown(content) || (canEdit
+              __html: renderedHtml || (canEdit
                 ? '<p class="placeholder">Double-click to edit…</p>'
                 : '<p class="placeholder">No content</p>'),
             }}
           />
         )}
+        {resizable && (
+          <ResizeHandle
+            targetRef={blockRef}
+            minWidth={200}
+            minHeight={60}
+            onResize={handleResize}
+          />
+        )}
       </div>
     </WidgetWrapper>
   )

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

@@ -1,4 +1,5 @@
 .block {
+  position: relative;
   min-height: 80px;
   --sb--markdown-bg: var(--bgColor-default, #ffffff);
   --sb--markdown-fg: var(--fgColor-default, #1f2328);
@@ -23,6 +24,38 @@
   pointer-events: none;
 }
 
+.preview a {
+  color: var(--sb--markdown-accent);
+  text-decoration: none;
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+.preview a:hover {
+  text-decoration: underline;
+}
+
+.preview img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+  border: 1px solid var(--borderColor-default, #d0d7de);
+  margin: 8px 0;
+  display: block;
+  pointer-events: auto;
+}
+
+.preview video {
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+  border: 1px solid var(--borderColor-default, #d0d7de);
+  margin: 8px 0;
+  display: block;
+  pointer-events: auto;
+  background: var(--bgColor-muted, #f6f8fa);
+}
+
 .preview h1 {
   font-size: 20px;
   font-weight: 700;
@@ -52,28 +85,33 @@
   background: var(--bgColor-neutral-muted, #afb8c133);
   padding: 2px 5px;
   border-radius: 4px;
-  font-size: 13px;
-  font-family: ui-monospace, monospace;
+  font-size: 12px;
+  font-weight: 400;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
 }
 
 .preview ul {
   margin: 0 0 8px;
   padding-left: 20px;
+  list-style-type: disc;
 }
 
 .preview li {
   margin: 0 0 2px;
+  display: list-item;
 }
 
 .preview ol {
   margin: 0 0 8px;
   padding-left: 20px;
+  list-style-type: decimal;
 }
 
-/* GFM: Task lists */
+/* GFM: Task lists — accent-colored checkboxes */
 .preview input[type="checkbox"] {
   margin-right: 6px;
   pointer-events: none;
+  accent-color: var(--sb--markdown-accent);
 }
 
 .preview li:has(input[type="checkbox"]) {
@@ -107,21 +145,21 @@
   font-weight: 600;
 }
 
-/* GFM: Autolinks */
-.preview a {
-  color: var(--sb--markdown-accent);
-  text-decoration: none;
-}
-
-.preview a:hover {
-  text-decoration: underline;
-}
-
 /* Code blocks */
 .preview pre {
-  background: var(--bgColor-neutral-muted, #afb8c133);
   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;
+}
+
+/* When inspector highlighter sets inline background, let it through */
+.preview pre[style] {
+  border-radius: 6px;
+  border: 1px solid var(--borderColor-muted, #d8dee4);
   overflow-x: auto;
   margin: 8px 0;
 }
@@ -129,7 +167,18 @@
 .preview pre code {
   background: none;
   padding: 0;
-  font-size: 13px;
+  font-size: 12px;
+  font-weight: 400;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  white-space: pre;
+  word-break: normal;
+  overflow-wrap: normal;
+  display: block;
+}
+
+/* Suppress line numbers from inspector highlighter's .line spans */
+.preview :global(.line::before) {
+  display: none !important;
 }
 
 /* Blockquotes */