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>
+        )
+      }
     />
   );
 }