@blocknote/core 0.1.0 → 0.1.1

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: {
@@ -85,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>
+  );
+};

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

@@ -0,0 +1,63 @@
+import { useState } from "react";
+import Tippy from "@tippyjs/react";
+import { EditHyperlinkMenu } from "./EditHyperlinkMenu";
+import { HoverHyperlinkMenu } from "./HoverHyperlinkMenu";
+import rootStyles from "../../../root.module.css";
+
+type HyperlinkMenuProps = {
+  url: string;
+  text: string;
+  pos: {
+    height: number;
+    width: number;
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+  };
+  update: (url: string, text: string) => void;
+  remove: () => void;
+};
+
+/**
+ * Main menu component for the hyperlink extension.
+ * Either renders a menu to create/edit a hyperlink, or a menu to interact with it on mouse hover.
+ */
+export const HyperlinkMenu = (props: HyperlinkMenuProps) => {
+  const [isEditing, setIsEditing] = useState(false);
+
+  const editHyperlinkMenu = (
+    <Tippy
+      getReferenceClientRect={() => props.pos as any}
+      content={
+        <EditHyperlinkMenu
+          url={props.url}
+          text={props.text}
+          update={props.update}
+        />
+      }
+      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>
+  );
+
+  const hoverHyperlinkMenu = (
+    <HoverHyperlinkMenu
+      url={props.url}
+      edit={() => setIsEditing(true)}
+      remove={props.remove}
+    />
+  );
+
+  if (isEditing) {
+    return editHyperlinkMenu;
+  } else {
+    return hoverHyperlinkMenu;
+  }
+};

package/src/extensions/SlashMenu/SlashMenuItem.ts

@@ -1,5 +1,6 @@
 import { Editor, Range } from "@tiptap/core";
 import SuggestionItem from "../../shared/plugins/suggestion/SuggestionItem";
+import { IconType } from "react-icons";
 
 export type SlashMenuCallback = (editor: Editor, range: Range) => boolean;
 
@@ -31,6 +32,7 @@ export class SlashMenuItem implements SuggestionItem {
    * @param execute The callback for creating a new node
    * @param aliases Aliases for this command
    * @param icon To be shown next to the name in the menu
+   * @param hint Short description of command
    * @param shortcut Info about keyboard shortcut that would activate this command
    */
   constructor(
@@ -38,7 +40,7 @@ export class SlashMenuItem implements SuggestionItem {
     public readonly group: SlashMenuGroups,
     public readonly execute: SlashMenuCallback,
     public readonly aliases: string[] = [],
-    public readonly icon?: React.ComponentType<{ className: string }>,
+    public readonly icon?: IconType,
     public readonly hint?: string,
     public readonly shortcut?: string
   ) {

package/src/extensions/SlashMenu/defaultCommands.tsx

@@ -6,7 +6,7 @@ import {
   RiListUnordered,
   RiText,
 } from "react-icons/ri";
-import formatKeyboardShortcut from "../helpers/formatKeyboardShortcut";
+import { formatKeyboardShortcut } from "../../utils";
 import { SlashMenuGroups, SlashMenuItem } from "./SlashMenuItem";
 
 /**
@@ -22,7 +22,7 @@ const defaultCommands: { [key: string]: SlashMenuItem } = {
         .chain()
         .focus()
         .deleteRange(range)
-        .addNewBlockAsSibling({ headingType: 1 })
+        .addNewBlockAsSibling({ headingType: "1" })
         .run();
     },
     ["h", "heading1", "h1"],
@@ -40,7 +40,7 @@ const defaultCommands: { [key: string]: SlashMenuItem } = {
         .chain()
         .focus()
         .deleteRange(range)
-        .addNewBlockAsSibling({ headingType: 2 })
+        .addNewBlockAsSibling({ headingType: "2" })
         .run();
     },
     ["h2", "heading2", "subheading"],
@@ -58,7 +58,7 @@ const defaultCommands: { [key: string]: SlashMenuItem } = {
         .chain()
         .focus()
         .deleteRange(range)
-        .addNewBlockAsSibling({ headingType: 3 })
+        .addNewBlockAsSibling({ headingType: "3" })
         .run();
     },
     ["h3", "heading3", "subheading"],

package/src/shared/components/toolbar/Toolbar.tsx

@@ -1,5 +1,10 @@
-import styles from "./Toolbar.module.css";
+import { createStyles, Group } from "@mantine/core";
+import { ReactNode } from "react";
 
-export const Toolbar = (props: { children: any }) => {
-  return <div className={styles.toolbar}>{props.children}</div>;
+export const Toolbar = (props: { children: ReactNode }) => {
+  const { classes } = createStyles({ root: {} })(undefined, {
+    name: "Toolbar",
+  });
+
+  return <Group className={classes.root}>{props.children}</Group>;
 };

package/src/shared/components/toolbar/ToolbarButton.tsx

@@ -0,0 +1,57 @@
+import { ActionIcon, Button } from "@mantine/core";
+import Tippy from "@tippyjs/react";
+import { forwardRef } from "react";
+import { TooltipContent } from "../tooltip/TooltipContent";
+import React from "react";
+import { IconType } from "react-icons";
+
+export type ToolbarButtonProps = {
+  onClick?: (e: React.MouseEvent) => void;
+  icon?: IconType;
+  mainTooltip: string;
+  secondaryTooltip?: string;
+  isSelected?: boolean;
+  children?: any;
+  isDisabled?: boolean;
+};
+
+/**
+ * Helper for basic buttons that show in the inline bubble menu.
+ */
+export const ToolbarButton = forwardRef((props: ToolbarButtonProps, ref) => {
+  const ButtonIcon = props.icon;
+  return (
+    <Tippy
+      content={
+        <TooltipContent
+          mainTooltip={props.mainTooltip}
+          secondaryTooltip={props.secondaryTooltip}
+        />
+      }
+      trigger={"mouseenter"}>
+      {/*Creates an ActionIcon instead of a Button if only an icon is provided as content.*/}
+      {props.children ? (
+        <Button
+          onClick={props.onClick}
+          color={"brandFinal"}
+          size={"xs"}
+          variant={props.isSelected ? "filled" : "subtle"}
+          disabled={props.isDisabled || false}
+          ref={ref as any}>
+          {ButtonIcon && <ButtonIcon />}
+          {props.children}
+        </Button>
+      ) : (
+        <ActionIcon
+          onClick={props.onClick}
+          color={"brandFinal"}
+          size={30}
+          variant={props.isSelected ? "filled" : "subtle"}
+          disabled={props.isDisabled || false}
+          ref={ref as any}>
+          {ButtonIcon && <ButtonIcon />}
+        </ActionIcon>
+      )}
+    </Tippy>
+  );
+});

package/src/shared/components/toolbar/ToolbarDropdown.tsx

@@ -0,0 +1,35 @@
+import { Menu } from "@mantine/core";
+import { IconType } from "react-icons";
+import { ToolbarDropdownTarget } from "./ToolbarDropdownTarget";
+import { MouseEvent } from "react";
+import { ToolbarDropdownItem } from "./ToolbarDropdownItem";
+
+export type ToolbarDropdownProps = {
+  text: string;
+  icon?: IconType;
+  items: Array<{
+    onClick?: (e: MouseEvent) => void;
+    text: string;
+    icon?: IconType;
+    isSelected?: boolean;
+    children?: any;
+    isDisabled?: boolean;
+  }>;
+  children?: any;
+  isDisabled?: boolean;
+};
+
+export function ToolbarDropdown(props: ToolbarDropdownProps) {
+  return (
+    <Menu exitTransitionDuration={0}>
+      <Menu.Target>
+        <ToolbarDropdownTarget {...props} />
+      </Menu.Target>
+      <Menu.Dropdown>
+        {props.items.map((item) => (
+          <ToolbarDropdownItem key={item.text} {...item} />
+        ))}
+      </Menu.Dropdown>
+    </Menu>
+  );
+}

package/src/shared/components/toolbar/ToolbarDropdownItem.tsx

@@ -0,0 +1,35 @@
+import { Menu } from "@mantine/core";
+import { IconType } from "react-icons";
+import { TiTick } from "react-icons/ti";
+import { MouseEvent } from "react";
+
+export type ToolbarDropdownItemProps = {
+  onClick?: (e: MouseEvent) => void;
+  text: string;
+  icon?: IconType;
+  isSelected?: boolean;
+  children?: any;
+  isDisabled?: boolean;
+};
+
+export function ToolbarDropdownItem(props: ToolbarDropdownItemProps) {
+  const ItemIcon = props.icon;
+
+  return (
+    <Menu.Item
+      key={props.text}
+      onClick={props.onClick}
+      icon={ItemIcon && <ItemIcon size={16} />}
+      rightSection={
+        props.isSelected ? (
+          <TiTick size={16} />
+        ) : (
+          // Ensures space for tick even if item isn't currently selected.
+          <div style={{ width: "16px", padding: "0" }} />
+        )
+      }
+      disabled={props.isDisabled}>
+      {props.text}
+    </Menu.Item>
+  );
+}