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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-widget",
-  "version": "43.0.0",
+  "version": "43.1.0-alpha.0",
   "description": "Widget API for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -12,12 +12,12 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "43.0.0",
-    "@ckeditor/ckeditor5-engine": "43.0.0",
-    "@ckeditor/ckeditor5-enter": "43.0.0",
-    "@ckeditor/ckeditor5-ui": "43.0.0",
-    "@ckeditor/ckeditor5-utils": "43.0.0",
-    "@ckeditor/ckeditor5-typing": "43.0.0",
+    "@ckeditor/ckeditor5-core": "43.1.0-alpha.0",
+    "@ckeditor/ckeditor5-engine": "43.1.0-alpha.0",
+    "@ckeditor/ckeditor5-enter": "43.1.0-alpha.0",
+    "@ckeditor/ckeditor5-ui": "43.1.0-alpha.0",
+    "@ckeditor/ckeditor5-utils": "43.1.0-alpha.0",
+    "@ckeditor/ckeditor5-typing": "43.1.0-alpha.0",
     "lodash-es": "4.17.21"
   },
   "author": "CKSource (http://cksource.com/)",

package/src/widget.js

@@ -8,7 +8,7 @@
 import { Plugin } from '@ckeditor/ckeditor5-core';
 import { MouseObserver, TreeWalker } from '@ckeditor/ckeditor5-engine';
 import { Delete } from '@ckeditor/ckeditor5-typing';
-import { env, keyCodes, getLocalizedArrowKeyCodeDirection } from '@ckeditor/ckeditor5-utils';
+import { env, keyCodes, getLocalizedArrowKeyCodeDirection, getRangeFromMouseEvent } from '@ckeditor/ckeditor5-utils';
 import WidgetTypeAround from './widgettypearound/widgettypearound.js';
 import verticalNavigationHandler from './verticalnavigation.js';
 import { getLabel, isWidget, WIDGET_SELECTED_CLASS_NAME } from './utils.js';
@@ -224,16 +224,25 @@ export default class Widget extends Plugin {
             }
             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.
@@ -481,21 +490,48 @@ export default class Widget extends Plugin {
     }
 }
 /**
- * Returns `true` when element is a nested editable or is placed inside one.
+ * 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 isInsideNestedEditable(element) {
+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.