Version 2.12.4 (#680)

* Do not start multi-block selection on UI elements (#662)

* Do not start multi-block selection on UI elements

* Do not prevent mousedown event on inline toolbar actions

* Remove log

* Add comment

* Add link to issue

closes #646

* Fix loss of pointer (#666)

* Fix loss of pointer when click is outside of the editor but selection is inside

* Remove log

* Update shortcuts module (#685)

* Fixed possible grammatical typo (#681)

Thanks

* Update shortcuts module

* update changelog

* update

* Remove margin top for inline-link icon (#690)

* Remove margin top for inline-link icon

resolves #674

* Update CHANGELOG.md

* Remove unused style

* Pull fresh tools

docs/CHANGELOG.md

@@ -1,8 +1,15 @@
 # Changelog
 
+### 2.12.4 
+
+- `Improvements` CodeX.Shortcuts version updated to the v1.1 [#684](https://github.com/codex-team/editor.js/issues/684)
+- `Fix` — Do not start multi-block selection on Toolbox and Inline Toolbar [#646](https://github.com/codex-team/editor.js/issues/646)
+- `Fix` — Minor fixes of caret behaviour [#663](https://github.com/codex-team/editor.js/issues/663)
+- `Fix` — Fix inline-link icon position in Firefox [#674](https://github.com/codex-team/editor.js/issues/674)
+
 ### 2.12.3
 
-- `Fix` — Make Toolbox tooltip position font-size independent  
+- `Fix` — Make Toolbox tooltip position font-size independent
 
 ### 2.12.2
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/editorjs",
-  "version": "2.12.3",
+  "version": "2.12.4",
   "description": "Editor.js — Native JS, based on API and Open Source",
   "main": "dist/editor.js",
   "types": "./types/index.d.ts",
@@ -34,7 +34,7 @@
     "@babel/preset-env": "^7.3.4",
     "@babel/register": "^7.0.0",
     "@babel/runtime": "^7.3.4",
-    "@codexteam/shortcuts": "^1.0.0",
+    "@codexteam/shortcuts": "^1.1.1",
     "@types/webpack": "^4.4.25",
     "@types/webpack-env": "^1.13.9",
     "babel-loader": "^8.0.5",

src/components/modules/rectangleSelection.ts

@@ -137,8 +137,20 @@ export default class RectangleSelection extends Module {
     this.stackOfSelected = [];
 
     const elemWhereSelectionStart = document.elementFromPoint(pageX - window.pageXOffset, pageY - window.pageYOffset);
-    if (!(elemWhereSelectionStart.closest('.' + this.Editor.UI.CSS.editorWrapper) &&
-      !elemWhereSelectionStart.closest('.' + Block.CSS.content))) {
+
+    const selectorsToAvoid = [
+      `.${Block.CSS.content}`,
+      `.${this.Editor.Toolbar.CSS.toolbar}`,
+      `.${this.Editor.InlineToolbar.CSS.inlineToolbar}`,
+    ];
+
+    const startsInsideEditor = elemWhereSelectionStart.closest('.' + this.Editor.UI.CSS.editorWrapper);
+    const startsInSelectorToAvoid = selectorsToAvoid.some(((selector) => !!elemWhereSelectionStart.closest(selector)));
+
+    /**
+     * If selection starts outside of the editor or inside the blocks or on Editor UI elements, do not handle it
+     */
+    if (!startsInsideEditor || startsInSelectorToAvoid) {
       return;
     }
 

src/components/modules/toolbar/index.ts

@@ -73,7 +73,7 @@ export default class Toolbar extends Module {
    * CSS styles
    * @return {Object}
    */
-  private static get CSS() {
+  public get CSS() {
     return {
       toolbar: 'ce-toolbar',
       content: 'ce-toolbar__content',
@@ -96,13 +96,13 @@ export default class Toolbar extends Module {
    * Makes toolbar
    */
   public make(): void {
-    this.nodes.wrapper = $.make('div', Toolbar.CSS.toolbar);
+    this.nodes.wrapper = $.make('div', this.CSS.toolbar);
 
     /**
      * Make Content Zone and Actions Zone
      */
     ['content',  'actions'].forEach( (el) => {
-      this.nodes[el] = $.make('div', Toolbar.CSS[el]);
+      this.nodes[el] = $.make('div', this.CSS[el]);
       $.append(this.nodes.wrapper, this.nodes[el]);
     });
 
@@ -111,7 +111,7 @@ export default class Toolbar extends Module {
      *  - Plus Button
      *  - Toolbox
      */
-    this.nodes.plusButton = $.make('div', Toolbar.CSS.plusButton);
+    this.nodes.plusButton = $.make('div', this.CSS.plusButton);
 
     /**
      * Add events to show/hide tooltip for plus button
@@ -151,8 +151,8 @@ export default class Toolbar extends Module {
      *  - Remove Block Button
      *  - Settings Panel
      */
-    this.nodes.blockActionsButtons = $.make('div', Toolbar.CSS.blockActionsButtons);
-    this.nodes.settingsToggler  = $.make('span', Toolbar.CSS.settingsToggler);
+    this.nodes.blockActionsButtons = $.make('div', this.CSS.blockActionsButtons);
+    this.nodes.settingsToggler  = $.make('span', this.CSS.settingsToggler);
     const settingsIcon = $.svg('dots', 18, 4);
 
     $.append(this.nodes.settingsToggler, settingsIcon);
@@ -222,7 +222,7 @@ export default class Toolbar extends Module {
   public open(withBlockActions: boolean = true, needToCloseToolbox: boolean = true): void {
     setTimeout(() => {
       this.move(needToCloseToolbox);
-      this.nodes.wrapper.classList.add(Toolbar.CSS.toolbarOpened);
+      this.nodes.wrapper.classList.add(this.CSS.toolbarOpened);
 
       if (withBlockActions) {
         this.blockActions.show();
@@ -237,14 +237,14 @@ export default class Toolbar extends Module {
    * @return {Boolean}
    */
   public get opened(): boolean {
-    return this.nodes.wrapper.classList.contains(Toolbar.CSS.toolbarOpened);
+    return this.nodes.wrapper.classList.contains(this.CSS.toolbarOpened);
   }
 
   /**
    * Close the Toolbar
    */
   public close(): void {
-    this.nodes.wrapper.classList.remove(Toolbar.CSS.toolbarOpened);
+    this.nodes.wrapper.classList.remove(this.CSS.toolbarOpened);
 
     /** Close components */
     this.blockActions.hide();
@@ -258,12 +258,12 @@ export default class Toolbar extends Module {
    */
   public get plusButton(): {hide: () => void, show: () => void} {
     return {
-      hide: () => this.nodes.plusButton.classList.add(Toolbar.CSS.plusButtonHidden),
+      hide: () => this.nodes.plusButton.classList.add(this.CSS.plusButtonHidden),
       show: () => {
         if (this.Editor.Toolbox.isEmpty) {
           return;
         }
-        this.nodes.plusButton.classList.remove(Toolbar.CSS.plusButtonHidden);
+        this.nodes.plusButton.classList.remove(this.CSS.plusButtonHidden);
       },
     };
   }
@@ -275,10 +275,10 @@ export default class Toolbar extends Module {
   private get blockActions(): {hide: () => void, show: () => void} {
     return {
       hide: () => {
-        this.nodes.actions.classList.remove(Toolbar.CSS.actionsOpened);
+        this.nodes.actions.classList.remove(this.CSS.actionsOpened);
       },
       show : () => {
-        this.nodes.actions.classList.add(Toolbar.CSS.actionsOpened);
+        this.nodes.actions.classList.add(this.CSS.actionsOpened);
       },
     };
   }

src/components/modules/toolbar/inline.ts

@@ -83,7 +83,12 @@ export default class InlineToolbar extends Module {
 
     // To prevent reset of a selection when click on the wrapper
     this.Editor.Listeners.on(this.nodes.wrapper, 'mousedown', (event) => {
-      event.preventDefault();
+      const isClickedOnActionsWrapper = (event.target as Element).closest(`.${this.CSS.actionsWrapper}`);
+
+      // If click is on actions wrapper, do not prevent default behaviour because actions might include interactive elements
+      if (!isClickedOnActionsWrapper) {
+        event.preventDefault();
+      }
     });
 
     /**

src/components/modules/ui.ts

@@ -329,9 +329,9 @@ export default class UI extends Module {
      */
     const target = event.target as HTMLElement;
     const clickedOnInlineToolbarButton = target.closest(`.${this.Editor.InlineToolbar.CSS.inlineToolbar}`);
-    const clickedInsideofEditor = target.closest(`#${this.config.holderId}`);
+    const clickedInsideOfEditor = !!target.closest(`#${this.config.holderId}`) || Selection.isAtEditor;
 
-    if (!clickedInsideofEditor) {
+    if (!clickedInsideOfEditor) {
       /**
        * Clear highlightings and pointer on BlockManager
        *
@@ -348,7 +348,9 @@ export default class UI extends Module {
        * Move inline toolbar to the focused Block
        */
       this.Editor.InlineToolbar.handleShowingEvent(event);
-    } else if (Selection.isAtEditor) {
+    }
+
+    if (Selection.isAtEditor) {
       /**
        * Focus clicked Block
        */

src/styles/inline-toolbar.css

@@ -33,10 +33,6 @@
   }
 
   &--link {
-    .icon {
-      margin-top: -2px;
-    }
-
     .icon--unlink {
       display: none;
     }

yarn.lock

@@ -689,10 +689,10 @@
     lodash "^4.17.11"
     to-fast-properties "^2.0.0"
 
-"@codexteam/shortcuts@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@codexteam/shortcuts/-/shortcuts-1.0.0.tgz#9d66a7c00c93be05b7940d46d2a82af442e8b46d"
-  integrity sha512-G7047f4qHnPtft2Gj7RsjJdXat/XXswUPjIGPHyHZeoARyIZTfX4/yTkgA3oDXvjFoC4cWN2+mKDDMdOET9/GQ==
+"@codexteam/shortcuts@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@codexteam/shortcuts/-/shortcuts-1.1.1.tgz#6aa19ed0476da78045847ddc6d5b311f2f015094"
+  integrity sha512-wtpYocFlFQSOiea3KAySn9ONno/yKL4JukokV0vJUq1BOUmVEx71sdTW7qgQhG1wcfIO2R/XJ/y4K9EZQyBzng==
 
 "@csstools/convert-colors@^1.4.0":
   version "1.4.0"