fix(editor): image normalize and drop extension support

Novout · Aug 15, 2022 · bfbfacf · bfbfacf
1 parent c3ee594
commit bfbfacf
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 8 deletions.
diff --git a/...rite-app/src/components/page/editor/entity/default/options/EditorEntityDefaultOptions.vue b/...rite-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
@@ -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
@@ -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
@@ -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
@@ -11,9 +11,7 @@ export const getRows = (text: string): string[] => {
   return text
     .split(new RegExp(/<div>(.*?)<\/div>/))
     .map((t) => t?.replaceAll('<br>', ' '))
-    .filter(
-      (_) => _ && !_.includes('<div>') && !_.includes('</div>')
-    )
+    .filter((_) => _ && !_.includes('<div>') && !_.includes('</div>'))
 }
 
 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
@@ -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<string> => {