Shadow DOM

Permet d’exécuter l’éditeur dans une racine shadow, par exemple dans votre composant web ou un micro-frontend. Les feuilles de style de la page ne pénètrent pas dans une racine shadow : sans aide, l’éditeur y apparaît sans styles. Ce plugin copie les feuilles de style de l’éditeur dans la racine shadow qui le contient et continue à copier celles ajoutées ensuite par les plugins.

Activation

Cette fonctionnalité est fournie par le plugin shadowdom.js (également inclus dans plugins/all_plugins.js). Chargez la feuille de style sur la page comme d’habitude et créez l’éditeur sur un élément dans la racine shadow ; le plugin fait le reste. Aucun bouton.

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>

<note-editor id="host"></note-editor>
<script>
class NoteEditor extends HTMLElement {
  connectedCallback() {
    const root = this.attachShadow({ mode: "open" });
    root.innerHTML = '<div class="box"><p>Text inside a <b>shadow root</b>.</p></div>';
    this.editor = new RichTextEditor(root.querySelector(".box"), { toolbar: "basic", height: "220px" });
  }
}
customElements.define("note-editor", NoteEditor);
</script>

L’élément prêt à l’emploi <rich-text-editor> dans rte-webcomponent.js utilise le même plugin : ajoutez l’attribut shadow pour monter l’éditeur dans sa propre racine shadow.

<script src="/richtexteditor/rte-webcomponent.js"></script>
<rich-text-editor shadow toolbar="basic" height="220px"><p>Hello</p></rich-text-editor>

Si shadowdom.js n’est pas chargé, cet élément affiche un avertissement dans la console et reste dans le DOM classique plutôt que de s’afficher sans styles.

Options

Option	Valeur par défaut	Fonctionnement
shadowStyleAdoption	true	Copie les feuilles de style de l’éditeur dans la racine shadow. false désactive la copie.
shadowStyleSources	null	URL de feuilles de style supplémentaires à ajouter dans la racine shadow, sous forme de chaîne ou de tableau, pour vos personnalisations d’habillage.

Éléments copiés

• <link rel="stylesheet"> servis depuis le dossier de chargement de rte.js, ou dont les noms de fichier sont ceux de l’éditeur (rte_theme, rte_mobile, richtexteditor_content, richtexteditor_preview, aitoolkit). Ils sont recréés comme de nouveaux éléments <link> avec la même URL et proviennent donc du cache du navigateur.
• <style> dont l’identifiant commence par rte- ou __rte (styles des plugins), et les éléments <style> sans identifiant dont le CSS mentionne les sélecteurs de l’éditeur : c’est ainsi que des outils comme Vite injectent un thème importé.
• Les feuilles de style adoptées par la page avec document.adoptedStyleSheets.

Aucun autre élément de la page n’est copié : votre composant conserve son encapsulation. Chaque copie porte data-rte-adopted="1". Sur la page de test ci-dessus, 9 feuilles de style ont été copiées (le thème, la feuille AI Toolkit et les éléments <style> des plugins), et la barre mesurait 41 pixels de haut. Avec shadowStyleAdoption: false, elle mesurait 7,561 pixels : une colonne de boutons sans styles.

Le plugin surveille le <head> de la page : un style ajouté après le démarrage, à la première ouverture d’un panneau de plugin, est donc aussi copié. Les boîtes de dialogue et menus sont créés dans l’élément de l’éditeur : ils se trouvent dans la racine shadow et utilisent les styles copiés.

API

• editor.isInShadowDom() — true lorsque l’éditeur est dans une racine shadow.
• editor.getShadowRoot() — cette racine shadow, ou null.
• editor.getAdoptedStyleCount() — nombre de feuilles de style copiées (9 ci-dessus).
• editor.adoptEditorStyles(target) — copie les feuilles de style de l’éditeur dans une autre racine, par exemple une seconde racine shadow affichant un aperçu. Sans argument, utilise la racine shadow de l’éditeur.

À savoir

• La zone d’édition est une iframe : le CSS propre au document y est donc chargé normalement (contentCssUrl) ; ce plugin ne concerne que la barre d’outils, les menus et les boîtes de dialogue.
• Hors d’une racine shadow, le plugin ne fait rien et ne crée aucun observateur.
• Vos personnalisations de l’apparence de l’éditeur dans la feuille de style de la page ne pénètrent pas dans la racine shadow. Indiquez-les dans shadowStyleSources, ou placez-les vous-même dans la racine shadow.
• Le HTML enregistré n’est pas affecté ; getHTMLCode() a renvoyé <p>Text inside a <b>shadow root</b>.</p>.

Voir aussi : démarrage rapide, validation des formulaires.