feat(app): improve renderer focus effects

Author: zzhenryquezz

packages/app/modules/editor/components/NodeEditorBlock.vue

@@ -55,7 +55,6 @@ onKeyStroke(
     'Enter',
     (e) => {
         e.preventDefault()
-        // focusBlock(-1)
     },
     { target: content }
 )

packages/app/modules/editor/components/NodeEditorBlockComponent.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import MBlock from './NodeEditorBlock.vue'
-import { useContext } from '../composable/context'
 import { createComponentObject } from '@plugins/gc'
 import { NodeWithId } from '../types/node'
 import { useNodeEditor } from '../composable/node-editor'

packages/app/modules/editor/components/NodeEditorRenderer.vue

@@ -125,29 +125,32 @@ watch(() => props.modelValue, loadComponent, {
 </script>
 
 <template>
-    <transition
-        enter-active-class="transition duration-200"
-        leave-active-class="transition duration-200"
-        enter-from-class="absolute opacity-0 translate-x-2"
-        leave-to-class="absolute opacity-0 translate-x-2"
-    >
+    <div class="relative">
         <div v-if="loading" class="text-t-secondary text-sm">Loading...</div>
 
         <div v-else-if="error" class="text-danger text-sm">
             {{ error.message }}
         </div>
 
-        <component :is="componentData" v-else-if="textHaveVariable && !editMode" @click="onFocus" />
-
-        <div
-            v-else
-            ref="el"
-            contenteditable
-            class="outline-none"
-            :autofocus="textHaveVariable"
-            @input="onInput"
-            @blur="onBlur"
-            v-html="innerModel"
-        ></div>
-    </transition>
+        <template v-else>
+            <component
+                :is="componentData"
+                v-if="textHaveVariable"
+                class="absolute left-0 top-0"
+                :class="[textHaveVariable && editMode ? 'opacity-0' : '']"
+            />
+
+            <div
+                ref="el"
+                contenteditable
+                class="outline-none"
+                :class="[textHaveVariable && !editMode ? 'opacity-0' : '']"
+                @input="onInput"
+                @blur="onBlur"
+                @focus="editMode = true"
+                @click="editMode = true"
+                v-html="innerModel"
+            />
+        </template>
+    </div>
 </template>