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

fix: use word-break break-word only and update text editor height only when binded to container (#4410)

Browse Source
This commit is contained in:
Aakansha Doshi 2021-12-17 15:24:23 +05:30 committed by GitHub
parent 98b5c37e45
commit ff1d7728a0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/element/textWysiwyg.tsx
View File

@ -6,7 +6,7 @@ import {
getFontFamilyString, getFontFamilyString,
} from "../utils"; } from "../utils";
import Scene from "../scene/Scene"; import Scene from "../scene/Scene";
import { isTextElement } from "./typeChecks"; import { isBoundToContainer, isTextElement } from "./typeChecks";
import { CLASSES, PADDING } from "../constants"; import { CLASSES, PADDING } from "../constants";
import { import {
ExcalidrawBindableElement, ExcalidrawBindableElement,
@ -225,8 +225,11 @@ export const textWysiwyg = ({
editable.classList.add("excalidraw-wysiwyg"); editable.classList.add("excalidraw-wysiwyg");
let whiteSpace = "pre"; let whiteSpace = "pre";
if (isTextElement(element)) { let wordBreak = "normal";
whiteSpace = element.containerId ? "pre-wrap" : "pre";
if (isBoundToContainer(element)) {
whiteSpace = "pre-wrap";
wordBreak = "break-word";
} }
Object.assign(editable.style, { Object.assign(editable.style, {
position: "absolute", position: "absolute",
@ -242,7 +245,7 @@ export const textWysiwyg = ({
overflow: "hidden", overflow: "hidden",
// must be specified because in dark mode canvas creates a stacking context // must be specified because in dark mode canvas creates a stacking context
zIndex: "var(--zIndex-wysiwyg)", zIndex: "var(--zIndex-wysiwyg)",
wordBreak: "break-word", wordBreak,
// prevent line wrapping (`whitespace: nowrap` doesn't work on FF) // prevent line wrapping (`whitespace: nowrap` doesn't work on FF)
whiteSpace, whiteSpace,
overflowWrap: "break-word", overflowWrap: "break-word",
@ -251,8 +254,10 @@ export const textWysiwyg = ({
if (onChange) { if (onChange) {
editable.oninput = () => { editable.oninput = () => {
editable.style.height = "auto"; if (isBoundToContainer(element)) {
editable.style.height = `${editable.scrollHeight}px`; editable.style.height = "auto";
editable.style.height = `${editable.scrollHeight}px`;
}
onChange(normalizeText(editable.value)); onChange(normalizeText(editable.value));
}; };
} }