v3.0.0

BREAKING CHANGES

• The placementInHead option of injectStylesheet() has been removed and replaced by placement, which takes the same 'start' and 'end' values and now applies to document.head as well as to a custom targetNode.

  The INJECTED_SCRIPTS and INJECTED_STYLESHEETS maps are no longer exported. Injected elements now carry their own load state, so there is no global cache to read or clear. Code that reached for these maps (mostly test setup calling INJECTED_SCRIPTS.clear()) should remove the injected <script> and <link> elements from the DOM instead, which now forgets them synchronously.

  A failed injection is no longer cached. The element is removed from the DOM, so the next call retries rather than returning the same rejected promise forever.

  // Before:
  injectStylesheet( { href, placementInHead: 'end' } );
  
  // After:
  injectStylesheet( { href, placement: 'end' } );

Features

• Added support for shadow roots. The stylesheets loaded from the CDN can now be injected into a shadow root instead of document.head, so the editor styles stay scoped to a web component rather than leaking into the page.

  loadCKEditorCloud() accepts an injectedStylesheetsLocation option that decides where those stylesheets land. It takes a targetNode (an element or a shadow root, defaulting to document.head) and a placement ('start' or 'end', defaulting to 'start'), and applies to every stylesheet of the loaded pack — the base bundle, premium features, CKBox and plugins alike. The same option is available as stylesheetsLocation in loadCKCdnResourcesPack() and as targetNode in injectStylesheet(), and the InjectStylesheetLocation type is exported from the package.

  class MyEditorElement extends HTMLElement {
  	public async connectedCallback(): Promise<void> {
  		const shadowRoot = this.attachShadow( { mode: 'open' } );
  		const container = shadowRoot.appendChild( document.createElement( 'div' ) );
  
  		const { CKEditor } = await loadCKEditorCloud( {
  			version: '48.0.0',
  			injectedStylesheetsLocation: {
  				targetNode: shadowRoot,
  				placement: 'end'
  			}
  		} );
  
  		const { ClassicEditor, Essentials, Paragraph } = CKEditor;
  
  		await ClassicEditor.create( {
  			attachTo: container,
  			plugins: [ Essentials, Paragraph ]
  		} );
  	}
  }