Merge pull request #2480 from zetkin/undocumented/zui-editor-overlays-fixes

Improvements to `ZUIEditor` overlays

Author: ziggabyte

src/zui/ZUIEditor/EditorOverlays/BlockInsert.tsx

@@ -12,14 +12,14 @@ type BlockInsertProps = {
 };
 
 const BlockInsert: FC<BlockInsertProps> = ({ blockDividers, mouseY }) => {
-  const { insertParagraph, focus } = useCommands();
+  const { insertEmptyParagraph, 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;
+        const offset = 8;
+
         return (
           <Box
             key={index}
@@ -44,9 +44,8 @@ const BlockInsert: FC<BlockInsertProps> = ({ blockDividers, mouseY }) => {
             >
               <Paper>
                 <IconButton
-                  disabled={!insertParagraph.enabled(' ', { selection: pos })}
                   onClick={() => {
-                    insertParagraph(' ', { selection: pos });
+                    insertEmptyParagraph(pos);
                     focus(pos);
                   }}
                 >

src/zui/ZUIEditor/EditorOverlays/index.tsx

@@ -5,6 +5,7 @@ import {
   usePositioner,
 } from '@remirror/react';
 import { FC, useCallback, useEffect, useState } from 'react';
+import { ProsemirrorNode } from '@remirror/pm/suggest';
 import { Box } from '@mui/material';
 
 import BlockToolbar from './BlockToolbar';
@@ -18,6 +19,7 @@ export type BlockDividerData = {
 };
 
 type BlockData = {
+  node: ProsemirrorNode;
   rect: DOMRect;
   type: string;
 };
@@ -63,6 +65,7 @@ const EditorOverlays: FC<Props> = ({
         const x = nodeRect.x - editorRect.x;
         const y = nodeRect.y - editorRect.y;
         setCurrentBlock({
+          node,
           rect: {
             ...nodeRect.toJSON(),
             left: x,
@@ -114,22 +117,35 @@ const EditorOverlays: FC<Props> = ({
   const blockDividers: BlockDividerData[] = [
     {
       pos: 0,
-      y: 0,
+      y: 8,
     },
-    ...state.doc.children.map((blockNode) => {
-      pos += blockNode.nodeSize;
-      const rect = view.coordsAtPos(pos - 1);
+  ];
+
+  const containerRect = view.dom.getBoundingClientRect();
+  state.doc.children.forEach((blockNode) => {
+    const elem = view.nodeDOM(pos);
+
+    pos += blockNode.nodeSize;
+
+    if (elem instanceof HTMLElement) {
+      if (elem.nodeName == 'P' && elem.textContent?.trim().length == 0) {
+        return;
+      }
 
-      const containerRect = view.dom.getBoundingClientRect();
+      const rect = elem.getBoundingClientRect();
 
-      return {
-        pos: pos,
+      blockDividers.push({
+        pos,
         y: rect.bottom - containerRect.top,
-      };
-    }),
-  ];
+      });
+    }
+  });
+
+  const isEmptyParagraph =
+    currentBlock?.type == 'paragraph' && currentBlock?.node.textContent == '';
 
-  const showBlockToolbar = !showBlockMenu && !!currentBlock && !typing;
+  const showBlockToolbar =
+    !showBlockMenu && !!currentBlock && !typing && !isEmptyParagraph;
 
   const showBlockInsert = !showBlockMenu && !typing;
 
@@ -141,12 +157,15 @@ const EditorOverlays: FC<Props> = ({
         <Box position="relative">
           <Box
             border={1}
-            height={currentBlock?.rect.height}
-            left={currentBlock?.rect.left}
+            height={currentBlock?.rect.height + 16}
+            left={currentBlock?.rect.left - 8}
             position="absolute"
-            sx={{ pointerEvents: 'none' }}
-            top={currentBlock?.rect.top}
-            width={currentBlock?.rect.width}
+            sx={{
+              opacity: 0.5,
+              pointerEvents: 'none',
+            }}
+            top={currentBlock?.rect.top - 8}
+            width={currentBlock?.rect.width + 16}
           />
         </Box>
       )}

src/zui/ZUIEditor/EmptyBlockPlaceholder.tsx

@@ -1,27 +1,50 @@
-import { Box, Typography } from '@mui/material';
-import { usePositioner } from '@remirror/react';
+import { Box, Link, Typography } from '@mui/material';
+import { useCommands, usePositioner } from '@remirror/react';
 import { FC } from 'react';
 
-type Props = {
-  placeholder: string;
-};
+import { Msg } from 'core/i18n';
+import messageIds from 'zui/l10n/messageIds';
 
-const EmptyBlockPlaceholder: FC<Props> = ({ placeholder }) => {
+const EmptyBlockPlaceholder: FC = () => {
   const positioner = usePositioner('emptyBlockStart');
+  const { focus, insertText } = useCommands();
 
   return (
     <Box ref={positioner.ref} position="relative">
       {positioner.active && (
         <Typography
           sx={{
+            '&:hover': {
+              opacity: 1,
+            },
             left: positioner.x,
             opacity: 0.5,
-            pointerEvents: 'none',
             position: 'absolute',
             top: positioner.y,
+            transition: 'opacity 0.5s',
           }}
         >
-          {placeholder}
+          <Msg
+            id={messageIds.editor.placeholder.label}
+            values={{
+              link: (
+                <Link
+                  onClick={() => {
+                    const pos = positioner.data.pos;
+                    if (pos) {
+                      insertText('/', { from: positioner.data.pos });
+                      focus(pos + 2);
+                    }
+                  }}
+                  sx={{
+                    cursor: 'pointer',
+                  }}
+                >
+                  <Msg id={messageIds.editor.placeholder.link} />
+                </Link>
+              ),
+            }}
+          />
         </Typography>
       )}
     </Box>

src/zui/ZUIEditor/extensions/BlockMenuExtension.ts

@@ -6,6 +6,7 @@ import {
   Handler,
   PlainExtension,
 } from 'remirror';
+import { ParagraphExtension } from 'remirror/extensions';
 
 type BlockMenuOptions = {
   blockFactories: Record<string, CommandFunction>;
@@ -53,6 +54,17 @@ class BlockMenuExtension extends PlainExtension<BlockMenuOptions> {
     };
   }
 
+  /* eslint-disable @typescript-eslint/ban-ts-comment */
+  //@ts-ignore
+  @command()
+  insertEmptyParagraph(pos: number): CommandFunction {
+    return ({ dispatch, tr }) => {
+      const node = this.store.getExtension(ParagraphExtension).type.create();
+      dispatch?.(tr.insert(pos, node));
+      return true;
+    };
+  }
+
   get name(): string {
     return 'zblockmenu';
   }

src/zui/ZUIEditor/index.tsx

@@ -196,7 +196,7 @@ const ZUIEditor: FC<Props> = ({
             enableLink={!!enableLink}
             enableVariable={!!enableVariable}
           />
-          <EmptyBlockPlaceholder placeholder={messages.placeholder()} />
+          <EmptyBlockPlaceholder />
           {enableImage && <ImageExtensionUI orgId={orgId} />}
           <ButtonExtensionUI />
           <LinkExtensionUI />

src/zui/l10n/messageIds.ts

@@ -145,7 +145,12 @@ export default makeMessages('zui', {
         textPlaceholder: m('Add link text here'),
       },
     },
-    placeholder: m('Type / to insert block or just type some text'),
+    placeholder: {
+      label: m<{ link: ReactElement }>(
+        'Type / or {link} to insert block, or just type some text'
+      ),
+      link: m('click here'),
+    },
     variables: {
       firstName: m('First Name'),
       fullName: m('Full Name'),