feat(editor): entity paragraph custom

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

@@ -353,6 +353,129 @@
         </EditorEntityDefaultOptionsOverflow>
       </template>
     </EditorEntityDefaultOptionsItem>
+    <EditorEntityDefaultOptionsItem
+      v-if="entity.type === 'paragraph'"
+      :off="true"
+    >
+      <template #icon>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          aria-hidden="true"
+          role="img"
+          class="h-5 w-5"
+          preserveAspectRatio="xMidYMid meet"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M13 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4h-2v6H9V4h4m0 6a2 2 0 0 0 2-2a2 2 0 0 0-2-2h-2v4h2z"
+            fill="currentColor"
+          ></path>
+        </svg>
+      </template>
+      <template #title>{{ t('editor.aside.entity.paragraph') }}</template>
+
+      <template #overflow>
+        <div class="flex p-3 items-center justify-between w-full">
+          <h3>Test</h3>
+          <InputBoolean v-model="paragraph.active" />
+        </div>
+        <div
+          class="flex flex-col items-center overflow-auto max-h-28"
+          :class="[!paragraph.active ? 'opacity-50 pointer-events-none' : '']"
+        >
+          <div class="wb-input-container">
+            <label class="mx-2 text-xs">{{
+              t('editor.pdf.custom.generics.font')
+            }}</label>
+            <InputSelect
+              v-model="(paragraph.generator as any).font"
+              class="flex-1"
+              :min="true"
+              :arr="PDF.fonts"
+              :font="true"
+            />
+          </div>
+          <div class="wb-input-container">
+            <label class="mx-2 text-xs">{{
+              t('editor.pdf.custom.generics.fontSize')
+            }}</label>
+            <InputNumber v-model="(paragraph.generator as any).fontSize" />
+          </div>
+          <div class="wb-input-container">
+            <label class="mx-2 text-xs">{{
+              t('editor.pdf.custom.generics.bold')
+            }}</label>
+            <InputBoolean v-model="(paragraph.generator as any).bold" />
+          </div>
+          <div class="wb-input-container">
+            <label class="mx-2 text-xs">{{
+              t('editor.pdf.custom.generics.italics')
+            }}</label>
+            <InputBoolean v-model="(paragraph.generator as any).italics" />
+          </div>
+          <div class="wb-input-container">
+            <label class="mx-2 text-xs">{{
+              t('editor.pdf.base.pageMargins.title')
+            }}</label>
+            <section>
+              <label>{{ t('editor.pdf.base.pageMargins.top') }}</label>
+              <InputNumber v-model="(paragraph.generator as any).margin.top" />
+            </section>
+            <section>
+              <label>{{ t('editor.pdf.base.pageMargins.bottom') }}</label>
+              <InputNumber
+                v-model="(paragraph.generator as any).margin.bottom"
+              />
+            </section>
+          </div>
+          <div class="wb-input-container">
+            <label class="mx-2 text-xs">{{
+              t('editor.pdf.custom.generics.lineHeight')
+            }}</label>
+            <InputNumber v-model="(paragraph.generator as any).lineHeight" />
+          </div>
+          <div class="wb-input-container">
+            <label class="mx-2 text-xs">{{
+              t('editor.pdf.custom.generics.alignment')
+            }}</label>
+            <InputCarousel
+              v-model="(paragraph.generator as any).alignment"
+              class="flex-1"
+              :arr="defines.pdf().alignment()"
+            />
+          </div>
+          <div class="wb-input-container">
+            <label class="mx-2 text-xs">{{
+              t('editor.pdf.custom.generics.indent')
+            }}</label>
+            <InputNumber v-model="(paragraph.generator as any).indent" />
+          </div>
+          <div class="wb-input-container">
+            <label class="mx-2 text-xs">{{
+              t('editor.pdf.custom.generics.characterSpacing')
+            }}</label>
+            <InputNumber
+              v-model="(paragraph.generator as any).characterSpacing"
+            />
+          </div>
+          <div class="wb-input-container">
+            <label class="mx-1 text-xs">{{
+              t('editor.pdf.custom.generics.color')
+            }}</label>
+            <InputColorPicker v-model="(paragraph.generator as any).color" />
+          </div>
+          <div class="wb-input-container">
+            <label class="mx-1 text-xs">{{
+              t('editor.pdf.custom.generics.background')
+            }}</label>
+            <InputColorPicker
+              v-model="(paragraph.generator as any).background"
+            />
+          </div>
+        </div>
+      </template>
+    </EditorEntityDefaultOptionsItem>
     <EditorEntityDefaultOptionsItem v-if="entity.type === 'image'" :off="true">
       <template #icon>
         <svg
@@ -414,10 +537,13 @@
   import { useI18n } from 'vue-i18n'
   import useEmitter from '@/use/emitter'
   import { usePlugin } from 'better-write-plugin-core'
+  import { usePDFStore } from '@/store/pdf'
+  import { useDefines } from '@/use/defines'
 
   const EDITOR = useEditorStore()
   const ABSOLUTE = useAbsoluteStore()
   const CONTEXT = useContextStore()
+  const PDF = usePDFStore()
 
   const entity = computed<Entity>(
     () => CONTEXT.entities[EDITOR.actives.entity.index]
@@ -429,6 +555,7 @@
   const { t } = useI18n()
   const emitter = useEmitter()
   const plugin = usePlugin()
+  const defines = useDefines()
 
   onClickOutside(options, () => onClose())
 
@@ -542,4 +669,18 @@
     ;(CONTEXT.entities[_index] as any).external.image.size.width =
       image.width as any
   })
+
+  const paragraph = reactive({
+    active: entity.value.external?.paragraph?.active,
+    generator: entity.value.external?.paragraph?.generator,
+  })
+
+  watch(paragraph, () => {
+    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
+  })
 </script>

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex items-center px-2 py-1 w-full hover:bg-theme-background-3"
+    class="flex items-end px-2 py-1 w-full hover:bg-theme-background-3"
     :class="[!props.off ? 'cursor-pointer' : 'cursor-default']"
     @mouseenter="hover = true"
     @mouseleave="hover = false"
@@ -36,6 +36,11 @@
       required: false,
       type: Boolean,
     },
+    align: {
+      default: false,
+      required: false,
+      type: Boolean,
+    },
   })
 
   const ABSOLUTE = useAbsoluteStore()

packages/better-write-app/src/components/material/InputSelect.vue

@@ -15,7 +15,8 @@
         leave-to-class="opacity-0"
       >
         <ListboxOptions
-          class="fixed py-1 mt-1 text-base bg-theme-background-4 rounded-md shadow-lg max-h-60 overflow-auto ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm z-max"
+          :class="[min ? 'max-h-28' : 'max-h-60']"
+          class="fixed py-1 mt-1 text-base bg-theme-background-4 rounded-md shadow-lg overflow-auto ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm z-max"
         >
           <ListboxOption
             v-for="(it, index) in props.arr"
@@ -85,6 +86,11 @@
       type: Boolean,
       default: false,
     },
+    min: {
+      required: false,
+      type: Boolean,
+      default: false,
+    },
   })
 
   const emit = defineEmits(['update:modelValue'])

packages/better-write-app/src/lang/br/editor.ts

@@ -168,6 +168,7 @@ export default {
       add: 'Adicionar',
       image: 'Imagem',
       comments: 'Comentários',
+      paragraph: 'Parágrafo',
     },
     project: {
       title: 'Projeto',

packages/better-write-app/src/lang/en/editor.ts

@@ -169,6 +169,7 @@ export default {
       add: 'Add',
       image: 'Image',
       comments: 'Comments',
+      paragraph: 'Paragraph',
     },
     project: {
       title: 'Project',

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

@@ -40,6 +40,46 @@ export const useFactory = () => {
         }
       }
 
+      if (type === 'paragraph') {
+        return {
+          type,
+          raw: raw || env.emptyLine(),
+          createdAt: format.actually(),
+          updatedAt: format.actually(),
+          visual: {
+            error: false,
+            info: false,
+            warning: false,
+          },
+          external: {
+            paragraph: {
+              active: false,
+              generator: {
+                font: 'Roboto',
+                fontSize: 12,
+                lineHeight: 1,
+                alignment: 'justify',
+                indent: 3,
+                characterSpacing: 1,
+                color: '#000000',
+                background: '#FFFFFF',
+                italics: false,
+                bold: false,
+                margin: {
+                  top: 2,
+                  bottom: 2,
+                },
+              },
+            },
+            comment: {
+              raw: '',
+              updatedAt: format.actually(),
+              createdAt: format.actually(),
+            },
+          },
+        }
+      }
+
       return {
         type,
         raw: raw || env.emptyLine(),

packages/better-write-app/src/use/storage/dropbox.ts

@@ -100,6 +100,9 @@ export const useDropbox = () => {
           .catch((err: DropboxResponseError<any>) => {
             toast.error(t('toast.project.error'))
           })
+          .finally(() => {
+            isLoading.value = false
+          })
       },
 
       cancel: function () {},

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

@@ -143,22 +143,6 @@ export const useStorage = () => {
         index: 0,
       }
     }
-    _.project?.pages.forEach((target: any) => {
-      if (
-        target['entities'].type === 'paragraph' &&
-        !target['entities'].external &&
-        !target['entities'].external.comment
-      )
-        return
-
-      target['entities'].external = {
-        comment: {
-          raw: '',
-          updatedAt: useFormat().actually(),
-          createdAt: useFormat().actually(),
-        },
-      }
-    })
 
     // <= 0.9.2
     if (!_.editor.configuration.entity) {
@@ -277,13 +261,50 @@ export const useStorage = () => {
         theme: false,
       }
     }
-
     if (!_.pdf.styles.base.background.color) {
       _.pdf.styles.base.background = {
         ..._.pdf.styles.base.background,
         color: '#FFFFFF',
       }
     }
+    _.project?.pages.forEach((page: any) => {
+      page.entities = page.entities.map((entity) => {
+        if (entity.type !== 'paragraph' || entity.external?.paragraph)
+          return entity
+
+        const _entity = entity
+
+        const paragraph = {
+          active: false,
+          generator: {
+            font: 'Roboto',
+            fontSize: 12,
+            lineHeight: 1,
+            alignment: 'justify',
+            indent: 3,
+            characterSpacing: 1,
+            color: '#000000',
+            background: '#FFFFFF',
+            italics: false,
+            bold: false,
+            margin: {
+              top: 2,
+              bottom: 2,
+            },
+          },
+        }
+
+        if (!_entity.external) {
+          _entity.external = {
+            paragraph,
+          }
+        } else {
+          _entity.external['paragraph'] = paragraph
+        }
+
+        return _entity
+      })
+    })
 
     return _
   }