@ckeditor/ckeditor5-widget 46.0.2 → 46.1.0-alpha.0

package/package.json

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

package/src/utils.js

@@ -219,15 +219,27 @@ export function toWidgetEditable(editable, writer, options = {}) {
     if (options.withAriaRole !== false) {
         writer.setAttribute('role', 'textbox', editable);
     }
-    writer.setAttribute('tabindex', '-1', editable);
+    // Setting tabindex=-1 on contenteditable=false makes it focusable. It propagates focus to the editable
+    // element and makes it possible to highlight nested editables as focused. It's not what we want
+    // for read-only editables though.
+    // See more: https://github.com/ckeditor/ckeditor5/issues/18965
+    if (!editable.isReadOnly) {
+        writer.setAttribute('tabindex', '-1', editable);
+    }
     if (options.label) {
         writer.setAttribute('aria-label', options.label, editable);
     }
     // Set initial contenteditable value.
     writer.setAttribute('contenteditable', editable.isReadOnly ? 'false' : 'true', editable);
     // Bind the contenteditable property to element#isReadOnly.
-    editable.on('change:isReadOnly', (evt, property, is) => {
-        writer.setAttribute('contenteditable', is ? 'false' : 'true', editable);
+    editable.on('change:isReadOnly', (evt, property, isReadonly) => {
+        writer.setAttribute('contenteditable', isReadonly ? 'false' : 'true', editable);
+        if (isReadonly) {
+            writer.removeAttribute('tabindex', editable);
+        }
+        else {
+            writer.setAttribute('tabindex', '-1', editable);
+        }
     });
     editable.on('change:isFocused', (evt, property, is) => {
         if (is) {

package/src/widget.d.ts

@@ -48,6 +48,10 @@ export declare class Widget extends Plugin {
      * Handles {@link module:engine/view/document~ViewDocument#event:mousedown mousedown} events on widget elements.
      */
     private _onMousedown;
+    /**
+     * Handles {@link module:engine/view/document~ViewDocument#event:pointerdown pointerdown} events on widget elements.
+     */
+    private _onPointerdown;
     /**
      * Selects entire block content, e.g. on triple click it selects entire paragraph.
      */

package/src/widget.js

@@ -6,7 +6,7 @@
  * @module widget/widget
  */
 import { Plugin } from '@ckeditor/ckeditor5-core';
-import { MouseObserver, ModelTreeWalker } from '@ckeditor/ckeditor5-engine';
+import { PointerObserver, MouseObserver, ModelTreeWalker } from '@ckeditor/ckeditor5-engine';
 import { Delete } from '@ckeditor/ckeditor5-typing';
 import { env, keyCodes, getLocalizedArrowKeyCodeDirection, getRangeFromMouseEvent } from '@ckeditor/ckeditor5-utils';
 import { WidgetTypeAround } from './widgettypearound/widgettypearound.js';
@@ -123,7 +123,9 @@ export class Widget extends Plugin {
         }, { priority: 'low' });
         // If mouse down is pressed on widget - create selection over whole widget.
         view.addObserver(MouseObserver);
+        view.addObserver(PointerObserver);
         this.listenTo(viewDocument, 'mousedown', (...args) => this._onMousedown(...args));
+        this.listenTo(viewDocument, 'pointerdown', (...args) => this._onPointerdown(...args));
         // There are two keydown listeners working on different priorities. This allows other
         // features such as WidgetTypeAround or TableKeyboard to attach their listeners in between
         // and customize the behavior even further in different content/selection scenarios.
@@ -216,10 +218,7 @@ export class Widget extends Plugin {
      * Handles {@link module:engine/view/document~ViewDocument#event:mousedown mousedown} events on widget elements.
      */
     _onMousedown(eventInfo, domEventData) {
-        const editor = this.editor;
-        const view = editor.editing.view;
-        const viewDocument = view.document;
-        let element = domEventData.target;
+        const element = domEventData.target;
         // Some of DOM elements have no view element representation so it may be null.
         if (!element) {
             return;
@@ -229,6 +228,21 @@ export class Widget extends Plugin {
             if (this._selectBlockContent(element)) {
                 domEventData.preventDefault();
             }
+        }
+    }
+    /**
+     * Handles {@link module:engine/view/document~ViewDocument#event:pointerdown pointerdown} events on widget elements.
+     */
+    _onPointerdown(eventInfo, domEventData) {
+        if (!domEventData.domEvent.isPrimary) {
+            return;
+        }
+        const editor = this.editor;
+        const view = editor.editing.view;
+        const viewDocument = view.document;
+        let element = domEventData.target;
+        // Some of DOM elements have no view element representation so it may be null.
+        if (!element) {
             return;
         }
         // If target is not a widget element - check if one of the ancestors is.
@@ -251,9 +265,10 @@ export class Widget extends Plugin {
                 }
             }
         }
-        // On Android selection would jump to the first table cell, on other devices
+        // On Android and iOS 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.
-        if (env.isAndroid) {
+        // In iOS drag and drop works anyway on a long press.
+        if (env.isAndroid || env.isiOS) {
             domEventData.preventDefault();
         }
         // Focus editor if is not focused already.