✨(frontend) move html option to downloads section

Ovgodd · Ovgodd · commit 1d858ebdea7f · 2025-12-01T15:35:51.000+01:00
makes the option less visible as it's not useful to most users

Signed-off-by: Cyril &lt;c.gromoff@gmail.com&gt;
diff --git a/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx b/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx
@@ -26,9 +26,10 @@ import { TemplatesOrdering, useTemplates } from '../api/useTemplates';
 import { docxDocsSchemaMappings } from '../mappingDocx';
 import { odtDocsSchemaMappings } from '../mappingODT';
 import { pdfDocsSchemaMappings } from '../mappingPDF';
-import { downloadFile } from '../utils';
+import { downloadFile, escapeHtml } from '../utils';
 
 enum DocDownloadFormat {
+  HTML = 'html',
   PDF = 'pdf',
   DOCX = 'docx',
   ODT = 'odt',
@@ -142,6 +143,26 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
       });
 
       blobExport = await exporter.toODTDocument(exportDocument);
+    } else if (format === DocDownloadFormat.HTML) {
+      const editorHtml = await editor.blocksToHTMLLossy();
+      const lang = i18next.language || 'fr';
+
+      const htmlContent = `<!DOCTYPE html>
+<html lang="${lang}">
+  <head>
+    <meta charset="utf-8" />
+    <title>${escapeHtml(documentTitle)}</title>
+  </head>
+  <body>
+    <main role="main">
+${editorHtml}
+    </main>
+  </body>
+</html>`;
+
+      blobExport = new Blob([htmlContent], {
+        type: 'text/html;charset=utf-8',
+      });
     } else {
       toast(t('The export failed'), VariantType.ERROR);
       setIsExporting(false);
@@ -227,16 +248,6 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
         <Text $variation="secondary" $size="sm" as="p">
           {t('Download your document in a .docx, .odt or .pdf format.')}
         </Text>
-        <Select
-          clearable={false}
-          fullWidth
-          label={t('Template')}
-          options={templateOptions}
-          value={templateSelected}
-          onChange={(options) =>
-            setTemplateSelected(options.target.value as string)
-          }
-        />
         <Select
           clearable={false}
           fullWidth
@@ -245,12 +256,24 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
             { label: t('Docx'), value: DocDownloadFormat.DOCX },
             { label: t('ODT'), value: DocDownloadFormat.ODT },
             { label: t('PDF'), value: DocDownloadFormat.PDF },
+            { label: t('HTML'), value: DocDownloadFormat.HTML },
           ]}
           value={format}
           onChange={(options) =>
             setFormat(options.target.value as DocDownloadFormat)
           }
         />
+        <Select
+          clearable={false}
+          fullWidth
+          label={t('Template')}
+          options={templateOptions}
+          value={templateSelected}
+          disabled={format === DocDownloadFormat.HTML}
+          onChange={(options) =>
+            setTemplateSelected(options.target.value as string)
+          }
+        />
 
         {isExporting && (
           <Box
diff --git a/src/frontend/apps/impress/src/features/docs/doc-export/utils.ts b/src/frontend/apps/impress/src/features/docs/doc-export/utils.ts
@@ -179,3 +179,12 @@ export function odtRegisterParagraphStyleForBlock(
 
   return styleName;
 }
+
+// Escape user-provided text  before injecting it into the exported HTML document.
+export const escapeHtml = (value: string): string =>
+  value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
@@ -33,7 +33,6 @@ import {
   KEY_LIST_DOC_VERSIONS,
   ModalSelectVersion,
 } from '@/docs/doc-versioning';
-import { useAnalytics } from '@/libs';
 import { useResponsiveStore } from '@/stores';
 
 import { useCopyCurrentEditorToClipboard } from '../hooks/useCopyCurrentEditorToClipboard';
@@ -67,7 +66,6 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
       void router.push(`/docs/${data.id}`);
     },
   });
-  const { isFeatureFlagActivated } = useAnalytics();
   const removeFavoriteDoc = useDeleteFavoriteDoc({
     listInvalidQueries: [KEY_LIST_DOC, KEY_DOC],
   });
@@ -155,14 +153,6 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
       callback: () => {
         void copyCurrentEditorToClipboard('markdown');
       },
-    },
-    {
-      label: t('Copy as {{format}}', { format: 'HTML' }),
-      icon: 'content_copy',
-      callback: () => {
-        void copyCurrentEditorToClipboard('html');
-      },
-      show: isFeatureFlagActivated('CopyAsHTML'),
       showSeparator: true,
     },
     {
