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 enableVariable />
+      </Box>
+    </>
+  );
+};
+
+EmailPage.getLayout = function getLayout(page) {
+  return <EmailLayout>{page}</EmailLayout>;
+};
+
+export default EmailPage;
diff --git a/src/zui/ZUIEditor/ButtonExtensionUI.tsx b/src/zui/ZUIEditor/ButtonExtensionUI.tsx
@@ -0,0 +1,64 @@
+import { useCommands, useEditorState, useEditorView } from '@remirror/react';
+import { FC, useEffect, useState } from 'react';
+import { ProsemirrorNode } from 'remirror';
+
+import TextAndHrefOverlay from './elements/TextAndHrefOverlay';
+import formatUrl from 'utils/formatUrl';
+
+const ButtonExtensionUI: FC = () => {
+  const state = useEditorState();
+  const view = useEditorView();
+  const { setButtonHref, setButtonText } = useCommands();
+
+  const [visible, setVisible] = useState(false);
+  const [text, setText] = useState('');
+  const [href, setHref] = useState('');
+
+  const selectionCoords = view.coordsAtPos(state.selection.$from.pos);
+  const editorRect = view.dom.getBoundingClientRect();
+
+  const left = selectionCoords.left - editorRect.left;
+  const top = selectionCoords.top - editorRect.top;
+
+  useEffect(() => {
+    const blockNodes: ProsemirrorNode[] = [];
+    state.doc.nodesBetween(state.selection.from, state.selection.to, (node) => {
+      if (!node.isText) {
+        blockNodes.push(node);
+      }
+    });
+
+    if (blockNodes.length == 1 && blockNodes[0].type.name == 'zbutton') {
+      const buttonNode = blockNodes[0];
+      setText(buttonNode.textContent || '');
+      setHref(buttonNode.attrs.href || '');
+      setVisible(true);
+    } else {
+      setVisible(false);
+    }
+  }, [state.selection]);
+
+  return (
+    <TextAndHrefOverlay
+      href={href}
+      onCancel={() => {
+        setVisible(false);
+      }}
+      onChangeHref={(href) => setHref(href)}
+      onChangeText={(text) => setText(text)}
+      onSubmit={() => {
+        const formattedHref = formatUrl(href);
+        if (formattedHref) {
+          setButtonText(state.selection.$head.pos, text);
+          setButtonHref(state.selection.$head.pos, formattedHref);
+        }
+      }}
+      open={visible}
+      text={text}
+      x={left}
+      y={top + 30}
+    />
+  );
+};
+
+export default ButtonExtensionUI;
diff --git a/src/zui/ZUIEditor/EditorOverlays/BlockInsert.tsx b/src/zui/ZUIEditor/EditorOverlays/BlockInsert.tsx
@@ -0,0 +1,64 @@
+import { Add } from '@mui/icons-material';
+import { IconButton, Paper } from '@mui/material';
+import { Box } from '@mui/system';
+import { useCommands } from '@remirror/react';
+import { FC } from 'react';
+
+import { BlockDividerData } from './index';
+
+type BlockInsertProps = {
+  blockDividers: BlockDividerData[];
+  mouseY: number;
+};
+
+const BlockInsert: FC<BlockInsertProps> = ({ blockDividers, mouseY }) => {
+  const { insertParagraph, focus } = useCommands();
+
+  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/EditorOverlays/BlockMenu.tsx b/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;
diff --git a/src/zui/ZUIEditor/EditorOverlays/BlockToolbar.tsx b/src/zui/ZUIEditor/EditorOverlays/BlockToolbar.tsx
@@ -0,0 +1,132 @@
+import { Box, Button, Paper } from '@mui/material';
+import { useActive, useCommands, useEditorState } from '@remirror/react';
+import { FC, useEffect, useState } from 'react';
+
+import { NodeWithPosition } from '../LinkExtensionUI';
+import VariableToolButton from './VariableToolButton';
+import { VariableName } from '../extensions/VariableExtension';
+
+type BlockToolbarProps = {
+  curBlockType: string;
+  curBlockY: number;
+  enableVariable: boolean;
+  pos: number;
+};
+
+const BlockToolbar: FC<BlockToolbarProps> = ({
+  curBlockType,
+  curBlockY,
+  enableVariable,
+  pos,
+}) => {
+  const active = useActive();
+  const state = useEditorState();
+  const {
+    convertParagraph,
+    focus,
+    insertEmptyLink,
+    insertVariable,
+    toggleHeading,
+    pickImage,
+    removeLink,
+    removeAllLinksInRange,
+    setLink,
+  } = useCommands();
+
+  const [selectedNodes, setSelectedNodes] = useState<NodeWithPosition[]>([]);
+
+  useEffect(() => {
+    const linkNodes: NodeWithPosition[] = [];
+    state.doc.nodesBetween(
+      state.selection.from,
+      state.selection.to,
+      (node, index) => {
+        if (node.isText) {
+          if (node.marks.some((mark) => mark.type.name == 'zlink')) {
+            linkNodes.push({ from: index, node, to: index + node.nodeSize });
+          }
+        }
+      }
+    );
+    setSelectedNodes(linkNodes);
+  }, [state.selection]);
+
+  return (
+    <Box position="relative">
+      <Box
+        sx={{
+          left: 0,
+          position: 'absolute',
+          top: curBlockY - 50,
+          transition: 'opacity 0.5s',
+          zIndex: 10000,
+        }}
+      >
+        <Paper elevation={1}>
+          <Box alignItems="center" display="flex" padding={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>
+                <Button
+                  onClick={() => {
+                    if (!active.zlink()) {
+                      if (state.selection.empty) {
+                        insertEmptyLink();
+                        focus();
+                      } else {
+                        setLink();
+                        focus();
+                      }
+                    } else {
+                      if (selectedNodes.length == 1) {
+                        removeLink({
+                          from: selectedNodes[0].from,
+                          to: selectedNodes[0].to,
+                        });
+                      } else if (selectedNodes.length > 1) {
+                        removeAllLinksInRange({
+                          from: state.selection.from,
+                          to: state.selection.to,
+                        });
+                      }
+                    }
+                  }}
+                >
+                  Link
+                </Button>
+              </>
+            )}
+            {enableVariable &&
+              (curBlockType == 'paragraph' || curBlockType == 'heading') && (
+                <VariableToolButton
+                  onSelect={(varName: VariableName) => {
+                    insertVariable(varName);
+                    focus();
+                  }}
+                />
+              )}
+          </Box>
+        </Paper>
+      </Box>
+    </Box>
+  );
+};
+
+export default BlockToolbar;