mirror of
https://github.com/penpot/penpot.git
synced 2026-11-13 13:31:24 +00:00
86a8ac34cd
* 🎉 Add UI for toggling bullet lists (under config flag) * 🎉 Store list-style-type as a paragraph attribute The bullet list toggle now saves list-style-type ("none" or "disc") on the selected paragraphs and reads it back. A paragraph without the attr counts as "none", so a bullet paragraph next to an older one shows as mixed. WASM keeps the value on each paragraph: the paragraph bytes grow from 12 to 16, Enter keeps it on the new paragraph, and the v3 editor reports it in the current styles, so the sidebar shows it while editing too. Refs #12630 AI-assisted-by: claude-opus-5-5 * ✨ Draw bullets for list paragraphs A paragraph with list-style-type "disc" now gets a solid round bullet, sized as Chrome draws a CSS disc marker (measured with Source Sans Pro): a radius of 0.16 font sizes, centered 0.32 font sizes above the first baseline, with a gap of 0.33 font sizes before the text. The bullet hangs outside the text box, before its start edge (after it for RTL), like CSS list-style-position: outside, so the text layout, caret and selection stay as they were. The bullet takes the paint of its line's first style run, so fills, strokes, shadows and masks apply to it as they do to the glyphs. An empty item, which has no run, borrows the previous item's paint. The cached paint, the text extrect and text-to-path share one walker over the paragraphs, so they always agree: the extrect grows to hold the bullets, like shadows and blur, and flattening a text keeps them. Refs #12630 AI-assisted-by: claude-opus-5-5 * ✨ Show the list style in Inspect Text paragraphs with list-style-type "disc" now show a "List Style" row in the Inspect Styles and Computed views, after Text Transform. Its copy action gives "list-style-type: disc;". Text without a list shows no row. The list item check lives in common as list-paragraph?, so every place that needs it shares one rule. Refs #12630 AI-assisted-by: claude-opus-5-5 * ✨ Generate list HTML and CSS for bullet paragraphs In the Inspect code, neighbouring paragraphs with list-style-type "disc" become one <ul> with an <li> each, keeping the paragraph's class and dir. Other paragraphs stay <p>. Only code mode groups them; text rendering still uses <p>. The CSS sets list-style-type on the items and resets the list's margin and padding, so the browser hangs the bullet before the text as the canvas does. Paragraph rules set font-size: 0, so each item also gets a ::marker rule with its first span's font size and text color. A ::marker can't paint a gradient, so a gradient fill gives its first stop. Refs #12630 AI-assisted-by: claude-opus-5-5