Height limitation of StyledTextEditor (#2125)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

packages/text-editor/src/components/StyledTextBox.svelte

@@ -13,6 +13,7 @@
   export let emphasized = false
   export let alwaysEdit = false
   export let showButtons = true
+  export let maxHeight: 'max' | 'card' | string = 'max'
 
   let rawValue: string
   let oldContent = ''
@@ -61,6 +62,7 @@
     <StyledTextEditor
       {placeholder}
       {showButtons}
+      {maxHeight}
       bind:content={rawValue}
       bind:this={textEditor}
       on:focus={() => {

packages/text-editor/src/components/StyledTextEditor.svelte

@@ -15,7 +15,7 @@
 <script lang="ts">
   import { IntlString } from '@anticrm/platform'
 
-  import { ScrollBox, showPopup } from '@anticrm/ui'
+  import { Scroller, showPopup } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
   import Emoji from './icons/Emoji.svelte'
   import GIF from './icons/GIF.svelte'
@@ -30,6 +30,7 @@
   export let placeholder: IntlString = textEditorPlugin.string.EditorPlaceholder
   export let showButtons = true
   export let isScrollable = true
+  export let maxHeight: 'max' | 'card' | string = 'max'
 
   let textEditor: TextEditor
 
@@ -46,13 +47,14 @@
       textEditor.insertText(emoji)
     })
   }
+  $: varsStyle = maxHeight === 'card' ? 'calc(70vh - 12.5rem)' : maxHeight === 'max' ? 'max-content' : maxHeight
 </script>
 
 <div class="ref-container">
   <div class="textInput">
-    <div class="inputMsg">
+    <div class="inputMsg" class:scrollable={isScrollable} style="--texteditor-maxheight: {varsStyle};">
       {#if isScrollable}
-        <ScrollBox bothScroll stretch>
+        <Scroller>
           <TextEditor
             bind:content
             {placeholder}
@@ -67,7 +69,7 @@
             on:focus
             supportSubmit={false}
           />
-        </ScrollBox>
+        </Scroller>
       {:else}
         <TextEditor
           bind:content
@@ -116,7 +118,7 @@
       .inputMsg {
         align-self: stretch;
         width: 100%;
-        color: var(--theme-content-color);
+        color: var(--content-color);
         background-color: transparent;
 
         :global(.ProseMirror) {
@@ -124,6 +126,11 @@
           max-height: 100%;
           height: 100%;
         }
+
+        &.scrollable {
+          overflow: auto;
+          max-height: var(--texteditor-maxheight);
+        }
       }
     }
     .buttons {

packages/text-editor/src/components/TextEditor.svelte

@@ -181,7 +181,7 @@
   })
 </script>
 
-<div style="width: 100%;" bind:this={element} />
+<div class="select-text" style="width: 100%;" bind:this={element} />
 
 <style lang="scss" global>
   .ProseMirror {

plugins/attachment-resources/src/components/AttachmentStyledBox.svelte

@@ -30,6 +30,7 @@
   export let placeholder: IntlString | undefined = undefined
   export let alwaysEdit = false
   export let showButtons = false
+  export let maxHeight: 'max' | 'card' | string = 'max'
 
   export function attach (): void {
     inputFile.click()
@@ -185,12 +186,12 @@
 />
 
 <div
-  class="container"
+  class="flex-col"
   on:dragover|preventDefault={() => {}}
   on:dragleave={() => {}}
   on:drop|preventDefault|stopPropagation={fileDrop}
 >
-  <StyledTextBox bind:this={refInput} bind:content {placeholder} {alwaysEdit} {showButtons} />
+  <StyledTextBox bind:this={refInput} bind:content {placeholder} {alwaysEdit} {showButtons} {maxHeight} />
   {#if attachments.size}
     <div class="flex-row-center list scroll-divider-color">
       {#each Array.from(attachments.values()) as attachment}

plugins/tracker-resources/src/components/CreateIssue.svelte

@@ -275,6 +275,7 @@
     space={_space}
     alwaysEdit
     showButtons={false}
+    maxHeight={'card'}
     bind:content={object.description}
     placeholder={tracker.string.IssueDescriptionPlaceholder}
   />

plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte

@@ -247,8 +247,8 @@
           {/if}
         </div>
       {/if}
-      <span class="title">{title}</span>
-      <div class="mt-6 description-preview">
+      <span class="title select-text">{title}</span>
+      <div class="mt-6 description-preview select-text">
         {#if isDescriptionEmpty}
           <div class="placeholder" on:click={edit}>
             <Label label={tracker.string.IssueDescriptionPlaceholder} />