@ckeditor/ckeditor5-widget 46.1.1 → 47.0.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-widget",
-  "version": "46.1.1",
+  "version": "47.0.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": "46.1.1",
-    "@ckeditor/ckeditor5-engine": "46.1.1",
-    "@ckeditor/ckeditor5-enter": "46.1.1",
-    "@ckeditor/ckeditor5-icons": "46.1.1",
-    "@ckeditor/ckeditor5-ui": "46.1.1",
-    "@ckeditor/ckeditor5-utils": "46.1.1",
-    "@ckeditor/ckeditor5-typing": "46.1.1",
+    "@ckeditor/ckeditor5-core": "47.0.0-alpha.1",
+    "@ckeditor/ckeditor5-engine": "47.0.0-alpha.1",
+    "@ckeditor/ckeditor5-enter": "47.0.0-alpha.1",
+    "@ckeditor/ckeditor5-icons": "47.0.0-alpha.1",
+    "@ckeditor/ckeditor5-ui": "47.0.0-alpha.1",
+    "@ckeditor/ckeditor5-utils": "47.0.0-alpha.1",
+    "@ckeditor/ckeditor5-typing": "47.0.0-alpha.1",
     "es-toolkit": "1.39.5"
   },
   "author": "CKSource (http://cksource.com/)",

package/src/verticalnavigation.js

@@ -83,28 +83,26 @@ function findTextRangeFromSelection(editing, selection, isForward) {
         const endPosition = getNearestNonInlineLimit(model, startPosition, 'forward');
         // There is no limit element, browser should handle this.
         if (!endPosition) {
-            return null;
+            return;
         }
         const range = model.createRange(startPosition, endPosition);
         const lastRangePosition = getNearestTextPosition(model.schema, range, 'backward');
         if (lastRangePosition) {
             return model.createRange(startPosition, lastRangePosition);
         }
-        return null;
     }
     else {
         const endPosition = selection.isCollapsed ? selection.focus : selection.getFirstPosition();
         const startPosition = getNearestNonInlineLimit(model, endPosition, 'backward');
         // There is no limit element, browser should handle this.
         if (!startPosition) {
-            return null;
+            return;
         }
         const range = model.createRange(startPosition, endPosition);
         const firstRangePosition = getNearestTextPosition(model.schema, range, 'forward');
         if (firstRangePosition) {
             return model.createRange(firstRangePosition, endPosition);
         }
-        return null;
     }
 }
 /**
@@ -147,7 +145,6 @@ function getNearestTextPosition(schema, range, direction) {
             return nextPosition;
         }
     }
-    return null;
 }
 /**
  * Checks if the DOM range corresponding to the provided model range renders as a single line by analyzing DOMRects

package/src/widget.d.ts

@@ -6,7 +6,7 @@
  * @module widget/widget
  */
 import { Plugin } from '@ckeditor/ckeditor5-core';
-import { type ModelElement, type ModelNode } from '@ckeditor/ckeditor5-engine';
+import { type ModelElement, type ModelNode, type ViewPosition, type ModelRange } from '@ckeditor/ckeditor5-engine';
 import { Delete } from '@ckeditor/ckeditor5-typing';
 import { WidgetTypeAround } from './widgettypearound/widgettypearound.js';
 import '../theme/widget.css';
@@ -101,9 +101,16 @@ export declare class Widget extends Plugin {
      */
     private _clearPreviouslySelectedWidgets;
     /**
-     * Moves the document selection into the first nested editable.
+     * Moves the document selection into the next editable or block widget.
      */
-    private _selectFirstNestedEditable;
+    private _selectNextEditable;
+    /**
+     * Looks for next focus point in the document starting from the given view position and direction.
+     * The focus point is either a block widget or an editable.
+     *
+     * @internal
+     */
+    _findNextFocusRange(startPosition: ViewPosition, direction: 'backward' | 'forward'): ModelRange | null;
     /**
      * Updates the document selection so that it selects first ancestor widget.
      */

package/src/widget.js

@@ -8,7 +8,7 @@
 import { Plugin } from '@ckeditor/ckeditor5-core';
 import { PointerObserver, MouseObserver, ModelTreeWalker } from '@ckeditor/ckeditor5-engine';
 import { Delete } from '@ckeditor/ckeditor5-typing';
-import { env, keyCodes, getLocalizedArrowKeyCodeDirection, getRangeFromMouseEvent } from '@ckeditor/ckeditor5-utils';
+import { env, keyCodes, getLocalizedArrowKeyCodeDirection, getRangeFromMouseEvent, compareArrays } from '@ckeditor/ckeditor5-utils';
 import { WidgetTypeAround } from './widgettypearound/widgettypearound.js';
 import { verticalWidgetNavigationHandler } from './verticalnavigation.js';
 import { getLabel, isWidget, WIDGET_SELECTED_CLASS_NAME } from './utils.js';
@@ -151,31 +151,17 @@ export class Widget extends Plugin {
                 evt.stop();
             }
         }, { context: '$root' });
-        // Handle Tab key while a widget is selected.
+        // Handle Tab/Shift+Tab key.
         this.listenTo(viewDocument, 'tab', (evt, data) => {
-            // This event could be triggered from inside the widget, but we are interested
-            // only when the widget is selected itself.
-            if (evt.eventPhase != 'atTarget') {
-                return;
-            }
-            if (data.shiftKey) {
-                return;
-            }
-            if (this._selectFirstNestedEditable()) {
-                data.preventDefault();
-                evt.stop();
-            }
-        }, { context: isWidget, priority: 'low' });
-        // Handle Shift+Tab key while caret inside a widget editable.
-        this.listenTo(viewDocument, 'tab', (evt, data) => {
-            if (!data.shiftKey) {
-                return;
-            }
-            if (this._selectAncestorWidget()) {
+            if (this._selectNextEditable(data.shiftKey ? 'backward' : 'forward')) {
+                view.scrollToTheSelection();
                 data.preventDefault();
                 evt.stop();
             }
-        }, { priority: 'low' });
+        }, {
+            context: node => isWidget(node) || node.is('editableElement'),
+            priority: 'low'
+        });
         // Handle Esc key while inside a nested editable.
         this.listenTo(viewDocument, 'keydown', (evt, data) => {
             if (data.keystroke != keyCodes.esc) {
@@ -462,28 +448,95 @@ export class Widget extends Plugin {
         this._previouslySelected.clear();
     }
     /**
-     * Moves the document selection into the first nested editable.
+     * Moves the document selection into the next editable or block widget.
      */
-    _selectFirstNestedEditable() {
-        const editor = this.editor;
-        const view = this.editor.editing.view;
-        const viewDocument = view.document;
-        for (const item of viewDocument.selection.getFirstRange().getItems()) {
-            if (item.is('editableElement')) {
-                const modelElement = editor.editing.mapper.toModelElement(item);
-                /* istanbul ignore next -- @preserve */
-                if (!modelElement) {
+    _selectNextEditable(direction) {
+        const editing = this.editor.editing;
+        const view = editing.view;
+        const model = this.editor.model;
+        const viewSelection = view.document.selection;
+        const modelSelection = model.document.selection;
+        // Find start position.
+        let startPosition;
+        // Multiple table cells are selected - use focus cell.
+        if (modelSelection.rangeCount > 1) {
+            const selectionRange = modelSelection.isBackward ?
+                modelSelection.getFirstRange() :
+                modelSelection.getLastRange();
+            startPosition = editing.mapper.toViewPosition(direction == 'forward' ?
+                selectionRange.end :
+                selectionRange.start);
+        }
+        else {
+            startPosition = direction == 'forward' ?
+                viewSelection.getFirstPosition() :
+                viewSelection.getLastPosition();
+        }
+        const modelRange = this._findNextFocusRange(startPosition, direction);
+        if (modelRange) {
+            model.change(writer => {
+                writer.setSelection(modelRange);
+            });
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Looks for next focus point in the document starting from the given view position and direction.
+     * The focus point is either a block widget or an editable.
+     *
+     * @internal
+     */
+    _findNextFocusRange(startPosition, direction) {
+        const editing = this.editor.editing;
+        const view = editing.view;
+        const model = this.editor.model;
+        const viewSelection = view.document.selection;
+        const editableElement = viewSelection.editableElement;
+        const editablePath = editableElement.getPath();
+        let selectedElement = viewSelection.getSelectedElement();
+        if (selectedElement && !isWidget(selectedElement)) {
+            selectedElement = null;
+        }
+        // Look for the next editable.
+        const viewRange = direction == 'forward' ?
+            view.createRange(startPosition, view.createPositionAt(startPosition.root, 'end')) :
+            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)) {
+                const modelElement = editing.mapper.toModelElement(item);
+                // Do not select inline widgets.
+                if (!model.schema.isBlock(modelElement)) {
                     continue;
                 }
-                const position = editor.model.createPositionAt(modelElement, 0);
-                const newRange = editor.model.schema.getNearestSelectionRange(position, 'forward');
-                editor.model.change(writer => {
-                    writer.setSelection(newRange);
-                });
-                return true;
+                // Do not select widget itself when going out of widget or iterating over sibling elements in a widget.
+                if (compareArrays(editablePath, item.getPath()) != 'extension') {
+                    return model.createRangeOn(modelElement);
+                }
+            }
+            // Encountered an editable element.
+            else if (item.is('editableElement')) {
+                const modelPosition = editing.mapper.toModelPosition(nextPosition);
+                let newRange = model.schema.getNearestSelectionRange(modelPosition, direction);
+                // There is nothing to select so just jump to the next one.
+                if (!newRange) {
+                    continue;
+                }
+                // 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);
+                }
+                return newRange;
             }
         }
-        return false;
+        return null;
     }
     /**
      * Updates the document selection so that it selects first ancestor widget.