@blocknote/core 0.1.0-alpha.3

package/src/extensions/BubbleMenu/BubbleMenuPlugin.ts

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

@@ -0,0 +1,216 @@
+import { Editor } from "@tiptap/core";
+import {
+  RiBold,
+  RiH1,
+  RiH2,
+  RiH3,
+  RiItalic,
+  RiLink,
+  RiStrikethrough,
+  RiUnderline,
+  RiIndentIncrease,
+  RiIndentDecrease,
+  RiText,
+  RiListOrdered,
+  RiListUnordered,
+} from "react-icons/ri";
+import { SimpleToolbarButton } from "../../../shared/components/toolbar/SimpleToolbarButton";
+import { Toolbar } from "../../../shared/components/toolbar/Toolbar";
+import { useEditorForceUpdate } from "../../../shared/hooks/useEditorForceUpdate";
+import { findBlock } from "../../Blocks/helpers/findBlock";
+import formatKeyboardShortcut from "../../helpers/formatKeyboardShortcut";
+import LinkToolbarButton from "./LinkToolbarButton";
+import DropdownMenu, { DropdownItemGroup } from "@atlaskit/dropdown-menu";
+import DropdownBlockItem from "./DropdownBlockItem";
+
+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
+  );
+
+  return (
+    <Toolbar>
+      <DropdownMenu trigger={currentBlockName}>
+        <DropdownItemGroup>
+          <DropdownBlockItem
+            title="Text"
+            icon={RiText}
+            isSelected={currentBlockName === "Paragraph"}
+            onClick={() =>
+              props.editor.chain().focus().unsetBlockHeading().unsetList().run()
+            }
+          />
+          <DropdownBlockItem
+            title="Heading 1"
+            icon={RiH1}
+            isSelected={currentBlockName === "Heading 1"}
+            onClick={() =>
+              props.editor
+                .chain()
+                .focus()
+                .unsetList()
+                .setBlockHeading({ level: 1 })
+                .run()
+            }
+          />
+          <DropdownBlockItem
+            title="Heading 2"
+            icon={RiH2}
+            isSelected={currentBlockName === "Heading 2"}
+            onClick={() =>
+              props.editor
+                .chain()
+                .focus()
+                .unsetList()
+                .setBlockHeading({ level: 2 })
+                .run()
+            }
+          />
+          <DropdownBlockItem
+            title="Heading 3"
+            icon={RiH3}
+            isSelected={currentBlockName === "Heading 3"}
+            onClick={() =>
+              props.editor
+                .chain()
+                .focus()
+                .unsetList()
+                .setBlockHeading({ level: 3 })
+                .run()
+            }
+          />
+          <DropdownBlockItem
+            title="Bullet List"
+            icon={RiListUnordered}
+            isSelected={currentBlockName === "Bullet List"}
+            onClick={() =>
+              props.editor
+                .chain()
+                .focus()
+                .unsetBlockHeading()
+                .setBlockList("li")
+                .run()
+            }
+          />
+          <DropdownBlockItem
+            title="Numbered List"
+            icon={RiListOrdered}
+            isSelected={currentBlockName === "Numbered List"}
+            onClick={() =>
+              props.editor
+                .chain()
+                .focus()
+                .unsetBlockHeading()
+                .setBlockList("oli")
+                .run()
+            }
+          />
+        </DropdownItemGroup>
+      </DropdownMenu>
+      <SimpleToolbarButton
+        onClick={() => props.editor.chain().focus().toggleBold().run()}
+        isSelected={props.editor.isActive("bold")}
+        mainTooltip="Bold"
+        secondaryTooltip={formatKeyboardShortcut("Mod+B")}
+        icon={RiBold}
+      />
+      <SimpleToolbarButton
+        onClick={() => props.editor.chain().focus().toggleItalic().run()}
+        isSelected={props.editor.isActive("italic")}
+        mainTooltip="Italic"
+        secondaryTooltip={formatKeyboardShortcut("Mod+I")}
+        icon={RiItalic}
+      />
+      <SimpleToolbarButton
+        onClick={() => props.editor.chain().focus().toggleUnderline().run()}
+        isSelected={props.editor.isActive("underline")}
+        mainTooltip="Underline"
+        secondaryTooltip={formatKeyboardShortcut("Mod+U")}
+        icon={RiUnderline}
+      />
+      <SimpleToolbarButton
+        onClick={() => props.editor.chain().focus().toggleStrike().run()}
+        isDisabled={props.editor.isActive("strike")}
+        mainTooltip="Strike-through"
+        secondaryTooltip={formatKeyboardShortcut("Mod+Shift+X")}
+        icon={RiStrikethrough}
+      />
+      <SimpleToolbarButton
+        onClick={() =>
+          props.editor.chain().focus().sinkListItem("tcblock").run()
+        }
+        isDisabled={!props.editor.can().sinkListItem("tcblock")}
+        mainTooltip="Indent"
+        secondaryTooltip={formatKeyboardShortcut("Tab")}
+        icon={RiIndentIncrease}
+      />
+
+      <SimpleToolbarButton
+        onClick={() =>
+          props.editor.chain().focus().liftListItem("tcblock").run()
+        }
+        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/DropdownBlockItem.module.css

@@ -0,0 +1,13 @@
+.item_container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  min-width: 100px;
+  gap: 1em;
+}
+.logo_and_item_container {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: 0.5rem;
+}

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

@@ -0,0 +1,25 @@
+import { DropdownItem } from "@atlaskit/dropdown-menu";
+import { IconType } from "react-icons/lib";
+import { TiTick } from "react-icons/ti";
+import styles from "./DropdownBlockItem.module.css";
+
+interface DropdownBlockItemProps {
+  title: string;
+  icon: IconType;
+  isSelected?: boolean;
+  onClick?: () => void;
+}
+export default function DropdownBlockItem(props: DropdownBlockItemProps) {
+  const ItemIcon = props.icon;
+  return (
+    <DropdownItem onClick={props.onClick}>
+      <div className={`${styles.item_container}`}>
+        <div className={`${styles.logo_and_item_container}`}>
+          <ItemIcon />
+          {props.title}
+        </div>
+        {props.isSelected && <TiTick />}
+      </div>
+    </DropdownItem>
+  );
+}

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

@@ -0,0 +1,67 @@
+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";
+
+type Props = SimpleToolbarButtonProps & {
+  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(
+      <HyperlinkEditMenu
+        key={Math.random() + ""} // Math.random to prevent old element from being re-used
+        url={activeUrl}
+        text={selectedText}
+        onSubmit={onSubmit}
+      />
+    );
+  }, [props.editor]);
+
+  return (
+    <Tippy
+      content={creationMenu}
+      trigger={"click"}
+      onShow={(_) => {
+        updateCreationMenu();
+      }}
+      interactive={true}
+      maxWidth={500}>
+      <SimpleToolbarButton {...props} />
+    </Tippy>
+  );
+};
+
+export default LinkToolbarButton;

package/src/extensions/DraggableBlocks/DraggableBlocksExtension.ts

@@ -0,0 +1,15 @@
+import { Extension } from "@tiptap/core";
+import { createDraggableBlocksPlugin } from "./DraggableBlocksPlugin";
+
+/**
+ * This extension adds a drag handle in front of all nodes with a "data-id" attribute
+ *
+ * code based on https://github.com/ueberdosis/tiptap/issues/323#issuecomment-506637799
+ */
+export const DraggableBlocksExtension = Extension.create<{}>({
+  name: "DraggableBlocksExtension",
+  priority: 1000, // Need to be high, in order to hide draghandle when typing slash
+  addProseMirrorPlugins() {
+    return [createDraggableBlocksPlugin()];
+  },
+});