From f85c8d4dfb3ead3352c6ba51404eab9734dd8598 Mon Sep 17 00:00:00 2001
From: Stefanie S <sts@s-blu.de>
Date: Tue, 21 Apr 2020 21:02:16 +0200
Subject: [PATCH] feat(quill): add image support

---
 .../createNewNote/createNewNote.component.ts       | 14 ++++++--------
 src/app/components/quill/quill.component.scss      | 11 +++++++++--
 src/app/components/quill/quill.component.ts        |  6 +++---
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/app/components/createNewNote/createNewNote.component.ts b/src/app/components/createNewNote/createNewNote.component.ts
index 43cfb3e8..f5a57caf 100644
--- a/src/app/components/createNewNote/createNewNote.component.ts
+++ b/src/app/components/createNewNote/createNewNote.component.ts
@@ -17,14 +17,15 @@ export class CreateNewNoteComponent implements OnInit, OnChanges {
   quillModules = {
     toolbar: [
       ['bold', 'italic', 'underline', 'strike'],
-      [{ list: 'ordered' }, { list: 'bullet' }],
-      [{ indent: '-1' }, { indent: '+1' }],
+      [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
+      ['blockquote', 'code-block', 'link', 'image'], // add's image support
+      ['clean'],
     ],
   };
-  
+
   quillStyle = {
     'font-family': 'Roboto, "Helvetica Neue", sans-serif',
-    'font-size': '14px'
+    'font-size': '14px',
   };
 
   private translatedContextNames = {
@@ -32,10 +33,7 @@ export class CreateNewNoteComponent implements OnInit, OnChanges {
     document: 'document',
   };
 
-  constructor(
-    private translocoService: TranslocoService,
-    private formBuilder: FormBuilder
-  ) {
+  constructor(private translocoService: TranslocoService, private formBuilder: FormBuilder) {
     this.createNewForm = this.formBuilder.group({
       type: 'todo',
       color: '',
diff --git a/src/app/components/quill/quill.component.scss b/src/app/components/quill/quill.component.scss
index a0c12c2f..af0fd6de 100644
--- a/src/app/components/quill/quill.component.scss
+++ b/src/app/components/quill/quill.component.scss
@@ -23,8 +23,15 @@
   position: absolute;
   top: 5px;
   z-index: 10;
-  width: 636px;
+  width: 660px;
   border: none;
+  padding: 8px 0;
+  margin-left: -12px;
+}
+
+::ng-deep .ql-snow.ql-toolbar button,
+.ql-snow .ql-toolbar button {
+  width: 26px;
 }
 
 ::ng-deep .readonly .ql-toolbar {
@@ -38,5 +45,5 @@
 }
 
 .introduction {
-  color: #333333
+  color: #333333;
 }
diff --git a/src/app/components/quill/quill.component.ts b/src/app/components/quill/quill.component.ts
index b80a0bde..656f6903 100644
--- a/src/app/components/quill/quill.component.ts
+++ b/src/app/components/quill/quill.component.ts
@@ -24,10 +24,10 @@ export class QuillComponent implements OnInit {
     toolbar: [
       [{ header: [1, 2, 3, 4, 5, 6, false] }],
       ['bold', 'italic', 'underline', 'strike'],
-      ['blockquote', 'code-block'],
-      [{ list: 'ordered' }, { list: 'bullet' }],
-      [{ indent: '-1' }, { indent: '+1' }],
       [{ align: [] }],
+      [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
+      ['blockquote', 'code-block', 'link', 'image'], // add's image support
+      ['clean'],
     ],
   };
   styles = {