@ckeditor/ckeditor5-ui 39.0.2 → 40.1.0

package/src/highlightedtext/highlightedtextview.js

@@ -0,0 +1,102 @@
+/**
+ * @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 { escape } from 'lodash-es';
+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 {
+    /**
+     * @inheritDoc
+     */
+    constructor() {
+        super();
+        this.set('text', undefined);
+        this.setTemplate({
+            tag: 'span',
+            attributes: {
+                class: ['ck', 'ck-highlighted-text']
+            }
+        });
+        this.on('render', () => {
+            // Classic setTemplate binding for #text will not work because highlightText() replaces the
+            // pre-rendered DOM text node new a new one (and <mark> elements).
+            this.on('change:text', () => {
+                this._updateInnerHTML(this.text);
+            });
+            this._updateInnerHTML(this.text);
+        });
+    }
+    /**
+     * Highlights view's {@link #text} according to the specified `RegExp`. If the passed RegExp is `null`, the
+     * highlighting is removed
+     *
+     * @param regExp
+     */
+    highlightText(regExp) {
+        this._updateInnerHTML(markText(this.text || '', regExp));
+    }
+    /**
+     * Updates element's `innerHTML` with the passed content.
+     */
+    _updateInnerHTML(newInnerHTML) {
+        this.element.innerHTML = newInnerHTML || '';
+    }
+}
+/**
+ * Replaces `regExp` occurrences with `<mark>` tags in a text.
+ *
+ * @param text A text to get marked.
+ * @param regExp An optional `RegExp`. If not passed, this is a pass-through function.
+ * @returns A text with `RegExp` occurrences marked by `<mark>`.
+ */
+function markText(text, regExp) {
+    if (!regExp) {
+        return escape(text);
+    }
+    const textParts = [];
+    let lastMatchEnd = 0;
+    let matchInfo = regExp.exec(text);
+    // Iterate over all matches and create an array of text parts. The idea is to mark which parts are query matches
+    // so that later on they can be highlighted.
+    while (matchInfo !== null) {
+        const curMatchStart = matchInfo.index;
+        // Detect if there was something between last match and this one.
+        if (curMatchStart !== lastMatchEnd) {
+            textParts.push({
+                text: text.substring(lastMatchEnd, curMatchStart),
+                isMatch: false
+            });
+        }
+        textParts.push({
+            text: matchInfo[0],
+            isMatch: true
+        });
+        lastMatchEnd = regExp.lastIndex;
+        matchInfo = regExp.exec(text);
+    }
+    // Your match might not be the last part of a string. Be sure to add any plain text following the last match.
+    if (lastMatchEnd !== text.length) {
+        textParts.push({
+            text: text.substring(lastMatchEnd),
+            isMatch: false
+        });
+    }
+    const outputHtml = textParts
+        // The entire text should be escaped.
+        .map(part => {
+        part.text = escape(part.text);
+        return part;
+    })
+        // Only matched text should be wrapped with HTML mark element.
+        .map(part => part.isMatch ? `<mark>${part.text}</mark>` : part.text)
+        .join('');
+    return outputHtml;
+}

package/src/icon/iconview.d.ts

@@ -52,6 +52,13 @@ export default class IconView extends View {
      * @default true
      */
     isColorInherited: boolean;
+    /**
+     * Controls whether the icon is visible.
+     *
+     * @observable
+     * @default true
+     */
+    isVisible: boolean;
     /**
      * A list of presentational attributes that can be set on the `<svg>` element and should be preserved
      * when the icon {@link module:ui/icon/iconview~IconView#content content} is loaded.

package/src/icon/iconview.js

@@ -22,6 +22,7 @@ export default class IconView extends View {
         this.set('viewBox', '0 0 20 20');
         this.set('fillColor', '');
         this.set('isColorInherited', true);
+        this.set('isVisible', true);
         this.setTemplate({
             tag: 'svg',
             ns: 'http://www.w3.org/2000/svg',
@@ -29,6 +30,7 @@ export default class IconView extends View {
                 class: [
                     'ck',
                     'ck-icon',
+                    bind.if('isVisible', 'ck-hidden', value => !value),
                     // Exclude icon internals from the CSS reset to allow rich (non-monochromatic) icons
                     // (https://github.com/ckeditor/ckeditor5/issues/12599).
                     'ck-reset_all-excluded',

package/src/index.d.ts

@@ -12,7 +12,9 @@ export { default as submitHandler } from './bindings/submithandler';
 export { default as addKeyboardHandlingForGrid } from './bindings/addkeyboardhandlingforgrid';
 export { default as BodyCollection } from './editorui/bodycollection';
 export { type ButtonExecuteEvent } from './button/button';
+export { type default as ButtonLabel } from './button/buttonlabel';
 export { default as ButtonView } from './button/buttonview';
+export { default as ButtonLabelView } from './button/buttonlabelview';
 export { default as SwitchButtonView } from './button/switchbuttonview';
 export * from './colorgrid/utils';
 export { default as ColorGridView, type ColorDefinition } from './colorgrid/colorgridview';
@@ -31,15 +33,17 @@ export { default as EditorUIView } from './editorui/editoruiview';
 export { default as BoxedEditorUIView } from './editorui/boxed/boxededitoruiview';
 export { default as InlineEditableUIView } from './editableui/inline/inlineeditableuiview';
 export { default as FormHeaderView } from './formheader/formheaderview';
-export { default as FocusCycler, type FocusableView } from './focuscycler';
+export { default as FocusCycler, type FocusableView, type FocusCyclerForwardCycleEvent, type FocusCyclerBackwardCycleEvent } from './focuscycler';
 export { default as IconView } from './icon/iconview';
 export { default as InputView } from './input/inputview';
 export { default as InputTextView } from './inputtext/inputtextview';
 export { default as InputNumberView } from './inputnumber/inputnumberview';
+export { default as TextareaView, type TextareaViewUpdateEvent } from './textarea/textareaview';
 export { default as IframeView } from './iframe/iframeview';
 export { default as LabelView } from './label/labelview';
-export { default as LabeledFieldView } from './labeledfield/labeledfieldview';
+export { type LabeledFieldViewCreator, default as LabeledFieldView } from './labeledfield/labeledfieldview';
 export * from './labeledfield/utils';
+export { default as ListItemGroupView } from './list/listitemgroupview';
 export { default as ListItemView } from './list/listitemview';
 export { default as ListView } from './list/listview';
 export { default as Notification } from './notification/notification';
@@ -47,8 +51,14 @@ export { default as Model } from './model';
 export { default as BalloonPanelView } from './panel/balloon/balloonpanelview';
 export { default as ContextualBalloon } from './panel/balloon/contextualballoon';
 export { default as StickyPanelView } from './panel/sticky/stickypanelview';
+export { default as AutocompleteView, type AutocompleteViewConfig, type AutocompleteResultsView } from './autocomplete/autocompleteview';
+export { default as SearchTextView, type SearchTextViewSearchEvent, type SearchTextViewConfig } from './search/text/searchtextview';
+export { default as SearchInfoView } from './search/searchinfoview';
+export { default as FilteredView, type FilteredViewExecuteEvent } from './search/filteredview';
+export { default as HighlightedTextView } from './highlightedtext/highlightedtextview';
 export { default as TooltipManager } from './tooltipmanager';
 export { default as Template, type TemplateDefinition } from './template';
+export { default as SpinnerView } from './spinner/spinnerview';
 export { default as ToolbarView } from './toolbar/toolbarview';
 export { default as ToolbarLineBreakView } from './toolbar/toolbarlinebreakview';
 export { default as ToolbarSeparatorView } from './toolbar/toolbarseparatorview';

package/src/index.js

@@ -12,6 +12,7 @@ export { default as submitHandler } from './bindings/submithandler';
 export { default as addKeyboardHandlingForGrid } from './bindings/addkeyboardhandlingforgrid';
 export { default as BodyCollection } from './editorui/bodycollection';
 export { default as ButtonView } from './button/buttonview';
+export { default as ButtonLabelView } from './button/buttonlabelview';
 export { default as SwitchButtonView } from './button/switchbuttonview';
 export * from './colorgrid/utils';
 export { default as ColorGridView } from './colorgrid/colorgridview';
@@ -34,10 +35,12 @@ export { default as IconView } from './icon/iconview';
 export { default as InputView } from './input/inputview';
 export { default as InputTextView } from './inputtext/inputtextview';
 export { default as InputNumberView } from './inputnumber/inputnumberview';
+export { default as TextareaView } from './textarea/textareaview';
 export { default as IframeView } from './iframe/iframeview';
 export { default as LabelView } from './label/labelview';
 export { default as LabeledFieldView } from './labeledfield/labeledfieldview';
 export * from './labeledfield/utils';
+export { default as ListItemGroupView } from './list/listitemgroupview';
 export { default as ListItemView } from './list/listitemview';
 export { default as ListView } from './list/listview';
 export { default as Notification } from './notification/notification';
@@ -45,8 +48,13 @@ export { default as Model } from './model';
 export { default as BalloonPanelView } from './panel/balloon/balloonpanelview';
 export { default as ContextualBalloon } from './panel/balloon/contextualballoon';
 export { default as StickyPanelView } from './panel/sticky/stickypanelview';
+export { default as AutocompleteView } from './autocomplete/autocompleteview';
+export { default as SearchTextView } from './search/text/searchtextview';
+export { default as SearchInfoView } from './search/searchinfoview';
+export { default as HighlightedTextView } from './highlightedtext/highlightedtextview';
 export { default as TooltipManager } from './tooltipmanager';
 export { default as Template } from './template';
+export { default as SpinnerView } from './spinner/spinnerview';
 export { default as ToolbarView } from './toolbar/toolbarview';
 export { default as ToolbarLineBreakView } from './toolbar/toolbarlinebreakview';
 export { default as ToolbarSeparatorView } from './toolbar/toolbarseparatorview';

package/src/input/inputbase.d.ts

@@ -0,0 +1,107 @@
+/**
+ * @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/input/inputbase
+ */
+import View from '../view';
+import { FocusTracker, type Locale } from '@ckeditor/ckeditor5-utils';
+/**
+ * The base input view class.
+ */
+export default abstract class InputBase<TElement extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement> extends View<TElement> {
+    /**
+     * Stores information about the editor UI focus and propagates it so various plugins and components
+     * are unified as a focus group.
+     */
+    readonly focusTracker: FocusTracker;
+    /**
+     * The value of the input.
+     *
+     * @observable
+     */
+    value: string | undefined;
+    /**
+     * The `id` attribute of the input (i.e. to pair with a `<label>` element).
+     *
+     * @observable
+     */
+    id: string | undefined;
+    /**
+     * The `placeholder` attribute of the input.
+     *
+     * @observable
+     */
+    placeholder: string | undefined;
+    /**
+     * Controls whether the input view is in read-only mode.
+     *
+     * @observable
+     */
+    isReadOnly: boolean;
+    /**
+     * Set to `true` when the field has some error. Usually controlled via
+     * {@link module:ui/labeledinput/labeledinputview~LabeledInputView#errorText}.
+     *
+     * @observable
+     */
+    hasError: boolean;
+    /**
+     * The `id` of the element describing this field, e.g. when it has
+     * some error; it helps screen readers read the error text.
+     *
+     * @observable
+     */
+    ariaDescribedById: string | undefined;
+    /**
+     * An observable flag set to `true` when the input is currently focused by the user.
+     * Set to `false` otherwise.
+     *
+     * @readonly
+     * @observable
+     * @default false
+     */
+    isFocused: boolean;
+    /**
+     * An observable flag set to `true` when the input contains no text, i.e.
+     * when {@link #value} is `''`, `null`, or `false`.
+     *
+     * @readonly
+     * @observable
+     * @default true
+     */
+    isEmpty: boolean;
+    /**
+     * @inheritDoc
+     */
+    constructor(locale?: Locale);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Moves the focus to the input and selects the value.
+     */
+    select(): void;
+    /**
+     * Focuses the input.
+     */
+    focus(): void;
+    /**
+     * Resets the value of the input
+     */
+    reset(): void;
+    /**
+     * Updates the {@link #isEmpty} property value on demand.
+     */
+    protected _updateIsEmpty(): void;
+    /**
+     * Sets the `value` property of the {@link #element DOM element} on demand.
+     */
+    private _setDomElementValue;
+}

package/src/input/inputbase.js

@@ -0,0 +1,110 @@
+/**
+ * @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/input/inputbase
+ */
+import View from '../view';
+import { FocusTracker } from '@ckeditor/ckeditor5-utils';
+/**
+ * The base input view class.
+ */
+export default class InputBase extends View {
+    /**
+     * @inheritDoc
+     */
+    constructor(locale) {
+        super(locale);
+        this.set('value', undefined);
+        this.set('id', undefined);
+        this.set('placeholder', undefined);
+        this.set('isReadOnly', false);
+        this.set('hasError', false);
+        this.set('ariaDescribedById', undefined);
+        this.focusTracker = new FocusTracker();
+        this.bind('isFocused').to(this.focusTracker);
+        this.set('isEmpty', true);
+        const bind = this.bindTemplate;
+        this.setTemplate({
+            tag: 'input',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-input',
+                    bind.if('isFocused', 'ck-input_focused'),
+                    bind.if('isEmpty', 'ck-input-text_empty'),
+                    bind.if('hasError', 'ck-error')
+                ],
+                id: bind.to('id'),
+                placeholder: bind.to('placeholder'),
+                readonly: bind.to('isReadOnly'),
+                'aria-invalid': bind.if('hasError', true),
+                'aria-describedby': bind.to('ariaDescribedById')
+            },
+            on: {
+                input: bind.to((...args) => {
+                    this.fire('input', ...args);
+                    this._updateIsEmpty();
+                }),
+                change: bind.to(this._updateIsEmpty.bind(this))
+            }
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        this.focusTracker.add(this.element);
+        this._setDomElementValue(this.value);
+        this._updateIsEmpty();
+        // Bind `this.value` to the DOM element's value.
+        // We cannot use `value` DOM attribute because removing it on Edge does not clear the DOM element's value property.
+        this.on('change:value', (evt, name, value) => {
+            this._setDomElementValue(value);
+            this._updateIsEmpty();
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        super.destroy();
+        this.focusTracker.destroy();
+    }
+    /**
+     * Moves the focus to the input and selects the value.
+     */
+    select() {
+        this.element.select();
+    }
+    /**
+     * Focuses the input.
+     */
+    focus() {
+        this.element.focus();
+    }
+    /**
+     * Resets the value of the input
+     */
+    reset() {
+        this.value = this.element.value = '';
+        this._updateIsEmpty();
+    }
+    /**
+     * Updates the {@link #isEmpty} property value on demand.
+     */
+    _updateIsEmpty() {
+        this.isEmpty = isInputElementEmpty(this.element);
+    }
+    /**
+     * Sets the `value` property of the {@link #element DOM element} on demand.
+     */
+    _setDomElementValue(value) {
+        this.element.value = (!value && value !== 0) ? '' : value;
+    }
+}
+function isInputElementEmpty(domElement) {
+    return !domElement.value;
+}

package/src/input/inputview.d.ts

@@ -5,74 +5,13 @@
 /**
  * @module ui/input/inputview
  */
-import View from '../view';
-import { FocusTracker, type Locale } from '@ckeditor/ckeditor5-utils';
+import { type Locale } from '@ckeditor/ckeditor5-utils';
+import InputBase from './inputbase';
 import '../../theme/components/input/input.css';
 /**
- * The base input view class.
+ * The input view class.
  */
-export default class InputView extends View<HTMLInputElement> {
-    /**
-     * Stores information about the editor UI focus and propagates it so various plugins and components
-     * are unified as a focus group.
-     */
-    readonly focusTracker: FocusTracker;
-    /**
-     * The value of the input.
-     *
-     * @observable
-     */
-    value: string | undefined;
-    /**
-     * The `id` attribute of the input (i.e. to pair with a `<label>` element).
-     *
-     * @observable
-     */
-    id: string | undefined;
-    /**
-     * The `placeholder` attribute of the input.
-     *
-     * @observable
-     */
-    placeholder: string | undefined;
-    /**
-     * Controls whether the input view is in read-only mode.
-     *
-     * @observable
-     */
-    isReadOnly: boolean;
-    /**
-     * Set to `true` when the field has some error. Usually controlled via
-     * {@link module:ui/labeledinput/labeledinputview~LabeledInputView#errorText}.
-     *
-     * @observable
-     */
-    hasError: boolean;
-    /**
-     * The `id` of the element describing this field, e.g. when it has
-     * some error; it helps screen readers read the error text.
-     *
-     * @observable
-     */
-    ariaDescribedById: string | undefined;
-    /**
-     * An observable flag set to `true` when the input is currently focused by the user.
-     * Set to `false` otherwise.
-     *
-     * @readonly
-     * @observable
-     * @default false
-     */
-    isFocused: boolean;
-    /**
-     * An observable flag set to `true` when the input contains no text, i.e.
-     * when {@link #value} is `''`, `null`, or `false`.
-     *
-     * @readonly
-     * @observable
-     * @default true
-     */
-    isEmpty: boolean;
+export default class InputView extends InputBase {
     /**
      * Corresponds to the `inputmode` DOM attribute. Can be `text`, `numeric`, `decimal`, etc.
      *
@@ -84,30 +23,6 @@ export default class InputView extends View<HTMLInputElement> {
      * @inheritDoc
      */
     constructor(locale?: Locale);
-    /**
-     * @inheritDoc
-     */
-    render(): void;
-    /**
-     * @inheritDoc
-     */
-    destroy(): void;
-    /**
-     * Moves the focus to the input and selects the value.
-     */
-    select(): void;
-    /**
-     * Focuses the input.
-     */
-    focus(): void;
-    /**
-     * Updates the {@link #isEmpty} property value on demand.
-     */
-    private _updateIsEmpty;
-    /**
-     * Sets the `value` property of the {@link #element DOM element} on demand.
-     */
-    private _setDomElementValue;
 }
 /**
  * Fired when the user types in the input. Corresponds to the native

package/src/input/inputview.js

@@ -2,105 +2,23 @@
  * @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/input/inputview
- */
-import View from '../view';
-import { FocusTracker } from '@ckeditor/ckeditor5-utils';
+import InputBase from './inputbase';
 import '../../theme/components/input/input.css';
 /**
- * The base input view class.
+ * The input view class.
  */
-export default class InputView extends View {
+export default class InputView extends InputBase {
     /**
      * @inheritDoc
      */
     constructor(locale) {
         super(locale);
-        this.set('value', undefined);
-        this.set('id', undefined);
-        this.set('placeholder', undefined);
-        this.set('isReadOnly', false);
-        this.set('hasError', false);
-        this.set('ariaDescribedById', undefined);
-        this.focusTracker = new FocusTracker();
-        this.bind('isFocused').to(this.focusTracker);
-        this.set('isEmpty', true);
         this.set('inputMode', 'text');
         const bind = this.bindTemplate;
-        this.setTemplate({
-            tag: 'input',
+        this.extendTemplate({
             attributes: {
-                class: [
-                    'ck',
-                    'ck-input',
-                    bind.if('isFocused', 'ck-input_focused'),
-                    bind.if('isEmpty', 'ck-input-text_empty'),
-                    bind.if('hasError', 'ck-error')
-                ],
-                id: bind.to('id'),
-                placeholder: bind.to('placeholder'),
-                readonly: bind.to('isReadOnly'),
-                inputmode: bind.to('inputMode'),
-                'aria-invalid': bind.if('hasError', true),
-                'aria-describedby': bind.to('ariaDescribedById')
-            },
-            on: {
-                input: bind.to((...args) => {
-                    this.fire('input', ...args);
-                    this._updateIsEmpty();
-                }),
-                change: bind.to(this._updateIsEmpty.bind(this))
+                inputmode: bind.to('inputMode')
             }
         });
     }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        this.focusTracker.add(this.element);
-        this._setDomElementValue(this.value);
-        this._updateIsEmpty();
-        // Bind `this.value` to the DOM element's value.
-        // We cannot use `value` DOM attribute because removing it on Edge does not clear the DOM element's value property.
-        this.on('change:value', (evt, name, value) => {
-            this._setDomElementValue(value);
-            this._updateIsEmpty();
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    destroy() {
-        super.destroy();
-        this.focusTracker.destroy();
-    }
-    /**
-     * Moves the focus to the input and selects the value.
-     */
-    select() {
-        this.element.select();
-    }
-    /**
-     * Focuses the input.
-     */
-    focus() {
-        this.element.focus();
-    }
-    /**
-     * Updates the {@link #isEmpty} property value on demand.
-     */
-    _updateIsEmpty() {
-        this.isEmpty = isInputElementEmpty(this.element);
-    }
-    /**
-     * Sets the `value` property of the {@link #element DOM element} on demand.
-     */
-    _setDomElementValue(value) {
-        this.element.value = (!value && value !== 0) ? '' : value;
-    }
-}
-function isInputElementEmpty(domElement) {
-    return !domElement.value;
 }

package/src/labeledfield/labeledfieldview.d.ts

@@ -160,7 +160,7 @@ export default class LabeledFieldView<TFieldView extends FocusableView = Focusab
      * * an UID string that connects the {@link #labelView label} and the labeled field view in DOM,
      * * an UID string that connects the {@link #statusView status} and the labeled field view in DOM.
      */
-    constructor(locale: Locale | undefined, viewCreator: (labeledFieldView: LabeledFieldView, viewUid: string, statusUid: string) => TFieldView);
+    constructor(locale: Locale | undefined, viewCreator: LabeledFieldViewCreator<TFieldView>);
     /**
      * Creates label view class instance and bind with view.
      *
@@ -178,5 +178,10 @@ export default class LabeledFieldView<TFieldView extends FocusableView = Focusab
     /**
      * Focuses the {@link #fieldView}.
      */
-    focus(): void;
+    focus(direction?: 1 | -1): void;
 }
+/**
+ * A creator function that returns a focusable view to be labeled by a {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView}
+ * instance.
+ */
+export type LabeledFieldViewCreator<TFieldView extends FocusableView> = (labeledFieldView: LabeledFieldView, viewUid: string, statusUid: string) => TFieldView;

package/src/labeledfield/labeledfieldview.js

@@ -151,7 +151,7 @@ export default class LabeledFieldView extends View {
     /**
      * Focuses the {@link #fieldView}.
      */
-    focus() {
-        this.fieldView.focus();
+    focus(direction) {
+        this.fieldView.focus(direction);
     }
 }