feat(editor): insert shortcuts

packages/better-write-app/src/components/page/editor/project/preferences/EditorProjectPreferencesAside.vue

@@ -1,9 +1,9 @@
 <template>
   <aside
-    class="flex wb-text items-center justify-between flex-col w-full sm:w-40 shadow h-full"
+    class="flex wb-text items-center justify-between flex-col w-full sm:w-40 shadow-xl h-full"
   >
     <div
-      class="flex transition-colors flex-1 gap-2 justify-between px-3 items-center w-full cursor-pointer hover:bg-theme-background-opacity-1"
+      class="flex shadow transition-colors flex-1 gap-2 justify-between px-3 items-center w-full cursor-pointer hover:bg-theme-background-opacity-1"
       @click="emit('section', 0)"
     >
       <div>
@@ -12,7 +12,7 @@
       <p>{{ t('editor.preferences.project.title') }}</p>
     </div>
     <div
-      class="flex transition-colors flex-1 gap-2 justify-between px-3 items-center w-full cursor-pointer hover:bg-theme-background-opacity-1"
+      class="flex shadow transition-colors flex-1 gap-2 justify-between px-3 items-center w-full cursor-pointer hover:bg-theme-background-opacity-1"
       @click="emit('section', 1)"
     >
       <div>
@@ -21,7 +21,7 @@
       <p>{{ t('editor.preferences.configuration.title') }}</p>
     </div>
     <div
-      class="flex transition-colors flex-1 gap-2 justify-between px-3 items-center w-full cursor-pointer hover:bg-theme-background-opacity-1"
+      class="flex shadow transition-colors flex-1 gap-2 justify-between px-3 items-center w-full cursor-pointer hover:bg-theme-background-opacity-1"
       @click="emit('section', 2)"
     >
       <div>
@@ -30,7 +30,7 @@
       <p>{{ t('editor.preferences.styles.title') }}</p>
     </div>
     <div
-      class="flex transition-colors flex-1 gap-2 justify-between px-3 items-center w-full cursor-pointer hover:bg-theme-background-opacity-1"
+      class="flex shadow transition-colors flex-1 gap-2 justify-between px-3 items-center w-full cursor-pointer hover:bg-theme-background-opacity-1"
       @click="emit('section', 3)"
     >
       <div>

packages/better-write-app/src/components/page/editor/project/preferences/container/EditorProjectPreferencesContainerKeyboard.vue

@@ -61,11 +61,30 @@
         shortcut="CTRL + 9"
       />
     </div>
+    <PreferencesContainerTitle>
+      {{ t('editor.preferences.shortcuts.inserts.title') }}
+    </PreferencesContainerTitle>
+    <p>{{ t('editor.preferences.shortcuts.inserts.description') }}</p>
+    <div class="flex flex-col gap-2 w-full px-2">
+      <EditorProjectPreferencesKeyboardInsertAdd />
+      <draggable :list="PROJECT.shortcuts.inserts" item-key="id">
+        <template #item="{ element, index }">
+          <EditorProjectPreferencesKeyboardInsertItem
+            :key="index"
+            :insert="element"
+          />
+        </template>
+      </draggable>
+    </div>
   </EditorProjectPreferencesContainerSlot>
 </template>
 
 <script setup lang="ts">
+  import { useProjectStore } from '@/store/project'
   import { useI18n } from 'vue-i18n'
+  import draggable from 'vuedraggable'
+
+  const PROJECT = useProjectStore()
 
   const { t } = useI18n()
 </script>

packages/better-write-app/src/components/page/editor/project/preferences/keyboard/EditorProjectPreferencesKeyboardInsertAdd.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="flex items-center w-full gap-5 wb-text my-6 wb-text">
+    <InputText
+      v-model="state.key"
+      class="p-2 shadow-lg bg-theme-background-2 rounded-xl tracking-wider placeholder-theme-text-1 w-full"
+      :placeholder="t('editor.preferences.shortcuts.inserts.key')"
+      @keydown="onInputKey"
+    />
+    <InputText
+      v-model="state.value"
+      class="p-2 shadow-lg bg-theme-background-2 rounded-xl tracking-wider placeholder-theme-text-1 w-full"
+      :placeholder="t('editor.preferences.shortcuts.inserts.value')"
+      @keyup.enter="add"
+    />
+    <IconAdd class="w-18 h-18 wb-icon" @click.prevent.stop="add" />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { reactive } from 'vue'
+  import { useProjectStore } from '@/store/project'
+  import { useI18n } from 'vue-i18n'
+
+  const PROJECT = useProjectStore()
+
+  const { t } = useI18n()
+
+  const state = reactive({
+    key: '',
+    value: '',
+  })
+
+  const add = () => {
+    if (!state.key || !state.value) return
+
+    PROJECT.shortcuts.inserts.unshift({
+      key: state.key,
+      value: state.value,
+    })
+
+    state.key = ''
+    state.value = ''
+  }
+
+  const onInputKey = (e: KeyboardEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    if (e.key) state.key = e.key
+  }
+</script>

packages/better-write-app/src/components/page/editor/project/preferences/keyboard/EditorProjectPreferencesKeyboardInsertItem.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="flex items-center w-full gap-5 wb-text wb-text my-2">
+    <p
+      class="px-3 py-1 rounded-full font-bold bg-theme-background-2 text-theme-text-2 shadow-lg w-24"
+    >
+      Alt
+    </p>
+    <p class="text-2xl">+</p>
+    <InputText
+      v-model="props.insert.key"
+      class="p-2 shadow-lg bg-theme-background-2 rounded-xl tracking-wider placeholder-theme-text-1 w-full"
+      :placeholder="t('editor.preferences.shortcuts.inserts.key')"
+      @keydown="onInputKey"
+    />
+    <p class="text-2xl">=</p>
+    <InputText
+      v-model="props.insert.value"
+      class="p-2 shadow-lg bg-theme-background-2 rounded-xl tracking-wider placeholder-theme-text-1 w-full"
+      :placeholder="t('editor.preferences.shortcuts.inserts.value')"
+    />
+    <div class="flex items-center gap-0 md:gap-2">
+      <IconDelete
+        v-motion
+        :initial="{ opacity: 0, y: 30 }"
+        :enter="{ opacity: 1, y: 0 }"
+        :delay="50"
+        class="w-7 h-7 wb-icon"
+        @click.prevent.stop="remove"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useProjectStore } from '@/store/project'
+  import { ProjectStateShortcutsInserts } from 'better-write-types'
+  import { useI18n } from 'vue-i18n'
+
+  const props = defineProps<{
+    insert: ProjectStateShortcutsInserts
+  }>()
+
+  const PROJECT = useProjectStore()
+
+  const { t } = useI18n()
+
+  const remove = () => {
+    PROJECT.shortcuts.inserts = PROJECT.shortcuts.inserts.filter(
+      (t) => t !== props.insert
+    )
+  }
+
+  const onInputKey = (e: KeyboardEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    if (e.key) props.insert.key = e.key
+  }
+</script>

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

@@ -54,6 +54,14 @@ export const useProjectStore = defineStore('project', {
           bold: [],
         },
       },
+      shortcuts: {
+        inserts: [
+          {
+            key: 'D',
+            value: '— ',
+          },
+        ],
+      },
     }
   },
   actions: {
@@ -77,6 +85,7 @@ export const useProjectStore = defineStore('project', {
       this.templates = payload.templates
       this.bw.platform = payload.bw.platform
       this.bw.version = payload.bw.version
+      this.shortcuts = payload.shortcuts
     },
     create(payload: ProjectState, title: string) {
       const global = useGlobalStore()

packages/better-write-app/src/use/block/text.ts

@@ -12,6 +12,7 @@ import { useRaw } from '../raw'
 import { useStorage } from '../storage/storage'
 import { useUtils } from '../utils'
 import { html } from '../raw'
+import { useProjectStore } from '@/store/project'
 
 export const useBlockText = ({
   props,
@@ -29,6 +30,7 @@ export const useBlockText = ({
   const CONTEXT = useContextStore()
   const EDITOR = useEditorStore()
   const ABSOLUTE = useAbsoluteStore()
+  const PROJECT = useProjectStore()
 
   const emitter = useEmitter()
   const entity = useEntity()
@@ -112,25 +114,26 @@ export const useBlockText = ({
   }
 
   const onDynamicInserts = (e: KeyboardEvent, offset: number) => {
-    const value = input.value.innerHTML
+    const value = utils.text().defaultWhitespace(input.value.innerHTML)
 
-    if (e.altKey && e.key.toLowerCase() === 'd') {
-      e.preventDefault()
-      e.stopPropagation()
+    PROJECT.shortcuts.inserts.forEach(({ key, value: insert }) => {
+      if (e.altKey && e.key.toLowerCase() === key.toLowerCase()) {
+        e.preventDefault()
+        e.stopPropagation()
 
-      const insert = '— '
-      const sub = html().insert(value, offset, insert)
+        const sub = html().insert(value, offset, insert)
 
-      setData(sub)
+        setData(sub)
 
-      const _offset = insert.length + offset
+        const _offset = insert.length + offset
 
-      emitter.emit('entity-text-focus', {
-        target: index.value,
-        position: 'offset',
-        positionOffset: _offset,
-      })
-    }
+        emitter.emit('entity-text-focus', {
+          target: index.value,
+          position: 'offset',
+          positionOffset: _offset,
+        })
+      }
+    })
   }
 
   const onKeyboard = async (e: KeyboardEvent) => {

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

@@ -67,6 +67,14 @@ export const usePopulate = () => {
             bold: useDefines().generator().substitutions().bold(),
           },
         },
+        shortcuts: {
+          inserts: [
+            {
+              key: 'D',
+              value: '— ',
+            },
+          ],
+        },
       },
       blank: {
         name: useUtils().text().kebab(project.name),
@@ -122,6 +130,14 @@ export const usePopulate = () => {
             bold: useDefines().generator().substitutions().bold(),
           },
         },
+        shortcuts: {
+          inserts: [
+            {
+              key: 'D',
+              value: '— ',
+            },
+          ],
+        },
       },
     }[project.type] as ProjectState
   }