From 69f18072890e45732629cb8d2c6faa47cd907805 Mon Sep 17 00:00:00 2001
From: mrsadman99 <60566490+mrsadman99@users.noreply.github.com>
Date: Wed, 22 Feb 2023 13:21:09 +0700
Subject: [PATCH] EZQ-49: Update collaborator (#2677)

Signed-off-by: Anton Brechka <anton.brechka@ezthera.com>
---
 .../src/components/CollaboratorEditor.svelte  | 271 +++++++++---------
 .../src/components/DocumentEditor.svelte      |   2 +-
 2 files changed, 139 insertions(+), 134 deletions(-)

diff --git a/packages/text-editor/src/components/CollaboratorEditor.svelte b/packages/text-editor/src/components/CollaboratorEditor.svelte
index e37f33d773..b540ca96f6 100644
--- a/packages/text-editor/src/components/CollaboratorEditor.svelte
+++ b/packages/text-editor/src/components/CollaboratorEditor.svelte
@@ -65,6 +65,7 @@
 
   export let documentId: string
   export let readonly = false
+  export let visible = true
 
   export let token: string
   export let collaboratorURL: string
@@ -129,8 +130,10 @@
     editor.commands.toggleStrike()
   }
 
-  export function getHTML (): string {
-    return editor.getHTML()
+  export function getHTML (): string | undefined {
+    if (editor) {
+      return editor.getHTML()
+    }
   }
 
   export function getLink () {
@@ -466,144 +469,146 @@
   let showDiff = true
 </script>
 
-<div class="ref-container" class:autoOverflow>
-  {#if isFormatting && !readonly}
-    <div class="formatPanelRef formatPanel flex-between clear-mins" class:focused>
-      <div class="flex-row-center buttons-group xsmall-gap">
-        <StyleButton
-          icon={Header}
-          size={buttonSize}
-          selected={activeModes.has('heading')}
-          showTooltip={{ label: getEmbeddedLabel(`H${headingLevel}`) }}
-          on:click={toggleHeader}
-        />
-
-        <StyleButton
-          icon={Bold}
-          size={buttonSize}
-          selected={activeModes.has('bold')}
-          showTooltip={{ label: textEditorPlugin.string.Bold }}
-          on:click={getToggler(toggleBold)}
-        />
-        <StyleButton
-          icon={Italic}
-          size={buttonSize}
-          selected={activeModes.has('italic')}
-          showTooltip={{ label: textEditorPlugin.string.Italic }}
-          on:click={getToggler(toggleItalic)}
-        />
-        <StyleButton
-          icon={Strikethrough}
-          size={buttonSize}
-          selected={activeModes.has('strike')}
-          showTooltip={{ label: textEditorPlugin.string.Strikethrough }}
-          on:click={getToggler(toggleStrike)}
-        />
-        <StyleButton
-          icon={LinkEl}
-          size={buttonSize}
-          selected={activeModes.has('link')}
-          disabled={isSelectionEmpty && !activeModes.has('link')}
-          showTooltip={{ label: textEditorPlugin.string.Link }}
-          on:click={formatLink}
-        />
-        <div class="buttons-divider" />
-        <StyleButton
-          icon={ListNumber}
-          size={buttonSize}
-          selected={activeModes.has('orderedList')}
-          showTooltip={{ label: textEditorPlugin.string.OrderedList }}
-          on:click={getToggler(toggleOrderedList)}
-        />
-        <StyleButton
-          icon={ListBullet}
-          size={buttonSize}
-          selected={activeModes.has('bulletList')}
-          showTooltip={{ label: textEditorPlugin.string.BulletedList }}
-          on:click={getToggler(toggleBulletList)}
-        />
-        <div class="buttons-divider" />
-        <StyleButton
-          icon={Quote}
-          size={buttonSize}
-          selected={activeModes.has('blockquote')}
-          showTooltip={{ label: textEditorPlugin.string.Blockquote }}
-          on:click={getToggler(toggleBlockquote)}
-        />
-        <div class="buttons-divider" />
-        <StyleButton
-          icon={Code}
-          size={buttonSize}
-          selected={activeModes.has('code')}
-          showTooltip={{ label: textEditorPlugin.string.Code }}
-          on:click={getToggler(toggleCode)}
-        />
-        <StyleButton
-          icon={CodeBlock}
-          size={buttonSize}
-          selected={activeModes.has('codeBlock')}
-          showTooltip={{ label: textEditorPlugin.string.CodeBlock }}
-          on:click={getToggler(toggleCodeBlock)}
-        />
-
-        <StyleButton
-          icon={IconTable}
-          iconProps={{ style: 'table' }}
-          size={buttonSize}
-          selected={activeModes.has('table')}
-          on:click={insertTable}
-          showTooltip={{ label: textEditorPlugin.string.InsertTable }}
-        />
-        {#if activeModes.has('table')}
-          <StyleButton
-            icon={IconTable}
-            iconProps={{ style: 'tableProps' }}
-            size={buttonSize}
-            on:click={tableOptions}
-            showTooltip={{ label: textEditorPlugin.string.TableOptions }}
-          />
-        {/if}
-      </div>
-      <div class="flex-grow" />
-      {#if comparedVersion !== undefined}
+{#if visible}
+  <div class="ref-container" class:autoOverflow>
+    {#if isFormatting && !readonly}
+      <div class="formatPanelRef formatPanel flex-between clear-mins" class:focused>
         <div class="flex-row-center buttons-group xsmall-gap">
           <StyleButton
-            icon={Objects}
+            icon={Header}
             size={buttonSize}
-            selected={showDiff}
-            showTooltip={{ label: textEditorPlugin.string.EnableDiffMode }}
-            on:click={() => {
-              showDiff = !showDiff
-              editor.chain().focus()
-            }}
+            selected={activeModes.has('heading')}
+            showTooltip={{ label: getEmbeddedLabel(`H${headingLevel}`) }}
+            on:click={toggleHeader}
           />
-          <slot name="tools" />
+
+          <StyleButton
+            icon={Bold}
+            size={buttonSize}
+            selected={activeModes.has('bold')}
+            showTooltip={{ label: textEditorPlugin.string.Bold }}
+            on:click={getToggler(toggleBold)}
+          />
+          <StyleButton
+            icon={Italic}
+            size={buttonSize}
+            selected={activeModes.has('italic')}
+            showTooltip={{ label: textEditorPlugin.string.Italic }}
+            on:click={getToggler(toggleItalic)}
+          />
+          <StyleButton
+            icon={Strikethrough}
+            size={buttonSize}
+            selected={activeModes.has('strike')}
+            showTooltip={{ label: textEditorPlugin.string.Strikethrough }}
+            on:click={getToggler(toggleStrike)}
+          />
+          <StyleButton
+            icon={LinkEl}
+            size={buttonSize}
+            selected={activeModes.has('link')}
+            disabled={isSelectionEmpty && !activeModes.has('link')}
+            showTooltip={{ label: textEditorPlugin.string.Link }}
+            on:click={formatLink}
+          />
+          <div class="buttons-divider" />
+          <StyleButton
+            icon={ListNumber}
+            size={buttonSize}
+            selected={activeModes.has('orderedList')}
+            showTooltip={{ label: textEditorPlugin.string.OrderedList }}
+            on:click={getToggler(toggleOrderedList)}
+          />
+          <StyleButton
+            icon={ListBullet}
+            size={buttonSize}
+            selected={activeModes.has('bulletList')}
+            showTooltip={{ label: textEditorPlugin.string.BulletedList }}
+            on:click={getToggler(toggleBulletList)}
+          />
+          <div class="buttons-divider" />
+          <StyleButton
+            icon={Quote}
+            size={buttonSize}
+            selected={activeModes.has('blockquote')}
+            showTooltip={{ label: textEditorPlugin.string.Blockquote }}
+            on:click={getToggler(toggleBlockquote)}
+          />
+          <div class="buttons-divider" />
+          <StyleButton
+            icon={Code}
+            size={buttonSize}
+            selected={activeModes.has('code')}
+            showTooltip={{ label: textEditorPlugin.string.Code }}
+            on:click={getToggler(toggleCode)}
+          />
+          <StyleButton
+            icon={CodeBlock}
+            size={buttonSize}
+            selected={activeModes.has('codeBlock')}
+            showTooltip={{ label: textEditorPlugin.string.CodeBlock }}
+            on:click={getToggler(toggleCodeBlock)}
+          />
+
+          <StyleButton
+            icon={IconTable}
+            iconProps={{ style: 'table' }}
+            size={buttonSize}
+            selected={activeModes.has('table')}
+            on:click={insertTable}
+            showTooltip={{ label: textEditorPlugin.string.InsertTable }}
+          />
+          {#if activeModes.has('table')}
+            <StyleButton
+              icon={IconTable}
+              iconProps={{ style: 'tableProps' }}
+              size={buttonSize}
+              on:click={tableOptions}
+              showTooltip={{ label: textEditorPlugin.string.TableOptions }}
+            />
+          {/if}
         </div>
-      {:else}
-        <div class="formatPanelRef formatPanel buttons-group xsmall-gap">
-          <slot name="tools" />
-        </div>
-      {/if}
+        <div class="flex-grow" />
+        {#if comparedVersion !== undefined}
+          <div class="flex-row-center buttons-group xsmall-gap">
+            <StyleButton
+              icon={Objects}
+              size={buttonSize}
+              selected={showDiff}
+              showTooltip={{ label: textEditorPlugin.string.EnableDiffMode }}
+              on:click={() => {
+                showDiff = !showDiff
+                editor.chain().focus()
+              }}
+            />
+            <slot name="tools" />
+          </div>
+        {:else}
+          <div class="formatPanelRef formatPanel buttons-group xsmall-gap">
+            <slot name="tools" />
+          </div>
+        {/if}
+      </div>
+    {:else if comparedVersion !== undefined}
+      <div class="formatPanelRef formatPanel flex flex-grow flex-reverse">
+        <StyleButton
+          icon={Objects}
+          size={buttonSize}
+          selected={showDiff}
+          showTooltip={{ label: textEditorPlugin.string.EnableDiffMode }}
+          on:click={() => {
+            showDiff = !showDiff
+            editor.chain().focus()
+          }}
+        />
+        <slot name="tools" />
+      </div>
+    {/if}
+    <div class="textInput" class:focusable>
+      <div class="select-text" style="width: 100%;" bind:this={element} />
     </div>
-  {:else if comparedVersion !== undefined}
-    <div class="formatPanelRef formatPanel flex flex-grow flex-reverse">
-      <StyleButton
-        icon={Objects}
-        size={buttonSize}
-        selected={showDiff}
-        showTooltip={{ label: textEditorPlugin.string.EnableDiffMode }}
-        on:click={() => {
-          showDiff = !showDiff
-          editor.chain().focus()
-        }}
-      />
-      <slot name="tools" />
-    </div>
-  {/if}
-  <div class="textInput" class:focusable>
-    <div class="select-text" style="width: 100%;" bind:this={element} />
   </div>
-</div>
+{/if}
 
 <style lang="scss" global>
   .ProseMirror {
diff --git a/plugins/document-resources/src/components/DocumentEditor.svelte b/plugins/document-resources/src/components/DocumentEditor.svelte
index e70d61849a..a3e872eec9 100644
--- a/plugins/document-resources/src/components/DocumentEditor.svelte
+++ b/plugins/document-resources/src/components/DocumentEditor.svelte
@@ -32,7 +32,7 @@
   const token = getMetadata(login.metadata.LoginToken) ?? ''
   const collaboratorURL = getMetadata(document.metadata.CollaboratorUrl) ?? ''
   let editor: CollaboratorEditor
-  export function getHTML (): string {
+  export function getHTML (): string | undefined {
     return editor.getHTML()
   }
 </script>