Update actionProperties.tsx

src/actions/actionProperties.tsx

@@ -201,12 +201,23 @@ export const actionChangeStrokeColor = register({
   name: "changeStrokeColor",
   trackEvent: false,
   perform: (elements, appState, value) => {
+    const containers = getSelectedElements(elements, appState, false)
+      .filter((el) => el.boundElements)
+      .map((el) => el.id);
     return {
       ...(value.currentItemStrokeColor && {
         elements: changeProperty(
           elements,
           appState,
           (el) => {
+            if (
+              isTextElement(el) &&
+              el.containerId &&
+              containers.includes(el.containerId) &&
+              getContainerElement(el)?.strokeColor !== el.strokeColor
+            ) {
+              return el;
+            }
             return hasStrokeColor(el.type)
               ? newElementWith(el, {
                   strokeColor: value.currentItemStrokeColor,

src/element/textWysiwyg.tsx

@@ -325,6 +325,8 @@ 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",
@@ -335,7 +337,7 @@ export const textWysiwyg = ({
     border: 0,
     outline: 0,
     resize: "none",
-    background: "transparent",
+    background,
     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

@@ -1,12 +0,0 @@
-// 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,15 +829,6 @@ 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;