zetkin · richardolsson · Jan 8, 2025 · Jan 8, 2025 · Jan 9, 2025 · Jan 10, 2025
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -1,3 +1,4 @@
 {
-  "singleQuote": true
+  "singleQuote": true,
+  "proseWrap": "always"
 }
diff --git a/package.json b/package.json
@@ -50,6 +50,10 @@
     "@nivo/pie": "^0.80.0",
     "@nivo/radial-bar": "^0.80.0",
     "@reduxjs/toolkit": "^1.8.6",
+    "@remirror/pm": "^3.0.0",
+    "@remirror/react": "^3.0.1",
+    "@remirror/react-editors": "^2.0.1",
+    "@remirror/react-ui": "^1.0.1",
     "@types/dompurify": "^2.3.3",
     "@types/mjml": "^4.7.4",
     "copy-to-clipboard": "^3.3.1",
@@ -88,6 +92,7 @@
     "remark-gfm": "^3.0.1",
     "remark-parse": "^10.0.1",
     "remark-slate": "^1.8.6",
+    "remirror": "^3.0.1",
     "slate": "^0.94.1",
     "slate-history": "^0.66.0",
     "slate-react": "^0.98.3",

diff --git a/src/features/emails/layout/EmailLayout.tsx b/src/features/emails/layout/EmailLayout.tsx
@@ -49,6 +49,10 @@ const EmailLayout: FC<EmailLayoutProps> = ({
       href: '/compose',
       label: messages.tabs.compose(),
     },
+    {
+      href: '/newEditor',
+      label: 'New editor',
+    },
   ];
 
   if (email.processed) {

diff --git a/src/pages/organize/[orgId]/projects/[campId]/emails/[emailId]/newEditor.tsx b/src/pages/organize/[orgId]/projects/[campId]/emails/[emailId]/newEditor.tsx
@@ -0,0 +1,38 @@
+import { Box } from '@mui/material';
+import Head from 'next/head';
+import { GetServerSideProps } from 'next';
+
+import { PageWithLayout } from 'utils/types';
+import EmailLayout from 'features/emails/layout/EmailLayout';
+import ZUIEditor from 'zui/ZUIEditor';
+import { scaffold } from 'utils/next';
+
+export const getServerSideProps: GetServerSideProps = scaffold(
+  async () => {
+    return {
+      props: {},
+    };
+  },
+  {
+    authLevelRequired: 2,
+  }
+);
+
+const EmailPage: PageWithLayout = () => {
+  return (
+    <>
+      <Head>
+        <title>hejj</title>
+      </Head>
+      <Box>
+        <ZUIEditor enableButton enableHeading enableImage />
+      </Box>
+    </>
+  );
+};
+
+EmailPage.getLayout = function getLayout(page) {
+  return <EmailLayout>{page}</EmailLayout>;
+};
+
+export default EmailPage;
diff --git a/src/zui/ZUIEditor/BlockInsert.tsx b/src/zui/ZUIEditor/BlockInsert.tsx
@@ -0,0 +1,100 @@
+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';
+
+type BlockDividerData = {
+  pos: number;
+  y: number;
+};
+
+const BlockInsert: FC = () => {
+  const view = useEditorView();
+  const state = useEditorState();
+  const [mouseY, setMouseY] = useState(-Infinity);
+  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) => {
+        const visible = Math.abs(mouseY - y) < 20;
+        const isFirst = index == 0;
+        const offset = isFirst ? -6 : 12;
+        return (
+          <Box
+            key={index}
+            sx={{
+              bgcolor: 'red',
+              display: 'flex',
+              height: '1px',
+              justifyContent: 'center',
+              opacity: visible ? 1 : 0,
+              position: 'absolute',
+              top: Math.round(y + offset),
+              transition: 'opacity 0.5s',
+              width: '100%',
+            }}
+          >
+            <Box
+              sx={{
+                pointerEvents: visible ? 'auto' : 'none',
+                position: 'relative',
+                top: -16,
+              }}
+            >
+              <Paper>
+                <IconButton
+                  disabled={!insertParagraph.enabled(' ', { selection: pos })}
+                  onClick={() => {
+                    insertParagraph(' ', { selection: pos });
+                    focus(pos);
+                  }}
+                >
+                  <Add />
+                </IconButton>
+              </Paper>
+            </Box>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+};
+
+export default BlockInsert;
diff --git a/src/zui/ZUIEditor/BlockMenu.tsx b/src/zui/ZUIEditor/BlockMenu.tsx
@@ -0,0 +1,90 @@
+import { Box, MenuItem, Paper } from '@mui/material';
+import {
+  useCommands,
+  useExtensionEvent,
+  useMenuNavigation,
+  usePositioner,
+} from '@remirror/react';
+import { FC, useState } from 'react';
+
+import BlockMenuExtension from './extensions/BlockMenuExtension';
+
+type Props = {
+  blocks: {
+    id: string;
+    label: string;
+  }[];
+};
+
+const BlockMenu: FC<Props> = ({ blocks }) => {
+  const [query, setQuery] = useState<string | null>(null);
+  const [ignore, setIgnore] = useState(false);
+  const positioner = usePositioner('cursor');
+  const { insertBlock } = useCommands();
+
+  useExtensionEvent(BlockMenuExtension, 'onBlockQuery', (newQuery) => {
+    setQuery(newQuery);
+    if (newQuery == null) {
+      setIgnore(false);
+    }
+  });
+
+  const filteredBlocks = blocks.filter(
+    (block) =>
+      !query ||
+      query == '' ||
+      block.id.toLowerCase().startsWith(query.toLowerCase()) ||
+      block.label.toLowerCase().startsWith(query.toLowerCase())
+  );
+
+  const isOpen = query !== null && !ignore;
+
+  const menu = useMenuNavigation({
+    isOpen: isOpen,
+    items: filteredBlocks,
+    onDismiss: () => {
+      setQuery(null);
+      setIgnore(true);
+      return true;
+    },
+    onSubmit: (blockType) => {
+      setQuery(null);
+      insertBlock(blockType.id);
+      return true;
+    },
+  });
+
+  return (
+    <Box position="relative">
+      <Box
+        ref={positioner.ref}
+        sx={{
+          left: positioner.x,
+          position: 'absolute',
+          top: positioner.y,
+        }}
+      >
+        <Box {...menu.getMenuProps()}>
+          <Paper>
+            {isOpen &&
+              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>
+      </Box>
+    </Box>
+  );
+};
+
+export default BlockMenu;
diff --git a/src/zui/ZUIEditor/BlockToolbar.tsx b/src/zui/ZUIEditor/BlockToolbar.tsx
@@ -0,0 +1,115 @@
+import { Box, Button, Paper } from '@mui/material';
+import {
+  useCommands,
+  useEditorEvent,
+  useEditorState,
+  useEditorView,
+} from '@remirror/react';
+import { FC, useEffect, useState } from 'react';
+import { findParentNode, isNodeSelection, ProsemirrorNode } from 'remirror';
+
+const BlockToolbar: FC = () => {
+  const [typing, setTyping] = useState(false);
+  const [curBlockPos, setCurBlockPos] = useState<number>(-1);
+  const [curBlockType, setCurBlockType] = useState<string>();
+  const view = useEditorView();
+  const state = useEditorState();
+  const { convertParagraph, setImageFile, toggleHeading } = useCommands();
+
+  useEditorEvent('keyup', () => {
+    setTyping(true);
+  });
+
+  useEditorEvent('blur', () => {
+    setCurBlockPos(-1);
+  });
+
+  useEffect(() => {
+    if (view.root) {
+      const handleMove = () => {
+        setTyping(false);
+      };
+
+      view.root.addEventListener('mousemove', handleMove);
+
+      return () => view.root.removeEventListener('mousemove', handleMove);
+    }
+  }, [view.root]);
+
+  useEffect(() => {
+    let node: ProsemirrorNode | null = null;
+    let nodeElem: HTMLElement | null = null;
+    if (isNodeSelection(state.selection)) {
+      const elem = view.nodeDOM(state.selection.$from.pos);
+      if (elem instanceof HTMLElement) {
+        node = state.selection.node;
+        nodeElem = elem;
+      }
+    } else {
+      const result = findParentNode({
+        predicate: () => true,
+        selection: state.selection,
+      });
+
+      if (result) {
+        node = result.node;
+        let elem = view.nodeDOM(result.start);
+
+        while (
+          elem &&
+          elem.parentNode &&
+          elem.parentElement?.contentEditable != 'true'
+        ) {
+          elem = elem.parentNode;
+        }
+
+        if (elem instanceof HTMLElement) {
+          nodeElem = elem;
+        }
+      }
+    }
+
+    if (node && nodeElem) {
+      const editorRect = view.dom.getBoundingClientRect();
+      const nodeRect = nodeElem.getBoundingClientRect();
+      setCurBlockPos(nodeRect.y - editorRect.y);
+      setCurBlockType(node.type.name);
+    }
+  }, [state.selection]);
+
+  const showBar =
+    curBlockType && curBlockPos >= 0 && view.hasFocus() && !typing;
+
+  return (
+    <Box position="relative">
+      <Box
+        sx={{
+          left: 0,
+          opacity: showBar ? 1 : 0,
+          pointerEvents: showBar ? 'auto' : 'none',
+          position: 'absolute',
+          top: curBlockPos - 50,
+          transition: 'opacity 0.5s',
+          zIndex: 10000,
+        }}
+      >
+        <Paper elevation={1} sx={{ p: 1 }}>
+          {curBlockType}
+          {curBlockType == 'zimage' && (
+            <Button onClick={() => setImageFile(null)}>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;