From bfbfacf5eab6d55efe1d7498947d8943365df739 Mon Sep 17 00:00:00 2001 From: Giovane Cardoso Date: Sun, 14 Aug 2022 23:32:05 -0300 Subject: [PATCH] fix(editor): image normalize and drop extension support --- .../options/EditorEntityDefaultOptions.vue | 4 ++++ packages/better-write-app/src/use/block/text.ts | 2 ++ packages/better-write-app/src/use/listener.ts | 4 +++- packages/better-write-app/src/use/raw.ts | 17 +++++++++++++---- .../src/index.ts | 4 +--- .../better-write-image-converter/src/index.ts | 9 +++++++++ 6 files changed, 32 insertions(+), 8 deletions(-) diff --git a/packages/better-write-app/src/components/page/editor/entity/default/options/EditorEntityDefaultOptions.vue b/packages/better-write-app/src/components/page/editor/entity/default/options/EditorEntityDefaultOptions.vue index 0574fb354..e1ef62851 100644 --- a/packages/better-write-app/src/components/page/editor/entity/default/options/EditorEntityDefaultOptions.vue +++ b/packages/better-write-app/src/components/page/editor/entity/default/options/EditorEntityDefaultOptions.vue @@ -220,6 +220,7 @@ import { useFactory } from '@/use/factory' import { usePlugin } from 'better-write-plugin-core' import { useEntity } from '@/use/entity' + import { useStorage } from '@/use/storage/storage' const EDITOR = useEditorStore() const ABSOLUTE = useAbsoluteStore() @@ -238,6 +239,7 @@ const plugin = usePlugin() const factory = useFactory() const ent = useEntity() + const storage = useStorage() onClickOutside(options as any, () => onClose()) @@ -311,6 +313,8 @@ if (type === 'image') { factory.simulate().file(async (content: Entity) => { CONTEXT.insert(content, EDITOR.actives.entity.index + 1) + + await storage.normalize() }) return diff --git a/packages/better-write-app/src/use/block/text.ts b/packages/better-write-app/src/use/block/text.ts index 96278e013..cc5f245b5 100644 --- a/packages/better-write-app/src/use/block/text.ts +++ b/packages/better-write-app/src/use/block/text.ts @@ -328,6 +328,8 @@ export const useBlockText = ({ target: value + 1, position: 'auto', }) + + await storage.normalize() }) } diff --git a/packages/better-write-app/src/use/listener.ts b/packages/better-write-app/src/use/listener.ts index 5c9c22415..72c2958db 100644 --- a/packages/better-write-app/src/use/listener.ts +++ b/packages/better-write-app/src/use/listener.ts @@ -2,6 +2,7 @@ import { useAbsoluteStore } from '@/store/absolute' import { useEventListener } from '@vueuse/core' import { usePlugin } from 'better-write-plugin-core' import { read } from 'better-write-plugin-importer' +import { isImageExtension } from 'better-write-image-converter' import { ProjectObject } from 'better-write-types' import { useI18n } from 'vue-i18n' import { useToast } from 'vue-toastification' @@ -119,7 +120,8 @@ export const useListener = () => { return } - toast.warning(t('toast.project.unsupportedExtension')) + if (!isImageExtension(file.name)) + toast.warning(t('toast.project.unsupportedExtension')) } } } diff --git a/packages/better-write-app/src/use/raw.ts b/packages/better-write-app/src/use/raw.ts index e0feaabb0..252fb8c21 100644 --- a/packages/better-write-app/src/use/raw.ts +++ b/packages/better-write-app/src/use/raw.ts @@ -9,7 +9,7 @@ import { useClipboard } from '@vueuse/core' import { useUtils } from './utils' import { useExternalsStore } from '@/store/externals' import { useEnv } from './env' -import { useSubstitution } from './tools/substitution' +import { useStorage } from '@/use/storage/storage' import { nextTick } from 'vue' import { useContextStore } from '@/store/context' import { useFactory } from './factory' @@ -18,6 +18,7 @@ import { useAbsoluteStore } from '@/store/absolute' import { useEditorStore } from '@/store/editor' import { useToast } from 'vue-toastification' import { useI18n } from 'vue-i18n' +import { ImageToForcePNG } from 'better-write-image-converter' export const bold = () => { const open = () => { @@ -200,7 +201,7 @@ export const useRaw = () => { const env = useEnv() const utils = useUtils() const plugin = usePlugin() - const substitution = useSubstitution() + const storage = useStorage() const factory = useFactory() const toast = useToast() const { t } = useI18n() @@ -408,7 +409,13 @@ export const useRaw = () => { .convert() .read(file, 'image') .then(async (data) => { - const entity = factory.entity().create('image', data as string) + const raw = await ImageToForcePNG({ + raw: data as string, + width: 2000, + height: 2000, + }) + + const entity = factory.entity().create('image', raw) entity.external!.image!.name = file.name @@ -423,9 +430,11 @@ export const useRaw = () => { data: item.raw, index: CONTEXT.entities.indexOf(item), }) + + await storage.normalize() }) .catch(() => { - toast(t('toast.entity.image.errorLoad')) + toast.error(t('toast.entity.image.errorLoad')) }) } } diff --git a/packages/better-write-contenteditable-ast/src/index.ts b/packages/better-write-contenteditable-ast/src/index.ts index 7de97a568..ef3a6d58d 100644 --- a/packages/better-write-contenteditable-ast/src/index.ts +++ b/packages/better-write-contenteditable-ast/src/index.ts @@ -11,9 +11,7 @@ export const getRows = (text: string): string[] => { return text .split(new RegExp(/
(.*?)<\/div>/)) .map((t) => t?.replaceAll('
', ' ')) - .filter( - (_) => _ && !_.includes('
') && !_.includes('
') - ) + .filter((_) => _ && !_.includes('
') && !_.includes('
')) } export const parse = (row: string) => { diff --git a/packages/better-write-image-converter/src/index.ts b/packages/better-write-image-converter/src/index.ts index 9f9ee0d9c..4d894c7b7 100644 --- a/packages/better-write-image-converter/src/index.ts +++ b/packages/better-write-image-converter/src/index.ts @@ -1,5 +1,14 @@ import { ImageToForcePNGOptions } from 'better-write-types' +export const isImageExtension = (text: string) => { + return ( + text.endsWith('.png') || + text.endsWith('.jpg') || + text.endsWith('.jpeg') || + text.endsWith('.svg') + ) +} + export const ImageToForcePNG = ( options: ImageToForcePNGOptions ): Promise => {