@pixelersagency/okno-bridge 1.0.0-beta.1

package/dist/okno-bridge.js

@@ -0,0 +1,592 @@
+/*!
+ * okno-bridge v5 — standalone (auto-init).
+ * Généré par bridge/build.js depuis src/index.js — ne pas éditer à la main.
+ *
+ * Chargement recommandé (le bridge ne sert qu'à l'éditeur) :
+ *   <script>
+ *     if (window.self !== window.top) {
+ *       var s = document.createElement('script');
+ *       s.src = '/okno-bridge.js';
+ *       s.setAttribute('data-wp-origin', 'https://admin.monsite.fr');
+ *       document.head.appendChild(s);
+ *     }
+ *   </script>
+ */
+( function () {
+	'use strict';
+
+	/**
+	 * @pixelersagency/okno-bridge v5 — pont postMessage entre un site et l'éditeur Okno.
+	 *
+	 * Fonctionne avec n'importe quel front : HTML statique, Astro, Next.js, Remix,
+	 * React (SPA ou rendu serveur), Vue/Nuxt, Svelte/SvelteKit.
+	 *
+	 * Usage (ESM) :
+	 *   if ( window.self !== window.top ) {
+	 *     const { initOknoBridge } = await import( '@pixelersagency/okno-bridge' );
+	 *     initOknoBridge( { wpOrigin: 'https://admin.monsite.fr' } );
+	 *   }
+	 *
+	 * React : import { OknoBridge } from '@pixelersagency/okno-bridge/react' — voir src/react.js.
+	 *
+	 * Le bridge ne fait RIEN hors iframe. Il n'appelle jamais l'API WordPress :
+	 * les valeurs arrivent de wp-admin par postMessage, avec vérification stricte
+	 * de l'origine des deux côtés.
+	 *
+	 * Annotations :
+	 *   data-wp-post="12"              conteneur : ID du contenu WordPress
+	 *   data-wp-field="chemin"         élément éditable (chemins pointés : cartes.0.titre)
+	 *   data-okno-apply="html"         la valeur est du HTML (balisage interne conservé)
+	 *   data-okno-section="Libellé"    section logique (arbre de structure)
+	 *   data-okno-layout="sections.2"  section portée par une ligne de flexible content
+	 *   data-okno-refresh="save"       pas d'aperçu instantané, rechargement après enregistrement
+	 *   data-okno-style="prop"         champ couleur : propriété CSS ciblée
+	 *   data-okno-managed="menu"       contenu géré ailleurs : l'éditeur explique où le modifier
+	 *   data-okno-managed-label="…"    libellé de la région gérée
+	 *   data-okno-edit-url="…"         écran wp-admin où modifier ce contenu
+	 *
+	 * Sites React / SPA — ce qui change par rapport à une page statique :
+	 *   - aucun écouteur n'est posé sur les éléments : tout passe par délégation
+	 *     sur document, donc un nœud recréé par un re-render reste cliquable ;
+	 *   - les valeurs d'aperçu sont gardées en mémoire et réappliquées après chaque
+	 *     mutation du DOM : un re-render qui remet la valeur serveur ne l'efface pas ;
+	 *   - le texte est écrit dans le nœud texte existant (nodeValue) plutôt qu'en
+	 *     remplaçant les enfants, pour ne pas casser la réconciliation de React ;
+	 *   - la navigation client (pushState, popstate) déclenche un nouveau handshake.
+	 */
+
+	const NS = 'okno';
+	const VERSION = 5;
+	const HOVER_CLASS = 'okno-hover';
+	const MANAGED_CLASS = 'okno-managed-hover';
+	const CLOAK_CLASS = 'okno-cloak';
+
+	/** Attente de stabilisation du DOM avant re-collecte (rendus successifs de React). */
+	const SETTLE_MS = 120;
+
+	/** Noms lisibles des fournisseurs de contenu courants. */
+	const PROVIDERS = {
+		wordpress: 'WordPress',
+		menu: 'Menus WordPress',
+		acf: 'ACF',
+		woocommerce: 'WooCommerce',
+		jetengine: 'JetEngine',
+	};
+
+	/** Balises retirées de tout HTML injecté dans l'aperçu. */
+	const BANNED_TAGS = [ 'script', 'style', 'iframe', 'object', 'embed', 'link', 'meta', 'base', 'form' ];
+
+	function initOknoBridge( options ) {
+		if ( typeof window === 'undefined' || window.self === window.top ) {
+			return; // Jamais actif en navigation publique ni côté serveur.
+		}
+
+		// Idempotent : React StrictMode monte les effets deux fois en développement.
+		if ( window.__oknoBridge ) {
+			return;
+		}
+
+		const wpOrigin = options && options.wpOrigin;
+		if ( ! wpOrigin ) {
+			console.warn( '[okno] wpOrigin manquant : bridge inactif.' );
+			return;
+		}
+
+		if ( document.referrer ) {
+			try {
+				if ( new URL( document.referrer ).origin !== wpOrigin ) {
+					return;
+				}
+			} catch ( e ) {
+				/* referrer illisible : les contrôles d'origine suffisent. */
+			}
+		}
+
+		window.__oknoBridge = { version: VERSION };
+
+		/* ------------------------------------------------------------------ *
+		 * État
+		 * ------------------------------------------------------------------ */
+
+		/** Valeurs d'aperçu en cours : "postId:path" -> { value, fieldType }. */
+		const overrides = new Map();
+
+		/** Dernière collecte : champs et sections présents dans le DOM. */
+		let fields = new Map();
+		let sections = [];
+		let signature = '';
+		let currentUrl = window.location.href;
+		let applying = false;
+		let settleTimer = null;
+
+		/* ------------------------------------------------------------------ *
+		 * Cloak : page masquée jusqu'aux valeurs de l'éditeur (chargement initial)
+		 * ------------------------------------------------------------------ */
+
+		const style = document.createElement( 'style' );
+		style.textContent =
+			'.' + CLOAK_CLASS + '{opacity:0 !important}' +
+			'.' + HOVER_CLASS + '{outline:2px solid #5b5bd6 !important;outline-offset:2px;cursor:pointer !important}' +
+			'.' + MANAGED_CLASS + '{outline:2px dashed #b7791f !important;outline-offset:2px}';
+		document.head.appendChild( style );
+
+		let cloakTimer = null;
+		const cloakDelay = options && 'cloakTimeout' in options ? Number( options.cloakTimeout ) : 4000;
+
+		function uncloak() {
+			clearTimeout( cloakTimer );
+			document.documentElement.classList.remove( CLOAK_CLASS );
+		}
+
+		if ( cloakDelay > 0 ) {
+			document.documentElement.classList.add( CLOAK_CLASS );
+			cloakTimer = setTimeout( () => {
+				uncloak();
+				send( { type: 'cloakTimeout' } );
+				console.warn( '[okno] wp-admin n’a pas répondu : aperçu affiché sans hydratation.' );
+			}, cloakDelay );
+		}
+
+		/* ------------------------------------------------------------------ *
+		 * Protocole
+		 * ------------------------------------------------------------------ */
+
+		function send( message ) {
+			message.ns = NS;
+			window.parent.postMessage( message, wpOrigin );
+		}
+
+		/* ------------------------------------------------------------------ *
+		 * Collecte
+		 * ------------------------------------------------------------------ */
+
+		function postIdOf( el ) {
+			const host = el.closest( '[data-wp-post]' );
+			return host ? host.getAttribute( 'data-wp-post' ) : '';
+		}
+
+		function sectionLabel( el, index ) {
+			const explicit = el.getAttribute( 'data-okno-section' ) || el.getAttribute( 'aria-label' );
+			if ( explicit ) {
+				return explicit;
+			}
+			const tag = el.tagName.toLowerCase();
+			if ( 'header' === tag ) {
+				return 'En-tête';
+			}
+			if ( 'footer' === tag ) {
+				return 'Pied de page';
+			}
+			const heading = el.querySelector( 'h1, h2, h3' );
+			if ( heading && heading.textContent.trim() ) {
+				const text = heading.textContent.trim().replace( /\s+/g, ' ' );
+				return text.length > 48 ? text.slice( 0, 45 ) + '…' : text;
+			}
+			return 'Section ' + ( index + 1 );
+		}
+
+		function sectionLayout( el ) {
+			const raw = el.getAttribute( 'data-okno-layout' );
+			if ( ! raw ) {
+				return null;
+			}
+			const parts = raw.split( '.' );
+			const index = Number( parts[ parts.length - 1 ] );
+			if ( parts.length < 2 || isNaN( index ) ) {
+				return null;
+			}
+			return { post: postIdOf( el ) || null, path: parts.slice( 0, -1 ).join( '.' ), index };
+		}
+
+		function collect() {
+			const nextFields = new Map();
+			const nextSections = [];
+
+			document.querySelectorAll( '[data-okno-sid]' ).forEach( ( el ) => el.removeAttribute( 'data-okno-sid' ) );
+
+			// 1. Sections annotées explicitement : elles priment, même à l'intérieur
+			//    d'une balise <section> générique (sauf imbriquées dans une autre annotée).
+			const EXPLICIT = '[data-okno-section], [data-okno-layout]';
+			const explicit = [ ...document.querySelectorAll( EXPLICIT ) ].filter(
+				( el ) => ! ( el.parentElement && el.parentElement.closest( EXPLICIT ) )
+			);
+
+			// 2. Détection automatique (section, header, footer) là où rien n'est annoté :
+			//    ni à l'intérieur d'une section retenue, ni autour d'une section annotée.
+			const auto = [];
+			document.querySelectorAll( 'section, header, footer' ).forEach( ( el ) => {
+				if ( el.matches( EXPLICIT ) || el.closest( EXPLICIT ) || el.querySelector( EXPLICIT ) ) {
+					return;
+				}
+				if ( auto.some( ( kept ) => kept.contains( el ) ) ) {
+					return;
+				}
+				auto.push( el );
+			} );
+
+			// Ordre du document, identifiants positionnels.
+			explicit
+				.concat( auto )
+				.sort( ( a, b ) => ( a.compareDocumentPosition( b ) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1 ) )
+				.forEach( ( el ) => {
+					const id = 's' + nextSections.length;
+					el.setAttribute( 'data-okno-sid', id );
+					nextSections.push( {
+						id,
+						label: sectionLabel( el, nextSections.length ),
+						layout: sectionLayout( el ),
+						el,
+						fields: [],
+					} );
+				} );
+
+			document.querySelectorAll( '[data-wp-field]' ).forEach( ( el ) => {
+				const postId = postIdOf( el );
+				const path = el.getAttribute( 'data-wp-field' );
+				if ( ! postId || ! path ) {
+					return;
+				}
+				const key = postId + ':' + path;
+				let entry = nextFields.get( key );
+				if ( ! entry ) {
+					entry = {
+						postId,
+						path,
+						refresh: 'save' === el.getAttribute( 'data-okno-refresh' ),
+						els: [],
+					};
+					nextFields.set( key, entry );
+
+					const host = el.closest( '[data-okno-sid]' );
+					const section = host && nextSections.find( ( s ) => s.id === host.getAttribute( 'data-okno-sid' ) );
+					if ( section ) {
+						section.fields.push( { post: postId, path, refresh: entry.refresh } );
+					}
+				}
+				entry.els.push( el );
+			} );
+
+			fields = nextFields;
+			sections = nextSections;
+		}
+
+		function computeSignature() {
+			return JSON.stringify( [
+				window.location.pathname,
+				[ ...fields.keys() ].sort(),
+				sections.map( ( s ) => [ s.label, s.layout && s.layout.path, s.layout && s.layout.index ] ),
+			] );
+		}
+
+		/* ------------------------------------------------------------------ *
+		 * Application des valeurs
+		 * ------------------------------------------------------------------ */
+
+		function sanitizeHtml( html ) {
+			const doc = document.implementation.createHTMLDocument( '' );
+			doc.body.innerHTML = String( null == html ? '' : html );
+			doc.body.querySelectorAll( BANNED_TAGS.join( ',' ) ).forEach( ( el ) => el.remove() );
+			doc.body.querySelectorAll( '*' ).forEach( ( el ) => {
+				[ ...el.attributes ].forEach( ( attr ) => {
+					const name = attr.name.toLowerCase();
+					const value = attr.value.replace( /\s+/g, '' ).toLowerCase();
+					if ( 0 === name.indexOf( 'on' ) ) {
+						el.removeAttribute( attr.name );
+					} else if ( ( 'href' === name || 'src' === name || 'xlink:href' === name ) && 0 === value.indexOf( 'javascript:' ) ) {
+						el.removeAttribute( attr.name );
+					}
+				} );
+			} );
+			return doc.body.innerHTML;
+		}
+
+		/**
+		 * Écrit un texte sans détruire les nœuds que React référence : si l'élément
+		 * contient un seul nœud texte, on change sa valeur en place.
+		 */
+		function setText( el, value ) {
+			const text = null == value ? '' : String( value );
+			const only = el.childNodes.length === 1 ? el.firstChild : null;
+			if ( only && only.nodeType === Node.TEXT_NODE ) {
+				if ( only.nodeValue !== text ) {
+					only.nodeValue = text;
+				}
+			} else if ( el.textContent !== text ) {
+				el.textContent = text;
+			}
+		}
+
+		function applyToElement( el, value, fieldType ) {
+			if ( 'image' === fieldType ) {
+				const img = 'IMG' === el.tagName ? el : el.querySelector( 'img' );
+				if ( img ) {
+					if ( img.getAttribute( 'src' ) !== ( value || '' ) ) {
+						img.setAttribute( 'src', value || '' );
+						img.removeAttribute( 'srcset' );
+					}
+				} else {
+					el.style.backgroundImage = value ? 'url("' + value + '")' : '';
+				}
+			} else if ( 'color_picker' === fieldType ) {
+				el.style.setProperty( el.getAttribute( 'data-okno-style' ) || 'color', value || '' );
+			} else if ( 'link' === fieldType ) {
+				const link = 'A' === el.tagName ? el : el.querySelector( 'a' );
+				const data = value && 'object' === typeof value ? value : { url: value };
+				if ( link ) {
+					link.setAttribute( 'href', data.url || '' );
+					if ( data.target ) {
+						link.setAttribute( 'target', data.target );
+					} else {
+						link.removeAttribute( 'target' );
+					}
+					if ( data.title ) {
+						setText( link, data.title );
+					}
+				}
+			} else if ( 'wysiwyg' === fieldType || 'html' === el.getAttribute( 'data-okno-apply' ) ) {
+				const html = sanitizeHtml( value );
+				if ( el.innerHTML !== html ) {
+					el.innerHTML = html;
+				}
+			} else {
+				setText( el, value );
+			}
+		}
+
+		function applyOverrides() {
+			applying = true;
+			try {
+				overrides.forEach( ( item, key ) => {
+					const entry = fields.get( key );
+					if ( entry && ! entry.refresh ) {
+						entry.els.forEach( ( el ) => applyToElement( el, item.value, item.fieldType ) );
+					}
+				} );
+			} finally {
+				// Les mutations que l'on vient de provoquer arrivent en microtâche.
+				Promise.resolve().then( () => {
+					applying = false;
+				} );
+			}
+		}
+
+		/* ------------------------------------------------------------------ *
+		 * Cycle de vie : handshake, mutations, navigation client
+		 * ------------------------------------------------------------------ */
+
+		function announce() {
+			const posts = {};
+			fields.forEach( ( entry ) => {
+				if ( ! posts[ entry.postId ] ) {
+					posts[ entry.postId ] = [];
+				}
+				posts[ entry.postId ].push( { path: entry.path, refresh: entry.refresh, ratio: slotRatio( entry ) } );
+			} );
+			signature = computeSignature();
+			send( {
+				type: 'ready',
+				version: VERSION,
+				url: window.location.href,
+				posts,
+				sections: sections.map( ( s ) => ( { id: s.id, label: s.label, layout: s.layout, fields: s.fields } ) ),
+			} );
+		}
+
+		function slotRatio( entry ) {
+			const el = entry.els[ 0 ];
+			if ( ! el ) {
+				return 0;
+			}
+			const target = 'IMG' === el.tagName ? el : el.querySelector( 'img' ) || el;
+			const box = target.getBoundingClientRect();
+			if ( box.width < 8 || box.height < 8 ) {
+				return 0;
+			}
+			return Math.round( ( box.width / box.height ) * 1000 ) / 1000;
+		}
+
+		function settle() {
+			clearTimeout( settleTimer );
+			settleTimer = setTimeout( () => {
+				if ( window.location.href !== currentUrl ) {
+					// Changement de page côté client : les valeurs d'aperçu de la page
+					// précédente ne concernent plus rien.
+					currentUrl = window.location.href;
+					overrides.clear();
+				}
+				collect();
+				applyOverrides();
+				if ( computeSignature() !== signature ) {
+					announce();
+				}
+			}, SETTLE_MS );
+		}
+
+		const observer = new MutationObserver( () => {
+			if ( ! applying ) {
+				settle();
+			}
+		} );
+
+		[ 'pushState', 'replaceState' ].forEach( ( method ) => {
+			const original = window.history[ method ];
+			window.history[ method ] = function () {
+				const result = original.apply( this, arguments );
+				settle();
+				return result;
+			};
+		} );
+		window.addEventListener( 'popstate', settle );
+
+		/* ------------------------------------------------------------------ *
+		 * Interactions, par délégation (survivent aux re-renders)
+		 * ------------------------------------------------------------------ */
+
+		function fieldTarget( node ) {
+			const el = node && node.closest ? node.closest( '[data-wp-field]' ) : null;
+			return el && postIdOf( el ) ? el : null;
+		}
+
+		document.addEventListener( 'mouseover', ( event ) => {
+			const field = fieldTarget( event.target );
+			const managed = ! field && event.target.closest ? event.target.closest( '[data-okno-managed]' ) : null;
+			document.querySelectorAll( '.' + HOVER_CLASS + ', .' + MANAGED_CLASS ).forEach( ( el ) => {
+				if ( el !== field && el !== managed ) {
+					el.classList.remove( HOVER_CLASS, MANAGED_CLASS );
+				}
+			} );
+			if ( field ) {
+				field.classList.add( HOVER_CLASS );
+			} else if ( managed ) {
+				managed.classList.add( MANAGED_CLASS );
+			}
+		} );
+
+		document.addEventListener(
+			'click',
+			( event ) => {
+				const target = event.target;
+				if ( ! target || ! target.closest ) {
+					return;
+				}
+
+				// 1. Un champ éditable, même à l'intérieur d'un lien : c'est lui qu'on vise.
+				const field = fieldTarget( target );
+				if ( field ) {
+					event.preventDefault();
+					event.stopPropagation();
+					send( { type: 'fieldFocus', postId: postIdOf( field ), path: field.getAttribute( 'data-wp-field' ) } );
+					return;
+				}
+
+				// 2. Un lien : l'éditeur décide (bascule de page, lien externe…). Capté en
+				//    phase de capture, donc avant le routeur du framework (Next, React Router).
+				const link = target.closest( 'a' );
+				if ( link ) {
+					event.preventDefault();
+					event.stopPropagation();
+					const href = link.getAttribute( 'href' ) || '';
+					if ( ! href || 0 === href.indexOf( '#' ) ) {
+						return;
+					}
+					let url;
+					try {
+						url = new URL( href, window.location.href );
+					} catch ( e ) {
+						return;
+					}
+					send( { type: 'navigate', href: url.href, path: url.pathname, external: url.origin !== window.location.origin } );
+					return;
+				}
+
+				// 3. Un contenu géré ailleurs.
+				const managed = target.closest( '[data-okno-managed]' );
+				if ( managed ) {
+					event.preventDefault();
+					event.stopPropagation();
+					const provider = managed.getAttribute( 'data-okno-managed' ) || '';
+					send( {
+						type: 'managedFocus',
+						provider,
+						label: managed.getAttribute( 'data-okno-managed-label' ) || 'Géré dans ' + ( PROVIDERS[ provider ] || provider || 'WordPress' ),
+						editUrl: managed.getAttribute( 'data-okno-edit-url' ) || '',
+					} );
+					return;
+				}
+
+				// 4. Une section.
+				const section = target.closest( '[data-okno-sid]' );
+				if ( section ) {
+					event.preventDefault();
+					send( { type: 'sectionFocus', id: section.getAttribute( 'data-okno-sid' ) } );
+				}
+			},
+			true
+		);
+
+		// Les formulaires du site ne doivent rien envoyer depuis l'éditeur.
+		document.addEventListener( 'submit', ( event ) => event.preventDefault(), true );
+
+		function flash( el ) {
+			el.scrollIntoView( { behavior: 'smooth', block: 'center' } );
+			el.classList.add( HOVER_CLASS );
+			setTimeout( () => el.classList.remove( HOVER_CLASS ), 1500 );
+		}
+
+		window.addEventListener( 'message', ( event ) => {
+			if ( event.origin !== wpOrigin || ! event.data || event.data.ns !== NS ) {
+				return;
+			}
+			const data = event.data;
+
+			if ( 'init' === data.type ) {
+				overrides.clear();
+				Object.keys( data.values || {} ).forEach( ( postId ) => {
+					const values = data.values[ postId ];
+					Object.keys( values ).forEach( ( path ) => {
+						overrides.set( postId + ':' + path, values[ path ] );
+					} );
+				} );
+				applyOverrides();
+				uncloak();
+			} else if ( 'fieldUpdate' === data.type ) {
+				overrides.set( data.postId + ':' + data.path, { value: data.value, fieldType: data.fieldType } );
+				applyOverrides();
+			} else if ( 'focusField' === data.type ) {
+				const entry = fields.get( data.postId + ':' + data.path );
+				if ( entry && entry.els[ 0 ] ) {
+					flash( entry.els[ 0 ] );
+				}
+			} else if ( 'focusSection' === data.type ) {
+				const section = sections.find( ( s ) => s.id === data.id );
+				if ( section ) {
+					flash( section.el );
+				}
+			}
+		} );
+
+		function start() {
+			collect();
+			announce();
+			observer.observe( document.body, { childList: true, subtree: true, characterData: true } );
+		}
+
+		if ( 'loading' === document.readyState ) {
+			document.addEventListener( 'DOMContentLoaded', start );
+		} else {
+			start();
+		}
+	}
+
+	window.initOknoBridge = initOknoBridge;
+
+	// Auto-init depuis l'attribut du tag <script>.
+	var script = document.currentScript;
+	var origin = script && script.getAttribute( 'data-wp-origin' );
+	if ( origin ) {
+		initOknoBridge( {
+			wpOrigin: origin,
+			cloakTimeout: Number( script.getAttribute( 'data-okno-cloak-timeout' ) ) || undefined,
+		} );
+	}
+} )();

package/package.json

@@ -0,0 +1,56 @@
+{
+	"name": "@pixelersagency/okno-bridge",
+	"version": "1.0.0-beta.1",
+	"description": "Pont postMessage de l'éditeur visuel Okno : rend n'importe quel site (React, Next.js, Remix, Vite, Nuxt, SvelteKit, Astro, HTML) éditable depuis WordPress. Zéro dépendance, inactif hors de l'éditeur.",
+	"keywords": [
+		"wordpress",
+		"headless",
+		"acf",
+		"visual-editing",
+		"react",
+		"nextjs",
+		"astro",
+		"remix",
+		"vite",
+		"nuxt",
+		"sveltekit"
+	],
+	"license": "GPL-2.0-or-later",
+	"author": "Pixelers (https://pixelers.fr)",
+	"type": "module",
+	"main": "./dist/okno-bridge.js",
+	"module": "./src/index.js",
+	"exports": {
+		".": {
+			"import": "./src/index.js",
+			"default": "./dist/okno-bridge.js"
+		},
+		"./react": {
+			"import": "./src/react.js"
+		},
+		"./standalone": "./dist/okno-bridge.js"
+	},
+	"scripts": {
+		"build": "node build.js"
+	},
+	"files": [
+		"src",
+		"dist",
+		"README.md"
+	],
+	"sideEffects": false,
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/pixelersagency/okno.git",
+		"directory": "bridge"
+	},
+	"homepage": "https://github.com/pixelersagency/okno#readme",
+	"peerDependencies": {
+		"react": ">=17"
+	},
+	"peerDependenciesMeta": {
+		"react": {
+			"optional": true
+		}
+	}
+}