-//
-// 
-//
-//
-// );
-// }
-
-// export default App;
diff --git a/ui/src/assets/react.svg b/ui/src/assets/react.svg
new file mode 100644
index 00000000..6c87de9b
--- /dev/null
+++ b/ui/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/ui/src/components/Canvas.tsx b/ui/src/components/Canvas.tsx
index fc3d261a..38f74240 100644
--- a/ui/src/components/Canvas.tsx
+++ b/ui/src/components/Canvas.tsx
@@ -5,6 +5,7 @@ import {
useContext,
useEffect,
memo,
+ ChangeEvent,
} from "react";
import * as React from "react";
import ReactFlow, {
@@ -24,428 +25,313 @@ import ReactFlow, {
ReactFlowProvider,
Edge,
useViewport,
+ XYPosition,
+ useStore as useRfStore,
+ useKeyPress,
+ SelectionMode,
} from "reactflow";
import "reactflow/dist/style.css";
import Box from "@mui/material/Box";
-import { customAlphabet } from "nanoid";
-import { lowercase, numbers } from "nanoid-dictionary";
-
import { useStore } from "zustand";
+import * as Y from "yjs";
import { RepoContext } from "../lib/store";
-import { useEdgesYjsObserver, useYjsObserver } from "../lib/nodes";
-import { useApolloClient } from "@apollo/client";
import { CanvasContextMenu } from "./CanvasContextMenu";
import { ShareProjDialog } from "./ShareProjDialog";
import { RichNode } from "./nodes/Rich";
import { CodeNode } from "./nodes/Code";
import { ScopeNode } from "./nodes/Scope";
-import { YMap } from "yjs/dist/src/types/YMap";
import FloatingEdge from "./nodes/FloatingEdge";
import CustomConnectionLine from "./nodes/CustomConnectionLine";
import HelperLines from "./HelperLines";
+import { getAbsPos, newNodeShapeConfig } from "../lib/store/canvasSlice";
+import { useApolloClient } from "@apollo/client";
+import { trpc } from "../lib/trpc";
const nodeTypes = { SCOPE: ScopeNode, CODE: CodeNode, RICH: RichNode };
const edgeTypes = {
floating: FloatingEdge,
};
-/**
- * This hook will load nodes from zustand store into Yjs nodesMap using setNodes.
- * @returns None
- */
-function store2nodes(id: string, { getId2children, getPod }) {
- let res: any[] = [];
- let children = getId2children(id) || [];
- const pod = getPod(id);
- if (id !== "ROOT") {
- res.push({
- id: id,
- type: pod.type,
- data: {
- // label: `ID: ${id}, parent: ${pods[id].parent}, pos: ${pods[id].x}, ${pods[id].y}`,
- label: id,
- name: pod.name,
- parent: pod.parent,
- },
- // position: { x: 100, y: 100 },
- position: { x: pod.x, y: pod.y },
- parentNode: pod.parent !== "ROOT" ? pod.parent : undefined,
- style: {
- width: pod.width || undefined,
- height: pod.height || undefined,
- },
- width: pod.width || undefined,
- // for code node, don't set height, let it be auto
- height: pod.height || undefined,
- dragHandle: ".custom-drag-handle",
- });
- }
- for (const child of children) {
- res = res.concat(store2nodes(child, { getId2children, getPod }));
- }
- return res;
-}
-
-function verifyConsistency(nodes: Node[], nodesMap: YMap
-// Edit src/App.tsx and save to reload.
-//
as the reactFlowWrapper in
- // CanvasImpl, but they are exactly the same when using the bounding-box.
- const reactFlowWrapper = useRef(null);
-
- useYjsObserver();
- useEdgesYjsObserver();
- usePaste(reactFlowWrapper);
- useCut(reactFlowWrapper);
-
- const { loading } = useInitNodes();
- if (loading) return
+
@@ -473,8 +350,7 @@ function CanvasImplWrap() {
}
function ViewportInfo() {
- const store = useContext(RepoContext);
- if (!store) throw new Error("Missing BearContext.Provider in the tree");
+ const store = useContext(RepoContext)!;
const { x, y, zoom } = useViewport();
return (
(null);
- const store = useContext(RepoContext);
- if (!store) throw new Error("Missing BearContext.Provider in the tree");
+ const store = useContext(RepoContext)!;
const nodes = useStore(store, (state) => state.nodes);
const edges = useStore(store, (state) => state.edges);
- const apolloClient = useApolloClient();
- const onNodesChange = useStore(store, (state) =>
- state.onNodesChange(apolloClient)
- );
- const onEdgesChange = useStore(store, (state) =>
- state.onEdgesChange(apolloClient)
- );
- const onConnect = useStore(store, (state) => state.onConnect(apolloClient));
+ const nodesMap = useStore(store, (state) => state.getNodesMap());
+ const onNodesChange = useStore(store, (state) => state.onNodesChange);
+ const onEdgesChange = useStore(store, (state) => state.onEdgesChange);
+ const onConnect = useStore(store, (state) => state.onConnect);
const moveIntoScope = useStore(store, (state) => state.moveIntoScope);
const setDragHighlight = useStore(store, (state) => state.setDragHighlight);
const removeDragHighlight = useStore(
@@ -525,6 +396,10 @@ function CanvasImpl() {
const autoLayoutROOT = useStore(store, (state) => state.autoLayoutROOT);
const addNode = useStore(store, (state) => state.addNode);
+ const importLocalCode = useStore(store, (state) => state.importLocalCode);
+
+ const selectedPods = useStore(store, (state) => state.selectedPods);
+
const reactFlowInstance = useReactFlow();
const project = useCallback(
@@ -539,23 +414,61 @@ function CanvasImpl() {
);
const repoId = useStore(store, (state) => state.repoId);
- const isGuest = useStore(store, (state) => state.role === "GUEST");
+
+ const editMode = useStore(store, (state) => state.editMode);
const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
const shareOpen = useStore(store, (state) => state.shareOpen);
const setShareOpen = useStore(store, (state) => state.setShareOpen);
- const setPaneFocus = useStore(store, (state) => state.setPaneFocus);
- const setPaneBlur = useStore(store, (state) => state.setPaneBlur);
const [showContextMenu, setShowContextMenu] = useState(false);
const [points, setPoints] = useState({ x: 0, y: 0 });
const [client, setClient] = useState({ x: 0, y: 0 });
- const [parentNode, setParentNode] = useState("ROOT");
+ const [parentNode, setParentNode] = useState(undefined);
+
+ const moved = useStore(store, (state) => state.moved);
+ const paneClicked = useStore(store, (state) => state.paneClicked);
+ const nodeClicked = useStore(store, (state) => state.nodeClicked);
+
+ useEffect(() => {
+ setShowContextMenu(false);
+ }, [moved, paneClicked, nodeClicked]);
+ const escapePressed = useKeyPress("Escape");
+ useEffect(() => {
+ if (escapePressed) {
+ setShowContextMenu(false);
+ }
+ }, [escapePressed]);
+
+ const centerSelection = useStore(store, (state) => state.centerSelection);
+ const setCenterSelection = useStore(
+ store,
+ (state) => state.setCenterSelection
+ );
+
+ useEffect(() => {
+ // move the viewport to the to node
+ // get the absolute position of the to node
+ if (centerSelection && selectedPods.size > 0) {
+ const node = selectedPods.values().next().value;
+ const pos = getAbsPos(nodesMap.get(node)!, nodesMap);
+
+ reactFlowInstance.setCenter(
+ pos.x + nodesMap.get(node)!.width! / 2,
+ pos.y + nodesMap.get(node)!.height! / 2,
+ {
+ zoom: reactFlowInstance.getZoom(),
+ duration: 800,
+ }
+ );
+ setCenterSelection(false);
+ }
+ }, [centerSelection, setCenterSelection]);
const onPaneContextMenu = (event) => {
event.preventDefault();
setShowContextMenu(true);
- setParentNode("ROOT");
+ setParentNode(undefined);
setPoints({ x: event.pageX, y: event.pageY });
setClient({ x: event.clientX, y: event.clientY });
};
@@ -570,30 +483,10 @@ function CanvasImpl() {
setClient({ x: event.clientX, y: event.clientY });
};
- useEffect(() => {
- const handleClick = (event) => {
- setShowContextMenu(false);
- const target = event.target;
- // set the pane focused only when the clicked target is pane or the copy buttons on a pod
- // then we can paste right after click on the copy buttons
- if (
- target.className === "react-flow__pane" ||
- target.classList?.contains("copy-button") ||
- target.parentElement?.classList?.contains("copy-button")
- ) {
- setPaneFocus();
- } else {
- setPaneBlur();
- }
- };
- document.addEventListener("click", handleClick);
- return () => {
- document.removeEventListener("click", handleClick);
- };
- }, [setShowContextMenu, setPaneFocus, setPaneBlur]);
-
const getScopeAtPos = useStore(store, (state) => state.getScopeAtPos);
const autoRunLayout = useStore(store, (state) => state.autoRunLayout);
+ const setAutoLayoutOnce = useStore(store, (state) => state.setAutoLayoutOnce);
+ const autoLayoutOnce = useStore(store, (state) => state.autoLayoutOnce);
const helperLineHorizontal = useStore(
store,
@@ -603,6 +496,68 @@ function CanvasImpl() {
store,
(state) => state.helperLineVertical
);
+ const toggleMoved = useStore(store, (state) => state.toggleMoved);
+ const togglePaneClicked = useStore(store, (state) => state.togglePaneClicked);
+ const toggleNodeClicked = useStore(store, (state) => state.toggleNodeClicked);
+
+ const fileInputRef = useRef(null);
+
+ const handleItemClick = () => {
+ fileInputRef!.current!.click();
+ fileInputRef!.current!.value = "";
+ };
+
+ const handleFileInputChange = async (e: ChangeEvent) => {
+ if (!e.target.files || e.target.files.length === 0) return;
+ const fileName = e.target.files[0].name;
+ console.log("Import Jupyter Notebook or Python scripts: ", fileName);
+ const fileReader = new FileReader();
+ fileReader.onload = (e) => {
+ const fileContent =
+ typeof e.target!.result === "string"
+ ? e.target!.result
+ : Buffer.from(e.target!.result!).toString();
+ let cellList: any[] = [];
+ let importScopeName = "";
+ switch (fileName.split(".").pop()) {
+ case "ipynb":
+ cellList = JSON.parse(String(fileContent)).cells.map((cell) => ({
+ cellType: cell.cell_type,
+ cellSource: cell.source.join(""),
+ cellOutputs: cell.outputs || [],
+ execution_count: cell.execution_count || 0,
+ }));
+ importScopeName = fileName.substring(0, fileName.length - 6);
+ break;
+ case "py":
+ cellList = [{ cellType: "code", cellSource: String(fileContent) }];
+ break;
+ default:
+ return;
+ }
+
+ importLocalCode(
+ project({ x: client.x, y: client.y }),
+ importScopeName,
+ cellList
+ );
+ setAutoLayoutOnce(true);
+ };
+ fileReader.readAsText(e.target.files[0], "UTF-8");
+ };
+
+ useEffect(() => {
+ // A BIG HACK: we run autolayout once at SOME point after ImportLocalCode to
+ // let reactflow calculate the height of pods, then layout them properly.
+ if (
+ autoLayoutOnce &&
+ nodes.filter((node) => node.height === newNodeShapeConfig.height)
+ .length == 0
+ ) {
+ autoLayoutROOT();
+ setAutoLayoutOnce(false);
+ }
+ }, [autoLayoutOnce, nodes]);
return (
{
+ toggleMoved();
+ // Hide the Rich node drag handle when moving.
+ const elems = document.getElementsByClassName("global-drag-handle");
+ Array.from(elems).forEach((elem) => {
+ (elem as HTMLElement).style.display = "none";
+ });
+ }}
+ onPaneClick={() => {
+ togglePaneClicked();
+ }}
+ onNodeClick={() => {
+ toggleNodeClicked();
+ }}
onNodeDragStop={(event, node) => {
removeDragHighlight();
let mousePos = project({ x: event.clientX, y: event.clientY });
let scope = getScopeAtPos(mousePos, node.id);
- let toScope = scope ? scope.id : "ROOT";
- const parentScope = node.parentNode ? node.parentNode : "ROOT";
- if (toScope !== parentScope) {
- moveIntoScope(node.id, toScope);
+ let toScope = scope?.id;
+ const parentScope = node.parentNode;
+ if (selectedPods.size > 0 && parentScope !== toScope) {
+ moveIntoScope(Array.from(selectedPods), toScope);
+ // update view manually to remove the drag highlight.
+ updateView();
}
- // update view manually to remove the drag highlight.
- updateView();
// run auto layout on drag stop
if (autoRunLayout) {
autoLayoutROOT();
@@ -671,12 +640,15 @@ function CanvasImpl() {
zoomOnScroll={false}
panOnScroll={true}
connectionMode={ConnectionMode.Loose}
- nodesDraggable={!isGuest}
+ nodesDraggable={editMode === "edit"}
// disable node delete on backspace when the user is a guest.
- deleteKeyCode={isGuest ? null : "Backspace"}
+ deleteKeyCode={editMode === "view" ? null : "Backspace"}
multiSelectionKeyCode={isMac ? "Meta" : "Control"}
+ selectionMode={SelectionMode.Partial}
// TODO restore previous viewport
defaultViewport={{ zoom: 1, x: 0, y: 0 }}
+ proOptions={{ hideAttribution: true }}
+ disableKeyboardA11y={true}
>
+ handleFileInputChange(e)}
+ />
{showContextMenu && (
- addNode("CODE", project({ x: client.x, y: client.y }), parentNode)
- }
- addScope={() =>
+ addCode={() => {
+ addNode(
+ "CODE",
+ project({ x: client.x, y: client.y }),
+ parentNode
+ );
+ setShowContextMenu(false);
+ }}
+ addScope={() => {
addNode(
"SCOPE",
project({ x: client.x, y: client.y }),
parentNode
- )
- }
- addRich={() =>
- addNode("RICH", project({ x: client.x, y: client.y }), parentNode)
- }
+ );
+ setShowContextMenu(false);
+ }}
+ addRich={() => {
+ addNode(
+ "RICH",
+ project({ x: client.x, y: client.y }),
+ parentNode
+ );
+ setShowContextMenu(false);
+ }}
+ handleImportClick={() => {
+ // handle CanvasContextMenu "import Jupyter notebook" click
+ handleItemClick();
+ setShowContextMenu(false);
+ }}
onShareClick={() => {
setShareOpen(true);
+ setShowContextMenu(false);
}}
parentNode={null}
/>
diff --git a/ui/src/components/CanvasContextMenu.tsx b/ui/src/components/CanvasContextMenu.tsx
index b08024d8..2fed6114 100644
--- a/ui/src/components/CanvasContextMenu.tsx
+++ b/ui/src/components/CanvasContextMenu.tsx
@@ -9,7 +9,7 @@ import React, { useContext } from "react";
import CodeIcon from "@mui/icons-material/Code";
import PostAddIcon from "@mui/icons-material/PostAdd";
import NoteIcon from "@mui/icons-material/Note";
-import FormatListNumberedIcon from "@mui/icons-material/FormatListNumbered";
+import FileUploadTwoToneIcon from "@mui/icons-material/FileUploadTwoTone";
const paneMenuStyle = (left, top) => {
return {
@@ -33,18 +33,14 @@ const ItemStyle = {
};
export function CanvasContextMenu(props) {
- const store = useContext(RepoContext);
- if (!store) throw new Error("Missing BearContext.Provider in the tree");
- const showLineNumbers = useStore(store, (state) => state.showLineNumbers);
- const flipShowLineNumbers = useStore(
- store,
- (state) => state.flipShowLineNumbers
- );
- const isGuest = useStore(store, (state) => state.role === "GUEST");
+ const store = useContext(RepoContext)!;
+
+ const editMode = useStore(store, (state) => state.editMode);
+ const editing = editMode === "edit";
return (
- {!isGuest && (
+ {editing && (
)}
- {!isGuest && (
+ {editing && (
)}
- {!isGuest && (
+ {editing && (
)}
-
+ {editing && (
+
+ )}
);
diff --git a/ui/src/components/Header.tsx b/ui/src/components/Header.tsx
index afdd46a3..d9d587e3 100644
--- a/ui/src/components/Header.tsx
+++ b/ui/src/components/Header.tsx
@@ -21,54 +21,15 @@ import Tooltip from "@mui/material/Tooltip";
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
import AppBar from "@mui/material/AppBar";
-import { useAuth } from "../lib/auth";
-
-import useMe from "../lib/me";
-
-type HeaderProps = {
- open?: boolean;
- drawerWidth?: number;
- currentPage?: string | null;
- breadcrumbItem?: React.ReactNode;
- shareButton?: React.ReactNode;
-};
-
-export const Header: React.FC = ({
- open = false,
- drawerWidth = 0,
- currentPage = null,
- breadcrumbItem = null,
- shareButton = null,
-}) => {
- const [anchorElNav, setAnchorElNav] = useState(null);
- const [anchorElUser, setAnchorElUser] = useState(null);
-
- const handleOpenNavMenu = (event) => {
- setAnchorElNav(event.currentTarget);
- };
- const handleOpenUserMenu = (event) => {
- setAnchorElUser(event.currentTarget);
- };
-
- const handleCloseNavMenu = () => {
- setAnchorElNav(null);
- };
-
- const handleCloseUserMenu = () => {
- setAnchorElUser(null);
- };
-
- const { isSignedIn, signOut } = useAuth();
- let navigate = useNavigate();
- const { me } = useMe();
-
+export const Header = ({ children }: { children?: any }) => {
return (
@@ -79,32 +40,7 @@ export const Header: React.FC = ({
maxHeight: "10px",
}}
>
-
-
- CodePod
-
- {currentPage && (
- {currentPage}
- )}
- {breadcrumbItem}
-
-
-
- {shareButton}
-
+ {children}
{/* The navigation on desktop */}
= ({
Docs
-
- {isSignedIn() ? (
-
-
-
- {me?.firstname}
-
-
-
-
- ) : (
- Login
- )}
);
};
-const MyMenuItem = ({ children, to = "/" }) => {
- return (
-
-
- {children}
-
-
- );
-};
-
export function Footer() {
return (
state.autoLayoutROOT);
const actions = [
{
diff --git a/ui/src/components/MyMonaco.tsx b/ui/src/components/MyMonaco.tsx
index 6f9408a5..c1ba2570 100644
--- a/ui/src/components/MyMonaco.tsx
+++ b/ui/src/components/MyMonaco.tsx
@@ -4,10 +4,14 @@ import MonacoEditor, { MonacoDiffEditor } from "react-monaco-editor";
import { monaco } from "react-monaco-editor";
import { Node } from "reactflow";
import { useStore } from "zustand";
+import * as Y from "yjs";
+
import { RepoContext } from "../lib/store";
import { MonacoBinding } from "y-monaco";
import { useReactFlow } from "reactflow";
import { Annotation } from "../lib/parser";
+import { useApolloClient } from "@apollo/client";
+import { trpc } from "../lib/trpc";
const theme: monaco.editor.IStandaloneThemeData = {
base: "vs",
@@ -26,6 +30,7 @@ monaco.languages.setLanguageConfiguration("julia", {
decreaseIndentPattern: /^\s*(end|else|elseif|catch|finally)\b.*$/,
},
});
+
function construct_indent(pos, indent) {
return [
{
@@ -385,37 +390,33 @@ export const MyMonaco = memo(function MyMonaco({
}) {
// there's no racket language support
console.debug("[perf] rendering MyMonaco", id);
- const store = useContext(RepoContext);
- if (!store) throw new Error("Missing BearContext.Provider in the tree");
- const readOnly = useStore(store, (state) => state.role === "GUEST");
+ const store = useContext(RepoContext)!;
const showLineNumbers = useStore(store, (state) => state.showLineNumbers);
- const getPod = useStore(store, (state) => state.getPod);
- const setCurrentEditor = useStore(store, (state) => state.setCurrentEditor);
- const setPodContent = useStore(store, (state) => state.setPodContent);
- const initPodContent = useStore(store, (state) => state.initPodContent);
- const clearResults = useStore(store, (s) => s.clearResults);
- const wsRun = useStore(store, (state) => state.wsRun);
- const setPodFocus = useStore(store, (state) => state.setPodFocus);
- const setPodBlur = useStore(store, (state) => state.setPodBlur);
- const nodesMap = useStore(store, (state) => state.ydoc.getMap("pods"));
- const annotations = useStore(store, (state) => state.pods[id]?.annotations);
+ const preprocessChain = useStore(store, (state) => state.preprocessChain);
+
+ const runChain = trpc.spawner.runChain.useMutation();
+ const activeRuntime = useStore(store, (state) => state.activeRuntime);
+
+ const focusedEditor = useStore(store, (state) => state.focusedEditor);
+ const setFocusedEditor = useStore(store, (state) => state.setFocusedEditor);
+ const annotations = useStore(
+ store,
+ (state) => state.parseResult[id]?.annotations
+ );
const showAnnotations = useStore(store, (state) => state.showAnnotations);
const scopedVars = useStore(store, (state) => state.scopedVars);
const updateView = useStore(store, (state) => state.updateView);
- const value = getPod(id)?.content || "";
- let lang = getPod(id)?.lang || "javascript";
- const onChange = (value) => setPodContent({ id, content: value });
+ // TODO support other languages.
+ let lang = "python";
let [editor, setEditor] =
useState(null);
- const onRun = useCallback(() => {
- // it's MonacoEditor's bug microsoft/monaco-editor#2947, it always triggered the last created instance
- const activeId = store.getState().currentEditor;
- if (activeId) {
- clearResults(activeId);
- wsRun(activeId);
+
+ useEffect(() => {
+ if (focusedEditor === id) {
+ editor?.focus();
}
- }, [clearResults, store, wsRun]);
+ }, [focusedEditor]);
useEffect(() => {
if (!editor) return;
@@ -431,92 +432,89 @@ export const MyMonaco = memo(function MyMonaco({
}
const provider = useStore(store, (state) => state.provider);
- const ydoc = useStore(store, (state) => state.ydoc);
- const awareness = provider?.awareness;
+ const codeMap = useStore(store, (state) => state.getCodeMap());
+ const selectPod = useStore(store, (state) => state.selectPod);
const resetSelection = useStore(store, (state) => state.resetSelection);
+ const editMode = useStore(store, (state) => state.editMode);
+ // FIXME useCallback?
function onEditorDidMount(
editor: monaco.editor.IStandaloneCodeEditor,
monaco
) {
setEditor(editor);
// console.log(Math.min(1000, editor.getContentHeight()));
- const updateHeight = () => {
- // max height: 400
- const contentHeight = Math.max(
- 100,
- editor.getContentHeight()
- // Math.min(400, editor.getContentHeight())
- );
- // console.log("target height:", contentHeight);
+ const updateHeight = ({ contentHeight }) => {
const editorElement = editor.getDomNode();
if (!editorElement) {
return;
}
editorElement.style.height = `${contentHeight}px`;
- // width: 800
- // editor.layout({ width: 800, height: contentHeight });
editor.layout();
- // onLayout(`${contentHeight}px`);
};
editor.onDidBlurEditorText(() => {
- setPodBlur(id);
+ setFocusedEditor(undefined);
});
editor.onDidFocusEditorText(() => {
- setPodFocus(id);
if (resetSelection()) updateView();
- setCurrentEditor(id);
});
editor.onDidContentSizeChange(updateHeight);
- // FIXME clean up?
- editor.addCommand(monaco.KeyMod.Shift | monaco.KeyCode.Enter, function () {
- onRun();
+ // Note: must use addAction instead of addCommand. The addCommand is not
+ // working because it is bound to only the latest Monaco instance. This is a
+ // known bug: https://github.com/microsoft/monaco-editor/issues/2947
+ editor.addAction({
+ id: "Run",
+ label: "Run",
+ keybindings: [monaco.KeyMod.Shift | monaco.KeyCode.Enter],
+ run: () => {
+ if (activeRuntime) {
+ const specs = preprocessChain([id]);
+ if (specs) runChain.mutate({ runtimeId: activeRuntime, specs });
+ }
+ },
+ });
+ editor.addAction({
+ id: "Leave-editor",
+ label: "Leave editor",
+ keybindings: [monaco.KeyCode.Escape],
+ run: () => {
+ if (document.activeElement) {
+ (document.activeElement as any).blur();
+ setFocusedEditor(undefined);
+ resetSelection();
+ selectPod(id, true);
+ }
+ },
});
+
// editor.onDidChangeModelContent(async (e) => {
// // content is value?
// updateGitGutter(editor);
// });
// bind it to the ytext with pod id
- const ytext = ydoc.getText("monaco-" + id);
- const monacoBinding = new MonacoBinding(
+ if (!codeMap.has(id)) {
+ throw new Error("codeMap doesn't have pod " + id);
+ }
+ const ytext = codeMap.get(id)!;
+ new MonacoBinding(
ytext,
editor.getModel()!,
new Set([editor]),
- awareness
+ provider?.awareness
);
- const init = () => {
- if (!ytext._start && ytext.length === 0) {
- ytext.insert(0, value);
- } else {
- // init the pasted pod content by the code on the yjs server
- initPodContent({ id, content: ytext.toString() });
- }
- };
-
- if (!provider || !provider.wsconnected) {
- // TODO: consider offline situation later
- // editor.getModel().setValue(value);
- return;
- } else if (provider.synced) {
- init();
- } else {
- provider.once("synced", init);
- }
-
// FIXME: make sure the provider.wsconnected is true or it won't display any content.
}
return (
(function MyMonaco({
},
fontSize,
}}
- onChange={onChange}
editorDidMount={onEditorDidMount}
/>
);
diff --git a/ui/src/components/ShareProjDialog.tsx b/ui/src/components/ShareProjDialog.tsx
index f059b941..e335a717 100644
--- a/ui/src/components/ShareProjDialog.tsx
+++ b/ui/src/components/ShareProjDialog.tsx
@@ -8,7 +8,7 @@ import Button from "@mui/material/Button";
import Alert from "@mui/material/Alert";
import { AlertColor } from "@mui/material/Alert";
import Snackbar from "@mui/material/Snackbar";
-import { useState } from "react";
+import { useEffect, useState } from "react";
import ListSubheader from "@mui/material/ListSubheader";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
@@ -26,7 +26,7 @@ import React, { useContext, useReducer } from "react";
import { CopyToClipboard } from "react-copy-to-clipboard";
import { useStore } from "zustand";
import { RepoContext } from "../lib/store";
-import { useApolloClient } from "@apollo/client";
+import { gql, useApolloClient, useMutation } from "@apollo/client";
const initialState = { showInfo: false, status: "info", message: "wait..." };
@@ -102,15 +102,26 @@ function reducer(state, action) {
}
}
-function CollaboratorList({ collaborators, dispatch, isOwner }) {
- const store = useContext(RepoContext);
- if (!store) throw new Error("Missing BearContext.Provider in the tree");
+function CollaboratorList({ repoId, collaborators, dispatch }) {
+ const store = useContext(RepoContext)!;
const apolloClient = useApolloClient();
- const deleteCollaborator = useStore(
- store,
- (state) => state.deleteCollaborator
+ const [deleteCollaborator, { data, loading, error }] = useMutation(
+ gql`
+ mutation deleteCollaborator($repoId: String!, $collaboratorId: String!) {
+ deleteCollaborator(repoId: $repoId, collaboratorId: $collaboratorId)
+ }
+ `
);
+ useEffect(() => {
+ if (error) {
+ dispatch({ type: "delete error", message: error.message });
+ }
+ if (data) {
+ dispatch({ type: "delete success", name: data.deleteCollaborator });
+ }
+ }, [error]);
+
if (!collaborators || collaborators?.length === 0) {
return (
Loading...
;
+ useCopyPaste();
+ useJump();
return (
- -
@@ -129,15 +140,6 @@ function CollaboratorList({ collaborators, dispatch, isOwner }) {
);
}
- async function handleDeleteCollaborator(userId, name) {
- const { success, error } = await deleteCollaborator(apolloClient, userId);
- if (success) {
- dispatch({ type: "delete success", name });
- } else {
- dispatch({ type: "delete error", message: error.message });
- }
- }
-
return (
- (
{JSON.stringify(dirtyIds)}}
-
- {enabled &&
- users.map((user, index) => {
- const isHighlighted = indexIsSelected(index);
- const isHovered = indexIsHovered(index);
-
- return (
-
-
- {user.label}
-
- );
- })}
- I love Remirror
", // content: "hello world", // content: initialContent, - content: pod.content, + // FIXME initial content should not be set. + // content: pod.content == "" ? pod.richContent : pod.content, // Place the cursor at the start of the document. This can also be set to // `end`, `all` or a numbered position. @@ -537,76 +372,90 @@ const MyEditor = ({ // `markdown` is also available when the `MarkdownExtension` // is added to the editor. // stringHandler: "html", - stringHandler: htmlToProsemirrorNode, + // stringHandler: htmlToProsemirrorNode, + // FIXME handle markdown import/export when we migrate to Yjs for everything. + stringHandler: "markdown", }); + // Printing the schema for backend JSON2YXML conversion. This is useful for + // parsing the prosemirror JSON doc format in the backend (search `json2yxml` + // funciton). + // + // const obj = { nodes: {}, marks: {}, + // }; + // manager.schema.spec.nodes.forEach((k, v) => { console.log("k", k, "v", v); + // obj["nodes"][k] = v; + // }); + // manager.schema.spec.marks.forEach((k, v) => { console.log("k", k, "v", v); + // obj["marks"][k] = v; + // }); + // console.log("obj", JSON.stringify(obj)); + return (