@blocknote/core 0.1.2 → 0.2.1-alpha.0

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

@@ -1,35 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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/components/tooltip/TooltipContent.module.css

@@ -1,15 +0,0 @@
-.tooltip {
-  color: var(--N40);
-  background-color: var(--N800);
-  box-shadow: 0 0 10px rgba(253, 254, 255, 0.8),
-    0 0 3px rgba(253, 254, 255, 0.4);
-  border-radius: 2px;
-  font-size: smaller;
-  text-align: center;
-  padding: 4px;
-}
-
-.secondaryText {
-  font-weight: 400;
-  opacity: 0.6;
-}

package/src/shared/components/tooltip/TooltipContent.tsx

@@ -1,23 +0,0 @@
-import styles from "./TooltipContent.module.css";
-
-/**
- * Helper for the tooltip for inline bubble menu buttons.
- *
- * Often used to display a tooltip showing the command name + keyboard shortcut, e.g.:
- *
- *      Bold
- *      Ctrl+B
- *
- * TODO: maybe use default Tippy styles instead?
- */
-export const TooltipContent = (props: {
-  mainTooltip: string;
-  secondaryTooltip?: string;
-}) => (
-  <div className={styles.tooltip}>
-    <div>{props.mainTooltip}</div>
-    {props.secondaryTooltip && (
-      <div className={styles.secondaryText}>{props.secondaryTooltip}</div>
-    )}
-  </div>
-);

package/src/shared/hooks/useEditorForceUpdate.tsx

@@ -1,30 +0,0 @@
-import { Editor } from "@tiptap/core";
-import { useEffect, useState } from "react";
-
-function useForceUpdate() {
-  const [, setValue] = useState(0);
-
-  return () => setValue((value) => value + 1);
-}
-
-// This is a component that is similar to https://github.com/ueberdosis/tiptap/blob/main/packages/react/src/useEditor.ts
-// Use it to rerender a component whenever a transaction happens in the editor
-export const useEditorForceUpdate = (editor: Editor) => {
-  const forceUpdate = useForceUpdate();
-
-  useEffect(() => {
-    const callback = () => {
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          forceUpdate();
-        });
-      });
-    };
-
-    editor.on("transaction", callback);
-    return () => {
-      editor.off("transaction", callback);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editor]);
-};

package/src/shared/plugins/suggestion/SuggestionListReactRenderer.tsx

@@ -1,236 +0,0 @@
-import { Editor as ReactEditor, ReactRenderer } from "@tiptap/react";
-import { Editor } from "@tiptap/core";
-import tippy, { Instance } from "tippy.js";
-import SuggestionItem from "./SuggestionItem";
-import {
-  SuggestionList,
-  SuggestionListProps,
-} from "./components/SuggestionList";
-import { BlockNoteTheme } from "../../../BlockNoteTheme";
-import { MantineProvider } from "@mantine/core";
-
-/**
- * The interface that each suggestion renderer should conform to.
- */
-export interface SuggestionRenderer<T extends SuggestionItem> {
-  /**
-   * Disposes of the suggestion menu.
-   */
-  onExit?: (props: SuggestionRendererProps<T>) => void;
-
-  /**
-   * Updates the suggestion menu.
-   *
-   * This function should be called when the renderer's `props` change,
-   * after `onStart` has been called.
-   */
-  onUpdate?: (props: SuggestionRendererProps<T>) => void;
-
-  /**
-   * Creates and displays a new suggestion menu popup.
-   */
-  onStart?: (props: SuggestionRendererProps<T>) => void;
-
-  /**
-   * Function for handling key events
-   */
-  onKeyDown?: (event: KeyboardEvent) => boolean;
-
-  /**
-   * The DOM Element representing the suggestion menu
-   */
-  getComponent: () => Element | undefined;
-}
-
-export type SuggestionRendererProps<T extends SuggestionItem> = {
-  /**
-   * Object containing all suggestion items, grouped by their `groupName`.
-   */
-  groups: {
-    [groupName: string]: T[];
-  };
-
-  /**
-   * The total number of suggestion-items.
-   */
-  count: number;
-
-  /**
-   * This callback is executed whenever the user selects an item.
-   *
-   * @param item the selected item
-   */
-  onSelectItem: (item: T) => void;
-
-  /**
-   * A function returning the client rect to use as reference for positioning the suggestion menu popup.
-   */
-  clientRect: (() => DOMRect) | null;
-
-  /**
-   * This callback is executed when the suggestion menu needs to be closed,
-   * e.g. when the user presses escape.
-   */
-  onClose: () => void;
-};
-
-/**
- * This function creates a SuggestionRenderer based on TipTap's ReactRenderer utility.
- *
- * The resulting renderer can be used to display a suggestion menu containing (grouped) suggestion items.
- *
- * This renderer also takes care of the following key events:
- * - Key up/down, for navigating the suggestion menu (selecting different items)
- * - Enter for picking the currently selected item and closing the menu
- * - Escape to close the menu, without taking action
- *
- * @param editor the TipTap editor
- * @returns the newly constructed SuggestionRenderer
- */
-export default function createRenderer<T extends SuggestionItem>(
-  editor: Editor
-): SuggestionRenderer<T> {
-  let component: ReactRenderer;
-  let popup: Instance[];
-  let componentsDisposedOrDisposing = true;
-  let selectedIndex = 0;
-  let props: SuggestionRendererProps<T> | undefined;
-
-  /**
-   * Helper function to find out what item corresponds to a certain index.
-   *
-   * This function might throw an error if the index is invalid,
-   * or when this function is not called in the proper environment.
-   *
-   * @param index the index
-   * @returns the item that corresponds to the index
-   */
-  const itemByIndex = (index: number): T => {
-    if (!props) {
-      throw new Error("props not set");
-    }
-    let currentIndex = 0;
-    for (const groupName in props.groups) {
-      const items = props.groups[groupName];
-      const groupSize = items.length;
-      // Check if index lies within this group
-      if (index < currentIndex + groupSize) {
-        return items[index - currentIndex];
-      }
-      currentIndex += groupSize;
-    }
-    throw Error("item not found");
-  };
-
-  return {
-    getComponent: () => {
-      if (!popup || !popup[0]) {
-        return undefined;
-      }
-      // return the tippy container element, this is used to ensure
-      // that click events inside the menu are handled properly.
-      return popup[0].reference;
-    },
-    onStart: (newProps) => {
-      props = newProps;
-      componentsDisposedOrDisposing = false;
-      selectedIndex = 0;
-      const componentProps: SuggestionListProps<T> = {
-        groups: newProps.groups,
-        count: newProps.count,
-        onSelectItem: newProps.onSelectItem,
-        selectedIndex,
-      };
-
-      component = new ReactRenderer(
-        (props: SuggestionListProps<T>) => (
-          <MantineProvider theme={BlockNoteTheme}>
-            <SuggestionList {...props} />
-          </MantineProvider>
-        ),
-        {
-          editor: editor as ReactEditor,
-          props: componentProps,
-        }
-      );
-
-      popup = tippy("body", {
-        getReferenceClientRect: newProps.clientRect,
-        appendTo: () => document.body,
-        content: component.element,
-        showOnCreate: true,
-        interactive: true,
-        trigger: "manual",
-        placement: "bottom-start",
-      });
-    },
-
-    onUpdate: (newProps) => {
-      props = newProps;
-      if (props.groups !== component.props.groups) {
-        // if the set of items is different (e.g.: by typing / searching), reset the selectedIndex to 0
-        selectedIndex = 0;
-      }
-      const componentProps: SuggestionListProps<T> = {
-        groups: props.groups,
-        count: props.count,
-        onSelectItem: props.onSelectItem,
-        selectedIndex,
-      };
-      component.updateProps(componentProps);
-
-      popup[0].setProps({
-        getReferenceClientRect: props.clientRect,
-      });
-    },
-
-    onKeyDown: (event) => {
-      if (!props) {
-        return false;
-      }
-      if (event.key === "ArrowUp") {
-        selectedIndex = (selectedIndex + props.count - 1) % props.count;
-        component.updateProps({
-          selectedIndex,
-        });
-        return true;
-      }
-
-      if (event.key === "ArrowDown") {
-        selectedIndex = (selectedIndex + 1) % props.count;
-        component.updateProps({
-          selectedIndex,
-        });
-        return true;
-      }
-
-      if (event.key === "Enter") {
-        const item = itemByIndex(selectedIndex);
-        props.onSelectItem(item);
-        return true;
-      }
-
-      if (event.key === "Escape") {
-        props.onClose();
-        return true;
-      }
-      return false;
-    },
-
-    onExit: (_props) => {
-      if (componentsDisposedOrDisposing) {
-        return;
-      }
-      // onExit, first hide tippy popup so it shows fade-out
-      // then (after 1 second, actually destroy resources)
-      componentsDisposedOrDisposing = true;
-      const popupToDestroy = popup[0];
-      const componentToDestroy = component;
-      popupToDestroy.hide();
-      setTimeout(() => {
-        popupToDestroy.destroy();
-        componentToDestroy.destroy();
-      }, 1000);
-    },
-  };
-}

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

@@ -1,47 +0,0 @@
-import { Menu } from "@mantine/core";
-import SuggestionItem from "../SuggestionItem";
-import { SuggestionGroupItem } from "./SuggestionGroupItem";
-
-type SuggestionGroupProps<T> = {
-  /**
-   * Name of the group
-   */
-  name: string;
-
-  /**
-   * The list of items
-   */
-  items: T[];
-
-  /**
-   * Index of the selected item in this group; relative to this item group (so 0 refers to the first item in this group)
-   * This should be 'undefined' if none of the items in this group are selected
-   */
-  selectedIndex?: number;
-
-  /**
-   * Callback that gets executed when an item is clicked on.
-   */
-  clickItem: (item: T) => void;
-};
-
-export function SuggestionGroup<T extends SuggestionItem>(
-  props: SuggestionGroupProps<T>
-) {
-  return (
-    <>
-      <Menu.Label>{props.name}</Menu.Label>
-      {props.items.map((item, index) => {
-        return (
-          <SuggestionGroupItem
-            item={item}
-            key={index} // TODO: using index as key is not ideal for performance, better have ids on suggestionItems
-            index={index}
-            selectedIndex={props.selectedIndex}
-            clickItem={props.clickItem}
-          />
-        );
-      })}
-    </>
-  );
-}

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

@@ -1,82 +0,0 @@
-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,92 +0,0 @@
-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`.
-  groups: {
-    [groupName: string]: T[];
-  };
-
-  //The total number of suggestion-items
-  count: number;
-
-  // 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)
-  selectedIndex: number;
-};
-
-// 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;
-
-  for (const groupName in props.groups) {
-    const items = props.groups[groupName];
-
-    renderedGroups.push(
-      <SuggestionGroup
-        key={groupName}
-        name={groupName}
-        items={items}
-        selectedIndex={
-          props.selectedIndex >= currentGroupIndex
-            ? props.selectedIndex - currentGroupIndex
-            : undefined
-        }
-        clickItem={props.onSelectItem}></SuggestionGroup>
-    );
-
-    currentGroupIndex += items.length;
-  }
-
-  return (
-    <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
-        ) : (
-          <Menu.Item>No match found</Menu.Item>
-        )}
-      </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
-    // <Tippy
-    //   visible={true}
-    //   placement="bottom-start"
-    //   content={
-    //     <div className={styles.menuList}>
-    //       <PopupMenuGroup maxWidth="250px" maxHeight="400px">
-    //         {renderedGroups.length > 0 ? (
-    //           renderedGroups
-    //         ) : (
-    //           <Section title={"No match found"}> </Section>
-    //         )}
-    //       </PopupMenuGroup>
-    //     </div>
-    //   }
-    //   interactive={false}>
-    //   <div></div>
-    // </Tippy>
-  );
-}

package/src/useEditor.ts

@@ -1,51 +0,0 @@
-import { EditorOptions, useEditor as useEditorTiptap } from "@tiptap/react";
-
-import { DependencyList } from "react";
-import { getBlockNoteExtensions } from "./BlockNoteExtensions";
-import styles from "./editor.module.css";
-import rootStyles from "./root.module.css";
-
-type BlockNoteEditorOptions = EditorOptions & {
-  enableBlockNoteExtensions: boolean;
-  disableHistoryExtension: boolean;
-};
-
-const blockNoteExtensions = getBlockNoteExtensions();
-
-const blockNoteOptions = {
-  enableInputRules: true,
-  enablePasteRules: true,
-  enableCoreExtensions: false,
-};
-
-/**
- * Main hook for importing a BlockNote editor into a react project
- */
-export const useEditor = (
-  options: Partial<BlockNoteEditorOptions> = {},
-  deps: DependencyList = []
-) => {
-  const extensions = options.disableHistoryExtension
-    ? blockNoteExtensions.filter((e) => e.name !== "history")
-    : blockNoteExtensions;
-
-  const tiptapOptions = {
-    ...blockNoteOptions,
-    ...options,
-    extensions:
-      options.enableBlockNoteExtensions === false
-        ? options.extensions
-        : [...(options.extensions || []), ...extensions],
-    editorProps: {
-      attributes: {
-        ...(options.editorProps?.attributes || {}),
-        class: [
-          styles.bnEditor,
-          rootStyles.bnRoot,
-          (options.editorProps?.attributes as any)?.class || "",
-        ].join(" "),
-      },
-    },
-  };
-  return useEditorTiptap(tiptapOptions, deps);
-};

package/types/src/BlockNoteTheme.d.ts

@@ -1,2 +0,0 @@
-import { MantineThemeOverride } from "@mantine/core";
-export declare const BlockNoteTheme: MantineThemeOverride;

package/types/src/EditorContent.d.ts

@@ -1 +0,0 @@
-export { EditorContent } from "@tiptap/react";

package/types/src/commands/indentation.d.ts

@@ -1,2 +0,0 @@
-import { LexicalEditor } from "lexical";
-export declare function registerIndentationCommands(editor: LexicalEditor): () => void;

package/types/src/extensions/Blocks/OrderedListPlugin.d.ts

@@ -1,2 +0,0 @@
-import { Plugin } from "prosemirror-state";
-export declare const OrderedListPlugin: () => Plugin<any>;

package/types/src/extensions/Blocks/commands/joinBackward.d.ts

@@ -1,14 +0,0 @@
-import { Command } from "prosemirror-state";
-/**
- * Code taken from https://github.com/ProseMirror/prosemirror-commands/blob/97a8cb5fac25e697d4693ce343e2e3b020a7fa2f/src/commands.ts
- * Reason for modification: https://github.com/YousefED/BlockNote/pull/11
- *
- * BlockA
- * BlockB
- * Order of behavior has been switched to make first and second blocks content
- * merge before trying to add second block as child of first
- *
- * behavior responsible for joining BlockB as A child of BlockA moved to (line 379 - 393 original file) after
- * behavior responsible for joining content of BlockA and BlockB (line 402 - 422 original file)
- */
-export declare const joinBackward: Command;

package/types/src/extensions/Blocks/helpers/setBlockHeading.d.ts

@@ -1,5 +0,0 @@
-import { Transaction } from "prosemirror-state";
-import { Level } from "../nodes/Block";
-declare type Dispatch = ((args?: any) => any) | undefined;
-export declare function setBlockHeading(tr: Transaction, dispatch: Dispatch, level?: Level): boolean;
-export {};

package/types/src/extensions/Blocks/nodes/Content.d.ts

@@ -1,5 +0,0 @@
-import { Node } from "@tiptap/core";
-export interface IBlock {
-    HTMLAttributes: Record<string, any>;
-}
-export declare const ContentBlock: Node<IBlock, any>;