feat(editor): import docs from docx (#11774)

Support importing .docx files, as mentioned in https://github.com/toeverything/AFFiNE/issues/10154#issuecomment-2655744757 It essentially uses mammoth to convert the docx to html, and then imports the html with the standard steps.  ## Summary by CodeRabbit * **New Features** * Import Microsoft Word (.docx) files directly via the import dialog (creates new documents). * .docx added as a selectable file type in the file picker and import options. * **Localization** * Added localized labels and tooltips for DOCX import in English, Simplified Chinese, and Traditional Chinese.  --------- Co-authored-by: DarkSky <25152247+darkskygit@users.noreply.github.com> Co-authored-by: DarkSky <darksky2048@gmail.com>
2025-11-15 15:51:23 +08:00
parent e5db0e66c1
commit 17ec76540b
14 changed files with 195 additions and 15 deletions
--- a/blocksuite/affine/blocks/root/package.json
+++ b/blocksuite/affine/blocks/root/package.json
@@ -46,7 +46,7 @@
    "@preact/signals-core": "^1.8.0",
    "@toeverything/theme": "^1.1.16",
    "@types/lodash-es": "^4.17.12",
-    "dompurify": "^3.2.4",
+    "dompurify": "^3.3.0",
    "html2canvas": "^1.4.1",
    "lit": "^3.2.0",
    "lodash-es": "^4.17.21",
--- a/blocksuite/affine/shared/package.json
+++ b/blocksuite/affine/shared/package.json
@@ -24,7 +24,7 @@
    "@types/lodash-es": "^4.17.12",
    "@types/mdast": "^4.0.4",
    "bytes": "^3.1.2",
-    "dompurify": "^3.2.4",
+    "dompurify": "^3.3.0",
    "fractional-indexing": "^3.2.0",
    "lit": "^3.2.0",
    "lodash-es": "^4.17.21",
--- a/blocksuite/affine/shared/src/adapters/html/html.ts
+++ b/blocksuite/affine/shared/src/adapters/html/html.ts
@@ -20,6 +20,7 @@ import {
  type ToDocSnapshotPayload,
  type Transformer,
 } from '@blocksuite/store';
+import DOMPurify from 'dompurify';
 import type { Root } from 'hast';
 import rehypeParse from 'rehype-parse';
 import rehypeStringify from 'rehype-stringify';
@@ -297,7 +298,8 @@ export class HtmlAdapter extends BaseAdapter<Html> {
  override async toDocSnapshot(
    payload: ToDocSnapshotPayload<string>
  ): Promise<DocSnapshot> {
-    const htmlAst = this._htmlToAst(payload.file);
+    const sanitized = DOMPurify.sanitize(payload.file);
+    const htmlAst = this._htmlToAst(sanitized);
    const titleAst = HastUtils.querySelector(htmlAst, 'title');
    const blockSnapshotRoot = {
      type: 'block',
--- a/blocksuite/affine/shared/src/utils/file/filesys.ts
+++ b/blocksuite/affine/shared/src/utils/file/filesys.ts
@@ -92,6 +92,13 @@ const FileTypes: NonNullable<OpenFilePickerOptions['types']> = [
      'application/zip': ['.zip'],
    },
  },
+  {
+    description: 'Docx',
+    accept: {
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+        ['.docx'],
+    },
+  },
  {
    description: 'MindMap',
    accept: {
@@ -111,6 +118,7 @@ type AcceptTypes =
  | 'Markdown'
  | 'Html'
  | 'Zip'
+  | 'Docx'
  | 'MindMap';

 export async function openFilesWith(
--- a/blocksuite/affine/widgets/linked-doc/package.json
+++ b/blocksuite/affine/widgets/linked-doc/package.json
@@ -28,6 +28,7 @@
    "fflate": "^0.8.2",
    "lit": "^3.2.0",
    "lodash-es": "^4.17.21",
+    "mammoth": "^1.11.0",
    "rxjs": "^7.8.1",
    "zod": "^3.23.8"
  },
--- a/blocksuite/affine/widgets/linked-doc/src/transformers/docx.ts
+++ b/blocksuite/affine/widgets/linked-doc/src/transformers/docx.ts
@@ -0,0 +1,47 @@
+import type { ExtensionType, Schema, Workspace } from '@blocksuite/store';
+// @ts-ignore
+import { convertToHtml } from 'mammoth/mammoth.browser';
+
+import { HtmlTransformer } from './html';
+
+type ImportDocxOptions = {
+  collection: Workspace;
+  schema: Schema;
+  imported: Blob;
+  extensions: ExtensionType[];
+};
+
+/**
+ * Imports a .docx file into a doc.
+ *
+ * @param options - The import options.
+ * @param options.collection - The target doc collection.
+ * @param options.schema - The schema of the target doc collection.
+ * @param options.imported - The .docx file as a Blob.
+ * @returns A Promise that resolves to the ID of the newly created doc, or undefined if import fails.
+ */
+async function importDocx({
+  collection,
+  schema,
+  imported,
+  extensions,
+}: ImportDocxOptions) {
+  try {
+    const { value } = await convertToHtml({
+      arrayBuffer: await imported.arrayBuffer(),
+    });
+    return await HtmlTransformer.importHTMLToDoc({
+      collection,
+      schema,
+      html: value,
+      extensions,
+    });
+  } catch (e) {
+    console.error('Failed to import .docx file:', e);
+    return undefined;
+  }
+}
+
+export const DocxTransformer = {
+  importDocx,
+};
--- a/blocksuite/affine/widgets/linked-doc/src/transformers/index.ts
+++ b/blocksuite/affine/widgets/linked-doc/src/transformers/index.ts
@@ -1,3 +1,4 @@
+export { DocxTransformer } from './docx.js';
 export { HtmlTransformer } from './html.js';
 export { MarkdownTransformer } from './markdown.js';
 export { NotionHtmlTransformer } from './notion-html.js';
--- a/blocksuite/framework/std/package.json
+++ b/blocksuite/framework/std/package.json
@@ -19,7 +19,7 @@
    "@preact/signals-core": "^1.8.0",
    "@types/hast": "^3.0.4",
    "@types/lodash-es": "^4.17.12",
-    "dompurify": "^3.2.4",
+    "dompurify": "^3.3.0",
    "fractional-indexing": "^3.2.0",
    "lib0": "^0.2.97",
    "lit": "^3.2.0",