fix(editor): default inserts

Author: Novout

packages/better-write-app/src/components/page/editor/entity/default/blocks/EditorEntityDefaultHeading.vue

@@ -4,6 +4,7 @@
       class="flex items-center justify-center text-center w-full cursor-text"
     >
       <h2
+        ref="__INPUT__"
         :contenteditable="true"
         :spellcheck="true"
         class="font-bold"
@@ -29,8 +30,9 @@
 <script setup lang="ts">
   import { useContextStore } from '@/store/context'
   import useEmitter from '@/use/emitter'
+  import { useRaw } from '@/use/raw'
   import { Entity } from 'better-write-types'
-  import { computed, nextTick } from 'vue'
+  import { computed, nextTick, onMounted, ref } from 'vue'
 
   const props = defineProps<{
     entity: Entity
@@ -39,9 +41,39 @@
   const CONTEXT = useContextStore()
 
   const emitter = useEmitter()
+  const raw = useRaw()
+
+  const __INPUT__ = ref()
 
   const _index = computed(() => CONTEXT.entities.indexOf(props.entity))
 
+  onMounted(() => {
+    emitter.on(
+      'entity-text-focus',
+      async ({ target, position, positionOffset }) => {
+        if (CONTEXT.entities[target] === props.entity) {
+          switch (position) {
+            case 'start':
+              raw.v2().caret().set(__INPUT__.value, 0)
+              break
+            case 'end':
+              raw.v2().caret().setEnd(__INPUT__.value)
+              break
+            case 'offset':
+              raw
+                .v2()
+                .caret()
+                .set(__INPUT__.value, positionOffset as number)
+              break
+            case 'auto':
+              __INPUT__.value?.focus()
+              break
+          }
+        }
+      }
+    )
+  })
+
   const onEnter = async () => {
     CONTEXT.newInPagePosEdit({
       entity: props.entity,

packages/better-write-app/src/components/page/editor/entity/default/blocks/EditorEntityDefaultText.vue

@@ -6,16 +6,13 @@
     <div
       ref="__INPUT__"
       :class="!isAttached ? 'indent-lg' : ''"
+      :style="{
+        paddingBottom: last ? '5rem' : '',
+      }"
       class="editable whitespace-pre-line text-justify text-theme-editor-entity-text hover:text-theme-editor-entity-text-hover active:text-theme-editor-entity-text-active"
       :spellcheck="true"
       :contenteditable="true"
-      :data-placeholder="
-        focused
-          ? t('editor.text.placeholder.base', {
-              prefix: EDITOR.configuration.commands.prefix,
-            })
-          : ''
-      "
+      :data-placeholder="focused ? t('editor.text.placeholder.base') : ''"
       @input="onInput"
       @keydown="onKeyboard"
       @keypress.enter="onEnter"
@@ -63,6 +60,7 @@
   const storage = useStorage()
 
   const _index = computed(() => CONTEXT.entities.indexOf(props.entity))
+  const last = computed(() => _index.value === CONTEXT.entities.length - 1)
 
   const { focused } = useFocus(__INPUT__)
 

packages/better-write-app/src/use/listener.ts

@@ -1,36 +1,103 @@
 import { useAbsoluteStore } from '@/store/absolute'
+import { useContextStore } from '@/store/context'
+import { useEditorStore } from '@/store/editor'
 import { useEventListener } from '@vueuse/core'
-import { ProjectObject } from 'better-write-types'
+import { EntityType, ProjectObject } from 'better-write-types'
+import { nextTick } from 'vue'
 import { useI18n } from 'vue-i18n'
+import useEmitter from './emitter'
+import { useFactory } from './factory'
 import { useProject } from './project'
+import { useStorage } from './storage/storage'
 import { useUtils } from './utils'
 
 export const useListener = () => {
   const ABSOLUTE = useAbsoluteStore()
+  const CONTEXT = useContextStore()
+  const EDITOR = useEditorStore()
 
   const project = useProject()
+  const factory = useFactory()
 
   const utils = useUtils()
   const { t } = useI18n()
+  const storage = useStorage()
+  const emitter = useEmitter()
 
   const keyboard = () => {
     const start = () => {
       useEventListener('keydown', cb)
     }
 
-    const cb = (e: KeyboardEvent) => {
+    const cb = async (e: KeyboardEvent) => {
+      // finder
       if (e.ctrlKey && (e.key === 'f' || e.key === 'F')) {
         e.preventDefault()
         e.stopPropagation()
 
         ABSOLUTE.shortcuts.finder = !ABSOLUTE.shortcuts.finder
+
+        return
       }
 
+      // switcher
       if (e.ctrlKey && (e.key === 'h' || e.key === 'H')) {
         e.preventDefault()
         e.stopPropagation()
 
         ABSOLUTE.shortcuts.switcher = !ABSOLUTE.shortcuts.switcher
+
+        return
+      }
+
+      // commands
+      if (e.ctrlKey) {
+        const index = EDITOR.actives.entity.index
+
+        // text attached
+        if (
+          e.key === '1' ||
+          e.key === '2' ||
+          e.key === '3' ||
+          e.key === '6' ||
+          e.key === '7'
+        ) {
+          e.preventDefault()
+          e.stopPropagation()
+
+          await storage.normalize()
+
+          const value = index + 1
+
+          let type: EntityType = 'paragraph'
+
+          switch (e.key) {
+            case '1':
+              type = 'paragraph'
+              break
+            case '2':
+              type = 'heading-two'
+              break
+            case '3':
+              type = 'heading-three'
+              break
+            case '6':
+              type = 'checkbox'
+              break
+            case '7':
+              type = 'list'
+              break
+          }
+
+          CONTEXT.insert(factory.entity().create(type), value)
+
+          await nextTick
+
+          emitter.emit('entity-text-focus', {
+            target: value,
+            position: 'auto',
+          })
+        }
       }
     }
 

packages/better-write-localisation/src/en-US/editor.ts

@@ -139,7 +139,7 @@ export default {
   },
   text: {
     placeholder: {
-      base: `Insert '{prefix}' to display a list of commands.`,
+      base: `Press or Right-Click to display the options menu.`,
       paragraph: 'Paragraph',
       headingone: 'H1',
       headingtwo: 'H2',

packages/better-write-localisation/src/pt-BR/editor.ts

@@ -136,7 +136,7 @@ export default {
   },
   text: {
     placeholder: {
-      base: `Insira '{prefix}' para exibir a lista de comandos.`,
+      base: `Pressione ou clique com o botão direito para exibir o menu de opções.`,
       paragraph: 'Parágrafo',
       headingone: 'H1',
       headingtwo: 'H2',