Skip to content

Feature(UI): Add text tool to canvas #8723

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
DustyShoe wants to merge 20 commits into
base: main
Choose a base branch
from
Open

Feature(UI): Add text tool to canvas #8723

DustyShoe wants to merge 20 commits into from

Conversation

@DustyShoe
Copy link
Contributor

@DustyShoe DustyShoe commented Dec 30, 2025 •
edited
Loading

Summary

Canvas Basic Text Tool!

Summary:

  • Adds a basic Text tool with overlay editing and rasterize-on-commit.
  • New text options row (font, size, bold/italic/underline/strike, alignment).
  • Handles hotkey suppression during typing, commit on Enter/tool switch.
  • Overlay positioning, tests for text helpers.
2025-12-30.13-29-23.mp4

Related Issues / Discussions

The fonts information is stored in invokeai\frontend\web\src\features\controlLayers\text\textConstants.ts
If anyone have an opinion what fonts and fallbacks should be used, please write in comments. There's 10 fonts to choose ATM and i'd like to make selection as diverse as possible.

QA Instructions

  • Activate Text tool, click canvas, type 2–3 lines, Shift+Enter adds newline, Enter commits. Esc cancels operation.
  • Verify that typing works as expected, hotkeys are suppressed while typing (only Ctrl/Cmd+C/V/Z/Y allowed).
  • Change font, size, bold/italic/underline/strike, alignment; preview matches raster after commit.
  • Click outside text box or switch tools; commit happens once, creates a raster layer above selected layer.

Merge Plan

Checklist

  • The PR has a short but descriptive title, suitable for a changelog
  • Tests added / updated (if applicable)
  • ❗Changes to a redux slice have a corresponding migration
  • Documentation added / updated (if applicable)
  • Updated What's New copy (if doing a release after this PR)

@github-actions github-actions bot added frontend PRs that change frontend files docs PRs that change docs labels Dec 30, 2025
@DustyShoe DustyShoe changed the title Feature/add text tool to canvas Feature(UI): Add text tool to canvas Dec 30, 2025
@DustyShoe DustyShoe marked this pull request as ready for review December 30, 2025 12:02
DustyShoe and others added 3 commits December 31, 2025 00:26
@DustyShoe
Replaced the focus retry loop with a callback‑ref based approach in i…
aea4811 
…n CanvasTextOverlay.tsx

Renamed containerMetrics to textContainerData in CanvasTextOverlay.tsx
Fixed mouse cursor disapearing during typing.
@DustyShoe
Merge branch 'main' into Feature/Add-Text-tool-to-canvas
0920a19
@DustyShoe
Added missing localistaion string
fd0e9d1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@blessedcoolant blessedcoolant Awaiting requested review from blessedcoolant blessedcoolant is a code owner

@lstein lstein Awaiting requested review from lstein lstein is a code owner

1 more reviewer

@joshistoast joshistoast joshistoast left review comments

Reviewers whose approvals may not affect merge requirements

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

docs PRs that change docs frontend PRs that change frontend files

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@DustyShoe @joshistoast