🍱(frontend) Fonts GDPR compliants

CHANGELOG.md

@@ -29,6 +29,7 @@ and this project adheres to
   - ♿ restyle checked checkboxes: removing strikethrough #1439
   - ♿ add h1 for SR on 40X pages and remove alt texts #1438
   - ♿ update labels and shared document icon accessibility #1442
+- 🍱(frontend) Fonts GDPR compliants #1453
 
 ### Fixed
 
@@ -38,6 +39,7 @@ and this project adheres to
 - 🐛(frontend) fix legacy role computation #1376
 - 🛂(frontend) block editing title when not allowed #1412
 - 🐛(frontend) scroll back to top when navigate to a document #1406
+- 🐛(frontend) fix export pdf emoji problem #1453
 - 🐛(frontend) fix attachment download filename #1447
 - 🐛(frontend) exclude h4-h6 headings from table of contents #1441
 - 🔒(frontend) prevent readers from changing callout emoji #1449

src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts

@@ -11,6 +11,7 @@ import {
   verifyDocName,
   waitForLanguageSwitch,
 } from './utils-common';
+import { openSuggestionMenu, writeInEditor } from './utils-editor';
 import { createRootSubPage } from './utils-sub-pages';
 
 test.beforeEach(async ({ page }) => {
@@ -153,11 +154,13 @@ test.describe('Doc Export', () => {
 
     await verifyDocName(page, randomDoc);
 
-    await page.locator('.ProseMirror.bn-editor').click();
-    await page.locator('.ProseMirror.bn-editor').fill('Hello World');
+    await writeInEditor({
+      page,
+      text: 'Hello World 😃🎉🚀🙋‍♀️🧑🏿‍❤️‍💋‍🧑🏾',
+    });
 
     await page.keyboard.press('Enter');
-    await page.locator('.bn-block-outer').last().fill('/');
+    await openSuggestionMenu({ page });
     await page.getByText('Resizable image with caption').click();
 
     const fileChooserPromise = page.waitForEvent('filechooser');

src/frontend/apps/impress/.gitignore

@@ -35,3 +35,8 @@ yarn-error.log*
 *.tsbuildinfo
 
 service-worker.js
+
+# Font embedding
+public/assets/fonts/emoji/*
+!public/assets/fonts/emoji/fallback.png
+public/assets/fonts/Marianne/*

src/frontend/apps/impress/.prettierignore

@@ -1,2 +1,3 @@
 next-env.d.ts
 service-worker.js
+public/assets/fonts/*

src/frontend/apps/impress/next.config.js

@@ -1,5 +1,7 @@
 const crypto = require('crypto');
+const path = require('path');
 
+const CopyPlugin = require('copy-webpack-plugin');
 const { InjectManifest } = require('workbox-webpack-plugin');
 
 const buildId = crypto.randomBytes(256).toString('hex').slice(0, 8);
@@ -41,6 +43,30 @@ const nextConfig = {
       },
     );
 
+    // Copy necessary fonts from node_modules to public directory during build or dev
+    config.plugins.push(
+      new CopyPlugin({
+        patterns: [
+          {
+            from: path.resolve(
+              __dirname,
+              '../../node_modules/emoji-datasource-apple/img/apple/64',
+            ),
+            to: path.resolve(__dirname, 'public/assets/fonts/emoji'),
+            force: true,
+          },
+          {
+            from: path.resolve(
+              __dirname,
+              '../../node_modules/@gouvfr-lasuite/ui-kit/dist/assets/fonts/Marianne',
+            ),
+            to: path.resolve(__dirname, 'public/assets/fonts/Marianne'),
+            force: true,
+          },
+        ],
+      }),
+    );
+
     if (!isServer && process.env.NEXT_PUBLIC_SW_DEACTIVATED !== 'true') {
       config.plugins.push(
         new InjectManifest({

src/frontend/apps/impress/package.json

@@ -30,6 +30,7 @@
     "@dnd-kit/modifiers": "9.0.0",
     "@emoji-mart/data": "1.2.1",
     "@emoji-mart/react": "1.1.1",
+    "@fontsource-variable/inter": "5.2.8",
     "@fontsource/material-icons": "5.2.5",
     "@gouvfr-lasuite/integration": "1.0.3",
     "@gouvfr-lasuite/ui-kit": "0.16.1",
@@ -43,6 +44,7 @@
     "cmdk": "1.1.1",
     "crisp-sdk-web": "1.0.25",
     "docx": "9.5.0",
+    "emoji-datasource-apple": "16.0.0",
     "emoji-mart": "5.6.0",
     "emoji-regex": "10.5.0",
     "i18next": "25.5.2",
@@ -77,6 +79,7 @@
     "@types/react": "*",
     "@types/react-dom": "*",
     "@vitejs/plugin-react": "5.0.2",
+    "copy-webpack-plugin": "13.0.1",
     "cross-env": "10.0.0",
     "dotenv": "17.2.2",
     "eslint-plugin-docs": "*",

src/frontend/apps/impress/src/cunningham/cunningham-style.css

@@ -1,6 +1,5 @@
 @import url('@gouvfr-lasuite/ui-kit/style');
 @import url('./cunningham-tokens.css');
-@import url('/assets/fonts/Marianne/Marianne-font.css');
 
 :root {
   /**
@@ -76,29 +75,3 @@
 .c__toast__container:has(.c__toast) {
   z-index: 10000;
 }
-
-@font-face {
-  font-family: Inter;
-  font-style: italic;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url('https://fonts.gstatic.com/s/inter/v18/UcCm3FwrK3iLTcvnUwQT9g.woff2')
-    format('woff2');
-  unicode-range:
-    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
-    U+2215, U+FEFF, U+FFFD;
-}
-
-@font-face {
-  font-family: Inter;
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url('https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcviYwY.woff2')
-    format('woff2');
-  unicode-range:
-    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
-    U+2215, U+FEFF, U+FFFD;
-}

src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx

@@ -10,6 +10,7 @@ import {
   useToastProvider,
 } from '@openfun/cunningham-react';
 import { DocumentProps, pdf } from '@react-pdf/renderer';
+import jsonemoji from 'emoji-datasource-apple' assert { type: 'json' };
 import i18next from 'i18next';
 import { cloneElement, isValidElement, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -95,6 +96,20 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
     if (format === DocDownloadFormat.PDF) {
       const exporter = new PDFExporter(editor.schema, pdfDocsSchemaMappings, {
         resolveFileUrl: async (url) => exportCorsResolveFileUrl(doc.id, url),
+        emojiSource: {
+          format: 'png',
+          builder(code) {
+            const emoji = jsonemoji.find((e) =>
+              e.unified.toLocaleLowerCase().includes(code.toLowerCase()),
+            );
+
+            if (emoji) {
+              return `/assets/fonts/emoji/${emoji.image}`;
+            }
+
+            return '/assets/fonts/emoji/fallback.png';
+          },
+        },
       });
       const rawPdfDocument = (await exporter.toReactPDFDocument(
         exportDocument,
@@ -150,7 +165,6 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
             color="secondary"
             fullWidth
             onClick={() => onClose()}
-            disabled={isExporting}
           >
             {t('Cancel')}
           </Button>

src/frontend/apps/impress/src/pages/globals.css

@@ -1,6 +1,8 @@
 @import url('../cunningham/cunningham-style.css');
 @import url('@fontsource/material-icons');
 @import url('@fontsource/material-icons-outlined');
+@import url('@fontsource-variable/inter');
+@import url('/assets/fonts/Marianne/Marianne-font.css');
 
 body {
   margin: 0;