🌈 style(ts): 类型定义调整

ashuicoder · Dec 6, 2023 · 0caea26 · 0caea26
1 parent 11c6d1d
commit 0caea26
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 41 deletions.
diff --git a/components/naive-ui-editor/src/NaiveUiEditor.vue b/components/naive-ui-editor/src/NaiveUiEditor.vue
@@ -10,10 +10,6 @@ import type { Props, Emits } from './types'
 const props = withDefaults(defineProps<Props>(), {
   mode: 'default',
   height: 500,
-  editorConfig: {
-    placeholder: '请输入内容...',
-    MENU_CONF: {},
-  }
 })
 
 const emits = defineEmits<Emits>()

diff --git a/components/naive-ui-editor/src/hooks/useFile.ts b/components/naive-ui-editor/src/hooks/useFile.ts
@@ -1,29 +1,25 @@
 import { findImgFromHtml, extractImgFromRtf, transAsImgToFile, replaceAsUpdSrc } from '../utils/file'
 import to from 'await-to-js'
 
-import type { Ref } from 'vue'
-import type { InsertFnType, IEditorConfig } from '@wangeditor/editor';
-import type { RequestFun } from '../types'
+import type { IEditorConfig, IDomEditor } from '@wangeditor/editor';
+import type { InsertFnType, UseFile, UseFileProps } from '../types'
 
 /**
  * @name 富文本文件相关处理方法
  * @param loading
  * @param requestFunc
  * @returns 
  */
-export const useFile = ({
+export const useFile: UseFile = ({
   loading,
   requestFunc,
-}: {
-  loading: Ref<boolean>,
-  requestFunc: RequestFun,
-}) => {
+}: UseFileProps) => {
   /**
    * 获取图片、视频、链接标签数
    * @param editor 
    * @returns 
    */
-  const getElementLen = (editor) => {
+  const getElementLen = (editor: IDomEditor) => {
     return ['image', 'link', 'video']
       .map((tag) => editor.getElemsByType(tag).length)
       .reduce((a, b) => a + b, 0);
@@ -42,15 +38,17 @@ export const useFile = ({
   /**
    * 自定义配置
    */
-  const formatConfig = (editorConfig: Partial<IEditorConfig>) => {
-    const config = { ...(editorConfig || {}) }
-    config.MENU_CONF = {
-      uploadImage: {
-        customUpload,
-      },
-      ...(config.MENU_CONF || {})
+  const formatConfig = (editorConfig: Partial<IEditorConfig> | undefined) => {
+    return {
+      placeholder: '请输入内容...',
+      ...(editorConfig || {}),
+      MENU_CONF: {
+        ...(editorConfig?.MENU_CONF || {}),
+        uploadImage: {
+          customUpload,
+        },
+      }
     }
-    return config
   }
 
   /**
@@ -60,12 +58,12 @@ export const useFile = ({
    * @param event
    * @returns 
    */
-  const customPaste = async (editor, event) => {
+  const customPaste = async (editor: IDomEditor, event: ClipboardEvent): Promise<boolean | void> => {
     // 获取粘贴的html部分，该部分包含了图片img标签
-    let html = event.clipboardData.getData('text/html');
+    let html = event.clipboardData?.getData('text/html') || '';
 
     // 获取rtf数据（从word、wps复制粘贴时有），复制粘贴过程中图片的数据就保存在rtf中
-    const rtf = event.clipboardData.getData('text/rtf');
+    const rtf = event.clipboardData?.getData('text/rtf') || '';
 
     if (html && rtf) {
       // 该条件分支即表示要自定义word粘贴

diff --git a/components/naive-ui-editor/src/types/index.ts b/components/naive-ui-editor/src/types/index.ts
@@ -1,5 +1,5 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-import type { IEditorConfig, IToolbarConfig } from '@wangeditor/editor';
+import type { Ref } from 'vue';
+import type { IEditorConfig, IToolbarConfig, IDomEditor } from '@wangeditor/editor';
 
 export interface Props {
   value?: string
@@ -9,13 +9,28 @@ export interface Props {
   toolbarConfig?: Partial<IToolbarConfig>
   requestFunc?: RequestFun
 }
+
 export type Emits = {
   (e: 'update:value', value: string): void
 }
 
-export type Recordable<T = any> = Record<string, T>
-
 export type RequestFun = (
   file: File,
   onProgerss?: (e: { percent: number }) => void
 ) => Promise<string>
+
+export type InsertFnType = (url: string, poster?: string) => void
+
+export type UseFile = (e: UseFileProps) => {
+  getElementLen: (editor: IDomEditor) => number
+  formatConfig: (editorConfig: Partial<IEditorConfig> | undefined) => Partial<IEditorConfig>
+  customPaste: (editor: IDomEditor, event: ClipboardEvent) => Promise<boolean | void>
+}
+export interface UseFileProps {
+  loading: Ref<boolean>,
+  requestFunc: RequestFun,
+}
+
+export interface HexSource extends File {
+  hex: string
+}
diff --git a/components/naive-ui-editor/src/utils/file.ts b/components/naive-ui-editor/src/utils/file.ts
@@ -1,3 +1,5 @@
+import type { HexSource } from '../types'
+
 /**
  * base64转buffer
  * @param base64 文件base64 file
@@ -34,7 +36,7 @@ const transAsB64ToFile = (base64: string, reportName: string, type = 'image/png'
  * @param htmlData
  * @return Array
  */
-export const findImgFromHtml = (htmlData) => {
+export const findImgFromHtml = (htmlData: string) => {
   const imgReg = /<img.*?(?:>|\/>)/gi; //匹配图片中的img标签
   const srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; // 匹配图片中的src
 
@@ -45,9 +47,9 @@ export const findImgFromHtml = (htmlData) => {
 
   const srcArr: string[] = [];
   for (let i = 0; i < arr.length; i++) {
-    const src: string[] = arr[i].match(srcReg);
+    const src: string[] | null = arr[i].match(srcReg);
     // 获取图片地址
-    srcArr.push(src[1]);
+    src && srcArr.push(src[1]);
   }
 
   return srcArr;
@@ -58,7 +60,7 @@ export const findImgFromHtml = (htmlData) => {
  * @param rtfData
  * @return Array
  */
-export const extractImgFromRtf = (rtfData) => {
+export const extractImgFromRtf = (rtfData: string) => {
   if (!rtfData) {
     return [];
   }
@@ -84,7 +86,7 @@ export const extractImgFromRtf = (rtfData) => {
 
       if (imageType) {
         result.push({
-          hex: image.replace(regexPictureHeader, '').replace(/[^\da-fA-F]/g, ''),
+          hex: image.replace(regexPictureHeader, '').replace(/[^\da-fA-F]/g, '') || '',
           type: imageType,
           name,
         });
@@ -102,7 +104,8 @@ export const extractImgFromRtf = (rtfData) => {
  * @param isBase64Data 是否是Base64的图片数据
  * @return File
  */
-export const transAsImgToFile = (imageSrcs, imagesHexSources, isBase64Data = true) => {
+
+export const transAsImgToFile = (imageSrcs: string[], imagesHexSources: HexSource[], isBase64Data = true) => {
   const imgs: File[] = [];
   if (imageSrcs.length === imagesHexSources.length) {
     for (let i = 0; i < imageSrcs.length; i++) {
@@ -128,7 +131,7 @@ export const transAsImgToFile = (imageSrcs, imagesHexSources, isBase64Data = tru
  * @param imageSrcs html中img的属性src的值的集合
  * @return String
  */
-export const replaceAsUpdSrc = (htmlData, imageSrcs, imagesHexSources, newImgs) => {
+export const replaceAsUpdSrc = (htmlData: string, imageSrcs: string[], imagesHexSources: HexSource[], newImgs: string[]) => {
   if (imageSrcs.length === imagesHexSources.length) {
     for (let i = 0; i < imageSrcs.length; i++) {
       htmlData = htmlData.replace(imageSrcs[i], newImgs[i]);
@@ -143,11 +146,6 @@ export const replaceAsUpdSrc = (htmlData, imageSrcs, imagesHexSources, newImgs)
  */
 const transAsHexToB64 = (hexStr) => {
   return window.btoa(
-    hexStr
-      .match(/\w{2}/g)
-      .map((char) => {
-        return String.fromCharCode(parseInt(char, 16));
-      })
-      .join('')
+    hexStr.match(/\w{2}/g).map((char) => String.fromCharCode(parseInt(char, 16)))?.join('') || []
   );
 }