From 4524617e38e575d5c06b2d2ab582ea15e57f5346 Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Tue, 3 Jan 2023 22:01:14 +0800
Subject: [PATCH] feat: support preview office file

---
 packages/client/src/components/icons/IconPDF.tsx  | 14 ++++++++++++++
 packages/client/src/components/icons/IconPPT.tsx  | 15 +++++++++++++++
 .../client/src/components/icons/IconSheet.tsx     | 15 +++++++++++++++
 packages/client/src/components/icons/IconWord.tsx | 14 ++++++++++++++
 packages/client/src/components/icons/index.tsx    |  2 ++
 .../tiptap/core/wrappers/attachment/file-icon.tsx | 12 +++++++++++-
 .../wrappers/attachment/player/index.module.scss  |  8 ++++++++
 .../core/wrappers/attachment/player/index.tsx     |  9 +++++++++
 packages/client/src/tiptap/prose-utils/file.ts    |  9 ++++++++-
 9 files changed, 96 insertions(+), 2 deletions(-)
 create mode 100644 packages/client/src/components/icons/IconPPT.tsx
 create mode 100644 packages/client/src/components/icons/IconSheet.tsx

diff --git a/packages/client/src/components/icons/IconPDF.tsx b/packages/client/src/components/icons/IconPDF.tsx
index b2e7b592..6c023d5e 100644
--- a/packages/client/src/components/icons/IconPDF.tsx
+++ b/packages/client/src/components/icons/IconPDF.tsx
@@ -35,3 +35,17 @@ export const IconPDF: React.FC<{ style?: React.CSSProperties }> = ({ style = {}
     />
   );
 };
+
+export const IconFilePDF: React.FC<{ style?: React.CSSProperties }> = ({ style = {} }) => {
+  return (
+    <Icon
+      style={style}
+      svg={
+        <svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em">
+          <path fill="none" d="M0 0h24v24H0z" />
+          <path d="M12 16H8V8h4a4 4 0 1 1 0 8zm-2-6v4h2a2 2 0 1 0 0-4h-2zm5-6H5v16h14V8h-4V4zM3 2.992C3 2.444 3.447 2 3.999 2H16l5 5v13.993A1 1 0 0 1 20.007 22H3.993A1 1 0 0 1 3 21.008V2.992z" />
+        </svg>
+      }
+    />
+  );
+};
diff --git a/packages/client/src/components/icons/IconPPT.tsx b/packages/client/src/components/icons/IconPPT.tsx
new file mode 100644
index 00000000..12f24c65
--- /dev/null
+++ b/packages/client/src/components/icons/IconPPT.tsx
@@ -0,0 +1,15 @@
+import { Icon } from '@douyinfe/semi-ui';
+
+export const IconFilePPT: React.FC<{ style?: React.CSSProperties }> = ({ style = {} }) => {
+  return (
+    <Icon
+      style={style}
+      svg={
+        <svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em">
+          <path fill="none" d="M0 0h24v24H0z" />
+          <path d="M3 2.992C3 2.444 3.447 2 3.999 2H16l5 5v13.993A1 1 0 0 1 20.007 22H3.993A1 1 0 0 1 3 21.008V2.992zM5 4v16h14V8h-3v6h-6v2H8V8h7V4H5zm5 6v2h4v-2h-4z" />
+        </svg>
+      }
+    />
+  );
+};
diff --git a/packages/client/src/components/icons/IconSheet.tsx b/packages/client/src/components/icons/IconSheet.tsx
new file mode 100644
index 00000000..68cea258
--- /dev/null
+++ b/packages/client/src/components/icons/IconSheet.tsx
@@ -0,0 +1,15 @@
+import { Icon } from '@douyinfe/semi-ui';
+
+export const IconFileSheet: React.FC<{ style?: React.CSSProperties }> = ({ style = {} }) => {
+  return (
+    <Icon
+      style={style}
+      svg={
+        <svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em">
+          <path fill="none" d="M0 0h24v24H0z" />
+          <path d="M13.2 12l2.8 4h-2.4L12 13.714 10.4 16H8l2.8-4L8 8h2.4l1.6 2.286L13.6 8H15V4H5v16h14V8h-3l-2.8 4zM3 2.992C3 2.444 3.447 2 3.999 2H16l5 5v13.993A1 1 0 0 1 20.007 22H3.993A1 1 0 0 1 3 21.008V2.992z" />
+        </svg>
+      }
+    />
+  );
+};
diff --git a/packages/client/src/components/icons/IconWord.tsx b/packages/client/src/components/icons/IconWord.tsx
index 3846fc95..5302652b 100644
--- a/packages/client/src/components/icons/IconWord.tsx
+++ b/packages/client/src/components/icons/IconWord.tsx
@@ -35,3 +35,17 @@ export const IconWord: React.FC<{ style?: React.CSSProperties }> = ({ style = {}
     />
   );
 };
+
+export const IconFileWord: React.FC<{ style?: React.CSSProperties }> = ({ style = {} }) => {
+  return (
+    <Icon
+      style={style}
+      svg={
+        <svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em">
+          <path fill="none" d="M0 0h24v24H0z" />
+          <path d="M16 8v8h-2l-2-2-2 2H8V8h2v5l2-2 2 2V8h1V4H5v16h14V8h-3zM3 2.992C3 2.444 3.447 2 3.999 2H16l5 5v13.993A1 1 0 0 1 20.007 22H3.993A1 1 0 0 1 3 21.008V2.992z" />
+        </svg>
+      }
+    />
+  );
+};
diff --git a/packages/client/src/components/icons/index.tsx b/packages/client/src/components/icons/index.tsx
index 220d4640..4c5cf48e 100644
--- a/packages/client/src/components/icons/index.tsx
+++ b/packages/client/src/components/icons/index.tsx
@@ -45,12 +45,14 @@ export * from './IconMindSide';
 export * from './IconOrderedList';
 export * from './IconOverview';
 export * from './IconPDF';
+export * from './IconPPT';
 export * from './IconQuote';
 export * from './IconRight';
 export * from './IconSearch';
 export * from './IconSearchReplace';
 export * from './IconSetting';
 export * from './IconShare';
+export * from './IconSheet';
 export * from './IconSplitCell';
 export * from './IconStatus';
 export * from './IconStructure';
diff --git a/packages/client/src/tiptap/core/wrappers/attachment/file-icon.tsx b/packages/client/src/tiptap/core/wrappers/attachment/file-icon.tsx
index 28800f19..10878e51 100644
--- a/packages/client/src/tiptap/core/wrappers/attachment/file-icon.tsx
+++ b/packages/client/src/tiptap/core/wrappers/attachment/file-icon.tsx
@@ -1,4 +1,5 @@
 import { IconFile, IconImage, IconSong, IconVideo } from '@douyinfe/semi-icons';
+import { IconFilePDF, IconFilePPT, IconFileSheet, IconFileWord } from 'components/icons';
 import { normalizeFileType } from 'tiptap/prose-utils';
 
 export const getFileTypeIcon = (fileType: string) => {
@@ -18,7 +19,16 @@ export const getFileTypeIcon = (fileType: string) => {
       return <IconImage />;
 
     case 'pdf':
-      return <IconFile />;
+      return <IconFilePDF />;
+
+    case 'word':
+      return <IconFileWord />;
+
+    case 'excel':
+      return <IconFileSheet />;
+
+    case 'ppt':
+      return <IconFilePPT />;
 
     default: {
       const value: never = type;
diff --git a/packages/client/src/tiptap/core/wrappers/attachment/player/index.module.scss b/packages/client/src/tiptap/core/wrappers/attachment/player/index.module.scss
index c04d2a61..4bf48a96 100644
--- a/packages/client/src/tiptap/core/wrappers/attachment/player/index.module.scss
+++ b/packages/client/src/tiptap/core/wrappers/attachment/player/index.module.scss
@@ -10,3 +10,11 @@
     height: 100%;
   }
 }
+
+.iframeWrapper {
+  width: 100%;
+  margin: auto;
+  overflow: auto;
+  border: 0;
+  outline: none;
+}
diff --git a/packages/client/src/tiptap/core/wrappers/attachment/player/index.tsx b/packages/client/src/tiptap/core/wrappers/attachment/player/index.tsx
index cd8ea655..90d8727b 100644
--- a/packages/client/src/tiptap/core/wrappers/attachment/player/index.tsx
+++ b/packages/client/src/tiptap/core/wrappers/attachment/player/index.tsx
@@ -33,6 +33,15 @@ export const Player: React.FC<IProps> = ({ url, fileType }) => {
 
     if (type === 'pdf') return <PDFPlayer url={url} />;
 
+    if (type === 'word' || type === 'excel' || type === 'ppt') {
+      return (
+        <iframe
+          className={styles.iframeWrapper}
+          src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(url)}`}
+        />
+      );
+    }
+
     return <Text type="tertiary">暂不支持预览该类型文件</Text>;
   }, [type, url]);
 
diff --git a/packages/client/src/tiptap/prose-utils/file.ts b/packages/client/src/tiptap/prose-utils/file.ts
index 43762227..efe65939 100644
--- a/packages/client/src/tiptap/prose-utils/file.ts
+++ b/packages/client/src/tiptap/prose-utils/file.ts
@@ -31,13 +31,20 @@ export const normalizeFileSize = (size) => {
   return (size / 1024 / 1024).toFixed(2) + ' MB';
 };
 
-export type FileType = 'image' | 'audio' | 'video' | 'pdf' | 'file';
+export type FileType = 'image' | 'audio' | 'video' | 'pdf' | 'word' | 'excel' | 'ppt' | 'file';
 
 export const normalizeFileType = (fileType): FileType => {
   if (!fileType) return 'file';
 
   if (fileType === 'application/pdf') return 'pdf';
 
+  if (fileType.startsWith('application/') && ['.document', 'word'].some((type) => fileType.includes(type)))
+    return 'word';
+
+  if (fileType.startsWith('application/') && ['presentation'].some((type) => fileType.includes(type))) return 'excel';
+
+  if (fileType.startsWith('application/') && ['sheet'].some((type) => fileType.includes(type))) return 'ppt';
+
   if (fileType.startsWith('image')) {
     return 'image';
   }