Active element fixes.

ckeditor · Oct 7, 2024 · 97b974e · 97b974e
1 parent 54a65fe
commit 97b974e
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 10 deletions.
diff --git a/packages/ckeditor5-engine/src/view/domconverter.ts b/packages/ckeditor5-engine/src/view/domconverter.ts
@@ -34,6 +34,7 @@ import {
  first,
  getSelection,
  getParentOrHostElement,
+ getActiveElement,
  env
 } from '@ckeditor/ckeditor5-utils';
 
@@ -1091,8 +1092,7 @@ export default class DomConverter {
  */
  public focus( viewEditable: EditableElement ): void {
  const domEditable = this.mapViewToDom( viewEditable );
- const rootNode = domEditable && ( domEditable.getRootNode() as ShadowRoot | DomDocument );
- const activeElement = rootNode && rootNode.activeElement;
+ const activeElement = domEditable && getActiveElement( domEditable );
 
  // TODO ShadowRoot
  if ( domEditable && activeElement !== domEditable ) {

diff --git a/packages/ckeditor5-engine/src/view/renderer.ts b/packages/ckeditor5-engine/src/view/renderer.ts
@@ -1093,7 +1093,7 @@ export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
  * Removes the DOM selection.
  */
  private _removeDomSelection(): void {
- // TODO ShadowRoot
+ // TODO ShadowRoot - this currently does not work in Shadow DOM but also looks like it has no effect
  for ( const doc of this.domDocuments ) {
  const domSelection = doc.getSelection()!;
 

diff --git a/packages/ckeditor5-ui/src/colorpicker/colorpickerview.ts b/packages/ckeditor5-ui/src/colorpicker/colorpickerview.ts
@@ -10,7 +10,7 @@
 import { convertColor, convertToHex, registerCustomElement, type ColorPickerViewConfig } from './utils.js';
 
 import type { HexColor } from '@ckeditor/ckeditor5-core';
-import { type Locale, global, env } from '@ckeditor/ckeditor5-utils';
+import { type Locale, global, env, getActiveElement } from '@ckeditor/ckeditor5-utils';
 import { debounce, type DebouncedFunc } from 'lodash-es';
 import View from '../view.js';
 import type InputTextView from '../inputtext/inputtextview.js';
@@ -142,7 +142,7 @@ export default class ColorPickerView extends View {
  // Update the selected color in the color picker palette when it's not focused.
  // It means the user typed the color in the input.
  // TODO ShadowRoot
- if ( document.activeElement !== this.picker ) {
+ if ( getActiveElement( this.element! ) !== this.picker ) {
  this.picker.setAttribute( 'color', this._hexColor );
  }
 

diff --git a/packages/ckeditor5-ui/src/dropdown/utils.ts b/packages/ckeditor5-ui/src/dropdown/utils.ts
@@ -31,7 +31,7 @@ import type { FalsyValue } from '../template.js';
 import type BodyCollection from '../editorui/bodycollection.js';
 
 import {
- global,
+ getActiveElement,
  priorities,
  logWarning,
  type Collection,
@@ -607,7 +607,7 @@ function focusDropdownButtonOnClose( dropdownView: DropdownView ) {
  // 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 - the activeElement is valid for the closest ShadowRoot
- if ( elements.some( element => element.getRootNode().activeElement && element.contains( element.getRootNode().activeElement ) ) ) {
+ if ( elements.some( element => getActiveElement( element ) && element.contains( getActiveElement( element ) ) ) ) {
  dropdownView.buttonView.focus();
  }
  } );

diff --git a/packages/ckeditor5-utils/src/dom/getactiveelement.ts b/packages/ckeditor5-utils/src/dom/getactiveelement.ts
@@ -0,0 +1,17 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals Node, Document, Element */
+
+/**
+ * @module utils/dom/getactiveelement
+ */
+
+/**
+ * TODO
+ */
+export default function getActiveElement( node: Node ): Element | null {
+ return ( node.getRootNode() as ShadowRoot | Document ).activeElement;
+}
diff --git a/packages/ckeditor5-utils/src/dom/getselection.ts b/packages/ckeditor5-utils/src/dom/getselection.ts
@@ -23,8 +23,6 @@ export default function getSelection( node: Node ): Selection | null {
  // TODO Does it work if in multiple nested shadows?
  const ranges = domSelection.getComposedRanges( rootNode );
 
- console.log( 'sel', ranges, domSelection.direction );
-
  // TODO for now just a DOM selection wrapper
  return {
  rangeCount: ranges.length,
@@ -55,7 +53,6 @@ export default function getSelection( node: Node ): Selection | null {
  },
 
  setBaseAndExtent( ...args ) {
- console.log( 'sel set base and extent' );
  return domSelection.setBaseAndExtent( ...args );
  }
  } as any;

diff --git a/packages/ckeditor5-utils/src/index.ts b/packages/ckeditor5-utils/src/index.ts
@@ -71,6 +71,7 @@ export { default as isVisible } from './dom/isvisible.js';
 export { getOptimalPosition, type Options as PositionOptions, type PositioningFunction, type DomPoint } from './dom/position.js';
 export { default as remove } from './dom/remove.js';
 export { default as getSelection } from './dom/getselection.js';
+export { default as getActiveElement } from './dom/getactiveelement.js';
 export * from './dom/scroll.js';
 
 export * from './keyboard.js';