@abyss-project/commons-front-core 11.0.0 → 11.1.0

package/README.md

@@ -94,6 +94,21 @@ export const buildRumOptions = () =>
 
 ## Changements visibles
 
+### 10.1.0
+
+Zone 4c-1 de la refonte du design system (carte #286) : les éditeurs Markdown et PDF sur le design system.
+
+- **Nouvelle entrée `@abyss-project/commons-front-core/editors`** : `MarkdownEditor`, `PdfEditor`, `PdfOperationType`
+  et les types du PDF. Ils ne sont pas sur l'entrée racine, pour que pdf.js, pdf-lib et Crepe ne pèsent pas sur les
+  applications qui ne les utilisent pas (ADR-0215). Le worker de pdf.js se charge à la première ouverture d'un PDF.
+- **`MarkdownEditor`** : mêmes props qu'`AbyssMarkdownEditor`, moteur Crepe gardé, couleurs et polices des jetons,
+  libellés de Crepe traduits, poignée de 44 px au toucher. Les classes `.milkdown` et `.ProseMirror` ne changent pas.
+- **`PdfEditor`** : mêmes props que l'éditeur legacy ; barre regroupée en six groupes, page blanche dans les deux
+  thèmes, couleurs d'annotation fixes (`pdf-colors`). Les opérations déjà enregistrées se rejouent à l'identique.
+- **Legacy** : `AbyssMarkdownEditor` et `PdfEditor` restent sous `/legacy` jusqu'à la zone 4c-2 ; le moteur du PDF
+  legacy est désormais celui de `/editors` (comportement inchangé).
+- **Épinglage de `@abyss-project/main`** : inchangé par rapport à la 10.0.0.
+
 ### 9.6.0
 
 Correctifs de la zone 4b (carte #286), relevés par son e2e responsive.

package/catalog/catalog-entries.ts

@@ -116,6 +116,8 @@ export const CATALOG_ENTRIES: CatalogEntry[] = [
   entry('ContextSelector', 'inputs', 'context-selector', RESPONSIVE),
   entry('DropZone', 'inputs', 'drop-zone', RESPONSIVE),
   entry('ImportButton', 'inputs', 'import-button'),
+  entry('MarkdownEditor', 'inputs', 'markdown-editor', RESPONSIVE),
+  entry('PdfEditor', 'inputs', 'pdf-editor', RESPONSIVE),
   entry('ExpressionSearch', 'inputs', 'expression-search', {
     mobileCapture: true,
   }),

package/catalog/pages/MarkdownEditor.tsx

@@ -0,0 +1,48 @@
+import { MarkdownEditor } from '../../src/components/editors/MarkdownEditor/MarkdownEditor';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+
+const NOTE = `# Compte rendu de la revue
+
+Les points à **retenir** : le budget reste *stable*, et le lien vers le [tableau de bord](https://abyss.example) est à jour.
+
+- Valider le périmètre
+- Relire les \`conditions\`
+- Envoyer le résumé
+
+> La prochaine revue a lieu jeudi.
+
+\`\`\`ts
+const total = lignes.reduce((somme, ligne) => somme + ligne.montant, 0);
+\`\`\`
+
+| Poste | Montant |
+| --- | --- |
+| Hébergement | 1 200 |
+| Licences | 840 |
+`;
+
+export const MarkdownEditorPage = () => {
+  const { log } = useEventLog();
+
+  return (
+    <Showcase
+      family="Saisie"
+      name="MarkdownEditor"
+      description="Éditeur Markdown de l'écosystème : Crepe, aux couleurs et aux polices du design system, libellés traduits. Un « / » ouvre le menu des blocs ; la poignée à gauche d'un bloc l'ajoute ou le déplace. Sur un écran tactile, la poignée et les boutons font 44 px."
+    >
+      <Example title="Édition d'une note" maxWidth={880}>
+        <MarkdownEditor
+          defaultValue={NOTE}
+          onChange={(markdown) => log(`${markdown.length} caractères`)}
+        />
+      </Example>
+      <Example title="Document vide" maxWidth={880}>
+        <MarkdownEditor />
+      </Example>
+      <Example title="Lecture seule" maxWidth={880}>
+        <MarkdownEditor defaultValue={NOTE} readOnly />
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};

package/catalog/pages/PdfEditor.tsx

@@ -0,0 +1,153 @@
+import { useCallback, useEffect, useState } from 'react';
+import { AssetKind } from '@abyss-project/main';
+import { PDFDocument, StandardFonts } from 'pdf-lib';
+import { styled } from '@mui/material/styles';
+import { PdfEditor } from '../../src/components/editors/PdfEditor/PdfEditor';
+import { hairline, px } from '../../src/theme/components/shared';
+import type {
+  AssetPalette,
+  ExportRequest,
+  OperationsAdapter,
+  PdfSource,
+} from '../../src/components/editors/PdfEditor/engine/types';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+
+const FILE_NAME = 'contrat-de-prestation.pdf';
+
+const PARAGRAPHS = [
+  'Article 1 : objet du contrat',
+  'Le prestataire réalise la refonte du portail client.',
+  'Article 2 : durée',
+  'Le contrat prend effet à la signature, pour douze mois.',
+  'Article 3 : prix',
+  'Le prix est payé en trois échéances égales.',
+];
+
+/** A three-page A4 contract, built in the browser so the catalog needs no fixture file. */
+const buildContract = async (): Promise<ArrayBuffer> => {
+  const doc = await PDFDocument.create();
+  const font = await doc.embedFont(StandardFonts.Helvetica);
+  const bold = await doc.embedFont(StandardFonts.HelveticaBold);
+  for (let index = 0; index < 3; index += 1) {
+    const page = doc.addPage([595.28, 841.89]);
+    page.drawText(`Contrat de prestation, page ${index + 1}`, {
+      x: 56,
+      y: 780,
+      size: 18,
+      font: bold,
+    });
+    PARAGRAPHS.forEach((line, row) => {
+      page.drawText(line, { x: 56, y: 720 - row * 28, size: 12, font });
+    });
+  }
+  const bytes = await doc.save();
+  return bytes.slice().buffer;
+};
+
+/** A drawn signature, as the saved assets of a signed-in user would carry one. */
+const SIGNATURE_SVG = `data:image/svg+xml;utf8,${encodeURIComponent(
+  "<svg xmlns='http://www.w3.org/2000/svg' width='240' height='80'><path d='M10 60 C 40 10, 60 10, 80 50 S 130 80, 150 30 S 200 20, 230 55' fill='none' stroke='navy' stroke-width='3'/></svg>",
+)}`;
+
+const PALETTE: AssetPalette = {
+  personal: [
+    {
+      id: 'signature',
+      kind: AssetKind.SIGNATURE,
+      name: 'Signature',
+      downloadUrl: SIGNATURE_SVG,
+    },
+    {
+      id: 'mention',
+      kind: AssetKind.TEXT_BLOCK,
+      name: 'Mention',
+      downloadUrl: null,
+      textContent: 'Lu et approuvé',
+    },
+  ],
+  organizations: [{ id: 'acme', name: 'Acme', items: [] }],
+};
+
+const Frame = styled('div')(({ theme }) => ({
+  height: 720,
+  border: hairline(theme.design.tokens['border.subtle']),
+  borderRadius: px(theme.design.radii.md),
+  overflow: 'hidden',
+}));
+
+export const PdfEditorPage = () => {
+  const { log } = useEventLog();
+  const [source, setSource] = useState<PdfSource | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    void buildContract().then((data) => {
+      if (!cancelled) {
+        setSource({ kind: 'BLOB', data, fileName: FILE_NAME });
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const onExport = useCallback(
+    async (request: ExportRequest) => log(`export ${request.kind}`),
+    [log],
+  );
+  const operationsAdapter = useCallback<OperationsAdapter>(
+    async ({ operations }) => log(`${operations.length} opérations`),
+    [log],
+  );
+
+  return (
+    <Showcase
+      family="Saisie"
+      name="PdfEditor"
+      description="Éditeur PDF de l'écosystème : barre en groupes (Annoter, Signer et remplir, Pages, Sécurité, Fichier), pages et vignettes blanches dans les deux thèmes, signatures dessinées, importées ou enregistrées. Sous 768 px, un groupe s'ouvre en feuille du bas et les pages passent en tiroir."
+    >
+      {source !== null && (
+        <>
+          <Example title="Session connectée, éléments enregistrés et AbyssCloud">
+            <Frame>
+              <PdfEditor
+                source={source}
+                mode="session-cloud-bridge"
+                exportOptions={['DOWNLOAD', 'CLOUD_NEW_FILE']}
+                onExport={onExport}
+                operationsAdapter={operationsAdapter}
+                assetPalette={PALETTE}
+                onSaveSignature={async ({ name }) =>
+                  log(`signature enregistrée : ${name}`)
+                }
+                manageAssetsUrl="https://abyss.example/account/assets"
+              />
+            </Frame>
+          </Example>
+          <Example title="Page publique, sans compte">
+            <Frame>
+              <PdfEditor
+                source={source}
+                mode="anonymous-client"
+                exportOptions={['DOWNLOAD']}
+                onExport={onExport}
+              />
+            </Frame>
+          </Example>
+          <Example title="Lecture seule">
+            <Frame>
+              <PdfEditor
+                source={source}
+                mode="anonymous-shared"
+                exportOptions={['DOWNLOAD']}
+                onExport={onExport}
+                readOnly
+              />
+            </Frame>
+          </Example>
+        </>
+      )}
+      <LastEvent />
+    </Showcase>
+  );
+};

package/catalog/pages/index.ts

@@ -36,6 +36,7 @@ import { ImportButtonPage } from './ImportButton';
 import { ImportFromCloudModalPage } from './ImportFromCloudModal';
 import { InfectedDownloadModalPage } from './InfectedDownloadModal';
 import { KeyValueListPage } from './KeyValueList';
+import { MarkdownEditorPage } from './MarkdownEditor';
 import { MenuPage } from './Menu';
 import { MethodBadgePage } from './MethodBadge';
 import { MobileShellPage } from './MobileShell';
@@ -43,6 +44,7 @@ import { ModalPage } from './Modal';
 import { NotificationsMenuPage } from './NotificationsMenu';
 import { NumberFieldPage } from './NumberField';
 import { PageHeaderPage } from './PageHeader';
+import { PdfEditorPage } from './PdfEditor';
 import { PageStatePage } from './PageState';
 import { PreviewDrawerPage } from './PreviewDrawer';
 import { ProductTourPage } from './ProductTour';
@@ -108,6 +110,7 @@ export const CATALOG_PAGES: Record<string, ComponentType> = {
   ImportFromCloudModal: ImportFromCloudModalPage,
   InfectedDownloadModal: InfectedDownloadModalPage,
   KeyValueList: KeyValueListPage,
+  MarkdownEditor: MarkdownEditorPage,
   Menu: MenuPage,
   MethodBadge: MethodBadgePage,
   MobileShell: MobileShellPage,
@@ -115,6 +118,7 @@ export const CATALOG_PAGES: Record<string, ComponentType> = {
   NotificationsMenu: NotificationsMenuPage,
   NumberField: NumberFieldPage,
   PageHeader: PageHeaderPage,
+  PdfEditor: PdfEditorPage,
   PageState: PageStatePage,
   PreviewDrawer: PreviewDrawerPage,
   ProductTour: ProductTourPage,

package/catalog/specs/responsive.spec.ts

@@ -69,6 +69,10 @@ const smallTargets = (page: Page): Promise<Offender[]> =>
       const hidden = (element: Element): boolean =>
         element.closest('[aria-hidden="true"], [inert]') !== null ||
         getComputedStyle(element).visibility === 'hidden';
+      // WCAG 2.5.8 exempts an inline target, one set in a sentence: a link written in the text
+      // of the editor's document. Nothing else is exempt.
+      const inline = (element: Element): boolean =>
+        element.matches('.ProseMirror a');
       const describe = (element: Element): string => {
         const name =
           element.getAttribute('aria-label') ??
@@ -80,7 +84,7 @@ const smallTargets = (page: Page): Promise<Offender[]> =>
         }> "${name}"`;
       };
       return Array.from(document.querySelectorAll(selector))
-        .filter((element) => !hidden(element))
+        .filter((element) => !hidden(element) && !inline(element))
         .map((element) => ({ element, box: element.getBoundingClientRect() }))
         .filter(({ box }) => box.width > 0 && box.height > 0)
         .filter(({ box }) => box.width < minimum || box.height < minimum)