From cfd20dee353dbe46c3312c70a71fee11ff5ab9fc Mon Sep 17 00:00:00 2001
From: Alexander Onnikov <Alexander.Onnikov@xored.com>
Date: Wed, 28 Feb 2024 15:16:48 +0700
Subject: [PATCH] UBERF-5743 Show editor toolbars on selection only (#4802)

Signed-off-by: Alexander Onnikov <Alexander.Onnikov@xored.com>
---
 .../components/CollaborativeTextEditor.svelte |  3 +-
 .../src/components/StyledTextEditor.svelte    |  1 +
 .../src/components/TextEditor.svelte          |  3 +-
 .../extension/inlineStyleToolbar.ts           | 42 ++-----------------
 packages/text-editor/src/index.ts             |  6 +--
 5 files changed, 8 insertions(+), 47 deletions(-)

diff --git a/packages/text-editor/src/components/CollaborativeTextEditor.svelte b/packages/text-editor/src/components/CollaborativeTextEditor.svelte
index 000d88cb3a..371dc99144 100644
--- a/packages/text-editor/src/components/CollaborativeTextEditor.svelte
+++ b/packages/text-editor/src/components/CollaborativeTextEditor.svelte
@@ -229,8 +229,7 @@
         InlineStyleToolbarExtension.configure({
           tippyOptions,
           element: textToolbarElement,
-          isSupported: () => showTextStyleToolbar,
-          isSelectionOnly: () => false
+          isSupported: () => showTextStyleToolbar
         }),
         InlinePopupExtension.configure({
           pluginKey: 'show-image-actions-popup',
diff --git a/packages/text-editor/src/components/StyledTextEditor.svelte b/packages/text-editor/src/components/StyledTextEditor.svelte
index 8a62124df9..2eee684a1e 100644
--- a/packages/text-editor/src/components/StyledTextEditor.svelte
+++ b/packages/text-editor/src/components/StyledTextEditor.svelte
@@ -95,6 +95,7 @@
       textEditor?.focus()
     }
   }
+
   let actions: RefAction[] = defaultRefActions.concat(...extraActions).sort((a, b) => a.order - b.order)
 
   void getModelRefActions().then((modelActions) => {
diff --git a/packages/text-editor/src/components/TextEditor.svelte b/packages/text-editor/src/components/TextEditor.svelte
index 8eb89f7f8b..9bffd24c2d 100644
--- a/packages/text-editor/src/components/TextEditor.svelte
+++ b/packages/text-editor/src/components/TextEditor.svelte
@@ -137,8 +137,7 @@
             //  you're trying to use TextEditor in long-living components that
             //  get updated, e.g. in QuestionCollectionItemEditor in Surveys
             element: textToolbarElement,
-            isSupported: () => true,
-            isSelectionOnly: () => false
+            isSupported: () => true
           }),
           InlinePopupExtension.configure({
             pluginKey: 'show-image-actions-popup',
diff --git a/packages/text-editor/src/components/extension/inlineStyleToolbar.ts b/packages/text-editor/src/components/extension/inlineStyleToolbar.ts
index fad67ecf62..6b012bf5ea 100644
--- a/packages/text-editor/src/components/extension/inlineStyleToolbar.ts
+++ b/packages/text-editor/src/components/extension/inlineStyleToolbar.ts
@@ -1,43 +1,15 @@
 import { Extension, isTextSelection } from '@tiptap/core'
 import { type BubbleMenuOptions } from '@tiptap/extension-bubble-menu'
-import { Plugin, PluginKey } from '@tiptap/pm/state'
+import { PluginKey } from '@tiptap/pm/state'
 import { InlinePopupExtension } from './inlinePopup'
 
 export type InlineStyleToolbarOptions = BubbleMenuOptions & {
   isSupported: () => boolean
-  isSelectionOnly?: () => boolean
+  canShowWithoutSelection?: boolean
 }
 
-export interface InlineStyleToolbarStorage {
-  canShowWithoutSelection: boolean
-}
-
-export const InlineStyleToolbarExtension = Extension.create<InlineStyleToolbarOptions, InlineStyleToolbarStorage>({
+export const InlineStyleToolbarExtension = Extension.create<InlineStyleToolbarOptions>({
   pluginKey: new PluginKey('inline-style-toolbar'),
-  addProseMirrorPlugins () {
-    const storage = this.storage
-
-    const plugins = [
-      ...(this.parent?.() ?? []),
-      new Plugin({
-        key: new PluginKey('inline-style-toolbar-click-plugin'),
-        props: {
-          handleClickOn (view, pos, node, nodePos, event, direct) {
-            if (direct) {
-              storage.canShowWithoutSelection = node.type.name !== 'image'
-            }
-          }
-        }
-      })
-    ]
-
-    return plugins
-  },
-  addStorage () {
-    return {
-      canShowWithoutSelection: false
-    }
-  },
   addExtensions () {
     const options: InlineStyleToolbarOptions = this.options
 
@@ -80,18 +52,12 @@ export const InlineStyleToolbarExtension = Extension.create<InlineStyleToolbarOp
           // So we check also for an empty text size.
           const isEmptyTextBlock = doc.textBetween(from, to).length === 0 && textSelection
           if (empty || isEmptyTextBlock) {
-            return this.storage.canShowWithoutSelection
+            return this.options.canShowWithoutSelection ?? false
           }
 
           return textSelection
         }
       })
     ]
-  },
-  onSelectionUpdate () {
-    this.storage.canShowWithoutSelection = false
-  },
-  onUpdate () {
-    this.storage.canShowWithoutSelection = false
   }
 })
diff --git a/packages/text-editor/src/index.ts b/packages/text-editor/src/index.ts
index 443f9de125..56ddbfcaf3 100644
--- a/packages/text-editor/src/index.ts
+++ b/packages/text-editor/src/index.ts
@@ -60,11 +60,7 @@ export {
   type NodeUuidStorage
 } from './components/extension/nodeUuid'
 export { InlinePopupExtension } from './components/extension/inlinePopup'
-export {
-  InlineStyleToolbarExtension,
-  type InlineStyleToolbarOptions,
-  type InlineStyleToolbarStorage
-} from './components/extension/inlineStyleToolbar'
+export { InlineStyleToolbarExtension, type InlineStyleToolbarOptions } from './components/extension/inlineStyleToolbar'
 export { ImageExtension, type ImageOptions } from './components/extension/imageExt'
 export { TodoItemExtension, TodoListExtension } from './components/extension/todo'