@ckeditor/ckeditor5-typing 37.0.1 → 38.0.0-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-typing",
-  "version": "37.0.1",
+  "version": "38.0.0-rc.0",
   "description": "Typing feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -12,29 +12,29 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^37.0.1",
-    "@ckeditor/ckeditor5-engine": "^37.0.1",
-    "@ckeditor/ckeditor5-utils": "^37.0.1",
+    "@ckeditor/ckeditor5-core": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-engine": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-utils": "^38.0.0-rc.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-autoformat": "^37.0.1",
-    "@ckeditor/ckeditor5-basic-styles": "^37.0.1",
-    "@ckeditor/ckeditor5-block-quote": "^37.0.1",
-    "@ckeditor/ckeditor5-code-block": "^37.0.1",
-    "@ckeditor/ckeditor5-editor-classic": "^37.0.1",
-    "@ckeditor/ckeditor5-enter": "^37.0.1",
-    "@ckeditor/ckeditor5-essentials": "^37.0.1",
-    "@ckeditor/ckeditor5-heading": "^37.0.1",
-    "@ckeditor/ckeditor5-image": "^37.0.1",
-    "@ckeditor/ckeditor5-indent": "^37.0.1",
-    "@ckeditor/ckeditor5-link": "^37.0.1",
-    "@ckeditor/ckeditor5-list": "^37.0.1",
-    "@ckeditor/ckeditor5-media-embed": "^37.0.1",
-    "@ckeditor/ckeditor5-mention": "^37.0.1",
-    "@ckeditor/ckeditor5-paragraph": "^37.0.1",
-    "@ckeditor/ckeditor5-table": "^37.0.1",
-    "@ckeditor/ckeditor5-undo": "^37.0.1",
+    "@ckeditor/ckeditor5-autoformat": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-basic-styles": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-block-quote": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-code-block": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-editor-classic": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-enter": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-essentials": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-heading": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-image": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-indent": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-link": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-list": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-media-embed": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-mention": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-paragraph": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-table": "^38.0.0-rc.0",
+    "@ckeditor/ckeditor5-undo": "^38.0.0-rc.0",
     "typescript": "^4.8.4",
     "webpack": "^5.58.1",
     "webpack-cli": "^4.9.0"

package/src/deletecommand.js

@@ -23,6 +23,8 @@ export default class DeleteCommand extends Command {
         super(editor);
         this.direction = direction;
         this._buffer = new ChangeBuffer(editor.model, editor.config.get('typing.undoStep'));
+        // Since this command may execute on different selectable than selection, it should be checked directly in execute block.
+        this._isEnabledBasedOnSelection = false;
     }
     /**
      * The current change buffer.
@@ -47,6 +49,10 @@ export default class DeleteCommand extends Command {
         model.enqueueChange(this._buffer.batch, writer => {
             this._buffer.lock();
             const selection = writer.createSelection(options.selection || doc.selection);
+            // Don't execute command when selection is in non-editable place.
+            if (!model.canEditAt(selection)) {
+                return;
+            }
             const sequence = options.sequence || 1;
             // Do not replace the whole selected content if selection was collapsed.
             // This prevents such situation:

package/src/deleteobserver.js

@@ -5,7 +5,7 @@
 /**
  * @module typing/deleteobserver
  */
-import { env, keyCodes } from '@ckeditor/ckeditor5-utils';
+import { env, keyCodes, isInsideCombinedSymbol, isInsideEmojiSequence, isInsideSurrogatePair } from '@ckeditor/ckeditor5-utils';
 import { BubblingEventInfo, DomEventData, Observer } from '@ckeditor/ckeditor5-engine';
 const DELETE_CHARACTER = 'character';
 const DELETE_WORD = 'word';
@@ -133,14 +133,14 @@ export default class DeleteObserver extends Observer {
                 deleteData.selectionToRemove = view.createSelection(targetRanges[0]);
             }
             // The default deletion unit for deleteContentBackward is a single code point
-            // but on Android it sometimes passes a wider target range, so we need to change
-            // the unit of deletion to include the whole range to be removed and not a single code point.
-            if (env.isAndroid && inputType === 'deleteContentBackward') {
+            // but if the browser provides a wider target range then we should use it.
+            if (inputType === 'deleteContentBackward') {
                 // On Android, deleteContentBackward has sequence 1 by default.
-                deleteData.sequence = 1;
-                // IME wants more than a single character to be removed.
-                if (targetRanges.length == 1 && (targetRanges[0].start.parent != targetRanges[0].end.parent ||
-                    targetRanges[0].start.offset + 1 != targetRanges[0].end.offset)) {
+                if (env.isAndroid) {
+                    deleteData.sequence = 1;
+                }
+                // The beforeInput event wants more than a single character to be removed.
+                if (shouldUseTargetRanges(targetRanges)) {
                     deleteData.unit = DELETE_SELECTION;
                     deleteData.selectionToRemove = view.createSelection(targetRanges);
                 }
@@ -222,3 +222,40 @@ function enableChromeWorkaround(observer) {
         return keyCode == keyCodes.backspace ? DELETE_BACKWARD : DELETE_FORWARD;
     }
 }
+/**
+ * Verifies whether the given target ranges cover more than a single character and should be used instead of a single code-point deletion.
+ */
+function shouldUseTargetRanges(targetRanges) {
+    // The collapsed target range could happen for example while deleting inside an inline filler
+    // (it's mapped to collapsed position before an inline filler).
+    if (targetRanges.length != 1 || targetRanges[0].isCollapsed) {
+        return false;
+    }
+    const walker = targetRanges[0].getWalker({
+        direction: 'backward',
+        singleCharacters: true,
+        ignoreElementEnd: true
+    });
+    let count = 0;
+    for (const { nextPosition } of walker) {
+        // There is some element in the range so count it as a single character.
+        if (!nextPosition.parent.is('$text')) {
+            count++;
+        }
+        else {
+            const data = nextPosition.parent.data;
+            const offset = nextPosition.offset;
+            // Count combined symbols and emoji sequences as a single character.
+            if (isInsideSurrogatePair(data, offset) ||
+                isInsideCombinedSymbol(data, offset) ||
+                isInsideEmojiSequence(data, offset)) {
+                continue;
+            }
+            count++;
+        }
+        if (count > 1) {
+            return true;
+        }
+    }
+    return false;
+}

package/src/index.d.ts

@@ -12,7 +12,7 @@ export { default as TextWatcher } from './textwatcher';
 export { default as TwoStepCaretMovement } from './twostepcaretmovement';
 export { default as TextTransformation } from './texttransformation';
 export { default as inlineHighlight } from './utils/inlinehighlight';
-export { default as findAttributeRange } from './utils/findattributerange';
+export { default as findAttributeRange, findAttributeRangeBound } from './utils/findattributerange';
 export { default as getLastTextLine, type LastTextLineData } from './utils/getlasttextline';
 export { default as InsertTextCommand, type InsertTextCommandExecuteEvent } from './inserttextcommand';
 export type { default as DeleteCommand } from './deletecommand';

package/src/index.js

@@ -12,7 +12,7 @@ export { default as TextWatcher } from './textwatcher';
 export { default as TwoStepCaretMovement } from './twostepcaretmovement';
 export { default as TextTransformation } from './texttransformation';
 export { default as inlineHighlight } from './utils/inlinehighlight';
-export { default as findAttributeRange } from './utils/findattributerange';
+export { default as findAttributeRange, findAttributeRangeBound } from './utils/findattributerange';
 export { default as getLastTextLine } from './utils/getlasttextline';
 export { default as InsertTextCommand } from './inserttextcommand';
 import './augmentation';

package/src/inserttextcommand.js

@@ -20,6 +20,8 @@ export default class InsertTextCommand extends Command {
     constructor(editor, undoStepSize) {
         super(editor);
         this._buffer = new ChangeBuffer(editor.model, undoStepSize);
+        // Since this command may execute on different selectable than selection, it should be checked directly in execute block.
+        this._isEnabledBasedOnSelection = false;
     }
     /**
      * The current change buffer.
@@ -54,6 +56,10 @@ export default class InsertTextCommand extends Command {
         else if (options.range) {
             selection = model.createSelection(options.range);
         }
+        // Stop executing if selectable is in non-editable place.
+        if (!model.canEditAt(selection)) {
+            return;
+        }
         const resultRange = options.resultRange;
         model.enqueueChange(this._buffer.batch, writer => {
             this._buffer.lock();

package/src/utils/findattributerange.d.ts

@@ -20,3 +20,14 @@ import type { Position, Model, Range } from '@ckeditor/ckeditor5-engine';
  * @returns The link range.
  */
 export default function findAttributeRange(position: Position, attributeName: string, value: unknown, model: Model): Range;
+/**
+ * Walks forward or backward (depends on the `lookBack` flag), node by node, as long as they have the same attribute value
+ * and returns a position just before or after (depends on the `lookBack` flag) the last matched node.
+ *
+ * @param position The start position.
+ * @param attributeName The attribute name.
+ * @param value The attribute value.
+ * @param lookBack Whether the walk direction is forward (`false`) or backward (`true`).
+ * @returns The position just before the last matched node.
+ */
+export declare function findAttributeRangeBound(position: Position, attributeName: string, value: unknown, lookBack: boolean, model: Model): Position;

package/src/utils/findattributerange.js

@@ -16,7 +16,7 @@
  * @returns The link range.
  */
 export default function findAttributeRange(position, attributeName, value, model) {
-    return model.createRange(_findBound(position, attributeName, value, true, model), _findBound(position, attributeName, value, false, model));
+    return model.createRange(findAttributeRangeBound(position, attributeName, value, true, model), findAttributeRangeBound(position, attributeName, value, false, model));
 }
 /**
  * Walks forward or backward (depends on the `lookBack` flag), node by node, as long as they have the same attribute value
@@ -28,7 +28,7 @@ export default function findAttributeRange(position, attributeName, value, model
  * @param lookBack Whether the walk direction is forward (`false`) or backward (`true`).
  * @returns The position just before the last matched node.
  */
-function _findBound(position, attributeName, value, lookBack, model) {
+export function findAttributeRangeBound(position, attributeName, value, lookBack, model) {
     // Get node before or after position (depends on `lookBack` flag).
     // When position is inside text node then start searching from text node.
     let node = position.textNode || (lookBack ? position.nodeBefore : position.nodeAfter);

package/src/utils/inlinehighlight.d.ts

@@ -3,9 +3,6 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 import type { Editor } from '@ckeditor/ckeditor5-core';
-/**
- * @module typing/utils/inlinehighlight
- */
 /**
  * Adds a visual highlight style to an attribute element in which the selection is anchored.
  * Together with two-step caret movement, they indicate that the user is typing inside the element.

package/src/utils/inlinehighlight.js

@@ -2,10 +2,10 @@
  * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import findAttributeRange from './findattributerange';
 /**
  * @module typing/utils/inlinehighlight
  */
+import findAttributeRange from './findattributerange';
 /**
  * Adds a visual highlight style to an attribute element in which the selection is anchored.
  * Together with two-step caret movement, they indicate that the user is typing inside the element.