@ckeditor/ckeditor5-ui 39.0.2 → 40.1.0

package/src/button/buttonview.js

@@ -7,6 +7,7 @@
  */
 import View from '../view';
 import IconView from '../icon/iconview';
+import ButtonLabelView from './buttonlabelview';
 import { env, getEnvKeystrokeText, uid, delay } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/button/button.css';
 /**
@@ -29,9 +30,13 @@ import '../../theme/components/button/button.css';
  */
 export default class ButtonView extends View {
     /**
-     * @inheritDoc
+     * Creates an instance of the button view class.
+     *
+     * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
+     * @param labelView The instance of the button's label. If not provided, an instance of
+     * {@link module:ui/button/buttonlabelview~ButtonLabelView} is used.
      */
-    constructor(locale) {
+    constructor(locale, labelView = new ButtonLabelView()) {
         super(locale);
         /**
          * Delayed focus function for focus handling in Safari.
@@ -40,7 +45,6 @@ export default class ButtonView extends View {
         const bind = this.bindTemplate;
         const ariaLabelUid = uid();
         // Implement the Button interface.
-        this.set('ariaChecked', undefined);
         this.set('ariaLabel', undefined);
         this.set('ariaLabelledBy', `ck-editor__aria-label_${ariaLabelUid}`);
         this.set('class', undefined);
@@ -60,7 +64,7 @@ export default class ButtonView extends View {
         this.set('withText', false);
         this.set('withKeystroke', false);
         this.children = this.createCollection();
-        this.labelView = this._createLabelView();
+        this.labelView = this._setupLabelView(labelView);
         this.iconView = new IconView();
         this.iconView.extendTemplate({
             attributes: {
@@ -88,7 +92,6 @@ export default class ButtonView extends View {
                 'aria-label': bind.to('ariaLabel'),
                 'aria-labelledby': bind.to('ariaLabelledBy'),
                 'aria-disabled': bind.if('isEnabled', true, value => !value),
-                'aria-checked': bind.to('isOn'),
                 'aria-pressed': bind.to('isOn', value => this.isToggleable ? String(!!value) : false),
                 'data-cke-tooltip-text': bind.to('_tooltipString'),
                 'data-cke-tooltip-position': bind.to('tooltipPosition')
@@ -154,27 +157,10 @@ export default class ButtonView extends View {
         super.destroy();
     }
     /**
-     * Creates a label view instance and binds it with button attributes.
+     * Binds the label view instance it with button attributes.
      */
-    _createLabelView() {
-        const labelView = new View();
-        const bind = this.bindTemplate;
-        labelView.setTemplate({
-            tag: 'span',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-button__label'
-                ],
-                style: bind.to('labelStyle'),
-                id: this.ariaLabelledBy
-            },
-            children: [
-                {
-                    text: bind.to('label')
-                }
-            ]
-        });
+    _setupLabelView(labelView) {
+        labelView.bind('text', 'style', 'id').to(this, 'label', 'labelStyle', 'ariaLabelledBy');
         return labelView;
     }
     /**

package/src/dropdown/dropdownview.js

@@ -78,6 +78,8 @@ export default class DropdownView extends View {
         this.set('class', undefined);
         this.set('id', undefined);
         this.set('panelPosition', 'auto');
+        // Toggle the visibility of the panel when the dropdown becomes open.
+        this.panelView.bind('isVisible').to(this, 'isOpen');
         this.keystrokes = new KeystrokeHandler();
         this.focusTracker = new FocusTracker();
         this.setTemplate({
@@ -117,8 +119,6 @@ export default class DropdownView extends View {
         this.listenTo(this.buttonView, 'open', () => {
             this.isOpen = !this.isOpen;
         });
-        // Toggle the visibility of the panel when the dropdown becomes open.
-        this.panelView.bind('isVisible').to(this, 'isOpen');
         // Let the dropdown control the position of the panel. The position must
         // be updated every time the dropdown is open.
         this.on('change:isOpen', (evt, name, isOpen) => {
@@ -128,12 +128,13 @@ export default class DropdownView extends View {
             // If "auto", find the best position of the panel to fit into the viewport.
             // Otherwise, simply assign the static position.
             if (this.panelPosition === 'auto') {
-                this.panelView.position = DropdownView._getOptimalPosition({
+                const optimalPanelPosition = DropdownView._getOptimalPosition({
                     element: this.panelView.element,
                     target: this.buttonView.element,
                     fitInViewport: true,
                     positions: this._panelPositions
-                }).name;
+                });
+                this.panelView.position = (optimalPanelPosition ? optimalPanelPosition.name : this._panelPositions[0].name);
             }
             else {
                 this.panelView.position = this.panelPosition;

package/src/dropdown/utils.d.ts

@@ -202,7 +202,7 @@ export declare function focusChildOnDropdownOpen(dropdownView: DropdownView, chi
  * A definition of the list item used by the {@link module:ui/dropdown/utils~addListToDropdown}
  * utility.
  */
-export type ListDropdownItemDefinition = ListDropdownSeparatorDefinition | ListDropdownButtonDefinition;
+export type ListDropdownItemDefinition = ListDropdownSeparatorDefinition | ListDropdownButtonDefinition | ListDropdownGroupDefinition;
 /**
  * A definition of the 'separator' list item.
  */
@@ -219,3 +219,17 @@ export type ListDropdownButtonDefinition = {
      */
     model: Model;
 };
+/**
+ * A definition of the group inside the list. A group can contain one or more list items (buttons).
+ */
+export type ListDropdownGroupDefinition = {
+    type: 'group';
+    /**
+     * The visible label of the group.
+     */
+    label: string;
+    /**
+     * The collection of the child list items inside this group.
+     */
+    items: Collection<ListDropdownButtonDefinition>;
+};

package/src/dropdown/utils.js

@@ -20,6 +20,7 @@ import clickOutsideHandler from '../bindings/clickoutsidehandler';
 import { global, priorities, logWarning } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/dropdown/toolbardropdown.css';
 import '../../theme/components/dropdown/listdropdown.css';
+import ListItemGroupView from '../list/listitemgroupview';
 /**
  * A helper for creating dropdowns. It creates an instance of a {@link module:ui/dropdown/dropdownview~DropdownView dropdown},
  * with a {@link module:ui/dropdown/button/dropdownbutton~DropdownButton button},
@@ -267,27 +268,7 @@ function addListToOpenDropdown(dropdownView, itemsOrCallback, options) {
     const items = typeof itemsOrCallback == 'function' ? itemsOrCallback() : itemsOrCallback;
     listView.ariaLabel = options.ariaLabel;
     listView.role = options.role;
-    listView.items.bindTo(items).using(def => {
-        if (def.type === 'separator') {
-            return new ListSeparatorView(locale);
-        }
-        else if (def.type === 'button' || def.type === 'switchbutton') {
-            const listItemView = new ListItemView(locale);
-            let buttonView;
-            if (def.type === 'button') {
-                buttonView = new ButtonView(locale);
-            }
-            else {
-                buttonView = new SwitchButtonView(locale);
-            }
-            // Bind all model properties to the button view.
-            buttonView.bind(...Object.keys(def.model)).to(def.model);
-            buttonView.delegate('execute').to(listItemView);
-            listItemView.children.add(buttonView);
-            return listItemView;
-        }
-        return null;
-    });
+    bindViewCollectionItemsToDefinitions(dropdownView, listView.items, items, locale);
     dropdownView.panelView.children.add(listView);
     listView.items.delegate('execute').to(dropdownView);
 }
@@ -435,3 +416,48 @@ function focusDropdownPanelOnOpen(dropdownView) {
         //   focus of a specific child by kicking in too late and resetting the focus in the panel.
     }, { priority: 'low' });
 }
+/**
+ * This helper populates a dropdown list with items and groups according to the
+ * collection of item definitions. A permanent binding is created in this process allowing
+ * dynamic management of the dropdown list content.
+ *
+ * @param dropdownView
+ * @param listItems
+ * @param definitions
+ * @param locale
+ */
+function bindViewCollectionItemsToDefinitions(dropdownView, listItems, definitions, locale) {
+    listItems.bindTo(definitions).using(def => {
+        if (def.type === 'separator') {
+            return new ListSeparatorView(locale);
+        }
+        else if (def.type === 'group') {
+            const groupView = new ListItemGroupView(locale);
+            groupView.set({ label: def.label });
+            bindViewCollectionItemsToDefinitions(dropdownView, groupView.items, def.items, locale);
+            groupView.items.delegate('execute').to(dropdownView);
+            return groupView;
+        }
+        else if (def.type === 'button' || def.type === 'switchbutton') {
+            const listItemView = new ListItemView(locale);
+            let buttonView;
+            if (def.type === 'button') {
+                buttonView = new ButtonView(locale);
+                buttonView.extendTemplate({
+                    attributes: {
+                        'aria-checked': buttonView.bindTemplate.to('isOn')
+                    }
+                });
+            }
+            else {
+                buttonView = new SwitchButtonView(locale);
+            }
+            // Bind all model properties to the button view.
+            buttonView.bind(...Object.keys(def.model)).to(def.model);
+            buttonView.delegate('execute').to(listItemView);
+            listItemView.children.add(buttonView);
+            return listItemView;
+        }
+        return null;
+    });
+}

package/src/editorui/editorui.d.ts

@@ -8,6 +8,7 @@
 import ComponentFactory from '../componentfactory';
 import TooltipManager from '../tooltipmanager';
 import PoweredBy from './poweredby';
+import AriaLiveAnnouncer from '../arialiveannouncer';
 import type EditorUIView from './editoruiview';
 import type ToolbarView from '../toolbar/toolbarview';
 import { FocusTracker } from '@ckeditor/ckeditor5-utils';
@@ -42,6 +43,11 @@ export default abstract class EditorUI extends EditorUI_base {
      * A helper that enables the "powered by" feature in the editor and renders a link to the project's webpage.
      */
     readonly poweredBy: PoweredBy;
+    /**
+     * A helper that manages the content of an `aria-live` regions used by editor features to announce status changes
+     * to screen readers.
+     */
+    readonly ariaLiveAnnouncer: AriaLiveAnnouncer;
     /**
      * Indicates the UI is ready. Set `true` after {@link #event:ready} event is fired.
      *

package/src/editorui/editorui.js

@@ -9,6 +9,7 @@
 import ComponentFactory from '../componentfactory';
 import TooltipManager from '../tooltipmanager';
 import PoweredBy from './poweredby';
+import AriaLiveAnnouncer from '../arialiveannouncer';
 import { ObservableMixin, isVisible, FocusTracker } from '@ckeditor/ckeditor5-utils';
 /**
  * A class providing the minimal interface that is required to successfully bootstrap any editor UI.
@@ -42,6 +43,7 @@ export default class EditorUI extends ObservableMixin() {
         this.focusTracker = new FocusTracker();
         this.tooltipManager = new TooltipManager(editor);
         this.poweredBy = new PoweredBy(editor);
+        this.ariaLiveAnnouncer = new AriaLiveAnnouncer(editor);
         this.set('viewportOffset', this._readViewportOffsetFromConfig());
         this.once('ready', () => {
             this.isReady = true;

package/src/editorui/poweredby.js

@@ -2,7 +2,7 @@
  * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import { Rect, DomEmitterMixin, findClosestScrollableAncestor, verifyLicense } from '@ckeditor/ckeditor5-utils';
+import { DomEmitterMixin, Rect, verifyLicense } from '@ckeditor/ckeditor5-utils';
 import BalloonPanelView from '../panel/balloon/balloonpanelview';
 import IconView from '../icon/iconview';
 import View from '../view';
@@ -15,14 +15,6 @@ const ICON_HEIGHT = 10;
 const NARROW_ROOT_HEIGHT_THRESHOLD = 50;
 const NARROW_ROOT_WIDTH_THRESHOLD = 350;
 const DEFAULT_LABEL = 'Powered by';
-const OFF_THE_SCREEN_POSITION = {
-    top: -99999,
-    left: -99999,
-    name: 'invalid',
-    config: {
-        withArrow: false
-    }
-};
 /**
  * A helper that enables the "powered by" feature in the editor and renders a link to the project's
  * webpage next to the bottom of the editable element (editor root, source editing area, etc.) when the editor is focused.
@@ -235,14 +227,10 @@ function getLowerLeftCornerPosition(focusedEditableElement, config) {
     return getLowerCornerPosition(focusedEditableElement, config, rootRect => rootRect.left + config.horizontalOffset);
 }
 function getLowerCornerPosition(focusedEditableElement, config, getBalloonLeft) {
-    return (editableElementRect, balloonRect) => {
-        const visibleEditableElementRect = editableElementRect.getVisible();
-        // Root cropped by ancestors.
-        if (!visibleEditableElementRect) {
-            return OFF_THE_SCREEN_POSITION;
-        }
+    return (visibleEditableElementRect, balloonRect) => {
+        const editableElementRect = new Rect(focusedEditableElement);
         if (editableElementRect.width < NARROW_ROOT_WIDTH_THRESHOLD || editableElementRect.height < NARROW_ROOT_HEIGHT_THRESHOLD) {
-            return OFF_THE_SCREEN_POSITION;
+            return null;
         }
         let balloonTop;
         if (config.position === 'inside') {
@@ -253,27 +241,16 @@ function getLowerCornerPosition(focusedEditableElement, config, getBalloonLeft)
         }
         balloonTop -= config.verticalOffset;
         const balloonLeft = getBalloonLeft(editableElementRect, balloonRect);
-        if (config.position === 'inside') {
-            const newBalloonRect = balloonRect.clone().moveTo(balloonLeft, balloonTop);
-            // The watermark cannot be positioned in this corner because the corner is not quite visible.
-            if (newBalloonRect.getIntersectionArea(visibleEditableElementRect) < newBalloonRect.getArea()) {
-                return OFF_THE_SCREEN_POSITION;
-            }
-        }
-        else {
-            const firstScrollableEditableElementAncestor = findClosestScrollableAncestor(focusedEditableElement);
-            if (firstScrollableEditableElementAncestor) {
-                const firstScrollableEditableElementAncestorRect = new Rect(firstScrollableEditableElementAncestor);
-                const notVisibleVertically = visibleEditableElementRect.bottom + balloonRect.height / 2 >
-                    firstScrollableEditableElementAncestorRect.bottom;
-                const notVisibleHorizontally = config.side === 'left' ?
-                    editableElementRect.left < firstScrollableEditableElementAncestorRect.left :
-                    editableElementRect.right > firstScrollableEditableElementAncestorRect.right;
-                // The watermark cannot be positioned in this corner because the corner is "not visible enough".
-                if (notVisibleVertically || notVisibleHorizontally) {
-                    return OFF_THE_SCREEN_POSITION;
-                }
-            }
+        // Clone the editable element rect and place it where the balloon would be placed.
+        // This will allow getVisible() to work from editable element's perspective (rect source).
+        // and yield a result as if the balloon was on the same (scrollable) layer as the editable element.
+        const newBalloonPositionRect = visibleEditableElementRect
+            .clone()
+            .moveTo(balloonLeft, balloonTop)
+            .getIntersection(balloonRect.clone().moveTo(balloonLeft, balloonTop));
+        const newBalloonPositionVisibleRect = newBalloonPositionRect.getVisible();
+        if (!newBalloonPositionVisibleRect || newBalloonPositionVisibleRect.getArea() < balloonRect.getArea()) {
+            return null;
         }
         return {
             top: balloonTop,

package/src/focuscycler.d.ts

@@ -8,6 +8,10 @@
 import { type ArrayOrItem, type FocusTracker, type KeystrokeHandler } from '@ckeditor/ckeditor5-utils';
 import type View from './view';
 import type ViewCollection from './viewcollection';
+declare const FocusCycler_base: {
+    new (): import("@ckeditor/ckeditor5-utils").Emitter;
+    prototype: import("@ckeditor/ckeditor5-utils").Emitter;
+};
 /**
  * A utility class that helps cycling over focusable {@link module:ui/view~View views} in a
  * {@link module:ui/viewcollection~ViewCollection} when the focus is tracked by the
@@ -60,7 +64,7 @@ import type ViewCollection from './viewcollection';
  *
  * Check out the {@glink framework/deep-dive/ui/focus-tracking "Deep dive into focus tracking"} guide to learn more.
  */
-export default class FocusCycler {
+export default class FocusCycler extends FocusCycler_base {
     /**
      * A {@link module:ui/view~View view} collection that the cycler operates on.
      */
@@ -162,6 +166,10 @@ export default class FocusCycler {
     focusPrevious(): void;
     /**
      * Focuses the given view if it exists.
+     *
+     * @param view The view to be focused
+     * @param direction The direction of the focus if the view has focusable children.
+     * @returns
      */
     private _focus;
     /**
@@ -172,8 +180,22 @@ export default class FocusCycler {
      */
     private _getFocusableItem;
 }
+/**
+ * A view that can be focused.
+ */
 export type FocusableView = View & {
-    focus(): void;
+    /**
+     * Focuses the view.
+     *
+     * @param direction This optional parameter helps improve the UX by providing additional information about the direction the focus moved
+     * (e.g. in a complex view or a form). It is useful for views that host multiple focusable children (e.g. lists, toolbars):
+     * * `1` indicates that the focus moved forward and, in most cases, the first child of the focused view should get focused,
+     * * `-1` indicates that the focus moved backwards, and the last focusable child should get focused
+     *
+     * See {@link module:ui/focuscycler~FocusCycler#event:forwardCycle} and {@link module:ui/focuscycler~FocusCycler#event:backwardCycle}
+     * to learn more.
+     */
+    focus(direction?: 1 | -1): void;
 };
 export interface FocusCyclerActions {
     focusFirst?: ArrayOrItem<string>;
@@ -181,3 +203,24 @@ export interface FocusCyclerActions {
     focusNext?: ArrayOrItem<string>;
     focusPrevious?: ArrayOrItem<string>;
 }
+/**
+ * Fired when the focus cycler is about to move the focus from the last focusable item
+ * to the first one.
+ *
+ * @eventName ~FocusCycler#forwardCycle
+ */
+export type FocusCyclerForwardCycleEvent = {
+    name: 'forwardCycle';
+    args: [];
+};
+/**
+ * Fired when the focus cycler is about to move the focus from the first focusable item
+ * to the last one.
+ *
+ * @eventName ~FocusCycler#backwardCycle
+ */
+export type FocusCyclerBackwardCycleEvent = {
+    name: 'backwardCycle';
+    args: [];
+};
+export {};

package/src/focuscycler.js

@@ -5,7 +5,7 @@
 /**
  * @module ui/focuscycler
  */
-import { isVisible } from '@ckeditor/ckeditor5-utils';
+import { isVisible, EmitterMixin } from '@ckeditor/ckeditor5-utils';
 /**
  * A utility class that helps cycling over focusable {@link module:ui/view~View views} in a
  * {@link module:ui/viewcollection~ViewCollection} when the focus is tracked by the
@@ -58,13 +58,14 @@ import { isVisible } from '@ckeditor/ckeditor5-utils';
  *
  * Check out the {@glink framework/deep-dive/ui/focus-tracking "Deep dive into focus tracking"} guide to learn more.
  */
-export default class FocusCycler {
+export default class FocusCycler extends EmitterMixin() {
     /**
      * Creates an instance of the focus cycler utility.
      *
      * @param options Configuration options.
      */
     constructor(options) {
+        super();
         this.focusables = options.focusables;
         this.focusTracker = options.focusTracker;
         this.keystrokeHandler = options.keystrokeHandler;
@@ -83,6 +84,8 @@ export default class FocusCycler {
                 }
             }
         }
+        this.on('forwardCycle', () => this.focusFirst(), { priority: 'low' });
+        this.on('backwardCycle', () => this.focusLast(), { priority: 'low' });
     }
     /**
      * Returns the first focusable view in {@link #focusables}.
@@ -145,7 +148,7 @@ export default class FocusCycler {
      * **Note**: Hidden views (e.g. with `display: none`) are ignored.
      */
     focusFirst() {
-        this._focus(this.first);
+        this._focus(this.first, 1);
     }
     /**
      * Focuses the {@link #last} item in {@link #focusables}.
@@ -153,7 +156,7 @@ export default class FocusCycler {
      * **Note**: Hidden views (e.g. with `display: none`) are ignored.
      */
     focusLast() {
-        this._focus(this.last);
+        this._focus(this.last, -1);
     }
     /**
      * Focuses the {@link #next} item in {@link #focusables}.
@@ -161,7 +164,16 @@ export default class FocusCycler {
      * **Note**: Hidden views (e.g. with `display: none`) are ignored.
      */
     focusNext() {
-        this._focus(this.next);
+        const next = this.next;
+        if (next && this.focusables.getIndex(next) === this.current) {
+            return;
+        }
+        if (next === this.first) {
+            this.fire('forwardCycle');
+        }
+        else {
+            this._focus(next, 1);
+        }
     }
     /**
      * Focuses the {@link #previous} item in {@link #focusables}.
@@ -169,14 +181,27 @@ export default class FocusCycler {
      * **Note**: Hidden views (e.g. with `display: none`) are ignored.
      */
     focusPrevious() {
-        this._focus(this.previous);
+        const previous = this.previous;
+        if (previous && this.focusables.getIndex(previous) === this.current) {
+            return;
+        }
+        if (previous === this.last) {
+            this.fire('backwardCycle');
+        }
+        else {
+            this._focus(previous, -1);
+        }
     }
     /**
      * Focuses the given view if it exists.
+     *
+     * @param view The view to be focused
+     * @param direction The direction of the focus if the view has focusable children.
+     * @returns
      */
-    _focus(view) {
+    _focus(view, direction) {
         if (view) {
-            view.focus();
+            view.focus(direction);
         }
     }
     /**
@@ -216,5 +241,5 @@ export default class FocusCycler {
  * @param view A view to be checked.
  */
 function isFocusable(view) {
-    return !!(view.focus && isVisible(view.element));
+    return !!('focus' in view && isVisible(view.element));
 }

package/src/formheader/formheaderview.d.ts

@@ -7,6 +7,7 @@
  */
 import View from '../view';
 import type ViewCollection from '../viewcollection';
+import IconView from '../icon/iconview';
 import type { Locale } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/formheader/formheader.css';
 /**
@@ -39,6 +40,10 @@ export default class FormHeaderView extends View {
      * @observable
      */
     class: string | null;
+    /**
+     * The icon view instance. Defined only if icon was passed in the constructor's options.
+     */
+    readonly iconView?: IconView;
     /**
      * Creates an instance of the form header class.
      *
@@ -49,5 +54,6 @@ export default class FormHeaderView extends View {
     constructor(locale: Locale | undefined, options?: {
         label?: string | null;
         class?: string | null;
+        icon?: string | null;
     });
 }

package/src/formheader/formheaderview.js

@@ -6,6 +6,7 @@
  * @module ui/formheader/formheaderview
  */
 import View from '../view';
+import IconView from '../icon/iconview';
 import '../../theme/components/formheader/formheader.css';
 /**
  * The class component representing a form header view. It should be used in more advanced forms to
@@ -45,6 +46,11 @@ export default class FormHeaderView extends View {
             },
             children: this.children
         });
+        if (options.icon) {
+            this.iconView = new IconView();
+            this.iconView.content = options.icon;
+            this.children.add(this.iconView);
+        }
         const label = new View(locale);
         label.setTemplate({
             tag: 'h2',

package/src/highlightedtext/highlightedtextview.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/highlightedtext/highlightedtextview
+ */
+import View from '../view';
+import '../../theme/components/highlightedtext/highlightedtext.css';
+/**
+ * A class representing a view that displays a text which subset can be highlighted using the
+ * {@link #highlightText} method.
+ */
+export default class HighlightedTextView extends View {
+    /**
+     * The text that can be highlighted using the {@link #highlightText} method.
+     *
+     * **Note:** When this property changes, the previous highlighting is removed.
+     *
+     * @observable
+     */
+    text: string | undefined;
+    /**
+     * @inheritDoc
+     */
+    constructor();
+    /**
+     * Highlights view's {@link #text} according to the specified `RegExp`. If the passed RegExp is `null`, the
+     * highlighting is removed
+     *
+     * @param regExp
+     */
+    highlightText(regExp: RegExp | null): void;
+    /**
+     * Updates element's `innerHTML` with the passed content.
+     */
+    private _updateInnerHTML;
+}