From dbf50353e53f8c218a19b1dff6bca7d551b1b52a Mon Sep 17 00:00:00 2001
From: Pedro Pupo Sa da Costa <pedro.pupo@ist.utl.pt>
Date: Wed, 7 Feb 2024 23:09:15 +0000
Subject: [PATCH] feat: new design

---
 .../questions/editor/[questionId].page.tsx    | 108 +++++------
 libs/react/containers/src/index.ts            |   1 +
 .../layouts/layout-module/layout-module.tsx   |   3 +-
 .../questions/hooks/use-question-editor.tsx   |   1 -
 .../question-editor-annexes.tsx               | 108 +++++------
 .../question-editor-explanation.tsx           |  57 ++----
 .../question-editor-learning-objectives.tsx   |  35 ++--
 .../question-editor-variant.tsx               | 167 ++----------------
 .../routers/containers/questions-router.ts    |   1 +
 9 files changed, 160 insertions(+), 321 deletions(-)

diff --git a/apps/next-app/pages/modules/[questionBank]/questions/editor/[questionId].page.tsx b/apps/next-app/pages/modules/[questionBank]/questions/editor/[questionId].page.tsx
index d96a80657..8d54a5676 100644
--- a/apps/next-app/pages/modules/[questionBank]/questions/editor/[questionId].page.tsx
+++ b/apps/next-app/pages/modules/[questionBank]/questions/editor/[questionId].page.tsx
@@ -1,11 +1,20 @@
-import { useRouter } from "next/router";
-import { Box, Tab, TabList, TabPanel, Tabs, tabClasses } from "@mui/joy";
+import { default as RightArrow } from "@mui/icons-material/ChevronRightOutlined";
+import {
+  Divider,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs,
+  tabClasses,
+  tabPanelClasses,
+} from "@mui/joy";
 import { AppHead } from "@chair-flight/react/components";
 import {
   LayoutModule,
   QuestionEditorAnnexes,
   QuestionEditorExplanation,
   QuestionEditorLearningObjectives,
+  QuestionEditorPreview,
   QuestionEditorRelatedQuestions,
   QuestionEditorVariant,
 } from "@chair-flight/react/containers";
@@ -14,11 +23,7 @@ import type { QuestionBankName } from "@chair-flight/core/question-bank";
 import type { Breadcrumbs } from "@chair-flight/react/containers";
 import type { NextPage } from "next";
 
-type QueryParams = {
-  tab?: string;
-};
-
-type PageParams = QueryParams & {
+type PageParams = {
   questionBank: QuestionBankName;
   questionId: string;
 };
@@ -26,26 +31,9 @@ type PageParams = QueryParams & {
 type PageProps = {
   questionBank: QuestionBankName;
   questionId: string;
-  tab: string;
 };
 
-const Page: NextPage<PageProps> = ({
-  questionBank,
-  questionId,
-  tab: initialTab,
-}) => {
-  const router = useRouter();
-  const query = router.query as PageParams;
-  const tab = query.tab ?? initialTab;
-
-  const updateQuery = (query: QueryParams) => {
-    router.push(
-      { ...router, query: { ...router.query, ...query } },
-      undefined,
-      { shallow: true },
-    );
-  };
-
+const Page: NextPage<PageProps> = ({ questionBank, questionId }) => {
   const crumbs = [
     [questionBank.toUpperCase(), `/modules/${questionBank}`],
     ["Questions", `/modules/${questionBank}/questions`],
@@ -59,70 +47,64 @@ const Page: NextPage<PageProps> = ({
       breadcrumbs={crumbs}
       fixedHeight
       noPadding
+      sx={{ flexDirection: "row" }}
     >
       <AppHead
         linkTitle={`Chair Flight [${questionId}]`}
         linkDescription={""}
       />
+
       <Tabs
-        value={tab}
-        onChange={(_, v) => updateQuery({ tab: v as string })}
+        defaultValue={"question"}
         sx={{
-          backgroundColor: "transparent",
-          display: "flex",
-          flexDirection: "column",
-          height: "100%",
+          pl: 1,
+          flex: 1,
+          background: "transparent",
+
+          [`& .${tabPanelClasses.root}`]: {
+            flex: 1,
+            overflow: "hidden",
+            my: 1,
+            py: 0,
+          },
+
+          [`& .${tabClasses.selected}`]: {
+            color: "primary.plainColor",
+            background: "transparent",
+          },
         }}
       >
-        <TabList
-          sx={{
-            position: "fixed",
-            bgcolor: "background.surface",
-            width: "100%",
-            height: (theme) => `calc(${theme.spacing(5)} + 2px)`,
-
-            [`& .${tabClasses.selected}`]: {
-              color: "primary.plainColor",
-            },
-          }}
-        >
+        <TabList sx={{ justifyContent: "center" }}>
           <Tab value={"question"}>Question</Tab>
           <Tab value={"explanation"}>Explanation</Tab>
-          <Tab value={"los"}>Learning Objectives</Tab>
-          <Tab value={"relatedQs"}>Related Questions</Tab>
+          <Tab value={"los"}>LOs</Tab>
           <Tab value={"annexes"}>Annexes</Tab>
+          <Tab value={"relatedQs"}>Related</Tab>
         </TabList>
-        <Box sx={{ height: (theme) => `calc(${theme.spacing(5)} + 2px)` }} />
-        <TabPanel value={"question"} sx={{ flex: 1, overflow: "hidden" }}>
+        <TabPanel value={"question"} sx={{ px: 0 }}>
           <QuestionEditorVariant
             noSsr
             questionBank={questionBank}
             questionId={questionId}
           />
         </TabPanel>
-        <TabPanel value={"explanation"} sx={{ flex: 1, overflow: "hidden" }}>
+        <TabPanel value={"explanation"} sx={{ px: 0 }}>
           <QuestionEditorExplanation
             noSsr
             questionBank={questionBank}
             questionId={questionId}
           />
         </TabPanel>
-        <TabPanel value={"los"} sx={{ flex: 1, overflow: "hidden" }}>
-          <QuestionEditorLearningObjectives
-            noSsr
-            questionBank={questionBank}
-            questionId={questionId}
-          />
-        </TabPanel>
-        <TabPanel value={"relatedQs"} sx={{ flex: 1, overflow: "hidden" }}>
-          <QuestionEditorRelatedQuestions
+        <TabPanel value={"annexes"} sx={{ px: 0 }}>
+          <QuestionEditorAnnexes
             noSsr
             questionBank={questionBank}
             questionId={questionId}
+            sx={{ height: "100%" }}
           />
         </TabPanel>
-        <TabPanel value={"annexes"} sx={{ flex: 1, overflow: "hidden" }}>
-          <QuestionEditorAnnexes
+        <TabPanel value={"los"} sx={{ flex: 1, overflow: "hidden" }}>
+          <QuestionEditorLearningObjectives
             noSsr
             questionBank={questionBank}
             questionId={questionId}
@@ -130,6 +112,14 @@ const Page: NextPage<PageProps> = ({
           />
         </TabPanel>
       </Tabs>
+      <Divider orientation="vertical">
+        <RightArrow size="lg" />
+      </Divider>
+      <QuestionEditorPreview
+        questionBank={questionBank}
+        questionId={questionId}
+        sx={{ flex: 1, overflow: "hidden", height: "100%", pr: 1 }}
+      />
     </LayoutModule>
   );
 };
diff --git a/libs/react/containers/src/index.ts b/libs/react/containers/src/index.ts
index 4fb4f5fe6..8e3c86477 100644
--- a/libs/react/containers/src/index.ts
+++ b/libs/react/containers/src/index.ts
@@ -31,3 +31,4 @@ export * from "./tests/test-review";
 export * from "./tests/test-search";
 export * from "./tests/test-study";
 export * from "./user/user-settings";
+export * from "./questions/question-editor-preview";
diff --git a/libs/react/containers/src/layouts/layout-module/layout-module.tsx b/libs/react/containers/src/layouts/layout-module/layout-module.tsx
index dac3ae882..bfb65d68b 100644
--- a/libs/react/containers/src/layouts/layout-module/layout-module.tsx
+++ b/libs/react/containers/src/layouts/layout-module/layout-module.tsx
@@ -61,7 +61,7 @@ type Params = {
 type Data = AppRouterOutput["containers"]["layouts"]["getLayoutModule"];
 
 export const LayoutModule = container<Props, Params, Data>(
-  ({ children, fixedHeight, noPadding, questionBank, breadcrumbs }) => {
+  ({ children, fixedHeight, noPadding, questionBank, breadcrumbs, sx }) => {
     const { isTransitioning } = usePageTransition();
     const router = useRouter();
     const data = LayoutModule.useData({ questionBank });
@@ -231,6 +231,7 @@ export const LayoutModule = container<Props, Params, Data>(
             ...(fixedHeight
               ? { height: `calc(100vh - ${HEADER_HEIGHT}px)` }
               : {}),
+            ...sx,
           }}
         />
         <UserBugReport />
diff --git a/libs/react/containers/src/questions/hooks/use-question-editor.tsx b/libs/react/containers/src/questions/hooks/use-question-editor.tsx
index aa3250d8f..89eb59488 100644
--- a/libs/react/containers/src/questions/hooks/use-question-editor.tsx
+++ b/libs/react/containers/src/questions/hooks/use-question-editor.tsx
@@ -247,7 +247,6 @@ export const useQuestionEditor = create<QuestionEditor>()(
           questionA: questionAid,
           questionB: questionBid,
         }) => {
-          const router = trpc.common.questions;
           const questionA = get()[questionBank].afterState[questionAid];
           const questionB = get()[questionBank].afterState[questionBid];
 
diff --git a/libs/react/containers/src/questions/question-editor-annexes/question-editor-annexes.tsx b/libs/react/containers/src/questions/question-editor-annexes/question-editor-annexes.tsx
index 07ed39b98..31aeaa3e7 100644
--- a/libs/react/containers/src/questions/question-editor-annexes/question-editor-annexes.tsx
+++ b/libs/react/containers/src/questions/question-editor-annexes/question-editor-annexes.tsx
@@ -3,14 +3,7 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { default as AddIcon } from "@mui/icons-material/Add";
 import { default as DeleteIcon } from "@mui/icons-material/DeleteOutlineOutlined";
-import {
-  Box,
-  Button,
-  ListItemContent,
-  Stack,
-  Tooltip,
-  Typography,
-} from "@mui/joy";
+import { Button, ListItemContent, Stack, Tooltip, Typography } from "@mui/joy";
 import { annexSearchFilters } from "@chair-flight/core/search";
 import {
   ImageWithModal,
@@ -81,20 +74,21 @@ export const QuestionEditorAnnexes = container<Props, Params, Data>(
     };
 
     return (
-      <Stack direction="row" component={component} sx={sx}>
-        <Stack height="100%" flex={1}>
-          <SearchHeader
-            search={search}
-            searchPlaceholder="Search Annexes..."
-            filters={serverData.filters}
-            filterValues={filterForm.watch()}
-            isLoading={searchAnnexes.isLoading}
-            isError={searchAnnexes.isError}
-            onSearchChange={setSearch}
-            onFilterValuesChange={(k, v) =>
-              filterForm.setValue(k as FilterKeys, v)
-            }
-          />
+      <Stack component={component} sx={sx}>
+        <SearchHeader
+          search={search}
+          searchPlaceholder="Search Annexes..."
+          mobileBreakpoint="force-mobile"
+          filters={serverData.filters}
+          filterValues={filterForm.watch()}
+          isLoading={searchAnnexes.isLoading}
+          isError={searchAnnexes.isError}
+          onSearchChange={setSearch}
+          onFilterValuesChange={(k, v) =>
+            filterForm.setValue(k as FilterKeys, v)
+          }
+        />
+        <Stack flex={1} flexDirection={"row"} overflow={"hidden"}>
           <SearchList
             forceMode={"mobile"}
             loading={searchAnnexes.isLoading}
@@ -105,22 +99,16 @@ export const QuestionEditorAnnexes = container<Props, Params, Data>(
             renderThead={() => null}
             renderTableRow={() => null}
             renderListItemContent={(result) => (
-              <ListItemContent sx={{ display: "flex" }}>
-                <ImageWithModal
-                  href={result.href}
-                  alt=""
-                  width={100}
-                  height={100}
-                />
-                <Box sx={{ flex: 1, px: 1 }}>
+              <ListItemContent>
+                <Stack
+                  direction={"row"}
+                  gap={1}
+                  alignItems={"center"}
+                  justifyContent={"space-between"}
+                >
                   <Typography level="h5" sx={{ fontSize: "xs" }}>
                     {result.id}
                   </Typography>
-                  <Typography level="body-xs" sx={{ minHeight: "4em" }}>
-                    {result.description}
-                  </Typography>
-                </Box>
-                <Box>
                   <Tooltip title="Add to Question">
                     <Button
                       sx={{ px: 1 }}
@@ -131,13 +119,22 @@ export const QuestionEditorAnnexes = container<Props, Params, Data>(
                       children={<AddIcon />}
                     />
                   </Tooltip>
-                </Box>
+                </Stack>
+                <Stack direction={"row"} gap={1}>
+                  <ImageWithModal
+                    href={result.href}
+                    alt=""
+                    width={100}
+                    height={100}
+                  />
+                  <Typography level="body-xs" sx={{ minHeight: "4em" }}>
+                    {result.description}
+                  </Typography>
+                </Stack>
               </ListItemContent>
             )}
           />
-        </Stack>
-        <VerticalDivider />
-        <Stack height="100%" flex={1}>
+          <VerticalDivider />
           <SearchList
             forceMode={"mobile"}
             noDataMessage="No Annexes selected"
@@ -148,22 +145,16 @@ export const QuestionEditorAnnexes = container<Props, Params, Data>(
             renderThead={() => null}
             renderTableRow={() => null}
             renderListItemContent={(result) => (
-              <ListItemContent sx={{ display: "flex" }}>
-                <ImageWithModal
-                  href={result.href}
-                  alt=""
-                  width={100}
-                  height={100}
-                />
-                <Box sx={{ flex: 1, px: 1 }}>
+              <ListItemContent>
+                <Stack
+                  direction={"row"}
+                  gap={1}
+                  alignItems={"center"}
+                  justifyContent={"space-between"}
+                >
                   <Typography level="h5" sx={{ fontSize: "xs" }}>
                     {result.id}
                   </Typography>
-                  <Typography level="body-xs" sx={{ minHeight: "4em" }}>
-                    {result.description}
-                  </Typography>
-                </Box>
-                <Box>
                   <Tooltip title="Remove from Question">
                     <Button
                       sx={{ px: 1 }}
@@ -173,7 +164,18 @@ export const QuestionEditorAnnexes = container<Props, Params, Data>(
                       children={<DeleteIcon />}
                     />
                   </Tooltip>
-                </Box>
+                </Stack>
+                <Stack direction={"row"} gap={1}>
+                  <ImageWithModal
+                    href={result.href}
+                    alt=""
+                    width={100}
+                    height={100}
+                  />
+                  <Typography level="body-xs" sx={{ minHeight: "4em" }}>
+                    {result.description}
+                  </Typography>
+                </Stack>
               </ListItemContent>
             )}
           />
diff --git a/libs/react/containers/src/questions/question-editor-explanation/question-editor-explanation.tsx b/libs/react/containers/src/questions/question-editor-explanation/question-editor-explanation.tsx
index ed33bf9f8..1d87e457e 100644
--- a/libs/react/containers/src/questions/question-editor-explanation/question-editor-explanation.tsx
+++ b/libs/react/containers/src/questions/question-editor-explanation/question-editor-explanation.tsx
@@ -1,8 +1,6 @@
 import { useState, useTransition } from "react";
-import { CircularProgress, Sheet, Stack, Textarea } from "@mui/joy";
-import { MarkdownClientCompressed, Ups } from "@chair-flight/react/components";
+import { Textarea } from "@mui/joy";
 import { container } from "../../wraper";
-import { VerticalDivider } from "../components/vertical-divider";
 import { useQuestionEditor } from "../hooks/use-question-editor";
 import type { QuestionBankName } from "@chair-flight/core/question-bank";
 import type { AppRouterOutput } from "@chair-flight/trpc/server";
@@ -10,56 +8,39 @@ import type { AppRouterOutput } from "@chair-flight/trpc/server";
 type Props = {
   questionId: string;
   questionBank: QuestionBankName;
+  component?: "textarea";
 };
 
-type Params = Props;
+type Params = {
+  questionId: string;
+  questionBank: QuestionBankName;
+};
 
 type Data =
   AppRouterOutput["containers"]["questions"]["getQuestionEditorExplanation"];
 
 export const QuestionEditorExplanation = container<Props, Params, Data>(
-  ({ questionId, questionBank, sx, component = "div" }) => {
+  ({ questionId, questionBank, sx }) => {
     const { explanation, setQuestionExplanation } = useQuestionEditor((s) => ({
       explanation: s[questionBank].afterState[questionId]?.explanation ?? "",
       setQuestionExplanation: s.setQuestionExplanation,
     }));
 
     const [thisExplanation, setThisExplanation] = useState(explanation);
-    const [isPending, startTransition] = useTransition();
+    const [, startTransition] = useTransition();
 
     return (
-      <Stack direction="row" height="100%" sx={sx} component={component}>
-        <Textarea
-          value={thisExplanation}
-          sx={{ height: "100%", flex: 1 }}
-          onChange={(e) => {
-            const explanation = e.target.value;
-            setThisExplanation(explanation);
-            startTransition(() =>
-              setQuestionExplanation({ questionBank, questionId, explanation }),
-            );
-          }}
-        />
-        <VerticalDivider />
-        <Sheet sx={{ flex: 1, p: 1, position: "relative" }}>
-          {explanation ? (
-            <MarkdownClientCompressed>{explanation}</MarkdownClientCompressed>
-          ) : (
-            <Ups message="No explanation provided" />
-          )}
-          {isPending && (
-            <CircularProgress
-              size="lg"
-              sx={{
-                position: "absolute",
-                top: "50%",
-                left: "50%",
-                transform: "translate(-50%, -50%)",
-              }}
-            />
-          )}
-        </Sheet>
-      </Stack>
+      <Textarea
+        value={thisExplanation}
+        sx={{ height: "100%", flex: 1, ...sx }}
+        onChange={(e) => {
+          const explanation = e.target.value;
+          setThisExplanation(explanation);
+          startTransition(() =>
+            setQuestionExplanation({ questionBank, questionId, explanation }),
+          );
+        }}
+      />
     );
   },
 );
diff --git a/libs/react/containers/src/questions/question-editor-learning-objectives/question-editor-learning-objectives.tsx b/libs/react/containers/src/questions/question-editor-learning-objectives/question-editor-learning-objectives.tsx
index 6e439c2a7..1c39cb693 100644
--- a/libs/react/containers/src/questions/question-editor-learning-objectives/question-editor-learning-objectives.tsx
+++ b/libs/react/containers/src/questions/question-editor-learning-objectives/question-editor-learning-objectives.tsx
@@ -81,21 +81,21 @@ export const QuestionEditorLearningObjectives = container<Props, Params, Data>(
     };
 
     return (
-      <Stack direction="row" component={component} sx={sx}>
-        <Stack height="100%" flex={1}>
-          <SearchHeader
-            search={search}
-            searchPlaceholder="Search Annexes..."
-            mobileBreakpoint="force-mobile"
-            filters={serverData.filters}
-            filterValues={filterForm.watch()}
-            isLoading={searchLos.isLoading}
-            isError={searchLos.isError}
-            onSearchChange={setSearch}
-            onFilterValuesChange={(k, v) =>
-              filterForm.setValue(k as FilterKeys, v)
-            }
-          />
+      <Stack component={component} sx={sx}>
+        <SearchHeader
+          search={search}
+          searchPlaceholder="Search Annexes..."
+          mobileBreakpoint="force-mobile"
+          filters={serverData.filters}
+          filterValues={filterForm.watch()}
+          isLoading={searchLos.isLoading}
+          isError={searchLos.isError}
+          onSearchChange={setSearch}
+          onFilterValuesChange={(k, v) =>
+            filterForm.setValue(k as FilterKeys, v)
+          }
+        />
+        <Stack flex={1} flexDirection={"row"} overflow={"hidden"}>
           <SearchList
             forceMode={"mobile"}
             loading={searchLos.isLoading}
@@ -130,9 +130,8 @@ export const QuestionEditorLearningObjectives = container<Props, Params, Data>(
               </ListItemContent>
             )}
           />
-        </Stack>
-        <VerticalDivider />
-        <Stack height="100%" flex={1}>
+          <VerticalDivider />
+
           <SearchList
             forceMode={"mobile"}
             noDataMessage="No Annexes selected"
diff --git a/libs/react/containers/src/questions/question-editor-variant/question-editor-variant.tsx b/libs/react/containers/src/questions/question-editor-variant/question-editor-variant.tsx
index fbac74099..6a5b0fe53 100644
--- a/libs/react/containers/src/questions/question-editor-variant/question-editor-variant.tsx
+++ b/libs/react/containers/src/questions/question-editor-variant/question-editor-variant.tsx
@@ -1,29 +1,12 @@
 import { useState, useTransition } from "react";
 import { default as Editor } from "@monaco-editor/react";
-import {
-  Option,
-  Button,
-  ButtonGroup,
-  Divider,
-  Select,
-  Stack,
-  Box,
-} from "@mui/joy";
 import YAML from "yaml";
-import { ZodError } from "zod";
-import { getRandomId } from "@chair-flight/base/utils";
 import {
-  createTestQuestion,
-  getQuestionPreview,
   type QuestionBankName,
   questionVariantSchema,
-  getNewVariant,
 } from "@chair-flight/core/question-bank";
-import { MarkdownClient } from "@chair-flight/react/components";
 import { container } from "../../wraper";
-import { VerticalDivider } from "../components/vertical-divider";
 import { useQuestionEditor } from "../hooks/use-question-editor";
-import { QuestionStandAloneComponent } from "../question-stand-alone/question-stand-alone";
 import type { QuestionVariantType } from "@chair-flight/core/question-bank";
 import type { AppRouterOutput } from "@chair-flight/trpc/server";
 
@@ -37,150 +20,32 @@ type Params = Props;
 type Data =
   AppRouterOutput["containers"]["questions"]["getQuestionEditorVariant"];
 
-type RhsMode = "preview" | "demo" | "validation";
-
-const variants = [
-  "simple",
-  "multiple-correct",
-  "definition",
-  "true-or-false",
-  "one-two",
-] satisfies QuestionVariantType[];
-
 export const QuestionEditorVariant = container<Props, Params, Data>(
   ({ questionId, questionBank }) => {
-    const [variantType, setVariantType] =
-      useState<QuestionVariantType>("simple");
-    const [rhsMode, setRhsMode] = useState<RhsMode>("preview");
-    const [seed, setSeed] = useState(getRandomId());
-    const [validationYaml, setValidationYAML] = useState("");
-    const [, startTransition] = useTransition();
-    const hasValidationErrors = !!validationYaml;
+    const { variant, setQuestionVariant } = useQuestionEditor((s) => ({
+      variant: s[questionBank].afterState[questionId]?.variant,
+      setQuestionVariant: s.setQuestionVariant,
+    }));
 
-    const { variant, template, setQuestionVariant } = useQuestionEditor(
-      (s) => ({
-        variant: s[questionBank].afterState[questionId]?.variant,
-        template: s[questionBank].afterState[questionId],
-        setQuestionVariant: s.setQuestionVariant,
-      }),
-    );
-
-    const [variantYaml, setVariantYaml] = useState<string>(() =>
-      YAML.stringify(variant, null, 2),
-    );
+    const [, startTransition] = useTransition();
+    const [text, setText] = useState(() => YAML.stringify(variant));
 
     const updateVariant = (yamlInput: string | undefined = "") => {
-      setVariantYaml(yamlInput);
+      setText(yamlInput);
       startTransition(() => {
-        try {
-          const newVariantObj = YAML.parse(yamlInput);
-          const variant = questionVariantSchema.parse(newVariantObj);
-          setQuestionVariant({ questionBank, questionId, variant });
-          setValidationYAML("");
-          if (rhsMode === "validation") setRhsMode("preview");
-        } catch (e) {
-          setRhsMode("validation");
-          if (e instanceof ZodError) {
-            setValidationYAML(JSON.stringify(e.issues, null, 2));
-          } else {
-            setValidationYAML(YAML.stringify(e, null, 2));
-          }
-        }
+        const newVariantObj = YAML.parse(yamlInput);
+        const variant = questionVariantSchema.parse(newVariantObj);
+        setQuestionVariant({ questionBank, questionId, variant });
       });
     };
 
-    const resetVariant = (variant: QuestionVariantType) => {
-      const newVariant = getNewVariant(variant);
-      updateVariant(YAML.stringify(newVariant));
-    };
-
-    if (!template || !variant) return null;
-
     return (
-      <Stack direction="row" height="100%" width="100%">
-        <Stack height="100%" flex={1} sx={{ overflowY: "hidden" }}>
-          <Stack direction="row-reverse" gap={1} m={1}>
-            <Button onClick={() => resetVariant(variantType)}>Restart</Button>
-
-            <Select
-              value={variantType}
-              onChange={(_, v) => setVariantType(v as QuestionVariantType)}
-              sx={{ width: "175px" }}
-            >
-              {variants.map((v) => (
-                <Option key={v} value={v} children={v} />
-              ))}
-            </Select>
-          </Stack>
-
-          <Divider />
-          <Box sx={{ height: "100%", mt: 1 }}>
-            <Editor
-              defaultLanguage="yaml"
-              value={variantYaml}
-              onChange={updateVariant}
-              options={{ wordWrap: "on" }}
-            />
-          </Box>
-        </Stack>
-        <VerticalDivider />
-        <Stack height="100%" flex={1}>
-          <ButtonGroup
-            variant="solid"
-            buttonFlex={1}
-            sx={{ margin: "auto", m: 1 }}
-          >
-            <Button
-              color={rhsMode === "preview" ? "primary" : undefined}
-              onClick={() => setRhsMode("preview")}
-              disabled={hasValidationErrors}
-            >
-              Preview
-            </Button>
-            <Button
-              color={rhsMode === "demo" ? "primary" : undefined}
-              onClick={() => setRhsMode("demo")}
-              disabled={hasValidationErrors}
-            >
-              Demo
-            </Button>
-            <Button
-              color={rhsMode === "validation" ? "primary" : undefined}
-              onClick={() => setRhsMode("validation")}
-            >
-              Validation
-            </Button>
-          </ButtonGroup>
-
-          <Divider />
-
-          {rhsMode === "demo" && (
-            <QuestionStandAloneComponent
-              questionBank={questionBank}
-              questionId={questionId}
-              seed={seed}
-              onNavigateToNewSeed={({ seed }) => setSeed(seed)}
-              question={createTestQuestion(template, { seed })}
-              annexes={[]}
-            />
-          )}
-          {rhsMode === "preview" && (
-            <MarkdownClient>{getQuestionPreview(variant)}</MarkdownClient>
-          )}
-          {rhsMode === "validation" && !validationYaml && (
-            <>No Validation errors!</>
-          )}
-          {rhsMode === "validation" && !!validationYaml && (
-            <Box sx={{ height: "100%", mt: 1 }}>
-              <Editor
-                language="yaml"
-                value={validationYaml}
-                options={{ readOnly: true, wordWrap: "on" }}
-              />
-            </Box>
-          )}
-        </Stack>
-      </Stack>
+      <Editor
+        defaultLanguage="yaml"
+        value={text}
+        onChange={updateVariant}
+        options={{ wordWrap: "on" }}
+      />
     );
   },
 );
diff --git a/libs/trpc/server/src/routers/containers/questions-router.ts b/libs/trpc/server/src/routers/containers/questions-router.ts
index 4f408276a..dd7dd53d9 100644
--- a/libs/trpc/server/src/routers/containers/questions-router.ts
+++ b/libs/trpc/server/src/routers/containers/questions-router.ts
@@ -122,4 +122,5 @@ export const questionsContainersRouter = router({
     }),
 
   getQuestionEditorVariant: publicProcedure.query(() => ({})),
+  getQuestionEditorPreview: publicProcedure.query(() => ({})),
 });