From 7ac91b7b317d3a20b91b561f983391206922b90f Mon Sep 17 00:00:00 2001
From: Burak Civan <burakcivan22@gmail.com>
Date: Thu, 28 Jul 2022 12:02:37 +0300
Subject: [PATCH] quill editor styling

---
 public/css/app.css                             | 18 +++++++++++++-----
 .../css/third_party/vue-html-editor_custom.css | 14 +++++++++++---
 .../js/components/AkauntingHtmlEditor.vue      |  6 +++++-
 3 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/public/css/app.css b/public/css/app.css
index 25e2f7537..53ed8afdf 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -94,9 +94,9 @@
   border-right: 0.5rem solid transparent;
 }
 .ql-container .ql-tooltip:hover {
-  display: -webkit-box !important;
-  display: -ms-flexbox !important;
-  display: flex !important;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
 }
 .ql-tooltip .ql-preview {
   width: 100%;
@@ -285,6 +285,14 @@
 .ql-snow .ql-tooltip a.ql-action::after {
     display: none;
 }
+
+.ql-snow .ql-tooltip input[type=text]::-webkit-input-placeholder {
+  color: transparent;
+}
+
+.ql-snow .ql-hidden {
+  display: none !important;
+}
 .dropzone {
   position: relative;
   display: -webkit-box;
@@ -47478,9 +47486,9 @@ body{
   background-color: rgb(85 88 139 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-blue-500:hover{
+.hover\:bg-blue-700:hover{
   --tw-bg-opacity: 1;
-  background-color: rgb(0 110 166 / var(--tw-bg-opacity));
+  background-color: rgb(0 83 125 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-purple-700:hover{
diff --git a/public/css/third_party/vue-html-editor_custom.css b/public/css/third_party/vue-html-editor_custom.css
index b8a67afbb..e8ad299c1 100644
--- a/public/css/third_party/vue-html-editor_custom.css
+++ b/public/css/third_party/vue-html-editor_custom.css
@@ -87,9 +87,9 @@
   border-right: 0.5rem solid transparent;
 }
 .ql-container .ql-tooltip:hover {
-  display: -webkit-box !important;
-  display: -ms-flexbox !important;
-  display: flex !important;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
 }
 .ql-tooltip .ql-preview {
   width: 100%;
@@ -277,4 +277,12 @@
 
 .ql-snow .ql-tooltip a.ql-action::after {
     display: none;
+}
+
+.ql-snow .ql-tooltip input[type=text]::-webkit-input-placeholder {
+  color: transparent;
+}
+
+.ql-snow .ql-hidden {
+  display: none !important;
 }
\ No newline at end of file
diff --git a/resources/assets/js/components/AkauntingHtmlEditor.vue b/resources/assets/js/components/AkauntingHtmlEditor.vue
index b2116bc41..7dc26aa4c 100644
--- a/resources/assets/js/components/AkauntingHtmlEditor.vue
+++ b/resources/assets/js/components/AkauntingHtmlEditor.vue
@@ -80,11 +80,15 @@ export default {
             }
         },
 
-        content (newVal) {
+        content (newVal) {            
             // #337y1z3 This issue reason <p> tag broken email template
             newVal = newVal.replace(/(<p[^>]+?>|<p>|<\/p>)/img, "");
 
             this.$emit('input', newVal);
+
+            document.querySelectorAll('.ql-tooltip').forEach((tooltip) => {
+                tooltip.querySelector('input').focus();
+            });
         },
     },
  }