Shadow DOM

Permite que o editor rode dentro de uma shadow root, por exemplo dentro do seu próprio web component ou de um micro-frontend. As folhas de estilo da página não chegam dentro de uma shadow root; por isso, sem ajuda, o editor ali fica sem estilo. Este plugin copia as próprias folhas de estilo do editor para a shadow root que o contém, e continua copiando as que os plugins adicionarem depois.

Um editor dentro da shadow root de um elemento personalizado, com uma barra de ferramentas estilizada e a caixa de diálogo Insert Link aberta ao lado, mostrando os campos URL e Text, Open in new tab, Cancel e Insert — Um editor criado dentro da shadow root de um elemento personalizado, com a caixa de diálogo Insert Link aberta. Os dois estão estilizados.

Ative o recurso

O recurso é o plugin shadowdom.js (também incluído em plugins/all_plugins.js). Carregue a folha de estilo do editor na página como de costume e crie o editor em um elemento dentro da shadow root; o plugin faz o resto. Não há botão.

<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>

O elemento pronto <rich-text-editor> de rte-webcomponent.js usa o mesmo plugin: adicione o atributo shadow e ele monta o editor na própria shadow root.

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

Se o shadowdom.js não estiver carregado, esse elemento mostra um aviso no console e fica no light DOM, em vez de aparecer sem estilo.

Opções

Opção	Padrão	O que faz
`shadowStyleAdoption`	`true`	Copia as folhas de estilo do editor para a shadow root. `false` desativa a cópia.
`shadowStyleSources`	`null`	URLs de folhas de estilo extras a adicionar à shadow root, uma string ou um array, para as suas próprias sobrescritas de skin.

O que é copiado

Elementos <link rel="stylesheet"> servidos a partir da pasta de onde o rte.js foi carregado, ou cujos nomes de arquivo são os do editor (rte_theme, rte_mobile, richtexteditor_content, richtexteditor_preview, aitoolkit). Eles são recriados como novos elementos <link> com a mesma URL; por isso, vêm do cache do navegador.
Elementos <style> cujo id começa com rte- ou __rte (os estilos dos plugins), e elementos <style> sem id cujo CSS menciona os seletores do editor, que é como bundlers como o Vite injetam um tema importado.
Folhas de estilo que a página adotou com document.adoptedStyleSheets.

Nada mais da página é copiado; assim, o seu componente mantém o encapsulamento. Cada cópia leva data-rte-adopted="1". Na página de teste acima, 9 folhas de estilo foram copiadas (o tema, a folha de estilo do AI Toolkit e os elementos <style> dos plugins), e a barra de ferramentas tinha 41 pixels de altura. Com shadowStyleAdoption: false, ela tinha 7,561 pixels de altura, uma coluna de botões sem estilo.

O plugin observa o <head> da página; por isso, o estilo de um plugin adicionado depois da inicialização, quando o painel dele abre pela primeira vez, também é copiado. As caixas de diálogo e os menus são criados dentro do elemento do editor; portanto, ficam dentro da shadow root e usam os estilos copiados.

API

editor.isInShadowDom() — true quando o editor está dentro de uma shadow root.
editor.getShadowRoot() — essa shadow root, ou null.
editor.getAdoptedStyleCount() — quantas folhas de estilo foram copiadas (9 acima).
editor.adoptEditorStyles(target) — copia as folhas de estilo do editor para outra raiz, por exemplo uma segunda shadow root que mostra uma prévia. Sem argumento, usa a própria shadow root do editor.

O que você precisa saber

A área de edição é um iframe; por isso, o CSS do próprio documento é carregado nela como de costume (contentCssUrl). Este plugin trata apenas da barra de ferramentas, dos menus e das caixas de diálogo do editor.
Fora de uma shadow root, o plugin não faz nada e não cria nenhum observer.
As suas próprias sobrescritas da aparência do editor que ficam na folha de estilo da página não chegam dentro da shadow root. Liste-as em shadowStyleSources, ou coloque-as você mesmo na shadow root.
O HTML salvo não é afetado; getHTMLCode() retornou <p>Text inside a <b>shadow root</b>.</p>.

Relacionados: Início rápido, Validação de formulários.