Skip to content

Feat: more text formats in the WYSIWYG toolbar - #21

Open
charlie404 wants to merge 1 commit into
ciklik:mainfrom
charlie404:feat/toolbar-formats
Open

Feat: more text formats in the WYSIWYG toolbar#21
charlie404 wants to merge 1 commit into
ciklik:mainfrom
charlie404:feat/toolbar-formats

Conversation

@charlie404

Copy link
Copy Markdown
Contributor

Adds a few formats that were missing from the HTMLText bubble toolbar, plus two small quality of life changes on the link form and the color palette.

What is added

  • Strike (<s>), as its own button next to the highlighter.
  • Superscript, subscript and inline code, grouped in a hover dropdown (same pattern as the headings and alignment dropdowns) so the bubble stays narrow enough for the minimum sidebar width (450px). The main button shows the active format.
  • New tab checkbox on the link form, which sets target="_blank" rel="noopener noreferrer".
  • No color swatch at the start of the color palette, to remove a color without clearing the rest of the formatting (Clear was the only way before, and it wipes everything).

Behaviour worth a look during review

  • Links no longer default to target="_blank" rel="noopener noreferrer nofollow". That was the Tiptap default applied to every link created from the toolbar; the attributes are now written only when the checkbox is ticked. Content saved before this change round-trips untouched, the parsed attributes are preserved.
  • Superscript and subscript exclude each other at the schema level, so Mod+. and Mod+, cannot stack them either, and pasted <sup><sub> collapses to one mark.
  • Inline code no longer excludes every other mark. With the Tiptap default (excludes: '_'), applying code silently dropped an existing link or color, and bold/italic/color became no-ops on code without any feedback. It now behaves like the other inline formats.
  • @tiptap/extension-color is dropped. TextStyleKit already registers it, so the two were logging Duplicate extension names found: ['color'] for every mounted editor. setColor / unsetColor still come from TextStyleKit.
  • The link form now stays open with a validation message when Tiptap rejects the URL, instead of closing and dropping what was typed. A value starting with www. is prefixed with https://, since isAllowedUri rejects a bare host followed by a path.
  • The bubble is given a shift padding so it keeps a small gap with the sidebar border when the selection sits near the edge of a field. Without it, it was clamped flush against the border and looked cut off.

Checks

tsc, vitest and the build pass. The toolbar was exercised in the browser on the Vite playground: every button and its keyboard shortcut, single line and multiline fields, the link form with and without the checkbox, an invalid URL, the color reset, and a round-trip of content saved with the previous version.

The Cypress suite was not run locally (the 15.6 binary does not start on macOS 26 here), so it relies on CI.

Adds strike, superscript, subscript and inline code. Strike gets its own
button, the three others are grouped in a hover dropdown so the bubble
still fits the minimum sidebar width.

Also in the toolbar:
- the link form gets a "New tab" checkbox, and stays open with a message
  when Tiptap rejects the URL instead of dropping what was typed
- the color palette gets a "No color" swatch, so a color can be removed
  without clearing the rest of the formatting
- the bubble keeps a small gap with the sidebar border when the
  selection is close to it, instead of being clamped flush against it

Behaviour notes:
- superscript and subscript exclude each other at the schema level, so
  the keyboard shortcuts cannot stack them either
- inline code no longer excludes every other mark, it can be combined
  with bold, a link or a color like the other formats
- links no longer get target="_blank" rel="nofollow" by default, these
  attributes are now set only when the checkbox is ticked

@tiptap/extension-color is dropped: TextStyleKit already registers it,
and the duplicate was logging a warning for every mounted editor.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant