@ckeditor/ckeditor5-ui 39.0.1 → 40.0.0

package/src/formheader/formheaderview.js

@@ -1,63 +1,69 @@
-/**
- * @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/formheader/formheaderview
- */
-import View from '../view';
-import '../../theme/components/formheader/formheader.css';
-/**
- * The class component representing a form header view. It should be used in more advanced forms to
- * describe the main purpose of the form.
- *
- * By default the component contains a bolded label view that has to be set. The label is usually a short (at most 3-word) string.
- * The component can also be extended by any other elements, like: icons, dropdowns, etc.
- *
- * It is used i.a.
- * by {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView}
- * and {@link module:special-characters/ui/specialcharactersnavigationview~SpecialCharactersNavigationView}.
- *
- * The latter is an example, where the component has been extended by {@link module:ui/dropdown/dropdownview~DropdownView} view.
- */
-export default class FormHeaderView extends View {
-    /**
-     * Creates an instance of the form header class.
-     *
-     * @param locale The locale instance.
-     * @param options.label A label.
-     * @param options.class An additional class.
-     */
-    constructor(locale, options = {}) {
-        super(locale);
-        const bind = this.bindTemplate;
-        this.set('label', options.label || '');
-        this.set('class', options.class || null);
-        this.children = this.createCollection();
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-form__header',
-                    bind.to('class')
-                ]
-            },
-            children: this.children
-        });
-        const label = new View(locale);
-        label.setTemplate({
-            tag: 'h2',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-form__header__label'
-                ]
-            },
-            children: [
-                { text: bind.to('label') }
-            ]
-        });
-        this.children.add(label);
-    }
-}
+/**
+ * @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/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
+ * describe the main purpose of the form.
+ *
+ * By default the component contains a bolded label view that has to be set. The label is usually a short (at most 3-word) string.
+ * The component can also be extended by any other elements, like: icons, dropdowns, etc.
+ *
+ * It is used i.a.
+ * by {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView}
+ * and {@link module:special-characters/ui/specialcharactersnavigationview~SpecialCharactersNavigationView}.
+ *
+ * The latter is an example, where the component has been extended by {@link module:ui/dropdown/dropdownview~DropdownView} view.
+ */
+export default class FormHeaderView extends View {
+    /**
+     * Creates an instance of the form header class.
+     *
+     * @param locale The locale instance.
+     * @param options.label A label.
+     * @param options.class An additional class.
+     */
+    constructor(locale, options = {}) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this.set('label', options.label || '');
+        this.set('class', options.class || null);
+        this.children = this.createCollection();
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-form__header',
+                    bind.to('class')
+                ]
+            },
+            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',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-form__header__label'
+                ]
+            },
+            children: [
+                { text: bind.to('label') }
+            ]
+        });
+        this.children.add(label);
+    }
+}

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;
+}

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

@@ -1,78 +1,85 @@
-/**
- * @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/icon/iconview
- */
-import View from '../view';
-import '../../theme/components/icon/icon.css';
-/**
- * The icon view class.
- */
-export default class IconView extends View {
-    /**
-     * The SVG source of the icon.
-     *
-     * @observable
-     */
-    content: string | undefined;
-    /**
-     * This attribute specifies the boundaries to which the
-     * icon content should stretch.
-     *
-     * @observable
-     * @default '0 0 20 20'
-     */
-    viewBox: string;
-    /**
-     * The fill color of the child `path.ck-icon__fill`.
-     *
-     * @observable
-     * @default ''
-     */
-    fillColor: string;
-    /**
-     * When set true (default), all parts of the icon inherit the fill color from the CSS `color` property of the
-     * icon's DOM parent.
-     *
-     * This effectively makes the icon monochromatic and allows it to change its fill color dynamically, for instance,
-     * when a {@link module:ui/button/buttonview~ButtonView} displays an icon and it switches between different states
-     * (pushed, hovered, etc.) the icon will follow along.
-     *
-     * **Note**: For the monochromatic icon to render properly, it must be made up of shapes that can be filled
-     * with color instead of, for instance, paths with strokes. Be sure to use the *outline stroke* tool
-     * (the name could be different in your vector graphics editor) before exporting your icon. Also, remove any
-     * excess `fill="..."` attributes that could break the color inheritance.
-     *
-     * **Note**: If you want to preserve the original look of your icon and disable dynamic color inheritance,
-     * set this flag to `false`.
-     *
-     * @observable
-     * @default true
-     */
-    isColorInherited: 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.
-     *
-     * See the [specification](https://www.w3.org/TR/SVG/styling.html#TermPresentationAttribute) to learn more.
-     */
-    private static presentationalAttributeNames;
-    /**
-     * @inheritDoc
-     */
-    constructor();
-    /**
-     * @inheritDoc
-     */
-    render(): void;
-    /**
-     * Updates the {@link #element} with the value of {@link #content}.
-     */
-    private _updateXMLContent;
-    /**
-     * Fills all child `path.ck-icon__fill` with the `#fillColor`.
-     */
-    private _colorFillPaths;
-}
+/**
+ * @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/icon/iconview
+ */
+import View from '../view';
+import '../../theme/components/icon/icon.css';
+/**
+ * The icon view class.
+ */
+export default class IconView extends View {
+    /**
+     * The SVG source of the icon.
+     *
+     * @observable
+     */
+    content: string | undefined;
+    /**
+     * This attribute specifies the boundaries to which the
+     * icon content should stretch.
+     *
+     * @observable
+     * @default '0 0 20 20'
+     */
+    viewBox: string;
+    /**
+     * The fill color of the child `path.ck-icon__fill`.
+     *
+     * @observable
+     * @default ''
+     */
+    fillColor: string;
+    /**
+     * When set true (default), all parts of the icon inherit the fill color from the CSS `color` property of the
+     * icon's DOM parent.
+     *
+     * This effectively makes the icon monochromatic and allows it to change its fill color dynamically, for instance,
+     * when a {@link module:ui/button/buttonview~ButtonView} displays an icon and it switches between different states
+     * (pushed, hovered, etc.) the icon will follow along.
+     *
+     * **Note**: For the monochromatic icon to render properly, it must be made up of shapes that can be filled
+     * with color instead of, for instance, paths with strokes. Be sure to use the *outline stroke* tool
+     * (the name could be different in your vector graphics editor) before exporting your icon. Also, remove any
+     * excess `fill="..."` attributes that could break the color inheritance.
+     *
+     * **Note**: If you want to preserve the original look of your icon and disable dynamic color inheritance,
+     * set this flag to `false`.
+     *
+     * @observable
+     * @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.
+     *
+     * See the [specification](https://www.w3.org/TR/SVG/styling.html#TermPresentationAttribute) to learn more.
+     */
+    private static presentationalAttributeNames;
+    /**
+     * @inheritDoc
+     */
+    constructor();
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * Updates the {@link #element} with the value of {@link #content}.
+     */
+    private _updateXMLContent;
+    /**
+     * Fills all child `path.ck-icon__fill` with the `#fillColor`.
+     */
+    private _colorFillPaths;
+}