Skip to content

fix(main-editor): improvements in text layers and sized box - #904

Merged
hm21 merged 8 commits into
hm21:stablefrom
saif-ellafi:feat/text-box-empty-and-overflow
Oct 24, 2026
Merged

hm21 merged 8 commits into
hm21:stablefrom
saif-ellafi:feat/text-box-empty-and-overflow

Conversation

@saif-ellafi

@saif-ellafi saif-ellafi commented Oct 23, 2026 •

Copy link
Copy Markdown
Contributor

Collected some user feedback and purused further testing myself on the in-line editing and resizable text boxes. These are cumulative but related set of improvements during that session. AI-assisted.

Description

Improvements to text boxes (TextLayerBox) and to editing text in place on the canvas.

Empty text boxes survive an edit. A text layer that had a box before an edit and still has one afterwards is kept when its text is emptied, inline, in the full-screen editor, and through applyTextLayerChanges, like an empty field on a form. Its background and its hit area are the box, so it stays visible and selectable. Text without a box, and a new text left empty, are still removed. One undo brings the text back.

TextLayerBoxOverflow.visible. A new overflow mode: the text keeps its size and lines that do not fit are drawn past the box. The background, the hit area and the layer's size stay the box. A version that does not know the mode reads it as clip, which also keeps the text size. While the text is edited in place, the field grows with its lines instead of scrolling inside the box. TextEditorConfigs.boxOverflow (default shrink) picks the mode for boxes the editors fit with the box button.

Layer captures include visible overflow. The images Layer.captureAsPng and Layer.captureAllLayers produce now hold the text drawn past the box instead of cutting it at the box. The capture grows evenly on both sides of an axis, so the image keeps the layer's center, and ExportedLayer.logicalSize reports that size. Only the captured image grows: the layer's size, its hit area and its selection on the canvas stay the box.

Turning the box on during an inline edit. The session puts the box it fits on the layer while the edit runs (InlineTextEditSession.showBoxOn), following thecomes off before the edit ends, so a savedd a dropped edit leaves the layer as it was. A resize records its own history steped in gets its layer back without the box,so undo reaches the original layer.

Resizing the text of an inline edit. InlineTextEditSession.setFontScale changes the size of the text being edited inside its layer, kept between TextEditorConfigs.minFontScale and `so a host can offer text size controls for scale also resizing the box.

Text no longer moves when an inline edit The field gives back the room a text fieits caret, which moved centered andright-aligned text by up to 3 px.

  • A layer that wraps at maxTextWidth wraps at the same width while edited (`RoundedBackgroundTextField.textWrapWidthpadding into that width, so the text
    wrapped earlier and gained lines.
  • A line height set on the layer's text sttead of being replaced by
    TextEditorStyle.textHeight.

Tests:

  • Empty boxes kept and plain text still removed.
  • Visible overflow: drawing, round trip, c captures.
  • Enabling, resizing, saving, cancelling aring an edit.
  • setFontScale clamping and keeping the
  • Text staying in place on entering an edi, boxes, wrapping and line heights.

The outline alignment test no longer sets a line height, since the field now keeps it rather than overriding it.

Related Issue: Closes #

Type of Change

  • ✨ New feature (non-breaking change which adds functionality)
  • 🛠️ Bug fix (non-breaking change which fixes an issue)
  • ❌ Breaking change (fix or feature ttionality to change)
  • 🧹 Code refactor
  • ✅ Build configuration change
  • 📝 Documentation
  • 🗑️ Chore

🤖 Generated with Claude Code

saif-ellafi and others added 8 commits October 23, 2026 15:17
…d exports

- A box shown while typing keeps following the text after a history step
  and leaves no trace in earlier steps, also when the layer is removed.
- A tap on a line drawn past the box puts the caret there instead of
  ending the edit.
- Captures of timed text, of masked layers and of shadows past the box
  match what the canvas shows, and capturePixelRatio gets the captured
  size.
@hm21
hm21 merged commit 2aa14c9 into hm21:stable Oct 24, 2026
3 checks passed
@hm21

hm21 commented Oct 24, 2026

Copy link
Copy Markdown
Owner

Thank you so much @saif-ellafi for taking the time to build out the desktop side of the package like this. Inline editing, resizable text boxes and now all this polish make a huge difference, it's really great work!

While testing I pushed a few fixes on top before merging:

  • Box shown while typing: after a history step during the edit (moving or rotating the layer), the shown box stopped following the text and stayed on the layer when the edit was cancelled. It now keeps following, and earlier steps never keep it, also when the layer is removed during the edit.
  • Visible overflow while typing: tapping a line drawn below the box ended the edit, because hit testing stops at the box. That tap now puts the caret there.
  • Captures with visible overflow:
    • Timed text (highlights, reveal) is rendered at the grown size, so the images match logicalSize.
    • Masked layers are not grown, since the mask cuts the content at the box anyway.
    • Shadows below the box are included.
    • capturePixelRatio now gets the captured size.
  • Example: text size buttons and boxOverflow: visible in the inline text example, plus a second box with visible overflow in the text box example.
  • Changelog and docs.

One heads-up for hosts that anchor layers at their top-left corner: the grown capture stays centered on the layer, so the image has to be offset by half the growth. This is documented on ExportedLayer.logicalSize.

Merged and released in 14.20.0, together with #905 and #906. Thanks again!

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.

2 participants