Text formatting like Element: toolbar, link insertion, and the rest of the formatting UI #54

New issue

Open

opened 2026-10-06 01:59:50 +00:00 by robocub · 0 comments

robocub commented

2026-10-06 01:59:50 +00:00

Member

Goal: everything Element's composer can do should be easy in Vommet: bold, italic, underline, strikethrough, inline code, links with custom text, quotes, bulleted and numbered lists, code blocks, and spoilers.

What works today

Sending already converts Markdown to HTML (matrix_room.dart, using the Matrix SDK's markdown() with GitHub-flavoured syntax plus spoilers, LaTeX, emotes and pills). So **bold**, *italic*, ~~strike~~, `code`, [text](https://url), > quote, lists, fenced code and ||spoiler|| all send as formatted messages, and the composer (rich_text_field.dart) highlights some of them as you type. What's missing is discoverability and UI. You have to know Markdown, and there's no way to make a link without typing the syntax.

Proposal (phased)

Formatting toolbar (toggleable, like Element's "Show formatting"): bold, italic, strikethrough, inline code, link, quote, bulleted and numbered list, code block, spoiler. Each button wraps the selection in Markdown, or inserts the markers with the cursor between them, and pressing it again unwraps.
Link dialog: text + URL fields, pre-filled from the selection. Pasting a URL over selected text turns it into [selection](url), like Element and Discord.
Keyboard shortcuts: Ctrl/Cmd+B, I, Shift+X, E, K, the same as Element. Shares its key handling with #37 (which also covers reply-to-last).
Selection context menu: a Format submenu (upstream commetchat/commet#956).
Underline: Markdown has no underline, so it needs an HTML <u> passthrough (or a custom syntax) on the send path.
Later, maybe: a true WYSIWYG editor. Element's is matrix-rich-text-editor (Rust core with Kotlin, Swift and web bindings, no Flutter binding), so a Flutter binding through the existing rust_lib_commet FFI would be a big project. The Markdown toolbar gets most of the value for much less.

The composer preview should render whatever the toolbar produces (live styling exists for bold, italic and headings; extend it to links, code, strike and quotes).

#37 composer shortcuts (Markdown formatting part, upstream commetchat/commet#769), so do 3 there or fold it in here
#25 space after a URL dropped on send, and #24 extra line breaks from formatted_body: both are in the same Markdown-to-HTML path; fix them first so links behave
upstream commetchat/commet#1070 (MSC4550 explicit links): worth following for the link format

Upstream (searched 2026-10-06): open issues #769, #956 and #1070; no PR or branch for a formatting toolbar or link dialog.

Goal: everything Element's composer can do should be easy in Vommet: bold, italic, underline, strikethrough, inline code, **links with custom text**, quotes, bulleted and numbered lists, code blocks, and spoilers. ## What works today Sending already converts Markdown to HTML (`matrix_room.dart`, using the Matrix SDK's `markdown()` with GitHub-flavoured syntax plus spoilers, LaTeX, emotes and pills). So `**bold**`, `*italic*`, `~~strike~~`, `` `code` ``, `[text](https://url)`, `> quote`, lists, fenced code and `||spoiler||` all send as formatted messages, and the composer (`rich_text_field.dart`) highlights some of them as you type. **What's missing is discoverability and UI.** You have to know Markdown, and there's no way to make a link without typing the syntax. ## Proposal (phased) 1. **Formatting toolbar** (toggleable, like Element's "Show formatting"): bold, italic, strikethrough, inline code, link, quote, bulleted and numbered list, code block, spoiler. Each button wraps the selection in Markdown, or inserts the markers with the cursor between them, and pressing it again unwraps. 2. **Link dialog:** text + URL fields, pre-filled from the selection. Pasting a URL over selected text turns it into `[selection](url)`, like Element and Discord. 3. **Keyboard shortcuts:** Ctrl/Cmd+B, I, Shift+X, E, K, the same as Element. Shares its key handling with #37 (which also covers reply-to-last). 4. **Selection context menu:** a Format submenu (upstream commetchat/commet#956). 5. **Underline:** Markdown has no underline, so it needs an HTML `<u>` passthrough (or a custom syntax) on the send path. 6. **Later, maybe:** a true WYSIWYG editor. Element's is `matrix-rich-text-editor` (Rust core with Kotlin, Swift and web bindings, no Flutter binding), so a Flutter binding through the existing `rust_lib_commet` FFI would be a big project. The Markdown toolbar gets most of the value for much less. The composer preview should render whatever the toolbar produces (live styling exists for bold, italic and headings; extend it to links, code, strike and quotes). ## Related - #37 composer shortcuts (Markdown formatting part, upstream commetchat/commet#769), so do 3 there or fold it in here - #25 space after a URL dropped on send, and #24 extra line breaks from `formatted_body`: both are in the same Markdown-to-HTML path; fix them first so links behave - upstream commetchat/commet#1070 (MSC4550 explicit links): worth following for the link format Upstream (searched 2026-10-06): open issues #769, #956 and #1070; no PR or branch for a formatting toolbar or link dialog.

robocub added the

feature

effort: large

labels

2026-10-06 01:59:50 +00:00