fix: LEAP-878: Fix shrinking textarea on edit (#5665)

We have TextArea's HtxTextBox (input when you edit text block) updating
its height on edit. That was to auto-increase height of multiline
blocks. But we stopped taking borders into account some time ago
(HumanSignal/label-studio-frontend@c8417d5).
Returning it back and fixing condition for empty scrollHeight fixes
shrinking input.

+ fix position for "Delete Region" icon — it's in the middle now

<img width="486" alt="Screenshot 2024-04-03 at 16 02 11"
src="https://github.com/HumanSignal/label-studio/assets/1607227/fe3fae2d-4006-413f-aa4e-5dd0991f68e8">


### PR fulfills these requirements
- [ ] Tests for the changes have been added/updated
- [ ] Docs have been added/updated
- [ ] Best efforts were made to ensure docs/code are concise and
coherent (checked for spelling/grammatical errors, commented out code,
debug logs etc.)
- [x] Self-reviewed and ran all changes on a local instance

### Describe the reason for change
Inputs and textareas used to edit `TextArea` tag text blocks were
shrinking every time you type something into them.

### This change affects (describe how if yes)
- [ ] Performance
- [ ] Security
- [x] UX

### Does this PR introduce a breaking change?
- [ ] Yes, and covered entirely by feature flag(s)
- [ ] Yes, and covered partially by feature flag(s)
- [x] No
- [ ] Not sure (briefly explain the situation below)

### What level of testing was included in the change?
- [ ] e2e (codecept)
- [ ] integration (cypress)
- [ ] unit (jest)

---------

Co-authored-by: robot-ci-heartex <robot-ci-heartex@users.noreply.github.com>
Co-authored-by: hlomzik <hlomzik@users.noreply.github.com>

web/dist/apps/labelstudio/version.json

@@ -1,6 +1,6 @@
 {
-  "message": "fix: LEAP-849: LEAP-933: Security vulnerability fixes",
-  "commit": "f0086f25c287f6efc5e27acd87bb0587f0316a3f",
-  "date": "2024-04-09T17:49:03.000Z",
-  "branch": "fb-leap-849"
+  "message": "Merge branch 'develop' into 'fb-leap-878/textarea-height'",
+  "commit": "b658f627980cf5816a20682b1a529c7273a1ee86",
+  "date": "2024-04-09T19:14:55.000Z",
+  "branch": "fb-leap-878/textarea-height"
 }

web/dist/libs/datamanager/version.json

@@ -1,6 +1,6 @@
 {
-  "message": "fix: LEAP-849: LEAP-933: Security vulnerability fixes",
-  "commit": "f0086f25c287f6efc5e27acd87bb0587f0316a3f",
-  "date": "2024-04-09T17:49:03.000Z",
-  "branch": "fb-leap-849"
+  "message": "Merge branch 'develop' into 'fb-leap-878/textarea-height'",
+  "commit": "b658f627980cf5816a20682b1a529c7273a1ee86",
+  "date": "2024-04-09T19:14:55.000Z",
+  "branch": "fb-leap-878/textarea-height"
 }

web/dist/libs/editor/version.json

@@ -1,6 +1,6 @@
 {
-  "message": "fix: LEAP-849: LEAP-933: Security vulnerability fixes",
-  "commit": "f0086f25c287f6efc5e27acd87bb0587f0316a3f",
-  "date": "2024-04-09T17:49:03.000Z",
-  "branch": "fb-leap-849"
+  "message": "Merge branch 'develop' into 'fb-leap-878/textarea-height'",
+  "commit": "b658f627980cf5816a20682b1a529c7273a1ee86",
+  "date": "2024-04-09T19:14:55.000Z",
+  "branch": "fb-leap-878/textarea-height"
 }

web/libs/editor/src/components/HtxTextBox/HtxTextBox.js

@@ -6,6 +6,8 @@ import throttle from 'lodash.throttle';
 import { FF_DEV_1566, isFF } from '../../utils/feature-flags';
 
 const { Paragraph } = Typography;
+// used for correct auto-height calculation
+const BORDER_WIDTH = 1;
 
 export class HtxTextBox extends React.Component {
   state = {
@@ -85,9 +87,12 @@ export class HtxTextBox extends React.Component {
   };
 
   updateHeight = throttle(() => {
-    const height = this.inputRef.current?.scrollHeight || 0;
+    // very important to add borders to the height, otherwise input will be shrinking on every recalc
+    const scrollHeight = this.inputRef.current?.scrollHeight ?? 0;
+    const height = scrollHeight + BORDER_WIDTH * 2;
 
-    if (height && height !== this.state.height) {
+    // initially scrollHeight can be 0, so we won't change height
+    if (scrollHeight && height !== this.state.height) {
       this.setState({ height });
     }
   }, 100);
@@ -114,7 +119,7 @@ export class HtxTextBox extends React.Component {
     const inputProps = {
       name,
       className: 'ant-input ' + styles.input,
-      style: height ? { height } : null,
+      style: height ? { height, borderWidth: BORDER_WIDTH } : null,
       autoFocus: true,
       ref: this.inputRef,
       value,

web/libs/editor/src/components/HtxTextBox/HtxTextBox.module.scss

@@ -1,6 +1,7 @@
 .input {
   width: 100%;
   padding: 0.4em 1em;
+  border-width: 1px;
   display: block;
 }
 
@@ -15,7 +16,8 @@
 
 .delete {
   color: #1890ff;
-  padding-top: 0.5em;
+  // Typography.Paragraph has margin-bottom: 1em, so we have to compensate it to have icon in the middle
+  margin-top: -1em;
   padding-left: 1em;
   line-height: 1.8em;
 }