feat(ee): docx word export (#2294)

* vendorize  prosemirror-docx - wip
* feat(ee): docx word export
* sync

apps/client/src/components/common/export-modal.tsx

@@ -6,13 +6,21 @@ import {
   Select,
   Switch,
   Divider,
+  Tooltip,
+  Badge,
 } from "@mantine/core";
-import { exportPage } from "@/features/page/services/page-service.ts";
+import {
+  exportPage,
+  exportPageToDocx,
+} from "@/features/page/services/page-service.ts";
 import { useState } from "react";
 import { ExportFormat } from "@/features/page/types/page.types.ts";
 import { notifications } from "@mantine/notifications";
 import { exportSpace } from "@/features/space/services/space-service";
 import { useTranslation } from "react-i18next";
+import { Feature } from "@/ee/features";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label";
 
 interface ExportModalProps {
   id: string;
@@ -32,17 +40,25 @@ export default function ExportModal({
   const [includeAttachments, setIncludeAttachments] = useState<boolean>(false);
   const [isExporting, setIsExporting] = useState<boolean>(false);
   const { t } = useTranslation();
+  const upgradeLabel = useUpgradeLabel();
+  const isDocx = format === ExportFormat.Docx;
+  const docxEntitled = useHasFeature(Feature.DOCX_EXPORT);
+  const blockedByLicense = isDocx && !docxEntitled;
 
   const handleExport = async () => {
     setIsExporting(true);
     try {
       if (type === "page") {
-        await exportPage({
-          pageId: id,
-          format,
-          includeChildren,
-          includeAttachments,
-        });
+        if (format === ExportFormat.Docx) {
+          await exportPageToDocx({ pageId: id });
+        } else {
+          await exportPage({
+            pageId: id,
+            format,
+            includeChildren,
+            includeAttachments,
+          });
+        }
       }
       if (type === "space") {
         await exportSpace({ spaceId: id, format, includeAttachments });
@@ -88,10 +104,15 @@ export default function ExportModal({
             <div>
               <Text size="md">{t("Format")}</Text>
             </div>
-            <ExportFormatSelection format={format} onChange={handleChange} />
+            <ExportFormatSelection
+              format={format}
+              onChange={handleChange}
+              includeDocx={type === "page"}
+              docxEntitled={docxEntitled}
+            />
           </Group>
 
-          {type === "page" && (
+          {type === "page" && !isDocx && (
             <>
               <Divider my="sm" />
 
@@ -143,7 +164,16 @@ export default function ExportModal({
             <Button onClick={onClose} variant="default">
               {t("Cancel")}
             </Button>
-            <Button onClick={handleExport} loading={isExporting}>{t("Export")}</Button>
+            <Tooltip label={upgradeLabel} disabled={!blockedByLicense} withArrow>
+              <Button
+                onClick={handleExport}
+                loading={isExporting}
+                disabled={blockedByLicense}
+                data-disabled={blockedByLicense || undefined}
+              >
+                {t("Export")}
+              </Button>
+            </Tooltip>
           </Group>
         </Modal.Body>
       </Modal.Content>
@@ -154,23 +184,49 @@ export default function ExportModal({
 interface ExportFormatSelection {
   format: ExportFormat;
   onChange: (value: string) => void;
+  includeDocx?: boolean;
+  docxEntitled?: boolean;
 }
-function ExportFormatSelection({ format, onChange }: ExportFormatSelection) {
+function ExportFormatSelection({
+  format,
+  onChange,
+  includeDocx,
+  docxEntitled,
+}: ExportFormatSelection) {
   const { t } = useTranslation();
 
+  const data = [
+    { value: "markdown", label: "Markdown" },
+    { value: "html", label: "HTML" },
+    ...(includeDocx
+      ? [{ value: "docx", label: "Word (.docx)", disabled: !docxEntitled }]
+      : []),
+  ];
+
   return (
     <Select
-      data={[
-        { value: "markdown", label: "Markdown" },
-        { value: "html", label: "HTML" },
-      ]}
+      data={data}
       defaultValue={format}
       onChange={onChange}
-      styles={{ wrapper: { maxWidth: 120 } }}
-      comboboxProps={{ width: "120" }}
+      styles={{ wrapper: { maxWidth: 140 }, option: { opacity: 1 } }}
+      comboboxProps={{ width: 200 }}
       allowDeselect={false}
       withCheckIcon={false}
       aria-label={t("Select export format")}
+      renderOption={({ option }) =>
+        option.value === "docx" && !docxEntitled ? (
+          <div>
+            <Text size="sm" c="dimmed">
+              {option.label}
+            </Text>
+            <Badge size="xs" mt={4}>
+              {t("Enterprise")}
+            </Badge>
+          </div>
+        ) : (
+          <Text size="sm">{option.label}</Text>
+        )
+      }
     />
   );
 }

apps/client/src/ee/features.ts

@@ -19,4 +19,5 @@ export const Feature = {
   SHARING_CONTROLS: 'sharing:controls',
   TEMPLATES: 'templates',
   VIEWER_COMMENTS: 'comment:viewer',
+  DOCX_EXPORT: 'export:docx',
 } as const;

apps/client/src/features/page/services/page-service.ts

@@ -132,6 +132,25 @@ export async function exportPage(data: IExportPageParams): Promise<void> {
   saveAs(req.data, decodedFileName);
 }
 
+export async function exportPageToDocx(data: { pageId: string }): Promise<void> {
+  const req = await api.post("/docx-export", data, {
+    responseType: "blob",
+  });
+
+  const fileName = req?.headers["content-disposition"]
+    .split("filename=")[1]
+    .replace(/"/g, "");
+
+  let decodedFileName = fileName;
+  try {
+    decodedFileName = decodeURIComponent(fileName);
+  } catch (err) {
+    // fallback to raw filename
+  }
+
+  saveAs(req.data, decodedFileName);
+}
+
 export async function importPage(file: File, spaceId: string) {
   const formData = new FormData();
   formData.append("spaceId", spaceId);

apps/client/src/features/page/types/page.types.ts

@@ -98,4 +98,5 @@ export interface IExportPageParams {
 export enum ExportFormat {
   HTML = "html",
   Markdown = "markdown",
+  Docx = "docx",
 }

apps/client/src/lib/api-client.ts

@@ -10,7 +10,11 @@ const api: AxiosInstance = axios.create({
 api.interceptors.response.use(
   (response) => {
     // we need the response headers for these endpoints
-    const exemptEndpoints = ["/api/pages/export", "/api/spaces/export"];
+    const exemptEndpoints = [
+      "/api/pages/export",
+      "/api/spaces/export",
+      "/api/docx-export",
+    ];
     if (response.request.responseURL) {
       const path = new URL(response.request.responseURL)?.pathname;
       if (path && exemptEndpoints.includes(path)) {

apps/client/tsconfig.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "ES2021",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["ES2021", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
 

apps/server/package.json

@@ -30,14 +30,14 @@
     "test:e2e": "jest --config test/jest-e2e.json"
   },
   "dependencies": {
-    "@ai-sdk/google": "^3.0.52",
-    "@ai-sdk/openai": "^3.0.47",
-    "@ai-sdk/openai-compatible": "^2.0.37",
+    "@ai-sdk/google": "3.0.52",
+    "@ai-sdk/openai": "3.0.47",
+    "@ai-sdk/openai-compatible": "2.0.37",
     "@aws-sdk/client-s3": "3.1050.0",
     "@aws-sdk/lib-storage": "3.1050.0",
     "@aws-sdk/s3-request-presigner": "3.1050.0",
     "@azure/storage-blob": "12.31.0",
-    "@clickhouse/client": "^1.18.2",
+    "@clickhouse/client": "1.18.2",
     "@docmost/pdf-inspector": "1.9.6",
     "@fastify/cookie": "^11.0.2",
     "@fastify/multipart": "^10.0.0",
@@ -65,19 +65,19 @@
     "@nestjs/websockets": "^11.1.19",
     "@node-saml/passport-saml": "^5.1.0",
     "@socket.io/redis-adapter": "^8.3.0",
-    "ai": "^6.0.134",
-    "ai-sdk-ollama": "^3.8.1",
-    "bcrypt": "^6.0.0",
-    "bowser": "^2.14.1",
-    "bullmq": "^5.76.10",
-    "cache-manager": "^7.2.8",
-    "cheerio": "^1.2.0",
-    "class-transformer": "^0.5.1",
-    "class-validator": "^0.15.1",
-    "cookie": "^1.1.1",
+    "ai": "6.0.134",
+    "ai-sdk-ollama": "3.8.1",
+    "bcrypt": "6.0.0",
+    "bowser": "2.14.1",
+    "bullmq": "5.76.10",
+    "cache-manager": "7.2.8",
+    "cheerio": "1.2.0",
+    "class-transformer": "0.5.1",
+    "class-validator": "0.15.1",
+    "cookie": "1.1.1",
     "fast-bm25": "0.0.5",
-    "fastify-ip": "^2.0.0",
-    "fs-extra": "^11.3.4",
+    "fastify-ip": "2.0.0",
+    "fs-extra": "11.3.4",
     "happy-dom": "20.8.9",
     "ioredis": "^5.10.1",
     "js-tiktoken": "^1.0.21",
@@ -114,9 +114,9 @@
     "scimmy": "1.3.5",
     "socket.io": "^4.8.3",
     "stripe": "^17.7.0",
-    "tlds": "^1.261.0",
-    "tmp-promise": "^3.0.3",
-    "tseep": "^1.3.1",
+    "tlds": "1.261.0",
+    "tmp-promise": "3.0.3",
+    "tseep": "1.3.1",
     "typesense": "^3.0.5",
     "undici": "7.24.0",
     "ws": "^8.20.1",
@@ -192,7 +192,8 @@
     "moduleNameMapper": {
       "^@docmost/db/(.*)$": "<rootDir>/database/$1",
       "^@docmost/transactional/(.*)$": "<rootDir>/integrations/transactional/$1",
-      "^@docmost/ee/(.*)$": "<rootDir>/ee/$1"
+      "^@docmost/ee/(.*)$": "<rootDir>/ee/$1",
+      "^src/(.*)$": "<rootDir>/$1"
     }
   }
 }

apps/server/src/common/features.ts

@@ -20,6 +20,7 @@ export const Feature = {
   VIEWER_COMMENTS: 'comment:viewer',
   TEMPLATES: 'templates',
   PDF_EXPORT: 'export:pdf',
+  DOCX_EXPORT: 'export:docx',
 } as const;
 
 export type FeatureKey = (typeof Feature)[keyof typeof Feature];