pagery-edition 1.1.1 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pagery-edition",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Composants d'édition en ligne pour les sites clients Pagery",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/components/TexteEditable.tsx

@@ -4,7 +4,6 @@
 "use client";
 
 import { useCallback, useEffect, useRef, useState } from "react";
-// @ts-expect-error react-dom types manquants
 import { createPortal } from "react-dom";
 import { useEdition } from "./ContexteEdition";
 
@@ -16,12 +15,17 @@ type PropsTexteEditable = {
   href?: string;
   classeAccent?: string;
   motAccent?: string;
+  sautLigneAccent?: boolean;
 };
 
-// Applique l'accent sur le motAccent dans le texte
-function rendreAccent(texte: string, motAccent: string, classeAccent: string): string {
+// Applique l'accent sur le motAccent dans le texte + saut de ligne optionnel
+function rendreAccent(texte: string, motAccent: string, classeAccent: string, sautLigne: boolean): string {
   if (!motAccent || !classeAccent) return texte;
-  return texte.replace(motAccent, `<span class="${classeAccent}">${motAccent}</span>`);
+  const accentHtml = `<span class="${classeAccent}">${motAccent}</span>`;
+  if (sautLigne) {
+    return texte.replace(motAccent, `<br/>${accentHtml}`);
+  }
+  return texte.replace(motAccent, accentHtml);
 }
 
 // Styles inline de la barre d'outils
@@ -184,6 +188,7 @@ export function TexteEditable({
   href,
   classeAccent = "",
   motAccent = "",
+  sautLigneAccent = false,
 }: PropsTexteEditable) {
   const { modeEdition, contenus, modifierTexte } = useEdition();
   const refElement = useRef<HTMLElement>(null);
@@ -206,7 +211,6 @@ export function TexteEditable({
       const barre = document.querySelector("[data-barre-outils]");
       if (barre?.contains(cible)) return;
       if (refElement.current) {
-        refElement.current.textContent = texteOriginal.current;
         refElement.current.contentEditable = "false";
         setEnEdition(false);
       }
@@ -219,7 +223,8 @@ export function TexteEditable({
     if (!modeEdition || enEdition || !refElement.current) return;
     const el = refElement.current;
     texteOriginal.current = texte;
-    el.textContent = texte;
+    // Garder le HTML avec l'accent visible pendant l'édition
+    // (ne pas écraser avec textContent)
     el.contentEditable = "true";
     el.focus();
     setEnEdition(true);
@@ -235,7 +240,8 @@ export function TexteEditable({
   const sauvegarder = useCallback(async () => {
     if (!refElement.current) return;
     const el = refElement.current;
-    const nouveauTexte = el.textContent || "";
+    // Extraire le texte brut (sans HTML)
+    const nouveauTexte = (el.textContent || "").replace(/\s+/g, " ").trim();
     el.contentEditable = "false";
     setEnEdition(false);
     if (nouveauTexte !== texteOriginal.current) {
@@ -259,7 +265,7 @@ export function TexteEditable({
 
   // Accent : appliqué au rendu via motAccent (pas de marqueur dans le texte)
   const aAccent = motAccent && classeAccent && texte.includes(motAccent);
-  const htmlRendu = aAccent ? rendreAccent(texte, motAccent, classeAccent) : texte;
+  const htmlRendu = aAccent ? rendreAccent(texte, motAccent, classeAccent, sautLigneAccent) : texte;
   const doitRendreHtml = aAccent || texte.includes("<");
 
   // Mode normal