refactor(tools): drafts complete rework

.gitignore

@@ -1,5 +1,6 @@
 .vscode
 .DS_Store
+.idea
 
 node_modules
 dist

packages/better-write-app/src/components/page/editor/entity/drafts/EditorEntityDraftsInput.vue

@@ -4,7 +4,7 @@
   >
     <EntityTypeShow :type="entity.type" />
     <div
-      class="w-full px-1 md:px-5 relative text-justify text-theme-editor-entity-text hover:text-theme-editor-entity-text-hover active:text-theme-editor-entity-text-active"
+      class="w-full px-1 md:px-5 relative text-justify break-all 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',

packages/better-write-app/src/components/page/editor/project/drafts/EditorPagesDrafts.vue

@@ -16,53 +16,30 @@
           {{ t('editor.drafts.chapters') }}
         </h2>
         <p
-          v-for="(element, index) in PROJECT.pages"
+          v-for="(page, index) in PROJECT.pages"
           :key="index"
           class="flex items-center justify-center py-10 w-full truncate shadow cursor-pointer hover:bg-black-opacity text-lg w-full font-bold"
-          @click="onClickAside(element)"
+          @click="CONTEXT.load(page)"
         >
-          {{ element.entities[0]?.raw || element.title }}
+          {{ page.entities[0]?.raw || page.title }}
         </p>
       </div>
       <div
         class="flex border-b md:border-b-0 md:border-solid border-r-0 md:border-r border-theme-editor-creative-drafts-container-borders flex-col flex-1 w-auto p-5 wb-scroll overflow-y-auto"
       >
         <h2 class="font-xl font-bold">{{ t('editor.drafts.active') }}</h2>
-        <EditorPagesDraftsItem
-          :id="{
-            draft: page.id,
-            active: page.id,
-          }"
-          :page="actually"
-          :active="true"
-          :main="true"
-          @info="page = actually"
-        />
+        <EditorPagesDraftsItem :page="CONTEXT.$state" :main="true" />
         <div class="flex items-center w-full mt-5">
           <p class="font-xl font-bold mr-1">{{ t('editor.drafts.others') }}</p>
-          <HeroIcon
-            class="wb-icon"
-            @click="
-              creative.draft().new({
-                draft: page.id,
-                active: page.id,
-              })
-            "
-          >
+          <HeroIcon class="wb-icon" @click="creative.draft().new()">
             <IconAdd2 class="w-6 h-6" />
           </HeroIcon>
         </div>
         <EditorPagesDraftsItem
-          v-for="(p, index) in PROJECT.getCreativeDrafts(page.id)"
-          :id="{
-            draft: index,
-            active: p.id,
-          }"
+          v-for="(p, index) in PROJECT.getActuallyDrafts()"
           :key="index"
           :page="p"
-          :active="false"
           :main="false"
-          @info="page = p"
         />
       </div>
       <div
@@ -72,9 +49,11 @@
         :delay="300"
         class="flex flex-col justify-start gap-2 flex-1 w-auto text-lg p-2 overflow-y-auto wb-scroll"
       >
-        <h2 class="font-xl text-center pb-5 font-bold text-xl my-10 md:my-0">
-          {{ page.title }}
-        </h2>
+        <div class="my-10 md:my-4">
+          <h2 class="font-xl truncate text-center pb-5 font-bold text-xl">
+            {{ CONTEXT.title }}
+          </h2>
+        </div>
         <EditorEntityDraftsInput
           v-for="(element, index) in CONTEXT.entities"
           :id="`entity-${String(index)}`"
@@ -88,59 +67,19 @@
 
 <script setup lang="ts">
   import { useProjectStore } from '@/store/project'
-  import { ContextState } from 'better-write-types'
-  import useEmitter from '@/use/emitter'
-  import { useProject } from '@/use/project'
   import { useCreativeType } from '@/use/type/creative'
-  import { ref, computed, onMounted } from 'vue'
   import { useI18n } from 'vue-i18n'
-  import { useStorage } from '@/use/storage/storage'
   import { useContextStore } from '@/store/context'
-  import { useNProgress } from '@vueuse/integrations/useNProgress'
   import { useAbsoluteStore } from '@/store/absolute'
-  import { useRaw } from '@/use/raw'
 
   const PROJECT = useProjectStore()
   const CONTEXT = useContextStore()
   const ABSOLUTE = useAbsoluteStore()
 
   const { t } = useI18n()
-  const project = useProject()
   const creative = useCreativeType()
-  const emitter = useEmitter()
-  const storage = useStorage()
-  const raw = useRaw()
-  const { isLoading } = useNProgress()
-
-  const page = ref<ContextState>(PROJECT.pages[0])
-  const actually = computed(
-    () => PROJECT.pages.filter((p: ContextState) => p.id === page.value.id)[0]
-  )
-
-  onMounted(async () => {
-    PROJECT.updateContext(CONTEXT.$state)
-
-    emitter.on('project-creative-drafts-set-info', (_page: ContextState) => {
-      page.value = _page
-    })
-  })
 
   const onClose = async () => {
     ABSOLUTE.pages.drafts = false
   }
-
-  const onClickAside = (element: ContextState) => {
-    isLoading.value = true
-
-    page.value = element
-
-    storage
-      .normalize()
-      .then(() => {
-        CONTEXT.load(element)
-      })
-      .finally(() => {
-        isLoading.value = false
-      })
-  }
 </script>

packages/better-write-app/src/components/page/editor/project/drafts/EditorPagesDraftsItem.vue

@@ -8,39 +8,37 @@
     <div
       ref="input"
       :contenteditable="edit"
-      class="cursor-pointer text-theme-editor-creative-drafts-container-item-text"
+      class="cursor-pointer truncate text-theme-editor-creative-drafts-container-item-text"
       @keydown.enter="edit = false"
       @focusout="edit = false"
       @click="emit('info')"
     >
-      {{ props.page.entities[0]?.raw }}
+      {{ props.page.title }}
     </div>
     <div class="flex gap-2 items-center">
-      <ButtonSet v-if="!props.active" @click="creative.draft().set(id)">
+      <ButtonSet v-if="!main" @click="creative.draft().set(props.page)">
         <IconYes class="w-5 h-5" />
       </ButtonSet>
-      <ButtonSet v-if="!props.active" @click="creative.draft().reset(id)">
+      <ButtonSet v-if="!main" @click="creative.draft().reset(props.page)">
         <IconReload class="w-5 h-5" />
       </ButtonSet>
       <ButtonSet @click="edit = !edit">
         <IconEdit class="w-5 h-5" />
       </ButtonSet>
-      <ButtonSet v-if="!props.active" @click="creative.draft().delete(id)">
+      <ButtonSet v-if="!main" @click="creative.draft().delete(props.page)">
         <IconDelete class="w-5 h-5" />
       </ButtonSet>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { ProjectTypeID, ContextState } from 'better-write-types'
+  import { ContextState } from 'better-write-types'
   import { useRaw } from '@/use/raw'
   import { useCreativeType } from '@/use/type/creative'
-  import { usePlugin } from 'better-write-plugin-core'
   import { ref, watch, nextTick } from 'vue'
 
   const creative = useCreativeType()
-  const plugin = usePlugin()
 
   const emit = defineEmits(['info'])
   const input = ref<HTMLDivElement | null>(null)
@@ -61,26 +59,14 @@
 
     creative
       .draft()
-      .updateTitle(props.id, props.main, input.value?.innerText as string)
-
-    await nextTick
-
-    plugin.emit('plugin-project-creative-drafts-update', props.page)
+      .updateTitle(props.page, props.main, input.value?.innerText as string)
   })
 
   const props = defineProps({
     page: {
       required: true,
       type: Object as () => ContextState,
     },
-    id: {
-      required: true,
-      type: Object as () => ProjectTypeID,
-    },
-    active: {
-      required: true,
-      type: Boolean,
-    },
     main: {
       required: true,
       type: Boolean,

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

@@ -25,7 +25,7 @@ import i18n from '@/lang'
 export const useContextStore = defineStore('context', {
   state: (): ContextState => {
     return {
-      id: 0,
+      id: useUtils().id().uuidv4(),
       title: 'Untitled',
       entities: [],
       createdAt: useFormat().actually(),
@@ -46,10 +46,7 @@ export const useContextStore = defineStore('context', {
         return
       }
 
-      this.id = context.id
-      project.pageLoaded = context.id
-
-      this.entities = context.entities
+      this.$state = context
     },
     addInPage(entity: Entity) {
       if (!entity) return

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

@@ -13,6 +13,7 @@ import { useFactory } from '../use/factory'
 import { useUtils } from '@/use/utils'
 import { useEnv } from '@/use/env'
 import { useDefines } from '@/use/defines'
+import { useContextStore } from './context'
 
 export const useProjectStore = defineStore('project', {
   state: (): ProjectState => {
@@ -30,7 +31,7 @@ export const useProjectStore = defineStore('project', {
       main: {},
       summary: {},
       pages: [],
-      pageLoaded: 1,
+      pageLoaded: useUtils().id().uuidv4(),
       scrollLoaded: 0,
       offsetLoaded: 0,
       pdf: {
@@ -127,14 +128,18 @@ export const useProjectStore = defineStore('project', {
         totalPagesCreated: options.totalPagesCreated || 1,
         main: options.main || {},
         summary: options.summary || {},
-        pageLoaded: options.pageLoaded || 1,
+        pageLoaded: options.pageLoaded || useUtils().id().uuidv4(),
         scrollLoaded: options.scrollLoaded || 0,
         offsetLoaded: options.offsetLoaded || 0,
         pages: options.pages || [
           {
-            id: 1,
-            title: forceTitle || title,
-            entities: [],
+            id: useUtils().id().uuidv4(),
+            title: `${forceTitle || title}  | ${useFormat().actually()}`,
+            entities: [
+              useFactory()
+                .entity()
+                .create('heading-one', forceTitle || title),
+            ],
             createdAt: useFormat().actually(),
             updatedAt: useFormat().actually(),
           },
@@ -207,8 +212,8 @@ export const useProjectStore = defineStore('project', {
       this.totalPagesCreated++
 
       const context: ContextState = {
-        id: this.totalPagesCreated,
-        title,
+        id: useUtils().id().uuidv4(),
+        title: `${title} | ${useFormat().actually()}`,
         entities: [
           useFactory().entity().create('heading-one', title),
           useFactory().entity().create('paragraph', ''),
@@ -293,8 +298,13 @@ export const useProjectStore = defineStore('project', {
   },
   getters: {
     getCreativeDrafts: (state) => {
-      return (id: ID<number>) =>
-        state.creative.drafts.filter((draft) => draft.id === id)
+      return () => state.creative.drafts
+    },
+    getActuallyDrafts: (state) => {
+      const CONTEXT = useContextStore()
+
+      return () =>
+        state.creative.drafts.filter((draft) => draft.id === CONTEXT.id)
     },
     getAllCharacters: (state) => {
       return () =>

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

@@ -16,10 +16,14 @@ export const usePage = () => {
   const { t } = useI18n()
   const emitter = useEmitter()
 
-  const onCreatePage = async (title: string) => {
+  const onCreatePage = async () => {
     if (PROJECT.name === env.projectEmpty()) return
 
-    PROJECT.newPage(title)
+    PROJECT.newPage(
+      t('editor.project.control.title', {
+        suffix: 1 + PROJECT.totalPagesCreated,
+      })
+    )
 
     await nextTick
 
@@ -71,7 +75,7 @@ export const usePage = () => {
   }
 
   const utils = () => {
-    const getPageIndex = (id: number): number => {
+    const getPageIndex = (id: string): number => {
       const page = PROJECT.pages.filter(
         (page: ContextState) => id === page.id
       )[0]