fix selection/toolbar; fix float comp; fix rich-pod-move (#199)

codepod-io · Jan 5, 2023 · d5a66aa · d5a66aa
1 parent f2e55e1
commit d5a66aa
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 28 deletions.
diff --git a/ui/src/components/Canvas.tsx b/ui/src/components/Canvas.tsx
@@ -616,15 +616,15 @@ function verifyConsistency(nodes: Node[], nodesMap: YMap<Node>) {
       );
       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,
         node2.position.x
       );
       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
@@ -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<Node>("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<HTMLDivElement>(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 (
     <Box
       className="remirror-theme"
       onFocus={() => {
         // 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"
     >
       <AllStyledComponent>
@@ -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 = ({
               {/* <WysiwygToolbar /> */}
               <EditorComponent />
               <TableComponents />
-              <FloatingToolbar>
-                <CommandButtonGroup>
-                  {/* <HeadingLevelButtonGroup /> */}
-                  {/* <VerticalDivider /> */}
-                  <FormattingButtonGroup />
-                  {/* <ListButtonGroup /> */}
-                  <SetHighlightButton color="lightpink" />
-                  <SetHighlightButton color="yellow" />
-                  <SetHighlightButton color="lightgreen" />
-                  <SetHighlightButton color="lightcyan" />
-                  <SetHighlightButton />
-                </CommandButtonGroup>
-                {/* <DecreaseIndentButton /> */}
-                {/* <IncreaseIndentButton /> */}
-                {/* <TextAlignmentButtonGroup /> */}
-                {/* <IndentationButtonGroup /> */}
-                {/* <BaselineButtonGroup /> */}
-              </FloatingToolbar>
-              <FloatingToolbar positioner="emptyBlockStart">
-                <HeadingLevelButtonGroup />
-              </FloatingToolbar>
+
+              {!isGuest && (
+                <FloatingToolbar>
+                  <CommandButtonGroup>
+                    {/* <HeadingLevelButtonGroup /> */}
+                    {/* <VerticalDivider /> */}
+                    <FormattingButtonGroup />
+                    {/* <ListButtonGroup /> */}
+                    <SetHighlightButton color="lightpink" />
+                    <SetHighlightButton color="yellow" />
+                    <SetHighlightButton color="lightgreen" />
+                    <SetHighlightButton color="lightcyan" />
+                    <SetHighlightButton />
+                  </CommandButtonGroup>
+                  {/* <DecreaseIndentButton /> */}
+                  {/* <IncreaseIndentButton /> */}
+                  {/* <TextAlignmentButtonGroup /> */}
+                  {/* <IndentationButtonGroup /> */}
+                  {/* <BaselineButtonGroup /> */}
+                </FloatingToolbar>
+              )}
+              {!isGuest && (
+                <FloatingToolbar positioner="emptyBlockStart">
+                  <HeadingLevelButtonGroup />
+                </FloatingToolbar>
+              )}
               {/* <Menu /> */}
             </Remirror>
           </MyStyledWrapper>