✨(frontend): Added copy-as buttons for HTML and Markdown

Closes suitenumerique#300
rvveber · Oct 15, 2024 · f155542 · f155542
1 parent 39d0211
commit f155542
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 2 deletions.
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
@@ -1,10 +1,14 @@
-import { Button } from '@openfun/cunningham-react';
+import {
+  Button,
+  VariantType,
+  useToastProvider,
+} from '@openfun/cunningham-react';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Box, DropButton, IconOptions, Text } from '@/components';
 import { useAuthStore } from '@/core';
-import { usePanelEditorStore } from '@/features/docs/doc-editor/';
+import { useDocStore, usePanelEditorStore } from '@/features/docs/doc-editor/';
 import {
   Doc,
   ModalRemoveDoc,
@@ -31,6 +35,24 @@ export const DocToolBox = ({ doc, versionId }: DocToolBoxProps) => {
   const [isModalVersionOpen, setIsModalVersionOpen] = useState(false);
   const { isSmallMobile } = useResponsiveStore();
   const { authenticated } = useAuthStore();
+  const { docsStore } = useDocStore();
+  const { toast } = useToastProvider();
+
+  const getDocContentFormatted = (
+    format: 'html' | 'markdown',
+  ): Promise<string> => {
+    const editor = docsStore[doc.id]?.editor;
+    if (!editor) {
+      return Promise.reject(new Error('Editor not available'));
+    }
+
+    switch (format) {
+      case 'html':
+        return editor.blocksToHTMLLossy();
+      case 'markdown':
+        return editor.blocksToMarkdownLossy();
+    }
+  };
 
   return (
     <Box
@@ -125,6 +147,78 @@ export const DocToolBox = ({ doc, versionId }: DocToolBoxProps) => {
                 <Text $theme="primary">{t('Delete document')}</Text>
               </Button>
             )}
+            <Button
+              onClick={() => {
+                setIsDropOpen(false);
+                getDocContentFormatted('markdown').then(
+                  (docContentFormatted) => {
+                    navigator.clipboard.writeText(docContentFormatted).then(
+                      () =>
+                        toast(t('Copied to clipboard'), VariantType.SUCCESS, {
+                          duration: 3000,
+                        }),
+                      () =>
+                        toast(
+                          t('Failed to copy to clipboard'),
+                          VariantType.ERROR,
+                          { duration: 3000 },
+                        ),
+                    );
+                  },
+                  () =>
+                    toast(
+                      t('Editor') + ' ' + t('unavailable'),
+                      VariantType.ERROR,
+                      {
+                        duration: 3000,
+                      },
+                    ),
+                );
+              }}
+              color="primary-text"
+              icon={<span className="material-icons">content_copy</span>}
+              size="small"
+            >
+              <Text $theme="primary">
+                {t('Copy as {{subject}}', { target: 'Markdown' })}
+              </Text>
+            </Button>
+            <Button
+              onClick={() => {
+                setIsDropOpen(false);
+                getDocContentFormatted('html').then(
+                  (docContentFormatted) => {
+                    navigator.clipboard.writeText(docContentFormatted).then(
+                      () =>
+                        toast(t('Copied to clipboard'), VariantType.SUCCESS, {
+                          duration: 3000,
+                        }),
+                      () =>
+                        toast(
+                          t('Failed to copy to clipboard'),
+                          VariantType.ERROR,
+                          { duration: 3000 },
+                        ),
+                    );
+                  },
+                  () =>
+                    toast(
+                      t('Editor') + ' ' + t('unavailable'),
+                      VariantType.ERROR,
+                      {
+                        duration: 3000,
+                      },
+                    ),
+                );
+              }}
+              color="primary-text"
+              icon={<span className="material-icons">content_copy</span>}
+              size="small"
+            >
+              <Text $theme="primary">
+                {t('Copy as {{subject}}', { target: 'HTML' })}
+              </Text>
+            </Button>
           </Box>
         </DropButton>
       </Box>

diff --git a/src/frontend/apps/impress/src/i18n/translations.json b/src/frontend/apps/impress/src/i18n/translations.json
@@ -22,6 +22,8 @@
       "Content modal to export the document": "Contenu modal pour exporter le document",
       "Cookies placed": "Cookies déposés",
       "Copy link": "Copier le lien",
+      "Copy as {{subject}}": "Copier en {{subject}}",
+      "Copied to clipboard": "Copié dans le presse-papiers",
       "Copyright": "Copyright",
       "Create a new document": "Créer un nouveau document",
       "Created at": "Créé le",
@@ -49,6 +51,7 @@
       "Export your document, it will be inserted in the selected template.": "Exportez votre document, il sera inséré dans le modèle sélectionné.",
       "Failed to add the member in the document.": "Impossible d'ajouter le membre dans le document.",
       "Failed to copy link": "Échec de la copie du lien",
+      "Failed to copy to clipboard": "Échec de la copie dans le presse-papiers",
       "Failed to create the invitation for {{email}}.": "Impossible de créer l'invitation pour {{email}}.",
       "Find a member to add to the document": "Trouver un membre à ajouter au document",
       "French Interministerial Directorate for Digital Affairs (DINUM), 20 avenue de Ségur 75007 Paris.": "Direction interministérielle des affaires numériques (DINUM), 20 avenue de Segur 75007 Paris.",
@@ -142,6 +145,7 @@
       "Your role": "Votre rôle",
       "Your role:": "Votre rôle:",
       "Your {{format}} was downloaded succesfully": "Votre {{format}} a été téléchargé avec succès",
+      "unavailable": "indisponible",
       "accessibility-contact-defenseurdesdroits": "Contacter le délégué du<1>Défenseur des droits dans votre région</1>",
       "accessibility-dinum-services": "<strong>DINUM</strong> s'engage à rendre accessibles ses services numériques, conformément à l'article 47 de la loi n° 2005-102 du 11 février 2005.",
       "accessibility-form-defenseurdesdroits": "Écrire un message au<1>Défenseur des droits</1>",