Refactor ViewOptions

Author: seanchas116

packages/dashboard/src/components/editor/Editor.tsx

@@ -147,7 +147,7 @@ const Editor: React.FC<{
       "://",
       // adds subdomain to the editor url
       `://${documentId}.`
-    ) + "?embed=true&titleBarPadding=40";
+    ) + "?type=embed&titleBarPadding=40";
 
   return (
     <div className="text-neutral-800 flex flex-col text-xs">

packages/dashboard/src/components/editor/LocalEditor.tsx

@@ -136,7 +136,7 @@ const LocalEditor: React.FC = () => {
       "://",
       // TODO: use unique ID for subdomain?
       `://local.`
-    ) + "?embed=true&titleBarPadding=40";
+    ) + "?type=embed&titleBarPadding=40";
 
   return (
     <div className="text-neutral-800 flex flex-col text-xs">

packages/editor/src/main.tsx

@@ -6,10 +6,10 @@ import { IFrameDataConnector } from "./state/IFrameDataConnector";
 import { projectState } from "./state/ProjectState";
 import { viewOptions } from "./state/ViewOptions";
 
-if (viewOptions.embed) {
-  new IFrameDataConnector(projectState);
-} else {
+if (viewOptions.type == "demo") {
   projectState.loadDemoFile();
+} else {
+  new IFrameDataConnector(projectState, viewOptions.type);
 }
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(

packages/editor/src/state/IFrameDataConnector.ts

@@ -9,7 +9,6 @@ import {
 } from "../types/IFrameRPC";
 import { throttle } from "lodash-es";
 import { ThumbnailTakerHost } from "./ThumbnailTakerHost";
-import { viewOptions } from "./ViewOptions";
 
 export function vscodeParentTarget(): Target {
   const vscode = acquireVsCodeApi();
@@ -30,7 +29,7 @@ export function vscodeParentTarget(): Target {
 }
 
 export class IFrameDataConnector {
-  constructor(state: ProjectState) {
+  constructor(state: ProjectState, type: "embed" | "vscode") {
     this.state = state;
     this.updates.push(Y.encodeStateAsUpdate(state.doc));
 
@@ -48,7 +47,7 @@ export class IFrameDataConnector {
     };
 
     this.rpc = new RPC<IEditorToRootRPCHandler, IRootToEditorRPCHandler>(
-      viewOptions.vscode ? vscodeParentTarget() : parentWindowTarget(),
+      type === "vscode" ? vscodeParentTarget() : parentWindowTarget(),
       {
         update: action(async (data: Uint8Array) => {
           Y.applyUpdate(state.doc, data);

packages/editor/src/state/ViewOptions.ts

@@ -1,10 +1,9 @@
 interface ViewOptions {
-  embed: boolean;
+  type: "demo" | "embed" | "vscode";
   titleBarPadding: number;
   uiScaling: number;
   fontSize: number;
-  narrowMode: boolean;
-  vscode: boolean;
+  layout: "twoColumn" | "threeColumn";
 }
 
 declare global {
@@ -16,33 +15,32 @@ declare global {
 function getViewOptions(): ViewOptions {
   if (window.uimixViewOptions) {
     return {
-      embed: false,
       titleBarPadding: 0,
       uiScaling: 1,
       fontSize: 12,
-      narrowMode: false,
-      vscode: false,
+      layout: "threeColumn",
+      type: "demo",
       ...window.uimixViewOptions,
     };
   }
 
   const searchParams = new URLSearchParams(window.location.search);
 
-  const embed = searchParams.get("embed") === "true";
+  const type = (searchParams.get("type") ?? "demo") as ViewOptions["type"];
   const titleBarPadding = Number.parseInt(
     searchParams.get("titleBarPadding") ?? "0"
   );
   const uiScaling = Number.parseFloat(searchParams.get("uiScaling") ?? "1");
   const fontSize = Number.parseFloat(searchParams.get("fontSize") ?? "12");
-  const narrowMode = searchParams.get("narrowMode") === "true";
+  const layout = (searchParams.get("layout") ??
+    "threeColumn") as ViewOptions["layout"];
 
   return {
-    embed,
+    type,
     titleBarPadding,
     uiScaling,
     fontSize,
-    narrowMode,
-    vscode: false,
+    layout,
   };
 }
 

packages/editor/src/state/ViewportState.ts

@@ -24,9 +24,7 @@ export class ViewportState {
   @observable isSideBarsVisible = true;
   @observable lastSideBarLeftOffset = 0;
 
-  @observable layout: "twoColumn" | "threeColumn" = viewOptions.narrowMode
-    ? "twoColumn"
-    : "threeColumn";
+  @observable layout: "twoColumn" | "threeColumn" = viewOptions.layout;
 }
 
 export const viewportState = new ViewportState();

packages/vscode/src/EditorSession.ts

@@ -181,11 +181,10 @@ export class EditorSession {
     const configScript = `
 <script>
   window.uimixViewOptions = {
-    embed: true,
+    type: "vscode",
     uiScaling: 0.75,
     fontSize: 11,
-    narrowMode: true,
-    vscode: true,
+    layout: "twoColumn",
   };
 </script>`;