From 47f50a6cc5a9a3fe881d847fa8c027cec84a04a0 Mon Sep 17 00:00:00 2001
From: Novout <novout@hotmail.com>
Date: Mon, 29 Nov 2021 22:52:06 -0300
Subject: [PATCH] refactor(editor): unique input element

---
 .../default/EditorEntityDefaultInput.vue      | 328 ------------------
 ...ue => EditorEntityDefaultInputPopover.vue} |  52 +--
 ...vue => EditorEntityDefaultInputSelect.vue} |   0
 ...ltShow.vue => EditorEntityDefautInput.vue} |  16 +-
 .../main/render/EditorBaseRenderDefault.vue   |  41 +--
 src/store/context.ts                          |   7 +-
 6 files changed, 35 insertions(+), 409 deletions(-)
 delete mode 100644 src/components/editor/entity/default/EditorEntityDefaultInput.vue
 rename src/components/editor/entity/default/{EditorEntityDefaultShowPopover.vue => EditorEntityDefaultInputPopover.vue} (95%)
 rename src/components/editor/entity/default/{EditorEntityDefaultShowSelect.vue => EditorEntityDefaultInputSelect.vue} (100%)
 rename src/components/editor/entity/default/{EditorEntityDefaultShow.vue => EditorEntityDefautInput.vue} (97%)

diff --git a/src/components/editor/entity/default/EditorEntityDefaultInput.vue b/src/components/editor/entity/default/EditorEntityDefaultInput.vue
deleted file mode 100644
index c3b726317..000000000
--- a/src/components/editor/entity/default/EditorEntityDefaultInput.vue
+++ /dev/null
@@ -1,328 +0,0 @@
-<template>
-  <section class="flex justify-center items-center w-full relative">
-    <section class="absolute z-50 left-40 -top-60">
-      <EditorCommands v-if="commands" />
-    </section>
-    <textarea
-      id="main-input-define"
-      ref="input"
-      v-model="cmp"
-      data-min-rows="1"
-      class="
-        resize-none
-        indent-15
-        overflow-hidden
-        w-full
-        rounded-none
-        border-none
-        bg-theme-editor-input-background
-        hover:bg-theme-editor-input-background-hover
-        active:bg-theme-editor-input-background-active
-        text-theme-editor-input-text
-        placeholder-theme-editor-input-placeholder
-        hover:theme-editor-input-text-hover
-        active:theme-editor-input-text-active
-        px-4
-        md:px-14
-      "
-      :style="{ minHeight: '50px' }"
-      :class="[
-        EDITOR.styles.input.fontSize,
-        EDITOR.styles.input.fontFamily,
-        EDITOR.styles.input.fontColor,
-      ]"
-      :placeholder="
-        t('editor.text.placeholder.base', {
-          prefix: EDITOR.configuration.commands.prefix,
-        })
-      "
-      @input="onInput"
-      @keypress.enter.prevent="enterHandler"
-      @keydown="onKeyboard"
-      @paste="pasteHandler"
-      @focus="onSet"
-      @click.prevent.stop="onClick"
-    />
-  </section>
-</template>
-
-<script setup lang="ts">
-  import { Entity } from '@/types/context'
-  import { useEntity } from '@/use/entity'
-  import { useFormat } from '@/use/format'
-  import { useInput } from '@/use/input'
-  import { useScroll } from '@/use/scroll'
-  import useEmitter from '@/use/emitter'
-  import { ref, computed, watch, onMounted } from 'vue'
-  import { useI18n } from 'vue-i18n'
-  import { useToast } from 'vue-toastification'
-  import { useEnv } from '@/use/env'
-  import { useFactory } from '@/use/factory'
-  import { useEditorStore } from '@/store/editor'
-  import { useContextStore } from '@/store/context'
-  import usePlugin from '@/use/plugin/core'
-  import { onStartTyping } from '@vueuse/core'
-
-  const toast = useToast()
-  const { t } = useI18n()
-  const emitter = useEmitter()
-  const entity = useEntity()
-  const format = useFormat()
-  const env = useEnv()
-  const factory = useFactory()
-  const plugin = usePlugin()
-  const EDITOR = useEditorStore()
-  const CONTEXT = useContextStore()
-
-  const props = defineProps({
-    modelValue: String,
-  })
-
-  const emit = defineEmits(['update:modelValue', 'submit', 'enter', 'reset'])
-
-  const type = ref<string>('paragraph')
-  const input = ref(null as any)
-  const paste = ref<boolean>(false)
-  const commands = ref<boolean>(false)
-
-  onStartTyping(() => {
-    if (!input.value.active) input.value.focus()
-  })
-
-  onMounted(() => {
-    useInput().prevent(input.value)
-
-    emitter.on('entity-input-focus', () => {
-      input.value?.focus()
-
-      useScroll().force('#edit')
-    })
-
-    emitter.on('entity-input-raw', (raw: string) => {
-      cmp.value = raw + cmp.value
-    })
-
-    emitter.on('entity-input-force-enter', () => {
-      enterHandler()
-    })
-  })
-
-  const cmp = computed({
-    get() {
-      return props.modelValue
-    },
-    set(val: any) {
-      emit('update:modelValue', val)
-    },
-  })
-
-  watch(cmp, (_cmp: string) => {
-    plugin.emit('plugin-input-watch-initial', {
-      data: _cmp,
-      index: CONTEXT.entities.length,
-    })
-
-    if (paste.value) {
-      cmp.value = ''
-
-      paste.value = false
-    }
-
-    if (
-      _cmp.startsWith(EDITOR.configuration.commands.prefix) &&
-      _cmp.length <= EDITOR.configuration.commands.prefix.length + 1
-    ) {
-      commands.value = true
-    } else {
-      commands.value = false
-    }
-
-    if (
-      entity.utils().entry(_cmp, EDITOR.configuration.commands.paragraph.prefix)
-    ) {
-      type.value = 'paragraph'
-      cmp.value = ''
-      input.value.placeholder = t('editor.text.placeholder.paragraph')
-      return
-    }
-
-    if (
-      entity
-        .utils()
-        .entry(_cmp, EDITOR.configuration.commands.headingTwo.prefix)
-    ) {
-      type.value = 'heading-two'
-      cmp.value = ''
-      input.value.placeholder = t('editor.text.placeholder.headingtwo')
-      return
-    }
-
-    if (
-      entity
-        .utils()
-        .entry(_cmp, EDITOR.configuration.commands.headingThree.prefix)
-    ) {
-      type.value = 'heading-three'
-      cmp.value = ''
-      input.value.placeholder = t('editor.text.placeholder.headingthree')
-      return
-    }
-
-    if (
-      entity.utils().entry(_cmp, EDITOR.configuration.commands.pageBreak.prefix)
-    ) {
-      cmp.value = ''
-
-      const content = {
-        type: 'page-break',
-        raw: env.pageBreak(),
-        createdAt: format.actually(),
-        updatedAt: format.actually(),
-      } as Entity
-
-      type.value = 'paragraph'
-      input.value.placeholder = t('editor.text.placeholder.paragraph')
-
-      emit('enter', content)
-
-      return
-    }
-
-    if (
-      entity.utils().entry(_cmp, EDITOR.configuration.commands.lineBreak.prefix)
-    ) {
-      cmp.value = ''
-
-      const content = {
-        type: 'line-break',
-        raw: env.lineBreak(),
-        createdAt: format.actually(),
-        updatedAt: format.actually(),
-      } as Entity
-
-      type.value = 'paragraph'
-      input.value.placeholder = t('editor.text.placeholder.paragraph')
-
-      emit('enter', content)
-
-      return
-    }
-
-    if (
-      entity.utils().entry(_cmp, EDITOR.configuration.commands.image.prefix)
-    ) {
-      cmp.value = ''
-
-      factory.simulate().file(
-        (content: Entity) => {
-          type.value = 'paragraph'
-          input.value.placeholder = t('editor.text.placeholder.paragraph')
-
-          emit('enter', content)
-
-          return
-        },
-        () => {
-          toast.error(t('toast.generics.error'))
-        }
-      )
-    }
-
-    const dialogue =
-      EDITOR.configuration.commands.prefix +
-      EDITOR.configuration.commands.dialogue.prefix
-
-    if (_cmp.includes(dialogue)) {
-      const offset = _cmp.indexOf(dialogue) + dialogue.length
-      const sub = _cmp.replace(
-        dialogue,
-        EDITOR.configuration.commands.dialogue.value
-      )
-
-      input.value.setSelectionRange(offset, offset)
-
-      cmp.value = sub
-      return
-    }
-
-    plugin.emit('plugin-input-watch-last', _cmp)
-  })
-
-  const enterHandler = () => {
-    if (!cmp.value) return
-
-    const content = {
-      type: type.value,
-      raw: props.modelValue,
-      createdAt: format.actually(),
-      updatedAt: format.actually(),
-    } as Entity
-
-    type.value = 'paragraph'
-    input.value.placeholder = t('editor.text.placeholder.paragraph')
-
-    emit('enter', content)
-  }
-
-  const onSet = () => {
-    emitter.emit('entity-close', {}, { all: true })
-  }
-
-  const pasteHandler = (event: any) => {
-    let _plugin_quantity = 0
-    if (cmp.value !== '') return
-
-    paste.value = true
-    emit('reset')
-
-    const data = useInput().pasteText(event)
-
-    data.forEach(async (raw: string) => {
-      const normalize = raw.replace(/\s+/g, ' ').trim()
-
-      if (!normalize) return
-
-      const content = {
-        type: type.value,
-        raw: normalize,
-        createdAt: format.actually(),
-        updatedAt: format.actually(),
-      } as Entity
-
-      _plugin_quantity++
-
-      await emit('enter', content)
-    })
-
-    plugin.emit('plugin-entity-paste-in-page', {
-      index: CONTEXT.entities.length,
-      quantity: _plugin_quantity,
-    })
-  }
-
-  const onKeyboard = async (e: KeyboardEvent) => {
-    if (e.ctrlKey) {
-      // future vhtml implement
-      return
-    }
-
-    if (e.key === 'ArrowUp') {
-      emitter.emit('entity-open-last')
-      return
-    }
-
-    if ((e.key === 'Delete' || e.key === 'Backspace') && cmp.value === '') {
-      e.preventDefault()
-      e.stopPropagation()
-
-      emitter.emit('entity-open-last')
-      return
-    }
-  }
-
-  const onInput = () => {}
-
-  const onClick = () => {
-    emitter.emit('entity-focus')
-  }
-</script>
diff --git a/src/components/editor/entity/default/EditorEntityDefaultShowPopover.vue b/src/components/editor/entity/default/EditorEntityDefaultInputPopover.vue
similarity index 95%
rename from src/components/editor/entity/default/EditorEntityDefaultShowPopover.vue
rename to src/components/editor/entity/default/EditorEntityDefaultInputPopover.vue
index ecc5a1e50..99950b274 100644
--- a/src/components/editor/entity/default/EditorEntityDefaultShowPopover.vue
+++ b/src/components/editor/entity/default/EditorEntityDefaultInputPopover.vue
@@ -37,7 +37,7 @@
       ]"
       @mouseleave="onReset"
     >
-      <EditorEntityDefaultShowSelect
+      <EditorEntityDefautInputSelect
         @click.prevent.stop="onNewEntity('paragraph')"
       >
         <svg
@@ -55,8 +55,8 @@
             fill="currentColor"
           ></path>
         </svg>
-      </EditorEntityDefaultShowSelect>
-      <EditorEntityDefaultShowSelect
+      </EditorEntityDefautInputSelect>
+      <EditorEntityDefautInputSelect
         @click.prevent.stop="onNewEntity('heading-two')"
       >
         <svg
@@ -80,8 +80,8 @@
             ></path>
           </g>
         </svg>
-      </EditorEntityDefaultShowSelect>
-      <EditorEntityDefaultShowSelect
+      </EditorEntityDefautInputSelect>
+      <EditorEntityDefautInputSelect
         @click.prevent.stop="onNewEntity('heading-three')"
       >
         <svg
@@ -105,8 +105,8 @@
             ></path>
           </g>
         </svg>
-      </EditorEntityDefaultShowSelect>
-      <EditorEntityDefaultShowSelect
+      </EditorEntityDefautInputSelect>
+      <EditorEntityDefautInputSelect
         @click.prevent.stop="onNewEntity('page-break')"
       >
         <svg
@@ -124,8 +124,8 @@
             fill="currentColor"
           ></path>
         </svg>
-      </EditorEntityDefaultShowSelect>
-      <EditorEntityDefaultShowSelect
+      </EditorEntityDefautInputSelect>
+      <EditorEntityDefautInputSelect
         @click.prevent.stop="onNewEntity('line-break')"
       >
         <svg
@@ -143,7 +143,7 @@
             fill="currentColor"
           ></path>
         </svg>
-      </EditorEntityDefaultShowSelect>
+      </EditorEntityDefautInputSelect>
     </section>
     <HeroIcon @mouseenter.prevent.stop="onNewEntityWrapper">
       <svg
@@ -178,7 +178,7 @@
           : 'bottom-6',
       ]"
     >
-      <EditorEntityDefaultShowSelect
+      <EditorEntityDefautInputSelect
         @click.prevent.stop="onSwitchEntity('paragraph')"
       >
         <svg
@@ -196,8 +196,8 @@
             fill="currentColor"
           ></path>
         </svg>
-      </EditorEntityDefaultShowSelect>
-      <EditorEntityDefaultShowSelect
+      </EditorEntityDefautInputSelect>
+      <EditorEntityDefautInputSelect
         @click.prevent.stop="onSwitchEntity('heading-two')"
       >
         <svg
@@ -221,8 +221,8 @@
             ></path>
           </g>
         </svg>
-      </EditorEntityDefaultShowSelect>
-      <EditorEntityDefaultShowSelect
+      </EditorEntityDefautInputSelect>
+      <EditorEntityDefautInputSelect
         @click.prevent.stop="onSwitchEntity('heading-three')"
       >
         <svg
@@ -246,8 +246,8 @@
             ></path>
           </g>
         </svg>
-      </EditorEntityDefaultShowSelect>
-      <EditorEntityDefaultShowSelect
+      </EditorEntityDefautInputSelect>
+      <EditorEntityDefautInputSelect
         @click.prevent.stop="onSwitchEntity('page-break')"
       >
         <svg
@@ -265,8 +265,8 @@
             fill="currentColor"
           ></path>
         </svg>
-      </EditorEntityDefaultShowSelect>
-      <EditorEntityDefaultShowSelect
+      </EditorEntityDefautInputSelect>
+      <EditorEntityDefautInputSelect
         @click.prevent.stop="onSwitchEntity('line-break')"
       >
         <svg
@@ -284,7 +284,7 @@
             fill="currentColor"
           ></path>
         </svg>
-      </EditorEntityDefaultShowSelect>
+      </EditorEntityDefautInputSelect>
     </section>
     <HeroIcon
       class="wb-icon"
@@ -315,7 +315,7 @@
         border-theme-border-1
       "
     >
-      <EditorEntityDefaultShowSelect @click.prevent.stop="onUpEntity">
+      <EditorEntityDefautInputSelect @click.prevent.stop="onUpEntity">
         <template #icon>
           <HeroIcon>
             <svg
@@ -333,8 +333,8 @@
           </HeroIcon>
         </template>
         <p>{{ t('editor.aside.entity.up') }}</p>
-      </EditorEntityDefaultShowSelect>
-      <EditorEntityDefaultShowSelect @click.prevent.stop="onDownEntity">
+      </EditorEntityDefautInputSelect>
+      <EditorEntityDefautInputSelect @click.prevent.stop="onDownEntity">
         <template #icon>
           <HeroIcon>
             <svg
@@ -352,8 +352,8 @@
           </HeroIcon>
         </template>
         <p>{{ t('editor.aside.entity.down') }}</p>
-      </EditorEntityDefaultShowSelect>
-      <EditorEntityDefaultShowSelect @click.prevent.stop="onDeleteEntity">
+      </EditorEntityDefautInputSelect>
+      <EditorEntityDefautInputSelect @click.prevent.stop="onDeleteEntity">
         <template #icon>
           <HeroIcon>
             <svg
@@ -371,7 +371,7 @@
           </HeroIcon>
         </template>
         <p>{{ t('editor.aside.entity.delete') }}</p>
-      </EditorEntityDefaultShowSelect>
+      </EditorEntityDefautInputSelect>
     </section>
     <HeroIcon
       v-if="
diff --git a/src/components/editor/entity/default/EditorEntityDefaultShowSelect.vue b/src/components/editor/entity/default/EditorEntityDefaultInputSelect.vue
similarity index 100%
rename from src/components/editor/entity/default/EditorEntityDefaultShowSelect.vue
rename to src/components/editor/entity/default/EditorEntityDefaultInputSelect.vue
diff --git a/src/components/editor/entity/default/EditorEntityDefaultShow.vue b/src/components/editor/entity/default/EditorEntityDefautInput.vue
similarity index 97%
rename from src/components/editor/entity/default/EditorEntityDefaultShow.vue
rename to src/components/editor/entity/default/EditorEntityDefautInput.vue
index b2246e777..7f7b04aa3 100644
--- a/src/components/editor/entity/default/EditorEntityDefaultShow.vue
+++ b/src/components/editor/entity/default/EditorEntityDefautInput.vue
@@ -8,7 +8,7 @@
     @mouseleave="hover = false"
     @click="onClickInEntity"
   >
-    <EditorEntityDefaultShowPopover
+    <EditorEntityDefautInputPopover
       v-if="hover && props.entity.type !== 'heading-one'"
       :entity="props.entity"
       :input="input"
@@ -463,20 +463,6 @@
 
     let initial = false
 
-    // actually entity is last
-    if (_index.value + 1 === CONTEXT.entities.length) {
-      if (start) {
-        emitter.emit('entity-input-raw', data.value)
-        setData('')
-      } else {
-        setData(data.value.replace(posRaw, ''))
-        emitter.emit('entity-input-raw', posRaw)
-      }
-
-      emitter.emit('entity-input-focus')
-      return
-    }
-
     if (end) {
       CONTEXT.newInPagePosEdit({
         entity: props.entity,
diff --git a/src/components/editor/main/render/EditorBaseRenderDefault.vue b/src/components/editor/main/render/EditorBaseRenderDefault.vue
index 1078d9355..8e14123c6 100644
--- a/src/components/editor/main/render/EditorBaseRenderDefault.vue
+++ b/src/components/editor/main/render/EditorBaseRenderDefault.vue
@@ -4,60 +4,23 @@
     :class="[project.isBlankProject() ? 'pt-28' : '']"
     class="flex flex-col w-full min-h-editor overflow-y-auto overflow-x-hidden"
   >
-    <EditorEntityDefaultShow
+    <EditorEntityDefautInput
       v-for="(entity, index) in entities"
       :id="`entity-${String(index)}`"
       :key="index"
       :entity="entity"
     />
-    <EditorEntityDefaultInput
-      v-if="PROJECT.name !== env.projectEmpty()"
-      v-model="entry"
-      @enter="enterListener"
-      @reset="resetListener"
-    />
   </section>
 </template>
 
 <script lang="ts" setup>
-  import { ref, nextTick, computed } from 'vue'
-  import { Entity } from '@/types/context'
-  import { useScroll } from '@/use/scroll'
-  import { useEnv } from '@/use/env'
+  import { computed } from 'vue'
   import { useProject } from '@/use/project'
   import { useContextStore } from '@/store/context'
-  import { useProjectStore } from '@/store/project'
-  import usePlugin from '@/use/plugin/core'
 
   const CONTEXT = useContextStore()
-  const PROJECT = useProjectStore()
 
   const project = useProject()
-  const plugin = usePlugin()
-  const env = useEnv()
-
-  const entry = ref<string>('')
 
   const entities = computed(() => CONTEXT.entities)
-
-  const enterListener = async (content: Entity) => {
-    CONTEXT.addInPage(content)
-
-    await nextTick
-
-    useScroll().force('#edit')
-
-    resetListener()
-
-    await nextTick
-
-    plugin.emit('plugin-entity-create', {
-      data: content.raw,
-      index: CONTEXT.entities.indexOf(content),
-    })
-  }
-
-  const resetListener = () => {
-    entry.value = ''
-  }
 </script>
diff --git a/src/store/context.ts b/src/store/context.ts
index 9e21dda41..c340c37ca 100644
--- a/src/store/context.ts
+++ b/src/store/context.ts
@@ -93,7 +93,12 @@ export const useContextStore = defineStore('context', {
 
       const index = this.entities.indexOf(entity)
 
-      if (index === -1 || entity.type === 'heading-one') return
+      if (
+        index === -1 ||
+        entity.type === 'heading-one' ||
+        this.entities.length <= 1
+      )
+        return
 
       this.entities = this.entities.filter(
         (item: Entity) => this.entities.indexOf(item) !== index