react-bootstrap-front 3.10.2 → 3.11.0

package/src/features/editor/html/normalizeLegacyHtml.js

@@ -0,0 +1,196 @@
+import { cleanHtml } from './cleanHtml';
+
+/**
+ * Compatibilité avec les contenus produits par l'ancien éditeur draft-js.
+ *
+ * L'ancien `toHtml` (features/draft/InputHtml.js) est la spécification exacte de
+ * ce qui se trouve en base. Ce module rattrape les tournures que le schéma de
+ * l'éditeur ne saurait pas relire, AVANT que le contenu ne lui soit confié :
+ *
+ *  - `<cite>`  : draft-js écrivait la marque CODE ainsi. Inconnue du schéma,
+ *                elle produirait du texte nu et la mise en forme serait perdue.
+ *  - `<span style="text-align:…">` : l'alignement était posé sur de l'inline,
+ *                où il n'a aucun effet. On le remonte sur le bloc parent.
+ *  - `<br>` isolé entre deux blocs : c'était un paragraphe vide. Laissé tel
+ *                quel, il ferait fusionner les deux paragraphes voisins.
+ *  - `<span data-mailmerge="…">` : enveloppe d'une variable de fusion. Le texte
+ *                à l'intérieur est la variable elle-même, on garde le texte.
+ *
+ * Rien ici ne supprime de mise en forme : la fonction est appelée à chaque
+ * ouverture d'un contenu, elle doit être neutre pour tout ce qu'elle ne
+ * reconnaît pas.
+ */
+
+const BLOCK_ANCESTORS = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'li', 'blockquote', 'td', 'th', 'div'];
+
+const DEFAULTS = {
+  /** Ce que devient `<cite>` : 'em' (défaut), 'code' ou 'strip'. */
+  citeAs: 'em',
+  /** Passe de nettoyage minimal (profil LOAD) avant les rattrapages. */
+  clean: true,
+  /** Remonte `text-align` d'un span vers son bloc. */
+  liftTextAlign: true,
+  /** Convertit les `<br>` inter-blocs en paragraphes vides. */
+  brToParagraph: true,
+  /** Déballe les enveloppes de variables de fusion. */
+  unwrapMailmerge: true,
+};
+
+function parseRoot(html) {
+  if (typeof DOMParser === 'undefined') {
+    return null;
+  }
+  const doc = new DOMParser().parseFromString('<div id="rbf-legacy-root">' + html + '</div>', 'text/html');
+  return doc.getElementById('rbf-legacy-root');
+}
+
+function unwrap(el) {
+  const parent = el.parentNode;
+  if (!parent) {
+    return;
+  }
+  while (el.firstChild) {
+    parent.insertBefore(el.firstChild, el);
+  }
+  parent.removeChild(el);
+}
+
+function rename(el, tagName) {
+  const next = el.ownerDocument.createElement(tagName);
+  const attrs = el.attributes;
+  for (let i = 0; i < attrs.length; i++) {
+    try {
+      next.setAttribute(attrs[i].name, attrs[i].value);
+    } catch (e) {
+      /* nom d'attribut invalide */
+    }
+  }
+  while (el.firstChild) {
+    next.appendChild(el.firstChild);
+  }
+  if (el.parentNode) {
+    el.parentNode.replaceChild(next, el);
+  }
+  return next;
+}
+
+/**
+ * `<cite>` était la marque CODE de draft-js.
+ */
+function handleCite(root, citeAs) {
+  const cites = Array.prototype.slice.call(root.getElementsByTagName('cite'));
+  for (let i = cites.length - 1; i >= 0; i--) {
+    if (citeAs === 'strip') {
+      unwrap(cites[i]);
+    } else {
+      rename(cites[i], citeAs === 'code' ? 'code' : 'em');
+    }
+  }
+}
+
+/**
+ * L'alignement posé sur un span inline n'a aucun effet : on le remonte sur le
+ * premier bloc ancêtre, qui est le seul endroit où l'éditeur saura le relire.
+ */
+function liftTextAlign(root) {
+  const spans = Array.prototype.slice.call(root.getElementsByTagName('span'));
+  for (let i = 0; i < spans.length; i++) {
+    const span = spans[i];
+    const style = span.getAttribute('style');
+    if (!style || style.indexOf('text-align') === -1) {
+      continue;
+    }
+    const match = /text-align\s*:\s*([a-z]+)/i.exec(style);
+    if (!match) {
+      continue;
+    }
+    const align = match[1].toLowerCase();
+    span.setAttribute('style', style.replace(/text-align\s*:\s*[a-z]+\s*;?/i, '').trim());
+    if ((span.getAttribute('style') || '').replace(/[\s;]/g, '') === '') {
+      span.removeAttribute('style');
+    }
+    const block = closestBlock(span, root);
+    if (block && !/text-align/i.test(block.getAttribute('style') || '')) {
+      const existing = block.getAttribute('style');
+      block.setAttribute(
+        'style',
+        existing ? existing.replace(/;?\s*$/, '; ') + 'text-align: ' + align : 'text-align: ' + align,
+      );
+    }
+    /* Le span n'était là que pour porter l'alignement : il n'a plus d'objet. */
+    if (span.attributes.length === 0) {
+      unwrap(span);
+    }
+  }
+}
+
+function closestBlock(el, root) {
+  let node = el.parentNode;
+  while (node && node !== root && node.nodeType === 1) {
+    if (BLOCK_ANCESTORS.indexOf(node.tagName.toLowerCase()) !== -1) {
+      return node;
+    }
+    node = node.parentNode;
+  }
+  return null;
+}
+
+/**
+ * draft-convert écrivait un `<br>` nu pour un paragraphe vide (blockToHTML
+ * retournait `<br />` sur un bloc `unstyled` sans texte). Au niveau racine, ce
+ * `<br>` doit redevenir un paragraphe, sinon les blocs voisins fusionnent.
+ */
+function brToParagraph(root) {
+  const brs = Array.prototype.slice.call(root.childNodes);
+  for (let i = 0; i < brs.length; i++) {
+    const node = brs[i];
+    if (node.nodeType !== 1 || node.tagName.toLowerCase() !== 'br') {
+      continue;
+    }
+    const p = root.ownerDocument.createElement('p');
+    root.replaceChild(p, node);
+  }
+}
+
+/**
+ * `<span data-mailmerge="…">[[:code:]]</span>` : le texte intérieur est la
+ * variable, on le conserve tel quel et on jette l'enveloppe.
+ */
+function unwrapMailmerge(root) {
+  const spans = Array.prototype.slice.call(root.querySelectorAll('span[data-mailmerge]'));
+  for (let i = spans.length - 1; i >= 0; i--) {
+    unwrap(spans[i]);
+  }
+}
+
+/**
+ * Prépare un contenu HTML existant pour l'éditeur.
+ *
+ * @param {string} html
+ * @param {object} options  cf. DEFAULTS
+ * @returns {string}
+ */
+export function normalizeLegacyHtml(html, options) {
+  if (html === null || html === undefined || html === '') {
+    return '';
+  }
+  const opts = { ...DEFAULTS, ...(options || {}) };
+  const base = opts.clean ? cleanHtml(html, 'load') : String(html);
+  const root = parseRoot(base);
+  if (!root) {
+    return base;
+  }
+  handleCite(root, opts.citeAs);
+  if (opts.unwrapMailmerge) {
+    unwrapMailmerge(root);
+  }
+  if (opts.liftTextAlign) {
+    liftTextAlign(root);
+  }
+  if (opts.brToParagraph) {
+    brToParagraph(root);
+  }
+  return root.innerHTML;
+}
+
+export default normalizeLegacyHtml;

package/src/features/editor/html/serialize.js

@@ -0,0 +1,130 @@
+/**
+ * Sérialisation du contenu de l'éditeur vers la chaîne stockée en base.
+ *
+ * Deux règles portent tout le fichier :
+ *
+ *  - un document vide rend la chaîne vide, pas `<p></p>`. Sans cela un champ
+ *    `required` serait toujours considéré comme rempli et la validation des
+ *    formulaires ne se déclencherait jamais ;
+ *  - un paragraphe vide devient `<p>&nbsp;</p>`, parce que les clients de
+ *    messagerie effondrent les paragraphes réellement vides et que la ligne
+ *    blanche voulue par le rédacteur disparaîtrait à l'envoi.
+ */
+
+const DEFAULTS = {
+  /** 'nbsp' (défaut), 'br' ou 'keep' */
+  emptyParagraph: 'nbsp',
+  /** Un document sans texte ni média rend '' */
+  emptyDocumentAsEmptyString: true,
+  /** Ferme les balises orphelines en XML (`<img />`) si le moteur PHP l'exige */
+  selfClosing: false,
+  /** Ramène les couleurs en notation hexadécimale */
+  hexColors: true,
+};
+
+/**
+ * Le navigateur normalise toute couleur lue dans un style en `rgb(r, g, b)`.
+ * Sans cette conversion, ouvrir puis enregistrer un contenu réécrirait chaque
+ * couleur de la base en `rgb()` — un changement inutile, et moins bien
+ * supporté que l'hexadécimal par les clients de messagerie anciens.
+ *
+ * Les couleurs à transparence partielle sont laissées telles quelles :
+ * l'hexadécimal sur huit chiffres n'est pas lisible par ces mêmes clients.
+ */
+function toHexColors(html) {
+  return html.replace(/rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(?:1|1\.0+)\s*)?\)/gi, function(
+    match,
+    r,
+    g,
+    b,
+  ) {
+    const channel = value => {
+      const hex = Number(value).toString(16);
+      return hex.length === 1 ? '0' + hex : hex;
+    };
+    return '#' + channel(r) + channel(g) + channel(b);
+  });
+}
+
+/** Balises qui portent du sens sans contenir de texte. */
+const MEANINGFUL_EMPTY_TAGS = /<\s*(img|hr|br|iframe|video|audio)\b/i;
+
+/**
+ * Un contenu est vide s'il ne porte ni texte visible ni média.
+ * Volontairement indépendante de l'éditeur : testable sans navigateur.
+ */
+export function isEmptyHtml(html) {
+  if (html === null || html === undefined) {
+    return true;
+  }
+  const str = String(html);
+  if (str.trim() === '') {
+    return true;
+  }
+  if (MEANINGFUL_EMPTY_TAGS.test(str)) {
+    return false;
+  }
+  const text = str
+    .replace(/<[^>]*>/g, '')
+    .replace(/&nbsp;/gi, ' ')
+    .replace(/&#160;/g, ' ')
+    .replace(/\u00a0/g, ' ');
+  return text.trim() === '';
+}
+
+function applyEmptyParagraph(html, mode) {
+  if (mode === 'keep') {
+    return html;
+  }
+  const filler = mode === 'br' ? '<br>' : '&nbsp;';
+  /* <p></p> et <p style="…"></p>, y compris avec des blancs à l'intérieur */
+  return html.replace(/<p([^>]*)>(\s|&nbsp;|&#160;)*<\/p>/gi, '<p$1>' + filler + '</p>');
+}
+
+function applySelfClosing(html) {
+  return html.replace(/<(img|br|hr)\b([^>]*?)\s*\/?>/gi, function(match, tag, attrs) {
+    return '<' + tag + attrs + ' />';
+  });
+}
+
+/**
+ * Met en forme une chaîne HTML pour le stockage.
+ *
+ * @param {string} html
+ * @param {object} options  cf. DEFAULTS
+ * @returns {string}
+ */
+export function serializeHtml(html, options) {
+  const opts = { ...DEFAULTS, ...(options || {}) };
+  if (html === null || html === undefined) {
+    return '';
+  }
+  let out = String(html);
+  if (opts.emptyDocumentAsEmptyString && isEmptyHtml(out)) {
+    return '';
+  }
+  out = applyEmptyParagraph(out, opts.emptyParagraph);
+  if (opts.hexColors) {
+    out = toHexColors(out);
+  }
+  if (opts.selfClosing) {
+    out = applySelfClosing(out);
+  }
+  return out;
+}
+
+/**
+ * Sérialise l'état courant d'un éditeur TipTap.
+ *
+ * @param {object} editor  instance @tiptap/core
+ * @param {object} options cf. DEFAULTS
+ * @returns {string}
+ */
+export function serialize(editor, options) {
+  if (!editor) {
+    return '';
+  }
+  return serializeHtml(editor.getHTML(), options);
+}
+
+export default serialize;

package/src/features/editor/html/sourceHelpers.js

@@ -0,0 +1,86 @@
+/**
+ * Aides de la vue source.
+ *
+ * Toutes pures et sans dépendance à l'éditeur : elles servent à répondre à
+ * deux questions au retour vers le mode riche, et il vaut mieux pouvoir les
+ * tester séparément.
+ *
+ *  1. le HTML saisi était-il équilibré, ou le navigateur l'a-t-il recousu ?
+ *  2. le passage par le schéma de l'éditeur a-t-il perdu du contenu ?
+ */
+
+const BLOCK_TAGS = 'p|div|h[1-6]|ul|ol|li|blockquote|hr|table|thead|tbody|tr|td|th|pre|br|img';
+
+/**
+ * Indentation naïve : un bloc par ligne. Uniquement pour la lecture — ce n'est
+ * jamais ce qui est réémis vers le formulaire.
+ */
+export function formatHtml(html) {
+  if (!html) {
+    return '';
+  }
+  const openRe = new RegExp('<(' + BLOCK_TAGS + ')\\b', 'gi');
+  const closeRe = new RegExp('</(' + BLOCK_TAGS + ')\\s*>', 'gi');
+  return String(html)
+    .replace(openRe, match => '\n' + match)
+    .replace(closeRe, match => match + '\n')
+    .split('\n')
+    .map(line => line.trim())
+    .filter(line => line !== '')
+    .join('\n');
+}
+
+/**
+ * Suite des balises rencontrées, ouvrantes et fermantes.
+ * Comparer la signature d'une saisie et celle de sa relecture par le
+ * navigateur dit si le HTML était équilibré.
+ */
+export function tagSignature(html) {
+  const tags = [];
+  const re = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi;
+  let match = re.exec(String(html || ''));
+  while (match !== null) {
+    tags.push((match[0].charAt(1) === '/' ? '/' : '') + match[1].toLowerCase());
+    match = re.exec(String(html || ''));
+  }
+  return tags.join(',');
+}
+
+/**
+ * Texte visible, blancs normalisés. Une différence signale une perte réelle
+ * de contenu, pas une simple différence de balisage.
+ */
+export function textSignature(html) {
+  return String(html || '')
+    .replace(/<[^>]*>/g, ' ')
+    .replace(/&nbsp;/gi, ' ')
+    .replace(/&#160;/g, ' ')
+    .replace(/\u00a0/g, ' ')
+    .replace(/&amp;/gi, '&')
+    .replace(/&lt;/gi, '<')
+    .replace(/&gt;/gi, '>')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+/**
+ * Relit un fragment par le navigateur et rend le HTML recousu.
+ * `DOMParser` ne lève jamais sur du HTML mal formé, il le répare — c'est
+ * précisément ce qui permet de détecter le déséquilibre par comparaison.
+ */
+export function reserialize(html) {
+  if (typeof DOMParser === 'undefined') {
+    return String(html || '');
+  }
+  const doc = new DOMParser().parseFromString('<div id="rbf-source-root">' + html + '</div>', 'text/html');
+  const root = doc.getElementById('rbf-source-root');
+  return root ? root.innerHTML : String(html || '');
+}
+
+/**
+ * Vrai si le HTML saisi est équilibré, c'est-à-dire si le navigateur n'a rien
+ * eu à recoudre.
+ */
+export function isBalanced(html) {
+  return tagSignature(html) === tagSignature(reserialize(html));
+}

package/src/features/editor/index.js

@@ -0,0 +1,20 @@
+/**
+ * Éditeur HTML (TipTap 2).
+ *
+ * `InputHtml` n'est volontairement PAS ré-exporté ici tant que
+ * `features/draft` existe : deux `export *` portant le même nom produisent un
+ * « ambiguous star export », résolu silencieusement en `undefined`.
+ * L'alias sera ajouté en 4.0.0, à la suppression de draft-js.
+ */
+export { default as HtmlEditor } from './HtmlEditor';
+export { default as EditorToolbar } from './Toolbar';
+export { default as EditorToolbarButton } from './ToolbarButton';
+export { default as EditorSourceView } from './SourceView';
+export { default as EditorLinkDialog } from './LinkDialog';
+export { default as EditorImageDialog } from './ImageDialog';
+export { default as EditorMergeMenu, normalizeMergeVars } from './MergeMenu';
+export { defaultIcons as editorDefaultIcons } from './defaultIcons';
+export { buildExtensions } from './buildExtensions';
+export * from './toolbarPresets';
+export * from './html';
+export * from './extensions';

package/src/features/editor/style.scss

@@ -0,0 +1,2 @@
+@import './HtmlEditor';
+@import './Toolbar';

package/src/features/editor/toolbarPresets.js

@@ -0,0 +1,74 @@
+/**
+ * Configurations de barre d'outils.
+ *
+ * Un preset est une liste de groupes, chaque groupe une liste de clés de
+ * boutons. L'application peut moduler par formulaire : un champ de traduction
+ * ou d'alerte n'a pas besoin de la même barre qu'un gabarit de courriel.
+ */
+export const TOOLBAR_PRESETS = {
+  full: [
+    ['undo', 'redo'],
+    ['paragraph', 'heading1', 'heading2', 'heading3'],
+    ['bold', 'italic', 'underline', 'strike', 'subscript', 'superscript'],
+    ['bulletList', 'orderedList', 'blockquote'],
+    ['alignLeft', 'alignCenter', 'alignRight', 'alignJustify'],
+    ['color', 'fontSize', 'fontFamily'],
+    ['link', 'unlink', 'image'],
+    ['mergeVar'],
+    ['clean', 'formatClear'],
+    ['source'],
+  ],
+  email: [
+    ['undo', 'redo'],
+    ['paragraph', 'heading1', 'heading2', 'heading3'],
+    ['bold', 'italic', 'underline', 'strike'],
+    ['bulletList', 'orderedList'],
+    ['alignLeft', 'alignCenter', 'alignRight'],
+    ['color', 'fontSize'],
+    ['link', 'unlink', 'image'],
+    ['mergeVar'],
+    ['clean', 'formatClear'],
+    ['source'],
+  ],
+  simple: [['bold', 'italic', 'underline'], ['bulletList', 'orderedList'], ['link'], ['clean']],
+  minimal: [['bold', 'italic'], ['clean']],
+};
+
+/** Groupes rebasculés dans le menu « … » sur petit écran. */
+export const OPTIONAL_KEYS = ['color', 'fontSize', 'fontFamily', 'alignJustify', 'blockquote', 'horizontalRule'];
+
+export const FONT_SIZES = ['8px', '10px', '11px', '12px', '14px', '16px', '18px', '24px', '30px', '36px', '48px'];
+
+export const FONT_FAMILIES = ['Arial', 'Georgia', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana'];
+
+/**
+ * Palette volontairement courte : dans un courriel, une charte tient en une
+ * poignée de couleurs, et un nuancier complet invite à la faute de goût.
+ */
+export const COLORS = [
+  '#000000',
+  '#434343',
+  '#666666',
+  '#999999',
+  '#b7b7b7',
+  '#ffffff',
+  '#980000',
+  '#ff0000',
+  '#ff9900',
+  '#ffff00',
+  '#00ff00',
+  '#00ffff',
+  '#4a86e8',
+  '#0000ff',
+  '#9900ff',
+  '#ff00ff',
+  '#83ad10',
+  '#235b8b',
+];
+
+export function resolveToolbarConfig(preset, config) {
+  if (Array.isArray(config)) {
+    return config;
+  }
+  return TOOLBAR_PRESETS[preset] || TOOLBAR_PRESETS.full;
+}

package/src/features/page/DefaultHeader.jsx

@@ -96,7 +96,7 @@ export class DefaultHeader extends Component {
     return (
       <div
         className={classnames(
-          'default-header bg-secondary pl-2 overflow-none h-100',
+          'default-header pl-2 overflow-none h-100',
           'bg-' + this.props.headerBackgroundTheme
         )}
       >

package/src/index.js

@@ -71,9 +71,17 @@ export { default as SvgNext } from "./features/advanced/SvgNext";
 export { default as SvgToday } from "./features/advanced/SvgToday";
 export { default as WidthObserver } from "./features/advanced/WidthObserver";
 
+/**
+ *******************************************************************************
+ * Editor (TipTap)
+ *******************************************************************************
+ */
+export * from "./features/editor/index.js";
+
 /**
  *******************************************************************************
  * Draft
+ * @deprecated remplacé par features/editor, supprimé en 4.0.0
  *******************************************************************************
  */
  export * from "./features/draft/index.js";

package/src/styles/index.scss

@@ -4,6 +4,7 @@
 @import '../features/advanced/style';
 @import '../features/basic/style';
 @import '../features/draft/style';
+@import '../features/editor/style';
 @import '../features/filter/style';
 @import '../features/grid/style';
 @import '../features/inline-list/style';