add: 内容编辑侧边栏支持添加自定义字体

packages/core/src/index.js

@@ -293,14 +293,6 @@ class ComPDFKitViewer {
           } else {
             console.error('Invalid webFontURL')
           }
-
-          const notoSansFontResponse = await fetch(webFontURL + 'NotoSansSC-Regular.otf.brotli')
-          if (notoSansFontResponse.ok) {
-            const notoSansFontData = await notoSansFontResponse.arrayBuffer()
-            this.notoSansFont = new Uint8Array(notoSansFontData)
-          } else {
-            console.error('Invalid webFontURL')
-          }
         }
 
         this.messageHandler.on('LoadFont', data => {
@@ -555,7 +547,6 @@ class ComPDFKitViewer {
             webFontURL: this.webFontURL,
             fileList: this.#fileList,
             fontsJson: this.fontsJson,
-            notoSansFont: this.notoSansFont,
           })
 
           this.doc = doc

packages/core/src/worker/compdfkit_worker.js

@@ -166,10 +166,6 @@ class CPDFWorker {
       }
       fontsJson = data.fontsJson
 
-      if (data.notoSansFont) {
-        ComPDFKitJS.opened_Font[1] = data.notoSansFont
-      }
-
       Module._InitComPDFkitFont()
       const doc = Module._InitDocument()
 

packages/webview/src/apis/index.js

@@ -16,6 +16,7 @@ import openElement from './openElement';
 import closeElement from './closeElement';
 import isElementOpen from './isElementOpen';
 import setActiveElementTab from './setActiveElementTab';
+import setCustomFonts from './setCustomFonts';
 
 export default () => {
   const { locale } = i18n.global
@@ -51,6 +52,7 @@ export default () => {
     closeElement: closeElement(useViewer),
     isElementOpen: isElementOpen(useViewer),
     setActiveElementTab: setActiveElementTab(useViewer),
+    setCustomFonts: setCustomFonts(useViewer),
   }
   const documentViewer = core.getDocumentViewer(1);
 

packages/webview/src/apis/setCustomFonts.js

@@ -0,0 +1,7 @@
+export default (store) => (fonts) => {
+  if (Array.isArray(fonts)) {
+    store.setCustomFonts(fonts)
+  } else {
+    console.error('setCustomFonts: fonts must be an array')
+  }
+};

packages/webview/src/components/ContentEditorPanel/ContentEditorPanel.vue

@@ -149,6 +149,11 @@
 
   const { isHeaderDisabled } = defineProps(['isHeaderDisabled'])
   const useViewer = useViewerStore()
+  const isOpen = computed(() => useViewer.isElementOpen('contentEditorPanel'))
+  const type = computed(() => useViewer.getContentEditorType)
+  const rightPanelButtonDisabled = computed(() => useViewer.getRightPanelButtonDisabled)
+  const customFonts = computed(() => useViewer.getCustomFonts)
+
   const instance = getCurrentInstance().appContext.app.config.globalProperties
   const $t = instance.$t
 
@@ -172,25 +177,28 @@
   })
   const loadFont = (data) => {
     const fontFamily = data.fontFamily
-    if (!fontFamilyArr.includes(fontFamily)) {
-      fontFamilyArr.push(fontFamily)
-      fontFamilyOptions.value.push({
-        label: fontFamily,
-        value: fontFamily,
-        class: 'edit-select'
+    useViewer.setCustomFonts(fontFamily)
+  }
+
+  core.addEvent('LoadFont', loadFont)
+  watch(() => customFonts.value, (newValue, oldValue) => {
+    fontFamilyOptions.value = setFontMap(newValue)
+  }, { deep: true })
+
+  const setFontMap = (fonts) => {
+    if (fonts.length) {
+      return fonts.map(font => {
+        return {
+          label: font,
+          value: font,
+          class: 'edit-select'
+        }
       })
     }
   }
-  core.addEvent('LoadFont', loadFont)
-  const fontFamilyArr = ['Helvetica', 'Courier', 'Times-Roman', 'NotoSansSC-Regular', 'NotoSansSC-Bold', 'NotoSerifSC-Regular']
+
   const fontFamilyOptions = ref([])
-  fontFamilyOptions.value = fontFamilyArr.map(fontFamily => {
-    return {
-      label: fontFamily,
-      value: fontFamily,
-      class: 'edit-select'
-    }
-  })
+  fontFamilyOptions.value = setFontMap(customFonts.value)
   const fontStyleOptions = computed(() => {
     return [{
       label: $t('regular'),
@@ -219,10 +227,6 @@
     }
   })
 
-  const isOpen = computed(() => useViewer.isElementOpen('contentEditorPanel'))
-  const type = computed(() => useViewer.getContentEditorType)
-  const rightPanelButtonDisabled = computed(() => useViewer.getRightPanelButtonDisabled)
-
   const imageUrl = ref('')
   const colorPickerValue = ref('rgb(0, 0, 0)')
 

packages/webview/src/stores/modules/viewer.js

@@ -386,6 +386,7 @@ export const useViewerStore = defineStore({
         }
       ]
     },
+    customFonts: ['Helvetica', 'Courier', 'Times-Roman'],
     downloading: false,
     downloadError: '',
     popoverChanged: false,
@@ -534,7 +535,10 @@ export const useViewerStore = defineStore({
     },
     getRightPanelButtonDisabled () {
       return this.rightPanelButtonDisabled
-    }
+    },
+    getCustomFonts () {
+      return this.customFonts
+    },
   },
   actions: {
     resetSetting () {
@@ -748,6 +752,16 @@ export const useViewerStore = defineStore({
     },
     setRightPanelButtonDisabled (value) {
       this.rightPanelButtonDisabled = value
-    }
+    },
+    setCustomFonts (fonts) {
+      if (typeof fonts === 'string') {
+        fonts = [fonts]
+      }
+      for (let i = 0; i < fonts.length; i++) {
+        if (!this.customFonts.includes(fonts[i])) {
+          this.customFonts.push(fonts[i])
+        }
+      }
+    },
   }
 })