feat: add language support

client/.env.example

@@ -1,2 +1,3 @@
 VITE_WS_URL="ws://localhost:1234/ws"
 VITE_API_URL="http://localhost:8080"
+VITE_LANGUAGE="en"

client/src/App.css

@@ -6,16 +6,21 @@ body {
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 }
 
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
 * {
   box-sizing: border-box;
 }
 
 .tldraw {
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
   width: 100%;
   height: 100%;
 }

client/src/App.tsx

@@ -1,13 +1,15 @@
 import Editor from "./components/Editor";
 import "./App.css";
 
+const { VITE_LANGUAGE } = import.meta.env;
+
 export default function App() {
   const urlParams = window.location.pathname.slice(1).split("/");
   const roomId = urlParams[0] === "r" ? urlParams[1] : undefined;
 
   return (
     <div className="tldraw">
-      <Editor roomId={roomId} />
+      <Editor roomId={roomId} language={VITE_LANGUAGE} />
     </div>
   );
 }

client/src/components/Editor.tsx

@@ -1,59 +1,61 @@
-import { Tldraw, TldrawProps, useFileSystem } from "@tldraw/tldraw";
+import { Tldraw, TldrawApp, useFileSystem } from "@tldraw/tldraw";
 import { useAssets } from "../hooks/useAssets";
 import { useMultiplayer } from "../hooks/useMultiplayer";
 import { initProvider } from "../utils/y";
 import { CustomCursor } from "./Cursor";
 import PropTypes from "prop-types";
-
-interface Props {
-  roomId: string | undefined;
-  readOnly?: boolean;
-}
+import { Default, Multiplayer, Settings } from "../types/types";
 
 Editor.propTypes = {
   roomId: PropTypes.string,
   readOnly: PropTypes.string,
+  language: PropTypes.string,
 };
 
 const components = {
   Cursor: CustomCursor,
 };
 
-function Editor({ roomId, readOnly }: Props) {
-  let editor = <DefaultEditor />;
+function Editor({ roomId, readOnly, language }: Settings) {
+  language = language || "en";
+  let editor = <DefaultEditor language={language} />;
   if (roomId) {
     initProvider(roomId);
     editor = readOnly ? (
-      <MultiplayerReadOnlyEditor roomId={roomId} />
+      <MultiplayerReadOnlyEditor roomId={roomId} language={language} />
     ) : (
-      <MultiplayerEditor roomId={roomId} />
+      <MultiplayerEditor roomId={roomId} language={language} />
     );
   }
 
   return editor;
 }
 
-function DefaultEditor({ ...rest }: Partial<TldrawProps>) {
+function DefaultEditor({ language }: Default) {
   const fileSystemEvents = useFileSystem();
   const { onAssetCreate, onAssetDelete, onAssetUpload } = useAssets();
 
+  const handleMount = (app: TldrawApp) => {
+    app.setSetting("language", language);
+  };
+
   return (
     <Tldraw
       autofocus
+      onMount={handleMount}
       components={components}
       onAssetCreate={onAssetCreate}
       onAssetDelete={onAssetDelete}
       onAssetUpload={onAssetUpload}
       {...fileSystemEvents}
-      {...rest}
     />
   );
 }
 
-function MultiplayerEditor({ roomId }: Props) {
+function MultiplayerEditor({ roomId, language }: Multiplayer) {
   const fileSystemEvents = useFileSystem();
   const { onAssetCreate, onAssetDelete, onAssetUpload } = useAssets();
-  const { ...events } = useMultiplayer(roomId!);
+  const { ...events } = useMultiplayer(roomId, language);
 
   return (
     <Tldraw
@@ -69,9 +71,9 @@ function MultiplayerEditor({ roomId }: Props) {
   );
 }
 
-function MultiplayerReadOnlyEditor({ roomId }: Props) {
+function MultiplayerReadOnlyEditor({ roomId, language }: Multiplayer) {
   const { onSaveProjectAs, onSaveProject } = useFileSystem();
-  const { ...events } = useMultiplayer(roomId!);
+  const { ...events } = useMultiplayer(roomId, language);
 
   return (
     <Tldraw

client/src/hooks/useMultiplayer.ts

@@ -19,7 +19,7 @@ import {
 
 // declare const window: Window & { app: TldrawApp };
 
-export function useMultiplayer(roomId: string) {
+export function useMultiplayer(roomId: string, language: string) {
   const [app, setApp] = useState<TldrawApp>();
   const [loading, setLoading] = useState(true);
 
@@ -35,6 +35,7 @@ export function useMultiplayer(roomId: string) {
   // Put the state into the window, for debugging.
   const onMount = useCallback(
     (app: TldrawApp) => {
+      app.setSetting("language", language);
       app.loadRoom(roomId);
       app.pause(); // Turn off the app's own undo / redo stack
       // window.app = app;

client/src/types/types.ts

@@ -0,0 +1,14 @@
+export type Settings = {
+  roomId?: string;
+  readOnly?: boolean;
+  language?: string;
+};
+
+export type Default = {
+  language: string;
+};
+
+export type Multiplayer = {
+  roomId: string;
+  language: string;
+};

package.json

@@ -17,9 +17,9 @@
     "clean": "find . -name node_modules -o -name dist -type d | xargs rm -rf",
     "dev:api": "yarn workspace api dev",
     "dev:client": "yarn workspace client dev",
-    "build:api": "yarn workspace api build",
-    "build:all": "yarn build:api && yarn build:client ",
+    "build:all": "yarn build:api && yarn build:client",
     "build:all:samedir": "yarn build:all && mkdir -p dist && mv ./api/dist ./dist/api && mv ./client/dist ./dist/client",
+    "build:api": "yarn workspace api build",
     "build:client": "yarn workspace client build",
     "start:ws": "HOST=localhost PORT=1234 node ./node_modules/y-websocket/bin/server.js",
     "start:api": "yarn workspace api start",