From 47bfd2b67bddd959d741c00bed3bdb09c2ab12e8 Mon Sep 17 00:00:00 2001 From: CatHood0 Date: Thu, 28 Nov 2024 10:41:41 -0400 Subject: [PATCH] Chore: fixed placeholders text scale issue on mobile devices --- example/lib/main.dart | 47 ++++++++++++++----- .../placeholder_builder_internal.dart | 4 ++ lib/src/editor/widgets/cursor.dart | 16 ++++--- .../cursor_configuration.dart | 32 ++++++++----- lib/src/editor/widgets/text/text_line.dart | 1 + 5 files changed, 68 insertions(+), 32 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index ac53434bd..b8cb89dc8 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -52,8 +52,7 @@ class _HomePageState extends State { } // 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 { 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 { 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 { 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)); } diff --git a/lib/src/editor/raw_editor/builders/placeholder/placeholder_builder_internal.dart b/lib/src/editor/raw_editor/builders/placeholder/placeholder_builder_internal.dart index 204baf6d0..92fd44df7 100644 --- a/lib/src/editor/raw_editor/builders/placeholder/placeholder_builder_internal.dart +++ b/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,6 +79,8 @@ 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, @@ -85,6 +88,7 @@ class PlaceholderBuilder { softWrap: true, strutStyle: strutStyle, textAlign: align, + textScaler: textScaler, textWidthBasis: TextWidthBasis.longestLine, ); // we use [Row] widget with [Expanded] to take whole the available width diff --git a/lib/src/editor/widgets/cursor.dart b/lib/src/editor/widgets/cursor.dart index d6d0c7007..b864ac6b4 100644 --- a/lib/src/editor/widgets/cursor.dart +++ b/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); } } } diff --git a/lib/src/editor/widgets/cursor_configuration/cursor_configuration.dart b/lib/src/editor/widgets/cursor_configuration/cursor_configuration.dart index 754fa181d..2c19a9050 100644 --- a/lib/src/editor/widgets/cursor_configuration/cursor_configuration.dart +++ b/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; } } diff --git a/lib/src/editor/widgets/text/text_line.dart b/lib/src/editor/widgets/text/text_line.dart index 8fd7fda7d..6b5786614 100644 --- a/lib/src/editor/widgets/text/text_line.dart +++ b/lib/src/editor/widgets/text/text_line.dart @@ -285,6 +285,7 @@ class _TextLineState extends State { lineStyle: style, textDirection: widget.textDirection, align: _getTextAlign(), + textScaler: MediaQuery.textScalerOf(context), strutStyle: StrutStyle.fromTextStyle(style), ); if (placeholderWidget != null) {