feat(editor): inline insert commands

Novout · Oct 19, 2021 · 5d3177a · 5d3177a
1 parent b82113d
commit 5d3177a
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 13 deletions.
diff --git a/src/components/editor/entity/EditorEntityInput.vue b/src/components/editor/entity/EditorEntityInput.vue
@@ -1,8 +1,5 @@
 <template>
   <section class="flex justify-center items-center w-full relative">
-    <section class="absolute z-max left-40 -top-60">
-      <EditorCommands v-if="store.state.absolute.commands" />
-    </section>
     <textarea
       id="main-input-define"
       ref="input"

diff --git a/src/components/editor/entity/EditorEntityShow.vue b/src/components/editor/entity/EditorEntityShow.vue
@@ -75,6 +75,7 @@
       v-else
       ref="input"
       v-model="data"
+      :placeholder="t('editor.text.placeholder.base')"
       :class="[
         props.entity.type === 'paragraph' ? 'text-justify indent-15' : '',
         props.entity.type === 'paragraph' ? style.paragraph.fontSize : '',
@@ -133,7 +134,6 @@
   import { useStore } from 'vuex'
   import { useRaw } from '@/use/raw'
   import useEmitter from '@/use/emitter'
-  import { useScroll } from '@/use/scroll'
   import { useInput } from '@/use/input'
   import { useEnv } from '@/use/env'
   import { useEntity } from '@/use/entity'
@@ -142,10 +142,7 @@
   import { useI18n } from 'vue-i18n'
   import { ContextStatePageContent } from '@/types/context'
   import { EntityShowEditOptions } from '@/types/entity'
-  import {
-    VueEmitterEntityOpen,
-    VueEmitterEntityClose,
-  } from '../../../types/emitter'
+  import { VueEmitterEntityOpen, VueEmitterEntityClose } from '@/types/emitter'
 
   const props = defineProps({
     entity: {
@@ -162,7 +159,6 @@
   const factory = useFactory()
   const { t } = useI18n()
   const raw = useRaw()
-  const scroll = useScroll()
 
   const hover = ref<boolean>(false)
   const focus = ref<boolean>(false)
@@ -203,11 +199,63 @@
     }
   })
 
-  watch(data, (_data: string) => {
-    if (_data === env.emptyLine()) data.value = ''
+  watch(data, async (_data: string) => {
+    if (_data === env.emptyLine()) {
+      data.value = ''
+    }
 
     data.value = data.value.replace(/\n/g, '')
 
+    if (data.value.startsWith('/') && data.value.length <= 2) {
+      store.commit('absolute/commands')
+    } else if (store.state.absolute.commands) {
+      store.commit('absolute/commands')
+    }
+
+    if (entity.utils().entry(_data, 'h2')) {
+      data.value = ''
+
+      store.commit('context/newInExistentEntity', {
+        old: props.entity,
+        new: factory.entity().create('heading-two'),
+      })
+    }
+
+    if (entity.utils().entry(_data, 'h3')) {
+      data.value = ''
+
+      store.commit('context/newInExistentEntity', {
+        old: props.entity,
+        new: factory.entity().create('heading-three'),
+      })
+    }
+
+    if (entity.utils().entry(_data, 'bp')) {
+      data.value = ''
+
+      store.commit('context/newInExistentEntity', {
+        old: props.entity,
+        new: factory.entity().create('page-break'),
+      })
+
+      await nextTick
+
+      emitter.emit('entity-not-mutate', props.entity)
+    }
+
+    if (entity.utils().entry(_data, 'lb')) {
+      data.value = ''
+
+      store.commit('context/newInExistentEntity', {
+        old: props.entity,
+        new: factory.entity().create('line-break'),
+      })
+
+      await nextTick
+
+      emitter.emit('entity-not-mutate', props.entity)
+    }
+
     if (entity.utils().entry(_data, 'im')) {
       data.value = ''
 

diff --git a/src/use/factory.ts b/src/use/factory.ts
@@ -1,12 +1,40 @@
 import { useEnv } from './env'
-import { ContextStatePageContent } from '@/types/context'
+import { ContextStatePageContent, EntityType } from '@/types/context'
 import { useFormat } from './format'
 export const useFactory = () => {
   const env = useEnv()
   const format = useFormat()
 
   const entity = () => {
-    const create = () => {}
+    const create = (type: EntityType): ContextStatePageContent => {
+      if (type === 'line-break') {
+        return {
+          type,
+          raw: env.lineBreak(),
+          createdAt: format.actually(),
+          updatedAt: format.actually(),
+          external: {},
+        }
+      }
+
+      if (type === 'page-break') {
+        return {
+          type,
+          raw: env.pageBreak(),
+          createdAt: format.actually(),
+          updatedAt: format.actually(),
+          external: {},
+        }
+      }
+
+      return {
+        type,
+        raw: env.emptyLine(),
+        createdAt: format.actually(),
+        updatedAt: format.actually(),
+        external: {},
+      }
+    }
 
     return { create }
   }