refactor: simplify valueTypes logic

yjs · Apr 10, 2024 · fc578ce · fc578ce
1 parent ec057a7
commit fc578ce
Show file tree

Hide file tree

Showing 3 changed files with 137 additions and 247 deletions.
diff --git a/src/components/load-button.tsx b/src/components/load-button.tsx
@@ -16,7 +16,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { File, Link, RotateCw, Upload } from "lucide-react";
+import { File, FilePlus, Link, RotateCw, Upload } from "lucide-react";
 import { useState } from "react";
 import * as Y from "yjs";
 import { useYDoc } from "../state";
@@ -98,7 +98,7 @@ function LoadFromUrlDialog({ children }: { children: React.ReactNode }) {
 LoadFromUrlDialog.Trigger = DialogTrigger;
 
 export function LoadButton() {
-  const [yDoc, setYDoc] = useYDoc();
+  const [, setYDoc] = useYDoc();
 
   return (
     <LoadFromUrlDialog>
@@ -112,8 +112,6 @@ export function LoadButton() {
         <DropdownMenuContent>
           <DropdownMenuItem
             onClick={async () => {
-              yDoc.destroy();
-              setYDoc(new Y.Doc());
               const handles = await window.showOpenFilePicker({
                 startIn: "downloads",
               });
@@ -141,6 +139,15 @@ export function LoadButton() {
               Load from URL
             </DropdownMenuItem>
           </LoadFromUrlDialog.Trigger>
+
+          <DropdownMenuItem
+            onClick={() => {
+              setYDoc(new Y.Doc());
+            }}
+          >
+            <FilePlus className="mr-2 h-4 w-4" />
+            Create new YDoc
+          </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
     </LoadFromUrlDialog>

diff --git a/src/components/preview-panel.tsx b/src/components/preview-panel.tsx
@@ -1,27 +1,13 @@
-import { JsonViewer, objectType } from "@textea/json-viewer";
+import { JsonViewer } from "@textea/json-viewer";
 import { Bug } from "lucide-react";
-import { useMemo } from "react";
-import { dataTypes, yTextStringType } from "../data-types";
-import { useConfig, useYDoc } from "../state";
+import { yDataType } from "../data-types";
+import { useYDoc } from "../state";
 import { useTheme } from "./theme-provider";
 import { Button } from "./ui/button";
 
 export function PreviewPanel() {
   const { theme, systemPreferenceTheme } = useTheme();
   const [yDoc] = useYDoc();
-  const [config] = useConfig();
-  const valueTypes = useMemo(() => {
-    const arr =
-      config.view === "shared-types"
-        ? dataTypes.toReversed()
-        : dataTypes
-            .map((i) => ({ ...i, Component: objectType.Component }))
-            .toReversed();
-    if (!config.showDelta) {
-      arr.push(yTextStringType);
-    }
-    return arr;
-  }, [config.view, config.showDelta]);
 
   return (
     <div className="flex flex-1 flex-col">
@@ -50,8 +36,7 @@ export function PreviewPanel() {
           // enableDelete={true}
           theme={theme === "system" ? systemPreferenceTheme : theme}
           defaultInspectDepth={2}
-          displaySize={false}
-          valueTypes={valueTypes}
+          valueTypes={[yDataType]}
         />
       </div>
     </div>