From f9ae64cef6827afddd67dfca668519d7b56bd7b7 Mon Sep 17 00:00:00 2001
From: Peter Savchenko <specc.dev@gmail.com>
Date: Fri, 25 Mar 2022 16:46:37 +0300
Subject: [PATCH] don't move toolbar by block-hover on mobile

Resolves #1972
---
 src/components/modules/toolbar/index.ts | 8 ++++++++
 src/components/ui/toolbox.ts            | 2 +-
 src/components/utils.ts                 | 4 +++-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/modules/toolbar/index.ts b/src/components/modules/toolbar/index.ts
index 86f727db6..276ac7a9f 100644
--- a/src/components/modules/toolbar/index.ts
+++ b/src/components/modules/toolbar/index.ts
@@ -509,6 +509,14 @@ export default class Toolbar extends Module<ToolbarNodes> {
      * Subscribe to the 'block-hovered' event
      */
     this.eventsDispatcher.on(this.Editor.UI.events.blockHovered, (data: {block: Block}) => {
+      /**
+       * Do not move Toolbar by hover on mobile view
+       * @see https://github.com/codex-team/editor.js/issues/1972
+       */
+      if (_.isMobile()) {
+        return;
+      }
+
       /**
        * Do not move toolbar if Block Settings or Toolbox opened
        */
diff --git a/src/components/ui/toolbox.ts b/src/components/ui/toolbox.ts
index 48361fd36..a67de208a 100644
--- a/src/components/ui/toolbox.ts
+++ b/src/components/ui/toolbox.ts
@@ -155,7 +155,7 @@ export default class Toolbox extends EventsDispatcher<ToolboxEvent> {
       this.close();
     });
 
-    if (_.isMobile) {
+    if (_.isMobile()) {
       this.listeners.on(document, 'scroll', () => {
         this.close();
       });
diff --git a/src/components/utils.ts b/src/components/utils.ts
index 94dff52b5..fda96c9a7 100644
--- a/src/components/utils.ts
+++ b/src/components/utils.ts
@@ -766,4 +766,6 @@ export function cacheable<Target, Value, Arguments extends unknown[] = unknown[]
 /**
  * True if screen has mobile size
  */
-export const isMobile = window.matchMedia('(max-width: 650px)').matches;
+export function isMobile(): boolean {
+  return window.matchMedia('(max-width: 650px)').matches;
+}