@dfosco/storyboard-react 3.11.0-beta.10 → 3.11.0-beta.11

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "3.11.0-beta.10",
+  "version": "3.11.0-beta.11",
   "type": "module",
   "dependencies": {
-    "@dfosco/storyboard-core": "3.11.0-beta.10",
-    "@dfosco/tiny-canvas": "3.11.0-beta.10",
+    "@dfosco/storyboard-core": "3.11.0-beta.11",
+    "@dfosco/tiny-canvas": "3.11.0-beta.11",
     "@neodrag/react": "^2.3.1",
     "glob": "^11.0.0",
     "jsonc-parser": "^3.3.1"

package/src/canvas/CanvasPage.jsx

@@ -276,7 +276,7 @@ function ChromeWrappedWidget({
  */
 export default function CanvasPage({ name }) {
   const { canvas, jsxExports, loading } = useCanvas(name)
-  const isLocalDev = typeof window !== 'undefined' && window.__SB_LOCAL_DEV__ === true
+  const isLocalDev = typeof window !== 'undefined' && window.__SB_LOCAL_DEV__ === true && !new URLSearchParams(window.location.search).has('prodMode')
 
   // Local mutable copy of widgets for instant UI updates
   const [localWidgets, setLocalWidgets] = useState(canvas?.widgets ?? null)
@@ -382,7 +382,7 @@ export default function CanvasPage({ name }) {
       for (const article of articles) {
         article.classList.remove('tc-on-translation')
       }
-    }, 250 * 4)
+    }, 150 + 50 + 200)
     peerArticlesRef.current.clear()
   }, [])
 
@@ -1410,17 +1410,21 @@ export default function CanvasPage({ name }) {
       <div className={styles.canvasTitle}>
         <div className={styles.canvasTitleWrap}>
           <span className={styles.canvasTitleMeasure} aria-hidden="true">{canvasTitle || ' '}</span>
-          <input
-            ref={titleInputRef}
-            className={styles.canvasTitleInput}
-            value={canvasTitle}
-            size={1}
-            onChange={handleTitleChange}
-            onKeyDown={handleTitleKeyDown}
-            onMouseDown={(e) => e.stopPropagation()}
-            spellCheck={false}
-            aria-label="Canvas title"
-          />
+          {isLocalDev ? (
+            <input
+              ref={titleInputRef}
+              className={styles.canvasTitleInput}
+              value={canvasTitle}
+              size={1}
+              onChange={handleTitleChange}
+              onKeyDown={handleTitleKeyDown}
+              onMouseDown={(e) => e.stopPropagation()}
+              spellCheck={false}
+              aria-label="Canvas title"
+            />
+          ) : (
+            <h1 className={styles.canvasTitleStatic}>{canvasTitle}</h1>
+          )}
         </div>
         {isLocalDev && (
           <span className={styles.localEditingLabel}>Local editing</span>

package/src/canvas/CanvasPage.module.css

@@ -73,6 +73,7 @@
   border: 1px solid transparent;
   border-radius: 6px;
   padding: 4px 8px;
+  margin: 0;
   outline: none;
   width: 100%;
   min-width: 0;
@@ -91,6 +92,12 @@
   background: var(--bgColor-default, #ffffff);
 }
 
+.canvasTitleStatic {
+  composes: canvasTitleInput;
+  cursor: default;
+  pointer-events: none;
+}
+
 /* Remove tiny-canvas wrapper clipping — widgets handle their own overflow/radius */
 :global(.tc-draggable-inner) {
   overflow: visible;

package/src/canvas/widgets/MarkdownBlock.jsx

@@ -28,7 +28,9 @@ function renderMarkdown(text) {
 export default function MarkdownBlock({ props, onUpdate }) {
   const content = readProp(props, 'content', markdownSchema)
   const width = readProp(props, 'width', markdownSchema)
+  const canEdit = typeof onUpdate === 'function'
   const [editing, setEditing] = useState(false)
+  const editingActive = canEdit && editing
   const textareaRef = useRef(null)
   const blockRef = useRef(null)
   const [editHeight, setEditHeight] = useState(null)
@@ -37,8 +39,17 @@ export default function MarkdownBlock({ props, onUpdate }) {
     onUpdate?.({ content: e.target.value })
   }, [onUpdate])
 
+  const handleReadOnlyCopy = useCallback((e) => {
+    if (canEdit) return
+    e.preventDefault()
+    e.stopPropagation()
+    if (e.clipboardData?.setData) {
+      e.clipboardData.setData('text/plain', content || '')
+    }
+  }, [canEdit, content])
+
   useEffect(() => {
-    if (editing) {
+    if (editingActive) {
       // Capture the preview height before switching to editor
       if (blockRef.current && !editHeight) {
         setEditHeight(blockRef.current.offsetHeight)
@@ -49,7 +60,7 @@ export default function MarkdownBlock({ props, onUpdate }) {
     } else {
       setEditHeight(null)
     }
-  }, [editing, editHeight])
+  }, [editingActive, editHeight])
 
   return (
     <WidgetWrapper>
@@ -58,7 +69,7 @@ export default function MarkdownBlock({ props, onUpdate }) {
         className={styles.block}
         style={{ width, minHeight: editHeight || undefined }}
       >
-        {editing ? (
+        {editingActive ? (
           <textarea
             ref={textareaRef}
             className={styles.editor}
@@ -77,12 +88,18 @@ export default function MarkdownBlock({ props, onUpdate }) {
         ) : (
           <div
             className={styles.preview}
-            onDoubleClick={() => setEditing(true)}
-            role="button"
-            tabIndex={0}
-            onKeyDown={(e) => { if (e.key === 'Enter') setEditing(true) }}
+            style={!canEdit ? { cursor: 'default' } : undefined}
+            data-canvas-allow-text-selection={!canEdit ? '' : undefined}
+            onClick={!canEdit ? (e) => e.stopPropagation() : undefined}
+            onCopy={!canEdit ? handleReadOnlyCopy : undefined}
+            onDoubleClick={canEdit ? () => setEditing(true) : undefined}
+            role={canEdit ? 'button' : undefined}
+            tabIndex={canEdit ? 0 : undefined}
+            onKeyDown={canEdit ? (e) => { if (e.key === 'Enter') setEditing(true) } : undefined}
             dangerouslySetInnerHTML={{
-              __html: renderMarkdown(content) || '<p class="placeholder">Double-click to edit…</p>',
+              __html: renderMarkdown(content) || (canEdit
+                ? '<p class="placeholder">Double-click to edit…</p>'
+                : '<p class="placeholder">No content</p>'),
             }}
           />
         )}

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

@@ -0,0 +1,53 @@
+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')
+  })
+})

package/src/canvas/widgets/StickyNote.jsx

@@ -17,21 +17,23 @@ export default function StickyNote({ props, onUpdate, resizable }) {
   const color = readProp(props, 'color', stickyNoteSchema)
   const width = readProp(props, 'width', stickyNoteSchema)
   const height = readProp(props, 'height', stickyNoteSchema)
+  const canEdit = typeof onUpdate === 'function'
   const palette = COLORS[color] ?? COLORS.yellow
   const textareaRef = useRef(null)
   const stickyRef = useRef(null)
   const [editing, setEditing] = useState(false)
+  const editingActive = canEdit && editing
 
   const handleResize = useCallback((w, h) => {
     onUpdate?.({ width: w, height: h })
   }, [onUpdate])
 
   useEffect(() => {
-    if (editing && textareaRef.current) {
+    if (editingActive && textareaRef.current) {
       textareaRef.current.focus()
       textareaRef.current.selectionStart = textareaRef.current.value.length
     }
-  }, [editing])
+  }, [editingActive])
 
   const handleTextChange = useCallback((e) => {
     onUpdate?.({ text: e.target.value })
@@ -51,15 +53,16 @@ export default function StickyNote({ props, onUpdate, resizable }) {
       >
         <p
           className={styles.text}
-          style={editing ? { visibility: 'hidden' } : undefined}
-          onDoubleClick={() => setEditing(true)}
-          role="button"
-          tabIndex={0}
-          onKeyDown={(e) => { if (e.key === 'Enter') setEditing(true) }}
+          style={editingActive ? { visibility: 'hidden' } : undefined}
+          data-canvas-allow-text-selection={!canEdit ? '' : undefined}
+          onDoubleClick={canEdit ? () => setEditing(true) : undefined}
+          role={canEdit ? 'button' : undefined}
+          tabIndex={canEdit ? 0 : undefined}
+          onKeyDown={canEdit ? (e) => { if (e.key === 'Enter') setEditing(true) } : undefined}
         >
-          {text || 'Double-click to edit…'}
+          {text || (canEdit ? 'Double-click to edit…' : 'No content')}
         </p>
-        {editing && (
+        {editingActive && (
           <textarea
             ref={textareaRef}
             className={styles.textarea}

package/src/canvas/widgets/StickyNote.test.jsx

@@ -99,4 +99,18 @@ describe('StickyNote', () => {
 
     expect(onUpdate).toHaveBeenCalledWith({ width: 180, height: 60 })
   })
+
+  it('does not enter edit mode without onUpdate (read-only/prod)', () => {
+    const { container } = render(<StickyNote props={{ text: 'Read me' }} />)
+    const text = container.querySelector('p')
+    fireEvent.doubleClick(text)
+    expect(container.querySelector('textarea')).toBeNull()
+    expect(container.querySelector('[data-canvas-allow-text-selection]')).not.toBeNull()
+  })
+
+  it('shows non-editable empty-state text in read-only mode', () => {
+    const { container } = render(<StickyNote props={{ text: '' }} />)
+    expect(container.textContent).toContain('No content')
+    expect(container.textContent).not.toContain('Double-click to edit…')
+  })
 })