fix: text editor not visible in dark mode (#2920)

src/components/LayerUI.scss

@@ -38,6 +38,8 @@
   }
 
   .layer-ui__wrapper {
+    z-index: var(--zIndex-layerUI);
+
     .encrypted-icon {
       position: relative;
       margin-inline-start: 15px;

src/components/MobileMenu.tsx

@@ -48,7 +48,7 @@ export const MobileMenu = ({
 }: MobileMenuProps) => {
   const renderFixedSideContainer = () => {
     return (
-      <FixedSideContainer side="top">
+      <FixedSideContainer side="top" className="App-top-bar">
         <Section heading="shapes">
           {(heading) => (
             <Stack.Col gap={4} align="center">

src/css/styles.scss

@@ -1,6 +1,12 @@
 @import "./variables.module";
 @import "./theme";
 
+:root {
+  --zIndex-canvas: 1;
+  --zIndex-wysiwyg: 2;
+  --zIndex-layerUI: 3;
+}
+
 .excalidraw {
   color: var(--text-color-primary);
   display: flex;
@@ -30,6 +36,8 @@
     image-rendering: pixelated; // chromium
     // NOTE: must be declared *after* the above
     image-rendering: -moz-crisp-edges; // FF
+
+    z-index: var(--zIndex-canvas);
   }
 
   &.Appearance_dark {
@@ -216,6 +224,10 @@
     }
   }
 
+  .App-top-bar {
+    z-index: var(--zIndex-layerUI);
+  }
+
   .App-bottom-bar {
     position: absolute;
     top: 0;

src/element/textWysiwyg.tsx

@@ -89,9 +89,6 @@ export const textWysiwyg = ({
   editable.dataset.type = "wysiwyg";
   // prevent line wrapping on Safari
   editable.wrap = "off";
-  editable.className = `excalidraw ${
-    appState.appearance === "dark" ? "Appearance_dark" : ""
-  }`;
 
   Object.assign(editable.style, {
     position: "fixed",
@@ -107,6 +104,8 @@ export const textWysiwyg = ({
     overflow: "hidden",
     // prevent line wrapping (`whitespace: nowrap` doesn't work on FF)
     whiteSpace: "pre",
+    // must be specified because in dark mode canvas creates a stacking context
+    zIndex: "var(--zIndex-wysiwyg)",
   });
 
   updateWysiwygStyle();