pagery-edition 1.0.0

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "pagery-edition",
+  "version": "1.0.0",
+  "description": "Composants d'édition en ligne pour les sites clients Pagery",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./styles": "./src/styles.css"
+  },
+  "files": [
+    "src"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "next": ">=14",
+    "@supabase/supabase-js": ">=2"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "@types/react": "^19.0.0"
+  }
+}

package/src/components/ContexteEdition.tsx

@@ -0,0 +1,187 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
+} from "react";
+import {
+  recupererContenuPage,
+  recupererImagesPage,
+  recupererBrouillonsPage,
+  sauvegarderBrouillonTexte,
+  sauvegarderBrouillonImage,
+  compterBrouillons,
+} from "../lib/supabase";
+import type { ClientSupabase, ImageEditableData, MessageEdition } from "../lib/types";
+
+type ContexteEditionType = {
+  modeEdition: boolean;
+  contenus: Map<string, string>;
+  images: Map<string, ImageEditableData>;
+  modifierTexte: (cle: string, valeur: string) => Promise<void>;
+  modifierImage: (cle: string, fichier: File, alt?: string) => Promise<string>;
+  enChargement: boolean;
+  sauvegardeEnCours: boolean;
+};
+
+const ContexteEdition = createContext<ContexteEditionType | null>(null);
+
+export function useEdition() {
+  const contexte = useContext(ContexteEdition);
+  if (!contexte) {
+    throw new Error("useEdition doit être utilisé dans un FournisseurEdition");
+  }
+  return contexte;
+}
+
+type PropsFournisseur = {
+  supabase: ClientSupabase;
+  siteId: string;
+  page: string;
+  children: ReactNode;
+};
+
+export function FournisseurEdition({ supabase, siteId, page, children }: PropsFournisseur) {
+  const [modeEdition, setModeEdition] = useState(false);
+  const [contenus, setContenus] = useState<Map<string, string>>(new Map());
+  const [images, setImages] = useState<Map<string, ImageEditableData>>(new Map());
+  const [enChargement, setEnChargement] = useState(true);
+  const [sauvegardeEnCours, setSauvegardeEnCours] = useState(false);
+
+  useEffect(() => {
+    const charger = async () => {
+      setEnChargement(true);
+      try {
+        const estDansIframe = typeof window !== "undefined" && window.self !== window.top;
+
+        const [contenuPage, imagesPage] = await Promise.all([
+          recupererContenuPage(supabase, siteId, page),
+          recupererImagesPage(supabase, siteId, page),
+        ]);
+
+        // Charger les brouillons uniquement dans l'iframe de l'éditeur
+        if (estDansIframe) {
+          const brouillons = await recupererBrouillonsPage(supabase, siteId, page);
+
+          brouillons.textes.forEach((valeur, cle) => {
+            contenuPage.set(cle, valeur);
+          });
+
+          brouillons.images.forEach((imgData, cle) => {
+            const existant = imagesPage.get(cle);
+            if (existant) {
+              imagesPage.set(cle, { ...existant, url: imgData.url, alt: imgData.alt });
+            }
+          });
+        }
+
+        setContenus(contenuPage);
+        setImages(imagesPage);
+      } catch (erreur) {
+        console.error("Erreur chargement contenu :", erreur);
+      } finally {
+        setEnChargement(false);
+      }
+    };
+
+    charger();
+  }, [supabase, siteId, page]);
+
+  useEffect(() => {
+    const estDansIframe = window.self !== window.top;
+    if (!estDansIframe) return;
+
+    const gererMessage = (event: MessageEvent) => {
+      const msg = event.data as MessageEdition;
+      if (!msg || !msg.type) return;
+
+      switch (msg.type) {
+        case "ACTIVER_EDITION":
+          setModeEdition(true);
+          break;
+        case "DESACTIVER_EDITION":
+          setModeEdition(false);
+          break;
+      }
+    };
+
+    window.addEventListener("message", gererMessage);
+    window.parent.postMessage({ type: "EDITION_PRETE" } as MessageEdition, "*");
+
+    return () => window.removeEventListener("message", gererMessage);
+  }, []);
+
+  const envoyerCompteur = useCallback(async () => {
+    try {
+      const compteur = await compterBrouillons(supabase, siteId);
+      if (window.self !== window.top) {
+        window.parent.postMessage(
+          { type: "BROUILLON_SAUVEGARDE", compteur } as MessageEdition,
+          "*"
+        );
+      }
+    } catch {
+      // Silencieux
+    }
+  }, [supabase, siteId]);
+
+  const modifierTexte = useCallback(
+    async (cle: string, valeur: string) => {
+      setSauvegardeEnCours(true);
+      try {
+        await sauvegarderBrouillonTexte(supabase, siteId, cle, valeur);
+        setContenus((prev) => {
+          const nouveau = new Map(prev);
+          nouveau.set(cle, valeur);
+          return nouveau;
+        });
+        await envoyerCompteur();
+      } finally {
+        setSauvegardeEnCours(false);
+      }
+    },
+    [supabase, siteId, envoyerCompteur]
+  );
+
+  const modifierImage = useCallback(
+    async (cle: string, fichier: File, alt?: string) => {
+      setSauvegardeEnCours(true);
+      try {
+        const nouvelleUrl = await sauvegarderBrouillonImage(supabase, siteId, cle, fichier, alt);
+        setImages((prev) => {
+          const nouveau = new Map(prev);
+          const existant = nouveau.get(cle);
+          if (existant) {
+            nouveau.set(cle, { ...existant, url: nouvelleUrl, alt: alt || existant.alt });
+          }
+          return nouveau;
+        });
+        await envoyerCompteur();
+        return nouvelleUrl;
+      } finally {
+        setSauvegardeEnCours(false);
+      }
+    },
+    [supabase, siteId, envoyerCompteur]
+  );
+
+  return (
+    <ContexteEdition.Provider
+      value={{
+        modeEdition,
+        contenus,
+        images,
+        modifierTexte,
+        modifierImage,
+        enChargement,
+        sauvegardeEnCours,
+      }}
+    >
+      {children}
+    </ContexteEdition.Provider>
+  );
+}

package/src/components/ImageEditable.tsx

@@ -0,0 +1,167 @@
+// components/edition/ImageEditable.tsx
+// Composant image qui permet le remplacement en mode édition
+
+"use client";
+
+import { useCallback, useRef, useState } from "react";
+import { useEdition } from "./ContexteEdition";
+import Image from "next/image";
+
+type PropsImageEditable = {
+  cle: string;
+  fallbackUrl?: string;
+  fallbackAlt?: string;
+  width?: number;
+  height?: number;
+  fill?: boolean;
+  className?: string;
+  classNameWrapper?: string;
+  sizes?: string;
+  priority?: boolean;
+};
+
+export function ImageEditable({
+  cle,
+  fallbackUrl = "",
+  fallbackAlt = "",
+  width,
+  height,
+  fill = false,
+  className = "",
+  classNameWrapper = "",
+  sizes,
+  priority = false,
+}: PropsImageEditable) {
+  const { modeEdition, images, modifierImage } = useEdition();
+  const [enUpload, setEnUpload] = useState(false);
+  const [apercu, setApercu] = useState<string | null>(null);
+  const refInput = useRef<HTMLInputElement>(null);
+
+  const imageData = images.get(cle);
+  const urlImage = apercu || imageData?.url || fallbackUrl;
+  const altImage = imageData?.alt || fallbackAlt;
+
+  const gererClic = useCallback(() => {
+    if (modeEdition && refInput.current) {
+      refInput.current.click();
+    }
+  }, [modeEdition]);
+
+  const gererChangement = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      const fichier = e.target.files?.[0];
+      if (!fichier) return;
+
+      // Vérifier le type
+      if (!fichier.type.startsWith("image/")) {
+        alert("Veuillez sélectionner une image.");
+        return;
+      }
+
+      // Vérifier la taille (5 Mo max)
+      if (fichier.size > 5 * 1024 * 1024) {
+        alert("L'image ne doit pas dépasser 5 Mo.");
+        return;
+      }
+
+      // Aperçu immédiat
+      const lecteur = new FileReader();
+      lecteur.onload = () => setApercu(lecteur.result as string);
+      lecteur.readAsDataURL(fichier);
+
+      // Upload
+      setEnUpload(true);
+      try {
+        await modifierImage(cle, fichier, altImage);
+        setApercu(null);
+      } catch (erreur) {
+        console.error("Erreur upload :", erreur);
+        setApercu(null);
+        alert("Erreur lors de l'upload. Veuillez réessayer.");
+      } finally {
+        setEnUpload(false);
+        if (refInput.current) refInput.current.value = "";
+      }
+    },
+    [cle, altImage, modifierImage]
+  );
+
+  return (
+    <div
+      className={`
+        relative group
+        ${classNameWrapper}
+        ${modeEdition ? "cursor-pointer" : ""}
+      `}
+      onClick={gererClic}
+    >
+      {fill ? (
+        <Image
+          src={urlImage}
+          alt={altImage}
+          fill
+          className={`${className} ${enUpload ? "opacity-50" : ""}`}
+          sizes={sizes}
+          priority={priority}
+        />
+      ) : (
+        <Image
+          src={urlImage}
+          alt={altImage}
+          width={width || 800}
+          height={height || 600}
+          className={`${className} ${enUpload ? "opacity-50" : ""}`}
+          sizes={sizes}
+          priority={priority}
+        />
+      )}
+
+      {/* Overlay en mode édition */}
+      {modeEdition && (
+        <div
+          className={`
+            absolute inset-0 flex flex-col items-center justify-center
+            bg-black/0 group-hover:bg-black/40
+            transition-all duration-300
+            rounded-inherit
+          `}
+        >
+          <div className="opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-center">
+            <svg
+              className="h-8 w-8 mx-auto mb-2 text-white"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={1.5}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
+              />
+            </svg>
+            <span className="text-white text-sm font-medium">
+              Changer l'image
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* Spinner upload */}
+      {enUpload && (
+        <div className="absolute inset-0 flex items-center justify-center bg-black/30">
+          <span className="h-8 w-8 animate-spin rounded-full border-3 border-white border-t-transparent" />
+        </div>
+      )}
+
+      {/* Input fichier caché */}
+      <input
+        ref={refInput}
+        type="file"
+        accept="image/*"
+        onChange={gererChangement}
+        className="hidden"
+      />
+    </div>
+  );
+}

package/src/components/LienEditable.tsx

@@ -0,0 +1,176 @@
+// components/edition/LienEditable.tsx
+// Composant lien/bouton éditable : texte + URL
+
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useEdition } from "./ContexteEdition";
+
+type PropsLienEditable = {
+  cleTexte: string;
+  cleUrl: string;
+  fallbackTexte?: string;
+  fallbackUrl?: string;
+  className?: string;
+  classNameLien?: string;
+  balise?: "a" | "button";
+  target?: "_blank" | "_self";
+};
+
+export function LienEditable({
+  cleTexte,
+  cleUrl,
+  fallbackTexte = "En savoir plus",
+  fallbackUrl = "#",
+  className = "",
+  classNameLien = "",
+  balise = "a",
+  target = "_self",
+}: PropsLienEditable) {
+  const { modeEdition, contenus, modifierTexte } = useEdition();
+  const [enEdition, setEnEdition] = useState(false);
+  const [texteLocal, setTexteLocal] = useState("");
+  const [urlLocale, setUrlLocale] = useState("");
+  const refTexte = useRef<HTMLInputElement>(null);
+
+  const texte = contenus.get(cleTexte) || fallbackTexte;
+  const url = contenus.get(cleUrl) || fallbackUrl;
+
+  useEffect(() => {
+    setTexteLocal(texte);
+    setUrlLocale(url);
+  }, [texte, url]);
+
+  const gererClic = useCallback(
+    (e: React.MouseEvent) => {
+      if (modeEdition) {
+        e.preventDefault();
+        e.stopPropagation();
+        setEnEdition(true);
+        setTexteLocal(texte);
+        setUrlLocale(url);
+        setTimeout(() => refTexte.current?.focus(), 0);
+      }
+    },
+    [modeEdition, texte, url]
+  );
+
+  const gererSauvegarde = useCallback(async () => {
+    const promesses: Promise<void>[] = [];
+    if (texteLocal !== texte) {
+      promesses.push(modifierTexte(cleTexte, texteLocal));
+    }
+    if (urlLocale !== url) {
+      promesses.push(modifierTexte(cleUrl, urlLocale));
+    }
+    if (promesses.length > 0) {
+      await Promise.all(promesses);
+    }
+    setEnEdition(false);
+  }, [cleTexte, cleUrl, texteLocal, urlLocale, texte, url, modifierTexte]);
+
+  const gererTouche = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        gererSauvegarde();
+      }
+      if (e.key === "Escape") {
+        setTexteLocal(texte);
+        setUrlLocale(url);
+        setEnEdition(false);
+      }
+    },
+    [gererSauvegarde, texte, url]
+  );
+
+  // Mode édition avec formulaire
+  if (enEdition) {
+    return (
+      <div className={`${className} relative`}>
+        <div className="flex flex-col gap-2 p-3 bg-white rounded-lg ring-2 ring-[#0051ff] ring-offset-2 shadow-lg">
+          <div>
+            <label className="block text-[11px] font-semibold text-[#0051ff] mb-1 tracking-wide">
+              Texte du bouton
+            </label>
+            <input
+              ref={refTexte}
+              type="text"
+              value={texteLocal}
+              onChange={(e) => setTexteLocal(e.target.value)}
+              onKeyDown={gererTouche}
+              className="w-full px-3 py-2 text-sm text-zinc-900 bg-zinc-50 border border-zinc-200 rounded-md focus:outline-none focus:ring-1 focus:ring-[#0051ff]"
+            />
+          </div>
+          <div>
+            <label className="block text-[11px] font-semibold text-[#0051ff] mb-1 tracking-wide">
+              Lien (URL)
+            </label>
+            <input
+              type="url"
+              value={urlLocale}
+              onChange={(e) => setUrlLocale(e.target.value)}
+              onKeyDown={gererTouche}
+              placeholder="https://..."
+              className="w-full px-3 py-2 text-sm text-zinc-900 bg-zinc-50 border border-zinc-200 rounded-md focus:outline-none focus:ring-1 focus:ring-[#0051ff]"
+            />
+          </div>
+          <div className="flex gap-2 justify-end pt-1">
+            <button
+              type="button"
+              onClick={() => {
+                setTexteLocal(texte);
+                setUrlLocale(url);
+                setEnEdition(false);
+              }}
+              className="px-3 py-1.5 text-xs font-medium text-zinc-500 hover:text-zinc-700 transition-colors"
+            >
+              Annuler
+            </button>
+            <button
+              type="button"
+              onClick={gererSauvegarde}
+              className="px-4 py-1.5 text-xs font-semibold text-white bg-[#0051ff] rounded-md hover:bg-[#003dcc] transition-colors"
+            >
+              Sauvegarder
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Mode normal
+  const propsCommuns = {
+    className: `${classNameLien} ${
+      modeEdition
+        ? "cursor-pointer hover:ring-2 hover:ring-[#0051ff]/50 hover:ring-offset-2 rounded transition-all"
+        : ""
+    }`,
+    onClick: gererClic,
+    ...(modeEdition ? { title: "Cliquer pour modifier le lien" } : {}),
+  };
+
+  if (balise === "button") {
+    return (
+      <div className={className}>
+        <button type="button" {...propsCommuns}>
+          {texte}
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className={className}>
+      <a
+        href={modeEdition ? undefined : url}
+        target={target}
+        rel={target === "_blank" ? "noopener noreferrer" : undefined}
+        {...propsCommuns}
+      >
+        {texte}
+      </a>
+    </div>
+  );
+}

package/src/components/TexteEditable.tsx

@@ -0,0 +1,271 @@
+// components/edition/TexteEditable.tsx
+// Édition en place avec barre d'outils flottante (comme demo.html)
+
+"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";
+
+type PropsTexteEditable = {
+  cle: string;
+  fallback?: string;
+  balise?: "h1" | "h2" | "h3" | "h4" | "p" | "span" | "a";
+  className?: string;
+  href?: string;
+  classeAccent?: string;
+};
+
+// Convertit *mot* en <span class="classeAccent">mot</span>
+function rendreAccent(texte: string, classeAccent: string): string {
+  return texte.replace(/\*([^*]+)\*/g, `<span class="${classeAccent}">$1</span>`);
+}
+
+// Barre d'outils flottante
+function BarreOutils({
+  elementRef,
+  onSauvegarder,
+  onAnnuler,
+}: {
+  elementRef: React.RefObject<HTMLElement | null>;
+  onSauvegarder: () => void;
+  onAnnuler: () => void;
+}) {
+  const refBarre = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+  const [taille, setTaille] = useState("16");
+
+  const positionner = useCallback(() => {
+    if (!elementRef.current || !refBarre.current) return;
+    const rect = elementRef.current.getBoundingClientRect();
+    const barreH = refBarre.current.offsetHeight;
+    const barreW = refBarre.current.offsetWidth;
+
+    let top = rect.top - barreH - 8;
+    if (top < 8) top = rect.bottom + 8;
+
+    let left = rect.left + rect.width / 2 - barreW / 2;
+    if (left + barreW > window.innerWidth - 16) left = window.innerWidth - barreW - 16;
+    if (left < 8) left = 8;
+
+    setPosition({ top, left });
+  }, [elementRef]);
+
+  useEffect(() => {
+    positionner();
+    if (elementRef.current) {
+      setTaille(Math.round(parseFloat(window.getComputedStyle(elementRef.current).fontSize)).toString());
+    }
+    let rafId = 0;
+    const gererScroll = () => {
+      cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(positionner);
+    };
+    window.addEventListener("scroll", gererScroll, true);
+    window.addEventListener("resize", positionner);
+    return () => {
+      window.removeEventListener("scroll", gererScroll, true);
+      window.removeEventListener("resize", positionner);
+      cancelAnimationFrame(rafId);
+    };
+  }, [positionner, elementRef]);
+
+  const exec = useCallback((cmd: string, val?: string) => {
+    document.execCommand(cmd, false, val);
+    elementRef.current?.focus();
+  }, [elementRef]);
+
+  const changerTaille = useCallback((delta: number) => {
+    if (!elementRef.current) return;
+    const actuelle = parseFloat(window.getComputedStyle(elementRef.current).fontSize);
+    let pas = 1;
+    if (actuelle >= 48) pas = 4;
+    else if (actuelle >= 32) pas = 2;
+    const nouvelle = Math.max(10, Math.min(120, actuelle + pas * delta));
+    elementRef.current.style.fontSize = `${nouvelle}px`;
+    setTaille(Math.round(nouvelle).toString());
+  }, [elementRef]);
+
+  const btnClass = "p-1 px-1.5 rounded text-[#6b6560] hover:bg-[#eef4ff] hover:text-[#0051ff] transition-colors cursor-pointer";
+  const separateur = <div className="w-px h-4 bg-[#e8e4df] mx-0.5" />;
+
+  return createPortal(
+    <div
+      ref={refBarre}
+      data-barre-outils
+      className="fixed z-[10000] flex items-center gap-0.5 bg-white border border-[#e8e4df] rounded-lg shadow-[0_4px_16px_rgba(0,0,0,0.12)] py-1 px-1.5"
+      style={{ top: position.top, left: position.left }}
+      onMouseDown={(e) => e.preventDefault()}
+    >
+      <button type="button" onClick={() => exec("bold")} className={btnClass} title="Gras">
+        <span className="text-xs font-bold">B</span>
+      </button>
+      <button type="button" onClick={() => exec("italic")} className={btnClass} title="Italique">
+        <span className="text-xs italic">I</span>
+      </button>
+      {separateur}
+      <button type="button" onClick={() => exec("underline")} className={btnClass} title="Souligner">
+        <span className="text-xs underline">U</span>
+      </button>
+      {separateur}
+      <button type="button" onClick={() => changerTaille(-1)} className={btnClass} title="Réduire la taille">
+        <span className="text-xs font-medium">&ndash;</span>
+      </button>
+      <span className="text-[11px] text-[#6b6560] min-w-[20px] text-center tabular-nums select-none">{taille}</span>
+      <button type="button" onClick={() => changerTaille(1)} className={btnClass} title="Augmenter la taille">
+        <span className="text-xs font-medium">+</span>
+      </button>
+      {separateur}
+      <button type="button" onClick={onAnnuler} className="px-2 py-0.5 text-[11px] font-medium text-[#6b6560] hover:text-[#1a1a1a] transition-colors cursor-pointer">
+        Annuler
+      </button>
+      <button
+        type="button"
+        onClick={onSauvegarder}
+        className="px-2.5 py-1 text-[11px] font-semibold text-white bg-[#0051ff] rounded hover:bg-[#0045dd] transition-colors cursor-pointer"
+      >
+        Sauvegarder
+      </button>
+    </div>,
+    document.body
+  );
+}
+
+export function TexteEditable({
+  cle,
+  fallback = "",
+  balise: Balise = "p",
+  className = "",
+  href,
+  classeAccent = "",
+}: PropsTexteEditable) {
+  const { modeEdition, contenus, modifierTexte } = useEdition();
+  const refElement = useRef<HTMLElement>(null);
+  const texteOriginal = useRef<string>("");
+  const [enEdition, setEnEdition] = useState(false);
+  const [monte, setMonte] = useState(false);
+
+  const texte = contenus.get(cle) || fallback;
+
+  useEffect(() => { setMonte(true); }, []);
+
+  const estMonoLigne = ["h1", "h2", "h3", "h4", "span"].includes(Balise);
+
+  // Clic en dehors = annuler (seul le bouton Sauvegarder sauvegarde)
+  useEffect(() => {
+    if (!enEdition) return;
+    const gererClicExterieur = (e: MouseEvent) => {
+      const cible = e.target as Node;
+      if (refElement.current?.contains(cible)) return;
+      const barre = document.querySelector("[data-barre-outils]");
+      if (barre?.contains(cible)) return;
+      // Clic extérieur : annuler sans sauvegarder
+      if (refElement.current) {
+        refElement.current.textContent = texteOriginal.current;
+        refElement.current.contentEditable = "false";
+        setEnEdition(false);
+      }
+    };
+    document.addEventListener("mousedown", gererClicExterieur);
+    return () => document.removeEventListener("mousedown", gererClicExterieur);
+  }, [enEdition]);
+
+  const activerEdition = useCallback(() => {
+    if (!modeEdition || enEdition || !refElement.current) return;
+    const el = refElement.current;
+    // Stocker le texte brut avec * pour l'accent
+    texteOriginal.current = texte;
+    // Afficher le texte sans astérisques pour l'édition
+    el.textContent = texte.replace(/\*/g, "");
+    el.contentEditable = "true";
+    el.focus();
+    setEnEdition(true);
+
+    const range = document.createRange();
+    const selection = window.getSelection();
+    range.selectNodeContents(el);
+    range.collapse(false);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+  }, [modeEdition, enEdition, texte]);
+
+  const sauvegarder = useCallback(async () => {
+    if (!refElement.current) return;
+    const el = refElement.current;
+    const nouveauTexte = el.textContent || "";
+    el.contentEditable = "false";
+    setEnEdition(false);
+    if (nouveauTexte !== texteOriginal.current) {
+      await modifierTexte(cle, nouveauTexte);
+    }
+  }, [cle, modifierTexte]);
+
+  const annuler = useCallback(() => {
+    if (!refElement.current) return;
+    const el = refElement.current;
+    el.contentEditable = "false";
+    setEnEdition(false);
+  }, []);
+
+  const gererTouche = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") { e.preventDefault(); annuler(); }
+      if (e.key === "Enter" && !e.shiftKey && estMonoLigne) { e.preventDefault(); sauvegarder(); }
+    },
+    [sauvegarder, annuler, estMonoLigne]
+  );
+
+  // Rendu HTML : accent *mot* et/ou balises HTML
+  const htmlRendu = classeAccent
+    ? rendreAccent(texte, classeAccent)
+    : texte;
+  const doitRendreHtml = classeAccent ? texte.includes("*") : texte.includes("<");
+
+  // Mode normal
+  if (!modeEdition) {
+    if (Balise === "a" && href) {
+      return doitRendreHtml
+        ? <a href={href} className={className} dangerouslySetInnerHTML={{ __html: htmlRendu }} />
+        : <a href={href} className={className}>{texte}</a>;
+    }
+    return doitRendreHtml
+      ? <Balise className={className} dangerouslySetInnerHTML={{ __html: htmlRendu }} />
+      : <Balise className={className}>{texte}</Balise>;
+  }
+
+  // Styles d'édition directement sur l'élément (pas de wrapper div)
+  const classesEdition = enEdition
+    ? `${className} editable-actif outline-none cursor-text`
+    : `${className} editable-hover cursor-pointer`;
+
+  const styleEdition = enEdition
+    ? { boxShadow: "0 0 0 6px rgba(0, 81, 255, 0.08)", caretColor: "#0051ff", outline: "2px solid #0051ff", outlineOffset: "4px" } as React.CSSProperties
+    : undefined;
+
+  return (
+    <>
+      <Balise
+        ref={refElement as React.RefObject<never>}
+        className={classesEdition}
+        style={styleEdition}
+        onClick={(e: React.MouseEvent) => {
+          if (Balise === "a") e.preventDefault();
+          activerEdition();
+        }}
+        onKeyDown={gererTouche}
+        suppressContentEditableWarning
+        {...(!enEdition && doitRendreHtml ? { dangerouslySetInnerHTML: { __html: htmlRendu } } : {})}
+      >
+        {!enEdition && doitRendreHtml ? undefined : texte}
+      </Balise>
+      {enEdition && monte && (
+        <BarreOutils
+          elementRef={refElement}
+          onSauvegarder={sauvegarder}
+          onAnnuler={annuler}
+        />
+      )}
+    </>
+  );
+}

package/src/components/TexteRicheEditable.tsx

@@ -0,0 +1,280 @@
+// components/edition/TexteRicheEditable.tsx
+// Composant paragraphe avec édition rich text léger (gras, italique, liens)
+// Utilise contentEditable pour rester léger (pas de dépendance externe)
+
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useEdition } from "./ContexteEdition";
+
+type PropsTexteRicheEditable = {
+  cle: string;
+  fallback?: string;
+  className?: string;
+};
+
+export function TexteRicheEditable({
+  cle,
+  fallback = "",
+  className = "",
+}: PropsTexteRicheEditable) {
+  const { modeEdition, contenus, modifierTexte } = useEdition();
+  const [enEdition, setEnEdition] = useState(false);
+  const refEditeur = useRef<HTMLDivElement>(null);
+  const [contenuOriginal, setContenuOriginal] = useState("");
+
+  const html = contenus.get(cle) || fallback;
+
+  const gererClic = useCallback(() => {
+    if (modeEdition && !enEdition) {
+      setEnEdition(true);
+      setContenuOriginal(html);
+    }
+  }, [modeEdition, enEdition, html]);
+
+  useEffect(() => {
+    if (enEdition && refEditeur.current) {
+      refEditeur.current.innerHTML = html;
+      refEditeur.current.focus();
+      // Placer le curseur à la fin
+      const selection = window.getSelection();
+      if (selection) {
+        const plage = document.createRange();
+        plage.selectNodeContents(refEditeur.current);
+        plage.collapse(false);
+        selection.removeAllRanges();
+        selection.addRange(plage);
+      }
+    }
+  }, [enEdition, html]);
+
+  const executerCommande = useCallback((commande: string, valeur?: string) => {
+    document.execCommand(commande, false, valeur);
+    refEditeur.current?.focus();
+  }, []);
+
+  const [popoverLien, setPopoverLien] = useState(false);
+  const [urlLien, setUrlLien] = useState("");
+  const refSelectionSauvegardee = useRef<Range | null>(null);
+
+  const ajouterLien = useCallback(() => {
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
+      return;
+    }
+    // Sauvegarder la sélection
+    refSelectionSauvegardee.current = selection.getRangeAt(0).cloneRange();
+    setUrlLien("");
+    setPopoverLien(true);
+  }, []);
+
+  const appliquerLien = useCallback(() => {
+    if (!urlLien.trim()) return;
+    // Restaurer la sélection
+    if (refSelectionSauvegardee.current) {
+      const sel = window.getSelection();
+      if (sel) {
+        sel.removeAllRanges();
+        sel.addRange(refSelectionSauvegardee.current);
+      }
+    }
+    executerCommande("createLink", urlLien.trim());
+    setPopoverLien(false);
+    refSelectionSauvegardee.current = null;
+  }, [urlLien, executerCommande]);
+
+  const fermerPopoverLien = useCallback(() => {
+    setPopoverLien(false);
+    // Restaurer la sélection sans appliquer de lien
+    if (refSelectionSauvegardee.current) {
+      const sel = window.getSelection();
+      if (sel) {
+        sel.removeAllRanges();
+        sel.addRange(refSelectionSauvegardee.current);
+      }
+    }
+    refSelectionSauvegardee.current = null;
+    refEditeur.current?.focus();
+  }, []);
+
+  const gererSauvegarde = useCallback(async () => {
+    if (refEditeur.current) {
+      const nouveauHtml = refEditeur.current.innerHTML;
+      if (nouveauHtml !== contenuOriginal) {
+        await modifierTexte(cle, nouveauHtml);
+      }
+    }
+    setEnEdition(false);
+  }, [cle, contenuOriginal, modifierTexte]);
+
+  const gererAnnulation = useCallback(() => {
+    setEnEdition(false);
+  }, []);
+
+  const gererTouche = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        gererAnnulation();
+      }
+      // Raccourcis clavier
+      if (e.ctrlKey || e.metaKey) {
+        if (e.key === "b") {
+          e.preventDefault();
+          executerCommande("bold");
+        }
+        if (e.key === "i") {
+          e.preventDefault();
+          executerCommande("italic");
+        }
+        if (e.key === "k") {
+          e.preventDefault();
+          ajouterLien();
+        }
+      }
+    },
+    [executerCommande, ajouterLien, gererAnnulation]
+  );
+
+  // Mode édition avec barre d'outils
+  if (enEdition) {
+    return (
+      <div className="relative">
+        {/* Barre d'outils */}
+        <div className="flex items-center gap-1 mb-2 p-1.5 bg-white border border-zinc-200 rounded-lg shadow-sm">
+          <button
+            type="button"
+            onClick={() => executerCommande("bold")}
+            className="p-1.5 rounded hover:bg-zinc-100 transition-colors"
+            title="Gras (Ctrl+B)"
+          >
+            <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5}>
+              <path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" />
+              <path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" />
+            </svg>
+          </button>
+          <button
+            type="button"
+            onClick={() => executerCommande("italic")}
+            className="p-1.5 rounded hover:bg-zinc-100 transition-colors"
+            title="Italique (Ctrl+I)"
+          >
+            <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+              <line x1="19" y1="4" x2="10" y2="4" />
+              <line x1="14" y1="20" x2="5" y2="20" />
+              <line x1="15" y1="4" x2="9" y2="20" />
+            </svg>
+          </button>
+          <div className="w-px h-5 bg-zinc-200 mx-1" />
+          <button
+            type="button"
+            onClick={ajouterLien}
+            className="p-1.5 rounded hover:bg-zinc-100 transition-colors"
+            title="Ajouter un lien (Ctrl+K)"
+          >
+            <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+              <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+              <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+            </svg>
+          </button>
+          <button
+            type="button"
+            onClick={() => executerCommande("unlink")}
+            className="p-1.5 rounded hover:bg-zinc-100 transition-colors"
+            title="Retirer le lien"
+          >
+            <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+              <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+              <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+              <line x1="2" y1="2" x2="22" y2="22" strokeWidth={2} />
+            </svg>
+          </button>
+
+          <div className="flex-1" />
+
+          <button
+            type="button"
+            onClick={gererAnnulation}
+            className="px-2.5 py-1 text-xs font-medium text-zinc-500 hover:text-zinc-700 transition-colors"
+          >
+            Annuler
+          </button>
+          <button
+            type="button"
+            onClick={gererSauvegarde}
+            className="px-3 py-1 text-xs font-semibold text-white bg-[#0051ff] rounded-md hover:bg-[#003dcc] transition-colors"
+          >
+            Sauvegarder
+          </button>
+
+          {/* Popover lien inline */}
+          {popoverLien && (
+            <div className="absolute top-full left-0 right-0 mt-1 p-2.5 bg-white border border-zinc-200 rounded-lg shadow-lg flex items-center gap-2 z-50">
+              <input
+                type="url"
+                value={urlLien}
+                onChange={(e) => setUrlLien(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") { e.preventDefault(); appliquerLien(); }
+                  if (e.key === "Escape") { e.preventDefault(); fermerPopoverLien(); }
+                }}
+                placeholder="https://exemple.com"
+                className="flex-1 px-3 py-1.5 text-sm bg-zinc-50 border border-zinc-200 rounded-md focus:outline-none focus:ring-1 focus:ring-[#0051ff] focus:border-[#0051ff]"
+                autoFocus
+              />
+              <button
+                type="button"
+                onClick={appliquerLien}
+                className="px-3 py-1.5 text-xs font-semibold text-white bg-[#0051ff] rounded-md hover:bg-[#003dcc] transition-colors whitespace-nowrap"
+              >
+                Appliquer
+              </button>
+              <button
+                type="button"
+                onClick={fermerPopoverLien}
+                className="p-1.5 text-zinc-400 hover:text-zinc-600 transition-colors"
+              >
+                <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+          )}
+        </div>
+
+        {/* Zone d'édition */}
+        <div
+          ref={refEditeur}
+          contentEditable
+          onKeyDown={gererTouche}
+          className={`
+            ${className}
+            outline-none ring-2 ring-[#0051ff] ring-offset-2 rounded-md
+            p-2 min-h-[60px]
+            [&_a]:text-[#0051ff] [&_a]:underline
+            [&_b]:font-bold [&_strong]:font-bold
+            [&_i]:italic [&_em]:italic
+          `}
+          suppressContentEditableWarning
+        />
+      </div>
+    );
+  }
+
+  // Mode normal
+  return (
+    <div
+      onClick={gererClic}
+      className={`
+        ${className}
+        ${
+          modeEdition
+            ? "cursor-pointer hover:ring-2 hover:ring-[#0051ff]/50 hover:ring-offset-2 rounded-md transition-all"
+            : ""
+        }
+      `}
+      dangerouslySetInnerHTML={{ __html: html }}
+      {...(modeEdition ? { title: "Cliquer pour modifier" } : {})}
+    />
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,5 @@
+export { FournisseurEdition, useEdition } from "./ContexteEdition";
+export { TexteEditable } from "./TexteEditable";
+export { ImageEditable } from "./ImageEditable";
+export { LienEditable } from "./LienEditable";
+export { TexteRicheEditable } from "./TexteRicheEditable";

package/src/index.ts

@@ -0,0 +1,14 @@
+export { FournisseurEdition, useEdition } from "./components/ContexteEdition";
+export { TexteEditable } from "./components/TexteEditable";
+export { ImageEditable } from "./components/ImageEditable";
+export { LienEditable } from "./components/LienEditable";
+export { TexteRicheEditable } from "./components/TexteRicheEditable";
+
+export type {
+  ClientSupabase,
+  ContenuEditable,
+  ImageEditableData,
+  CompteurBrouillons,
+  ResultatPublication,
+  MessageEdition,
+} from "./lib/types";

package/src/lib/index.ts

@@ -0,0 +1,17 @@
+export {
+  recupererContenuPage,
+  recupererImagesPage,
+  recupererBrouillonsPage,
+  sauvegarderBrouillonTexte,
+  sauvegarderBrouillonImage,
+  compterBrouillons,
+} from "./supabase";
+
+export type {
+  ClientSupabase,
+  ContenuEditable,
+  ImageEditableData,
+  CompteurBrouillons,
+  ResultatPublication,
+  MessageEdition,
+} from "./types";

package/src/lib/supabase.ts

@@ -0,0 +1,126 @@
+import type {
+  ClientSupabase,
+  ContenuEditable,
+  ImageEditableData,
+  CompteurBrouillons,
+} from "./types";
+
+export async function recupererContenuPage(client: ClientSupabase, siteId: string, page: string) {
+  const { data, error } = await client
+    .from("contenu")
+    .select("*")
+    .eq("site_id", siteId)
+    .eq("page", page);
+
+  if (error) throw error;
+
+  const carte = new Map<string, string>();
+  (data as ContenuEditable[])?.forEach((item) => {
+    carte.set(item.cle, item.valeur);
+  });
+  return carte;
+}
+
+export async function recupererImagesPage(client: ClientSupabase, siteId: string, page: string) {
+  const { data, error } = await client
+    .from("images_editables")
+    .select("*")
+    .eq("site_id", siteId)
+    .eq("page", page);
+
+  if (error) throw error;
+
+  const carte = new Map<string, ImageEditableData>();
+  (data as ImageEditableData[])?.forEach((item) => {
+    carte.set(item.cle, item);
+  });
+  return carte;
+}
+
+export async function recupererBrouillonsPage(client: ClientSupabase, siteId: string, page: string) {
+  const [textes, images] = await Promise.all([
+    client
+      .from("brouillons_contenu")
+      .select("cle, valeur")
+      .eq("site_id", siteId)
+      .like("cle", `${page}.%`),
+    client
+      .from("brouillons_images")
+      .select("cle, url, alt")
+      .eq("site_id", siteId)
+      .like("cle", `${page}.%`),
+  ]);
+
+  const carteTextes = new Map<string, string>();
+  textes.data?.forEach((item: { cle: string; valeur: string }) => {
+    carteTextes.set(item.cle, item.valeur);
+  });
+
+  const carteImages = new Map<string, { url: string; alt: string }>();
+  images.data?.forEach((item: { cle: string; url: string; alt: string }) => {
+    carteImages.set(item.cle, { url: item.url, alt: item.alt });
+  });
+
+  return { textes: carteTextes, images: carteImages };
+}
+
+export async function sauvegarderBrouillonTexte(
+  client: ClientSupabase,
+  siteId: string,
+  cle: string,
+  valeur: string
+) {
+  const { error } = await client
+    .from("brouillons_contenu")
+    .upsert(
+      { site_id: siteId, cle, valeur },
+      { onConflict: "site_id,cle" }
+    );
+
+  if (error) throw error;
+}
+
+export async function sauvegarderBrouillonImage(
+  client: ClientSupabase,
+  siteId: string,
+  cle: string,
+  fichier: File,
+  alt?: string
+) {
+  const extension = fichier.name.split(".").pop();
+  const chemin = `${siteId}/${cle.replace(/\./g, "/")}/${Date.now()}.${extension}`;
+
+  const { error: erreurUpload } = await client.storage
+    .from("images-site")
+    .upload(chemin, fichier, {
+      upsert: true,
+      contentType: fichier.type,
+    });
+
+  if (erreurUpload) throw erreurUpload;
+
+  const { data } = client.storage.from("images-site").getPublicUrl(chemin);
+
+  const { error } = await client
+    .from("brouillons_images")
+    .upsert(
+      { site_id: siteId, cle, url: data.publicUrl, alt: alt || "" },
+      { onConflict: "site_id,cle" }
+    );
+
+  if (error) throw error;
+
+  return data.publicUrl;
+}
+
+export async function compterBrouillons(
+  client: ClientSupabase,
+  siteId: string
+): Promise<CompteurBrouillons> {
+  const { data, error } = await client.rpc("compter_brouillons", {
+    id_site: siteId,
+  });
+
+  if (error) throw error;
+  return data as CompteurBrouillons;
+}

package/src/lib/types.ts

@@ -0,0 +1,46 @@
+import type { SupabaseClient } from "@supabase/supabase-js";
+
+export type ClientSupabase = SupabaseClient;
+
+export type ContenuEditable = {
+  id: string;
+  site_id: string;
+  cle: string;
+  valeur: string;
+  type: "texte" | "titre" | "paragraphe" | "lien" | "riche";
+  page: string;
+  mis_a_jour_le: string;
+  mis_a_jour_par: string | null;
+};
+
+export type ImageEditableData = {
+  id: string;
+  site_id: string;
+  cle: string;
+  url: string;
+  alt: string;
+  page: string;
+  mis_a_jour_le: string;
+  mis_a_jour_par: string | null;
+};
+
+export type CompteurBrouillons = {
+  textes: number;
+  images: number;
+};
+
+export type ResultatPublication = {
+  textes_publies: number;
+  images_publiees: number;
+};
+
+export type MessageEdition =
+  | { type: "ACTIVER_EDITION" }
+  | { type: "DESACTIVER_EDITION" }
+  | { type: "PUBLIER_BROUILLONS" }
+  | { type: "ANNULER_BROUILLONS" }
+  | { type: "CHANGER_PAGE"; page: string }
+  | { type: "EDITION_PRETE" }
+  | { type: "BROUILLON_SAUVEGARDE"; compteur: CompteurBrouillons }
+  | { type: "PUBLICATION_TERMINEE"; resultat: ResultatPublication }
+  | { type: "BROUILLONS_ANNULES" };

package/src/styles.css

@@ -0,0 +1,36 @@
+/* Édition en ligne - hover et tooltip */
+.editable-hover {
+  position: relative;
+  transition: outline 0.2s, outline-offset 0.2s;
+}
+
+.editable-hover:hover {
+  outline: 2px solid #0051ff;
+  outline-offset: 6px;
+  border-radius: 2px;
+}
+
+.editable-hover::after {
+  content: "Cliquer pour modifier";
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 8px;
+  padding: 2px 8px;
+  font-size: 11px;
+  font-weight: 500;
+  font-family: system-ui, sans-serif;
+  color: white;
+  background: #0051ff;
+  border-radius: 4px;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s;
+  z-index: 9999;
+}
+
+.editable-hover:hover::after {
+  opacity: 1;
+}