@ckeditor/ckeditor5-ui 39.0.2 → 40.1.0

package/src/textarea/textareaview.js

@@ -0,0 +1,142 @@
+/**
+ * @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/textarea/textareaview
+ */
+import { Rect, toUnit, getBorderWidths, global, CKEditorError, isVisible } from '@ckeditor/ckeditor5-utils';
+import InputBase from '../input/inputbase';
+import '../../theme/components/input/input.css';
+import '../../theme/components/textarea/textarea.css';
+/**
+ * The textarea view class.
+ *
+ * ```ts
+ * const textareaView = new TextareaView();
+ *
+ * textareaView.minRows = 2;
+ * textareaView.maxRows = 10;
+ *
+ * textareaView.render();
+ *
+ * document.body.append( textareaView.element );
+ * ```
+ */
+export default class TextareaView extends InputBase {
+    /**
+     * @inheritDoc
+     */
+    constructor(locale) {
+        super(locale);
+        const toPx = toUnit('px');
+        this.set('minRows', 2);
+        this.set('maxRows', 5);
+        this.set('_height', null);
+        this.set('resize', 'none');
+        this.on('change:minRows', this._validateMinMaxRows.bind(this));
+        this.on('change:maxRows', this._validateMinMaxRows.bind(this));
+        const bind = this.bindTemplate;
+        this.template.tag = 'textarea';
+        this.extendTemplate({
+            attributes: {
+                class: ['ck-textarea'],
+                style: {
+                    height: bind.to('_height', height => height ? toPx(height) : null),
+                    resize: bind.to('resize')
+                },
+                rows: bind.to('minRows')
+            }
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        this.on('input', () => {
+            this._updateAutoGrowHeight(true);
+            this.fire('update');
+        });
+        this.on('change:value', () => {
+            // The content needs to be updated by the browser after the value is changed. It takes a few ms.
+            global.window.requestAnimationFrame(() => {
+                if (isVisible(this.element)) {
+                    this._updateAutoGrowHeight();
+                    this.fire('update');
+                }
+            });
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    reset() {
+        super.reset();
+        this._updateAutoGrowHeight();
+        this.fire('update');
+    }
+    /**
+     * Updates the {@link #_height} of the view depending on {@link #minRows}, {@link #maxRows}, and the current content size.
+     *
+     * **Note**: This method overrides manual resize done by the user using a handle. It's a known bug.
+     */
+    _updateAutoGrowHeight(shouldScroll) {
+        const viewElement = this.element;
+        const singleLineContentClone = getTextareaElementClone(viewElement, '1');
+        const fullTextValueClone = getTextareaElementClone(viewElement, viewElement.value);
+        const singleLineContentStyles = singleLineContentClone.ownerDocument.defaultView.getComputedStyle(singleLineContentClone);
+        const verticalPaddings = parseFloat(singleLineContentStyles.paddingTop) + parseFloat(singleLineContentStyles.paddingBottom);
+        const borders = getBorderWidths(singleLineContentClone);
+        const lineHeight = parseFloat(singleLineContentStyles.lineHeight);
+        const verticalBorder = borders.top + borders.bottom;
+        const singleLineAreaDefaultHeight = new Rect(singleLineContentClone).height;
+        const numberOfLines = Math.round((fullTextValueClone.scrollHeight - verticalPaddings) / lineHeight);
+        const maxHeight = this.maxRows * lineHeight + verticalPaddings + verticalBorder;
+        // There's a --ck-ui-component-min-height CSS custom property that enforces min height of the component.
+        // This min-height is relevant only when there's one line of text. Other than that, we can rely on line-height.
+        const minHeight = numberOfLines === 1 ? singleLineAreaDefaultHeight : this.minRows * lineHeight + verticalPaddings + verticalBorder;
+        // The size of textarea is controlled by height style instead of rows attribute because event though it is
+        // a more complex solution, it is immune to the layout textarea has been rendered in (gird, flex).
+        this._height = Math.min(Math.max(Math.max(numberOfLines, this.minRows) * lineHeight + verticalPaddings + verticalBorder, minHeight), maxHeight);
+        if (shouldScroll) {
+            viewElement.scrollTop = viewElement.scrollHeight;
+        }
+        singleLineContentClone.remove();
+        fullTextValueClone.remove();
+    }
+    /**
+     * Validates the {@link #minRows} and {@link #maxRows} properties and warns in the console if the configuration is incorrect.
+     */
+    _validateMinMaxRows() {
+        if (this.minRows > this.maxRows) {
+            /**
+             * The minimum number of rows is greater than the maximum number of rows.
+             *
+             * @error ui-textarea-view-min-rows-greater-than-max-rows
+             * @param textareaView The misconfigured textarea view instance.
+             * @param minRows The value of `minRows` property.
+             * @param maxRows The value of `maxRows` property.
+             */
+            throw new CKEditorError('ui-textarea-view-min-rows-greater-than-max-rows', {
+                textareaView: this,
+                minRows: this.minRows,
+                maxRows: this.maxRows
+            });
+        }
+    }
+}
+function getTextareaElementClone(element, value) {
+    const clone = element.cloneNode();
+    clone.style.position = 'absolute';
+    clone.style.top = '-99999px';
+    clone.style.left = '-99999px';
+    clone.style.height = 'auto';
+    clone.style.overflow = 'hidden';
+    clone.style.width = element.ownerDocument.defaultView.getComputedStyle(element).width;
+    clone.tabIndex = -1;
+    clone.rows = 1;
+    clone.value = value;
+    element.parentNode.insertBefore(clone, element);
+    return clone;
+}

package/src/toolbar/block/blocktoolbar.js

@@ -6,15 +6,14 @@
  * @module ui/toolbar/block/blocktoolbar
  */
 /* global window */
-import { Plugin, icons } from '@ckeditor/ckeditor5-core';
-import { Rect, ResizeObserver, getOptimalPosition, toUnit } from '@ckeditor/ckeditor5-utils';
+import { Plugin } from '@ckeditor/ckeditor5-core';
+import { Rect, ResizeObserver, toUnit } from '@ckeditor/ckeditor5-utils';
 import BlockButtonView from './blockbuttonview';
 import BalloonPanelView from '../../panel/balloon/balloonpanelview';
-import ToolbarView from '../toolbarview';
+import ToolbarView, { NESTED_TOOLBAR_ICONS } from '../toolbarview';
 import clickOutsideHandler from '../../bindings/clickoutsidehandler';
 import normalizeToolbarConfig from '../normalizetoolbarconfig';
 const toPx = toUnit('px');
-const { pilcrow } = icons;
 /**
  * The block toolbar plugin.
  *
@@ -101,6 +100,16 @@ export default class BlockToolbar extends Plugin {
      */
     init() {
         const editor = this.editor;
+        const t = editor.t;
+        const editBlockText = t('Click to edit block');
+        const dragToMoveText = t('Drag to move');
+        const editBlockLabel = t('Edit block');
+        const isDragDropBlockToolbarPluginLoaded = editor.plugins.has('DragDropBlockToolbar');
+        const label = isDragDropBlockToolbarPluginLoaded ? `${editBlockText}\n${dragToMoveText}` : editBlockLabel;
+        this.buttonView.label = label;
+        if (isDragDropBlockToolbarPluginLoaded) {
+            this.buttonView.element.dataset.ckeTooltipClass = 'ck-tooltip_multi-line';
+        }
         // Hides panel on a direct selection change.
         this.listenTo(editor.model.document.selection, 'change:range', (evt, data) => {
             if (data.directChange) {
@@ -192,9 +201,11 @@ export default class BlockToolbar extends Plugin {
         const editor = this.editor;
         const t = editor.t;
         const buttonView = new BlockButtonView(editor.locale);
+        const iconFromConfig = this._blockToolbarConfig.icon;
+        const icon = NESTED_TOOLBAR_ICONS[iconFromConfig] || iconFromConfig || NESTED_TOOLBAR_ICONS.dragIndicator;
         buttonView.set({
             label: t('Edit block'),
-            icon: pilcrow,
+            icon,
             withText: false
         });
         // Bind the panelView observable properties to the buttonView.
@@ -334,27 +345,20 @@ export default class BlockToolbar extends Plugin {
         // When line height is not an integer then treat it as "normal".
         // MDN says that 'normal' == ~1.2 on desktop browsers.
         const contentLineHeight = parseInt(contentStyles.lineHeight, 10) || parseInt(contentStyles.fontSize, 10) * 1.2;
-        const position = getOptimalPosition({
-            element: this.buttonView.element,
-            target: targetElement,
-            positions: [
-                (contentRect, buttonRect) => {
-                    let left;
-                    if (this.editor.locale.uiLanguageDirection === 'ltr') {
-                        left = editableRect.left - buttonRect.width;
-                    }
-                    else {
-                        left = editableRect.right;
-                    }
-                    return {
-                        top: contentRect.top + contentPaddingTop + (contentLineHeight - buttonRect.height) / 2,
-                        left
-                    };
-                }
-            ]
-        });
-        this.buttonView.top = position.top;
-        this.buttonView.left = position.left;
+        const buttonRect = new Rect(this.buttonView.element);
+        const contentRect = new Rect(targetElement);
+        let positionLeft;
+        if (this.editor.locale.uiLanguageDirection === 'ltr') {
+            positionLeft = editableRect.left - buttonRect.width;
+        }
+        else {
+            positionLeft = editableRect.right;
+        }
+        const positionTop = contentRect.top + contentPaddingTop + (contentLineHeight - buttonRect.height) / 2;
+        buttonRect.moveTo(positionLeft, positionTop);
+        const absoluteButtonRect = buttonRect.toAbsoluteRect();
+        this.buttonView.top = absoluteButtonRect.top;
+        this.buttonView.left = absoluteButtonRect.left;
     }
     /**
      * Creates a resize observer that observes selected editable and resizes the toolbar panel accordingly.

package/src/toolbar/normalizetoolbarconfig.d.ts

@@ -36,4 +36,5 @@ export default function normalizeToolbarConfig(config: ToolbarConfig | undefined
     items: Array<ToolbarConfigItem>;
     removeItems: Array<string>;
     shouldNotGroupWhenFull?: boolean;
+    icon?: string;
 };

package/src/toolbar/normalizetoolbarconfig.js

@@ -38,14 +38,15 @@ export default function normalizeToolbarConfig(config) {
             removeItems: []
         };
     }
-    if (!config) {
-        return {
-            items: [],
-            removeItems: []
-        };
-    }
-    return Object.assign({
+    const predefinedConfigOptions = {
         items: [],
         removeItems: []
-    }, config);
+    };
+    if (!config) {
+        return predefinedConfigOptions;
+    }
+    return {
+        ...predefinedConfigOptions,
+        ...config
+    };
 }

package/src/toolbar/toolbarview.d.ts

@@ -12,6 +12,7 @@ import type DropdownPanelFocusable from '../dropdown/dropdownpanelfocusable';
 import { FocusTracker, KeystrokeHandler, type Locale } from '@ckeditor/ckeditor5-utils';
 import { type ToolbarConfig } from '@ckeditor/ckeditor5-core';
 import '../../theme/components/toolbar/toolbar.css';
+export declare const NESTED_TOOLBAR_ICONS: Record<string, string | undefined>;
 /**
  * The toolbar view class.
  */

package/src/toolbar/toolbarview.js

@@ -17,14 +17,16 @@ import { icons } from '@ckeditor/ckeditor5-core';
 import { isObject } from 'lodash-es';
 import '../../theme/components/toolbar/toolbar.css';
 const { threeVerticalDots } = icons;
-const NESTED_TOOLBAR_ICONS = {
+export const NESTED_TOOLBAR_ICONS = {
     alignLeft: icons.alignLeft,
     bold: icons.bold,
     importExport: icons.importExport,
     paragraph: icons.paragraph,
     plus: icons.plus,
     text: icons.text,
-    threeVerticalDots: icons.threeVerticalDots
+    threeVerticalDots: icons.threeVerticalDots,
+    pilcrow: icons.pilcrow,
+    dragIndicator: icons.dragIndicator
 };
 /**
  * The toolbar view class.

package/theme/components/arialiveannouncer/arialiveannouncer.css

@@ -0,0 +1,10 @@
+/*
+ * 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
+ */
+
+.ck.ck-aria-live-announcer {
+	position: absolute;
+	left: -10000px;
+	top: -10000px;
+}

package/theme/components/autocomplete/autocomplete.css

@@ -0,0 +1,22 @@
+/*
+ * 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
+ */
+
+.ck.ck-autocomplete {
+	position: relative;
+
+	& > .ck-search__results {
+		position: absolute;
+		z-index: var(--ck-z-modal);
+
+		&.ck-search__results_n {
+			bottom: 100%;
+		}
+
+		&.ck-search__results_s {
+			top: 100%;
+			bottom: auto;
+		}
+	}
+}

package/theme/components/button/button.css

@@ -4,6 +4,7 @@
  */
 
 @import "../../mixins/_unselectable.css";
+@import "../../mixins/_dir.css";
 
 .ck.ck-button,
 a.ck.ck-button {
@@ -12,7 +13,14 @@ a.ck.ck-button {
 	position: relative;
 	display: inline-flex;
 	align-items: center;
-	justify-content: left;
+
+	@mixin ck-dir ltr {
+		justify-content: left;
+	}
+
+	@mixin ck-dir rtl {
+		justify-content: right;
+	}
 
 	& .ck-button__label {
 		display: none;

package/theme/components/formheader/formheader.css

@@ -9,4 +9,8 @@
 	flex-wrap: nowrap;
 	align-items: center;
 	justify-content: space-between;
+
+	& h2.ck-form__header__label {
+		flex-grow: 1;
+	}
 }

package/theme/components/highlightedtext/highlightedtext.css

@@ -0,0 +1,12 @@
+/*
+ * 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
+ */
+
+.ck.ck-highlighted-text mark {
+	background: var(--ck-color-highlight-background);
+	vertical-align: initial;
+	font-weight: inherit;
+	line-height: inherit;
+	font-size: inherit;
+}

package/theme/components/search/search.css

@@ -0,0 +1,43 @@
+/*
+ * 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 "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
+.ck.ck-search {
+	& > .ck-labeled-field-view {
+		& > .ck-labeled-field-view__input-wrapper > .ck-icon {
+			position: absolute;
+			top: 50%;
+			transform: translateY(-50%);
+
+			@mixin ck-dir ltr {
+				left: var(--ck-spacing-medium);
+			}
+
+			@mixin ck-dir rtl {
+				right: var(--ck-spacing-medium);
+			}
+		}
+
+		& .ck-search__reset {
+			position: absolute;
+			top: 50%;
+			transform: translateY(-50%);
+		}
+	}
+
+	& > .ck-search__results {
+		& > .ck-search__info {
+			& > span:first-child {
+				display: block;
+			}
+
+			/* Hide the filtered view when nothing was found */
+			&:not(.ck-hidden) ~ * {
+				display: none;
+			}
+		}
+	}
+}

package/theme/components/spinner/spinner.css

@@ -0,0 +1,23 @@
+/*
+ * 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
+ */
+
+:root {
+	--ck-toolbar-spinner-size: 18px;
+}
+
+.ck.ck-spinner-container {
+	display: block;
+	position: relative;
+}
+
+.ck.ck-spinner {
+	position: absolute;
+	top: 50%;
+	left: 0;
+	right: 0;
+	margin: 0 auto;
+	transform: translateY(-50%);
+	z-index: 1;
+}

package/theme/components/textarea/textarea.css

@@ -0,0 +1,10 @@
+/*
+ * 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
+ */
+
+/*
+ * Note: This file should contain the wireframe styles only. But since there are no such styles,
+ * it acts as a message to the builder telling that it should look for the corresponding styles
+ * **in the theme** when compiling the editor.
+ */