feat(editor): switcher render

packages/better-write-app/src/components/editor/entity/switcher/EditorEntitySwitcherInput.vue

@@ -0,0 +1,21 @@
+<template>
+  <div 
+    class="w-full relative px-4 md:px-14 text-justify text-theme-editor-entity-text hover:text-theme-editor-entity-text-hover active:text-theme-editor-entity-text-active"
+    :style="{
+        whiteSpace: 'pre-line',
+        textIndent: '2rem',
+      }"
+      v-html="raw.v2().purge().switcher(entity)"/>
+
+</template>
+
+<script setup lang="ts">
+import { useRaw } from '@/use/raw';
+import { Entity } from 'better-write-types';
+
+const { entity } = defineProps<{
+  entity: Entity
+}>()
+
+const raw = useRaw()
+</script>

packages/better-write-app/src/components/editor/main/render/EditorBaseRender.vue

@@ -1,5 +1,6 @@
 <template>
   <EditorBaseRenderFinder v-if="ABSOLUTE.shortcuts.finder" />
+  <EditorBaseRenderSwitcher v-else-if="ABSOLUTE.shortcuts.switcher" />
   <EditorBaseRenderDefault v-else />
 </template>
 

packages/better-write-app/src/components/editor/main/render/EditorBaseRenderDefault.vue

@@ -21,8 +21,8 @@
 <script lang="ts" setup>
   import { useProject } from '@/use/project'
   import { useContextStore } from '@/store/context'
-  import { onMounted, ref, watch } from 'vue'
-  import { useScroll as useScr } from '@vueuse/core'
+  import { ref, watch } from 'vue'
+  import { tryOnMounted, useScroll as useScr } from '@vueuse/core'
   import { useAbsoluteStore } from '@/store/absolute'
 import { useScroll } from '@/use/scroll'
 import { useExternalsStore } from '@/store/externals'
@@ -42,11 +42,19 @@ import { useExternalsStore } from '@/store/externals'
     ABSOLUTE.entity.menu = false
   })
 
-  onMounted(() => {
-    if(EXTERNALS.finder.closeFinder) {
-      scroll.entity(EXTERNALS.finder.entityFocus, 'center')
+  tryOnMounted(() => {
+    if(EXTERNALS.switcher.close) {
+      scroll.entity(EXTERNALS.switcher.entity, 'center')
 
-      EXTERNALS.finder.closeFinder = false
+      EXTERNALS.switcher.close = false
+
+      return
+    }
+
+    if(EXTERNALS.finder.close) {
+      scroll.entity(EXTERNALS.finder.entity, 'center')
+
+      EXTERNALS.finder.close = false
     }
   })
 </script>

packages/better-write-app/src/components/editor/main/render/EditorBaseRenderSwitcher.vue

@@ -0,0 +1,40 @@
+<template>
+  <section
+    id="edit"
+    ref="editor"
+    v-motion
+    :initial="{ opacity: 0, y: 100 }"
+    :enter="{ opacity: 1, y: 0 }"
+    :delay="100"
+    :class="[project.isBlankProject() ? 'pt-28' : '']"
+    class="flex wb-edit flex-col w-full overflow-y-auto overflow-x-hidden"
+  >
+    <EditorEntitySwitcherInput
+      v-for="(element, index) in CONTEXT.entities"
+      :id="`entity-${String(index)}`"
+      :key="index"
+      :entity="element"
+    />
+  </section>
+</template>
+
+<script lang="ts" setup>
+  import { useProject } from '@/use/project'
+  import { useContextStore } from '@/store/context'
+  import { ref, watch } from 'vue'
+  import { useScroll } from '@vueuse/core'
+  import { useAbsoluteStore } from '@/store/absolute'
+
+  const CONTEXT = useContextStore()
+  const ABSOLUTE = useAbsoluteStore()
+
+  const project = useProject()
+
+  const editor = ref<HTMLElement | null>(null)
+
+  const scroll = useScroll(editor as any)
+
+  watch(scroll.isScrolling, () => {
+    ABSOLUTE.entity.menu = false
+  })
+</script>

packages/better-write-app/src/components/editor/provider/ProviderEditor.vue

@@ -2,8 +2,6 @@
   <teleport to="body">
     <EditorAuthLogin v-if="ABSOLUTE.auth.supabase" />
     <EditorEntityDefaultOptions v-else-if="ABSOLUTE.entity.menu" />
-    <EditorShortcutsSwitcher v-else-if="ABSOLUTE.shortcuts.switcher" />
-    <EditorShortcutsFinder v-else-if="ABSOLUTE.shortcuts.finder" />
     <EditorEntityDefaultComment v-else-if="ABSOLUTE.entity.comment" />
     <EditorEntityDefaultCustomize v-else-if="ABSOLUTE.entity.customize" />
     <EditorPagesDrafts v-else-if="ABSOLUTE.pages.drafts" />
@@ -15,7 +13,8 @@
     <ProviderPDFConfiguration v-else-if="ABSOLUTE.pdf.configuration" />
     <ProviderPDFPreview v-else-if="ABSOLUTE.pdf.preview" />
     <ProviderPDFGenerate v-else-if="ABSOLUTE.pdf.generate" />
-
+    <EditorToolsSwitcher v-else-if="ABSOLUTE.shortcuts.switcher" />
+    <EditorToolsFinder v-else-if="ABSOLUTE.shortcuts.finder" />
     <EditorToolsSpeechRecognition v-if="ABSOLUTE.tools.speechRecognition" />
   </teleport>
 </template>

packages/better-write-app/src/components/editor/shortcuts/EditorShortcutsFinder.vue → packages/better-write-app/src/components/editor/tools/EditorToolsFinder.vue

@@ -1,22 +1,22 @@
 <template>
   <Modal @close="onClose">
     <div
-      ref="finder"
+      ref="f"
       class="fixed w-60 text-theme-editor-extras-finder-text hover:text-theme-editor-extras-finder-text-hover active:text-theme-editor-extras-finder-text-active bg-theme-editor-extras-finder-background hover:bg-theme-editor-extras-finder-background-hover active:bg-theme-editor-extras-finder-background-active p-2 rounded shadow-2xl"
       :style="style"
     >
       <div class="flex flex-col w-full">
         <div
           class="flex items-center justify-between w-full mb-1 cursor-pointer"
         >
-          <div class="flex">
+          <div class="flex items-center">
             <div class="font-poppins">
-              {{ entity.fstate.actuallyLetterCounter }} /
-              {{ entity.fstate.maxLetterCounter }}
+              {{ finder.state.actuallyLetterCounter }} /
+              {{ finder.state.maxLetterCounter }}
             </div>
             <HeroIcon
               class="text-2xs ml-2 wb-icon"
-              @click.prevent="entity.finder().onUp"
+              @click="finder.onUp"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -33,7 +33,7 @@
             </HeroIcon>
             <HeroIcon
               class="text-2xs wb-icon"
-              @click.prevent="entity.finder().onDown"
+              @click="finder.onDown"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -68,11 +68,11 @@
         </div>
         <input
           ref="search"
-          v-model="entity.fstate.entry"
+          v-model="finder.state.entry"
           class="bg-transparent border border-theme-editor-extras-finder-border px-1 mb-1 placeholder-theme-editor-extras-finder-text"
           :placeholder="t('editor.text.placeholder.shortcuts.finderEntry')"
-          @input="entity.finder().onFinder"
-          @keypress.enter.prevent="entity.finder().onUp"
+          @input="finder.onFinder"
+          @keypress.enter.prevent="finder.onUp"
         />
       </div>
     </div>
@@ -82,26 +82,26 @@
 <script setup lang="ts">
   import { ref, onMounted } from 'vue'
   import { useI18n } from 'vue-i18n'
-  import { useEntity } from '@/use/entity'
   import { useAbsoluteStore } from '@/store/absolute'
   import { onClickOutside, useDraggable } from '@vueuse/core'
 import { useExternalsStore } from '@/store/externals'
+import { useFinder } from '@/use/tools/finder'
   
   const ABSOLUTE = useAbsoluteStore()
   const EXTERNALS = useExternalsStore()
 
   const { t } = useI18n()
-  const entity = useEntity()
+  const finder = useFinder()
 
-  const finder = ref<HTMLElement | null>(null)
+  const f = ref<HTMLElement | null>(null)
   const search = ref<HTMLElement | null>(null)
 
-  const { style } = useDraggable(finder as any, {
+  const { style } = useDraggable(f, {
     initialValue: { x: window.innerWidth / 2 - 120, y: window.innerHeight / 2 },
   })
 
   const onClose = () => {
-    EXTERNALS.finder.closeFinder = true
+    EXTERNALS.finder.close = true
 
     ABSOLUTE.shortcuts.finder = false
   }
@@ -112,7 +112,7 @@ import { useExternalsStore } from '@/store/externals'
     search.value?.focus()
   })
 
-  onClickOutside(finder as any, () => {
+  onClickOutside(f, () => {
     onClose()
   })
 </script>

packages/better-write-app/src/components/editor/shortcuts/EditorShortcutsSwitcher.vue → packages/better-write-app/src/components/editor/tools/EditorToolsSwitcher.vue

@@ -1,26 +1,26 @@
 <template>
   <Modal @close="onClose">
     <div
-      ref="switcher"
+      ref="sw"
       class="fixed w-60 text-theme-editor-extras-switcher-text hover:text-theme-editor-extras-switcher-text-hover active:text-theme-editor-extras-switcher-text-active bg-theme-editor-extras-switcher-background hover:bg-theme-editor-extras-switcher-background-hover active:bg-theme-editor-extras-switcher-background-active p-2 rounded shadow-2xl"
       :style="style"
     >
       <div
         class="flex flex-col w-full"
-        @keypress.enter.prevent="entity.swapper().onSwitcherAll"
+        @keypress.enter.prevent="switcher.onSwitcherAll"
       >
         <div
           class="flex items-center justify-between w-full mb-1 cursor-pointer"
         >
           <div>
             <HeroIcon
               :class="[
-                entity.sstate.equal
+                switcher.state.equal
                   ? 'border border-theme-editor-extras-switcher-border'
                   : '',
               ]"
               class="text-2xs wb-icon"
-              @click.prevent="entity.sstate.equal = !entity.sstate.equal"
+              @click.prevent="switcher.state.equal = !switcher.state.equal"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -38,7 +38,7 @@
             </HeroIcon>
             <HeroIcon
               class="text-2xs wb-icon mx-1"
-              @click.prevent="entity.swapper().onSwitcherAll"
+              @click="switcher.onSwitcherAll"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -54,6 +54,46 @@
               </svg>
             </HeroIcon>
           </div>
+          <div class="flex items-center">
+            <div class="font-poppins">
+              {{ switcher.state.actuallyLetterCounter }} /
+              {{ switcher.state.maxLetterCounter }}
+            </div>
+            <HeroIcon
+              class="text-2xs ml-2 wb-icon"
+              @click="switcher.onUp"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-5 w-5"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L6.707 7.707a1 1 0 01-1.414 0z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </HeroIcon>
+            <HeroIcon
+              class="text-2xs wb-icon"
+              @click="switcher.onDown"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-5 w-5"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M14.707 12.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l2.293-2.293a1 1 0 011.414 0z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </HeroIcon>
+          </div>
           <div>
             <HeroIcon class="text-2xs wb-icon" @click.prevent="onClose">
               <svg
@@ -73,12 +113,14 @@
         </div>
         <input
           ref="entry"
-          v-model="entity.sstate.entry"
+          v-model="switcher.state.entry"
           class="bg-transparent border border-theme-editor-extras-switcher-border px-1 mb-1 placeholder-theme-editor-extras-switcher-text"
           :placeholder="t('editor.text.placeholder.shortcuts.switcherEntry')"
+          @input="switcher.onSwitcher"
+          @keypress.enter.prevent="switcher.onUp"
         />
         <input
-          v-model="entity.sstate.output"
+          v-model="switcher.state.output"
           class="bg-transparent border border-theme-editor-extras-switcher-border px-1 placeholder-theme-editor-extras-switcher-text"
           :placeholder="t('editor.text.placeholder.shortcuts.switcherOutput')"
         />
@@ -88,33 +130,39 @@
 </template>
 
 <script setup lang="ts">
-  import { useEntity } from '@/use/entity'
   import { onMounted, ref } from 'vue'
   import { useI18n } from 'vue-i18n'
   import { useAbsoluteStore } from '@/store/absolute'
   import { onClickOutside, useDraggable } from '@vueuse/core'
+import { useExternalsStore } from '@/store/externals'
+import { useSwitcher } from '@/use/tools/switcher'
 
   const ABSOLUTE = useAbsoluteStore()
+  const EXTERNALS = useExternalsStore()
 
   const { t } = useI18n()
-  const entity = useEntity()
+  const switcher = useSwitcher()
 
-  const switcher = ref<HTMLElement | null>(null)
+  const sw = ref<HTMLElement | null>(null)
   const entry = ref<HTMLElement | null>(null)
 
-  const { style } = useDraggable(switcher as any, {
+  const { style } = useDraggable(sw, {
     initialValue: { x: window.innerWidth / 2 - 120, y: window.innerHeight / 2 },
   })
 
   const onClose = () => {
+    EXTERNALS.switcher.close = true
+
     ABSOLUTE.shortcuts.switcher = false
   }
 
   onMounted(() => {
+    EXTERNALS.switcher.value = ''
+
     entry.value?.focus()
   })
 
-  onClickOutside(switcher as any, () => {
+  onClickOutside(sw, () => {
     onClose()
   })
 </script>

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

@@ -6,7 +6,14 @@ export const useExternalsStore = defineStore('externals', {
     return {
       finder: {
         value: '',
-        entityFocus: 0
+        entity: 0,
+        close: false
+      },
+      switcher: {
+        value: '',
+        entity: 0,
+        replace: '',
+        close: false
       }
     }
   }