sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: vertically center the first line as user starts typing in container (#4454)

Browse Source 
* fix: vertically center the first line as user starts typing in container

* fix
This commit is contained in:
Aakansha Doshi 2021-12-21 23:08:36 +05:30 committed by GitHub
parent 089b05db1b
commit 8e6a747873
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/element/textWysiwyg.tsx
View File

@ -165,10 +165,8 @@ export const textWysiwyg = ({
// is reached // is reached
else { else {
const lines = editable.scrollHeight / approxLineHeight; 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 if (lines > 1 || propertiesUpdated) {
// hence this check
if (lines > 2 || propertiesUpdated) {
// vertically center align the text // vertically center align the text
coordY = coordY =
container.y + container.height / 2 - editable.scrollHeight / 2; container.y + container.height / 2 - editable.scrollHeight / 2;
@ -272,7 +270,12 @@ export const textWysiwyg = ({
if (onChange) { if (onChange) {
editable.oninput = () => { 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 = "auto";
editable.style.height = `${editable.scrollHeight}px`; editable.style.height = `${editable.scrollHeight}px`;
} }