87 |
88 | {
94 | if (e.key === "Enter") {
95 | e.preventDefault();
96 | handleAdd();
97 | }
98 | }}
99 | onChange={(e) => {
100 | setKey(e.target.value);
101 | }}
102 | />
103 |
104 | );
105 |
106 | return (
107 |
178 | );
179 | }
180 |
--------------------------------------------------------------------------------
/src/components/config-panel.tsx:
--------------------------------------------------------------------------------
1 | import { Redo, Undo } from "lucide-react";
2 | import { useConfig, useUndoManager, useYDoc } from "../state/index";
3 | import { fileToYDoc } from "../utils";
4 | import { ConnectButton } from "./connect-button";
5 | import { ExportButton } from "./export-button";
6 | import { FilterButton } from "./filter-button";
7 | import { FullScreenDropZone } from "./full-screen-drop-zone";
8 | import { LoadButton } from "./load-button";
9 | import { Button } from "./ui/button";
10 | import { Label } from "./ui/label";
11 | import { Switch } from "./ui/switch";
12 | import { useToast } from "./ui/use-toast";
13 |
14 | export function ConfigPanel() {
15 | const [yDoc, setYDoc] = useYDoc();
16 | const { toast } = useToast();
17 | const [config, setConfig] = useConfig();
18 | const { undoManager, canRedo, canUndo, undoStackSize, redoStackSize } =
19 | useUndoManager();
20 |
21 | return (
22 |
23 | {
126 | if (!fileList.length) {
127 | console.error("No files dropped");
128 | return;
129 | }
130 | if (fileList.length > 1) {
131 | console.warn(
132 | "Multiple files dropped, only the first file will be loaded",
133 | );
134 | }
135 | const file = fileList[0];
136 | try {
137 | const newYDoc = await fileToYDoc(file);
138 | yDoc.destroy();
139 | setYDoc(newYDoc);
140 | } catch (error) {
141 | console.error(error);
142 | toast({
143 | variant: "destructive",
144 | title: "Error",
145 | description: "Failed to load YDoc",
146 | });
147 | }
148 | }}
149 | />
150 |
151 | );
152 | }
153 |
--------------------------------------------------------------------------------
/src/components/connect-button.tsx:
--------------------------------------------------------------------------------
1 | import { Cable, RotateCw } from "lucide-react";
2 | import { useCallback, useEffect, useState } from "react";
3 | import { ConnectProvider } from "../providers/types";
4 | import { useYDoc } from "../state/index";
5 | import { ConnectDialog } from "./connect-dialog";
6 | import { StatusIndicator } from "./status-indicator";
7 | import { Button } from "./ui/button";
8 | import { Dialog } from "./ui/dialog";
9 |
10 | export function ConnectButton() {
11 | const [yDoc] = useYDoc();
12 | const [open, setOpen] = useState(false);
13 | const [provider, setProvider] = useStateConfigure
24 |
28 |
32 | setConfig({
33 | ...config,
34 | parseYDoc: checked,
35 | })
36 | }
37 | />
38 |
39 |
40 |
41 |
42 |
47 | setConfig({
48 | ...config,
49 | showDelta: checked,
50 | })
51 | }
52 | />
53 |
54 |
55 |
56 |
57 |
61 | setConfig({
62 | ...config,
63 | showSize: checked,
64 | })
65 | }
66 | />
67 |
68 |
69 |
70 |
71 |
76 | setConfig({
77 | ...config,
78 | editable: checked,
79 | })
80 | }
81 | />
82 |
83 |
84 |
85 | {config.editable && (
86 |
87 |
102 |
117 |
118 | )}
119 |
103 |
200 | Caution!
202 |
203 | This may contaminate the remote YDoc. Make sure you know what you
204 | are doing.
205 |
206 |
207 | )}
208 |
209 | {officialDemo && (
210 |
211 | Heads up!
213 |
214 | Click here to access the
215 |
221 | {officialDemo.name}
222 |
223 | demo.
224 |
225 |
226 | )}
227 |
228 |
104 |
107 |
108 |
156 |
157 |
158 |
159 |
162 | setUrl(e.currentTarget.value)}
167 | placeholder="wss://demos.yjs.dev/ws"
168 | className="col-span-3"
169 | />
170 |
171 |
172 |
173 |
176 | setRoom(e.currentTarget.value)}
182 | placeholder="Please enter a room name"
183 | />
184 |
185 |
186 |
187 | setNeedCreateNewDoc(value)}
192 | />
193 |
196 |
197 |
198 | {!needCreateNewDoc && (
199 |
105 |
107 |
182 | {
188 | appendRule();
189 | }}
190 | >
191 | And
192 |
193 | {isLastRuleInGroup && (
194 | {
196 | rootRule.conditions.push(
197 | createFilterGroup({
198 | op: "and",
199 | conditions: [createFilterWithPreset()],
200 | }),
201 | );
202 | setRootRule(rootRule);
203 | }}
204 | >
205 | Or
206 |
207 | )}
208 | {isValid ? null : (
209 |
222 | );
223 | };
224 |
225 | const templatesSpec = {
226 | SingleFilter: SingleFilterView,
227 | FilterGroupContainer: ({ children }) => (
228 |
210 |
212 | )}
213 | {numberOfRules > 1 && (
214 |
220 | )}
221 | {children}
229 | ),
230 | RuleJoiner: ({ joinBetween: [before, after], parent }) => {
231 | const op = parent.op === "and" ? "And" : "Or";
232 | if (before.type === "Filter" && after.type === "Filter") {
233 | return (
234 |
235 |
236 |
239 |
240 |
241 | );
242 | }
243 | return (
244 |
247 | );
248 | },
249 | } satisfies Partial
71 |
75 | );
76 | }
77 |
--------------------------------------------------------------------------------
/src/components/load-button.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 | import {
3 | Dialog,
4 | DialogContent,
5 | DialogDescription,
6 | DialogFooter,
7 | DialogHeader,
8 | DialogTitle,
9 | DialogTrigger,
10 | } from "@/components/ui/dialog";
11 | import {
12 | DropdownMenu,
13 | DropdownMenuContent,
14 | DropdownMenuItem,
15 | DropdownMenuTrigger,
16 | } from "@/components/ui/dropdown-menu";
17 | import { Input } from "@/components/ui/input";
18 | import { Label } from "@/components/ui/label";
19 | import {
20 | File as FileIcon,
21 | FilePlus,
22 | Link,
23 | RotateCw,
24 | Upload,
25 | } from "lucide-react";
26 | import { useState } from "react";
27 | import * as Y from "yjs";
28 | import { useYDoc } from "../state/index";
29 | import { fileToYDoc } from "../utils";
30 | import { toast } from "./ui/use-toast";
31 |
32 | const ExampleYDocUrl =
33 | "https://insider.affine.pro/api/workspaces/af3478a2-9c9c-4d16-864d-bffa1eb10eb6/docs/-3bEQPBoOEkNH13ULW9Ed";
34 |
35 | function LoadFromUrlDialog({ children }: { children: React.ReactNode }) {
36 | const [open, setOpen] = useState(false);
37 | const [loading, setLoading] = useState(false);
38 | const [url, setUrl] = useState(ExampleYDocUrl);
39 | const [, setYDoc] = useYDoc();
40 |
41 | const handleLoadYDoc = async () => {
42 | setLoading(true);
43 | try {
44 | const resp = await fetch(url);
45 | if (!resp.ok) {
46 | throw new Error("Failed to fetch YDoc");
47 | }
48 | const newYDoc = await fileToYDoc(new File([await resp.blob()], "ydoc"));
49 | setYDoc(newYDoc);
50 | setOpen(false);
51 | } catch (error) {
52 | console.error(error);
53 | toast({
54 | variant: "destructive",
55 | title: "Error",
56 | description: "Failed to load YDoc",
57 | });
58 | } finally {
59 | setLoading(false);
60 | }
61 | };
62 |
63 | return (
64 |
103 | );
104 | }
105 | LoadFromUrlDialog.Trigger = DialogTrigger;
106 |
107 | export function LoadButton() {
108 | const [, setYDoc] = useYDoc();
109 |
110 | return (
111 |
72 | {text}
73 |
74 |
60 |
130 | );
131 | }
132 |
--------------------------------------------------------------------------------
/src/components/site-header.tsx:
--------------------------------------------------------------------------------
1 | import { Github } from "lucide-react";
2 | import packageJSON from "../../package.json";
3 | import { ModeToggle } from "./mode-toggle";
4 | import { badgeVariants } from "./ui/badge";
5 | import { Button } from "./ui/button";
6 | import yjsLogo from "/yjs.png";
7 |
8 | export function Header() {
9 | return (
10 |
61 |
74 |
75 | Inspect
62 | 63 | 73 |
76 | {/* See https://viewer.textea.io/apis */}
77 | {
82 | return (
83 | config.editable &&
84 | config.parseYDoc &&
85 | // TODO support YArray/YText
86 | (isYDoc(value) || isYMap(value))
87 | );
88 | }}
89 | onAdd={(path) => {
90 | const target = getYTypeFromPath(yDoc, path);
91 | if (!target) {
92 | console.error("Invalid target", path, target);
93 | return;
94 | }
95 | setTarget(target);
96 | setPath(path);
97 | setAddDialogOpen(true);
98 | }}
99 | enableDelete={(path) => {
100 | if (!config.editable || !config.parseYDoc) {
101 | return false;
102 | }
103 | const parent = getYTypeFromPath(yDoc, path.slice(0, -1));
104 | return isYMap(parent) || isYArray(parent);
105 | }}
106 | onDelete={(path, value) => {
107 | setTarget(value);
108 | setPath(path);
109 | setDeleteDialogOpen(true);
110 | }}
111 | displaySize={config.showSize}
112 | theme={resolvedTheme}
113 | defaultInspectDepth={inspectDepth}
114 | valueTypes={[yDataType]}
115 | />
116 |
117 |
12 |
43 |
13 |
14 | 
15 |
16 |
17 |
18 | Yjs Inspector
19 |
20 |
21 | {/* Placeholder for right side of header */}
22 |
23 |
29 | Yjs Version: {packageJSON.dependencies.yjs}
30 |
31 |
43 |
53 | ));
54 |
55 | CommandInput.displayName = CommandPrimitive.Input.displayName;
56 |
57 | const CommandList = React.forwardRef<
58 | React.ElementRef
20 | {title && {title} }
21 | {description && (
22 | {description}
23 | )}
24 |
25 | {action}
26 |