Chore: fixed placeholders text scale issue on mobile devices

example/lib/main.dart

@@ -52,8 +52,7 @@ class _HomePageState extends State<HomePage> {
           }
           // Save the image somewhere and return the image URL that will be
           // stored in the Quill Delta JSON (the document).
-          final newFileName =
-              'image-file-${DateTime.now().toIso8601String()}.png';
+          final newFileName = 'image-file-${DateTime.now().toIso8601String()}.png';
           final newPath = path.join(
             io.Directory.systemTemp.path,
             newFileName,
@@ -86,9 +85,8 @@ class _HomePageState extends State<HomePage> {
             icon: const Icon(Icons.output),
             tooltip: 'Print Delta JSON to log',
             onPressed: () {
-              ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
-                  content:
-                      Text('The JSON Delta has been printed to the console.')));
+              ScaffoldMessenger.of(context)
+                  .showSnackBar(const SnackBar(content: Text('The JSON Delta has been printed to the console.')));
               debugPrint(jsonEncode(_controller.document.toDelta().toJson()));
             },
           ),
@@ -127,11 +125,8 @@ class _HomePageState extends State<HomePage> {
                 buttonOptions: QuillSimpleToolbarButtonOptions(
                   base: QuillToolbarBaseButtonOptions(
                     afterButtonPressed: () {
-                      final isDesktop = {
-                        TargetPlatform.linux,
-                        TargetPlatform.windows,
-                        TargetPlatform.macOS
-                      }.contains(defaultTargetPlatform);
+                      final isDesktop = {TargetPlatform.linux, TargetPlatform.windows, TargetPlatform.macOS}
+                          .contains(defaultTargetPlatform);
                       if (isDesktop) {
                         _editorFocusNode.requestFocus();
                       }
@@ -147,6 +142,35 @@ class _HomePageState extends State<HomePage> {
                 controller: _controller,
                 config: QuillEditorConfig(
                   placeholder: 'Start writing your notes...',
+                  characterShortcutEvents: standardCharactersShortcutEvents,
+                  spaceShortcutEvents: standardSpaceShorcutEvents,
+                  cursorPlaceholderConfig: CursorPlaceholderConfig(
+                    text: 'Write something...',
+                    textStyle: TextStyle(color: Colors.grey, fontStyle: FontStyle.italic),
+                    show: true,
+                    offset: Offset(3.5, 2) 
+                  ),
+                  placeholderComponentsConfiguration: PlaceholderConfig(
+                    builders: {
+                      Attribute.header.key: (Attribute attr, style) {
+                        final values = [30, 27, 22];
+                        final level = attr.value as int?;
+                        if (level == null) return null;
+                        final fontSize = values[(level - 1 < 0 || level - 1 > 3 ? 0 : level - 1)];
+                        return PlaceholderTextBuilder(
+                          placeholderText: 'Header $level',
+                          style:
+                              TextStyle(fontSize: fontSize.toDouble()).merge(style.copyWith(color: Colors.grey)),
+                        );
+                      },
+                      Attribute.list.key: (Attribute attr, style) {
+                        return PlaceholderTextBuilder(
+                          placeholderText: 'List item',
+                          style: style.copyWith(color: Colors.grey),
+                        );
+                      },
+                    },
+                  ),
                   padding: const EdgeInsets.all(16),
                   embedBuilders: [
                     ...FlutterQuillEmbeds.editorBuilders(
@@ -193,8 +217,7 @@ class TimeStampEmbed extends Embeddable {
 
   static const String timeStampType = 'timeStamp';
 
-  static TimeStampEmbed fromDocument(Document document) =>
-      TimeStampEmbed(jsonEncode(document.toDelta().toJson()));
+  static TimeStampEmbed fromDocument(Document document) => TimeStampEmbed(jsonEncode(document.toDelta().toJson()));
 
   Document get document => Document.fromJson(jsonDecode(data));
 }

lib/src/editor/raw_editor/builders/placeholder/placeholder_builder_internal.dart

@@ -70,6 +70,7 @@ class PlaceholderBuilder {
     required TextAlign align,
     TextDirection? textDirection,
     StrutStyle? strutStyle,
+    TextScaler? textScaler,
   }) {
     if (builders.isEmpty) return null;
     final configuration =
@@ -78,13 +79,16 @@ class PlaceholderBuilder {
     if (configuration == null || configuration.placeholderText.trim().isEmpty) {
       return null;
     }
+    //TODO: solo en telefonos, este codigo es erroneo. Por qué? Ni idea. 
+    // Podria ser tema nativo, pero solucionemoslo como podamos
     final textWidget = Text(
       configuration.placeholderText,
       style: configuration.style,
       textDirection: textDirection,
       softWrap: true,
       strutStyle: strutStyle,
       textAlign: align,
+      textScaler: textScaler,
       textWidthBasis: TextWidthBasis.longestLine,
     );
     // we use [Row] widget with [Expanded] to take whole the available width

lib/src/editor/widgets/cursor.dart

@@ -265,7 +265,7 @@ class CursorPainter {
     TextPosition position,
     bool lineHasEmbed,
     Line node,
-    CursorPlaceholderConfig? cursorPlaceholderConfiguration,
+    CursorPlaceholderConfig? cursorPlaceholderConfig,
     TextDirection textDirection,
   ) {
     // relative (x, y) to global offset
@@ -332,22 +332,24 @@ class CursorPainter {
       canvas.drawRRect(caretRRect, paint);
     }
     // we need to make these checks to avoid use this painter unnecessarily
-    if (cursorPlaceholderConfiguration != null &&
-        cursorPlaceholderConfiguration.show &&
-        cursorPlaceholderConfiguration.paragraphPlaceholderText
+    if (cursorPlaceholderConfig != null &&
+        cursorPlaceholderConfig.show &&
+        cursorPlaceholderConfig.text
             .trim()
             .isNotEmpty) {
       if (_isNodeInline(node) && node.isEmpty) {
+        final localOffset = cursorPlaceholderConfig.offset;
+        if(localOffset == null) return;
         placeholderPainter ??= TextPainter(
           text: TextSpan(
-            text: cursorPlaceholderConfiguration.paragraphPlaceholderText,
-            style: cursorPlaceholderConfiguration.style,
+            text: cursorPlaceholderConfig.text,
+            style: cursorPlaceholderConfig.textStyle,
           ),
           textDirection: textDirection,
         );
         placeholderPainter!
           ..layout()
-          ..paint(canvas, offset + Offset(3.5, (style.height ?? 2) / 2));
+          ..paint(canvas, offset + localOffset);
       }
     }
   }

lib/src/editor/widgets/cursor_configuration/cursor_configuration.dart

@@ -13,46 +13,52 @@ const TextStyle _defaultPlaceholderStyle =
 @immutable
 class CursorPlaceholderConfig {
   const CursorPlaceholderConfig({
-    required this.paragraphPlaceholderText,
-    required this.style,
+    required this.text,
+    required this.textStyle,
     required this.show,
+    required this.offset,
   });
 
-  factory CursorPlaceholderConfig.basic({TextStyle? style}) {
+  factory CursorPlaceholderConfig.basic({TextStyle? textStyle}) {
     return CursorPlaceholderConfig(
-      paragraphPlaceholderText: 'Enter text...',
-      style: style ?? _defaultPlaceholderStyle,
+      text: 'Enter text...',
+      textStyle: textStyle ?? _defaultPlaceholderStyle,
       show: true,
+      offset: const Offset(3.5, 5),
     );
   }
 
   factory CursorPlaceholderConfig.noPlaceholder() {
     return const CursorPlaceholderConfig(
-      paragraphPlaceholderText: '',
-      style: TextStyle(),
+      text: '',
+      textStyle: TextStyle(),
       show: false,
+      offset: null,
     );
   }
 
   /// The text that will be showed at the right
   /// or left of the cursor
-  final String paragraphPlaceholderText;
+  final String text;
 
-  /// The style of the placeholder
-  final TextStyle style;
+  /// The textStyle of the placeholder
+  final TextStyle textStyle;
 
   /// Decides if the placeholder should be showed
   final bool show;
 
+  /// Decides the offset where will be painted the text 
+  final Offset? offset;
+
   @override
   int get hashCode =>
-      paragraphPlaceholderText.hashCode ^ style.hashCode ^ show.hashCode;
+      text.hashCode ^ textStyle.hashCode ^ show.hashCode ^ offset.hashCode;
 
   @override
   bool operator ==(covariant CursorPlaceholderConfig other) {
     if (identical(this, other)) return true;
     return other.show == show &&
-        other.paragraphPlaceholderText == paragraphPlaceholderText &&
-        other.style == style;
+        other.text == text &&
+        other.textStyle == textStyle && other.offset == offset;
   }
 }

lib/src/editor/widgets/text/text_line.dart

@@ -285,6 +285,7 @@ class _TextLineState extends State<TextLine> {
           lineStyle: style,
           textDirection: widget.textDirection,
           align: _getTextAlign(),
+          textScaler: MediaQuery.textScalerOf(context),
           strutStyle: StrutStyle.fromTextStyle(style),
         );
         if (placeholderWidget != null) {