@blocknote/core 0.1.0 → 0.1.2

package/src/extensions/Blocks/nodes/BlockGroup.ts

@@ -13,7 +13,23 @@ export const BlockGroup = Node.create({
   content: "block+",
 
   parseHTML() {
-    return [{ tag: "div" }];
+    return [
+      {
+        tag: "div",
+        getAttrs: (element) => {
+          if(typeof element === "string") {
+            return false;
+          }
+
+          if(element.getAttribute("data-node-type") === "block-group") {
+            // Null means the element matches, but we don't want to add any attributes to the node.
+            return null;
+          }
+
+          return false;
+        }
+      }
+    ];
   },
 
   renderHTML({ HTMLAttributes }) {
@@ -21,6 +37,7 @@ export const BlockGroup = Node.create({
       "div",
       mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
         class: styles.blockGroup,
+        "data-node-type": "block-group"
       }),
       0,
     ];

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

@@ -32,7 +32,19 @@ export const ContentBlock = Node.create<IBlock>({
     return [
       {
         tag: "div",
-      },
+        getAttrs: (element) => {
+          if(typeof element === "string") {
+            return false;
+          }
+
+          if(element.getAttribute("data-node-type") === "block-content") {
+            // Null means the element matches, but we don't want to add any attributes to the node.
+            return null;
+          }
+
+          return false;
+        }
+      }
     ];
   },
 
@@ -41,6 +53,7 @@ export const ContentBlock = Node.create<IBlock>({
       "div",
       mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
         class: styles.blockContent,
+        "data-node-type": "block-content"
       }),
       // TODO: The extra nested div is only needed for placeholders, different solution (without extra div) would be preferable
       // We can't use the other div because the ::before attribute on that one is already reserved for list-bullets

package/src/extensions/BubbleMenu/BubbleMenuExtension.tsx

@@ -1,6 +1,8 @@
+import { MantineProvider } from "@mantine/core";
 import { Extension } from "@tiptap/core";
 import { PluginKey } from "prosemirror-state";
 import ReactDOM from "react-dom";
+import { BlockNoteTheme } from "../../BlockNoteTheme";
 import rootStyles from "../../root.module.css";
 import { createBubbleMenuPlugin } from "./BubbleMenuPlugin";
 import { BubbleMenu } from "./component/BubbleMenu";
@@ -14,7 +16,12 @@ export const BubbleMenuExtension = Extension.create<{}>({
   addProseMirrorPlugins() {
     const element = document.createElement("div");
     element.className = rootStyles.bnRoot;
-    ReactDOM.render(<BubbleMenu editor={this.editor} />, element);
+    ReactDOM.render(
+      <MantineProvider theme={BlockNoteTheme}>
+        <BubbleMenu editor={this.editor} />
+      </MantineProvider>,
+      element
+    );
     return [
       createBubbleMenuPlugin({
         editor: this.editor,

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

@@ -1,4 +1,3 @@
-import DropdownMenu, { DropdownItemGroup } from "@atlaskit/dropdown-menu";
 import { Editor } from "@tiptap/core";
 import {
   RiBold,
@@ -15,13 +14,14 @@ import {
   RiText,
   RiUnderline,
 } from "react-icons/ri";
-import { SimpleToolbarButton } from "../../../shared/components/toolbar/SimpleToolbarButton";
+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 "../../helpers/formatKeyboardShortcut";
-import DropdownBlockItem from "./DropdownBlockItem";
+import { formatKeyboardShortcut } from "../../../utils";
 import LinkToolbarButton from "./LinkToolbarButton";
+import { IconType } from "react-icons";
 
 type ListType = "li" | "oli";
 
@@ -59,123 +59,151 @@ export const BubbleMenu = (props: { editor: Editor }) => {
     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>
-      <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={() =>
+      <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()
-                .focus()
                 .unsetList()
-                .setBlockHeading({ level: 1 })
-                .run()
-            }
-          />
-          <DropdownBlockItem
-            title="Heading 2"
-            icon={RiH2}
-            isSelected={currentBlockName === "Heading 2"}
-            onClick={() =>
+                .setBlockHeading({ level: "1" })
+                .run();
+            },
+            text: "Heading 1",
+            icon: RiH1,
+            isSelected: currentBlockName === "Heading 1",
+          },
+          {
+            onClick: () => {
+              props.editor.view.focus();
               props.editor
                 .chain()
-                .focus()
                 .unsetList()
-                .setBlockHeading({ level: 2 })
-                .run()
-            }
-          />
-          <DropdownBlockItem
-            title="Heading 3"
-            icon={RiH3}
-            isSelected={currentBlockName === "Heading 3"}
-            onClick={() =>
+                .setBlockHeading({ level: "2" })
+                .run();
+            },
+            text: "Heading 2",
+            icon: RiH2,
+            isSelected: currentBlockName === "Heading 2",
+          },
+          {
+            onClick: () => {
+              props.editor.view.focus();
               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={() =>
+                .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()
-                .focus()
                 .unsetBlockHeading()
                 .setBlockList("oli")
-                .run()
-            }
-          />
-        </DropdownItemGroup>
-      </DropdownMenu>
-      <SimpleToolbarButton
-        onClick={() => props.editor.chain().focus().toggleBold().run()}
+                .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}
       />
-      <SimpleToolbarButton
-        onClick={() => props.editor.chain().focus().toggleItalic().run()}
+      <ToolbarButton
+        onClick={() => {
+          props.editor.view.focus();
+          props.editor.commands.toggleItalic();
+        }}
         isSelected={props.editor.isActive("italic")}
         mainTooltip="Italic"
         secondaryTooltip={formatKeyboardShortcut("Mod+I")}
         icon={RiItalic}
       />
-      <SimpleToolbarButton
-        onClick={() => props.editor.chain().focus().toggleUnderline().run()}
+      <ToolbarButton
+        onClick={() => {
+          props.editor.view.focus();
+          props.editor.commands.toggleUnderline();
+        }}
         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")}
+      <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}
       />
-      <SimpleToolbarButton
-        onClick={() => props.editor.chain().focus().sinkListItem("block").run()}
+      <ToolbarButton
+        onClick={() => {
+          props.editor.view.focus();
+          props.editor.commands.sinkListItem("block");
+        }}
         isDisabled={!props.editor.can().sinkListItem("block")}
         mainTooltip="Indent"
         secondaryTooltip={formatKeyboardShortcut("Tab")}
         icon={RiIndentIncrease}
       />
 
-      <SimpleToolbarButton
-        onClick={() => props.editor.chain().focus().liftListItem("block").run()}
+      <ToolbarButton
+        onClick={() => {
+          props.editor.view.focus();
+          props.editor.commands.liftListItem("block");
+        }}
         isDisabled={
           !props.editor.can().command(({ state }) => {
             const block = findBlock(state.selection);
@@ -200,13 +228,13 @@ export const BubbleMenu = (props: { editor: Editor }) => {
         editor={props.editor}
       />
       {/* <SimpleBubbleMenuButton
-        editor={props.editor}
-        onClick={() => {
-          const comment = this.props.commentStore.createComment();
-          props.editor.chain().focus().setComment(comment.id).run();
-        }}
-        styleDetails={comment}
-      /> */}
+          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

@@ -2,12 +2,12 @@ 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";
+  ToolbarButton,
+  ToolbarButtonProps,
+} from "../../../shared/components/toolbar/ToolbarButton";
+import { EditHyperlinkMenu } from "../../Hyperlinks/menus/EditHyperlinkMenu";
 
-type Props = SimpleToolbarButtonProps & {
+type Props = ToolbarButtonProps & {
   editor: Editor;
 };
 
@@ -41,11 +41,11 @@ export const LinkToolbarButton = (props: Props) => {
       : "";
 
     setCreationMenu(
-      <HyperlinkEditMenu
+      <EditHyperlinkMenu
         key={Math.random() + ""} // Math.random to prevent old element from being re-used
         url={activeUrl}
         text={selectedText}
-        onSubmit={onSubmit}
+        update={onSubmit}
       />
     );
   }, [props.editor]);
@@ -59,7 +59,7 @@ export const LinkToolbarButton = (props: Props) => {
       }}
       interactive={true}
       maxWidth={500}>
-      <SimpleToolbarButton {...props} />
+      <ToolbarButton {...props} />
     </Tippy>
   );
 };

package/src/extensions/DraggableBlocks/DraggableBlocksPlugin.tsx

@@ -1,13 +1,19 @@
-import { NodeSelection, Plugin, PluginKey } from "prosemirror-state";
+import { NodeSelection, Plugin, PluginKey, Selection } from "prosemirror-state";
+import { Node } from "prosemirror-model";
 import * as pv from "prosemirror-view";
 import { EditorView } from "prosemirror-view";
 import ReactDOM from "react-dom";
 import { DragHandle } from "./components/DragHandle";
+import { MantineProvider } from "@mantine/core";
+import { BlockNoteTheme } from "../../BlockNoteTheme";
+import { MultipleNodeSelection } from "../Blocks/MultipleNodeSelection";
 
 const serializeForClipboard = (pv as any).__serializeForClipboard;
 // code based on https://github.com/ueberdosis/tiptap/issues/323#issuecomment-506637799
 
 let horizontalAnchor: number;
+let dragImageElement: Element | undefined;
+
 function getHorizontalAnchor() {
   if (!horizontalAnchor) {
     const firstBlockGroup = document.querySelector(
@@ -38,24 +44,6 @@ export function absoluteRect(element: HTMLElement) {
   return createRect(element.getBoundingClientRect());
 }
 
-function blockPosAtCoords(
-  coords: { left: number; top: number },
-  view: EditorView
-) {
-  let block = getDraggableBlockFromCoords(coords, view);
-
-  if (block && block.node.nodeType === 1) {
-    // TODO: this uses undocumented PM APIs? do we need this / let's add docs?
-    const docView = (view as any).docView;
-    let desc = docView.nearestDesc(block.node, true);
-    if (!desc || desc === docView) {
-      return null;
-    }
-    return desc.posBefore;
-  }
-  return null;
-}
-
 function getDraggableBlockFromCoords(
   coords: { left: number; top: number },
   view: EditorView
@@ -85,6 +73,107 @@ function getDraggableBlockFromCoords(
   return { node, id: node.getAttribute("data-id")! };
 }
 
+function blockPositionFromCoords(
+  coords: { left: number; top: number },
+  view: EditorView
+) {
+  let block = getDraggableBlockFromCoords(coords, view);
+
+  if (block && block.node.nodeType === 1) {
+    // TODO: this uses undocumented PM APIs? do we need this / let's add docs?
+    const docView = (view as any).docView;
+    let desc = docView.nearestDesc(block.node, true);
+    if (!desc || desc === docView) {
+      return null;
+    }
+    return desc.posBefore;
+  }
+  return null;
+}
+
+function blockPositionsFromSelection(
+  selection: Selection,
+  doc: Node
+) {
+  // Absolute positions just before the first block spanned by the selection, and just after the last block. Having the
+  // selection start and end just before and just after the target blocks ensures no whitespace/line breaks are left
+  // behind after dragging & dropping them.
+  let beforeFirstBlockPos: number;
+  let afterLastBlockPos: number;
+
+  // Even the user starts dragging blocks but drops them in the same place, the selection will still be moved just
+  // before & just after the blocks spanned by the selection, and therefore doesn't need to change if they try to drag
+  // the same blocks again. If this happens, the anchor & head move out of the block content node they were originally
+  // in. If the anchor should update but the head shouldn't and vice versa, it means the user selection is outside a
+  // block content node, which should never happen.
+  const selectionStartInBlockContent =
+    doc.resolve(selection.from).node().type.name === "content";
+  const selectionEndInBlockContent =
+    doc.resolve(selection.to).node().type.name === "content";
+
+  // Ensures that entire outermost nodes are selected if the selection spans multiple nesting levels.
+  const minDepth = Math.min(selection.$anchor.depth, selection.$head.depth);
+
+  if (selectionStartInBlockContent && selectionEndInBlockContent) {
+    // Absolute positions at the start of the first block in the selection and at the end of the last block. User
+    // selections will always start and end in block content nodes, but we want the start and end positions of their
+    // parent block nodes, which is why minDepth - 1 is used.
+    const startFirstBlockPos = selection.$from.start(minDepth - 1);
+    const endLastBlockPos = selection.$to.end(minDepth - 1);
+
+    // Shifting start and end positions by one moves them just outside the first and last selected blocks.
+    beforeFirstBlockPos = doc.resolve(startFirstBlockPos - 1).pos;
+    afterLastBlockPos = doc.resolve(endLastBlockPos + 1).pos;
+  } else {
+    beforeFirstBlockPos = selection.from;
+    afterLastBlockPos = selection.to;
+  }
+
+  return { from: beforeFirstBlockPos, to: afterLastBlockPos };
+}
+
+function setDragImage(view: EditorView, from: number, to = from) {
+  if (from === to) {
+    // Moves to position to be just after the first (and only) selected block.
+    to += view.state.doc.resolve(from + 1).node().nodeSize;
+  }
+
+  // Parent element is cloned to remove all unselected children without affecting the editor content.
+  const parentClone = view.domAtPos(from).node.cloneNode(true) as Element;
+  const parent = view.domAtPos(from).node as Element;
+
+  const getElementIndex = (parentElement: Element, targetElement: Element) =>
+    Array.prototype.indexOf.call(parentElement.children, targetElement);
+
+  const firstSelectedBlockIndex = getElementIndex(
+    parent,
+    // Expects from position to be just before the first selected block.
+    view.domAtPos(from + 1).node.parentElement!
+  );
+  const lastSelectedBlockIndex = getElementIndex(
+    parent,
+    // Expects to position to be just after the last selected block.
+    view.domAtPos(to - 1).node.parentElement!
+  );
+
+  for (let i = parent.childElementCount - 1; i >= 0; i--) {
+    if (i > lastSelectedBlockIndex || i < firstSelectedBlockIndex) {
+      parentClone.removeChild(parentClone.children[i]);
+    }
+  }
+
+  // dataTransfer.setDragImage(element) only works if element is attached to the DOM.
+  dragImageElement = parentClone;
+  document.body.appendChild(dragImageElement);
+}
+
+function unsetDragImage() {
+  if (dragImageElement !== undefined) {
+    document.body.removeChild(dragImageElement);
+    dragImageElement = undefined;
+  }
+}
+
 function dragStart(e: DragEvent, view: EditorView) {
   if (!e.dataTransfer) {
     return;
@@ -94,11 +183,30 @@ function dragStart(e: DragEvent, view: EditorView) {
     left: view.dom.clientWidth / 2, // take middle of editor
     top: e.clientY,
   };
-  let pos = blockPosAtCoords(coords, view);
+
+  let pos = blockPositionFromCoords(coords, view);
   if (pos != null) {
-    view.dispatch(
-      view.state.tr.setSelection(NodeSelection.create(view.state.doc, pos))
-    );
+    const selection = view.state.selection;
+    const doc = view.state.doc;
+
+    const { from, to } = blockPositionsFromSelection(selection, doc);
+
+    const draggedBlockInSelection = from <= pos && pos < to;
+    const multipleBlocksSelected = !selection.$anchor
+      .node()
+      .eq(selection.$head.node());
+
+    if (draggedBlockInSelection && multipleBlocksSelected) {
+      view.dispatch(
+        view.state.tr.setSelection(MultipleNodeSelection.create(doc, from, to))
+      );
+      setDragImage(view, from, to);
+    } else {
+      view.dispatch(
+        view.state.tr.setSelection(NodeSelection.create(view.state.doc, pos))
+      );
+      setDragImage(view, pos);
+    }
 
     let slice = view.state.selection.content();
     let { dom, text } = serializeForClipboard(view, slice);
@@ -107,8 +215,7 @@ function dragStart(e: DragEvent, view: EditorView) {
     e.dataTransfer.setData("text/html", dom.innerHTML);
     e.dataTransfer.setData("text/plain", text);
     e.dataTransfer.effectAllowed = "move";
-    const block = getDraggableBlockFromCoords(coords, view);
-    e.dataTransfer.setDragImage(block?.node as any, 0, 0);
+    e.dataTransfer.setDragImage(dragImageElement!, 0, 0);
     view.dragging = { slice, move: true };
   }
 }
@@ -147,6 +254,7 @@ export const createDraggableBlocksPlugin = () => {
       dropElement.addEventListener("dragstart", (e) =>
         dragStart(e, editorView)
       );
+      dropElement.addEventListener("dragend", () => unsetDragImage());
 
       return {
         // update(view, prevState) {},
@@ -248,14 +356,16 @@ export const createDraggableBlocksPlugin = () => {
           dropElement.style.top = rect.top + "px";
 
           ReactDOM.render(
-            <DragHandle
-              onShow={onShow}
-              onHide={onHide}
-              onAddClicked={onAddClicked}
-              key={block.id + ""}
-              view={view}
-              coords={coords}
-            />,
+            <MantineProvider theme={BlockNoteTheme}>
+              <DragHandle
+                onShow={onShow}
+                onHide={onHide}
+                onAddClicked={onAddClicked}
+                key={block.id + ""}
+                view={view}
+                coords={coords}
+              />
+            </MantineProvider>,
             dropElement
           );
           return true;