@dfosco/storyboard 0.5.0-alpha.0

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

@@ -0,0 +1,377 @@
+.block {
+  position: relative;
+  min-height: 80px;
+  --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);
+  background: var(--sb--markdown-bg);
+  color: var(--sb--markdown-fg);
+  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
+}
+
+.blockCollapsed {
+  max-height: 360px;
+  overflow: hidden;
+}
+
+.blockCollapsed .preview {
+  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
+  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
+}
+
+.preview {
+  padding: 16px 20px;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--sb--markdown-fg);
+  cursor: text;
+  min-height: 60px;
+}
+
+.preview :global(*) {
+  color: inherit;
+  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;
+  margin: 0 0 8px;
+  line-height: 1.3;
+}
+
+.preview h2 {
+  font-size: 17px;
+  font-weight: 600;
+  margin: 0 0 6px;
+  line-height: 1.3;
+}
+
+.preview h3 {
+  font-size: 15px;
+  font-weight: 600;
+  margin: 0 0 4px;
+  line-height: 1.3;
+}
+
+.preview p {
+  margin: 0 0 8px;
+}
+
+.preview 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;
+}
+
+.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 — 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"]) {
+  list-style: none;
+  margin-left: -20px;
+}
+
+/* GFM: Strikethrough */
+.preview del {
+  text-decoration: line-through;
+  color: var(--sb--markdown-muted);
+}
+
+/* GFM: Tables */
+.preview table {
+  border-collapse: collapse;
+  margin: 8px 0;
+  width: 100%;
+  font-size: 13px;
+}
+
+.preview th,
+.preview td {
+  border: 1px solid var(--borderColor-default, #d0d7de);
+  padding: 6px 12px;
+  text-align: left;
+}
+
+.preview th {
+  background: var(--bgColor-muted, #f6f8fa);
+  font-weight: 600;
+}
+
+/* Code blocks */
+.preview 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;
+}
+
+/* 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;
+}
+
+.preview pre code {
+  background: none;
+  padding: 0;
+  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 */
+.preview blockquote {
+  border-left: 4px solid var(--borderColor-default, #d0d7de);
+  margin: 8px 0;
+  padding: 4px 16px;
+  color: var(--sb--markdown-muted);
+}
+
+/* Horizontal rules */
+.preview hr {
+  border: none;
+  border-top: 1px solid var(--borderColor-default, #d0d7de);
+  margin: 16px 0;
+}
+
+.preview :global(.placeholder) {
+  color: var(--sb--markdown-muted);
+  font-style: italic;
+}
+
+.editor {
+  display: block;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+
+  padding: 16px 20px;
+  border: none;
+  outline: none;
+  background: var(--sb--markdown-bg);
+  font-family: ui-monospace, SFMono-Regular, monospace;
+  font-size: 13px;
+  line-height: 1.5;
+  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;
+}

package/src/internals/canvas/widgets/MarkdownBlock.test.jsx

@@ -0,0 +1,92 @@
+import { describe, it, expect, vi } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import MarkdownBlock from './MarkdownBlock.jsx'
+
+describe('MarkdownBlock', () => {
+  it('does not enter edit mode when onUpdate is unavailable (read-only/prod)', () => {
+    const { container } = render(<MarkdownBlock props={{ content: 'Hello', width: 420 }} />)
+
+    fireEvent.doubleClick(screen.getByText('Hello'))
+
+    expect(screen.queryByRole('textbox')).toBeNull()
+    expect(container.querySelector('[data-canvas-allow-text-selection]')).not.toBeNull()
+  })
+
+  it('enters edit mode when onUpdate is available', () => {
+    const onUpdate = vi.fn()
+    render(<MarkdownBlock props={{ content: 'Hello', width: 420 }} onUpdate={onUpdate} />)
+
+    fireEvent.doubleClick(screen.getByText('Hello'))
+
+    expect(screen.queryByRole('textbox')).not.toBeNull()
+  })
+
+  it('shows a non-editable empty-state message in read-only mode', () => {
+    render(<MarkdownBlock props={{ content: '', width: 420 }} />)
+
+    expect(screen.getByText('No content')).toBeTruthy()
+    expect(screen.queryByText('Double-click to edit…')).toBeNull()
+  })
+
+  it('stops click propagation in read-only mode', () => {
+    const onParentClick = vi.fn()
+    render(
+      <div onClick={onParentClick}>
+        <MarkdownBlock props={{ content: 'Hello', width: 420 }} />
+      </div>
+    )
+
+    fireEvent.click(screen.getByText('Hello'))
+
+    expect(onParentClick).not.toHaveBeenCalled()
+  })
+
+  it('copies markdown source in read-only mode', () => {
+    render(<MarkdownBlock props={{ content: '**Hello**\n- item', width: 420 }} />)
+
+    const preview = screen.getByText('Hello').closest('[data-canvas-allow-text-selection]')
+    const setData = vi.fn()
+    fireEvent.copy(preview, { clipboardData: { setData } })
+
+    expect(setData).toHaveBeenCalledWith('text/plain', '**Hello**\n- item')
+  })
+
+  describe('GitHub Flavored Markdown', () => {
+    it('renders tables', () => {
+      const markdown = `| Name | Age |
+| --- | --- |
+| Alice | 30 |`
+      const { container } = render(<MarkdownBlock props={{ content: markdown, width: 420 }} />)
+
+      expect(container.querySelector('table')).not.toBeNull()
+      expect(container.querySelector('th')).not.toBeNull()
+      expect(screen.getByText('Alice')).toBeTruthy()
+    })
+
+    it('renders task lists', () => {
+      const markdown = `- [x] Done
+- [ ] Todo`
+      const { container } = render(<MarkdownBlock props={{ content: markdown, width: 420 }} />)
+
+      const checkboxes = container.querySelectorAll('input[type="checkbox"]')
+      expect(checkboxes).toHaveLength(2)
+      expect(checkboxes[0].checked).toBe(true)
+      expect(checkboxes[1].checked).toBe(false)
+    })
+
+    it('renders strikethrough', () => {
+      const { container } = render(<MarkdownBlock props={{ content: '~~deleted~~', width: 420 }} />)
+
+      expect(container.querySelector('del')).not.toBeNull()
+      expect(screen.getByText('deleted')).toBeTruthy()
+    })
+
+    it('renders autolinks', () => {
+      const { container } = render(<MarkdownBlock props={{ content: 'https://github.com', width: 420 }} />)
+
+      const link = container.querySelector('a')
+      expect(link).not.toBeNull()
+      expect(link.href).toBe('https://github.com/')
+    })
+  })
+})