Installation

React

bash

npm install leiho

Une seule fois, dans le layout racine (Next.js app/layout.tsx, Remix root.tsx, Vite App.tsx) :

jsx

import { LeihoBridge } from 'leiho/react';

<LeihoBridge wpOrigin="https://your-wordpress.example" />

Le composant n’affiche rien et importe le bridge dynamiquement, uniquement dans l’éditeur. C’est un composant client ('use client'), il peut donc se placer dans un layout serveur Next.js.

N’importe quel bundler (ESM)

if (window.self !== window.top) {
  const { initLeihoBridge } = await import('leiho');
  initLeihoBridge({ wpOrigin: 'https://your-wordpress.example' });
}

Balise script

Copiez dist/leiho-bridge.js dans votre dossier public (l’extension le propose aussi au téléchargement dans Leiho → Démarrer), puis dans <head> :

html

<script>
  if (window.self !== window.top) {
    var s = document.createElement('script');
    s.src = '/leiho-bridge.js';
    s.setAttribute('data-wp-origin', 'https://your-wordpress.example');
    document.head.appendChild(s);
  }
</script>

Le fichier autonome démarre seul à partir de son attribut data-wp-origin.

Options

Option	Défaut
`wpOrigin`	obligatoire	Origine de wp-admin, par ex. `https://wp.example.com`. Les messages venant de toute autre origine sont ignorés.
`cloakTimeout`	`4000` (`0` dans le composant React)	Masque la page jusqu’à ce que l’éditeur envoie ses valeurs, pour éviter l’affichage furtif d’un contenu périmé. `0` le désactive.

Autoriser l’affichage en iframe

Vos pages doivent permettre à wp-admin de les afficher :

code

Content-Security-Policy: frame-ancestors 'self' https://your-wordpress.example

et ne doivent pas envoyer X-Frame-Options: DENY ni SAMEORIGIN.

Protocole

Les messages sont de la forme { ns: 'leiho', type, … }, envoyés avec un targetOrigin explicite et vérifiés par rapport à event.origin.

Sens	Type	Signification
bridge → éditeur	`ready`	Champs, sections et ratios des emplacements d’image présents sur la page, plus son URL. Renvoyé après une navigation côté client.
bridge → éditeur	`fieldFocus`	Un élément modifiable a été cliqué
bridge → éditeur	`sectionFocus`	Une section a été cliquée
bridge → éditeur	`managedFocus`	Une zone gérée a été cliquée
bridge → éditeur	`navigate`	Un lien a été cliqué
bridge → éditeur	`cloakTimeout`	L’éditeur n’a pas répondu à temps
éditeur → bridge	`init`	Valeurs enregistrées à afficher
éditeur → bridge	`fieldUpdate`	Valeur en direct d’un champ en cours de modification
éditeur → bridge	`focusField` / `focusSection`	Faire défiler jusqu’à un élément et le mettre en évidence

Bridge

#Installation

#React

#N’importe quel bundler (ESM)

#Balise script

#Options

#Autoriser l’affichage en iframe

#Protocole