Skip to content

fix: validate non-empty text before saving in text editor#506

Open
bhavjsh wants to merge 3 commits into
fossasia:mainfrom
bhavjsh:feature/text-editor-validation
Open

fix: validate non-empty text before saving in text editor#506
bhavjsh wants to merge 3 commits into
fossasia:mainfrom
bhavjsh:feature/text-editor-validation

Conversation

@bhavjsh

@bhavjsh bhavjsh commented Jul 6, 2026

Copy link
Copy Markdown
Member

Fixes #502

Changes

  • Empty or spaces-only text is now blocked from being saved.
  • An error message shows on the text field when saving empty text.
  • A warning popup appears when a save is blocked.
  • The ✓ button is dimmed while the text box is empty.
  • The error clears automatically once valid text is entered.
  • The text field is auto-focused when the editor opens.
  • New text strings added for translation.
  • Tests added to cover empty, spaces-only and valid text cases.

Recordings

WhatsApp.Video.2026-07-07.at.1.41.51.AM.mp4

Checklist:

  • No hard coding: I have used values from constants.dart or localization files instead of hard-coded values.
  • No end of file edits: No modifications done at end of resource files.
  • Code reformatting: I have formatted the code using dart format or the IDE formatter.
  • Code analysis: My code passes checks run in flutter analyze and tests run in flutter test.

Summary by Sourcery

Validate non-empty text before allowing saves in the text editor and improve the editor’s UX around empty input.

New Features:

  • Prevent saving when the text field is empty or contains only whitespace in the text editor.
  • Dim the confirm (✓) button when the text field content is empty.
  • Auto-focus the text field and use sentence capitalization when the editor opens.

Bug Fixes:

  • Reject whitespace-only input as invalid text when confirming in the text editor.
  • Clear validation errors automatically once the user enters valid text.

Enhancements:

  • Show inline error messaging on the text field and a warning snackbar when a save is blocked due to empty text.

Tests:

  • Add widget tests covering empty, whitespace-only, and valid text confirmation behavior in the text editor.

The text editor's confirm button exported and saved the canvas
unconditionally, so an empty or whitespace-only text box was saved
as a blank image. Guard the confirm action against empty input and
surface the problem to the user.

- Reject empty/whitespace-only text on confirm instead of saving
- Show an inline field error and a warning SnackBar on failed confirm
- Dim the confirm icon while the text is empty and clear the error
  as valid text is typed
- Autofocus the field and enable sentence capitalization
- Add localized strings and widget tests for the validation flow
@sourcery-ai

sourcery-ai Bot commented Jul 6, 2026

Copy link
Copy Markdown
Contributor

Reviewer's Guide

This PR adds front-end validation to the text-fit editor so that empty or whitespace-only text cannot be saved, surfaced via inline field errors, a warning snackbar, and updated button state, with tests and localization strings to cover the new behavior.

Sequence diagram for text_fit_editor save validation

sequenceDiagram
  actor User
  participant TextFitEditorState
  participant ScaffoldMessenger
  participant Navigator

  User->>TextFitEditorState: IconButton.onPressed
  activate TextFitEditorState
  TextFitEditorState->>TextFitEditorState: _handleConfirm(canvasSize, appLocalizations)
  alt _isTextEmpty
    TextFitEditorState->>TextFitEditorState: setState(_errorText = appLocalizations.emptyTextError)
    TextFitEditorState->>ScaffoldMessenger: hideCurrentSnackBar()
    TextFitEditorState->>ScaffoldMessenger: showSnackBar(SnackBar(appLocalizations.emptyTextWarning))
    TextFitEditorState-->>User: save blocked
  else text not empty
    TextFitEditorState->>TextFitEditorState: _export(canvasSize)
    TextFitEditorState->>Navigator: pop(context, bytes)
  end
  deactivate TextFitEditorState
Loading

File-Level Changes

Change Details Files
Add validation flow that blocks saving when the editor text is empty or whitespace-only, with inline error messaging and a warning popup.
  • Introduce _errorText state and an _isTextEmpty getter based on trimmed controller text.
  • Implement _handleConfirm to gate export/navigation on non-empty text and show a SnackBar warning plus set _errorText when validation fails.
  • Wire the check-mark button to use _handleConfirm instead of calling _export/Navigator.pop directly.
lib/view/text_fit_editor.dart
Update text field UX to autofocus, support sentence capitalization, show/clear errors dynamically, and visually indicate invalid state.
  • Enable autofocus and sentence capitalization on the editor TextField.
  • Update onChanged to clear _errorText when the trimmed input becomes non-empty.
  • Pass _errorText into InputDecoration.errorText and configure enabledBorder to show a red border when there is an error.
  • Dim the ✓ icon color when the text is empty to indicate disabled/invalid state.
lib/view/text_fit_editor.dart
Add widget tests covering empty, whitespace-only, and valid text confirmation flows.
  • Add test ensuring confirm on empty text shows both inline error and snackbar warning and does not close the editor.
  • Add test ensuring whitespace-only text is rejected and shows the inline error.
  • Add test ensuring entering valid text after an error clears the inline error message.
test/text_fit_editor_test.dart
Introduce new localization strings for empty-text validation messages used in the editor.
  • Add keys and English strings for the empty text error and warning messages referenced as emptyTextError and emptyTextWarning in the editor code.
lib/l10n/app_en.arb

Assessment against linked issues

Issue Objective Addressed Explanation
#502 Prevent the text editor from exporting and saving an image when the text field is empty.
#502 Prevent the text editor from exporting and saving an image when the text field contains only whitespace.

Possibly linked issues


Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@bhavjsh bhavjsh requested review from ctrlVnt and rahul31124 July 6, 2026 20:15

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - I've found 1 issue, and left some high level feedback:

  • The new onChanged handler only calls setState when _errorText is non-null, so _isTextEmpty and the check icon’s dimmed state won’t update as the user types once there is no error; consider always calling setState on change and clearing _errorText conditionally inside it.
  • Instead of conditionally changing the enabledBorder based on _errorText, you can use the built-in errorBorder/focusedErrorBorder fields on InputDecoration to keep the border configuration clearer and more consistent.
  • The hard-coded red color for the error border could be replaced with a color from the theme (e.g. Theme.of(context).colorScheme.error) to align with app-wide styling and make dark/light mode behavior consistent.
Prompt for AI Agents
Please address the comments from this code review:

## Overall Comments
- The new `onChanged` handler only calls `setState` when `_errorText` is non-null, so `_isTextEmpty` and the check icon’s dimmed state won’t update as the user types once there is no error; consider always calling `setState` on change and clearing `_errorText` conditionally inside it.
- Instead of conditionally changing the `enabledBorder` based on `_errorText`, you can use the built-in `errorBorder`/`focusedErrorBorder` fields on `InputDecoration` to keep the border configuration clearer and more consistent.
- The hard-coded red color for the error border could be replaced with a color from the theme (e.g. `Theme.of(context).colorScheme.error`) to align with app-wide styling and make dark/light mode behavior consistent.

## Individual Comments

### Comment 1
<location path="lib/view/text_fit_editor.dart" line_range="193-197" />
<code_context>
                         borderRadius: BorderRadius.circular(12),
                         borderSide: BorderSide.none,
                       ),
+                      enabledBorder: OutlineInputBorder(
+                        borderRadius: BorderRadius.circular(12),
+                        borderSide: _errorText == null
+                            ? BorderSide.none
+                            : const BorderSide(color: Colors.red, width: 1),
+                      ),
                     ),
</code_context>
<issue_to_address>
**suggestion (bug_risk):** Using `enabledBorder` for error styling may lead to inconsistent visuals in focused/error states.

Because `_errorText` is set, Flutter will use `errorBorder` / `focusedErrorBorder` in addition to `enabledBorder`. Only changing `enabledBorder` means the border can differ between focused and unfocused error states. Define matching `errorBorder` and `focusedErrorBorder` with the red outline, and keep `enabledBorder` for the non-error state to ensure consistent styling.

Suggested implementation:

```
                    style: const TextStyle(fontSize: 14),
                    decoration: InputDecoration(
                      hintText: appLocalizations.enterTextHint,
                      errorText: _errorText,
                      contentPadding: const EdgeInsets.symmetric(
                          horizontal: 12, vertical: 10),
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(12),
                        borderSide: BorderSide.none,
                      ),
                      enabledBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(12),
                        borderSide: BorderSide.none,
                      ),
                      errorBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(12),
                        borderSide: const BorderSide(color: Colors.red, width: 1),
                      ),
                      focusedErrorBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(12),
                        borderSide: const BorderSide(color: Colors.red, width: 1),
                      ),

```

If your design requires a visible border when the field is focused and not in an error state, you may also want to define `focusedBorder` with a non-error style (e.g., a primary-color outline), parallel to the `enabledBorder` definition.
</issue_to_address>

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

Comment thread lib/view/text_fit_editor.dart Outdated
bhavjsh added 2 commits July 7, 2026 01:46
…ditor

Address review feedback on the empty-text validation:
- Replace the conditional enabledBorder with dedicated errorBorder and
  focusedErrorBorder so the error outline is consistent across focused
  and unfocused states
- Use Theme.of(context).colorScheme.error instead of a hard-coded red so
  the field aligns with app-wide light/dark styling
- Simplify the onChanged guard now that the border no longer depends on it
@github-actions

github-actions Bot commented Jul 6, 2026

Copy link
Copy Markdown
Contributor

Build Status

Build successful. APKs to test: https://github.com/fossasia/magic-epaper-app/actions/runs/28821902004/artifacts/8121390886.

Screenshots

Android Screenshots
iPhone Screenshots
iPad Screenshots

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.

Text editor saves blank canvas when text field is empty

1 participant