fix(merge): after merge caret will be set in a place of glue (#2841)

* fix merge caret loosing

* changelog and patch

* Update nested-list

* Update Backspace.cy.ts

* Update Backspace.cy.ts

* fix tests

* fix tests

docs/CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - `New` - Inline tools (those with `isReadOnlySupported` specified) can now be used in read-only mode
 - `Fix` - Fix selection of first block in read-only initialization with "autofocus=true"
+- `Fix` - Incorrect caret position after blocks merging in Safari
 
 ### 2.30.6
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/editorjs",
-  "version": "2.31.0-rc.0",
+  "version": "2.31.0-rc.1",
   "description": "Editor.js — open source block-style WYSIWYG editor with JSON output",
   "main": "dist/editorjs.umd.js",
   "module": "dist/editorjs.mjs",
@@ -45,7 +45,7 @@
     "@cypress/code-coverage": "^3.10.3",
     "@editorjs/code": "^2.7.0",
     "@editorjs/delimiter": "^1.2.0",
-    "@editorjs/header": "^2.8.7",
+    "@editorjs/header": "^2.8.8",
     "@editorjs/paragraph": "^2.11.6",
     "@editorjs/simple-image": "^1.4.1",
     "@types/node": "^18.15.11",
@@ -77,5 +77,8 @@
   "collective": {
     "type": "opencollective",
     "url": "https://opencollective.com/editorjs"
+  },
+  "dependencies": {
+    "@editorjs/caret": "^1.0.1"
   }
 }

src/components/modules/blockEvents.ts

@@ -8,6 +8,7 @@ import Flipper from '../flipper';
 import type Block from '../block';
 import { areBlocksMergeable } from '../utils/blocks';
 import * as caretUtils from '../utils/caret';
+import { focus } from '@editorjs/caret';
 
 /**
  *
@@ -506,15 +507,17 @@ export default class BlockEvents extends Module {
    * @param blockToMerge - what Block we want to merge
    */
   private mergeBlocks(targetBlock: Block, blockToMerge: Block): void {
-    const { BlockManager, Caret, Toolbar } = this.Editor;
+    const { BlockManager, Toolbar } = this.Editor;
 
-    Caret.createShadow(targetBlock.lastInput);
+    if (targetBlock.lastInput === undefined) {
+      return;
+    }
+
+    focus(targetBlock.lastInput, false);
 
     BlockManager
       .mergeBlocks(targetBlock, blockToMerge)
       .then(() => {
-        /** Restore caret position after merge */
-        Caret.restoreCaret(targetBlock.pluginsContent as HTMLElement);
         Toolbar.close();
       });
   }

test/cypress/fixtures/tools/SimpleHeader.ts

@@ -10,7 +10,7 @@ import type {
  */
 export class SimpleHeader implements BaseTool {
   private _data: BlockToolData;
-  private element: HTMLHeadingElement;
+  private element: HTMLHeadingElement | null = null;
 
   /**
    *
@@ -39,10 +39,7 @@ export class SimpleHeader implements BaseTool {
    * @param data - saved data to merger with current block
    */
   public merge(data: BlockToolData): void {
-    this.data = {
-      text: this.data.text + data.text,
-      level: this.data.level,
-    };
+    this.element?.insertAdjacentHTML('beforeend', data.text);
   }
 
   /**
@@ -66,25 +63,4 @@ export class SimpleHeader implements BaseTool {
       import: 'text', // fill 'text' property from other block's export string
     };
   }
-
-  /**
-   * Data getter
-   */
-  private get data(): BlockToolData {
-    this._data.text = this.element.innerHTML;
-    this._data.level = 1;
-
-    return this._data;
-  }
-
-  /**
-   * Data setter
-   */
-  private set data(data: BlockToolData) {
-    this._data = data;
-
-    if (data.text !== undefined) {
-      this.element.innerHTML = this._data.text || '';
-    }
-  }
 }

yarn.lock

@@ -550,6 +550,13 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
+"@editorjs/caret@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@editorjs/caret/-/caret-1.0.1.tgz#0d33ca67a2d29d09fdea10d3d30b660f0abc7cfd"
+  integrity sha512-yMewrc/dndBbgmluFory0GbVWXnD9rhcE/xgwM0ecHWQodyfY3ZIJLvSQhf+BbgncitMlUG/FYqjJCL2Axi4+g==
+  dependencies:
+    "@editorjs/dom" "^1.0.0"
+
 "@editorjs/code@^2.7.0":
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/@editorjs/code/-/code-2.8.0.tgz#d31fdd947b9c763daae2cd2eabdf8dc37c0c6f5a"
@@ -564,19 +571,31 @@
   dependencies:
     "@codexteam/icons" "^0.0.5"
 
+"@editorjs/dom@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@editorjs/dom/-/dom-1.0.0.tgz#ddf7f17651a091570766c5fa44c89ecf8a183c82"
+  integrity sha512-P5qZaQaG8NQXm2XuEDlcfDm8S1Kvdegwf0E/ld2RnwZquY5l27hufaW57w0SikT75mscr+dARQ68Gx/xEQEUKw==
+  dependencies:
+    "@editorjs/helpers" "^1.0.0"
+
 "@editorjs/editorjs@^2.29.1":
   version "2.30.2"
   resolved "https://registry.yarnpkg.com/@editorjs/editorjs/-/editorjs-2.30.2.tgz#b045af18a9ebe0c02cb32be41b2a98e23ee08e59"
   integrity sha512-JjtUDs2/aHTEjNZzEf/2cugpIli1+aNeU8mloOd5USbVxv2vC02HTMpv7Vc1UyB7dIuc45JaYSJwgnBZp9duhA==
 
-"@editorjs/header@^2.8.7":
-  version "2.8.7"
-  resolved "https://registry.yarnpkg.com/@editorjs/header/-/header-2.8.7.tgz#6aa34e01638d18fbbc6d3bd75f1844869eca9193"
-  integrity sha512-rfxzYFR/Jhaocj3Xxx8XjEjyzfPbBIVkcPZ9Uy3rEz1n3ewhV0V4zwuxCjVfFhLUVgQQExq43BxJnTNlLOzqDQ==
+"@editorjs/header@^2.8.8":
+  version "2.8.8"
+  resolved "https://registry.yarnpkg.com/@editorjs/header/-/header-2.8.8.tgz#43cff7949c44866da7716fdb562d68116d0a806a"
+  integrity sha512-bsMSs34u2hoi0UBuRoc5EGWXIFzJiwYgkFUYQGVm63y5FU+s8zPBmVx5Ip2sw1xgs0fqfDROqmteMvvmbCy62w==
   dependencies:
     "@codexteam/icons" "^0.0.5"
     "@editorjs/editorjs" "^2.29.1"
 
+"@editorjs/helpers@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@editorjs/helpers/-/helpers-1.0.0.tgz#4b0e0868e51e2772a73212f4aac5aff553725894"
+  integrity sha512-ih4yCm+x+7X9XCn1zxfNous2LQX8ZYMyTHMLdgbyjBf0Opf8GdLxVjdzSjkA+0mUp1tUe3JgWW3FTisYcSnbQA==
+
 "@editorjs/paragraph@^2.11.6":
   version "2.11.6"
   resolved "https://registry.yarnpkg.com/@editorjs/paragraph/-/paragraph-2.11.6.tgz#011444187a74dc603201dce37d2fc6d054022407"