Active element handling updated to work in shadow DOM.

packages/ckeditor5-ckbox/src/ckboxcommand.ts

@@ -202,6 +202,8 @@ export default class CKBoxCommand extends Command {
  }
 
  // TODO ShadowRoot
+ // - can we append it to the body collection?
+ // - does CKBox support Shadow DOM?
  this._wrapper = createElement( document, 'div', { class: 'ck ckbox-wrapper' } );
  document.body.appendChild( this._wrapper );
 

packages/ckeditor5-ckbox/src/ckboximageedit/ckboximageeditcommand.ts

@@ -109,6 +109,8 @@ export default class CKBoxImageEditCommand extends Command {
  }
 
  // TODO ShadowRoot
+ // - can we append it to the body collection?
+ // - does CKBox support Shadow DOM?
  const wrapper = createElement( document, 'div', { class: 'ck ckbox-wrapper' } );
 
  this._wrapper = wrapper;

packages/ckeditor5-clipboard/src/dragdrop.ts

@@ -670,6 +670,8 @@ export default class DragDrop extends Plugin {
  } );
 
  // TODO ShadowRoot
+ // - can we append it to the body collection?
+ // - is the preview generated correctly in the Shadow DOM
  global.document.body.appendChild( this._previewContainer );
  } else if ( this._previewContainer.firstElementChild ) {
  this._previewContainer.removeChild( this._previewContainer.firstElementChild );

packages/ckeditor5-clipboard/src/dragdropblocktoolbar.ts

@@ -68,7 +68,9 @@ export default class DragDropBlockToolbar extends Plugin {
  const element = blockToolbar.buttonView.element!;
 
  this._domEmitter.listenTo( element, 'dragstart', ( evt, data ) => this._handleBlockDragStart( data ) );
+
  // TODO ShadowRoot
+ // - those events will propagate across the shadow DOM boundary (bubbles and composed flags set)
  this._domEmitter.listenTo( global.document, 'dragover', ( evt, data ) => this._handleBlockDragging( data ) );
  this._domEmitter.listenTo( global.document, 'drop', ( evt, data ) => this._handleBlockDragging( data ) );
  this._domEmitter.listenTo( global.document, 'dragend', () => this._handleBlockDragEnd(), { useCapture: true } );
@@ -133,7 +135,10 @@ export default class DragDropBlockToolbar extends Plugin {
 
  let target = document.elementFromPoint( clientX, clientY );
 
- // TODO ShadowRoot - this is a workaround, works this way only in open shadow root
+ // TODO ShadowRoot
+ // - this is a workaround, works this way only in open shadow root
+ // - we should use map of known shadow roots and not depend on the shadowRoot property (it's there only for open mode)
+ // - the ShadowRoot#elementFromPoint() is non-standard but available in all browsers.
  if ( target && target.shadowRoot && target.shadowRoot.elementFromPoint ) {
  target = target.shadowRoot.elementFromPoint( clientX, clientY );
  }

packages/ckeditor5-clipboard/src/dragdroptarget.ts

@@ -521,6 +521,8 @@ function findScrollableElement( domNode: HTMLElement ): HTMLElement {
  let domElement: HTMLElement = domNode;
 
  do {
+ // TODO ShadowRoot
+ // - use helper for easier parent element access
  domElement = domElement.parentNode instanceof ShadowRoot ?
  domElement.parentNode.host as HTMLElement :
  domElement.parentElement!;

packages/ckeditor5-engine/src/view/domconverter.ts

@@ -1091,7 +1091,8 @@ export default class DomConverter {
  public focus( viewEditable: EditableElement ): void {
  const domEditable = this.mapViewToDom( viewEditable );
 
- if ( domEditable && domEditable.ownerDocument.activeElement !== domEditable ) {
+ // TODO ShadowRoot
+ if ( domEditable && domEditable.getRootNode().activeElement !== domEditable ) {
  // Save the scrollX and scrollY positions before the focus.
  const { scrollX, scrollY } = global.window;
  const scrollPositions: Array<[ number, number ]> = [];
@@ -1850,7 +1851,7 @@ function forEachDomElementAncestor( element: DomElement, callback: ( node: DomEl
 
  while ( node ) {
  callback( node );
- node = node.parentElement;
+ node = node.parentElement; // TODO ShadowRoot
  }
 }
 

packages/ckeditor5-engine/src/view/observer/selectionobserver.ts

@@ -115,8 +115,6 @@ export default class SelectionObserver extends Observer {
  * @inheritDoc
  */
  public override observe( domElement: HTMLElement ): void {
- const domDocument = domElement.ownerDocument;
-
  const startDocumentIsSelecting = () => {
  this.document.isSelecting = true;
 
@@ -131,7 +129,7 @@ export default class SelectionObserver extends Observer {
 
  // Make sure that model selection is up-to-date at the end of selecting process.
  // Sometimes `selectionchange` events could arrive after the `mouseup` event and that selection could be already outdated.
- this._handleSelectionChange( domDocument );
+ this._handleSelectionChange( domElement );
 
  this.document.isSelecting = false;
 
@@ -147,16 +145,19 @@ export default class SelectionObserver extends Observer {
  this.listenTo( domElement, 'keydown', endDocumentIsSelecting, { priority: 'highest', useCapture: true } );
  this.listenTo( domElement, 'keyup', endDocumentIsSelecting, { priority: 'highest', useCapture: true } );
 
+ const domDocument = domElement.ownerDocument;
+
  // Add document-wide listeners only once. This method could be called for multiple editing roots.
- // TODO ShadowRoot
  if ( this._documents.has( domDocument ) ) {
  return;
  }
 
  // This listener is using capture mode to make sure that selection is upcasted before any other
  // handler would like to check it and update (for example table multi cell selection).
+ // TODO ShadowRoot - this event will propagate across the shadow DOM boundary (bubbles and composed flags set)
  this.listenTo( domDocument, 'mouseup', endDocumentIsSelecting, { priority: 'highest', useCapture: true } );
 
+ // TODO ShadowRoot - this event is always fired from the document, even inside a Shadow DOM.
  this.listenTo( domDocument, 'selectionchange', ( evt, domEvent ) => {
  // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
  // @if CK_DEBUG_TYPING // _debouncedLine();
@@ -182,6 +183,7 @@ export default class SelectionObserver extends Observer {
  return;
  }
 
+ // TODO ShadowRoot - this will not work if separate roots are in separate shadow DOMs
  this._handleSelectionChange( domElement );
 
  // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
@@ -207,7 +209,8 @@ export default class SelectionObserver extends Observer {
  // @if CK_DEBUG_TYPING // );
  // @if CK_DEBUG_TYPING // }
 
- this._handleSelectionChange( domDocument );
+ // TODO ShadowRoot - this will not work if separate roots are in separate shadow DOMs
+ this._handleSelectionChange( domElement );
 
  // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
  // @if CK_DEBUG_TYPING // console.groupEnd();
@@ -248,14 +251,14 @@ export default class SelectionObserver extends Observer {
  * a selection changes and fires {@link module:engine/view/document~Document#event:selectionChange} event on every change
  * and {@link module:engine/view/document~Document#event:selectionChangeDone} when a selection stop changing.
  *
- * @param domDocument DOM document.
+ * @param domElement DOM element.
  */
- private _handleSelectionChange( domDocument: Document ) {
+ private _handleSelectionChange( domElement: HTMLElement ) {
  if ( !this.isEnabled ) {
  return;
  }
 
- const domSelection = getSelection( domDocument )!;
+ const domSelection = getSelection( domElement )!;
 
  if ( this.checkShouldIgnoreEventFromTarget( domSelection.anchorNode! ) ) {
  return;

packages/ckeditor5-engine/src/view/renderer.ts

@@ -1095,6 +1095,7 @@ export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
  const domSelection = doc.getSelection()!;
 
  if ( domSelection.rangeCount ) {
+ // TODO ShadowRoot - the activeElement of the closest ShadowRoot?
  const activeDomElement = doc.activeElement!;
  const viewElement = this.domConverter.mapDomToView( activeDomElement as DomElement );
 

packages/ckeditor5-ui/src/bindings/clickoutsidehandler.ts

@@ -42,8 +42,9 @@ export default function clickOutsideHandler(
 
  // Check if `composedPath` is `undefined` in case the browser does not support native shadow DOM.
  // Can be removed when all supported browsers support native shadow DOM.
- // TODO ShadowRoot This won't work for closed shadow root.
- // We probably should listen to all shadow roots we know of and have access to.
+ // TODO ShadowRoot
+ // - This won't work for closed shadow root.
+ // - We probably should listen to all shadow roots we know of and have access to.
  const path = typeof domEvt.composedPath == 'function' ? domEvt.composedPath() : [];
 
  const contextElementsList = typeof contextElements == 'function' ? contextElements() : contextElements;

packages/ckeditor5-ui/src/dropdown/menu/dropdownmenunestedmenuview.ts

@@ -303,7 +303,6 @@ export default class DropdownMenuNestedMenuView extends View implements Focusabl
  keystrokes.listenTo( panelView.element! );
  panelView.pin( {
  positions: this._panelPositions,
- // TODO ShadowRoot
  limiter: global.document.body,
  element: panelView.element!,
  target: buttonView.element!,

packages/ckeditor5-ui/src/dropdown/utils.ts

@@ -606,8 +606,8 @@ function focusDropdownButtonOnClose( dropdownView: DropdownView ) {
  // If the dropdown was closed, move the focus back to the button (#12125).
  // Don't touch the focus, if it moved somewhere else (e.g. moved to the editing root on #execute) (#12178).
  // Note: Don't use the state of the DropdownView#focusTracker here. It fires #blur with the timeout.
- // TODO ShadowRoot
- if ( elements.some( element => element.contains( global.document.activeElement ) ) ) {
+ // TODO ShadowRoot - the activeElement is valid for the closest ShadowRoot
+ if ( elements.some( element => element.getRootNode().activeElement && element.contains( element.getRootNode().activeElement ) ) ) {
  dropdownView.buttonView.focus();
  }
  } );

packages/ckeditor5-ui/src/panel/balloon/balloonpanelview.ts

@@ -399,9 +399,11 @@ export default class BalloonPanelView extends View {
  }
 
  let targetElement = getDomElement( options.target );
- // TODO ShadowRoot
  const limiterElement = options.limiter ? getDomElement( options.limiter ) : global.document.body;
 
+ // TODO ShadowRoot
+ // - we need to listen to the scroll event on every ShadowRoot
+ // (it is not composed and does not propagate to parent DOM)
  // Then we need to listen on scroll event of eny element in the document.
  this.listenTo( global.document, 'scroll', ( evt, domEvt ) => {
  const scrollTarget = domEvt.target as Element;

packages/ckeditor5-ui/src/tooltipmanager.ts

@@ -192,6 +192,7 @@ export default class TooltipManager extends /* #__PURE__ */ DomEmitterMixin() {
  this._pinTooltipDebounced = debounce( this._pinTooltip, 600 );
  this._unpinTooltipDebounced = debounce( this._unpinTooltip, 400 );
 
+ // TODO ShadowRoot - make sure those events propagate to parent shadow DOM
  this.listenTo( global.document, 'keydown', this._onKeyDown.bind( this ), { useCapture: true } );
 
  this.listenTo( global.document, 'focus', this._onEnterOrFocus.bind( this ), { useCapture: true } );

packages/ckeditor5-utils/src/dom/findclosestscrollableancestor.ts

@@ -17,10 +17,12 @@ import global from './global.js';
  */
 export default function findClosestScrollableAncestor( domElement: HTMLElement ): HTMLElement | null {
  let element = domElement.parentElement;
+
  if ( !element ) {
  return null;
  }
 
+ // TODO: ShadowRoot
  while ( element.tagName != 'BODY' ) {
  const overflow = element.style.overflowY || global.window.getComputedStyle( element ).overflowY;
 

packages/ckeditor5-widget/src/utils.ts

@@ -483,6 +483,7 @@ export function calculateResizeHostAncestorWidth( domResizeHost: HTMLElement ):
  let checkedElement = domResizeHostParent!;
 
  while ( isNaN( parentWidth ) ) {
+ // TODO ShadowRoot
  checkedElement = checkedElement.parentElement!;
 
  if ( ++currentLevel > ancestorLevelLimit ) {