fix: welcome screen z-index, crosscheck env's, fixing text display bug in dark mode while typing

Author: coderomm

apps/collabydraw/app/globals.css

@@ -736,6 +736,10 @@ button {
   z-index: 2;
 }
 
+.dark .collabydraw-textEditorContainer textarea{
+  filter: var(--theme-filter);
+}
+
 .canvas-bg-color-item {
   filter: var(--theme-filter);
 }

apps/collabydraw/canvas-engine/CanvasEngine.ts

@@ -1030,7 +1030,7 @@ export class CanvasEngine {
     let span: HTMLSpanElement | null = null;
 
     const resizeTextarea = () => {
-      if (span) {
+      if (span && document.body.contains(span)) {
         document.body.removeChild(span);
       }
 
@@ -1070,16 +1070,20 @@ export class CanvasEngine {
       const text = textarea.value.trim();
       if (!text) {
         textarea.remove();
-        document.body.removeChild(span!);
+        if (span && document.body.contains(span)) {
+          document.body.removeChild(span);
+        }
         return;
       }
-
+      if (!span) {
+        throw new Error("Span is null");
+      }
       const newShape: Shape = {
         id: uuidv4(),
         type: "text",
         x: x,
         y: y,
-        width: span!.offsetWidth,
+        width: span.offsetWidth,
         text,
         fontSize: this.fontSize,
         fontFamily: this.fontFamily,
@@ -1109,7 +1113,9 @@ export class CanvasEngine {
 
       if (collabydrawContainer?.contains(textarea)) {
         collabydrawContainer.removeChild(textarea);
-        document.body.removeChild(span!);
+        if (span && document.body.contains(span)) {
+          document.body.removeChild(span);
+        }
       }
 
       this.clearCanvas();

apps/collabydraw/components/CollaborationToolbar.tsx

@@ -31,7 +31,11 @@ export default function CollaborationToolbar({ participants, hash }: { participa
     }, [hash]);
 
     const getSharingUrl = () => {
-        return getRoomSharingUrl(BASE_URL, decodedPathname, hash ?? '');
+        if (!BASE_URL) {
+            throw new Error("BASE_URL not found")
+        } else {
+            return getRoomSharingUrl(BASE_URL, decodedPathname, hash ?? '');
+        }
     };
 
     return (

apps/collabydraw/components/canvas/CanvasBoard.tsx

@@ -18,7 +18,6 @@ import { StyleConfigurator } from "../StyleConfigurator";
 import ToolSelector from "../ToolSelector";
 import CollaborationToolbar from "../CollaborationToolbar";
 import ZoomControl from "../ZoomControl";
-import CollabydrawTextEditorContainer from "../Collabydraw-TextEditorContainer";
 import { HomeWelcome, MainMenuWelcome, ToolMenuWelcome } from "../welcome-screen";
 import EncryptedWidget from "../EncryptedWidget";
 
@@ -381,7 +380,7 @@ export default function CanvasBoard() {
                 <EncryptedWidget />
             )}
 
-            <CollabydrawTextEditorContainer />
+            <div className="collabydraw-textEditorContainer"></div>
 
             {!matches && (
                 <MobileCommandBar

apps/collabydraw/components/welcome-screen.tsx

@@ -30,7 +30,7 @@ export function ToolMenuWelcome() {
 export function HomeWelcome() {
     return (
         <>
-            <div className="welcome-screen-center z-[4]">
+            <div className="welcome-screen-center z-[3]">
                 <div className="welcome-screen-center__logo excalifont welcome-screen-decor">
                     <div className="ExcalidrawLogo is-small">
                         <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" className="ExcalidrawLogo-icon">

apps/collabydraw/config/constants.ts

@@ -16,5 +16,5 @@ export const getDashArrayDotted = (strokeWidth: number) => [
 ];
 
 export const BASE_URL =
-  process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000";
-export const WS_URL = process.env.NEXT_PUBLIC_WS_URL || "ws://localhost:8080";
+  process.env.NEXT_PUBLIC_BASE_URL;
+export const WS_URL = process.env.NEXT_PUBLIC_WS_URL;