react-bootstrap-front 3.10.2 → 3.11.0

package/src/features/editor/buildExtensions.js

@@ -0,0 +1,77 @@
+import StarterKit from '@tiptap/starter-kit';
+import Underline from '@tiptap/extension-underline';
+import Subscript from '@tiptap/extension-subscript';
+import Superscript from '@tiptap/extension-superscript';
+import TextStyle from '@tiptap/extension-text-style';
+import Color from '@tiptap/extension-color';
+import FontFamily from '@tiptap/extension-font-family';
+import TextAlign from '@tiptap/extension-text-align';
+import Link from '@tiptap/extension-link';
+import Image from '@tiptap/extension-image';
+import Placeholder from '@tiptap/extension-placeholder';
+import { FontSize, LegacyImageAttrs, CleanPaste, MergeVariable, collectMergeCodes } from './extensions';
+
+/**
+ * Jeu d'extensions de l'éditeur.
+ *
+ * Le schéma est délibérément restreint à ce que tolère un client de messagerie
+ * ancien : p, h1-h3, strong, em, u, s, sub, sup, a, ul, ol, li, blockquote, hr,
+ * img, br et span[style]. Ni `<pre>` ni `<code>` : ils ne servent à rien dans
+ * un courriel et produisent une mise en forme que les clients ignorent.
+ */
+export function buildExtensions(props) {
+  const options = props || {};
+  return [
+    StarterKit.configure({
+      heading: { levels: [1, 2, 3] },
+      codeBlock: false,
+      code: false,
+      history: { depth: 100 },
+      dropcursor: { width: 2 },
+    }),
+    Underline,
+    Subscript,
+    Superscript,
+    /* TextStyle porte color, font-family et font-size : les trois attributs se
+       combinent dans un seul <span>, au lieu de trois imbriqués. */
+    TextStyle,
+    Color,
+    FontFamily.configure({ types: ['textStyle'] }),
+    FontSize,
+    TextAlign.configure({
+      types: ['heading', 'paragraph'],
+      alignments: ['left', 'center', 'right', 'justify'],
+    }),
+    /* target et rel explicitement à null, et non un objet vide : les options
+       sont FUSIONNÉES avec les défauts de l'extension, qui posent
+       target="_blank" rel="noopener noreferrer nofollow" sur tout lien. Un
+       objet vide laisserait donc ces défauts réécrire l'intégralité des liens
+       de la base au premier enregistrement. La cible se choisit dans la boîte
+       de dialogue, lien par lien. */
+    Link.configure({
+      openOnClick: false,
+      autolink: true,
+      linkOnPaste: true,
+      HTMLAttributes: { target: null, rel: null, class: null },
+    }),
+    Image.configure({
+      inline: false,
+      allowBase64: true,
+    }),
+    LegacyImageAttrs,
+    Placeholder.configure({ placeholder: options.placeholder || '' }),
+    /* knownCodes n'est renseigné qu'en mode strict : tant que le catalogue est
+       tenu à la main côté application, il est forcément incomplet, et signaler
+       en rouge une variable parfaitement valide serait pire qu'inutile. À
+       basculer le jour où le catalogue vient de l'API et fait autorité. */
+    MergeVariable.configure({
+      knownCodes: options.strictMergeVars ? collectMergeCodes(options.mergeVars) : null,
+    }),
+    CleanPaste.configure({
+      enabled: options.cleanOnPaste !== false,
+      profile: options.pasteProfile || 'paste',
+    }),
+  ];
+}
+
+export default buildExtensions;

package/src/features/editor/defaultIcons.js

@@ -0,0 +1,45 @@
+import React from 'react';
+
+/**
+ * Repli textuel des icônes de la barre d'outils.
+ *
+ * La librairie ne dépend d'aucune bibliothèque d'icônes : l'application
+ * fournit les siennes via la prop `icons`, un objet plat de nœuds React —
+ * le motif déjà employé partout ici (`clearIcon`, `toolbarIcon`, `sortUpIcon`…).
+ * Ce repli garantit qu'un éditeur reste utilisable même sans icônes fournies.
+ */
+export const defaultIcons = {
+  bold: <b>B</b>,
+  italic: <i>I</i>,
+  underline: <u>U</u>,
+  strike: <s>S</s>,
+  subscript: <span>x₂</span>,
+  superscript: <span>x²</span>,
+  paragraph: <span>¶</span>,
+  heading1: <span>H1</span>,
+  heading2: <span>H2</span>,
+  heading3: <span>H3</span>,
+  bulletList: <span>•</span>,
+  orderedList: <span>1.</span>,
+  blockquote: <span>❝</span>,
+  horizontalRule: <span>―</span>,
+  alignLeft: <span>⇤</span>,
+  alignCenter: <span>↔</span>,
+  alignRight: <span>⇥</span>,
+  alignJustify: <span>≡</span>,
+  color: <span>A</span>,
+  fontSize: <span>Aa</span>,
+  fontFamily: <span>F</span>,
+  link: <span>↗</span>,
+  unlink: <span>⊘</span>,
+  image: <span>▣</span>,
+  mergeVar: <span>{'{ }'}</span>,
+  clean: <span>≀</span>,
+  formatClear: <span>Ø</span>,
+  source: <span>{'</>'}</span>,
+  undo: <span>↶</span>,
+  redo: <span>↷</span>,
+  more: <span>…</span>,
+};
+
+export default defaultIcons;

package/src/features/editor/extensions/CleanPaste.js

@@ -0,0 +1,44 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { cleanHtml } from '../html/cleanHtml';
+
+/**
+ * Nettoyage automatique du collage.
+ *
+ * C'est la vraie réponse au « je dois souvent nettoyer des spans, couleur,
+ * font, taille inutiles » : le HTML de Word, d'Outlook ou de Google Docs
+ * n'entre jamais dans le document. Rien à cliquer, rien à penser.
+ *
+ * Le profil PASTE conserve la mise en forme voulue (couleurs, tailles
+ * explicites) et ne retire que le bruit. Le bouton « Nettoyer » reste là pour
+ * aller plus loin à la demande.
+ */
+export const CleanPaste = Extension.create({
+  name: 'cleanPaste',
+
+  addOptions() {
+    return {
+      enabled: true,
+      profile: 'paste',
+    };
+  },
+
+  addProseMirrorPlugins() {
+    const { enabled, profile } = this.options;
+    if (!enabled) {
+      return [];
+    }
+    return [
+      new Plugin({
+        key: new PluginKey('cleanPaste'),
+        props: {
+          transformPastedHTML(html) {
+            return cleanHtml(html, profile);
+          },
+        },
+      }),
+    ];
+  },
+});
+
+export default CleanPaste;

package/src/features/editor/extensions/FontSize.js

@@ -0,0 +1,60 @@
+import { Extension } from '@tiptap/core';
+
+/**
+ * Taille de police.
+ *
+ * TipTap 2 ne fournit pas cette extension — `@tiptap/extension-font-size`
+ * n'existe qu'à partir de la v3. Sans elle, toutes les tailles des contenus
+ * déjà en base (`<span style="font-size:14px">`, écrit par l'ancien éditeur)
+ * seraient silencieusement perdues à la première ouverture.
+ *
+ * L'attribut se greffe sur la marque `textStyle`, comme le font `Color` et
+ * `FontFamily` : les trois se combinent alors dans un seul `<span>`.
+ */
+export const FontSize = Extension.create({
+  name: 'fontSize',
+
+  addOptions() {
+    return {
+      types: ['textStyle'],
+    };
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          fontSize: {
+            default: null,
+            parseHTML: element => element.style.fontSize || null,
+            renderHTML: attributes => {
+              if (!attributes.fontSize) {
+                return {};
+              }
+              return { style: 'font-size: ' + attributes.fontSize };
+            },
+          },
+        },
+      },
+    ];
+  },
+
+  addCommands() {
+    return {
+      setFontSize: size => ({ chain }) => {
+        return chain()
+          .setMark('textStyle', { fontSize: size })
+          .run();
+      },
+      unsetFontSize: () => ({ chain }) => {
+        return chain()
+          .setMark('textStyle', { fontSize: null })
+          .removeEmptyTextStyle()
+          .run();
+      },
+    };
+  },
+});
+
+export default FontSize;

package/src/features/editor/extensions/LegacyImageAttrs.js

@@ -0,0 +1,43 @@
+import { Extension } from '@tiptap/core';
+
+/**
+ * Dimensions des images.
+ *
+ * `@tiptap/extension-image` ne relit ni `width` ni `height` : une image de la
+ * base écrite `<img src="…" height="120" width="200">` ressortirait sans ses
+ * dimensions et casserait la mise en page du courriel.
+ *
+ * Les attributs sont volontairement rendus en attributs HTML et non en style :
+ * c'est la seule forme que comprennent les clients de messagerie anciens.
+ */
+export const LegacyImageAttrs = Extension.create({
+  name: 'legacyImageAttrs',
+
+  addOptions() {
+    return {
+      types: ['image'],
+    };
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          width: {
+            default: null,
+            parseHTML: element => element.getAttribute('width') || null,
+            renderHTML: attributes => (attributes.width ? { width: attributes.width } : {}),
+          },
+          height: {
+            default: null,
+            parseHTML: element => element.getAttribute('height') || null,
+            renderHTML: attributes => (attributes.height ? { height: attributes.height } : {}),
+          },
+        },
+      },
+    ];
+  },
+});
+
+export default LegacyImageAttrs;

package/src/features/editor/extensions/MergeVariable.js

@@ -0,0 +1,104 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { Decoration, DecorationSet } from '@tiptap/pm/view';
+
+/**
+ * Mise en évidence des variables de fusion `[[:objet.champ:]]`.
+ *
+ * Le choix structurant : ce sont de simples **décorations**, pas des nœuds ni
+ * des marques. Le HTML stocké reste donc rigoureusement identique à celui
+ * qu'écrivait l'ancien éditeur — le backend PHP continue son `str_replace`,
+ * aucune migration de données, aucun changement côté serveur.
+ *
+ * L'apport réel est la variante « inconnue » : un `[[:cli.fullname:]]` mal
+ * orthographié se voit à la frappe, alors qu'aujourd'hui l'erreur ne se
+ * découvre qu'à l'envoi du courriel.
+ */
+export const MERGE_VARIABLE_PATTERN = /\[\[:([a-zA-Z0-9_.\-]+):\]\]/g;
+
+function buildDecorations(doc, knownCodes) {
+  const decorations = [];
+  doc.descendants((node, pos) => {
+    if (!node.isText || !node.text) {
+      return;
+    }
+    MERGE_VARIABLE_PATTERN.lastIndex = 0;
+    let match = MERGE_VARIABLE_PATTERN.exec(node.text);
+    while (match !== null) {
+      const known = !knownCodes || knownCodes.indexOf(match[0]) !== -1;
+      decorations.push(
+        Decoration.inline(pos + match.index, pos + match.index + match[0].length, {
+          class: known ? 'rbf-mergevar' : 'rbf-mergevar rbf-mergevar-unknown',
+          title: match[1],
+        }),
+      );
+      match = MERGE_VARIABLE_PATTERN.exec(node.text);
+    }
+  });
+  return DecorationSet.create(doc, decorations);
+}
+
+export const MergeVariable = Extension.create({
+  name: 'mergeVariable',
+
+  addOptions() {
+    return {
+      /** Liste plate des codes connus, ou null pour ne rien signaler comme inconnu. */
+      knownCodes: null,
+    };
+  },
+
+  addProseMirrorPlugins() {
+    const knownCodes = this.options.knownCodes;
+    const key = new PluginKey('mergeVariable');
+    return [
+      new Plugin({
+        key,
+        state: {
+          init(config, state) {
+            return buildDecorations(state.doc, knownCodes);
+          },
+          apply(transaction, previous) {
+            return transaction.docChanged ? buildDecorations(transaction.doc, knownCodes) : previous;
+          },
+        },
+        props: {
+          decorations(state) {
+            return key.getState(state);
+          },
+        },
+      }),
+    ];
+  },
+});
+
+/**
+ * Aplatit une structure `mergeVars` groupée en simple liste de codes.
+ * Tolère l'ancien format plat `[{ text_code, text_content }]` de `presetTexts`.
+ */
+export function collectMergeCodes(mergeVars) {
+  if (!mergeVars || !Array.isArray(mergeVars) || mergeVars.length === 0) {
+    return null;
+  }
+  const codes = [];
+  for (let i = 0; i < mergeVars.length; i++) {
+    const entry = mergeVars[i];
+    if (!entry) {
+      continue;
+    }
+    if (Array.isArray(entry.items)) {
+      for (let j = 0; j < entry.items.length; j++) {
+        if (entry.items[j] && entry.items[j].code) {
+          codes.push(entry.items[j].code);
+        }
+      }
+    } else if (entry.code) {
+      codes.push(entry.code);
+    } else if (entry.text_code) {
+      codes.push(entry.text_code);
+    }
+  }
+  return codes.length > 0 ? codes : null;
+}
+
+export default MergeVariable;

package/src/features/editor/extensions/index.js

@@ -0,0 +1,4 @@
+export { FontSize } from './FontSize';
+export { LegacyImageAttrs } from './LegacyImageAttrs';
+export { CleanPaste } from './CleanPaste';
+export { MergeVariable, collectMergeCodes, MERGE_VARIABLE_PATTERN } from './MergeVariable';

package/src/features/editor/html/cleanHtml.constants.js

@@ -0,0 +1,279 @@
+/**
+ * Profils et listes blanches du nettoyeur HTML.
+ *
+ * Trois profils, du plus doux au plus agressif :
+ *
+ *  - LOAD   : à l'ouverture d'un contenu existant. Supprime uniquement le bruit
+ *             indiscutable (scripts, styles, balises Office). Ne retire JAMAIS
+ *             de mise en forme : on ne modifie pas la base sans demande.
+ *  - PASTE  : à chaque collage. Supprime tout le bruit Word / Google Docs /
+ *             Outlook, mais conserve les couleurs, polices et tailles voulues.
+ *  - STRICT : le bouton « Nettoyer ». PASTE + suppression des couleurs,
+ *             polices, tailles, interlignes et espacements.
+ */
+
+/**
+ * Balises supprimées avec leur contenu.
+ */
+export const DROP_TAGS = [
+  'script',
+  'style',
+  'link',
+  'meta',
+  'base',
+  'title',
+  'head',
+  'noscript',
+  'iframe',
+  'frame',
+  'frameset',
+  'object',
+  'embed',
+  'applet',
+  'param',
+  'form',
+  'input',
+  'button',
+  'select',
+  'option',
+  'optgroup',
+  'textarea',
+  'audio',
+  'video',
+  'source',
+  'track',
+  'canvas',
+  'svg',
+  'math',
+  'template',
+  'xml',
+];
+
+/**
+ * Balises conservées. Tout ce qui n'est ni ici ni dans DROP_TAGS est déballé
+ * (l'élément disparaît, ses enfants sont remontés) : le texte n'est jamais perdu.
+ *
+ * Le jeu correspond à ce que tolère un client de messagerie ancien. Les tableaux
+ * en sont volontairement absents : le schéma de l'éditeur ne les gère pas plus
+ * que l'ancien, les déballer préserve au moins le texte.
+ */
+export const ALLOWED_TAGS = [
+  'p',
+  'br',
+  'hr',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'strong',
+  'em',
+  'u',
+  's',
+  'sub',
+  'sup',
+  'span',
+  'a',
+  'ul',
+  'ol',
+  'li',
+  'blockquote',
+  'img',
+];
+
+/**
+ * Balises historiques remplacées par leur équivalent moderne.
+ */
+export const TAG_ALIASES = {
+  b: 'strong',
+  i: 'em',
+  strike: 's',
+  del: 's',
+  ins: 'u',
+  cite: 'em',
+  big: 'span',
+  small: 'span',
+};
+
+/**
+ * Balises vides conservées : elles portent du sens sans contenir de texte.
+ */
+export const KEEP_EMPTY_TAGS = ['br', 'img', 'hr', 'td', 'th'];
+
+/**
+ * Attributs conservés, par balise. La clé '*' s'applique à toutes.
+ */
+export const ALLOWED_ATTRIBUTES = {
+  '*': ['style'],
+  a: ['href', 'title', 'target', 'rel', 'name'],
+  img: ['src', 'alt', 'title', 'width', 'height'],
+  ol: ['start', 'type'],
+  li: ['value'],
+};
+
+/**
+ * Schémas d'URL autorisés. Un href hors liste perd son attribut, un src hors
+ * liste fait disparaître l'élément (on ne garde pas une image inerte).
+ */
+export const ALLOWED_HREF_SCHEMES = ['http:', 'https:', 'mailto:', 'tel:', 'ftp:'];
+export const ALLOWED_SRC_SCHEMES = ['http:', 'https:'];
+
+/**
+ * Propriétés CSS conservées. Tout le reste saute, `mso-*` compris.
+ */
+export const ALLOWED_STYLES = [
+  'color',
+  'background-color',
+  'font-family',
+  'font-size',
+  'font-weight',
+  'font-style',
+  'text-decoration',
+  'text-decoration-line',
+  'text-align',
+  'vertical-align',
+];
+
+/**
+ * Propriétés supprimées en plus par le profil STRICT : c'est exactement ce que
+ * l'utilisateur veut faire sauter d'un clic.
+ */
+export const STRICT_DROP_STYLES = [
+  'color',
+  'background-color',
+  'font-family',
+  'font-size',
+  'line-height',
+  'letter-spacing',
+  'word-spacing',
+  'text-transform',
+];
+
+/**
+ * Valeurs neutres : présentes, elles n'apportent rien et alourdissent le HTML.
+ * Comparaison faite sur la valeur normalisée (minuscules, espaces compactés).
+ */
+export const NEUTRAL_STYLE_VALUES = {
+  color: ['inherit', 'initial', 'unset', 'currentcolor', 'windowtext', 'black', '#000', '#000000', 'rgb(0,0,0)'],
+  'background-color': [
+    'inherit',
+    'initial',
+    'unset',
+    'transparent',
+    'none',
+    'white',
+    '#fff',
+    '#ffffff',
+    'rgb(255,255,255)',
+  ],
+  'font-weight': ['normal', '400', 'inherit', 'initial', 'unset'],
+  'font-style': ['normal', 'inherit', 'initial', 'unset'],
+  'text-decoration': ['none', 'inherit', 'initial', 'unset'],
+  'text-decoration-line': ['none', 'inherit', 'initial', 'unset'],
+  'text-align': ['inherit', 'initial', 'unset', 'start'],
+  'vertical-align': ['baseline', 'inherit', 'initial', 'unset'],
+  'font-family': ['inherit', 'initial', 'unset'],
+  'font-size': ['inherit', 'initial', 'unset', 'medium'],
+};
+
+/**
+ * Tailles de police par défaut des traitements de texte : les retirer évite de
+ * figer tout un contenu collé sur la taille de Word plutôt que celle du gabarit.
+ */
+export const DEFAULT_FONT_SIZES = ['11pt', '12pt', '10pt', '1rem', '1em', '16px', '14.6667px', '14.667px'];
+
+/**
+ * Polices par défaut des traitements de texte, normalisées (guillemets retirés,
+ * minuscules, espaces compactés).
+ */
+export const DEFAULT_FONT_FAMILIES = [
+  'calibri,sans-serif',
+  'calibri',
+  'times new roman,serif',
+  'times new roman',
+  'aptos,sans-serif',
+  'aptos',
+  'arial,sans-serif',
+  'arial,helvetica,sans-serif',
+  'docs-calibri',
+];
+
+const BASE_OPTIONS = {
+  dropTags: DROP_TAGS,
+  allowedTags: ALLOWED_TAGS,
+  tagAliases: TAG_ALIASES,
+  keepEmptyTags: KEEP_EMPTY_TAGS,
+  allowedAttributes: ALLOWED_ATTRIBUTES,
+  allowedHrefSchemes: ALLOWED_HREF_SCHEMES,
+  allowedSrcSchemes: ALLOWED_SRC_SCHEMES,
+  allowDataImages: true,
+  allowedStyles: ALLOWED_STYLES,
+  dropStyles: [],
+  neutralStyleValues: NEUTRAL_STYLE_VALUES,
+  defaultFontSizes: DEFAULT_FONT_SIZES,
+  defaultFontFamilies: DEFAULT_FONT_FAMILIES,
+  /** Classes conservées. Vide par défaut : c'est ce qui fait sauter les MsoNormal. */
+  keepClasses: [],
+  /** Remplace les <div> par des <p> lorsque le contexte le permet. */
+  convertDivToP: true,
+  /** Déballe les <span> qui ne portent plus aucun attribut. */
+  unwrapEmptySpans: true,
+  /** Supprime les éléments devenus vides. */
+  removeEmptyElements: true,
+  /** Fusionne les marques identiques imbriquées. */
+  mergeNestedMarks: true,
+  /** Compacte les espaces insécables en série et les blancs multiples. */
+  normalizeWhitespace: true,
+  /** Remonte les paragraphes imbriqués et supprime les <br> superflus. */
+  normalizeBlocks: true,
+  /** Nombre maximal de passes de purge des éléments vides. */
+  maxPasses: 5,
+};
+
+/**
+ * Profil LOAD — ouverture d'un contenu existant.
+ *
+ * Volontairement minimal : scripts, styles, balises Office et gestionnaires
+ * d'événements partent, rien d'autre. On ne modifie jamais la mise en forme
+ * d'un contenu que l'utilisateur n'a pas demandé à nettoyer, sinon ouvrir puis
+ * enregistrer un formulaire réécrirait la base en silence.
+ */
+export const CLEAN_LOAD = {
+  ...BASE_OPTIONS,
+  allowedTags: null,
+  tagAliases: null,
+  allowedAttributes: null,
+  keepClasses: null,
+  convertDivToP: false,
+  unwrapEmptySpans: false,
+  removeEmptyElements: false,
+  mergeNestedMarks: false,
+  normalizeWhitespace: false,
+  normalizeBlocks: false,
+  allowedStyles: null,
+  neutralStyleValues: null,
+  defaultFontSizes: [],
+  defaultFontFamilies: [],
+};
+
+/**
+ * Profil PASTE — collage. Le bruit part, la mise en forme voulue reste.
+ */
+export const CLEAN_PASTE = {
+  ...BASE_OPTIONS,
+};
+
+/**
+ * Profil STRICT — bouton « Nettoyer ».
+ */
+export const CLEAN_STRICT = {
+  ...BASE_OPTIONS,
+  dropStyles: STRICT_DROP_STYLES,
+};
+
+export const CLEAN_PROFILES = {
+  load: CLEAN_LOAD,
+  paste: CLEAN_PASTE,
+  strict: CLEAN_STRICT,
+};