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

package/dist/index.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 import { Plugin } from '@ckeditor/ckeditor5-core/dist/index.js';
-import { MouseObserver, ModelTreeWalker } from '@ckeditor/ckeditor5-engine/dist/index.js';
+import { MouseObserver, PointerObserver, ModelTreeWalker } from '@ckeditor/ckeditor5-engine/dist/index.js';
 import { Delete } from '@ckeditor/ckeditor5-typing/dist/index.js';
 import { EmitterMixin, Rect, CKEditorError, toArray, isForwardArrowKeyCode, env, keyCodes, getLocalizedArrowKeyCodeDirection, getRangeFromMouseEvent, logWarning, ObservableMixin, compareArrays, global, DomEmitterMixin } from '@ckeditor/ckeditor5-utils/dist/index.js';
 import { IconDragHandle, IconReturnArrow } from '@ckeditor/ckeditor5-icons/dist/index.js';
@@ -323,15 +323,26 @@ import { throttle } from 'es-toolkit/compat';
     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) {
@@ -1586,7 +1597,9 @@ function selectionWillShrink(selection, isForward) {
         });
         // 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.
@@ -1710,10 +1723,7 @@ function selectionWillShrink(selection, isForward) {
     /**
 	 * 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;
@@ -1723,6 +1733,20 @@ function selectionWillShrink(selection, isForward) {
             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.
@@ -1743,9 +1767,10 @@ function selectionWillShrink(selection, isForward) {
                 }
             }
         }
-        // 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.