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

fix: remove background from wysiwyg when editing arrow label (#6033)

Browse Source 
Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>
This commit is contained in:
David Luzar 2022-12-23 19:40:52 +01:00 committed by GitHub
parent af3b93c410
commit 5fcf6a4845
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/element/textWysiwyg.tsx
View File

@ -325,8 +325,6 @@ export const textWysiwyg = ({
whiteSpace = "pre-wrap";
wordBreak = "break-word";
}
const isContainerArrow = isArrowElement(getContainerElement(element));
const background = isContainerArrow ? "#fff" : "transparent";
Object.assign(editable.style, {
position: "absolute",
display: "inline-block",
@ -337,7 +335,7 @@ export const textWysiwyg = ({
border: 0,
outline: 0,
resize: "none",
background,
background: "transparent",
overflow: "hidden",
// must be specified because in dark mode canvas creates a stacking context
zIndex: "var(--zIndex-wysiwyg)",

12
src/tests/__snapshots__/linearElementEditor.test.tsx.snap Normal file
View File

@ -0,0 +1,12 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Test Linear Elements Test bound text element should match styles for text editor 1`] = `
<textarea
class="excalidraw-wysiwyg"
data-type="wysiwyg"
dir="auto"
style="position: absolute; display: inline-block; min-height: 1em; margin: 0px; padding: 0px; border: 0px; outline: 0; resize: none; background: transparent; overflow: hidden; z-index: var(--zIndex-wysiwyg); word-break: break-word; white-space: pre-wrap; overflow-wrap: break-word; box-sizing: content-box; width: 0px; height: 0px; left: 40px; top: 20px; transform: translate(0px, 0px) scale(1) rotate(0deg); text-align: center; vertical-align: middle; color: rgb(0, 0, 0); opacity: 1; filter: var(--theme-filter); max-height: -20px; font: Emoji 20px 20px; line-height: 0px; font-family: Virgil, Segoe UI Emoji;"
tabindex="0"
wrap="off"
/>
`;

9
src/tests/linearElementEditor.test.tsx
View File

@ -829,6 +829,15 @@ describe("Test Linear Elements", () => {
});
});
it("should match styles for text editor", () => {
createTwoPointerLinearElement("arrow");
Keyboard.keyPress(KEYS.ENTER);
const editor = document.querySelector(
".excalidraw-textEditorContainer > textarea",
) as HTMLTextAreaElement;
expect(editor).toMatchSnapshot();
});
it("should bind text to arrow when double clicked", async () => {
createTwoPointerLinearElement("arrow");
const arrow = h.elements[0] as ExcalidrawLinearElement;