Claude/UI editor refactor 6421d4 - #96
Open
LBU4SH wants to merge 6 commits into
Open
Conversation
- fontFamily/fontSize: replace native <select> with a ui-button trigger opening a ui-menu popup (size="small"), same pattern as ui-button-split. blockFormat stays a native <select>. - Add indent/outdent tools (native execCommand passthrough, opt-in via tools like fontSize). - Add textColor/highlightColor tools, each opening a new ui-swatch-picker popup. Colors are written as ui-editor-color-*/ui-editor-highlight-* classes bound to --primitives-* tokens, never inline styles. - New ui-swatch-picker component (projects/ui-kit/forms/): color grid popup derived from primitives tokens, 2D roving-tabindex keyboard nav, listbox/option a11y pattern, reused by ui-editor for both pickers. - Regenerate docs manifest and component-vars (npm run docs:config). Docs: rewrite the "listes déroulantes" section of ui-editor.mdx to reflect the select/popup split and updated tool list.
…er chevron, add text alignment - Fix blockFormat opening blank until the caret had touched the content: readBlockFormat() depends on document.queryCommandValue, which reflects the live selection only. New readInitialBlockFormat() reads the first child's tag once after the initial render instead (falls back to `p`). - Fix the fontFamily/fontSize trigger chevron sticking to the label instead of the field's edge: the width/justify-content rules targeted the <ui-button> host (inline by default, ignores min-inline-size), not the inner .ui-button element that actually lays out icon+label. Now targets it via ::ng-deep and makes the host inline-flex. - Add alignLeft/alignCenter/alignRight/alignJustify tools: execCommand passthrough (justifyLeft/Center/Right/Full), toggle-tracked like bold/italic/underline (browser guarantees mutual exclusion via queryCommandState), in DEFAULT_EDITOR_TOOLS.
- Finish removing blockFormat (started uncommitted): the tool, EditorBlock, EDITOR_BLOCKS, applyBlockFormat/readBlockFormat/readInitialBlockFormat are gone. The editor only ever produces <p> now — no H1-H3 from the toolbar. BREAKING for any `tools` list still referencing 'blockFormat'. - Fix the template left broken by that in-progress removal: the select-tool branch rendered both ui-menu popups unconditionally, on every select entry, with no trigger button at all — fontFamily/fontSize were unreachable. Restored one ui-button trigger + the matching single ui-menu per entry. - Move fontSize into DEFAULT_EDITOR_TOOLS: it was opt-in only to avoid duplicating blockFormat on screen, a reason that no longer applies. - Drop the now-dead native <select> CSS/SCSS variables and the onSelectChange/ selectValue leftovers that only existed for blockFormat's <select>. - Update stories/mdx: drop the Headings story (nothing left to demonstrate), fold FontMenus into the now-default FontFamily/FontSize stories, rewrite the toolbar section to describe two default selectors instead of three.
…learFormat - Finish switching fontFamily/fontSize from the ui-button+ui-menu popup pattern to ui-select (started uncommitted): one <ui-select size="small"> per select-tool, [ngModel]-bound to the current value, (valueChange) applying the font/size command. Drops the now-dead ui-menu/UiMenuItem wiring, viewChilds, open-state signals and trigger-label helpers. - Fix "Effacer le formatage" leaving font/size/color/highlight in place: removeFormat only strips native inline formatting, never the editor's own <span class="ui-editor-*"> wrappers. New clearFormatMarkers() unwraps them across the current selection, run alongside the native command. - Update stories/mdx/changelog to match (ui-select, not ui-menu popup); drop the now-stale blockFormat/chevron Fixed entries superseded by this work.
…lbar Blend the ui-select boxes into the toolbar surface instead of rendering as their own bordered form field: --ui-field-stroke-width: 0 (public hook) for the border, a ::ng-deep override on .ui-field-box for the fill (no public hook for that — scoped to .ui-editor-select only, no other ui-select in the kit is affected), plus a hover state matching the rest of the toolbar.
clearFormatMarkers() doesn't reliably clear every marker class yet. Rather than ship a button that doesn't always do what it says, pull 'clearFormat' out of DEFAULT_EDITOR_TOOLS for now — the tool itself, its icon/label and clearFormatMarkers() are untouched, still available via an explicit `tools`.
LBU4SH
force-pushed
the
claude/ui-editor-refactor-6421d4
branch
from
August 26, 2026 15:02
b0db047 to
d7e8324
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.