From a44228bbaee51044520ef5854fee419c11f95e2c Mon Sep 17 00:00:00 2001
From: Novout <novout@hotmail.com>
Date: Thu, 25 Nov 2021 23:00:32 -0300
Subject: [PATCH] fix(editor): commands visible in top

---
 .../editor/absolute/EditorCommands.vue        | 22 +++++++++++++++++++
 src/components/editor/main/EditorBase.vue     |  2 +-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/components/editor/absolute/EditorCommands.vue b/src/components/editor/absolute/EditorCommands.vue
index 95c4020d1..202dd2381 100644
--- a/src/components/editor/absolute/EditorCommands.vue
+++ b/src/components/editor/absolute/EditorCommands.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+    ref="target"
     v-motion
     :initial="{ opacity: 0, y: 50 }"
     :enter="{
@@ -11,6 +12,7 @@
       },
     }"
     class="
+      relative
       transform
       duration-700
       w-60
@@ -22,6 +24,7 @@
       transition
       shadow-2xl
     "
+    :class="[visible ? '' : 'top-60']"
   >
     <EditorAbsoluteCommands
       :title="t('editor.aside.commands.contents[0].title')"
@@ -250,9 +253,28 @@
 
 <script setup lang="ts">
   import { useEditorStore } from '@/store/editor'
+  import { useIntersectionObserver } from '@vueuse/core'
   import { useI18n } from 'vue-i18n'
+  import { ref } from 'vue'
 
   const EDITOR = useEditorStore()
 
   const { t } = useI18n()
+
+  const target = ref<any>(null)
+  const visible = ref<boolean>(true)
+  const block = ref<boolean>(false)
+
+  useIntersectionObserver(
+    target,
+    ([{ isIntersecting }]) => {
+      if (block.value) return
+
+      visible.value = isIntersecting
+      block.value = true
+    },
+    {
+      threshold: 1,
+    }
+  )
 </script>
diff --git a/src/components/editor/main/EditorBase.vue b/src/components/editor/main/EditorBase.vue
index 5d6e42ff5..7c0fe7fc4 100644
--- a/src/components/editor/main/EditorBase.vue
+++ b/src/components/editor/main/EditorBase.vue
@@ -24,7 +24,7 @@
       class="
         flex flex-col
         w-full
-        max-h-screen
+        min-h-editor
         overflow-y-auto overflow-x-hidden
       "
     >