From 6f37f276e2e937eb459dec8b1564ed73dab2eaf7 Mon Sep 17 00:00:00 2001
From: Anna No <anna.no@xored.com>
Date: Mon, 27 Nov 2023 13:09:06 +0700
Subject: [PATCH] EZQMS-393: Add CollaboratorEditor prop to hide popups (#4051)

Signed-off-by: Anna No <anna.no@xored.com>
---
 .../src/components/CollaboratorEditor.svelte  | 52 +++++++++++--------
 .../extension/inlineStyleToolbar.ts           |  2 +-
 2 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/packages/text-editor/src/components/CollaboratorEditor.svelte b/packages/text-editor/src/components/CollaboratorEditor.svelte
index 72c493bb2f..942ec71d7d 100644
--- a/packages/text-editor/src/components/CollaboratorEditor.svelte
+++ b/packages/text-editor/src/components/CollaboratorEditor.svelte
@@ -69,6 +69,7 @@
   export let boundary: HTMLElement | undefined = undefined
 
   export let attachFile: FileAttachFunction | undefined = undefined
+  export let canShowPopups = true
 
   let element: HTMLElement
 
@@ -262,6 +263,7 @@
 
   $: updateEditor(editor, field, comparedVersion)
   $: if (editor) dispatch('editor', editor)
+  $: isStyleToolbarSupported = (!readonly || textNodeActions.length > 0) && canShowPopups
 
   $: tippyOptions = {
     zIndex: 100000,
@@ -304,7 +306,7 @@
           InlineStyleToolbarExtension.configure({
             tippyOptions,
             element: textToolbarElement,
-            isSupported: () => !readonly,
+            isSupported: () => isStyleToolbarSupported,
             isSelectionOnly: () => false
           }),
           InlinePopupExtension.configure({
@@ -315,7 +317,7 @@
               appendTo: () => boundary ?? element
             },
             shouldShow: () => {
-              if (!visible && !readonly) {
+              if (!visible || !readonly || !canShowPopups) {
                 return false
               }
               return editor?.isActive('image')
@@ -448,27 +450,31 @@
     bind:this={textToolbarElement}
     style="visibility: hidden;"
   >
-    <TextEditorStyleToolbar
-      textEditor={editor}
-      textFormatCategories={[
-        TextFormatCategory.Heading,
-        TextFormatCategory.TextDecoration,
-        TextFormatCategory.Link,
-        TextFormatCategory.List,
-        TextFormatCategory.Quote,
-        TextFormatCategory.Code,
-        TextFormatCategory.Table
-      ]}
-      formatButtonSize={buttonSize}
-      {textNodeActions}
-      on:focus={() => {
-        needFocus = true
-      }}
-      on:action={(event) => {
-        dispatch('action', event.detail)
-        needFocus = true
-      }}
-    />
+    {#if isStyleToolbarSupported}
+      <TextEditorStyleToolbar
+        textEditor={editor}
+        textFormatCategories={readonly
+          ? []
+          : [
+              TextFormatCategory.Heading,
+              TextFormatCategory.TextDecoration,
+              TextFormatCategory.Link,
+              TextFormatCategory.List,
+              TextFormatCategory.Quote,
+              TextFormatCategory.Code,
+              TextFormatCategory.Table
+            ]}
+        formatButtonSize={buttonSize}
+        {textNodeActions}
+        on:focus={() => {
+          needFocus = true
+        }}
+        on:action={(event) => {
+          dispatch('action', event.detail)
+          needFocus = true
+        }}
+      />
+    {/if}
   </div>
 
   <div
diff --git a/packages/text-editor/src/components/extension/inlineStyleToolbar.ts b/packages/text-editor/src/components/extension/inlineStyleToolbar.ts
index 52e259d216..fad67ecf62 100644
--- a/packages/text-editor/src/components/extension/inlineStyleToolbar.ts
+++ b/packages/text-editor/src/components/extension/inlineStyleToolbar.ts
@@ -49,7 +49,7 @@ export const InlineStyleToolbarExtension = Extension.create<InlineStyleToolbarOp
             return false
           }
 
-          if (editor.isDestroyed || !editor.isEditable) {
+          if (editor.isDestroyed) {
             return false
           }