ZUI editor refactor

src/zui/ZUIEditor/BlockInsert.tsx → src/zui/ZUIEditor/EditorOverlays/BlockInsert.tsx

@@ -1,55 +1,19 @@
 import { Add } from '@mui/icons-material';
 import { IconButton, Paper } from '@mui/material';
 import { Box } from '@mui/system';
-import { useCommands, useEditorState, useEditorView } from '@remirror/react';
-import { FC, useEffect, useState } from 'react';
+import { useCommands } from '@remirror/react';
+import { FC } from 'react';
 
-type BlockDividerData = {
-  pos: number;
-  y: number;
+import { BlockDividerData } from './index';
+
+type BlockInsertProps = {
+  blockDividers: BlockDividerData[];
+  mouseY: number;
 };
 
-const BlockInsert: FC = () => {
-  const view = useEditorView();
-  const state = useEditorState();
-  const [mouseY, setMouseY] = useState(-Infinity);
+const BlockInsert: FC<BlockInsertProps> = ({ blockDividers, mouseY }) => {
   const { insertParagraph, focus } = useCommands();
 
-  useEffect(() => {
-    const handleMouseMove = (ev: Event) => {
-      if (ev.type == 'mousemove') {
-        const mouseEvent = ev as MouseEvent;
-        const editorRect = view.dom.getBoundingClientRect();
-        setMouseY(mouseEvent.clientY - editorRect.y);
-      }
-    };
-
-    view.root.addEventListener('mousemove', handleMouseMove);
-
-    return () => {
-      view.root.removeEventListener('mousemove', handleMouseMove);
-    };
-  }, [view.root]);
-
-  let pos = 0;
-  const blockDividers: BlockDividerData[] = [
-    {
-      pos: 0,
-      y: 0,
-    },
-    ...state.doc.children.map((blockNode) => {
-      pos += blockNode.nodeSize;
-      const rect = view.coordsAtPos(pos - 1);
-
-      const containerRect = view.dom.getBoundingClientRect();
-
-      return {
-        pos: pos,
-        y: rect.bottom - containerRect.top,
-      };
-    }),
-  ];
-
   return (
     <Box position="relative">
       {blockDividers.map(({ pos, y }, index) => {

src/zui/ZUIEditor/EditorOverlays/BlockMenu.tsx

@@ -0,0 +1,37 @@
+import { Box, MenuItem, Paper } from '@mui/material';
+import { FC } from 'react';
+
+import useBlockMenu from './useBlockMenu';
+
+type Props = {
+  blocks: {
+    id: string;
+    label: string;
+  }[];
+};
+
+const BlockMenu: FC<Props> = ({ blocks }) => {
+  const { filteredBlocks, menu } = useBlockMenu(blocks);
+
+  return (
+    <Box {...menu.getMenuProps()}>
+      <Paper>
+        {filteredBlocks.map((item, index) => {
+          const props = menu.getItemProps({ index, item });
+          return (
+            <MenuItem
+              key={item.id}
+              component="a"
+              selected={!!props['aria-current']}
+              {...props}
+            >
+              {item.label}
+            </MenuItem>
+          );
+        })}
+      </Paper>
+    </Box>
+  );
+};
+
+export default BlockMenu;

src/zui/ZUIEditor/EditorOverlays/BlockToolbar.tsx

@@ -0,0 +1,54 @@
+import { Box, Button, Paper } from '@mui/material';
+import { useCommands } from '@remirror/react';
+import { FC } from 'react';
+
+type BlockToolbarProps = {
+  curBlockType: string;
+  curBlockY: number;
+  pos: number;
+};
+
+const BlockToolbar: FC<BlockToolbarProps> = ({
+  curBlockType,
+  curBlockY,
+  pos,
+}) => {
+  const { convertParagraph, toggleHeading, pickImage } = useCommands();
+
+  return (
+    <Box position="relative">
+      <Box
+        sx={{
+          left: 0,
+          position: 'absolute',
+          top: curBlockY - 50,
+          transition: 'opacity 0.5s',
+          zIndex: 10000,
+        }}
+      >
+        <Paper elevation={1} sx={{ p: 1 }}>
+          {curBlockType}
+          {curBlockType == 'zimage' && (
+            <Button
+              onClick={() => {
+                pickImage(pos);
+              }}
+            >
+              Change image
+            </Button>
+          )}
+          {curBlockType == 'heading' && (
+            <Button onClick={() => convertParagraph()}>
+              Convert to paragraph
+            </Button>
+          )}
+          {curBlockType == 'paragraph' && (
+            <Button onClick={() => toggleHeading()}>Convert to heading</Button>
+          )}
+        </Paper>
+      </Box>
+    </Box>
+  );
+};
+
+export default BlockToolbar;