@ckeditor/ckeditor5-widget 44.3.0 → 45.0.0-alpha.1

package/LICENSE.md

@@ -18,7 +18,7 @@ Where not otherwise indicated, all CKEditor content is authored by CKSource engi
 
 The following libraries are included in CKEditor under the [MIT license](https://opensource.org/licenses/MIT):
 
-* Lodash - Copyright (c) JS Foundation and other contributors https://js.foundation/. Based on Underscore.js, copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors http://underscorejs.org/.
+* es-toolkit - Copyright (c) 2024 Viva Republica, Inc.
 
 Trademarks
 ----------

package/dist/index.js

@@ -6,9 +6,10 @@ import { Plugin } from '@ckeditor/ckeditor5-core/dist/index.js';
 import { MouseObserver, TreeWalker } from '@ckeditor/ckeditor5-engine/dist/index.js';
 import { Delete } from '@ckeditor/ckeditor5-typing/dist/index.js';
 import { EmitterMixin, Rect, CKEditorError, toArray, isForwardArrowKeyCode, env, keyCodes, getLocalizedArrowKeyCodeDirection, getRangeFromMouseEvent, logWarning, ObservableMixin, compareArrays, global, DomEmitterMixin } from '@ckeditor/ckeditor5-utils/dist/index.js';
+import { IconDragHandle, IconReturnArrow } from '@ckeditor/ckeditor5-icons/dist/index.js';
 import { IconView, Template, ContextualBalloon, ToolbarView, BalloonPanelView, View } from '@ckeditor/ckeditor5-ui/dist/index.js';
 import { Enter } from '@ckeditor/ckeditor5-enter/dist/index.js';
-import { throttle } from 'lodash-es';
+import { throttle } from 'es-toolkit/compat';
 
 /**
  * Class used to handle the correct order of highlights on elements.
@@ -120,8 +121,6 @@ import { throttle } from 'lodash-es';
     return Array.isArray(classes) ? classes.sort().join(',') : classes;
 }
 
-var dragHandleIcon = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4 0v1H1v3H0V.5A.5.5 0 0 1 .5 0H4zm8 0h3.5a.5.5 0 0 1 .5.5V4h-1V1h-3V0zM4 16H.5a.5.5 0 0 1-.5-.5V12h1v3h3v1zm8 0v-1h3v-3h1v3.5a.5.5 0 0 1-.5.5H12z\"/><path fill-opacity=\".256\" d=\"M1 1h14v14H1z\"/><g class=\"ck-icon__selected-indicator\"><path d=\"M7 0h2v1H7V0zM0 7h1v2H0V7zm15 0h1v2h-1V7zm-8 8h2v1H7v-1z\"/><path fill-opacity=\".254\" d=\"M1 1h14v14H1z\"/></g></svg>";
-
 /**
  * CSS class added to each widget element.
  */ const WIDGET_CLASS_NAME = 'ck-widget';
@@ -279,6 +278,7 @@ var dragHandleIcon = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/
  * * adds the `ck-editor__editable` and `ck-editor__nested-editable` CSS classes,
  * * adds the `ck-editor__nested-editable_focused` CSS class when the editable is focused and removes it when it is blurred.
  * * implements the {@link ~setHighlightHandling view highlight on widget's editable}.
+ * * sets the `role` attribute to `textbox` for accessibility purposes.
  *
  * Similarly to {@link ~toWidget `toWidget()`} this function should be used in `editingDowncast` only and it is usually
  * used together with {@link module:engine/conversion/downcasthelpers~DowncastHelpers#elementToElement `elementToElement()`}.
@@ -311,13 +311,17 @@ var dragHandleIcon = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/
  *
  * @param options Additional options.
  * @param options.label Editable's label used by assistive technologies (e.g. screen readers).
+ * @param options.withAriaRole Whether to add the role="textbox" attribute on the editable. Defaults to `true`.
  * @returns Returns the same element that was provided in the `editable` parameter
  */ function toWidgetEditable(editable, writer, options = {}) {
     writer.addClass([
         'ck-editor__editable',
         'ck-editor__nested-editable'
     ], editable);
-    writer.setAttribute('role', 'textbox', editable);
+    // Set role="textbox" only if explicitly requested (defaults to true for backward compatibility).
+    if (options.withAriaRole !== false) {
+        writer.setAttribute('role', 'textbox', editable);
+    }
     writer.setAttribute('tabindex', '-1', editable);
     if (options.label) {
         writer.setAttribute('aria-label', options.label, editable);
@@ -438,7 +442,7 @@ var dragHandleIcon = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/
         const domElement = this.toDomElement(domDocument);
         // Use the IconView from the ui library.
         const icon = new IconView();
-        icon.set('content', dragHandleIcon);
+        icon.set('content', IconDragHandle);
         // Render the icon view right away to append its #element to the selectionHandle DOM element.
         icon.render();
         domElement.appendChild(icon.element);
@@ -536,14 +540,12 @@ var dragHandleIcon = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/
     return selection.getAttribute(TYPE_AROUND_SELECTION_ATTRIBUTE);
 }
 
-var returnIcon = "<svg viewBox=\"0 0 10 8\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.055.263v3.972h-6.77M1 4.216l2-2.038m-2 2 2 2.038\"/></svg>";
-
 const POSSIBLE_INSERTION_POSITIONS = [
     'before',
     'after'
 ];
 // Do the SVG parsing once and then clone the result <svg> DOM element for each new button.
-const RETURN_ARROW_ICON_ELEMENT = new DOMParser().parseFromString(returnIcon, 'image/svg+xml').firstChild;
+const RETURN_ARROW_ICON_ELEMENT = new DOMParser().parseFromString(IconReturnArrow, 'image/svg+xml').firstChild;
 const PLUGIN_DISABLED_EDITING_ROOT_CLASS = 'ck-widget__type-around_disabled';
 /**
  * A plugin that allows users to type around widgets where normally it is impossible to place the caret due
@@ -673,9 +675,9 @@ const PLUGIN_DISABLED_EDITING_ROOT_CLASS = 'ck-widget__type-around_disabled';
             return false;
         }
         // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
-        // @if CK_DEBUG_TYPING // 	console.info( '%c[WidgetTypeAround]%c Fake caret -> insert paragraph',
-        // @if CK_DEBUG_TYPING // 		'font-weight: bold; color: green', ''
-        // @if CK_DEBUG_TYPING // 	);
+        // @if CK_DEBUG_TYPING // 	console.info( ..._buildLogMessage( this, 'WidgetTypeAround',
+        // @if CK_DEBUG_TYPING // 		'Fake caret -> insert paragraph',
+        // @if CK_DEBUG_TYPING // 	) );
         // @if CK_DEBUG_TYPING // }
         const selectedModelElement = modelSelection.getSelectedElement();
         this._insertParagraph(selectedModelElement, typeAroundFakeCaretPosition);
@@ -2160,7 +2162,7 @@ function selectionWillShrink(selection, isForward) {
 	 * @param options.items Array of toolbar items.
 	 * @param options.getRelatedElement Callback which returns an element the toolbar should be attached to.
 	 * @param options.balloonClassName CSS class for the widget balloon.
-	 */ register(toolbarId, { ariaLabel, items, getRelatedElement, balloonClassName = 'ck-toolbar-container' }) {
+	 */ register(toolbarId, { ariaLabel, items, getRelatedElement, balloonClassName = 'ck-toolbar-container', positions }) {
         // Trying to register a toolbar without any item.
         if (!items.length) {
             /**
@@ -2200,6 +2202,7 @@ function selectionWillShrink(selection, isForward) {
             getRelatedElement,
             balloonClassName,
             itemsConfig: items,
+            positions,
             initialized: false
         };
         // Register the toolbar so it becomes available for Alt+F10 and Esc navigation.
@@ -2264,7 +2267,7 @@ function selectionWillShrink(selection, isForward) {
 	 * should be still visible after the {@link module:ui/editorui/editorui~EditorUI#event:update}.
 	 */ _showToolbar(toolbarDefinition, relatedElement) {
         if (this._isToolbarVisible(toolbarDefinition)) {
-            repositionContextualBalloon(this.editor, relatedElement);
+            repositionContextualBalloon(this.editor, relatedElement, toolbarDefinition.positions);
         } else if (!this._isToolbarInBalloon(toolbarDefinition)) {
             if (!toolbarDefinition.initialized) {
                 toolbarDefinition.initialized = true;
@@ -2272,7 +2275,7 @@ function selectionWillShrink(selection, isForward) {
             }
             this._balloon.add({
                 view: toolbarDefinition.view,
-                position: getBalloonPositionData(this.editor, relatedElement),
+                position: getBalloonPositionData(this.editor, relatedElement, toolbarDefinition.positions),
                 balloonClassName: toolbarDefinition.balloonClassName
             });
             // Update toolbar position each time stack with toolbar view is switched to visible.
@@ -2283,7 +2286,7 @@ function selectionWillShrink(selection, isForward) {
                 for (const definition of this._toolbarDefinitions.values()){
                     if (this._isToolbarVisible(definition)) {
                         const relatedElement = definition.getRelatedElement(this.editor.editing.view.document.selection);
-                        repositionContextualBalloon(this.editor, relatedElement);
+                        repositionContextualBalloon(this.editor, relatedElement, toolbarDefinition.positions);
                     }
                 }
             });
@@ -2296,17 +2299,17 @@ function selectionWillShrink(selection, isForward) {
         return this._balloon.hasView(toolbar.view);
     }
 }
-function repositionContextualBalloon(editor, relatedElement) {
+function repositionContextualBalloon(editor, relatedElement, positions) {
     const balloon = editor.plugins.get('ContextualBalloon');
-    const position = getBalloonPositionData(editor, relatedElement);
+    const position = getBalloonPositionData(editor, relatedElement, positions);
     balloon.updatePosition(position);
 }
-function getBalloonPositionData(editor, relatedElement) {
+function getBalloonPositionData(editor, relatedElement, positions) {
     const editingView = editor.editing.view;
     const defaultPositions = BalloonPanelView.defaultPositions;
     return {
         target: editingView.domConverter.mapViewToDom(relatedElement),
-        positions: [
+        positions: positions || [
             defaultPositions.northArrowSouth,
             defaultPositions.northArrowSouthWest,
             defaultPositions.northArrowSouthEast,