From 76ae6dedc6b452f3684ec3b9c6d1a1875013125a Mon Sep 17 00:00:00 2001
From: singerdmx <singerdmx@gmail.com>
Date: Sat, 20 Feb 2021 01:51:32 -0800
Subject: [PATCH] Add placeholder (hint text) functionality

---
 app/assets/sample_data.json     | 474 --------------------------------
 lib/widgets/default_styles.dart |   9 +
 lib/widgets/editor.dart         |   3 +
 lib/widgets/raw_editor.dart     |   7 +
 4 files changed, 19 insertions(+), 474 deletions(-)

diff --git a/app/assets/sample_data.json b/app/assets/sample_data.json
index 15cc2f2a..6c8060ec 100644
--- a/app/assets/sample_data.json
+++ b/app/assets/sample_data.json
@@ -1,478 +1,4 @@
 [
-   {
-      "insert":"Flutter Quill"
-   },
-   {
-      "attributes":{
-         "header":1
-      },
-      "insert":"\n"
-   },
-   {
-      "insert": {
-         "image": "https://user-images.githubusercontent.com/122956/72955931-ccc07900-3d52-11ea-89b1-d468a6e2aa2b.png"
-      },
-      "attributes":{
-         "width":"230",
-         "style":"display: block; margin: auto;"
-      }
-   },
-   {
-      "insert":"\nRich text editor for Flutter"
-   },
-   {
-      "attributes":{
-         "header":2
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"Quill component for Flutter"
-   },
-   {
-      "attributes":{
-         "header":3
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"This "
-   },
-   {
-      "attributes":{
-         "italic":true,
-         "background":"transparent"
-      },
-      "insert":"library"
-   },
-   {
-      "insert":" supports "
-   },
-   {
-      "attributes":{
-         "bold":true,
-         "background":"#ebd6ff"
-      },
-      "insert":"mobile"
-   },
-   {
-      "insert":" platform "
-   },
-   {
-      "attributes":{
-         "underline":true,
-         "bold":true,
-         "color":"#e60000"
-      },
-      "insert":"only"
-   },
-   {
-      "attributes":{
-         "color":"rgba(0, 0, 0, 0.847)"
-      },
-      "insert":" and "
-   },
-   {
-      "attributes":{
-         "strike":true,
-         "color":"black"
-      },
-      "insert":"web"
-   },
-   {
-      "insert":" is not supported.\nYou are welcome to use "
-   },
-   {
-      "attributes":{
-         "link":"https://bulletjournal.us/home/index.html"
-      },
-      "insert":"Bullet Journal"
-   },
-   {
-      "insert":":\nTrack personal and group journals (ToDo, Note, Ledger) from multiple views with timely reminders"
-   },
-   {
-      "attributes":{
-         "list":"ordered"
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"Share your tasks and notes with teammates, and see changes as they happen in real-time, across all devices"
-   },
-   {
-      "attributes":{
-         "list":"ordered"
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"Check out what you and your teammates are working on each day"
-   },
-   {
-      "attributes":{
-         "list":"ordered"
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"\nSplitting bills with friends can never be easier."
-   },
-   {
-      "attributes":{
-         "list":"bullet"
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"Start creating a group and invite your friends to join."
-   },
-   {
-      "attributes":{
-         "list":"bullet"
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"Create a BuJo of Ledger type to see expense or balance summary."
-   },
-   {
-      "attributes":{
-         "list":"bullet"
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"\nAttach one or multiple labels to tasks, notes or transactions. Later you can track them just using the label(s)."
-   },
-   {
-      "attributes":{
-         "blockquote":true
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"\nvar BuJo = 'Bullet' + 'Journal'"
-   },
-   {
-      "attributes":{
-         "code-block":true
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"\nStart tracking in your browser"
-   },
-   {
-      "attributes":{
-         "indent":1
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"Stop the timer on your phone"
-   },
-   {
-      "attributes":{
-         "indent":1
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"All your time entries are synced"
-   },
-   {
-      "attributes":{
-         "indent":2
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"between the phone apps"
-   },
-   {
-      "attributes":{
-         "indent":2
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"and the website."
-   },
-   {
-      "attributes":{
-         "indent":3
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"\n"
-   },
-   {
-      "insert":"\nCenter Align"
-   },
-   {
-      "attributes":{
-         "align":"center"
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"Right Align"
-   },
-   {
-      "attributes":{
-         "align":"right"
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"Justify Align"
-   },
-   {
-      "attributes":{
-         "align":"justify"
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"Have trouble finding things? "
-   },
-   {
-      "attributes":{
-         "list":"ordered"
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"Just type in the search bar"
-   },
-   {
-      "attributes":{
-         "indent":1,
-         "list":"ordered"
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"and easily find contents"
-   },
-   {
-      "attributes":{
-         "indent":2,
-         "list":"ordered"
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"across projects or folders."
-   },
-   {
-      "attributes":{
-         "indent":2,
-         "list":"ordered"
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"It matches text in your note or task."
-   },
-   {
-      "attributes":{
-         "indent":1,
-         "list":"ordered"
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"Enable reminders so that you will get notified by"
-   },
-   {
-      "attributes":{
-         "list":"ordered"
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"email"
-   },
-   {
-      "attributes":{
-         "indent":1,
-         "list":"ordered"
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"message on your phone"
-   },
-   {
-      "attributes":{
-         "indent":1,
-         "list":"ordered"
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"popup on the web site"
-   },
-   {
-      "attributes":{
-         "indent":1,
-         "list":"ordered"
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"Create a BuJo serving as project or folder"
-   },
-   {
-      "attributes":{
-         "list":"bullet"
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"Organize your"
-   },
-   {
-      "attributes":{
-         "indent":1,
-         "list":"bullet"
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"tasks"
-   },
-   {
-      "attributes":{
-         "indent":2,
-         "list":"bullet"
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"notes"
-   },
-   {
-      "attributes":{
-         "indent":2,
-         "list":"bullet"
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"transactions"
-   },
-   {
-      "attributes":{
-         "indent":2,
-         "list":"bullet"
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"under BuJo "
-   },
-   {
-      "attributes":{
-         "indent":3,
-         "list":"bullet"
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"See them in Calendar"
-   },
-   {
-      "attributes":{
-         "list":"bullet"
-      },
-      "insert":"\n"
-   },
-   {
-      "insert":"or hierarchical view"
-   },
-   {
-      "attributes":{
-         "indent":1,
-         "list":"bullet"
-      },
-      "insert":"\n"
-   },
-   {
-      "insert": "this is a check list"
-   },
-   {
-      "attributes": {
-         "list": "checked"
-      },
-      "insert": "\n"
-   },
-   {
-      "insert": "this is a uncheck list"
-   },
-   {
-      "attributes": {
-         "list": "unchecked"
-      },
-      "insert": "\n"
-   },
-   {
-      "insert": "Font "
-   },
-   {
-      "attributes": {
-         "font": "sans-serif"
-      },
-      "insert": "Sans Serif"
-   },
-   {
-      "insert": " "
-   },
-   {
-      "attributes": {
-         "font": "serif"
-      },
-      "insert": "Serif"
-   },
-   {
-      "insert": " "
-   },
-   {
-      "attributes": {
-         "font": "monospace"
-      },
-      "insert": "Monospace"
-   },
-   {
-      "insert": " Size "
-   },
-   {
-      "attributes": {
-         "size": "small"
-      },
-      "insert": "Small"
-   },
-   {
-      "insert": " "
-   },
-   {
-      "attributes": {
-         "size": "large"
-      },
-      "insert": "Large"
-   },
-   {
-      "insert": " "
-   },
-   {
-      "attributes": {
-         "size": "huge"
-      },
-      "insert": "Huge"
-   },
    {
       "insert": "\n"
    }
diff --git a/lib/widgets/default_styles.dart b/lib/widgets/default_styles.dart
index cef0011b..d18f5e3e 100644
--- a/lib/widgets/default_styles.dart
+++ b/lib/widgets/default_styles.dart
@@ -54,6 +54,7 @@ class DefaultStyles {
   final TextStyle sizeLarge; // 'large'
   final TextStyle sizeHuge; // 'huge'
   final TextStyle link;
+  final DefaultTextBlockStyle placeHolder;
   final DefaultTextBlockStyle lists;
   final DefaultTextBlockStyle quote;
   final DefaultTextBlockStyle code;
@@ -70,6 +71,7 @@ class DefaultStyles {
       this.underline,
       this.strikeThrough,
       this.link,
+      this.placeHolder,
       this.lists,
       this.quote,
       this.code,
@@ -144,6 +146,12 @@ class DefaultStyles {
           color: themeData.accentColor,
           decoration: TextDecoration.underline,
         ),
+        placeHolder: DefaultTextBlockStyle(
+            defaultTextStyle.style.copyWith(
+              fontSize: 20.0,
+              height: 1.5,
+              color: Colors.grey.withOpacity(0.6),
+            ), Tuple2(0.0, 0.0), Tuple2(0.0, 0.0), null),
         lists: DefaultTextBlockStyle(
             baseStyle, baseSpacing, Tuple2(0.0, 6.0), null),
         quote: DefaultTextBlockStyle(
@@ -188,6 +196,7 @@ class DefaultStyles {
         underline: other.underline ?? this.underline,
         strikeThrough: other.strikeThrough ?? this.strikeThrough,
         link: other.link ?? this.link,
+        placeHolder: other.placeHolder ?? this.placeHolder,
         lists: other.lists ?? this.lists,
         quote: other.quote ?? this.quote,
         code: other.code ?? this.code,
diff --git a/lib/widgets/editor.dart b/lib/widgets/editor.dart
index 018ef0b2..3320b87c 100644
--- a/lib/widgets/editor.dart
+++ b/lib/widgets/editor.dart
@@ -359,6 +359,9 @@ class _QuillEditorSelectionGestureDetectorBuilder
   }
 
   bool _onTapping(TapUpDetails details) {
+    if (_state.widget.controller.document.isEmpty()) {
+      return false;
+    }
     TextPosition pos =
         getRenderEditor().getPositionForOffset(details.globalPosition);
     containerNode.ChildQuery result =
diff --git a/lib/widgets/raw_editor.dart b/lib/widgets/raw_editor.dart
index 891bff86..0fa9cb3f 100644
--- a/lib/widgets/raw_editor.dart
+++ b/lib/widgets/raw_editor.dart
@@ -504,6 +504,9 @@ class RawEditorState extends EditorState
     super.build(context);
 
     Document _doc = widget.controller.document;
+    if (_doc.isEmpty() && !widget.focusNode.hasFocus) {
+      _doc = Document()..insert(0, 'Place Holder');
+    }
 
     Widget child = CompositedTransformTarget(
       link: _toolbarLayerLink,
@@ -696,6 +699,10 @@ class RawEditorState extends EditorState
         ? defaultStyles.merge(parentStyles)
         : defaultStyles;
 
+    if (widget.controller.document.isEmpty()) {
+      _styles.merge(DefaultStyles(paragraph: defaultStyles.placeHolder));
+    }
+
     if (widget.customStyles != null) {
       _styles = _styles.merge(widget.customStyles);
     }