@ckeditor/ckeditor5-widget 43.0.0 → 43.1.0-alpha.1

package/dist/index.js

@@ -5,7 +5,7 @@
 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, CKEditorError, Rect, toArray, isForwardArrowKeyCode, env, keyCodes, getLocalizedArrowKeyCodeDirection, logWarning, ObservableMixin, compareArrays, global, DomEmitterMixin } from '@ckeditor/ckeditor5-utils/dist/index.js';
+import { EmitterMixin, CKEditorError, Rect, toArray, isForwardArrowKeyCode, env, keyCodes, getLocalizedArrowKeyCodeDirection, getRangeFromMouseEvent, logWarning, ObservableMixin, compareArrays, global, DomEmitterMixin } from '@ckeditor/ckeditor5-utils/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';
@@ -1702,16 +1702,23 @@ function selectionWillShrink(selection, isForward) {
             }
             return;
         }
-        // Do nothing for single or double click inside nested editable.
-        if (isInsideNestedEditable(element)) {
-            return;
-        }
         // If target is not a widget element - check if one of the ancestors is.
         if (!isWidget(element)) {
-            element = element.findAncestor(isWidget);
-            if (!element) {
+            const editableOrWidgetElement = findClosestEditableOrWidgetAncestor(element);
+            if (!editableOrWidgetElement) {
                 return;
             }
+            if (isWidget(editableOrWidgetElement)) {
+                element = editableOrWidgetElement;
+            } else {
+                // Pick view range from the point where the mouse was clicked.
+                const clickTargetFromPoint = getElementFromMouseEvent(view, domEventData);
+                if (clickTargetFromPoint && isWidget(clickTargetFromPoint)) {
+                    element = clickTargetFromPoint;
+                } else {
+                    return;
+                }
+            }
         }
         // On Android selection would jump to the first table cell, on other devices
         // we can't block it (and don't need to) because of drag and drop support.
@@ -1944,20 +1951,46 @@ function selectionWillShrink(selection, isForward) {
     }
 }
 /**
- * Returns `true` when element is a nested editable or is placed inside one.
- */ function isInsideNestedEditable(element) {
+ * Finds the closest ancestor element that is either an editable element or a widget.
+ *
+ * @param element The element from which to start searching.
+ * @returns The closest ancestor element that is either an editable element or a widget, or null if none is found.
+ */ function findClosestEditableOrWidgetAncestor(element) {
     let currentElement = element;
     while(currentElement){
-        if (currentElement.is('editableElement') && !currentElement.is('rootElement')) {
-            return true;
-        }
-        // Click on nested widget should select it.
-        if (isWidget(currentElement)) {
-            return false;
+        if (currentElement.is('editableElement') || isWidget(currentElement)) {
+            return currentElement;
         }
         currentElement = currentElement.parent;
     }
-    return false;
+    return null;
+}
+/**
+ * Retrieves the ViewElement associated with a mouse event in the editing view.
+ *
+ * @param view The editing view.
+ * @param domEventData The DOM event data containing the mouse event.
+ * @returns The ViewElement associated with the mouse event, or null if not found.
+ */ function getElementFromMouseEvent(view, domEventData) {
+    const domRange = getRangeFromMouseEvent(domEventData.domEvent);
+    if (!domRange) {
+        return null;
+    }
+    const viewRange = view.domConverter.domRangeToView(domRange);
+    if (!viewRange) {
+        return null;
+    }
+    const viewPosition = viewRange.start;
+    if (!viewPosition.parent) {
+        return null;
+    }
+    // Click after a widget tend to return position at the end of the editable element
+    // so use the node before it if range is at the end of a parent.
+    const viewNode = viewPosition.parent.is('editableElement') && viewPosition.isAtEnd && viewPosition.nodeBefore || viewPosition.parent;
+    if (viewNode.is('$text')) {
+        return viewNode.parent;
+    }
+    return viewNode;
 }
 /**
  * Checks whether the specified `element` is a child of the `parent` element.