From ad4a7aae98feb1820c3c207266202bb75a720ab2 Mon Sep 17 00:00:00 2001
From: Bago <github@bago.org>
Date: Wed, 1 Mar 2023 15:38:06 +0100
Subject: [PATCH] Refactor selectable/hoverable editable item UI to workaround
 Chrome issue

Fix #678
---
 src/css/style_mosaico.less         | 34 ++++++++++++++----------------
 src/css/style_mosaico_content.less | 14 ++++++------
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/css/style_mosaico.less b/src/css/style_mosaico.less
index e435a7cde..5a0db4579 100644
--- a/src/css/style_mosaico.less
+++ b/src/css/style_mosaico.less
@@ -134,7 +134,7 @@
     display: block;
     position: absolute;
     // z-index: 0;
-    top: -3px; bottom: -3px;
+    top: -2px; bottom: -2px;
     left: -2px - @size;
     right: -2px - @size;
 
@@ -147,6 +147,7 @@
     // Use outline for hover effects
     outline: 1px solid transparent;
     // outline-offset: -1px;
+    opacity: 1;
 
     // otherwise this catches clicks and prevent correct selection of underlying text
     pointer-events: none;
@@ -176,27 +177,24 @@
 
 }
 
-.makeEditableHover(@size, @editableSelector, @borderElementSelector: ~':before') {
-  @{editableSelector}@{borderElementSelector} {
-    content: "";
-    display: block;
-    position: absolute;
-    // z-index: 0;
-    top: -3px; bottom: -3px;
-    left: -7px; right: -7px;
-    border: 1px dashed transparent;
+// Use this on the parent element and pass the editableSelector to the element where you applied .makeSelectable
+.makeSelectableHover(@editableSelector, @selectedSelector: ~'.selected', @borderElementSelector: ~':before') {
+  &:hover @{editableSelector}@{borderElementSelector} {
+    // border-color: @mosaico-outline-color;
+    outline-style: dashed;
+    outline-color: @mosaico-outline-color;
     opacity: 0.3;
-
-    // otherwise this catches clicks and prevent correct selection of underlying text
-    pointer-events: none;
   }
-
-  &:hover @{editableSelector}@{borderElementSelector} {
-    border-color: @mosaico-outline-color;
+  &:hover @{editableSelector}@{selectedSelector}@{borderElementSelector} {
+    outline-style: solid;
+    opacity: 1;
   }
 
-  &:hover @{editableSelector}:hover@{borderElementSelector} {
-    border-color: transparent;
+  &:hover @{editableSelector}:not(@{selectedSelector}):hover@{borderElementSelector} {
+    // border-color: transparent;
+    // outline-color: transparent;
+    outline-style: solid;
+    opacity: 1;
   }
 }
 
diff --git a/src/css/style_mosaico_content.less b/src/css/style_mosaico_content.less
index 6f8892e60..e2252d6cb 100644
--- a/src/css/style_mosaico_content.less
+++ b/src/css/style_mosaico_content.less
@@ -423,19 +423,21 @@
     // blocks
     .editable {
       .makeSelectable(10px, ~'.selected', 0, ~' .mo-blockselectionhelper');
-
-      .makeEditableHover(10px, ~'.mce-content-body');
-      .makeEditableHover(10px, ~'.selectable-img', ~' .mo-imgselectionhelper:before');
-
     }
+    
     // texts
     .mce-content-body {
-      .makeSelectable(5px, ~'.selecteditem', 0);
+      .makeSelectable(4px, ~'.selecteditem', 0, ~':before');
       cursor: text;
     }
     // images
     .selectable-img {
-      .makeSelectable(5px, ~'.selecteditem', 0, ~' .mo-imgselectionhelper:after');
+      .makeSelectable(4px, ~'.selecteditem', 0, ~' .mo-imgselectionhelper:before');
+    }
+
+    .editable {
+      .makeSelectableHover(~'.mce-content-body', ~'.selecteditem', ~':before');
+      .makeSelectableHover(~'.selectable-img', ~'.selecteditem', ~' .mo-imgselectionhelper:before');
     }
   }