feat(editor): entity paragraph generator templates

Novout · Mar 13, 2022 · 3472422 · 3472422
1 parent 78452ea
commit 3472422
Show file tree

Hide file tree

Showing 11 changed files with 203 additions and 33 deletions.
diff --git a/packages/README.md b/packages/README.md
@@ -2,7 +2,6 @@
 
 ```
   ├── better-write-app                          # Website
-  ├── better-write-entity                       # Editor Setters
   ├── better-write-plugin-core                  # Plugin base core
   ├── better-write-plugin-docx                  # DOCX Generator Plugin
   ├── better-write-plugin-logger                # Logger Plugin

diff --git a/...es/better-write-app/src/components/editor/entity/default/EditorEntityDefaultCustomize.vue b/...es/better-write-app/src/components/editor/entity/default/EditorEntityDefaultCustomize.vue
@@ -24,6 +24,52 @@
           </svg>
         </HeroIcon>
       </div>
+      <div
+        :class="[!paragraph.active ? 'opacity-50 pointer-events-none' : '']"
+        class="flex items-center justify-start w-full"
+      >
+        <InputSelect v-model="template" class="w-52" :arr="templates" />
+        <div
+          class="flex flex-wrap ml-2 px-2 items-center bg-theme-background-2"
+        >
+          <InputText
+            v-model="templateText"
+            class="mx-2 bg-transparent shadow shadow-xl rounded"
+          />
+          <HeroIcon class="wb-icon w-10 h-10">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              aria-hidden="true"
+              role="img"
+              preserveAspectRatio="xMidYMid meet"
+              viewBox="0 0 24 24"
+              @click.prevent.stop="onCreateParagraphTemplate"
+            >
+              <path
+                fill="currentColor"
+                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+              ></path>
+            </svg>
+          </HeroIcon>
+          <HeroIcon class="wb-icon w-10 h-10">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              aria-hidden="true"
+              role="img"
+              preserveAspectRatio="xMidYMid meet"
+              viewBox="0 0 24 24"
+              @click.prevent.stop="onDeleteParagraphTemplate"
+            >
+              <path
+                fill="currentColor"
+                d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+              ></path>
+            </svg>
+          </HeroIcon>
+        </div>
+      </div>
       <div
         class="flex h-60 max-h-60 items-center justify-center w-full overflow-hidden p-1 md:p-5 bg-theme-background-opacity-1"
         :class="[!paragraph.active ? 'opacity-50 pointer-events-none' : '']"
@@ -147,6 +193,9 @@
   import { useI18n } from 'vue-i18n'
   import { usePDFStore } from '@/store/pdf'
   import { useDefines } from '@/use/defines'
+  import { useProjectStore } from '@/store/project'
+  import { useNProgress } from '@vueuse/integrations'
+  import { useToast } from 'vue-toastification'
 
   const custom = ref<HTMLElement | null>(null)
 
@@ -157,37 +206,70 @@
   const EDITOR = useEditorStore()
   const ABSOLUTE = useAbsoluteStore()
   const CONTEXT = useContextStore()
+  const PROJECT = useProjectStore()
   const PDF = usePDFStore()
 
+  const { t } = useI18n()
+  const toast = useToast()
+  const defines = useDefines()
+  const { isLoading } = useNProgress()
+
   const entity = computed<Entity>(
     () => CONTEXT.entities[EDITOR.actives.entity.index]
   )
   const options = ref<HTMLElement | null>(null)
 
-  const { t } = useI18n()
-  const defines = useDefines()
+  const templates = computed(() => [
+    t('editor.entity.generator.template'),
+    ...PROJECT.templates.generator.map((g) => g.name),
+  ])
+  const template = ref<string>(templates.value[0])
+  const templateText = ref<string>('')
 
   onClickOutside(options as any, () => onClose())
 
   const onClose = () => {
     ABSOLUTE.entity.customize = false
   }
 
-  const image = reactive({
-    height: entity.value.external?.image?.size.height,
-    width: entity.value.external?.image?.size.width,
-    alignment: entity.value.external?.image?.alignment,
-  })
+  watch(template, (_template) => {
+    if (!_template) return
+
+    if (_template === t('editor.entity.generator.template')) {
+      paragraph.generator = {
+        font: PDF.styles.paragraph.font,
+        fontSize: PDF.styles.paragraph.fontSize,
+        lineHeight: PDF.styles.paragraph.lineHeight,
+        alignment: PDF.styles.paragraph.alignment,
+        indent: PDF.styles.paragraph.indent,
+        characterSpacing: PDF.styles.paragraph.characterSpacing,
+        color: PDF.styles.paragraph.color,
+        background: PDF.styles.paragraph.background,
+        italics: false,
+        bold: false,
+        margin: {
+          top: PDF.styles.paragraph.margin.top,
+          bottom: PDF.styles.paragraph.margin.bottom,
+        },
+      }
+
+      return
+    }
+
+    const generator = PROJECT.templates.generator.find(
+      (g) => g.name === template.value
+    )
+
+    if (!generator) return
+
+    paragraph.generator = generator.paragraph
 
-  watch(image, () => {
     const _index: number = CONTEXT.entities.indexOf(entity.value)
 
-    ;(CONTEXT.entities[_index] as any).external.image.alignment =
-      image.alignment as any
-    ;(CONTEXT.entities[_index] as any).external.image.size.height =
-      image.height as any
-    ;(CONTEXT.entities[_index] as any).external.image.size.width =
-      image.width as any
+    ;(CONTEXT.entities[_index] as any).external.paragraph.active =
+      paragraph.active as any
+    ;(CONTEXT.entities[_index] as any).external.paragraph.generator =
+      paragraph.generator as any
   })
 
   const paragraph = reactive({
@@ -196,11 +278,52 @@
   })
 
   watch(paragraph, () => {
+    if (template.value !== t('editor.entity.generator.template')) return
+
     const _index: number = CONTEXT.entities.indexOf(entity.value)
 
     ;(CONTEXT.entities[_index] as any).external.paragraph.active =
       paragraph.active as any
     ;(CONTEXT.entities[_index] as any).external.paragraph.generator =
       paragraph.generator as any
   })
+
+  const onCreateParagraphTemplate = () => {
+    if (!templateText.value) {
+      toast.error(t('toast.entity.paragraph.generator.empty'))
+      return
+    }
+
+    if (
+      PROJECT.templates.generator.find((g) => g.name === templateText.value)
+    ) {
+      toast.error(t('toast.entity.paragraph.generator.exists'))
+      return
+    }
+
+    isLoading.value = true
+
+    if (!paragraph.generator) return
+
+    PROJECT.templates.generator.push({
+      name: templateText.value,
+      paragraph: paragraph.generator,
+    })
+
+    template.value = templateText.value
+    templateText.value = ''
+    isLoading.value = false
+  }
+
+  const onDeleteParagraphTemplate = () => {
+    isLoading.value = true
+
+    PROJECT.templates.generator = PROJECT.templates.generator.filter(
+      (g) => g.name !== template.value
+    )
+
+    template.value = t('editor.entity.generator.template')
+    templateText.value = ''
+    isLoading.value = false
+  }
 </script>
diff --git a/packages/better-write-app/src/components/material/Modal.vue b/packages/better-write-app/src/components/material/Modal.vue
@@ -4,7 +4,7 @@
     v-motion
     :initial="{ opacity: 0, y: 10 }"
     :enter="{ opacity: 1, y: 0 }"
-    class="fixed left-0 top-0 w-full h-screen bg-theme-transparent z-max"
+    class="fixed left-0 top-0 w-full h-screen bg-theme-transparent z-50"
   >
     <slot />
   </div>

diff --git a/packages/better-write-app/src/lang/br/editor.ts b/packages/better-write-app/src/lang/br/editor.ts
@@ -80,6 +80,9 @@ export default {
     'page-break': 'Quebra de Página',
     'line-break': 'Quebra de Linha',
     image: 'Imagem',
+    generator: {
+      template: 'Padrão',
+    },
   },
   bar: {
     supabase: {

diff --git a/packages/better-write-app/src/lang/br/toast.ts b/packages/better-write-app/src/lang/br/toast.ts
@@ -21,4 +21,12 @@ export default {
     load: 'Conectado com o Dropbox!',
     save: 'Salvo no Dropbox em Aplicativos > Better Write',
   },
+  entity: {
+    paragraph: {
+      generator: {
+        empty: 'Insira um nome para salvar o estilo!',
+        exists: 'O nome do estilo já existe!',
+      },
+    },
+  },
 }
diff --git a/packages/better-write-app/src/lang/en/editor.ts b/packages/better-write-app/src/lang/en/editor.ts
@@ -80,6 +80,9 @@ export default {
     'page-break': 'Page Break',
     'line-break': 'Line Break',
     image: 'Image',
+    generator: {
+      template: 'Default',
+    },
   },
   bar: {
     pdf: {

diff --git a/packages/better-write-app/src/lang/en/toast.ts b/packages/better-write-app/src/lang/en/toast.ts
@@ -21,4 +21,12 @@ export default {
     load: 'Connected with Dropbox!',
     save: 'Saved to Dropbox under Apps > Better Write',
   },
+  entity: {
+    paragraph: {
+      generator: {
+        empty: 'Enter a name to save the style!',
+        exists: 'The style name already exists!',
+      },
+    },
+  },
 }
diff --git a/packages/better-write-app/src/store/project.ts b/packages/better-write-app/src/store/project.ts
@@ -45,6 +45,9 @@ export const useProjectStore = defineStore('project', {
       creative: {
         drafts: [],
       },
+      templates: {
+        generator: [],
+      },
     }
   },
   actions: {
@@ -64,6 +67,7 @@ export const useProjectStore = defineStore('project', {
       this.main = payload.main
       this.summary = payload.summary
       this.pages = payload.pages
+      this.templates = payload.templates
       this.bw.platform = payload.bw.platform
       this.bw.version = payload.bw.version
     },

diff --git a/packages/better-write-app/src/use/storage/storage.ts b/packages/better-write-app/src/use/storage/storage.ts
@@ -337,6 +337,16 @@ export const useStorage = () => {
       }
     }
 
+    // <= 0.13.0
+    if (!_.project.templates) {
+      _.project = {
+        ..._.project,
+        templates: {
+          generator: [],
+        },
+      }
+    }
+
     return _
   }
 

diff --git a/packages/better-write-types/src/types/context.ts b/packages/better-write-types/src/types/context.ts
@@ -65,24 +65,26 @@ export interface EntityExternalComment {
   createdAt: string
 }
 
+export interface EntityExternalParagraphGenerator {
+  font: string
+  fontSize: number
+  lineHeight: number
+  alignment: 'left' | 'center' | 'right' | 'justify'
+  indent: number
+  characterSpacing: number
+  color: string
+  background: string
+  italics: boolean
+  bold: boolean
+  margin: {
+    top: number
+    bottom: number
+  }
+}
+
 export interface EntityExternalParagraph {
   active: boolean
-  generator: {
-    font: string
-    fontSize: number
-    lineHeight: number
-    alignment: 'left' | 'center' | 'right' | 'justify'
-    indent: number
-    characterSpacing: number
-    color: string
-    background: string
-    italics: boolean
-    bold: boolean
-    margin: {
-      top: number
-      bottom: number
-    }
-  }
+  generator: EntityExternalParagraphGenerator
 }
 
 export interface EntityExternal {

diff --git a/packages/better-write-types/src/types/project.ts b/packages/better-write-types/src/types/project.ts
@@ -1,4 +1,4 @@
-import { ContextState } from './context'
+import { ContextState, EntityExternalParagraphGenerator } from './context'
 import { EditorState } from './editor'
 import { LoggerState } from './logger'
 import { PDFState } from './pdf'
@@ -24,6 +24,16 @@ export interface ProjectState {
   bw: ProjectStateBetterWrite
   pdf: ProjectStatePDF
   creative: ProjectStateCreative
+  templates: ProjectStateTemplates
+}
+
+export interface ProjectStateTemplates {
+  generator: ProjectStateTemplatesGenerator[]
+}
+
+export interface ProjectStateTemplatesGenerator {
+  name: string
+  paragraph: EntityExternalParagraphGenerator
 }
 
 export interface ProjectStateCreative {