Component library + live typing preview
two things this commit
first
I pulled all the Slint components out of penumbra-ui into their own crate, penumbra-component.
it’s a pure-markup library, no Rust logic, just .slint files: the Theme, all the block components (ProseBlock, HeadingBlock, QuoteBlock, CodeBlock, TableBlock, FootnoteBlock, HtmlBlock), the CanvasSurface, the TopBar, and PillButton (which used to be NewNotePill but I generalized it so it takes a text prop instead of hardcoding “New note”). there’s an index.slint that re-exports everything and now the app imports from @penumbra-component/index.slint like a real library.
also why I did this:
the live preview. I set up a slint library path in build.rs (and a .vscode/settings.json so the preview resolves @penumbra-component), which means I can open any single component file and preview it in isolation instead of booting the whole app. given that basically all my UI work these days IS sitting in the preview nudging things, having the components be individually previewable is a massive quality-of-life win. also just cleaner, the editor-panel.slint used to have all seven block components copy-pasted inline at the top, like 200 lines of it, and now it just imports them. the VMs (BlockVM, NoteCardVM) moved to a data.slint too so the struct definitions aren’t tangled with the theme.
second thing, and this is the fun one
live preview while you type. before, the active block was just a raw text field, you’d type # Heading and see # Heading, and only once you clicked away did it render. now as you type, a little preview well under the input shows what the block WOULD render as, live. type # and it previews as a heading, type > and it’s a quote, type - and it’s a list. there’s a whole set of live_ functions (live_kind_name, live_display_text, live_heading_level, estimate_live_height) that route the currently-typed text through the same display logic the inactive blocks use, so you get instant feedback on your markdown without committing it.
But it’s broken and weird and not working (see previous image)
gosh might take a break from this and think about how to structure it again, Je n’aime pas ce désordre
Comments 0
No comments yet. Be the first!
Sign in to join the conversation.