react-bootstrap-front 3.10.2 → 3.11.0

package/doc/editor/feuille-de-route.md

@@ -0,0 +1,36 @@
+# Éditeur HTML : feuille de route
+
+Remplacement de l'éditeur draft-js (`src/features/draft`) par TipTap 2
+(`src/features/editor`).
+
+Les commits de septembre 2026 sont numérotés « phase n/8 », mais aucun plan écrit
+ne détaille les phases 6 à 8. **Cette page fait foi** pour ce qui reste à faire.
+
+## Fait : version 3.11.0
+
+| Étape | Commit | Contenu |
+|---|---|---|
+| 1 | `36b9ce8` | Noyau de nettoyage : `cleanHtml` (profils LOAD, PASTE, STRICT), `normalizeLegacyHtml`, `serialize` |
+| 2 | `ccfbef6` | Composant `HtmlEditor`, contrat d'appel identique à l'ancien `InputHtml` |
+| 3 | `69d7e68` | Barre d'outils, dialogues lien, image et variables, vue source |
+| 4-5 | `1178cbc` | Tests de montage, aperçu autonome `demo/`, `sync-to.sh` |
+| | `abd989f`, `8e4d49c` | Placement des menus déroulants, dont profite la barre d'outils |
+
+Première application intégrée : l'administration Kalaweit (dépôt `admin`, commit
+`a5dc76a`).
+
+## Reste à faire
+
+1. **Publier la 3.11.0 sur npm.** Une application ne doit jamais dépendre d'une copie
+   manuelle : `sync-to.sh` sert au développement, pas à la livraison.
+2. **Valider en production**, avec l'administration Kalaweit 2.23.1.
+3. **Version 4.0.0**, une fois la validation faite :
+   - supprimer `src/features/draft` et son `export *` dans `src/index.js` ;
+   - retirer les dépendances `draft-js`, `draft-convert`, `html-to-draftjs`,
+     `react-draft-wysiwyg` et `@draft-js-plugins/image`, qui ne servent nulle part
+     ailleurs ;
+   - ré-exporter `HtmlEditor` sous le nom `InputHtml`, voir
+     `src/features/editor/index.js` ;
+   - le bundle doit repasser sous sa taille d'avant TipTap, environ 300 Ko de moins.
+4. **Quand le catalogue des variables de fusion viendra de l'API**, activer
+   `strictMergeVars` dans les applications, pour signaler les variables inconnues.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-front",
-  "version": "3.10.2",
+  "version": "3.11.0",
   "description": "React Bootstrap Components",
   "keywords": [
     "Bootstrap 4",
@@ -21,7 +21,7 @@
   "scripts": {
     "build": "webpack --config webpack.config.js",
     "test": "jest --silent=false",
-    "prepublish": "npm run build",
+    "prepublishOnly": "npm run build",
     "studio": "rekit-studio -p 8477",
     "doc:prepare": "cross-env NODE_ENV=development gitbook install",
     "doc:serve": "npm run doc:prepare && gitbook serve",
@@ -37,6 +37,19 @@
     "@draft-js-plugins/image": "^4.1.2",
     "@ericblade/quagga2": "^1.4.1",
     "@popperjs/core": "^2.5.4",
+    "@tiptap/core": "2.27.3",
+    "@tiptap/extension-color": "2.27.3",
+    "@tiptap/extension-font-family": "2.27.3",
+    "@tiptap/extension-image": "2.27.3",
+    "@tiptap/extension-link": "2.27.3",
+    "@tiptap/extension-placeholder": "2.27.3",
+    "@tiptap/extension-subscript": "2.27.3",
+    "@tiptap/extension-superscript": "2.27.3",
+    "@tiptap/extension-text-align": "2.27.3",
+    "@tiptap/extension-text-style": "2.27.3",
+    "@tiptap/extension-underline": "2.27.3",
+    "@tiptap/pm": "2.27.3",
+    "@tiptap/starter-kit": "2.27.3",
     "autosize": "^4.0.2",
     "babel-runtime": "^6.26.0",
     "classnames": "^2.2.6",
@@ -91,7 +104,7 @@
     "@babel/preset-env": "^7.12.1",
     "@babel/preset-react": "^7.12.1",
     "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "^29.4.1",
+    "babel-jest": "^26.6.3",
     "babel-loader": "8.0.4",
     "babel-plugin-module-resolver": "3.1.1",
     "babel-plugin-transform-runtime": "^6.23.0",
@@ -146,14 +159,13 @@
     "testEnvironment": "jsdom",
     "testURL": "http://localhost",
     "transform": {
-      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
+      "^.+\\.(js|jsx|ts|tsx|cjs|mjs)$": "<rootDir>/node_modules/babel-jest",
       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
-      "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
+      "^(?!.*\\.(js|jsx|ts|tsx|cjs|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
     },
     "transformIgnorePatterns": [
-      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
-      "^.+\\.module\\.(css|sass|scss)$",
-      "node_modules/(?!imask)"
+      "[/\\\\]node_modules[/\\\\](?!(@tiptap|prosemirror-|linkifyjs|orderedmap|rope-sequence|w3c-keyname|crelt|markdown-it|entities|uc\\.micro|punycode\\.js|mdurl|imask)).+\\.(js|jsx|ts|tsx)$",
+      "^.+\\.module\\.(css|sass|scss)$"
     ],
     "moduleNameMapper": {
       "^react-native$": "react-native-web",
@@ -162,6 +174,8 @@
     "moduleFileExtensions": [
       "web.js",
       "js",
+      "cjs",
+      "mjs",
       "web.ts",
       "ts",
       "web.tsx",
@@ -171,5 +185,25 @@
       "jsx",
       "node"
     ]
+  },
+  "overrides": {
+    "prosemirror-changeset": "2.4.2",
+    "prosemirror-collab": "1.3.1",
+    "prosemirror-commands": "1.7.2",
+    "prosemirror-dropcursor": "1.8.3",
+    "prosemirror-gapcursor": "1.4.1",
+    "prosemirror-history": "1.5.0",
+    "prosemirror-inputrules": "1.5.1",
+    "prosemirror-keymap": "1.2.3",
+    "prosemirror-markdown": "1.13.7",
+    "prosemirror-menu": "1.3.2",
+    "prosemirror-model": "1.25.11",
+    "prosemirror-schema-basic": "1.2.4",
+    "prosemirror-schema-list": "1.5.1",
+    "prosemirror-state": "1.4.4",
+    "prosemirror-tables": "1.8.5",
+    "prosemirror-trailing-node": "3.0.0",
+    "prosemirror-transform": "1.12.1",
+    "prosemirror-view": "1.42.3"
   }
 }

package/src/features/advanced/DropdownWrapper.js

@@ -22,8 +22,18 @@ export default class DropdownWrapper extends Component {
     tooltip: '',
   };
 
-  static getDerivedStateFromProps(state, props) {
-    if (state.origOpen !== props.open && state.open !== props.open) {
+  /**
+   * React appelle cette méthode avec (props, state) : les deux paramètres
+   * étaient nommés à l'envers, ce qui rendait la prop `open` inopérante — elle
+   * se comparait à elle-même. Aucun appelant ne la passe aujourd'hui, le
+   * comportement observable est donc inchangé.
+   *
+   * `open` est une valeur initiale, pas un contrôle : on ne la reprend que
+   * lorsqu'elle change réellement côté appelant, sinon le menu se refermerait
+   * à chaque rendu du parent.
+   */
+  static getDerivedStateFromProps(props, state) {
+    if (props.open !== state.origOpen) {
       return { open: props.open, origOpen: props.open };
     }
     return null;

package/src/features/basic/Dropdown.js

@@ -3,17 +3,23 @@ import classnames from 'classnames';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { Portal } from '../advanced';
+import { computePlacement, DROPDOWN_MARGIN } from './computePlacement';
 
-const getCoords = (props) => {
+const getCoords = props => {
   if (props.myRef && props.myRef.current) {
     try {
       return props.myRef.current.getBoundingClientRect();
     } catch (ex) {
-      console.log("FK pas de coordonées",ex);
+      return null;
     }
   }
   return null;
-}
+};
+
+const getViewport = () => ({
+  width: typeof window !== 'undefined' ? window.innerWidth : 0,
+  height: typeof window !== 'undefined' ? window.innerHeight : 0,
+});
 
 export default class Dropdown extends Component {
   static propTypes = {
@@ -21,7 +27,7 @@ export default class Dropdown extends Component {
     children: PropTypes.element.isRequired,
     className: PropTypes.string,
     maxHeight: PropTypes.string,
-    myRef: PropTypes.element.isRequired,
+    myRef: PropTypes.object.isRequired,
     onClose: PropTypes.func,
   };
 
@@ -29,31 +35,86 @@ export default class Dropdown extends Component {
     align: 'bottom-left',
     className: '',
     maxHeight: 'auto',
-    onClose: null
+    onClose: null,
   };
 
   constructor(props) {
     super(props);
+    this.nodeRef = React.createRef();
+    this.scrollRef = React.createRef();
+    /* Première position calculée sur la seule ancre : la taille du menu n'est
+       pas encore connue. Elle est affinée dès le montage, ce qui évite
+       d'afficher le menu au mauvais endroit le temps d'une image. */
     this.state = {
-      coords: getCoords(this.props),
+      placement: this.getPlacement(null),
     };
     this.handleClickOutside = this.handleClickOutside.bind(this);
-    this.handleScroll = this.handleScroll.bind(this);
+    this.reposition = this.reposition.bind(this);
   }
 
   componentDidMount() {
     document.addEventListener('click', this.handleClickOutside, true);
-    document.addEventListener('scroll', this.handleScroll, true);
+    /* En capture : le menu doit suivre un défilement de n'importe quel
+       conteneur, pas seulement de la page. */
+    document.addEventListener('scroll', this.reposition, true);
+    window.addEventListener('resize', this.reposition);
+    this.reposition();
   }
 
   componentWillUnmount() {
     document.removeEventListener('click', this.handleClickOutside, true);
-    document.removeEventListener('scroll', this.handleScroll, true);
+    document.removeEventListener('scroll', this.reposition, true);
+    window.removeEventListener('resize', this.reposition);
+  }
+
+  /**
+   * Taille du menu, une fois rendu. Nulle au premier calcul.
+   *
+   * La hauteur lue est celle du CONTENU (`scrollHeight` du conteneur
+   * défilant), pas celle de l'élément : ce dernier porte déjà le `max-height`
+   * calculé au tour précédent, si bien que sa hauteur rendue ne dépasse jamais
+   * l'espace disponible. S'y fier rendrait tout débordement invisible et le
+   * menu ne se retournerait jamais — il resterait écrasé sous le bas de page.
+   */
+  getMenuSize() {
+    const node = this.nodeRef.current;
+    if (!node) {
+      return null;
+    }
+    const scroller = this.scrollRef.current;
+    const height = scroller ? scroller.scrollHeight : node.scrollHeight;
+    return { width: node.offsetWidth, height: height };
+  }
+
+  getPlacement(menuSize) {
+    const anchor = getCoords(this.props);
+    if (!anchor) {
+      return null;
+    }
+    return computePlacement(anchor, menuSize, this.props.align, getViewport());
+  }
+
+  reposition() {
+    const placement = this.getPlacement(this.getMenuSize());
+    if (!placement) {
+      return;
+    }
+    const current = this.state.placement;
+    if (
+      current &&
+      current.top === placement.top &&
+      current.left === placement.left &&
+      current.right === placement.right &&
+      current.maxHeight === placement.maxHeight
+    ) {
+      return;
+    }
+    this.setState({ placement: placement });
   }
 
   handleClickOutside(event) {
     const domNode = ReactDOM.findDOMNode(this);
-    if (!domNode || !domNode.contains(event.target)) {  
+    if (!domNode || !domNode.contains(event.target)) {
       if (this.props.myRef && this.props.myRef.current && this.props.myRef.current.contains(event.target)) {
         event.preventDefault();
         event.stopPropagation();
@@ -62,35 +123,53 @@ export default class Dropdown extends Component {
     }
   }
 
-  handleScroll(event) {
-    this.setState({coords: getCoords(this.props)});
+  /**
+   * Hauteur retenue : la plus contraignante entre celle demandée et la place
+   * réellement disponible dans la fenêtre.
+   */
+  getMaxHeight() {
+    const { placement } = this.state;
+    const available = placement ? Math.max(0, placement.maxHeight) : null;
+    const asked = this.props.maxHeight;
+    if (asked && asked !== 'auto') {
+      const value = parseFloat(asked);
+      if (!isNaN(value) && available !== null && available < value) {
+        return available + 'px';
+      }
+      return asked;
+    }
+    return available !== null ? available + 'px' : 'auto';
   }
 
   render() {
-    let divStyle = {
-      position: 'absolute',
-      maxHeight: this.props.maxHeight,
+    const { placement } = this.state;
+    const maxHeight = this.getMaxHeight();
+    /* `fixed` et non `absolute` : les coordonnées de l'ancre viennent de
+       getBoundingClientRect, donc relatives à la fenêtre. En `absolute` dans
+       un portail accroché au body, le menu dérivait de toute la hauteur
+       défilée — c'était le défaut visible. */
+    const divStyle = {
+      position: 'fixed',
+      maxHeight: maxHeight,
       overflow: 'hidden',
     };
-    try {
-      if (this.state.coords) {
-        const { coords } = this.state;
-        switch (this.props.align) {
-          case 'bottom-right':
-            divStyle.right = -1 * (coords.left + coords.width);
-            divStyle.top = coords.top + coords.height;
-            break;
-          default:
-            divStyle.left = coords.left;
-            divStyle.top = coords.top + coords.height;
-            break;
-        }
+    if (placement) {
+      divStyle.top = placement.top;
+      if (placement.left !== undefined) {
+        divStyle.left = placement.left;
+      }
+      if (placement.right !== undefined) {
+        divStyle.right = placement.right;
       }
-    } catch (ex) { console.log(ex); }
+    }
     return (
       <Portal>
-        <div className={classnames('rbf-dropdown', this.props.className)} style={divStyle}>
-          <div className="custom-scrollbar" style={{ maxHeight: this.props.maxHeight, overflowX: 'hidden', overflowY: 'auto' }}>
+        <div ref={this.nodeRef} className={classnames('rbf-dropdown', this.props.className)} style={divStyle}>
+          <div
+            ref={this.scrollRef}
+            className="custom-scrollbar"
+            style={{ maxHeight: maxHeight, overflowX: 'hidden', overflowY: 'auto' }}
+          >
             {this.props.children}
           </div>
         </div>
@@ -98,3 +177,5 @@ export default class Dropdown extends Component {
     );
   }
 }
+
+export { DROPDOWN_MARGIN };

package/src/features/basic/computePlacement.js

@@ -0,0 +1,66 @@
+/** Marge minimale conservée entre le menu et le bord de la fenêtre. */
+export const DROPDOWN_MARGIN = 8;
+
+/**
+ * Calcule la position d'un menu déroulant.
+ *
+ * Fonction pure, volontairement séparée du composant : c'est la seule partie
+ * délicate, et elle se teste sans DOM.
+ *
+ * Les coordonnées de l'ancre viennent de `getBoundingClientRect()`, donc
+ * relatives à la FENÊTRE. Le menu doit être positionné en `fixed`, sinon il
+ * dérive de toute la hauteur défilée.
+ *
+ * @param {object} anchor   { left, top, width, height, right, bottom }
+ * @param {object} menu     { width, height } — 0 tant que le menu n'est pas mesuré
+ * @param {string} align    'bottom-right' aligne les bords droits, sinon les gauches
+ * @param {object} viewport { width, height }
+ * @param {number} margin
+ * @returns {object} style partiel : top, plus left ou right, plus maxHeight
+ */
+export function computePlacement(anchor, menu, align, viewport, margin = DROPDOWN_MARGIN) {
+  const menuWidth = (menu && menu.width) || 0;
+  const menuHeight = (menu && menu.height) || 0;
+  const anchorRight = anchor.right !== undefined ? anchor.right : anchor.left + anchor.width;
+  const anchorBottom = anchor.bottom !== undefined ? anchor.bottom : anchor.top + anchor.height;
+
+  const spaceBelow = viewport.height - anchorBottom;
+  const spaceAbove = anchor.top;
+
+  /* Le menu s'ouvre vers le bas, sauf s'il n'y tient pas et qu'il y a
+     davantage de place au-dessus.
+     `menuHeight` doit être la hauteur NATURELLE du contenu : la hauteur rendue
+     est déjà écrêtée par le max-height posé au calcul précédent, et s'y fier
+     rendrait tout débordement invisible. */
+  const flip = menuHeight > 0 && spaceBelow < menuHeight + margin && spaceAbove > spaceBelow;
+  const available = Math.max(0, (flip ? spaceAbove : spaceBelow) - margin);
+  const effectiveHeight = menuHeight > 0 ? Math.min(menuHeight, available) : 0;
+
+  /* Retourné, c'est le BAS du menu qui se cale sur le déclencheur : partir de
+     la hauteur naturelle laisserait un trou dès que le menu est écrêté. */
+  let top = flip ? anchor.top - effectiveHeight : anchorBottom;
+  top = Math.min(top, viewport.height - margin - effectiveHeight);
+  top = Math.max(margin, top);
+
+  const placement = { top: top, maxHeight: available };
+
+  if (align === 'bottom-right') {
+    /* Bords droits alignés. En `right`, cela vaut la distance entre le bord
+       droit de la fenêtre et celui de l'ancre. */
+    let right = viewport.width - anchorRight;
+    if (menuWidth > 0) {
+      /* Ne pas déborder par la gauche. */
+      right = Math.min(right, viewport.width - menuWidth - margin);
+    }
+    placement.right = Math.max(margin, right);
+  } else {
+    let left = anchor.left;
+    if (menuWidth > 0) {
+      left = Math.min(left, viewport.width - menuWidth - margin);
+    }
+    placement.left = Math.max(margin, left);
+  }
+  return placement;
+}
+
+export default computePlacement;