demo(words): add image block to sample document + fix readPlainText (F3.11)

- Sample document gains an image block between the code block and the
  table, showing figure/img/figcaption render in action.
- readPlainText demo helper gets an 'image' branch returning alt text
  (was crashing the SSR with 'Cannot read properties of undefined
  (reading map)' because image has no .children).

Demo screenshot confirms:
- Image renders inside a figure with border + padding
- Caption shows centered + italic below
- img max-inline-size cap keeps the image inside the editor frame
- Word/char count in status bar reflects alt + caption text

F3 MVP visually verified end-to-end:
- Block parses from markdown / HTML in the document model
- Renders correctly as figure/img/figcaption in the contenteditable
- Eidos styling (border, caption italic, alignment data-attr) applies
- Status bar counts include image alt text

Pending (UX surfaces, deferred to a follow-up session):
- F3.7 slash menu /image entry (open a URL prompt)
- F3.8 paste/drop handler with onUploadImage callback for file uploads
- F3.7/F3.8 require new svelte components (insert dialog, drop overlay)
  and provider event handlers — they're isolatable from this commit's
  surface and are the next sub-sprint.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
active-uix
dev 4 months ago
parent 86b47cef25
commit cf9cb0b127

@ -536,6 +536,12 @@
language: 'ts', language: 'ts',
children: [{ type: 'text', text: "const words = createWordsState('ActiveUIX');" }] children: [{ type: 'text', text: "const words = createWordsState('ActiveUIX');" }]
}, },
{
type: 'image',
src: 'https://placecats.com/600/300',
alt: 'Demo cat placeholder showing the image block in action',
caption: 'Image blocks are first-class: alt, optional caption, optional alignment.'
},
{ {
type: 'table', type: 'table',
striped: true, striped: true,
@ -738,6 +744,10 @@
) )
.join('\n'); .join('\n');
} }
if (block.type === 'image') {
// Image has no inline children — represent in plain text via alt.
return block.alt ?? '';
}
return block.children.map(readInlineText).join(''); return block.children.map(readInlineText).join('');
}) })
.join('\n'); .join('\n');

Loading…
Cancel
Save

Powered by TurnKey Linux.