@blocknote/core 0.1.0-alpha.3 → 0.1.1

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/extensions/TrailingNode/TrailingNodeExtension.ts

@@ -13,6 +13,9 @@ export interface TrailingNodeOptions {
   node: string;
 }
 
+/**
+ * Add a trailing node to the document so the user can always click at the bottom of the document and start typing
+ */
 export const TrailingNode = Extension.create<TrailingNodeOptions>({
   name: "trailingNode",
 
@@ -29,8 +32,8 @@ export const TrailingNode = Extension.create<TrailingNodeOptions>({
           const { doc, tr, schema } = state;
           const shouldInsertNodeAtEnd = plugin.getState(state);
           const endPosition = doc.content.size - 2;
-          const type = schema.nodes["tcblock"];
-          const contenttype = schema.nodes["tccontent"];
+          const type = schema.nodes["block"];
+          const contenttype = schema.nodes["content"];
           if (!shouldInsertNodeAtEnd) {
             return;
           }
@@ -58,10 +61,10 @@ export const TrailingNode = Extension.create<TrailingNodeOptions>({
 
             lastNode = lastNode.lastChild;
 
-            if (!lastNode || lastNode.type.name !== "tcblock") {
-              throw new Error("Expected tcblock");
+            if (!lastNode || lastNode.type.name !== "block") {
+              throw new Error("Expected block");
             }
-            return lastNode.nodeSize > 4; // empty <tcblock><tccontent/></tcblock> is length 4
+            return lastNode.nodeSize > 4; // empty <block><content/></block> is length 4
           },
         },
       }),

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>
+  );
+}

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

@@ -0,0 +1,31 @@
+import { Button } from "@mantine/core";
+import { HiChevronDown } from "react-icons/hi";
+import { IconType } from "react-icons";
+import { forwardRef } from "react";
+
+export type ToolbarDropdownTargetProps = {
+  text: string;
+  icon?: IconType;
+  isDisabled?: boolean;
+};
+
+export const ToolbarDropdownTarget = forwardRef<
+  HTMLButtonElement,
+  ToolbarDropdownTargetProps
+>((props: ToolbarDropdownTargetProps, ref) => {
+  const { text, icon, isDisabled, ...others } = props;
+
+  const TargetIcon = props.icon;
+  return (
+    <Button
+      leftIcon={TargetIcon && <TargetIcon size={16} />}
+      rightIcon={<HiChevronDown />}
+      size={"xs"}
+      variant={"subtle"}
+      disabled={props.isDisabled}
+      ref={ref}
+      {...others}>
+      {props.text}
+    </Button>
+  );
+});

package/src/shared/plugins/suggestion/SuggestionItem.ts

@@ -1,3 +1,5 @@
+import { IconType } from "react-icons";
+
 /**
  * A generic interface used in all suggestion menus (slash menu, mentions, etc)
  */
@@ -15,7 +17,7 @@ export default interface SuggestionItem {
   /**
    * The react icon
    */
-  icon?: React.ComponentType<{ className: string }>;
+  icon?: IconType;
 
   hint?: string;
 

package/src/shared/plugins/suggestion/{SuggestionListReactRenderer.ts → SuggestionListReactRenderer.tsx}

@@ -6,6 +6,8 @@ import {
   SuggestionList,
   SuggestionListProps,
 } from "./components/SuggestionList";
+import { BlockNoteTheme } from "../../../BlockNoteTheme";
+import { MantineProvider } from "@mantine/core";
 
 /**
  * The interface that each suggestion renderer should conform to.
@@ -140,10 +142,17 @@ export default function createRenderer<T extends SuggestionItem>(
         selectedIndex,
       };
 
-      component = new ReactRenderer(SuggestionList as any, {
-        editor: editor as ReactEditor,
-        props: componentProps,
-      });
+      component = new ReactRenderer(
+        (props: SuggestionListProps<T>) => (
+          <MantineProvider theme={BlockNoteTheme}>
+            <SuggestionList {...props} />
+          </MantineProvider>
+        ),
+        {
+          editor: editor as ReactEditor,
+          props: componentProps,
+        }
+      );
 
       popup = tippy("body", {
         getReferenceClientRect: newProps.clientRect,

package/src/shared/plugins/suggestion/components/SuggestionGroup.tsx

@@ -1,94 +1,6 @@
-import { ButtonItem, Section } from "@atlaskit/menu";
-import React from "react";
+import { Menu } from "@mantine/core";
 import SuggestionItem from "../SuggestionItem";
-import styles from "./SuggestionGroup.module.css";
-
-const MIN_LEFT_MARGIN = 5;
-
-function SuggestionContent<T extends SuggestionItem>(props: { item: T }) {
-  return (
-    <div className={styles.suggestionWrapper}>
-      <div>
-        <div className={styles.buttonName}>{props.item.name}</div>
-        {props.item.hint && (
-          <div className={styles.buttonHint}>{props.item.hint}</div>
-        )}
-      </div>
-      {props.item.shortcut && (
-        <div>
-          <div className={styles.buttonShortcut}>{props.item.shortcut}</div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function getIcon<T extends SuggestionItem>(
-  item: T,
-  isButtonSelected: boolean
-): JSX.Element | undefined {
-  const Icon = item.icon;
-  return (
-    Icon && (
-      <div className={styles.iconWrapper}>
-        <Icon
-          className={
-            styles.icon + " " + (isButtonSelected ? styles.selectedIcon : "")
-          }
-        />
-      </div>
-    )
-  );
-}
-
-type SuggestionComponentProps<T> = {
-  item: T;
-  index: number;
-  selectedIndex?: number;
-  clickItem: (item: T) => void;
-};
-
-function SuggestionComponent<T extends SuggestionItem>(
-  props: SuggestionComponentProps<T>
-) {
-  let isButtonSelected =
-    props.selectedIndex !== undefined && props.selectedIndex === props.index;
-
-  const buttonRef = React.useRef<HTMLElement>(null);
-  React.useEffect(() => {
-    if (
-      isButtonSelected &&
-      buttonRef.current &&
-      buttonRef.current.getBoundingClientRect().left > MIN_LEFT_MARGIN //TODO: Kinda hacky, fix
-      // This check is needed because initially the menu is initialized somewhere above outside the screen (with left = 1)
-      // scrollIntoView() is called before the menu is set in the right place, and without the check would scroll to the top of the page every time
-    ) {
-      buttonRef.current.scrollIntoView({
-        behavior: "smooth",
-        block: "nearest",
-      });
-    }
-  }, [isButtonSelected]);
-
-  return (
-    <div className={styles.buttonItem}>
-      <ButtonItem
-        isSelected={isButtonSelected} // This is needed to navigate with the keyboard
-        iconBefore={getIcon(props.item, isButtonSelected)}
-        onClick={(_e) => {
-          setTimeout(() => {
-            props.clickItem(props.item);
-          }, 0);
-
-          // e.stopPropagation();
-          // e.preventDefault();
-        }}
-        ref={buttonRef}>
-        <SuggestionContent item={props.item} />
-      </ButtonItem>
-    </div>
-  );
-}
+import { SuggestionGroupItem } from "./SuggestionGroupItem";
 
 type SuggestionGroupProps<T> = {
   /**
@@ -117,10 +29,11 @@ export function SuggestionGroup<T extends SuggestionItem>(
   props: SuggestionGroupProps<T>
 ) {
   return (
-    <Section title={props.name}>
+    <>
+      <Menu.Label>{props.name}</Menu.Label>
       {props.items.map((item, index) => {
         return (
-          <SuggestionComponent
+          <SuggestionGroupItem
             item={item}
             key={index} // TODO: using index as key is not ideal for performance, better have ids on suggestionItems
             index={index}
@@ -129,6 +42,6 @@ export function SuggestionGroup<T extends SuggestionItem>(
           />
         );
       })}
-    </Section>
+    </>
   );
 }

package/src/shared/plugins/suggestion/components/SuggestionGroupItem.tsx

@@ -0,0 +1,82 @@
+import SuggestionItem from "../SuggestionItem";
+import { useEffect, useRef } from "react";
+import { Badge, createStyles, Menu, Stack, Text } from "@mantine/core";
+
+const MIN_LEFT_MARGIN = 5;
+
+export type SuggestionGroupItemProps<T> = {
+  item: T;
+  index: number;
+  selectedIndex?: number;
+  clickItem: (item: T) => void;
+};
+
+export function SuggestionGroupItem<T extends SuggestionItem>(
+  props: SuggestionGroupItemProps<T>
+) {
+  const itemRef = useRef<HTMLButtonElement>(null);
+  const { classes } = createStyles({ root: {} })(undefined, {
+    name: "SuggestionListItem",
+  });
+
+  function isSelected() {
+    const isKeyboardSelected =
+      props.selectedIndex !== undefined && props.selectedIndex === props.index;
+    const isMouseSelected = itemRef.current?.matches(":hover");
+
+    return isKeyboardSelected || isMouseSelected;
+  }
+
+  // Updates HTML "data-hovered" attribute which Mantine uses to set mouse hover styles.
+  // Allows users to "hover" menu items when navigating using the keyboard.
+  function updateSelection() {
+    isSelected()
+      ? itemRef.current?.setAttribute("data-hovered", "true")
+      : itemRef.current?.removeAttribute("data-hovered");
+  }
+
+  useEffect(() => {
+    // Updates whether the item is selected with the keyboard (triggered on selectedIndex prop change).
+    updateSelection();
+
+    if (
+      isSelected() &&
+      itemRef.current &&
+      itemRef.current.getBoundingClientRect().left > MIN_LEFT_MARGIN //TODO: Kinda hacky, fix
+      // This check is needed because initially the menu is initialized somewhere above outside the screen (with left = 1)
+      // scrollIntoView() is called before the menu is set in the right place, and without the check would scroll to the top of the page every time
+    ) {
+      itemRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+      });
+    }
+  });
+
+  const Icon = props.item.icon;
+
+  return (
+    <Menu.Item
+      className={classes.root}
+      icon={Icon && <Icon size={18} />}
+      onClick={() => props.clickItem(props.item)}
+      // Ensures an item selected with both mouse & keyboard doesn't get deselected on mouse leave.
+      onMouseLeave={() => {
+        setTimeout(() => {
+          updateSelection();
+        });
+      }}
+      ref={itemRef}
+      rightSection={
+        props.item.shortcut && <Badge size={"xs"}>{props.item.shortcut}</Badge>
+      }>
+      <Stack>
+        {/*Might need separate classes.*/}
+        <Text size={14} weight={500}>
+          {props.item.name}
+        </Text>
+        <Text size={10}>{props.item.hint}</Text>
+      </Stack>
+    </Menu.Item>
+  );
+}

package/src/shared/plugins/suggestion/components/SuggestionList.tsx

@@ -1,39 +1,31 @@
-import { MenuGroup, Section } from "@atlaskit/menu";
-import styles from "./SuggestionList.module.css";
-import rootStyles from "../../../../root.module.css";
+import { createStyles, Menu } from "@mantine/core";
 import { SuggestionGroup } from "./SuggestionGroup";
 import SuggestionItem from "../SuggestionItem";
 
 export type SuggestionListProps<T> = {
-  /**
-   * Object containing all suggestion items, grouped by their `groupName`.
-   */
+  // Object containing all suggestion items, grouped by their `groupName`.
   groups: {
     [groupName: string]: T[];
   };
 
-  /**
-   * The total number of suggestion-items
-   */
+  //The total number of suggestion-items
   count: number;
 
-  /**
-   * This callback gets executed whenever an item is clicked on
-   */
+  // This callback gets executed whenever an item is clicked on
   onSelectItem: (item: T) => void;
 
-  /**
-   * The index of the item that is currently selected (but not yet clicked on)
-   */
+  // The index of the item that is currently selected (but not yet clicked on)
   selectedIndex: number;
 };
 
-/**
- * Stateless component that renders the suggestion list
- */
+// Stateless component that renders the suggestion list
 export function SuggestionList<T extends SuggestionItem>(
   props: SuggestionListProps<T>
 ) {
+  const { classes } = createStyles({ root: {} })(undefined, {
+    name: "SuggestionList",
+  });
+
   const renderedGroups = [];
 
   let currentGroupIndex = 0;
@@ -58,15 +50,24 @@ export function SuggestionList<T extends SuggestionItem>(
   }
 
   return (
-    <div className={styles.menuList + " " + rootStyles.bnRoot}>
-      <MenuGroup>
+    <Menu
+      /** Hacky fix to get the desired menu behaviour. The trigger="hover"
+       * attribute allows focus to remain on the editor, allowing for suggestion
+       * filtering. The closeDelay=10000000 attribute allows the menu to stay open
+       * practically indefinitely, as normally hovering off it would cause it to
+       * close due to trigger="hover".
+       */
+      defaultOpened={true}
+      trigger={"hover"}
+      closeDelay={10000000}>
+      <Menu.Dropdown className={classes.root}>
         {renderedGroups.length > 0 ? (
           renderedGroups
         ) : (
-          <Section title={"No match found"}> </Section>
+          <Menu.Item>No match found</Menu.Item>
         )}
-      </MenuGroup>
-    </div>
+      </Menu.Dropdown>
+    </Menu>
 
     // doesn't work well yet, maybe https://github.com/atomiks/tippyjs-react/issues/173
     // We now render the tippy element manually in SuggestionListReactRenderer

package/src/useEditor.ts

@@ -17,6 +17,10 @@ const blockNoteOptions = {
   enablePasteRules: true,
   enableCoreExtensions: false,
 };
+
+/**
+ * Main hook for importing a BlockNote editor into a react project
+ */
 export const useEditor = (
   options: Partial<BlockNoteEditorOptions> = {},
   deps: DependencyList = []