@ckeditor/ckeditor5-widget 0.0.0-nightly-20240410.0 → 0.0.0-nightly-20240412.0

package/package.json

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

package/src/widget.d.ts

@@ -92,4 +92,12 @@ export default class Widget extends Plugin {
      * Removes CSS class from previously selected widgets.
      */
     private _clearPreviouslySelectedWidgets;
+    /**
+     * Moves the document selection into the first nested editable.
+     */
+    private _selectFirstNestedEditable;
+    /**
+     * Updates the document selection so that it selects first ancestor widget.
+     */
+    private _selectAncestorWidget;
 }

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, getLocalizedArrowKeyCodeDirection } from '@ckeditor/ckeditor5-utils';
+import { env, keyCodes, getLocalizedArrowKeyCodeDirection } 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';
@@ -146,6 +146,41 @@ export default class Widget extends Plugin {
                 evt.stop();
             }
         }, { context: '$root' });
+        // Handle Tab key while a widget is selected.
+        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()) {
+                data.preventDefault();
+                evt.stop();
+            }
+        }, { priority: 'low' });
+        // Handle Esc key while inside a nested editable.
+        this.listenTo(viewDocument, 'keydown', (evt, data) => {
+            if (data.keystroke != keyCodes.esc) {
+                return;
+            }
+            if (this._selectAncestorWidget()) {
+                data.preventDefault();
+                evt.stop();
+            }
+        }, { priority: 'low' });
         // Add the information about the keystrokes to the accessibility database.
         editor.accessibility.addKeystrokeInfoGroup({
             id: 'widget',
@@ -391,6 +426,55 @@ export default class Widget extends Plugin {
         }
         this._previouslySelected.clear();
     }
+    /**
+     * Moves the document selection into the first nested editable.
+     */
+    _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) {
+                    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;
+            }
+        }
+        return false;
+    }
+    /**
+     * Updates the document selection so that it selects first ancestor widget.
+     */
+    _selectAncestorWidget() {
+        const editor = this.editor;
+        const mapper = editor.editing.mapper;
+        const selection = editor.editing.view.document.selection;
+        const positionParent = selection.getFirstPosition().parent;
+        const positionParentElement = positionParent.is('$text') ?
+            positionParent.parent :
+            positionParent;
+        const viewElement = positionParentElement.findAncestor(isWidget);
+        if (!viewElement) {
+            return false;
+        }
+        const modelElement = mapper.toModelElement(viewElement);
+        /* istanbul ignore next -- @preserve */
+        if (!modelElement) {
+            return false;
+        }
+        editor.model.change(writer => {
+            writer.setSelection(modelElement, 'on');
+        });
+        return true;
+    }
 }
 /**
  * Returns `true` when element is a nested editable or is placed inside one.