diff --git a/packages/README.md b/packages/README.md index 3ac72d49e..af798ef60 100644 --- 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/packages/better-write-app/src/components/editor/entity/default/EditorEntityDefaultCustomize.vue b/packages/better-write-app/src/components/editor/entity/default/EditorEntityDefaultCustomize.vue index 54aa619b0..9cbfd8a63 100644 --- a/packages/better-write-app/src/components/editor/entity/default/EditorEntityDefaultCustomize.vue +++ b/packages/better-write-app/src/components/editor/entity/default/EditorEntityDefaultCustomize.vue @@ -24,6 +24,52 @@ +
+ +
+ + + + + + + +
+
(null) @@ -157,15 +206,25 @@ 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( () => CONTEXT.entities[EDITOR.actives.entity.index] ) const options = ref(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(templates.value[0]) + const templateText = ref('') onClickOutside(options as any, () => onClose()) @@ -173,21 +232,44 @@ 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,6 +278,8 @@ }) 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 = @@ -203,4 +287,43 @@ ;(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 + } diff --git a/packages/better-write-app/src/components/material/Modal.vue b/packages/better-write-app/src/components/material/Modal.vue index f269cd524..f50197312 100644 --- 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" >
diff --git a/packages/better-write-app/src/lang/br/editor.ts b/packages/better-write-app/src/lang/br/editor.ts index ce17d97d2..ed9a19711 100644 --- 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 index bd89e39ed..2cfc4f21a 100644 --- 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 index 507bab4c9..e3aab5e3f 100644 --- 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 index 647748579..ea758e65f 100644 --- 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 index 8f6911d83..09aaf67ba 100644 --- 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 index efcf65319..288aab0a9 100644 --- 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 index 92620c852..344e69d73 100644 --- 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 index 7e13be0b2..dc32310b2 100644 --- 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 {