chore(editor): emitter options rewrite

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

@@ -6,7 +6,7 @@
     >
       <div class="w-5" />
       <InputBoolean v-model="select" :specific="true" />
-      <EditorEntityDefaultInput :entity="entity" />
+      <EditorEntityDefaultText :is-attached="true" :entity="props.entity" />
     </section>
   </EditorEntityDefaultContainer>
 </template>

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

@@ -50,6 +50,9 @@
 
     await nextTick
 
-    emitter.emit('entity-text-focus', _index.value + 1)
+    emitter.emit('entity-text-focus', {
+      target: _index.value + 1,
+      position: 'auto',
+    })
   }
 </script>

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

@@ -10,7 +10,7 @@
         class="h-1 w-1 p-1 bg-theme-background-3 rounded-full"
         :class="[last ? 'mt-2.5' : '']"
       ></div>
-      <EditorEntityDefaultInput :entity="props.entity" />
+      <EditorEntityDefaultText :is-attached="true" :entity="props.entity" />
     </section>
   </EditorEntityDefaultContainer>
 </template>

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

@@ -1,6 +1,6 @@
 <template>
   <EditorEntityDefaultContainer :entity="props.entity">
-    <EditorEntityDefaultText :entity="props.entity" />
+    <EditorEntityDefaultText :is-attached="false" :entity="props.entity" />
   </EditorEntityDefaultContainer>
 </template>
 

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

@@ -5,7 +5,8 @@
   <div class="relative w-full">
     <p
       ref="__INPUT__"
-      class="editable indent-8 whitespace-pre-line text-justify text-theme-editor-entity-text hover:text-theme-editor-entity-text-hover active:text-theme-editor-entity-text-active"
+      :class="!isAttached ? 'indent-8' : ''"
+      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="
@@ -17,6 +18,7 @@
       "
       @input="onInput"
       @keydown="onKeyboard"
+      @keypress.enter="onEnter"
       v-html="raw.v2().purge().editor(props.entity)"
     />
   </div>
@@ -30,7 +32,7 @@
   import { useFocus } from '@vueuse/core'
   import { useI18n } from 'vue-i18n'
   import { useContextStore } from '@/store/context'
-  import { Entity, ID } from 'better-write-types'
+  import { Entity } from 'better-write-types'
   import { useRaw } from '@/use/raw'
   import { useAbsoluteStore } from '@/store/absolute'
   import { useProject } from '@/use/project'
@@ -39,6 +41,7 @@
 
   const props = defineProps<{
     entity: Entity
+    isAttached: boolean
   }>()
 
   const EDITOR = useEditorStore()
@@ -71,6 +74,7 @@
       }
     }
 
+    /* save block */
     if (!_focused) {
       block.save(_index.value, __INPUT__.value.innerHTML)
 
@@ -79,11 +83,30 @@
   })
 
   onMounted(() => {
-    emitter.on('entity-text-focus', (index: ID<number>) => {
-      if (CONTEXT.entities[index] === props.entity) {
-        __INPUT__.value?.focus()
+    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
+          }
+        }
       }
-    })
+    )
 
     emitter.on('entity-text-force-save', () => {
       if (isSalvageable.value && __INPUT__.value && __INPUT__.value.innerHTML) {
@@ -154,10 +177,6 @@
         e.stopPropagation()
 
         entity.base().onDelete(props.entity, _index.value)
-
-        await nextTick
-
-        emitter.emit('entity-reset')
       }
 
       // italic entity
@@ -205,12 +224,12 @@
         e.preventDefault()
         e.stopPropagation()
 
-        entity.base().onUpCursor(props.entity)
+        // entity.base().onUpCursor(props.entity)
       } else if (e.key === 'ArrowDown') {
         e.preventDefault()
         e.stopPropagation()
 
-        entity.base().onDownCursor(props.entity)
+        // entity.base().onDownCursor(props.entity)
       }
 
       return
@@ -231,19 +250,6 @@
       if (entity.utils().isFixed(_index.value - 1)) return
 
       entity.base().onDelete(props.entity, _index.value)
-
-      await nextTick
-
-      emitter.emit('entity-reset')
-
-      await nextTick
-
-      emitter.emit('entity-open', {
-        entity: props.entity,
-        up: true,
-        cursor: true,
-        keyboard: true,
-      })
     } else if (e.key === 'ArrowUp') {
       // to top
       if (start) {
@@ -252,32 +258,19 @@
           entity.utils().isFixed(_index.value - 1)
         )
           return
-
-        emitter.emit('entity-edit-save')
-
-        await nextTick
-
-        emitter.emit('entity-open', {
-          entity: props.entity,
-          up: true,
-          keyboard: true,
-        })
       }
     } else if (e.key === 'ArrowDown') {
       // to bottom
       if (end) {
         if (entity.utils().isFixed(_index.value + 1)) return
-
-        emitter.emit('entity-edit-save')
-
-        await nextTick
-
-        emitter.emit('entity-open', {
-          entity: props.entity,
-          up: false,
-          keyboard: true,
-        })
       }
     }
   }
+
+  const onEnter = (e: KeyboardEvent) => {
+    if (props.isAttached) {
+      e.preventDefault()
+      e.stopPropagation()
+    }
+  }
 </script>

packages/better-write-app/src/components/page/editor/entity/default/options/EditorEntityDefaultOptions.vue

@@ -209,6 +209,7 @@
   import useEmitter from '@/use/emitter'
   import { useFactory } from '@/use/factory'
   import { usePlugin } from 'better-write-plugin-core'
+  import { useEntity } from '@/use/entity'
 
   const EDITOR = useEditorStore()
   const ABSOLUTE = useAbsoluteStore()
@@ -217,6 +218,7 @@
   const entity = computed<Entity>(
     () => CONTEXT.entities[EDITOR.actives.entity.index]
   )
+  const _index = computed(() => CONTEXT.entities.indexOf(entity.value))
   const options = ref<HTMLElement | null>(null)
   const visible = ref<boolean>(false)
   const block = ref<boolean>(false)
@@ -225,6 +227,7 @@
   const emitter = useEmitter()
   const plugin = usePlugin()
   const factory = useFactory()
+  const ent = useEntity()
 
   onClickOutside(options as any, () => onClose())
 
@@ -272,8 +275,8 @@
     ABSOLUTE.entity.menu = false
   }
 
-  const onDeleteEntity = () => {
-    CONTEXT.removeInPage(entity.value)
+  const onDeleteEntity = async () => {
+    ent.base().onDelete(entity.value, _index.value)
   }
 
   const onUpEntity = () => {
@@ -295,17 +298,18 @@
   }
 
   const onNewEntity = async (type: EntityType) => {
-    emitter.emit('entity-not-mutate', entity.value)
-
-    await nextTick
-
     CONTEXT.newInPageByOption({
       entity: entity.value,
       type,
     })
 
     await nextTick
 
+    emitter.emit('entity-text-focus', {
+      position: 'end',
+      target: _index.value + 1,
+    })
+
     plugin.emit('plugin-entity-create', {
       data: entity.value.raw,
       index: CONTEXT.entities.indexOf(entity.value),

packages/better-write-app/src/components/page/editor/entity/default/options/EditorEntityDefaultOptionsItem.vue

@@ -27,7 +27,6 @@
 
 <script setup lang="ts">
   import { useAbsoluteStore } from '@/store/absolute'
-  import useEmitter from '@/use/emitter'
   import { ref, nextTick } from 'vue'
 
   const props = defineProps({
@@ -46,16 +45,13 @@
   const ABSOLUTE = useAbsoluteStore()
 
   const emit = defineEmits(['action'])
-  const emitter = useEmitter()
   const hover = ref<boolean>(false)
 
   const onAction = async () => {
     if (props.off) return
 
     emit('action')
 
-    emitter.emit('entity-reset')
-
     await nextTick
 
     onClose()

packages/better-write-app/src/main.ts

@@ -9,7 +9,7 @@ import { MotionPlugin as motion } from '@vueuse/motion'
 import tooltip from 'floating-vue'
 import toast, { POSITION } from 'vue-toastification'
 import mitt from 'mitt'
-import { VueEmitter } from 'better-write-types'
+import { Events } from 'better-write-types'
 import { useEnv } from './use/env'
 
 import router from './router'
@@ -29,9 +29,9 @@ const app = createApp(App)
 export const head = createHead()
 export const store = createPinia()
 export const core = createPluginCore()
-export const emitter = mitt()
+export const emitter = mitt<Events>()
 
-app.config.globalProperties.emitter = emitter as VueEmitter
+app.config.globalProperties.emitter = emitter
 
 app.use(router)
 app.use(store as any)

packages/better-write-app/src/store/context.ts

@@ -190,7 +190,7 @@ export const useContextStore = defineStore('context', {
       this.entities = useUtils().array().insert(this.entities, index, insert)
     },
     newInPageByOption({ entity, type }: ContextActionNewInPage) {
-      if (!entity || !entity.raw) return
+      if (!entity) return
 
       const index = this.entities.indexOf(entity as Entity)
 

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

@@ -7,12 +7,13 @@ import { useLocalStorage } from '@/use/storage/local'
 import { useEventListener, useFullscreen } from '@vueuse/core'
 import { useHead } from '@vueuse/head'
 import { usePlugin } from 'better-write-plugin-core'
-import { computed, onMounted, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { onBeforeRouteLeave, useRouter } from 'vue-router'
 import { useListener } from './listener'
 import { s } from '@/use/storage/supabase'
 import { useAuthStore } from '@/store/auth'
+import { useStorage } from './storage/storage'
 
 export const useEditor = () => {
   const PROJECT = useProjectStore()
@@ -28,6 +29,7 @@ export const useEditor = () => {
   const { t } = useI18n()
   const { toggle } = useFullscreen()
   const router = useRouter()
+  const storage = useStorage()
 
   const init = () => {
     if (!AUTH.account.user) router.push('/')
@@ -36,6 +38,10 @@ export const useEditor = () => {
       project.onLoadProject()
     })
 
+    onBeforeUnmount(async () => {
+      await storage.normalize()
+    })
+
     // tracking all auto-save cases
     watch(
       PROJECT.$state,

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

@@ -1,10 +1,11 @@
+import { Events } from 'better-write-types'
+import { Emitter } from 'mitt'
 import { getCurrentInstance, ComponentInternalInstance } from 'vue'
-import { VueEmitter } from 'better-write-types'
 
 export default function useEmitter() {
   const internalInstance = getCurrentInstance()
   const emitter = (internalInstance as ComponentInternalInstance).appContext
     .config.globalProperties.emitter
 
-  return emitter as VueEmitter
+  return emitter as Emitter<Events>
 }