From 8e6a747873a180a243cf5c467152ac2a70d02daa Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Tue, 21 Dec 2021 23:08:36 +0530
Subject: [PATCH] fix: vertically center the first line as user starts typing
in container (#4454)
* fix: vertically center the first line as user starts typing in container
* fix
---
src/element/textWysiwyg.tsx | 13 ++++++++-----
1 file changed, 8 insertions(+), 5 deletions(-)
diff --git a/src/element/textWysiwyg.tsx b/src/element/textWysiwyg.tsx
index 0607c780b..4144d35c4 100644
--- a/src/element/textWysiwyg.tsx
+++ b/src/element/textWysiwyg.tsx
@@ -165,10 +165,8 @@ export const textWysiwyg = ({
// is reached
else {
const lines = editable.scrollHeight / approxLineHeight;
- // For some reason the scrollHeight gets set to twice the lineHeight
- // when you start typing for first time and thus line count is 2
- // hence this check
- if (lines > 2 || propertiesUpdated) {
+
+ if (lines > 1 || propertiesUpdated) {
// vertically center align the text
coordY =
container.y + container.height / 2 - editable.scrollHeight / 2;
@@ -272,7 +270,12 @@ export const textWysiwyg = ({
if (onChange) {
editable.oninput = () => {
- if (isBoundToContainer(element)) {
+ const lines = editable.scrollHeight / approxLineHeight;
+ // auto increase height only when lines > 1 so its
+ // measured correctly and vertically alignes for
+ // first line as well as setting height to "auto"
+ // doubles the height as soon as user starts typing
+ if (isBoundToContainer(element) && lines > 1) {
editable.style.height = "auto";
editable.style.height = `${editable.scrollHeight}px`;
}