Fix: Block Attributes are not displayed if the editor is empty (#2210)

* Fix: list blocks is not showed if the editor is empty * Fix: placeholder line is being checked by the SpellCheckerService * Chore: dart format * Improved comments * Chore: another dart format --------- Co-authored-by: CatHood0 <[email protected]>
singerdmx · Sep 13, 2024 · 4e7ff46 · 4e7ff46
1 parent eb548c6
commit 4e7ff46
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 5 deletions.
diff --git a/lib/src/delta/delta_diff.dart b/lib/src/delta/delta_diff.dart
@@ -39,11 +39,17 @@ Diff getDiff(String oldText, String newText, int cursorPosition) {
       end > limit && oldText[end - 1] == newText[end + delta - 1];
       end--) {}
   var start = 0;
+  //TODO: we need to improve this part because this loop has a lot of unsafe index operations
   for (final startLimit = cursorPosition - math.max(0, delta);
-      start < startLimit && oldText[start] == newText[start];
+      start < startLimit &&
+          (start > oldText.length - 1 ? '' : oldText[start]) ==
+              (start > newText.length - 1 ? '' : newText[start]);
       start++) {}
   final deleted = (start >= end) ? '' : oldText.substring(start, end);
-  final inserted = newText.substring(start, end + delta);
+  // we need to make the check if the start is major than the end because if we directly get the
+  // new inserted text without checking first, this will always throw an error since this is an unsafe op
+  final inserted =
+      (start >= end + delta) ? '' : newText.substring(start, end + delta);
   return Diff(
     start: start,
     deleted: deleted,

diff --git a/lib/src/editor/raw_editor/raw_editor_state.dart b/lib/src/editor/raw_editor/raw_editor_state.dart
@@ -1,5 +1,5 @@
 import 'dart:async' show StreamSubscription;
-import 'dart:convert' show jsonDecode;
+import 'dart:convert' show jsonDecode, jsonEncode;
 import 'dart:math' as math;
 import 'dart:ui' as ui hide TextStyle;
 
@@ -404,9 +404,22 @@ class QuillRawEditorState extends EditorState
     var doc = controller.document;
     if (doc.isEmpty() && widget.configurations.placeholder != null) {
       final raw = widget.configurations.placeholder?.replaceAll(r'"', '\\"');
+      // get current block attributes applied to the first line even if it
+      // is empty
+      final blockAttributesWithoutContent =
+          doc.root.children.firstOrNull?.toDelta().first.attributes;
+      // check if it has code block attribute to add '//' to give to the users
+      // the feeling of this is really a block of code
+      final isCodeBlock =
+          blockAttributesWithoutContent?.containsKey('code-block') ?? false;
+      // we add the block attributes at the same time as the placeholder to allow the editor to display them without removing
+      // the placeholder (this is really awkward when everything is empty)
+      final blockAttrInsertion = blockAttributesWithoutContent == null
+          ? ''
+          : ',{"insert":"\\n","attributes":${jsonEncode(blockAttributesWithoutContent)}}';
       doc = Document.fromJson(
         jsonDecode(
-          '[{"attributes":{"placeholder":true},"insert":"$raw\\n"}]',
+          '[{"attributes":{"placeholder":true},"insert":"${isCodeBlock ? '// ' : ''}$raw${blockAttrInsertion.isEmpty ? '\\n' : ''}"}$blockAttrInsertion]',
         ),
       );
     }

diff --git a/lib/src/editor/widgets/text/text_line.dart b/lib/src/editor/widgets/text/text_line.dart
@@ -130,6 +130,11 @@ class _TextLineState extends State<TextLine> {
     super.dispose();
   }
 
+  /// Check if this line contains the placeholder attribute
+  bool get isPlaceholderLine =>
+      widget.line.toDelta().first.attributes?.containsKey('placeholder') ??
+      false;
+
   @override
   Widget build(BuildContext context) {
     assert(debugCheckHasMediaQuery(context));
@@ -326,6 +331,16 @@ class _TextLineState extends State<TextLine> {
 
     textStyle = _applyCustomAttributes(textStyle, widget.line.style.attributes);
 
+    if (isPlaceholderLine) {
+      final oldStyle = textStyle;
+      textStyle = defaultStyles.placeHolder!.style;
+      textStyle = textStyle.merge(oldStyle.copyWith(
+        color: textStyle.color,
+        backgroundColor: textStyle.backgroundColor,
+        background: textStyle.background,
+      ));
+    }
+
     return textStyle;
   }
 
@@ -408,7 +423,8 @@ class _TextLineState extends State<TextLine> {
         !widget.readOnly &&
         !widget.line.style.attributes.containsKey('code-block') &&
         !widget.line.style.attributes.containsKey('placeholder') &&
-        !kIsWeb) {
+        !kIsWeb &&
+        !isPlaceholderLine) {
       final service = SpellCheckerServiceProvider.instance;
       final spellcheckedSpans = service.checkSpelling(textNode.value);
       if (spellcheckedSpans != null && spellcheckedSpans.isNotEmpty) {