diff --git a/ui/src/components/Canvas.tsx b/ui/src/components/Canvas.tsx index 0eda6865..a1e73db4 100644 --- a/ui/src/components/Canvas.tsx +++ b/ui/src/components/Canvas.tsx @@ -616,7 +616,7 @@ function verifyConsistency(nodes: Node[], nodesMap: YMap) { ); return false; } - if (node1.position.x !== node2.position.x) { + if (Math.abs(node1.position.x - node2.position.x) > Number.EPSILON) { console.error( "node x are not the same", node1.position.x, @@ -624,7 +624,7 @@ function verifyConsistency(nodes: Node[], nodesMap: YMap) { ); return false; } - if (node1.position.y !== node2.position.y) { + if (Math.abs(node1.position.y - node2.position.y) > Number.EPSILON) { console.error( "node y are not the same", node1.position.y, diff --git a/ui/src/components/nodes/Rich.tsx b/ui/src/components/nodes/Rich.tsx index 3fa227eb..f2a94fd0 100644 --- a/ui/src/components/nodes/Rich.tsx +++ b/ui/src/components/nodes/Rich.tsx @@ -94,6 +94,8 @@ import { GenIcon, IconBase } from "@remirror/react-components"; import { htmlToProsemirrorNode } from "remirror"; import { styled } from "@mui/material"; +const selectionKeys = ["Enter", "Space", "Escape", "Tab"]; + export interface SetHighlightButtonProps extends Omit< CommandButtonProps, @@ -159,6 +161,10 @@ const MyEditor = ({ const nodesMap = useStore(store, (state) => state.ydoc.getMap("pods")); const pod = getPod(id); const isGuest = useStore(store, (state) => state.role === "GUEST"); + const setPodFocus = useStore(store, (state) => state.setPodFocus); + const setPodBlur = useStore(store, (state) => state.setPodBlur); + const isPodFocused = useStore(store, (state) => state.pods[id]?.focus); + const ref = useRef(null); const { manager, state, setState } = useRemirror({ extensions: () => [ new PlaceholderExtension({ placeholder }), @@ -191,16 +197,33 @@ const MyEditor = ({ stringHandler: htmlToProsemirrorNode, }); + useEffect(() => { + const handler = (event: KeyboardEvent) => { + if (selectionKeys.indexOf(event.code) !== -1) { + // avoid to re-select this node + event.stopPropagation(); + } + }; + if (!isPodFocused || !ref.current) return; + ref.current?.addEventListener("keydown", handler); + return () => { + if (ref.current) ref.current.removeEventListener("keydown", handler); + }; + }, [ref.current, isPodFocused]); + return ( { // FIXME: it's a dummy update in nodesMap to trigger the local update to clear all selection if (resetSelection()) nodesMap.set(id, nodesMap.get(id) as Node); + setPodFocus(id); }} - sx={{ - cursor: "text", + onBlur={() => { + setPodBlur(id); }} + sx={{ userSelect: "text", cursor: "auto" }} + ref={ref} overflow="auto" > @@ -212,9 +235,6 @@ const MyEditor = ({ state={state} editable={!isGuest} // FIXME: onFocus is not working - // onFocus={() => { - // console.log("onFocus"); - // }} onChange={(parameter) => { let nextState = parameter.state; setState(nextState); @@ -227,27 +247,32 @@ const MyEditor = ({ {/* */} - - - {/* */} - {/* */} - - {/* */} - - - - - - - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - - - - + + {!isGuest && ( + + + {/* */} + {/* */} + + {/* */} + + + + + + + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + + )} + {!isGuest && ( + + + + )} {/* */}