77b49dc Auto-resize textarea height on user input — radicle-explorer

Radicle web interface

Auto-resize textarea height on user input

Rūdolfs Ošiņš committed 2 years ago

commit 77b49dcb601fe3accf1037b6b38b62b01766dff7
parent 5beab80fb89d2e896a28ec6a9729e1ccae885c56

4 files changed +16 -16

modified src/components/CommentTextarea.svelte

@@ -115,9 +115,10 @@

   }
   .preview {
     font-size: var(--font-size-small);
     padding-top: 1rem;
     padding-left: 1rem;
     min-height: 5rem;
     min-height: 6.375rem;
     padding: 0.75rem;
     margin-left: 1px;
     margin-top: 1px;
   }
   .inactive {
     box-shadow: 0 0 0 1px var(--color-border-hint);

@@ -166,7 +167,6 @@

         bind:selectionEnd
         bind:selectionStart
         {focus}
         resizable
         on:submit={submit}
         bind:value={commentBody}
         {placeholder} />

modified src/components/Markdown.svelte

@@ -218,7 +218,7 @@

   }
   .markdown :global(p) {
     line-height: 1.625;
     line-height: 1.625rem;
     margin-top: 0;
     margin-bottom: 0.625rem;
   }

modified src/components/Textarea.svelte

@@ -2,17 +2,21 @@

   import { afterUpdate, beforeUpdate, createEventDispatcher } from "svelte";
   import { isMac } from "@app/lib/utils";
   export let resizable: boolean = false;
   export let value: string | number | undefined = undefined;
   export let placeholder: string | undefined = undefined;
   export let focus: boolean = false;
   // If `false` we automatically grow the textarea height.
   // If `true` we show a resize handle on the lower right-hand side of the
   // textarea to allow resizing the textarea manually.
   export let resizable: boolean = false;
   // Defaulting selectionStart and selectionEnd to 0, since no full support yet.
   export let selectionStart = 0;
   export let selectionEnd = 0;
   export let selectionStart: number = 0;
   export let selectionEnd: number = 0;
   let textareaElement: HTMLTextAreaElement | undefined = undefined;
   // We either auto-grow the text area, or allow the user to resize it. These
   // We either auto-grow the textarea, or allow the user to resize it. These
   // options are mutually exclusive because a user resized textarea would
   // automatically shrink upon text input otherwise.
   $: if (textareaElement && !resizable) {

@@ -66,11 +70,12 @@

     border-radius: var(--border-radius-small);
     font-family: inherit;
     height: 5rem;
     padding: 1rem;
     padding: 0.75rem;
     width: 100%;
     min-height: 2.5rem;
     min-height: 6.375rem;
     resize: none;
     overflow: hidden;
     line-height: 1.625rem;
   }
   .resizable {

@@ -78,10 +83,6 @@

     overflow: scroll;
   }
   textarea::-webkit-scrollbar {
     display: none;
   }
   textarea::-webkit-scrollbar-corner {
     background-color: transparent;
   }

modified src/views/projects/Issue/New.svelte

@@ -168,7 +168,6 @@

             <svelte:fragment slot="description">
               {#if action === "create"}
                 <Textarea
                   resizable
                   bind:selectionStart
                   bind:selectionEnd
                   on:drop={handleFileDrop}