From e704e6fa045500b8fa889597a55d45b826182c84 Mon Sep 17 00:00:00 2001
From: Alex Turchyn <lexfox777@gmail.com>
Date: Wed, 25 Oct 2023 01:08:39 +0300
Subject: [PATCH] show edit icon on hover the outer box

---
 app/javascript/template_builder/contenteditable.vue | 2 +-
 app/javascript/template_builder/field.vue           | 2 +-
 app/javascript/template_builder/field_submitter.vue | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/javascript/template_builder/contenteditable.vue b/app/javascript/template_builder/contenteditable.vue
index e36b12ca..2809e540 100644
--- a/app/javascript/template_builder/contenteditable.vue
+++ b/app/javascript/template_builder/contenteditable.vue
@@ -24,7 +24,7 @@
       *
     </span>
     <IconPencil
-      class="cursor-pointer flex-none opacity-0 group-hover/contenteditable:opacity-100 align-middle peer-focus:hidden"
+      class="cursor-pointer flex-none opacity-0 group-hover/contenteditable-container:opacity-100 group-hover/contenteditable:opacity-100 align-middle peer-focus:hidden"
       :style="iconInline ? {} : { right: -(1.1 * iconWidth) + 'px' }"
       title="Edit"
       :class="{ 'ml-1': !withRequired, 'absolute': !iconInline, 'inline align-bottom': iconInline }"
diff --git a/app/javascript/template_builder/field.vue b/app/javascript/template_builder/field.vue
index 402020df..7712f9f3 100644
--- a/app/javascript/template_builder/field.vue
+++ b/app/javascript/template_builder/field.vue
@@ -5,7 +5,7 @@
     <div
       class="border border-base-300 rounded rounded-tr-none relative group"
     >
-      <div class="flex items-center justify-between relative">
+      <div class="flex items-center justify-between relative group/contenteditable-container">
         <div
           class="absolute top-0 bottom-0 right-0 left-0 cursor-pointer"
           @click="scrollToFirstArea"
diff --git a/app/javascript/template_builder/field_submitter.vue b/app/javascript/template_builder/field_submitter.vue
index 57ca3708..b305b4b8 100644
--- a/app/javascript/template_builder/field_submitter.vue
+++ b/app/javascript/template_builder/field_submitter.vue
@@ -14,7 +14,7 @@
     <label
       v-else
       tabindex="0"
-      class="cursor-pointer rounded-md p-2 border border-base-300 w-full flex justify-between"
+      class="cursor-pointer group/contenteditable-container rounded-md p-2 border border-base-300 w-full flex justify-between"
     >
       <div class="flex items-center space-x-2">
         <span