feat(ui): ^FB Block-Text UX revamp + editor orphan-marker hint#94
Merged
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request implements support for Zebra ^FB block-text, introducing a BlockTextSettings UI component, a visual wrap-guide on the canvas, and a shared utility for encoding/decoding line breaks and backslash escapes. It also refactors template marker tokenization to provide real-time validation and error highlighting for unknown variables or clock tokens. Review feedback identifies a potential ReferenceError due to a missing variable definition in TemplateContentInput, suggests refining line-count logic for empty strings, and recommends using replaceAll for more robust i18n placeholder substitution.
Surface ^FB state and validation in the Properties panel, light up
broken markers in the content editor, and visualise the wrap-width
on the canvas.
- **Justify** picker: 4 toggle buttons (left / centre / right /
justified) replacing the legacy `<select>`. Active mode is
highlighted with the accent palette so it reads at a glance —
same MS-Word pattern users already know. New JustifyButtons
component mirrors the existing AlignButtons icon-row idiom.
- **Validation hints** under the ^FB block:
· red "Block width required" when blockWidth is 0/missing
· amber "Content has N lines — exceeds max M, will be
truncated by printer" when content > blockLines
· muted "Uses N of max M lines" when content < blockLines
Round-trip safe: hints inform, never auto-correct. blockLines
stays a user-set max (CSV-bound rows can legitimately vary in
length around it).
- **Wrap-guide line** on canvas: dashed amber vertical at the
wrap-x for selected text fields with ^FB active. Direct visual
feedback when adjusting blockWidth.
- **Orphan-marker highlight** in the content editor: variable
markers referencing an undefined Variable, or clock markers
with an unknown token letter, render red with wavy underline
instead of accent/info. Same colour-mirror surface, immediate
feedback while typing.
- **^FB `\&` round-trip fix**: text generator now translates
in-content `\n` to the ZPL `\&` line-break marker when ^FB is
active. The parser already reversed `\&` → `\n` on import, so
multi-line ^FB content was importing correctly but exporting
with literal newlines that Zebra firmware ignores. Editor edits
now print as intended.
Canvas-colour palette adds an `accent` member alongside `selection`
so design-affordance overlays (currently the wrap guide; future
overlays welcome) read distinctly from the transformer chrome.
u8array
force-pushed
the
feat/fb-ux-refactor
branch
from
3b62059 to
b5276f1
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.