From 31c7586ddf8a6c536f1d51c8c43e0ced2dad8a62 Mon Sep 17 00:00:00 2001
From: Andrey Sobolev <haiodo@users.noreply.github.com>
Date: Thu, 1 Dec 2022 23:45:56 +0700
Subject: [PATCH] Allow to use maxWidth with Panel (#2411)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>
---
 packages/panel/src/components/Panel.svelte                | 8 +++++---
 .../text-editor/src/components/CollaboratorEditor.svelte  | 5 +++++
 packages/text-editor/src/components/ReferenceInput.svelte | 1 +
 packages/text-editor/src/components/StyledTextArea.svelte | 1 +
 packages/theme/styles/panel.scss                          | 8 ++++++++
 packages/ui/src/components/Panel.svelte                   | 5 +++--
 6 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/packages/panel/src/components/Panel.svelte b/packages/panel/src/components/Panel.svelte
index 470d967f42..c20054ab29 100644
--- a/packages/panel/src/components/Panel.svelte
+++ b/packages/panel/src/components/Panel.svelte
@@ -36,6 +36,7 @@
   export let isCustomAttr: boolean = true
   export let floatAside = false
   export let allowClose = true
+  export let useMaxWidth = false
 </script>
 
 <Panel
@@ -47,6 +48,7 @@
   on:close
   {allowClose}
   {floatAside}
+  {useMaxWidth}
 >
   <svelte:fragment slot="navigator">
     {#if $$slots.navigator}
@@ -127,19 +129,19 @@
         <slot />
       </div>
     {:else}
-      <div class="popupPanel-body__main-content py-8 clear-mins">
+      <div class="popupPanel-body__main-content py-8 clear-mins" class:max={useMaxWidth}>
         <slot />
       </div>
     {/if}
   {:else if $deviceInfo.isMobile}
-    <div class="popupPanel-body__mobile-content clear-mins">
+    <div class="popupPanel-body__mobile-content clear-mins" class:max={useMaxWidth}>
       <Component is={activity.component.Activity} props={{ object, integrate: true }}>
         <slot />
       </Component>
     </div>
   {:else}
     <Scroller>
-      <div class="popupPanel-body__main-content py-8 clear-mins">
+      <div class="popupPanel-body__main-content py-8 clear-mins" class:max={useMaxWidth}>
         <Component is={activity.component.Activity} props={{ object, integrate: true }}>
           <slot />
         </Component>
diff --git a/packages/text-editor/src/components/CollaboratorEditor.svelte b/packages/text-editor/src/components/CollaboratorEditor.svelte
index bc1f82f66c..201efd4e44 100644
--- a/packages/text-editor/src/components/CollaboratorEditor.svelte
+++ b/packages/text-editor/src/components/CollaboratorEditor.svelte
@@ -576,6 +576,11 @@
             editor.chain().focus()
           }}
         />
+        <slot name="tools" />
+      </div>
+    {:else}
+      <div class="formatPanel buttons-group xsmall-gap mb-4">
+        <slot name="tools" />
       </div>
     {/if}
   </div>
diff --git a/packages/text-editor/src/components/ReferenceInput.svelte b/packages/text-editor/src/components/ReferenceInput.svelte
index 8027b82c92..2d2bf0e771 100644
--- a/packages/text-editor/src/components/ReferenceInput.svelte
+++ b/packages/text-editor/src/components/ReferenceInput.svelte
@@ -296,6 +296,7 @@
   </div>
   <div class="buttons-group large-gap ml-4 mt-2">
     {#each actions as a}
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
       <div class="icon-button" on:click={(evt) => handleAction(a, evt)}>
         <Icon icon={a.icon} size={'medium'} />
       </div>
diff --git a/packages/text-editor/src/components/StyledTextArea.svelte b/packages/text-editor/src/components/StyledTextArea.svelte
index d166a68e0a..e36f0a4322 100644
--- a/packages/text-editor/src/components/StyledTextArea.svelte
+++ b/packages/text-editor/src/components/StyledTextArea.svelte
@@ -39,6 +39,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="antiComponent styled-box clear-mins"
   on:click={() => {
diff --git a/packages/theme/styles/panel.scss b/packages/theme/styles/panel.scss
index 2bddea3d87..2211c07d4e 100644
--- a/packages/theme/styles/panel.scss
+++ b/packages/theme/styles/panel.scss
@@ -144,6 +144,10 @@
         margin-right: auto;
         width: calc(100% - 7.5rem);
         max-width: 860px;
+
+        &.max {
+          max-width: 100%;
+        }
       }
     }
 
@@ -156,6 +160,10 @@
         padding: .75rem 1.25rem;
         width: calc(100% - 5rem);
         max-width: 900px;
+
+        &.max {
+          max-width: 100%;
+        }
       }
       &.mobile {
         flex-shrink: 0;
diff --git a/packages/ui/src/components/Panel.svelte b/packages/ui/src/components/Panel.svelte
index c668851c8b..58482d8792 100644
--- a/packages/ui/src/components/Panel.svelte
+++ b/packages/ui/src/components/Panel.svelte
@@ -31,6 +31,7 @@
   export let withoutTitle: boolean = false
   export let floatAside = false
   export let allowClose = true
+  export let useMaxWidth = false
 
   const dispatch = createEventDispatcher()
 
@@ -118,7 +119,7 @@
           }}
         >
           {#if $$slots.header && isHeader}
-            <div class="popupPanel-body__header mobile bottom-divider">
+            <div class="popupPanel-body__header mobile bottom-divider" class:max={useMaxWidth}>
               <slot name="header" />
             </div>
           {/if}
@@ -133,7 +134,7 @@
         }}
       >
         {#if $$slots.header && isHeader}
-          <div class="popupPanel-body__header main bottom-divider">
+          <div class="popupPanel-body__header main bottom-divider" class:max={useMaxWidth}>
             <slot name="header" />
           </div>
         {/if}