feat(rich-text): RichText form field on Tiptap #98

Merged

pienter merged 3 commits from task/pienter-ui__rich-text-field__rich-text-component into main 2026-09-19 22:30:12 +00:00

Conversation 0 Commits 3 Files changed 22 +1251 -1

pienter commented 2026-09-19 21:37:42 +00:00

Owner

Copy link

Adds RichText (@pienter/ui/components/RichText.vue), a formatted-text form field on headless Tiptap 3.

• v-model is an HTML string limited to one fixed set: paragraphs, headings 2 and 3, bold, italic, lists, links, blockquote. Empty is ''. The model only updates on a user edit, so loading a value never marks a form unsaved.
• One WAI-ARIA toolbar of icon toggles with a roving tab stop, built from Toggle and IconButton. Links are edited in a popover (toolbar or Ctrl/Cmd+K) and stored as a bare href (http, https, mailto, tel, or relative).
• readonly keeps a focusable read-only textbox without a toolbar; links are clickable.
• First runtime dependencies of the package: @tiptap/vue-3, @tiptap/pm, @tiptap/starter-kit, @tiptap/extension-link, @floating-ui/dom. Only apps that import RichText bundle them. ADR 0010 records this together with HTML storage.
• Eight new icons, the Rich Text glossary term, a story, an AUDIT and a CHANGELOG entry. No new CSS tokens.

Checks: typecheck, lint, format, tests (54), build:vue, build:storybook green. Stories exercised in Chrome.

Not verified, needs a visible browser tab: focus return after Undo disables itself and after Escape in the link popover; sticky toolbar in the LongBody story; link-on-paste; Safari, Firefox, screen readers.

Restart the dev servers after merging: package.json gains an exports entry.

Adds `RichText` (`@pienter/ui/components/RichText.vue`), a formatted-text form field on headless Tiptap 3. - `v-model` is an HTML string limited to one fixed set: paragraphs, headings 2 and 3, bold, italic, lists, links, blockquote. Empty is `''`. The model only updates on a user edit, so loading a value never marks a form unsaved. - One WAI-ARIA toolbar of icon toggles with a roving tab stop, built from Toggle and IconButton. Links are edited in a popover (toolbar or Ctrl/Cmd+K) and stored as a bare `href` (http, https, mailto, tel, or relative). - `readonly` keeps a focusable read-only textbox without a toolbar; links are clickable. - First runtime dependencies of the package: `@tiptap/vue-3`, `@tiptap/pm`, `@tiptap/starter-kit`, `@tiptap/extension-link`, `@floating-ui/dom`. Only apps that import `RichText` bundle them. ADR 0010 records this together with HTML storage. - Eight new icons, the **Rich Text** glossary term, a story, an AUDIT and a CHANGELOG entry. No new CSS tokens. Checks: typecheck, lint, format, tests (54), `build:vue`, `build:storybook` green. Stories exercised in Chrome. Not verified, needs a visible browser tab: focus return after Undo disables itself and after Escape in the link popover; sticky toolbar in the LongBody story; link-on-paste; Safari, Firefox, screen readers. Restart the dev servers after merging: `package.json` gains an `exports` entry.

pienter added 1 commit 2026-09-19 21:37:42 +00:00

feat(rich-text): RichText form field on Tiptap ... 1640454cb2

A formatted-text field whose `v-model` is an HTML string limited to one
fixed formatting set: paragraphs, headings 2 and 3, bold, italic, lists,
links and blockquote. An empty document is `''`, and the model only
updates on a user edit. The toolbar is one WAI-ARIA toolbar built from
the package's own Toggle and IconButton; links are edited in a popover
and stored as a bare `href`. `readonly` keeps a focusable read-only
textbox without a toolbar.

Tiptap and `@floating-ui/dom` become the package's first runtime
dependencies; ADR 0010 records that together with HTML storage. Adds the
bold, italic, heading-2, heading-3, list-ordered, quote, undo and redo
icons and the Rich Text glossary term.

pienter added 2 commits 2026-09-19 22:29:20 +00:00

chore(merge) e5cea20a0f

Merge branch 'main' into task/pienter-ui__rich-text-field__rich-text-component a4f4014df0

pienter merged commit 59811ba58e into main 2026-09-19 22:30:12 +00:00

pienter deleted branch task/pienter-ui__rich-text-field__rich-text-component 2026-09-19 22:30:12 +00:00

pienter referenced this pull request from a commit 2026-09-19 22:30:13 +00:00

Merge pull request 'feat(rich-text): RichText form field on Tiptap' (#98) from task/pienter-ui__rich-text-field__rich-text-component into main

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

pienter/ui!98

No description provided.