@ckeditor/ckeditor5-widget 47.1.0-alpha.2 → 47.2.0-alpha.0

package/README.md

@@ -2,7 +2,7 @@ CKEditor 5 widget API
 ========================================
 
 [![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-widget.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-widget)
-[![Coverage Status](https://coveralls.io/repos/github/ckeditor/ckeditor5/badge.svg?branch=master)](https://coveralls.io/github/ckeditor/ckeditor5?branch=master)
+[![codecov](https://codecov.io/gh/ckeditor/ckeditor5/branch/master/graph/badge.svg)](https://codecov.io/gh/ckeditor/ckeditor5)
 [![CircleCI](https://circleci.com/gh/ckeditor/ckeditor5.svg?style=shield)](https://app.circleci.com/pipelines/github/ckeditor/ckeditor5?branch=master)
 
 This package implements the widget API for CKEditor 5.

package/dist/index.js

@@ -860,6 +860,10 @@ const PLUGIN_DISABLED_EDITING_ROOT_CLASS = 'ck-widget__type-around_disabled';
         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();
@@ -1318,11 +1322,6 @@ function injectFakeCaret(wrapperDomElement) {
             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.
@@ -1371,7 +1370,7 @@ function injectFakeCaret(wrapperDomElement) {
  */ 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) {
@@ -1383,7 +1382,7 @@ function injectFakeCaret(wrapperDomElement) {
             return model.createRange(startPosition, lastRangePosition);
         }
     } 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) {
@@ -1481,9 +1480,6 @@ function injectFakeCaret(wrapperDomElement) {
     }
     return true;
 }
-function selectionWillShrink(selection, isForward) {
-    return !selection.isCollapsed && selection.isBackward == isForward;
-}
 
 /**
  * The widget plugin. It enables base support for widgets.
@@ -1654,6 +1650,7 @@ function selectionWillShrink(selection, isForward) {
                 evt.stop();
             }
         }, {
+            context: (node)=>node.is('editableElement'),
             priority: 'low'
         });
         // Add the information about the keystrokes to the accessibility database.
@@ -1792,53 +1789,70 @@ function selectionWillShrink(selection, isForward) {
         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();
         }
     }
     /**
@@ -1919,7 +1933,7 @@ function selectionWillShrink(selection, isForward) {
             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;
@@ -1980,12 +1994,8 @@ function selectionWillShrink(selection, isForward) {
             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)) {
@@ -1996,16 +2006,26 @@ function selectionWillShrink(selection, isForward) {
                     return model.createRangeOn(modelElement);
                 }
             } 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;
             }
@@ -2034,6 +2054,32 @@ function selectionWillShrink(selection, isForward) {
         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.
  *