@blocknote/core 0.1.1 → 0.2.0

package/src/extensions/BubbleMenu/BubbleMenuPlugin.ts

@@ -1,245 +0,0 @@
-import {
-  Editor,
-  isNodeSelection,
-  isTextSelection,
-  posToDOMRect,
-} from "@tiptap/core";
-import { EditorState, Plugin, PluginKey } from "prosemirror-state";
-import { EditorView } from "prosemirror-view";
-import tippy, { Instance, Props } from "tippy.js";
-
-// Same as TipTap bubblemenu plugin, but with these changes:
-// https://github.com/ueberdosis/tiptap/pull/2596/files
-export interface BubbleMenuPluginProps {
-  pluginKey: PluginKey | string;
-  editor: Editor;
-  element: HTMLElement;
-  tippyOptions?: Partial<Props>;
-  shouldShow?:
-    | ((props: {
-        editor: Editor;
-        view: EditorView;
-        state: EditorState;
-        oldState?: EditorState;
-        from: number;
-        to: number;
-      }) => boolean)
-    | null;
-}
-
-export type BubbleMenuViewProps = BubbleMenuPluginProps & {
-  view: EditorView;
-};
-
-export class BubbleMenuView {
-  public editor: Editor;
-
-  public element: HTMLElement;
-
-  public view: EditorView;
-
-  public preventHide = false;
-
-  public preventShow = false;
-
-  public tippy: Instance | undefined;
-
-  public tippyOptions?: Partial<Props>;
-
-  public shouldShow: Exclude<BubbleMenuPluginProps["shouldShow"], null> = ({
-    view,
-    state,
-    from,
-    to,
-  }) => {
-    const { doc, selection } = state;
-    const { empty } = selection;
-
-    // Sometime check for `empty` is not enough.
-    // Doubleclick an empty paragraph returns a node size of 2.
-    // So we check also for an empty text size.
-    const isEmptyTextBlock =
-      !doc.textBetween(from, to).length && isTextSelection(state.selection);
-
-    if (!view.hasFocus() || empty || isEmptyTextBlock) {
-      return false;
-    }
-
-    return true;
-  };
-
-  constructor({
-    editor,
-    element,
-    view,
-    tippyOptions = {},
-    shouldShow,
-  }: BubbleMenuViewProps) {
-    this.editor = editor;
-    this.element = element;
-    this.view = view;
-
-    if (shouldShow) {
-      this.shouldShow = shouldShow;
-    }
-
-    this.element.addEventListener("mousedown", this.mousedownHandler, {
-      capture: true,
-    });
-    this.view.dom.addEventListener("mousedown", this.viewMousedownHandler);
-    this.view.dom.addEventListener("mouseup", this.viewMouseupHandler);
-    this.view.dom.addEventListener("dragstart", this.dragstartHandler);
-
-    this.editor.on("focus", this.focusHandler);
-    this.editor.on("blur", this.blurHandler);
-    this.tippyOptions = tippyOptions;
-    // Detaches menu content from its current parent
-    this.element.remove();
-    this.element.style.visibility = "visible";
-  }
-
-  mousedownHandler = () => {
-    this.preventHide = true;
-  };
-
-  viewMousedownHandler = () => {
-    this.preventShow = true;
-  };
-
-  viewMouseupHandler = () => {
-    this.preventShow = false;
-    setTimeout(() => this.update(this.editor.view));
-  };
-
-  dragstartHandler = () => {
-    this.hide();
-  };
-
-  focusHandler = () => {
-    // we use `setTimeout` to make sure `selection` is already updated
-    setTimeout(() => this.update(this.editor.view));
-  };
-
-  blurHandler = ({ event }: { event: FocusEvent }) => {
-    if (this.preventHide) {
-      this.preventHide = false;
-
-      return;
-    }
-
-    if (
-      event?.relatedTarget &&
-      this.element.parentNode?.contains(event.relatedTarget as Node)
-    ) {
-      return;
-    }
-
-    this.hide();
-  };
-
-  createTooltip() {
-    const { element: editorElement } = this.editor.options;
-    const editorIsAttached = !!editorElement.parentElement;
-
-    if (this.tippy || !editorIsAttached) {
-      return;
-    }
-
-    this.tippy = tippy(editorElement, {
-      duration: 0,
-      getReferenceClientRect: null,
-      content: this.element,
-      interactive: true,
-      trigger: "manual",
-      placement: "top",
-      hideOnClick: "toggle",
-      ...this.tippyOptions,
-    });
-
-    // maybe we have to hide tippy on its own blur event as well
-    if (this.tippy.popper.firstChild) {
-      (this.tippy.popper.firstChild as HTMLElement).addEventListener(
-        "blur",
-        (event) => {
-          this.blurHandler({ event });
-        }
-      );
-    }
-  }
-
-  update(view: EditorView, oldState?: EditorState) {
-    const { state, composing } = view;
-    const { doc, selection } = state;
-    const isSame =
-      oldState && oldState.doc.eq(doc) && oldState.selection.eq(selection);
-
-    if (composing || isSame) {
-      return;
-    }
-
-    this.createTooltip();
-
-    // support for CellSelections
-    const { ranges } = selection;
-    const from = Math.min(...ranges.map((range) => range.$from.pos));
-    const to = Math.max(...ranges.map((range) => range.$to.pos));
-
-    const shouldShow = this.shouldShow?.({
-      editor: this.editor,
-      view,
-      state,
-      oldState,
-      from,
-      to,
-    });
-
-    if (!shouldShow || this.preventShow) {
-      this.hide();
-
-      return;
-    }
-
-    this.tippy?.setProps({
-      getReferenceClientRect: () => {
-        if (isNodeSelection(state.selection)) {
-          const node = view.nodeDOM(from) as HTMLElement;
-
-          if (node) {
-            return node.getBoundingClientRect();
-          }
-        }
-
-        return posToDOMRect(view, from, to);
-      },
-    });
-
-    this.show();
-  }
-
-  show() {
-    this.tippy?.show();
-  }
-
-  hide() {
-    this.tippy?.hide();
-  }
-
-  destroy() {
-    this.tippy?.destroy();
-    this.element.removeEventListener("mousedown", this.mousedownHandler, {
-      capture: true,
-    });
-    this.view.dom.removeEventListener("mousedown", this.viewMousedownHandler);
-    this.view.dom.removeEventListener("mouseup", this.viewMouseupHandler);
-    this.view.dom.removeEventListener("dragstart", this.dragstartHandler);
-    this.editor.off("focus", this.focusHandler);
-    this.editor.off("blur", this.blurHandler);
-  }
-}
-
-export const createBubbleMenuPlugin = (options: BubbleMenuPluginProps) => {
-  return new Plugin({
-    key: new PluginKey("BubbleMenuPlugin"),
-    view: (view) => new BubbleMenuView({ view, ...options }),
-  });
-};

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

@@ -1,240 +0,0 @@
-import { Editor } from "@tiptap/core";
-import {
-  RiBold,
-  RiH1,
-  RiH2,
-  RiH3,
-  RiIndentDecrease,
-  RiIndentIncrease,
-  RiItalic,
-  RiLink,
-  RiListOrdered,
-  RiListUnordered,
-  RiStrikethrough,
-  RiText,
-  RiUnderline,
-} from "react-icons/ri";
-import { ToolbarButton } from "../../../shared/components/toolbar/ToolbarButton";
-import { ToolbarDropdown } from "../../../shared/components/toolbar/ToolbarDropdown";
-import { Toolbar } from "../../../shared/components/toolbar/Toolbar";
-import { useEditorForceUpdate } from "../../../shared/hooks/useEditorForceUpdate";
-import { findBlock } from "../../Blocks/helpers/findBlock";
-import { formatKeyboardShortcut } from "../../../utils";
-import LinkToolbarButton from "./LinkToolbarButton";
-import { IconType } from "react-icons";
-
-type ListType = "li" | "oli";
-
-function getBlockName(
-  currentBlockHeading: number | undefined,
-  currentBlockListType: ListType | undefined
-) {
-  const headings = ["Heading 1", "Heading 2", "Heading 3"];
-  const lists = {
-    li: "Bullet List",
-    oli: "Numbered List",
-  };
-  // A heading that's also a list, should show as Heading
-  if (currentBlockHeading) {
-    return headings[currentBlockHeading - 1];
-  } else if (currentBlockListType) {
-    return lists[currentBlockListType];
-  } else {
-    return "Text";
-  }
-}
-
-// TODO: add list options, indentation
-export const BubbleMenu = (props: { editor: Editor }) => {
-  useEditorForceUpdate(props.editor);
-
-  const currentBlock = findBlock(props.editor.state.selection);
-  const currentBlockHeading: number | undefined =
-    currentBlock?.node.attrs.headingType;
-  const currentBlockListType: ListType | undefined =
-    currentBlock?.node.attrs.listType;
-
-  const currentBlockName = getBlockName(
-    currentBlockHeading,
-    currentBlockListType
-  );
-
-  const blockIconMap: Record<string, IconType> = {
-    Text: RiText,
-    "Heading 1": RiH1,
-    "Heading 2": RiH2,
-    "Heading 3": RiH3,
-    "Bullet List": RiListUnordered,
-    "Numbered List": RiListOrdered,
-  };
-
-  return (
-    <Toolbar>
-      <ToolbarDropdown
-        text={currentBlockName}
-        icon={blockIconMap[currentBlockName]}
-        items={[
-          {
-            onClick: () => {
-              // Setting editor focus using a chained command instead causes bubble menu to flicker on click.
-              props.editor.view.focus();
-              props.editor.chain().unsetBlockHeading().unsetList().run();
-            },
-            text: "Text",
-            icon: RiText,
-            isSelected: currentBlockName === "Text",
-          },
-          {
-            onClick: () => {
-              props.editor.view.focus();
-              props.editor
-                .chain()
-                .unsetList()
-                .setBlockHeading({ level: "1" })
-                .run();
-            },
-            text: "Heading 1",
-            icon: RiH1,
-            isSelected: currentBlockName === "Heading 1",
-          },
-          {
-            onClick: () => {
-              props.editor.view.focus();
-              props.editor
-                .chain()
-                .unsetList()
-                .setBlockHeading({ level: "2" })
-                .run();
-            },
-            text: "Heading 2",
-            icon: RiH2,
-            isSelected: currentBlockName === "Heading 2",
-          },
-          {
-            onClick: () => {
-              props.editor.view.focus();
-              props.editor
-                .chain()
-                .unsetList()
-                .setBlockHeading({ level: "3" })
-                .run();
-            },
-            text: "Heading 3",
-            icon: RiH3,
-            isSelected: currentBlockName === "Heading 3",
-          },
-          {
-            onClick: () => {
-              props.editor.view.focus();
-              props.editor.chain().unsetBlockHeading().setBlockList("li").run();
-            },
-            text: "Bullet List",
-            icon: RiListUnordered,
-            isSelected: currentBlockName === "Bullet List",
-          },
-          {
-            onClick: () => {
-              props.editor.view.focus();
-              props.editor
-                .chain()
-                .unsetBlockHeading()
-                .setBlockList("oli")
-                .run();
-            },
-            text: "Numbered List",
-            icon: RiListOrdered,
-            isSelected: currentBlockName === "Numbered List",
-          },
-        ]}
-      />
-      <ToolbarButton
-        onClick={() => {
-          // Setting editor focus using a chained command instead causes bubble menu to flicker on click.
-          props.editor.view.focus();
-          props.editor.commands.toggleBold();
-        }}
-        isSelected={props.editor.isActive("bold")}
-        mainTooltip="Bold"
-        secondaryTooltip={formatKeyboardShortcut("Mod+B")}
-        icon={RiBold}
-      />
-      <ToolbarButton
-        onClick={() => {
-          props.editor.view.focus();
-          props.editor.commands.toggleItalic();
-        }}
-        isSelected={props.editor.isActive("italic")}
-        mainTooltip="Italic"
-        secondaryTooltip={formatKeyboardShortcut("Mod+I")}
-        icon={RiItalic}
-      />
-      <ToolbarButton
-        onClick={() => {
-          props.editor.view.focus();
-          props.editor.commands.toggleUnderline();
-        }}
-        isSelected={props.editor.isActive("underline")}
-        mainTooltip="Underline"
-        secondaryTooltip={formatKeyboardShortcut("Mod+U")}
-        icon={RiUnderline}
-      />
-      <ToolbarButton
-        onClick={() => {
-          props.editor.view.focus();
-          props.editor.commands.toggleStrike();
-        }}
-        isSelected={props.editor.isActive("strike")}
-        mainTooltip="Strike-through"
-        secondaryTooltip={formatKeyboardShortcut("Mod+Shift+X")}
-        icon={RiStrikethrough}
-      />
-      <ToolbarButton
-        onClick={() => {
-          props.editor.view.focus();
-          props.editor.commands.sinkListItem("block");
-        }}
-        isDisabled={!props.editor.can().sinkListItem("block")}
-        mainTooltip="Indent"
-        secondaryTooltip={formatKeyboardShortcut("Tab")}
-        icon={RiIndentIncrease}
-      />
-
-      <ToolbarButton
-        onClick={() => {
-          props.editor.view.focus();
-          props.editor.commands.liftListItem("block");
-        }}
-        isDisabled={
-          !props.editor.can().command(({ state }) => {
-            const block = findBlock(state.selection);
-            if (!block) {
-              return false;
-            }
-            // If the depth is greater than 2 you can lift
-            return block.depth > 2;
-          })
-        }
-        mainTooltip="Decrease Indent"
-        secondaryTooltip={formatKeyboardShortcut("Shift+Tab")}
-        icon={RiIndentDecrease}
-      />
-
-      <LinkToolbarButton
-        // editor={props.editor}
-        isSelected={props.editor.isActive("link")}
-        mainTooltip="Link"
-        secondaryTooltip={formatKeyboardShortcut("Mod+K")}
-        icon={RiLink}
-        editor={props.editor}
-      />
-      {/* <SimpleBubbleMenuButton
-          editor={props.editor}
-          onClick={() => {
-            const comment = this.props.commentStore.createComment();
-            props.editor.chain().focus().setComment(comment.id).run();
-          }}
-          styleDetails={comment}
-        /> */}
-    </Toolbar>
-  );
-};

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

@@ -1,67 +0,0 @@
-import Tippy from "@tippyjs/react";
-import { Editor } from "@tiptap/core";
-import { useCallback, useState } from "react";
-import {
-  ToolbarButton,
-  ToolbarButtonProps,
-} from "../../../shared/components/toolbar/ToolbarButton";
-import { EditHyperlinkMenu } from "../../Hyperlinks/menus/EditHyperlinkMenu";
-
-type Props = ToolbarButtonProps & {
-  editor: Editor;
-};
-
-/**
- * The link menu button opens a tooltip on click
- */
-export const LinkToolbarButton = (props: Props) => {
-  const [creationMenu, setCreationMenu] = useState<any>();
-
-  // TODO: review code; does this pattern still make sense?
-  const updateCreationMenu = useCallback(() => {
-    const onSubmit = (url: string, text: string) => {
-      if (url === "") {
-        return;
-      }
-      const mark = props.editor.schema.mark("link", { href: url });
-      let { from, to } = props.editor.state.selection;
-      props.editor.view.dispatch(
-        props.editor.view.state.tr
-          .insertText(text, from, to)
-          .addMark(from, from + text.length, mark)
-      );
-    };
-
-    // get the currently selected text and url from the document, and use it to
-    // create a new creation menu
-    const { from, to } = props.editor.state.selection;
-    const selectedText = props.editor.state.doc.textBetween(from, to);
-    const activeUrl = props.editor.isActive("link")
-      ? props.editor.getAttributes("link").href || ""
-      : "";
-
-    setCreationMenu(
-      <EditHyperlinkMenu
-        key={Math.random() + ""} // Math.random to prevent old element from being re-used
-        url={activeUrl}
-        text={selectedText}
-        update={onSubmit}
-      />
-    );
-  }, [props.editor]);
-
-  return (
-    <Tippy
-      content={creationMenu}
-      trigger={"click"}
-      onShow={(_) => {
-        updateCreationMenu();
-      }}
-      interactive={true}
-      maxWidth={500}>
-      <ToolbarButton {...props} />
-    </Tippy>
-  );
-};
-
-export default LinkToolbarButton;

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

@@ -1,102 +0,0 @@
-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 { Menu } from "@mantine/core";
-import { MdDragIndicator } from "react-icons/all";
-import { ActionIcon } from "@mantine/core";
-import DragHandleMenu from "./DragHandleMenu";
-
-export const DragHandle = (props: {
-  view: EditorView;
-  coords: { left: number; top: number };
-  onShow?: () => void;
-  onHide?: () => void;
-  onAddClicked?: () => void;
-}) => {
-  const [clicked, setClicked] = useState<boolean>(false);
-  const [deleted, setDeleted] = useState<boolean>(false);
-
-  const onDelete = () => {
-    const pos = props.view.posAtCoords(props.coords);
-    if (!pos) {
-      return;
-    }
-    const currentBlock = findBlock(
-      TextSelection.create(props.view.state.doc, pos.pos)
-    );
-
-    if (currentBlock) {
-      if (props.view.dispatch) {
-        props.view.dispatch(
-          props.view.state.tr.deleteRange(
-            currentBlock.pos,
-            currentBlock.pos + currentBlock.node.nodeSize
-          )
-        );
-      }
-      setDeleted(true);
-    }
-  };
-
-  const onAddClick = () => {
-    setClicked(true);
-    if (props.onAddClicked) {
-      props.onAddClicked();
-    }
-    const pos = props.view.posAtCoords(props.coords);
-    if (!pos) {
-      return;
-    }
-    const currentBlock = findBlock(
-      TextSelection.create(props.view.state.doc, pos.pos)
-    );
-    if (!currentBlock) {
-      return;
-    }
-    // If current blocks content is empty dont create a new block
-    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["content"].createAndFill()!;
-      props.view.state.tr.insert(endOfBlock, newBlock);
-      props.view.dispatch(props.view.state.tr.insert(endOfBlock, newBlock));
-      props.view.dispatch(
-        props.view.state.tr.setSelection(
-          new TextSelection(props.view.state.tr.doc.resolve(endOfBlock + 1))
-        )
-      );
-    }
-    // Focus and activate slash menu
-    props.view.focus();
-    props.view.dispatch(
-      props.view.state.tr.scrollIntoView().setMeta(SlashMenuPluginKey, {
-        // TODO import suggestion plugin key
-        activate: true,
-        type: "drag",
-      })
-    );
-  };
-
-  if (deleted || clicked) {
-    return null;
-  }
-
-  return (
-    <div style={{ display: "flex", flexDirection: "row" }}>
-      <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,19 +0,0 @@
-import { createStyles, Menu } from "@mantine/core";
-
-type Props = {
-  onDelete: () => void;
-};
-
-const DragHandleMenu = (props: Props) => {
-  const { classes } = createStyles({ root: {} })(undefined, {
-    name: "DragHandleMenu",
-  });
-
-  return (
-    <Menu.Dropdown className={classes.root}>
-      <Menu.Item onClick={props.onDelete}>Delete</Menu.Item>
-    </Menu.Dropdown>
-  );
-};
-
-export default DragHandleMenu;

package/src/extensions/Hyperlinks/HyperlinkMark.tsx

@@ -1,16 +0,0 @@
-import { Link } from "@tiptap/extension-link";
-import { createHyperlinkMenuPlugin } from "./HyperlinkMenuPlugin";
-
-/**
- * This custom link includes a special menu for editing/deleting/opening the link.
- * The menu will be triggered by hovering over the link with the mouse,
- * or by moving the cursor inside the link text
- */
-const Hyperlink = Link.extend({
-  priority: 500,
-  addProseMirrorPlugins() {
-    return [...(this.parent?.() || []), createHyperlinkMenuPlugin()];
-  },
-});
-
-export default Hyperlink;