From 97b974ef2e21b14feb87f9e4ceed291fe2bc34e3 Mon Sep 17 00:00:00 2001 From: Kuba Niegowski Date: Mon, 7 Oct 2024 17:38:20 +0200 Subject: [PATCH] Active element fixes. --- .../ckeditor5-engine/src/view/domconverter.ts | 4 ++-- packages/ckeditor5-engine/src/view/renderer.ts | 2 +- .../src/colorpicker/colorpickerview.ts | 4 ++-- packages/ckeditor5-ui/src/dropdown/utils.ts | 4 ++-- .../ckeditor5-utils/src/dom/getactiveelement.ts | 17 +++++++++++++++++ .../ckeditor5-utils/src/dom/getselection.ts | 3 --- packages/ckeditor5-utils/src/index.ts | 1 + 7 files changed, 25 insertions(+), 10 deletions(-) create mode 100644 packages/ckeditor5-utils/src/dom/getactiveelement.ts diff --git a/packages/ckeditor5-engine/src/view/domconverter.ts b/packages/ckeditor5-engine/src/view/domconverter.ts index 4568f8eda44..3c4bcbd701d 100644 --- 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 index 21040a0ef35..e3f1cd70537 100644 --- 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 index 6b67a2ddeb4..f59bd748f82 100644 --- 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 index 50ee6c4b0c5..cf15d7a2bd3 100644 --- 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 new file mode 100644 index 00000000000..36ec02be98c --- /dev/null +++ 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 index c83a95c30fe..ba5f0cc9085 100644 --- 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 index c487c02ab5b..6b73c921969 100644 --- 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';