ZUIEditor link and button extensions

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;

src/zui/ZUIEditor/EditorOverlays/BlockToolbar.tsx

@@ -1,6 +1,8 @@
 import { Box, Button, Paper } from '@mui/material';
-import { useCommands } from '@remirror/react';
-import { FC } from 'react';
+import { useActive, useCommands, useEditorState } from '@remirror/react';
+import { FC, useEffect, useState } from 'react';
+
+import { NodeWithPosition } from '../LinkExtensionUI';
 
 type BlockToolbarProps = {
   curBlockType: string;
@@ -13,7 +15,36 @@ const BlockToolbar: FC<BlockToolbarProps> = ({
   curBlockY,
   pos,
 }) => {
-  const { convertParagraph, toggleHeading, pickImage } = useCommands();
+  const active = useActive();
+  const state = useEditorState();
+  const {
+    convertParagraph,
+    focus,
+    insertEmptyLink,
+    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">
@@ -26,25 +57,58 @@ const BlockToolbar: FC<BlockToolbarProps> = ({
           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 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>
+              </>
+            )}
+          </Box>
         </Paper>
       </Box>
     </Box>

src/zui/ZUIEditor/LinkExtensionUI.tsx

@@ -0,0 +1,109 @@
+import { useCommands, useEditorState, useEditorView } from '@remirror/react';
+import { FC, useEffect, useState } from 'react';
+import { ProsemirrorNode } from 'remirror';
+
+import formatUrl from 'utils/formatUrl';
+import TextAndHrefOverlay from './elements/TextAndHrefOverlay';
+
+export type NodeWithPosition = {
+  from: number;
+  node: ProsemirrorNode;
+  to: number;
+};
+
+const LinkExtensionUI: FC = () => {
+  const state = useEditorState();
+  const view = useEditorView();
+  const { removeLink, removeUnfinishedLinks, updateLink, updateLinkText } =
+    useCommands();
+
+  const [selectedNodes, setSelectedNodes] = useState<NodeWithPosition[]>([]);
+  const [selectionHasOtherNodes, setSelectionHasOtherNodes] = useState(false);
+  const [linkText, setLinkText] = useState('');
+  const [linkHref, setLinkHref] = 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;
+
+  const showLinkMaker = selectedNodes.length == 1 && !selectionHasOtherNodes;
+
+  useEffect(() => {
+    if (!showLinkMaker) {
+      removeUnfinishedLinks();
+    }
+  }, [showLinkMaker]);
+
+  useEffect(() => {
+    const selectedNode = selectedNodes[0]?.node;
+    if (selectedNode) {
+      const currentText = selectedNode.text;
+
+      const textWithoutPlaceholder = currentText?.replaceAll(
+        String.fromCharCode(160),
+        ''
+      );
+
+      setLinkText(textWithoutPlaceholder || '');
+      const mark = selectedNode.marks.find((mark) => mark.type.name == 'zlink');
+      setLinkHref(mark?.attrs.href || '');
+    }
+  }, [selectedNodes[0]]);
+
+  useEffect(() => {
+    const linkNodes: NodeWithPosition[] = [];
+    let hasOtherNodes = false;
+    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 });
+          } else {
+            hasOtherNodes = true;
+          }
+        }
+      }
+    );
+    setSelectedNodes(linkNodes);
+    setSelectionHasOtherNodes(hasOtherNodes);
+  }, [state.selection]);
+
+  const formattedHref = formatUrl(linkHref);
+
+  return (
+    <TextAndHrefOverlay
+      href={linkHref}
+      onCancel={() => {
+        setSelectedNodes([]);
+      }}
+      onChangeHref={(href) => setLinkHref(href)}
+      onChangeText={(text) => setLinkText(text)}
+      onRemove={() => {
+        removeLink({
+          from: selectedNodes[0].from,
+          to: selectedNodes[0].to,
+        });
+      }}
+      onSubmit={() => {
+        updateLink({ href: formattedHref || '' });
+        updateLinkText(
+          {
+            from: selectedNodes[0].from,
+            to: selectedNodes[0].to,
+          },
+          linkText
+        );
+      }}
+      open={showLinkMaker}
+      text={linkText}
+      x={left}
+      y={top + 20}
+    />
+  );
+};
+
+export default LinkExtensionUI;