From 53e4eed9dc679e0e74481cbb927dac6a5d5f8483 Mon Sep 17 00:00:00 2001
From: Novout <novout@hotmail.com>
Date: Tue, 21 Sep 2021 01:51:56 -0300
Subject: [PATCH] feat(editor): update content

---
 .eslintrc.js                            |  1 +
 src/components/editor/EditorBase.vue    |  1 +
 src/components/editor/text/TextShow.vue | 21 ++++++++++++++++++---
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 56a90856f..2b4341520 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -13,6 +13,7 @@ module.exports = {
     "vue/no-mutating-props": 0,
     "vue/valid-v-on": 0,
     "vue/valid-v-for": 0,
+    "vue/require-default-prop": 0,
     "@typescript-eslint/no-empty-function": 0,
     "no-undef": 0
   },
diff --git a/src/components/editor/EditorBase.vue b/src/components/editor/EditorBase.vue
index 0084802e8..aaa163af7 100644
--- a/src/components/editor/EditorBase.vue
+++ b/src/components/editor/EditorBase.vue
@@ -28,6 +28,7 @@
           :key="page.id"
           :type="page.type"
           :position="page.id"
+          :raw="page.raw"
         >
           {{ page.raw }}
         </TextShow>
diff --git a/src/components/editor/text/TextShow.vue b/src/components/editor/text/TextShow.vue
index 9fe6d24d9..90a3f12e5 100644
--- a/src/components/editor/text/TextShow.vue
+++ b/src/components/editor/text/TextShow.vue
@@ -3,8 +3,9 @@
     class="flex w-full hover:shadow-winset dark:hover:shadow-binset"
     @mouseenter="hover = true"
     @mouseleave="hover = false"
+    @click.prevent="edit = true"
   >
-    <TextShowPopover v-if="hover" :position="position" />
+    <TextShowPopover v-if="hover && !edit" :position="position" />
     <p
       class="w-full break-all"
       :class="[
@@ -65,21 +66,35 @@
           : '',
       ]"
     >
-      <slot />
+      <slot v-if="!edit" />
+      <input
+        v-else
+        id="editInput"
+        class="w-full bg-transparent"
+        @keypress.enter="edit = false"
+      />
     </p>
   </section>
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue'
+  import { ref, watch, nextTick } from 'vue'
   import { useStore } from 'vuex'
 
   const props = defineProps({
     type: String,
     position: Number,
+    raw: String,
   })
 
   const store = useStore()
 
   const hover = ref(false)
+  const edit = ref(false)
+
+  watch(edit, async (_edit) => {
+    await nextTick
+    if (_edit)
+      (document.querySelector('#editInput') as HTMLInputElement).focus()
+  })
 </script>