@blocknote/core 0.1.0-alpha.3 → 0.1.1

package/src/extensions/BubbleMenu/component/LinkToolbarButton.tsx

@@ -2,12 +2,12 @@ import Tippy from "@tippyjs/react";
 import { Editor } from "@tiptap/core";
 import { useCallback, useState } from "react";
 import {
-  SimpleToolbarButton,
-  SimpleToolbarButtonProps,
-} from "../../../shared/components/toolbar/SimpleToolbarButton";
-import { HyperlinkEditMenu } from "../../Hyperlinks/menus/HyperlinkEditMenu";
+  ToolbarButton,
+  ToolbarButtonProps,
+} from "../../../shared/components/toolbar/ToolbarButton";
+import { EditHyperlinkMenu } from "../../Hyperlinks/menus/EditHyperlinkMenu";
 
-type Props = SimpleToolbarButtonProps & {
+type Props = ToolbarButtonProps & {
   editor: Editor;
 };
 
@@ -41,11 +41,11 @@ export const LinkToolbarButton = (props: Props) => {
       : "";
 
     setCreationMenu(
-      <HyperlinkEditMenu
+      <EditHyperlinkMenu
         key={Math.random() + ""} // Math.random to prevent old element from being re-used
         url={activeUrl}
         text={selectedText}
-        onSubmit={onSubmit}
+        update={onSubmit}
       />
     );
   }, [props.editor]);
@@ -59,7 +59,7 @@ export const LinkToolbarButton = (props: Props) => {
       }}
       interactive={true}
       maxWidth={500}>
-      <SimpleToolbarButton {...props} />
+      <ToolbarButton {...props} />
     </Tippy>
   );
 };

package/src/extensions/DraggableBlocks/DraggableBlocksPlugin.tsx

@@ -1,13 +1,19 @@
-import { NodeSelection, Plugin, PluginKey } from "prosemirror-state";
+import { NodeSelection, Plugin, PluginKey, Selection } from "prosemirror-state";
+import { Node } from "prosemirror-model";
 import * as pv from "prosemirror-view";
 import { EditorView } from "prosemirror-view";
 import ReactDOM from "react-dom";
 import { DragHandle } from "./components/DragHandle";
+import { MantineProvider } from "@mantine/core";
+import { BlockNoteTheme } from "../../BlockNoteTheme";
+import { MultipleNodeSelection } from "../Blocks/MultipleNodeSelection";
 
 const serializeForClipboard = (pv as any).__serializeForClipboard;
 // code based on https://github.com/ueberdosis/tiptap/issues/323#issuecomment-506637799
 
 let horizontalAnchor: number;
+let dragImageElement: Element | undefined;
+
 function getHorizontalAnchor() {
   if (!horizontalAnchor) {
     const firstBlockGroup = document.querySelector(
@@ -38,24 +44,6 @@ export function absoluteRect(element: HTMLElement) {
   return createRect(element.getBoundingClientRect());
 }
 
-function blockPosAtCoords(
-  coords: { left: number; top: number },
-  view: EditorView
-) {
-  let block = getDraggableBlockFromCoords(coords, view);
-
-  if (block && block.node.nodeType === 1) {
-    // TODO: this uses undocumented PM APIs? do we need this / let's add docs?
-    const docView = (view as any).docView;
-    let desc = docView.nearestDesc(block.node, true);
-    if (!desc || desc === docView) {
-      return null;
-    }
-    return desc.posBefore;
-  }
-  return null;
-}
-
 function getDraggableBlockFromCoords(
   coords: { left: number; top: number },
   view: EditorView
@@ -85,6 +73,107 @@ function getDraggableBlockFromCoords(
   return { node, id: node.getAttribute("data-id")! };
 }
 
+function blockPositionFromCoords(
+  coords: { left: number; top: number },
+  view: EditorView
+) {
+  let block = getDraggableBlockFromCoords(coords, view);
+
+  if (block && block.node.nodeType === 1) {
+    // TODO: this uses undocumented PM APIs? do we need this / let's add docs?
+    const docView = (view as any).docView;
+    let desc = docView.nearestDesc(block.node, true);
+    if (!desc || desc === docView) {
+      return null;
+    }
+    return desc.posBefore;
+  }
+  return null;
+}
+
+function blockPositionsFromSelection(
+  selection: Selection,
+  doc: Node
+) {
+  // Absolute positions just before the first block spanned by the selection, and just after the last block. Having the
+  // selection start and end just before and just after the target blocks ensures no whitespace/line breaks are left
+  // behind after dragging & dropping them.
+  let beforeFirstBlockPos: number;
+  let afterLastBlockPos: number;
+
+  // Even the user starts dragging blocks but drops them in the same place, the selection will still be moved just
+  // before & just after the blocks spanned by the selection, and therefore doesn't need to change if they try to drag
+  // the same blocks again. If this happens, the anchor & head move out of the block content node they were originally
+  // in. If the anchor should update but the head shouldn't and vice versa, it means the user selection is outside a
+  // block content node, which should never happen.
+  const selectionStartInBlockContent =
+    doc.resolve(selection.from).node().type.name === "content";
+  const selectionEndInBlockContent =
+    doc.resolve(selection.to).node().type.name === "content";
+
+  // Ensures that entire outermost nodes are selected if the selection spans multiple nesting levels.
+  const minDepth = Math.min(selection.$anchor.depth, selection.$head.depth);
+
+  if (selectionStartInBlockContent && selectionEndInBlockContent) {
+    // Absolute positions at the start of the first block in the selection and at the end of the last block. User
+    // selections will always start and end in block content nodes, but we want the start and end positions of their
+    // parent block nodes, which is why minDepth - 1 is used.
+    const startFirstBlockPos = selection.$from.start(minDepth - 1);
+    const endLastBlockPos = selection.$to.end(minDepth - 1);
+
+    // Shifting start and end positions by one moves them just outside the first and last selected blocks.
+    beforeFirstBlockPos = doc.resolve(startFirstBlockPos - 1).pos;
+    afterLastBlockPos = doc.resolve(endLastBlockPos + 1).pos;
+  } else {
+    beforeFirstBlockPos = selection.from;
+    afterLastBlockPos = selection.to;
+  }
+
+  return { from: beforeFirstBlockPos, to: afterLastBlockPos };
+}
+
+function setDragImage(view: EditorView, from: number, to = from) {
+  if (from === to) {
+    // Moves to position to be just after the first (and only) selected block.
+    to += view.state.doc.resolve(from + 1).node().nodeSize;
+  }
+
+  // Parent element is cloned to remove all unselected children without affecting the editor content.
+  const parentClone = view.domAtPos(from).node.cloneNode(true) as Element;
+  const parent = view.domAtPos(from).node as Element;
+
+  const getElementIndex = (parentElement: Element, targetElement: Element) =>
+    Array.prototype.indexOf.call(parentElement.children, targetElement);
+
+  const firstSelectedBlockIndex = getElementIndex(
+    parent,
+    // Expects from position to be just before the first selected block.
+    view.domAtPos(from + 1).node.parentElement!
+  );
+  const lastSelectedBlockIndex = getElementIndex(
+    parent,
+    // Expects to position to be just after the last selected block.
+    view.domAtPos(to - 1).node.parentElement!
+  );
+
+  for (let i = parent.childElementCount - 1; i >= 0; i--) {
+    if (i > lastSelectedBlockIndex || i < firstSelectedBlockIndex) {
+      parentClone.removeChild(parentClone.children[i]);
+    }
+  }
+
+  // dataTransfer.setDragImage(element) only works if element is attached to the DOM.
+  dragImageElement = parentClone;
+  document.body.appendChild(dragImageElement);
+}
+
+function unsetDragImage() {
+  if (dragImageElement !== undefined) {
+    document.body.removeChild(dragImageElement);
+    dragImageElement = undefined;
+  }
+}
+
 function dragStart(e: DragEvent, view: EditorView) {
   if (!e.dataTransfer) {
     return;
@@ -94,11 +183,30 @@ function dragStart(e: DragEvent, view: EditorView) {
     left: view.dom.clientWidth / 2, // take middle of editor
     top: e.clientY,
   };
-  let pos = blockPosAtCoords(coords, view);
+
+  let pos = blockPositionFromCoords(coords, view);
   if (pos != null) {
-    view.dispatch(
-      view.state.tr.setSelection(NodeSelection.create(view.state.doc, pos))
-    );
+    const selection = view.state.selection;
+    const doc = view.state.doc;
+
+    const { from, to } = blockPositionsFromSelection(selection, doc);
+
+    const draggedBlockInSelection = from <= pos && pos < to;
+    const multipleBlocksSelected = !selection.$anchor
+      .node()
+      .eq(selection.$head.node());
+
+    if (draggedBlockInSelection && multipleBlocksSelected) {
+      view.dispatch(
+        view.state.tr.setSelection(MultipleNodeSelection.create(doc, from, to))
+      );
+      setDragImage(view, from, to);
+    } else {
+      view.dispatch(
+        view.state.tr.setSelection(NodeSelection.create(view.state.doc, pos))
+      );
+      setDragImage(view, pos);
+    }
 
     let slice = view.state.selection.content();
     let { dom, text } = serializeForClipboard(view, slice);
@@ -107,8 +215,7 @@ function dragStart(e: DragEvent, view: EditorView) {
     e.dataTransfer.setData("text/html", dom.innerHTML);
     e.dataTransfer.setData("text/plain", text);
     e.dataTransfer.effectAllowed = "move";
-    const block = getDraggableBlockFromCoords(coords, view);
-    e.dataTransfer.setDragImage(block?.node as any, 0, 0);
+    e.dataTransfer.setDragImage(dragImageElement!, 0, 0);
     view.dragging = { slice, move: true };
   }
 }
@@ -147,6 +254,7 @@ export const createDraggableBlocksPlugin = () => {
       dropElement.addEventListener("dragstart", (e) =>
         dragStart(e, editorView)
       );
+      dropElement.addEventListener("dragend", () => unsetDragImage());
 
       return {
         // update(view, prevState) {},
@@ -248,14 +356,16 @@ export const createDraggableBlocksPlugin = () => {
           dropElement.style.top = rect.top + "px";
 
           ReactDOM.render(
-            <DragHandle
-              onShow={onShow}
-              onHide={onHide}
-              onAddClicked={onAddClicked}
-              key={block.id + ""}
-              view={view}
-              coords={coords}
-            />,
+            <MantineProvider theme={BlockNoteTheme}>
+              <DragHandle
+                onShow={onShow}
+                onHide={onHide}
+                onAddClicked={onAddClicked}
+                key={block.id + ""}
+                view={view}
+                coords={coords}
+              />
+            </MantineProvider>,
             dropElement
           );
           return true;

package/src/extensions/DraggableBlocks/components/DragHandle.tsx

@@ -1,11 +1,12 @@
-import Tippy from "@tippyjs/react";
 import { TextSelection } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 import { useState } from "react";
 import { AiOutlinePlus } from "react-icons/ai";
 import { findBlock } from "../../Blocks/helpers/findBlock";
 import { SlashMenuPluginKey } from "../../SlashMenu/SlashMenuExtension";
-import styles from "./DragHandle.module.css";
+import { Menu } from "@mantine/core";
+import { MdDragIndicator } from "react-icons/all";
+import { ActionIcon } from "@mantine/core";
 import DragHandleMenu from "./DragHandleMenu";
 
 export const DragHandle = (props: {
@@ -59,8 +60,7 @@ export const DragHandle = (props: {
     if (currentBlock.node.firstChild?.textContent.length !== 0) {
       // Create new block after current block
       const endOfBlock = currentBlock.pos + currentBlock.node.nodeSize;
-      let newBlock =
-        props.view.state.schema.nodes["tccontent"].createAndFill()!;
+      let newBlock = props.view.state.schema.nodes["content"].createAndFill()!;
       props.view.state.tr.insert(endOfBlock, newBlock);
       props.view.dispatch(props.view.state.tr.insert(endOfBlock, newBlock));
       props.view.dispatch(
@@ -86,23 +86,17 @@ export const DragHandle = (props: {
 
   return (
     <div style={{ display: "flex", flexDirection: "row" }}>
-      <AiOutlinePlus
-        size={24}
-        fillOpacity={"0.25"}
-        className={styles.dragHandleAdd}
-        onClick={onAddClick}
-      />
-      <Tippy
-        content={<DragHandleMenu onDelete={onDelete} />}
-        placement={"left"}
-        trigger={"click"}
-        duration={0}
-        interactiveBorder={100}
-        interactive={true}
-        onShow={props.onShow}
-        onHide={props.onHide}>
-        <div className={styles.dragHandle} />
-      </Tippy>
+      <ActionIcon size={24} color={"brandFinal.3"} data-test={"dragHandleAdd"}>
+        {<AiOutlinePlus size={24} onClick={onAddClick} />}
+      </ActionIcon>
+      <Menu onOpen={props.onShow} onClose={props.onHide} position={"left"}>
+        <Menu.Target>
+          <ActionIcon size={24} color={"brandFinal.3"} data-test={"dragHandle"}>
+            {<MdDragIndicator size={24} />}
+          </ActionIcon>
+        </Menu.Target>
+        <DragHandleMenu onDelete={onDelete} />
+      </Menu>
     </div>
   );
 };

package/src/extensions/DraggableBlocks/components/DragHandleMenu.tsx

@@ -1,17 +1,18 @@
-import styles from "./DragHandleMenu.module.css";
-import { MenuGroup, ButtonItem } from "@atlaskit/menu";
+import { createStyles, Menu } from "@mantine/core";
 
 type Props = {
   onDelete: () => void;
 };
 
 const DragHandleMenu = (props: Props) => {
+  const { classes } = createStyles({ root: {} })(undefined, {
+    name: "DragHandleMenu",
+  });
+
   return (
-    <div className={styles.menuList}>
-      <MenuGroup>
-        <ButtonItem onClick={props.onDelete}>Delete</ButtonItem>
-      </MenuGroup>
-    </div>
+    <Menu.Dropdown className={classes.root}>
+      <Menu.Item onClick={props.onDelete}>Delete</Menu.Item>
+    </Menu.Dropdown>
   );
 };
 

package/src/extensions/Hyperlinks/HyperlinkMenuPlugin.tsx

@@ -1,43 +1,13 @@
+import { MantineProvider } from "@mantine/core";
 import Tippy from "@tippyjs/react";
 import { getMarkRange } from "@tiptap/core";
 import { Mark, ResolvedPos } from "prosemirror-model";
 import { Plugin, PluginKey } from "prosemirror-state";
 import ReactDOM from "react-dom";
-import rootStyles from "../../root.module.css";
-import { HyperlinkBasicMenu } from "./menus/HyperlinkBasicMenu";
-import {
-  HyperlinkEditMenu,
-  HyperlinkEditorMenuProps,
-} from "./menus/HyperlinkEditMenu";
+import { BlockNoteTheme } from "../../BlockNoteTheme";
+import { HyperlinkMenu } from "./menus/HyperlinkMenu";
 const PLUGIN_KEY = new PluginKey("HyperlinkMenuPlugin");
 
-/**
- * a helper function that wraps a Tippy around a HyperlinkEditMenu
- * @param props has {text, url, onSubmit and anchorPos}
- * @returns a Tippy instance whose content is a editMenu
- */
-const tippyWrapperHyperlinkEditMenu = (
-  props: HyperlinkEditorMenuProps & {
-    anchorPos: { left: number; top: number; width: number; height: number };
-  }
-) => {
-  const { anchorPos, ...editMenuProps } = props;
-  return (
-    <Tippy
-      getReferenceClientRect={() => anchorPos as any}
-      content={<HyperlinkEditMenu {...editMenuProps}></HyperlinkEditMenu>}
-      interactive={true}
-      interactiveBorder={30}
-      showOnCreate={true}
-      trigger={"click"} // so that we don't hide on mouse out
-      hideOnClick
-      className={rootStyles.bnRoot}
-      appendTo={document.body}>
-      <div></div>
-    </Tippy>
-  );
-};
-
 export const createHyperlinkMenuPlugin = () => {
   // as we always use Tippy appendTo(document.body), we can just create an element
   // that we use for ReactDOM, but it isn't used anywhere (except by React internally)
@@ -135,40 +105,35 @@ export const createHyperlinkMenuPlugin = () => {
             );
           };
 
-          // the hyperlinkEditMenu will be positioned at the same place as hyperlinkBasicMenu
-          // this is achieved by making this editMenu a property of the basicMenu below
-          // and returning this editMenu directly by introducing another isEditing state
-          const hyperlinkEditMenu = tippyWrapperHyperlinkEditMenu({
-            anchorPos,
-            text,
-            url,
-            onSubmit: editHandler,
-          });
-
-          const hyperlinkBasicMenu = (
-            <Tippy
-              key={nextTippyKey + ""} // it could be tippy has "hidden" itself after mouseout. We use a key to get a new instance with a clean state.
-              getReferenceClientRect={() => anchorPos as any}
-              content={
-                <HyperlinkBasicMenu
-                  editMenu={hyperlinkEditMenu}
-                  removeHandler={removeHandler}
-                  href={url}></HyperlinkBasicMenu>
-              }
-              onHide={() => {
-                nextTippyKey++;
-                menuState = "hidden";
-              }}
-              aria={{ expanded: false }}
-              interactive={true}
-              interactiveBorder={30}
-              triggerTarget={hoveredLink}
-              showOnCreate={basedOnCursorPos}
-              appendTo={document.body}>
-              <div></div>
-            </Tippy>
+          const hyperlinkMenu = (
+            <MantineProvider theme={BlockNoteTheme}>
+              <Tippy
+                key={nextTippyKey + ""} // it could be tippy has "hidden" itself after mouseout. We use a key to get a new instance with a clean state.
+                getReferenceClientRect={() => anchorPos as any}
+                content={
+                  <HyperlinkMenu
+                    update={editHandler}
+                    pos={anchorPos}
+                    remove={removeHandler}
+                    text={text}
+                    url={url}
+                  />
+                }
+                onHide={() => {
+                  nextTippyKey++;
+                  menuState = "hidden";
+                }}
+                aria={{ expanded: false }}
+                interactive={true}
+                interactiveBorder={30}
+                triggerTarget={hoveredLink}
+                showOnCreate={basedOnCursorPos}
+                appendTo={document.body}>
+                <div></div>
+              </Tippy>
+            </MantineProvider>
           );
-          ReactDOM.render(hyperlinkBasicMenu, fakeRenderTarget);
+          ReactDOM.render(hyperlinkMenu, fakeRenderTarget);
           menuState = basedOnCursorPos ? "cursor-based" : "mouse-based";
         },
       };

package/src/extensions/Hyperlinks/menus/EditHyperlinkMenu.tsx

@@ -0,0 +1,44 @@
+import { createStyles, Stack } from "@mantine/core";
+import { useState } from "react";
+import { RiLink, RiText } from "react-icons/ri";
+import { EditHyperlinkMenuItem } from "./EditHyperlinkMenuItem";
+
+export type EditHyperlinkMenuProps = {
+  url: string;
+  text: string;
+  update: (url: string, text: string) => void;
+};
+
+/**
+ * Menu which opens when editing an existing hyperlink or creating a new one.
+ * Provides input fields for setting the hyperlink URL and title.
+ */
+export const EditHyperlinkMenu = (props: EditHyperlinkMenuProps) => {
+  const [url, setUrl] = useState(props.url);
+  const [title, setTitle] = useState(props.text);
+  const { classes } = createStyles({ root: {} })(undefined, {
+    name: "EditHyperlinkMenu",
+  });
+
+  return (
+    <Stack className={classes.root}>
+      <EditHyperlinkMenuItem
+        icon={RiLink}
+        mainIconTooltip={"Edit URL"}
+        autofocus={true}
+        placeholder={"Edit URL"}
+        value={url}
+        onChange={(value) => setUrl(value)}
+        onSubmit={() => props.update(url, title)}
+      />
+      <EditHyperlinkMenuItem
+        icon={RiText}
+        mainIconTooltip={"Edit Title"}
+        placeholder={"Edit Title"}
+        value={title}
+        onChange={(value) => setTitle(value)}
+        onSubmit={() => props.update(url, title)}
+      />
+    </Stack>
+  );
+};

package/src/extensions/Hyperlinks/menus/EditHyperlinkMenuItem.tsx

@@ -0,0 +1,34 @@
+import { IconType } from "react-icons";
+import { EditHyperlinkMenuItemIcon } from "./EditHyperlinkMenuItemIcon";
+import { EditHyperlinkMenuItemInput } from "./EditHyperlinkMenuItemInput";
+import { Group } from "@mantine/core";
+
+export type EditHyperlinkMenuItemProps = {
+  icon: IconType;
+  mainIconTooltip: string;
+  secondaryIconTooltip?: string;
+  autofocus?: boolean;
+  placeholder?: string;
+  value?: string;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+};
+
+export function EditHyperlinkMenuItem(props: EditHyperlinkMenuItemProps) {
+  return (
+    <Group>
+      <EditHyperlinkMenuItemIcon
+        icon={props.icon}
+        mainTooltip={props.mainIconTooltip}
+        secondaryTooltip={props.secondaryIconTooltip}
+      />
+      <EditHyperlinkMenuItemInput
+        autofocus={props.autofocus}
+        placeholder={props.placeholder}
+        value={props.value}
+        onChange={props.onChange}
+        onSubmit={props.onSubmit}
+      />
+    </Group>
+  );
+}

package/src/extensions/Hyperlinks/menus/EditHyperlinkMenuItemIcon.tsx

@@ -0,0 +1,31 @@
+import { IconType } from "react-icons";
+import Tippy from "@tippyjs/react";
+import { TooltipContent } from "../../../shared/components/tooltip/TooltipContent";
+import { Container } from "@mantine/core";
+
+export type EditHyperlinkMenuItemIconProps = {
+  icon: IconType;
+  mainTooltip: string;
+  secondaryTooltip?: string;
+};
+
+export function EditHyperlinkMenuItemIcon(
+  props: EditHyperlinkMenuItemIconProps
+) {
+  const Icon = props.icon;
+
+  return (
+    <Tippy
+      content={
+        <TooltipContent
+          mainTooltip={props.mainTooltip}
+          secondaryTooltip={props.secondaryTooltip}
+        />
+      }
+      placement="left">
+      <Container>
+        <Icon size={16}></Icon>
+      </Container>
+    </Tippy>
+  );
+}

package/src/extensions/Hyperlinks/menus/EditHyperlinkMenuItemInput.tsx

@@ -0,0 +1,40 @@
+import { KeyboardEvent, useEffect, useRef } from "react";
+import { TextInput } from "@mantine/core";
+
+export type EditHyperlinkMenuItemInputProps = {
+  autofocus?: boolean;
+  placeholder?: string;
+  value?: string;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+};
+
+export function EditHyperlinkMenuItemInput(
+  props: EditHyperlinkMenuItemInputProps
+) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    setTimeout(() => {
+      props.autofocus && inputRef.current?.focus();
+    });
+  }, [props.autofocus]);
+
+  function handleEnter(event: KeyboardEvent) {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      props.onSubmit();
+    }
+  }
+
+  return (
+    <TextInput
+      size={"xs"}
+      value={props.value}
+      onChange={(event) => props.onChange(event.currentTarget.value)}
+      onKeyDown={handleEnter}
+      placeholder={props.placeholder}
+      ref={inputRef}
+    />
+  );
+}

package/src/extensions/Hyperlinks/menus/HoverHyperlinkMenu.tsx

@@ -0,0 +1,37 @@
+import { RiExternalLinkFill, RiLinkUnlink } from "react-icons/ri";
+import { Toolbar } from "../../../shared/components/toolbar/Toolbar";
+import { ToolbarButton } from "../../../shared/components/toolbar/ToolbarButton";
+
+type HoverHyperlinkMenuProps = {
+  url: string;
+  edit: () => void;
+  remove: () => void;
+};
+
+/**
+ * Menu which opens when hovering an existing hyperlink.
+ * Provides buttons for editing, opening, and removing the hyperlink.
+ */
+export const HoverHyperlinkMenu = (props: HoverHyperlinkMenuProps) => {
+  return (
+    <Toolbar>
+      <ToolbarButton mainTooltip="Edit" isSelected={false} onClick={props.edit}>
+        Edit Link
+      </ToolbarButton>
+      <ToolbarButton
+        mainTooltip="Open in new tab"
+        isSelected={false}
+        onClick={() => {
+          window.open(props.url, "_blank");
+        }}
+        icon={RiExternalLinkFill}
+      />
+      <ToolbarButton
+        mainTooltip="Remove link"
+        isSelected={false}
+        onClick={props.remove}
+        icon={RiLinkUnlink}
+      />
+    </Toolbar>
+  );
+};