diff --git a/ui/src/components/Canvas.tsx b/ui/src/components/Canvas.tsx index b5c2083c..54bbb15a 100644 --- a/ui/src/components/Canvas.tsx +++ b/ui/src/components/Canvas.tsx @@ -277,6 +277,7 @@ const CodeNode = memo(({ data, id, isConnectable }) => { const { setNodes } = useReactFlow(); // const selected = useStore(store, (state) => state.selected); const setSelected = useStore(store, (state) => state.setSelected); + const setCurrentEditor = useStore(store, (state) => state.setCurrentEditor); const getPod = useStore(store, (state) => state.getPod); const pod = getPod(id); @@ -385,6 +386,7 @@ const CodeNode = memo(({ data, id, isConnectable }) => { }} onFocus={() => { setIsEditorBlur(false); + setCurrentEditor(id); }} /> {showResult && ( diff --git a/ui/src/components/MyMonaco.tsx b/ui/src/components/MyMonaco.tsx index c3c7bdf3..8657c2b7 100644 --- a/ui/src/components/MyMonaco.tsx +++ b/ui/src/components/MyMonaco.tsx @@ -329,12 +329,15 @@ export const MyMonaco = memo(function MyMonaco({ const setPodContent = useStore(store, (state) => state.setPodContent); const clearResults = useStore(store, (s) => s.clearResults); const wsRun = useStore(store, (state) => state.wsRun); + const value = getPod(id).content || ""; let lang = getPod(id).lang || "javascript"; const onChange = (value) => setPodContent({ id, content: value }); const onRun = () => { - clearResults(id); - wsRun(id); + // it's MonacoEditor's bug microsoft/monaco-editor#2947, it always triggered the last created instance + const activeId = store.getState().currentEditor; + clearResults(activeId); + wsRun(activeId); }; if (lang === "racket") { diff --git a/ui/src/lib/store.tsx b/ui/src/lib/store.tsx index f5319058..3f1ab0d2 100644 --- a/ui/src/lib/store.tsx +++ b/ui/src/lib/store.tsx @@ -27,9 +27,8 @@ if (window.location.protocol === "http:") { } console.log("yjs server url: ", serverURL); -export const RepoContext = createContext | null>(null); +export const RepoContext = + createContext | null>(null); // TODO use a selector to compute and retrieve the status // TODO this need to cooperate with syncing indicator @@ -85,6 +84,8 @@ const initialState = { socketIntervalId: null, // keep different seletced info on each user themselves selected: null, + // to fixed maco editor command bug + currentEditor: null, //TODO: all presence information are now saved in clients map for future usage. create a modern UI to show those information from clients (e.g., online users) clients: new Map(), showLineNumbers: false, @@ -180,6 +181,8 @@ export interface RepoSlice { setPodParent: ({ id, parent }: any) => void; selected: string | null; setSelected: (id: string | null) => void; + currentEditor: string | null; + setCurrentEditor: (id: string | null) => void; setUser: (user: any) => void; addClient: (clientId: any, name, color) => void; deleteClient: (clientId: any) => void; @@ -238,6 +241,7 @@ const createRepoSlice: StateCreator< addError: (error) => set({ error }), clearError: () => set({ error: null }), setSelected: (id) => set({ selected: id }), + setCurrentEditor: (id) => set({ currentEditor: id }), addPod: async ( client, { parent, index, anchor, shift, id, type, lang, x, y, width, height }