fix: remove background from wysiwyg when editing arrow label (excalid…

…raw#6033)

Co-authored-by: Aakansha Doshi <[email protected]>

src/element/textWysiwyg.tsx

@@ -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)",

src/tests/__snapshots__/linearElementEditor.test.tsx.snap

@@ -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"
+/>
+`;

src/tests/linearElementEditor.test.tsx

@@ -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;