Skip to content

Comments

[ADD] ability to add placeholder textstyle#2698

Open
hardiklakhalani wants to merge 1 commit intosingerdmx:masterfrom
hardiklakhalani:feature/placeholder-textstyle
Open

[ADD] ability to add placeholder textstyle#2698
hardiklakhalani wants to merge 1 commit intosingerdmx:masterfrom
hardiklakhalani:feature/placeholder-textstyle

Conversation

@hardiklakhalani
Copy link

Description

This PR adds support for customizing the placeholder text style (including font size) in the Flutter Quill editor. Previously, the placeholder text style was hardcoded with a fontSize of 20 and could not be customized by users.

Current Behavior:

  • Placeholder text uses a fixed style with fontSize: 20 defined in DefaultStyles.getInstance()
  • Users cannot customize placeholder appearance (font size, color, etc.)
  • The only way to change placeholder style was to override the entire DefaultStyles via customStyles, which is cumbersome

New Behavior:

  • Added optional placeholderStyle parameter to QuillEditorConfig and QuillRawEditorConfig
  • Users can now pass a TextStyle to customize placeholder appearance (fontSize, color, fontStyle, etc.)
  • The provided placeholderStyle is merged with the default placeholder style, allowing partial customization
  • Fully backward compatible - existing code continues to work without changes

Motivation:
Many users need to customize placeholder text appearance to match their app's design system. Currently, this requires creating a complete DefaultStyles override just to change the placeholder font size, which is overly complex for such a common use case.

Related Issues

  • Related to placeholder customization requests
  • Addresses the need for easier placeholder styling without full DefaultStyles override

Type of Change

  • Feature: New functionality without breaking existing features.
  • 🛠️ Bug fix: Resolves an issue without altering current behavior.
  • 🧹 Refactor: Code reorganization, no behavior change.
  • Breaking: Alters existing functionality and requires updates.
  • 🧪 Tests: New or modified tests
  • 📝 Documentation: Updates or additions to documentation.
  • 🗑️ Chore: Routine tasks, or maintenance.
  • Build configuration change: Build/configuration changes.

Changes Made

Files Modified

  1. lib/src/editor/config/editor_config.dart

    • Added placeholderStyle parameter (optional TextStyle?) to QuillEditorConfig
    • Added documentation for the new parameter
    • Updated copyWith() method to include placeholderStyle
  2. lib/src/editor/raw_editor/config/raw_editor_config.dart

    • Added placeholderStyle parameter (optional TextStyle?) to QuillRawEditorConfig
    • Added documentation for the new parameter
  3. lib/src/editor/editor.dart

    • Updated to pass placeholderStyle from QuillEditorConfig to QuillRawEditorConfig
  4. lib/src/editor/raw_editor/raw_editor_state.dart

    • Added logic in didChangeDependencies() to merge custom placeholderStyle with default placeholder style
    • Uses DefaultStyles.merge() to update only the placeholder style

Usage Example

QuillEditor.basic(
  controller: quillController,
  config: QuillEditorConfig(
    placeholder: 'Write a message...',
    placeholderStyle: TextStyle(
      fontSize: 14,  // Custom font size
      color: Colors.grey.shade600,
      fontStyle: FontStyle.italic,
    ),
  ),
)

Testing

  • ✅ Verified backward compatibility (works without placeholderStyle)
  • ✅ Tested with custom fontSize only
  • ✅ Tested with multiple style properties (fontSize, color, fontStyle)
  • ✅ Verified that default placeholder style is preserved when not overridden
  • ✅ Confirmed existing placeholder functionality remains intact

Backward Compatibility

Fully backward compatible

  • placeholderStyle is optional (nullable)
  • If not provided, default placeholder style (fontSize: 20) is used
  • Existing code requires no changes

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.

1 participant