UBERF-5743 Show editor toolbars on selection only (#4802)

Signed-off-by: Alexander Onnikov <Alexander.Onnikov@xored.com>

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',

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) => {

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',

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
   }
 })

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'