@ckeditor/ckeditor5-widget 47.1.0 → 47.2.0-alpha.1

package/package.json

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

package/src/verticalnavigation.js

@@ -22,11 +22,6 @@ export function verticalWidgetNavigationHandler(editing) {
             return;
         }
         const isForward = arrowDownPressed;
-        // Navigation is in the opposite direction than the selection direction so this is shrinking of the selection.
-        // Selection for sure will not approach any object.
-        if (expandSelection && selectionWillShrink(selection, isForward)) {
-            return;
-        }
         // Find a range between selection and closest limit element.
         const range = findTextRangeFromSelection(editing, selection, isForward);
         // There is no selection position inside the limit element.
@@ -79,7 +74,7 @@ export function verticalWidgetNavigationHandler(editing) {
 function findTextRangeFromSelection(editing, selection, isForward) {
     const model = editing.model;
     if (isForward) {
-        const startPosition = selection.isCollapsed ? selection.focus : selection.getLastPosition();
+        const startPosition = selection.focus;
         const endPosition = getNearestNonInlineLimit(model, startPosition, 'forward');
         // There is no limit element, browser should handle this.
         if (!endPosition) {
@@ -92,7 +87,7 @@ function findTextRangeFromSelection(editing, selection, isForward) {
         }
     }
     else {
-        const endPosition = selection.isCollapsed ? selection.focus : selection.getFirstPosition();
+        const endPosition = selection.focus;
         const startPosition = getNearestNonInlineLimit(model, endPosition, 'backward');
         // There is no limit element, browser should handle this.
         if (!startPosition) {
@@ -188,6 +183,3 @@ function isSingleLineRange(editing, modelRange, isForward) {
     }
     return true;
 }
-function selectionWillShrink(selection, isForward) {
-    return !selection.isCollapsed && selection.isBackward == isForward;
-}

package/src/widget.js

@@ -10,6 +10,7 @@ import { PointerObserver, MouseObserver, ModelTreeWalker } from '@ckeditor/ckedi
 import { Delete } from '@ckeditor/ckeditor5-typing';
 import { env, keyCodes, getLocalizedArrowKeyCodeDirection, getRangeFromMouseEvent, compareArrays } from '@ckeditor/ckeditor5-utils';
 import { WidgetTypeAround } from './widgettypearound/widgettypearound.js';
+import { getTypeAroundFakeCaretPosition } from './widgettypearound/utils.js';
 import { verticalWidgetNavigationHandler } from './verticalnavigation.js';
 import { getLabel, isWidget, WIDGET_SELECTED_CLASS_NAME } from './utils.js';
 import '../theme/widget.css';
@@ -171,7 +172,10 @@ export class Widget extends Plugin {
                 data.preventDefault();
                 evt.stop();
             }
-        }, { priority: 'low' });
+        }, {
+            context: node => node.is('editableElement'),
+            priority: 'low'
+        });
         // Add the information about the keystrokes to the accessibility database.
         editor.accessibility.addKeystrokeInfoGroup({
             id: 'widget',
@@ -304,53 +308,69 @@ export class Widget extends Plugin {
         const model = this.editor.model;
         const schema = model.schema;
         const modelSelection = model.document.selection;
-        const objectElement = modelSelection.getSelectedElement();
+        const selectedElement = modelSelection.getSelectedElement();
         const direction = getLocalizedArrowKeyCodeDirection(keyCode, this.editor.locale.contentLanguageDirection);
         const isForward = direction == 'down' || direction == 'right';
         const isVerticalNavigation = direction == 'up' || direction == 'down';
-        // If object element is selected.
-        if (objectElement && schema.isObject(objectElement)) {
-            const position = isForward ? modelSelection.getLastPosition() : modelSelection.getFirstPosition();
-            const newRange = schema.getNearestSelectionRange(position, isForward ? 'forward' : 'backward');
-            if (newRange) {
+        // Collapsing a non-collapsed selection.
+        if (!domEventData.shiftKey && !modelSelection.isCollapsed) {
+            // If object element is selected or object is at the edge of selection.
+            if (hasObjectAtEdge(modelSelection, schema)) {
+                const position = isForward ? modelSelection.getLastPosition() : modelSelection.getFirstPosition();
+                const newRange = schema.getNearestSelectionRange(position, isForward ? 'forward' : 'backward');
+                if (newRange) {
+                    model.change(writer => {
+                        writer.setSelection(newRange);
+                    });
+                    domEventData.preventDefault();
+                    eventInfo.stop();
+                }
+            }
+            // Else is handled by the browser.
+            return;
+        }
+        // Adjust selection for fake caret and for selection direction when single object is selected.
+        const originalSelection = getModelSelectionAdjusted(model, isForward);
+        // Clone current selection to use it as a probe. We must leave default selection as it is so it can return
+        // to its current state after undo.
+        const probe = model.createSelection(originalSelection);
+        model.modifySelection(probe, { direction: isForward ? 'forward' : 'backward' });
+        // The selection didn't change so there is nothing there.
+        if (probe.isEqual(originalSelection)) {
+            return;
+        }
+        // Move probe one step further to make it visually recognizable.
+        if (probe.focus.isTouching(originalSelection.focus)) {
+            model.modifySelection(probe, { direction: isForward ? 'forward' : 'backward' });
+        }
+        const lastSelectedNode = isForward ? originalSelection.focus.nodeBefore : originalSelection.focus.nodeAfter;
+        const nodeBeforeProbe = probe.focus.nodeBefore;
+        const nodeAfterProbe = probe.focus.nodeAfter;
+        const lastProbeNode = isForward ? nodeBeforeProbe : nodeAfterProbe;
+        if (domEventData.shiftKey) {
+            // Expand selection from a selected object or include object in selection.
+            if (selectedElement && schema.isObject(selectedElement) ||
+                lastProbeNode && schema.isObject(lastProbeNode) ||
+                lastSelectedNode && schema.isObject(lastSelectedNode)) {
                 model.change(writer => {
-                    writer.setSelection(newRange);
+                    writer.setSelection(probe);
                 });
                 domEventData.preventDefault();
                 eventInfo.stop();
             }
-            return;
         }
-        // Handle collapsing of the selection when there is any widget on the edge of selection.
-        // This is needed because browsers have problems with collapsing such selection.
-        if (!modelSelection.isCollapsed && !domEventData.shiftKey) {
-            const firstPosition = modelSelection.getFirstPosition();
-            const lastPosition = modelSelection.getLastPosition();
-            const firstSelectedNode = firstPosition.nodeAfter;
-            const lastSelectedNode = lastPosition.nodeBefore;
-            if (firstSelectedNode && schema.isObject(firstSelectedNode) || lastSelectedNode && schema.isObject(lastSelectedNode)) {
+        else {
+            // Select an object when moving caret over it.
+            if (lastProbeNode && schema.isObject(lastProbeNode)) {
+                if (schema.isInline(lastProbeNode) && isVerticalNavigation) {
+                    return;
+                }
                 model.change(writer => {
-                    writer.setSelection(isForward ? lastPosition : firstPosition);
+                    writer.setSelection(lastProbeNode, 'on');
                 });
                 domEventData.preventDefault();
                 eventInfo.stop();
             }
-            return;
-        }
-        // Return if not collapsed.
-        if (!modelSelection.isCollapsed) {
-            return;
-        }
-        // If selection is next to object element.
-        const objectElementNextToSelection = this._getObjectElementNextToSelection(isForward);
-        if (objectElementNextToSelection && schema.isObject(objectElementNextToSelection)) {
-            // Do not select an inline widget while handling up/down arrow.
-            if (schema.isInline(objectElementNextToSelection) && isVerticalNavigation) {
-                return;
-            }
-            this._setSelectionOverElement(objectElementNextToSelection);
-            domEventData.preventDefault();
-            eventInfo.stop();
         }
     }
     /**
@@ -433,7 +453,7 @@ export class Widget extends Plugin {
             return null;
         }
         const objectElement = forward ? probe.focus.nodeBefore : probe.focus.nodeAfter;
-        if (!!objectElement && schema.isObject(objectElement)) {
+        if (objectElement && schema.isObject(objectElement)) {
             return objectElement;
         }
         return null;
@@ -504,12 +524,8 @@ export class Widget extends Plugin {
             view.createRange(view.createPositionAt(startPosition.root, 0), startPosition);
         for (const { nextPosition } of viewRange.getWalker({ direction })) {
             const item = nextPosition.parent;
-            // Ignore currently selected editable or widget.
-            if (item == editableElement || item == selectedElement) {
-                continue;
-            }
-            // Some widget along the way.
-            if (isWidget(item)) {
+            // Some widget along the way except the currently selected one.
+            if (isWidget(item) && item != selectedElement) {
                 const modelElement = editing.mapper.toModelElement(item);
                 // Do not select inline widgets.
                 if (!model.schema.isBlock(modelElement)) {
@@ -522,16 +538,26 @@ export class Widget extends Plugin {
             }
             // Encountered an editable element.
             else if (item.is('editableElement')) {
+                // Ignore the current editable for text selection,
+                // but use it when widget was selected to be able to jump after the widget.
+                if (item == editableElement && !selectedElement) {
+                    continue;
+                }
                 const modelPosition = editing.mapper.toModelPosition(nextPosition);
-                let newRange = model.schema.getNearestSelectionRange(modelPosition, direction);
+                const newRange = model.schema.getNearestSelectionRange(modelPosition, direction);
                 // There is nothing to select so just jump to the next one.
                 if (!newRange) {
                     continue;
                 }
+                // In the same editable while widget was selected - do not select the editable content.
+                if (item == editableElement && selectedElement) {
+                    return newRange;
+                }
                 // Select the content of editable element when iterating over sibling editable elements
                 // or going deeper into nested widgets.
                 if (compareArrays(editablePath, item.getPath()) != 'extension') {
-                    newRange = model.createRangeIn(modelPosition.parent);
+                    // Find a limit element closest to the new selection range.
+                    return model.createRangeIn(model.schema.getLimitElement(newRange));
                 }
                 return newRange;
             }
@@ -564,6 +590,36 @@ export class Widget extends Plugin {
         return true;
     }
 }
+/**
+ * Returns true if there is an object on an edge of the given selection.
+ */
+function hasObjectAtEdge(modelSelection, schema) {
+    const firstPosition = modelSelection.getFirstPosition();
+    const lastPosition = modelSelection.getLastPosition();
+    const firstSelectedNode = firstPosition.nodeAfter;
+    const lastSelectedNode = lastPosition.nodeBefore;
+    return (!!firstSelectedNode && schema.isObject(firstSelectedNode) ||
+        !!lastSelectedNode && schema.isObject(lastSelectedNode));
+}
+/**
+ * Returns new instance of the model selection adjusted for fake caret and selection direction on widgets.
+ */
+function getModelSelectionAdjusted(model, isForward) {
+    const modelSelection = model.document.selection;
+    const selectedElement = modelSelection.getSelectedElement();
+    // Adjust selection for fake caret.
+    const typeAroundFakeCaretPosition = getTypeAroundFakeCaretPosition(modelSelection);
+    if (selectedElement && typeAroundFakeCaretPosition == 'before') {
+        return model.createSelection(selectedElement, 'before');
+    }
+    else if (selectedElement && typeAroundFakeCaretPosition == 'after') {
+        return model.createSelection(selectedElement, 'after');
+    }
+    // Make a copy of selection with adjusted direction for object selected.
+    return model.createSelection(modelSelection.getRanges(), {
+        backward: !!selectedElement && model.schema.isObject(selectedElement) ? !isForward : modelSelection.isBackward
+    });
+}
 /**
  * Finds the closest ancestor element that is either an editable element or a widget.
  *

package/src/widgettypearound/widgettypearound.js

@@ -315,6 +315,10 @@ export class WidgetTypeAround extends Plugin {
         const modelSelection = model.document.selection;
         const schema = model.schema;
         const editingView = editor.editing.view;
+        // Selection expanding/shrinking is handled without the fake caret by the widget plugin.
+        if (domEventData.shiftKey) {
+            return;
+        }
         const keyCode = domEventData.keyCode;
         const isForward = isForwardArrowKeyCode(keyCode, editor.locale.contentLanguageDirection);
         const selectedViewElement = editingView.document.selection.getSelectedElement();