smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: don't mutate the bounded text if not updated when submitted (#4543)

Browse source 
* fix: don't mutate the bounded text if not updated when submitted

* dont update text for bounded text unless submitted

* add specs

* use node 16

* fix

* Update text when editing and cache prev text

* update prev text when props updated

* remove only

* type properly and remove unnecessary type checks

* cache original text and compare with editor value to fix alignement issue after editing and add specs

* naming tweak

Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Aakansha Doshi 2022-01-11 16:36:08 +05:30 • committed by GitHub
parent 62bead66d7
commit 50bd5fbae1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 426 additions and 166 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/element/textWysiwyg.tsx
View file

@ -3,6 +3,7 @@ import {
isWritableElement,
getFontString,
getFontFamilyString,
isTestEnv,
} from "../utils";
import Scene from "../scene/Scene";
import { isBoundToContainer, isTextElement } from "./typeChecks";
@ -72,7 +73,7 @@ export const textWysiwyg = ({
originalText: string;
}) => void;
getViewportCoords: (x: number, y: number) => [number, number];
element: ExcalidrawElement;
element: ExcalidrawTextElement;
canvas: HTMLCanvasElement | null;
excalidrawContainer: HTMLDivElement | null;
}) => {
@ -93,10 +94,9 @@ export const textWysiwyg = ({
return false;
};
let originalContainerHeight: number;
let approxLineHeight = isTextElement(element)
? getApproxLineHeight(getFontString(element))
: 0;
let approxLineHeight = getApproxLineHeight(getFontString(element));
const initialText = element.originalText;
const updateWysiwygStyle = () => {
const updatedElement = Scene.getScene(element)?.getElement(id);
if (updatedElement && isTextElement(updatedElement)) {
@ -123,9 +123,7 @@ export const textWysiwyg = ({
height = editorHeight;
}
if (propertiesUpdated) {
approxLineHeight = isTextElement(updatedElement)
? getApproxLineHeight(getFontString(updatedElement))
: 0;
approxLineHeight = getApproxLineHeight(getFontString(updatedElement));
originalContainerHeight = container.height;
@ -164,7 +162,7 @@ export const textWysiwyg = ({
}
const [viewportX, viewportY] = getViewportCoords(coordX, coordY);
const { textAlign } = updatedElement;
editable.value = updatedElement.originalText || updatedElement.text;
editable.value = updatedElement.originalText;
const lines = updatedElement.originalText.split("\n");
const lineHeight = updatedElement.containerId
? approxLineHeight
@ -217,6 +215,11 @@ export const textWysiwyg = ({
maxWidth: `${maxWidth}px`,
maxHeight: `${editorMaxHeight}px`,
});
// For some reason updating font attribute doesn't set font family
// hence updating font family explicitly for test environment
if (isTestEnv()) {
editable.style.fontFamily = getFontFamilyString(updatedElement);
}
}
};
@ -450,18 +453,23 @@ export const textWysiwyg = ({
getFontString(updateElement),
container.width,
);
if (isTextElement(updateElement) && updateElement.containerId) {
if (updateElement.containerId) {
const editorHeight = Number(editable.style.height.slice(0, -2));
if (editable.value) {
mutateElement(updateElement, {
// vertically center align
y: container.y + container.height / 2 - editorHeight / 2,
height: editorHeight,
width: Number(editable.style.width.slice(0, -2)),
// preserve padding
x: container.x + BOUND_TEXT_PADDING,
angle: container.angle,
});
// Don't mutate if text is not updated
if (initialText !== editable.value) {
mutateElement(updateElement, {
// vertically center align
y: container.y + container.height / 2 - editorHeight / 2,
height: editorHeight,
width: Number(editable.style.width.slice(0, -2)),
// preserve padding
x: container.x + BOUND_TEXT_PADDING,
angle: container.angle,
});
}
const boundTextElementId = getBoundTextElementId(container);
if (!boundTextElementId || boundTextElementId !== element.id) {
mutateElement(container, {