@ckeditor/ckeditor5-ui 48.1.0 → 48.2.0-alpha.0

package/dist/index.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 import { Collection, CKEditorError, EmitterMixin, isNode, toArray, DomEmitterMixin, ObservableMixin, isIterable, global, uid, createElement, env, getEnvKeystrokeText, delay, isVisible, KeystrokeHandler, FocusTracker, Rect, getConstrainedViewportRect, toUnit, isText, ResizeObserver, getOptimalPosition, isRange, parseBase64EncodedObject, getBorderWidths, logWarning, priorities, first, getVisualViewportOffset, getAncestors } from '@ckeditor/ckeditor5-utils/dist/index.js';
-import { cloneDeepWith, isObject, isElement, throttle, debounce, cloneDeep, extend, escapeRegExp, escape } from 'es-toolkit/compat';
+import { cloneDeepWith, isObject, isElement as isElement$1, throttle, debounce, cloneDeep, extend, escapeRegExp, escape } from 'es-toolkit/compat';
 import { Plugin, ContextPlugin } from '@ckeditor/ckeditor5-core/dist/index.js';
 import { IconCancel, IconCheck, IconAccessibility, IconProjectLogo, IconDropdownArrow, IconColorTileCheck, IconDragIndicator, IconPilcrow, IconThreeVerticalDots, IconText, IconPlus, IconParagraph, IconImportExport, IconBold, IconAlignLeft, IconColorPalette, IconEraser, IconPreviousArrow, IconNextArrow, IconLoupe } from '@ckeditor/ckeditor5-icons/dist/index.js';
 import parse from 'color-parse';
@@ -2926,7 +2926,7 @@ function normalizeKeystrokeDefinition(definition) {
             return String(!!isOn);
         });
         // On Safari we have to force the focus on a button on click as it's the only browser
-        // that doesn't do that automatically. See #12115.
+        // that doesn't do that automatically. See https://github.com/ckeditor/ckeditor5/issues/12115.
         if (env.isSafari) {
             if (!this._focusDelayed) {
                 this._focusDelayed = delay(()=>this.focus(), 0);
@@ -5837,7 +5837,7 @@ const POSITION_OFF_SCREEN = {
  * Returns the DOM element for given object or null, if there is none,
  * e.g. when the passed object is a Rect instance or so.
  */ function getDomElement(object) {
-    if (isElement(object)) {
+    if (isElement$1(object)) {
         return object;
     }
     if (isRange(object)) {
@@ -10381,8 +10381,9 @@ function addMenuToOpenDropdown(dropdownView, options) {
             return;
         }
         const elements = dropdownView.focusTracker.elements;
-        // If the dropdown was closed, move the focus back to the button (#12125).
-        // Don't touch the focus, if it moved somewhere else (e.g. moved to the editing root on #execute) (#12178).
+        // If the dropdown was closed, move the focus back to the button (https://github.com/ckeditor/ckeditor5/issues/12125).
+        // Don't touch the focus, if it moved somewhere else (e.g. moved to the editing root on #execute).
+        // See https://github.com/ckeditor/ckeditor5/issues/12178.
         // Note: Don't use the state of the DropdownView#focusTracker here. It fires #blur with the timeout.
         if (elements.some((element)=>element.contains(global.document.activeElement))) {
             dropdownView.buttonView.focus();
@@ -12256,7 +12257,7 @@ const BALLOON_CLASS = 'ck-tooltip';
 	 */ _onLeaveOrBlur(evt, { target, relatedTarget }) {
         if (evt.name === 'mouseleave') {
             // Don't act when the event does not concern a DOM element (e.g. a mouseleave out of an entire document),
-            if (!isElement(target)) {
+            if (!isElement$1(target)) {
                 return;
             }
             const balloonElement = this.balloonPanelView.element;
@@ -12396,7 +12397,7 @@ const BALLOON_CLASS = 'ck-tooltip';
     }
 }
 function getDescendantWithTooltip(element) {
-    if (!isElement(element)) {
+    if (!isElement$1(element)) {
         return null;
     }
     return element.closest('[data-cke-tooltip-text]:not([data-cke-tooltip-disabled])');
@@ -14246,7 +14247,7 @@ function isMenuDefinition(definition) {
             // This ensures, the navigation works always the same and no pair of toolbars takes over
             // (e.g. image and table toolbars when a selected image is inside a cell).
             // * It could be that the focus went to the toolbar by clicking a toolbar item (e.g. a dropdown). In this case,
-            // there were no candidates so they must be obtained (#12339).
+            // there were no candidates so they must be obtained (https://github.com/ckeditor/ckeditor5/issues/12339).
             if (!currentFocusedToolbarDefinition || !candidateDefinitions) {
                 candidateDefinitions = this._getFocusableCandidateToolbarDefinitions();
             }
@@ -14607,25 +14608,35 @@ function isMenuDefinition(definition) {
 	 *
 	 * @param locale The locale instance.
 	 * @param editingView The editing view instance the editable is related to.
-	 * @param editableElement The editable element. If not specified, this view
-	 * should create it. Otherwise, the existing element should be used.
+	 * @param editableElement The editable element. If an existing `HTMLElement` is passed, the view applies its
+	 * template to it; otherwise the view creates a fresh element (a `<div>` by default, or one matching the given
+	 * {@link module:core/editor/editorconfig~ViewRootElementDefinition}).
 	 */ constructor(locale, editingView, editableElement){
         super(locale);
+        const elementDefinition = isElement(editableElement) ? undefined : editableElement;
+        const { name, classes, styles, attributes } = elementDefinition || {};
+        this.set('isFocused', false);
+        this.set('isInlineRoot', false);
         this.setTemplate({
-            tag: 'div',
+            tag: name || 'div',
             attributes: {
+                ...attributes,
                 class: [
                     'ck',
                     'ck-content',
                     'ck-editor__editable',
-                    'ck-rounded-corners'
+                    'ck-rounded-corners',
+                    this.bindTemplate.if('isInlineRoot', 'ck-editor__editable_inline-root'),
+                    ...classes ? toArray(classes) : []
                 ],
+                ...styles && {
+                    style: styles
+                },
                 lang: locale.contentLanguage,
                 dir: locale.contentLanguageDirection
             }
         });
-        this.set('isFocused', false);
-        this._editableElement = editableElement;
+        this._editableElement = isElement(editableElement) ? editableElement : undefined;
         this._hasExternalElement = !!this._editableElement;
         this._editingView = editingView;
     }
@@ -14690,6 +14701,11 @@ function isMenuDefinition(definition) {
         }
     }
 }
+/**
+ * An alias for `isElement` from `es-toolkit/compat` with additional type guard.
+ */ function isElement(value) {
+    return isElement$1(value);
+}
 
 /**
  * The inline editable UI class implementing an inline {@link module:ui/editableui/editableuiview~EditableUIView}.
@@ -14702,9 +14718,10 @@ function isMenuDefinition(definition) {
 	 *
 	 * @param locale The locale instance.
 	 * @param editingView The editing view instance the editable is related to.
-	 * @param editableElement The editable element. If not specified, the
-	 * {@link module:ui/editableui/editableuiview~EditableUIView}
-	 * will create it. Otherwise, the existing element will be used.
+	 * @param editableElement The editable element. May be an existing `HTMLElement`, a
+	 * {@link module:core/editor/editorconfig~ViewRootElementDefinition} describing the element to create,
+	 * or `undefined` to create a default `<div>` element. See
+	 * {@link module:ui/editableui/editableuiview~EditableUIView}.
 	 * @param options Additional configuration of the view.
 	 * @param options.label The label of the editable for assistive technologies. If not provided, a default label is used or,
 	 * the existing `aria-label` attribute value from the specified `editableElement` is preserved.
@@ -16568,9 +16585,9 @@ const toPx$3 = /* #__PURE__ */ toUnit('px');
             // 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(escape(this.text || ''));
             });
-            this._updateInnerHTML(this.text);
+            this._updateInnerHTML(escape(this.text || ''));
         });
     }
     /**
@@ -17227,7 +17244,7 @@ const toPx = /* #__PURE__ */ toUnit('px');
 	 * @inheritDoc
 	 */ destroy() {
         super.destroy();
-        // Destroy created UI components as they are not automatically destroyed (see ckeditor5#1341).
+        // Destroy created UI components as they are not automatically destroyed (see https://github.com/ckeditor/ckeditor5/issues/1341).
         this.panelView.destroy();
         this.buttonView.destroy();
         this.toolbarView.destroy();