@blocknote/core 0.1.2 → 0.2.0

package/src/extensions/DraggableBlocks/{DraggableBlocksPlugin.tsx → DraggableBlocksPlugin.ts}

@@ -1,12 +1,19 @@
-import { NodeSelection, Plugin, PluginKey, Selection } from "prosemirror-state";
+import { Editor } from "@tiptap/core";
 import { Node } from "prosemirror-model";
+import { NodeSelection, Plugin, PluginKey, Selection } from "prosemirror-state";
 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";
+import { DraggableBlocksOptions } from "./DraggableBlocksExtension";
+import {
+  BlockSideMenu,
+  BlockSideMenuDynamicParams,
+  BlockSideMenuFactory,
+  BlockSideMenuStaticParams,
+} from "./BlockSideMenuFactoryTypes";
+import { getBlockInfoFromPos } from "../Blocks/helpers/getBlockInfoFromPos";
+import { SlashMenuPluginKey } from "../SlashMenu/SlashMenuExtension";
+import styles from "../../editor.module.css";
 
 const serializeForClipboard = (pv as any).__serializeForClipboard;
 // code based on https://github.com/ueberdosis/tiptap/issues/323#issuecomment-506637799
@@ -91,10 +98,7 @@ function blockPositionFromCoords(
   return null;
 }
 
-function blockPositionsFromSelection(
-  selection: Selection,
-  doc: Node
-) {
+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.
@@ -107,9 +111,9 @@ function blockPositionsFromSelection(
   // 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";
+    doc.resolve(selection.from).node().type.spec.group === "blockContent";
   const selectionEndInBlockContent =
-    doc.resolve(selection.to).node().type.name === "content";
+    doc.resolve(selection.to).node().type.spec.group === "blockContent";
 
   // Ensures that entire outermost nodes are selected if the selection spans multiple nesting levels.
   const minDepth = Math.min(selection.$anchor.depth, selection.$head.depth);
@@ -164,6 +168,7 @@ function setDragImage(view: EditorView, from: number, to = from) {
 
   // dataTransfer.setDragImage(element) only works if element is attached to the DOM.
   dragImageElement = parentClone;
+  dragImageElement.className = styles.dragPreview;
   document.body.appendChild(dragImageElement);
 }
 
@@ -220,157 +225,232 @@ function dragStart(e: DragEvent, view: EditorView) {
   }
 }
 
-export const createDraggableBlocksPlugin = () => {
-  let dropElement: HTMLElement | undefined;
+export type BlockMenuViewProps = {
+  editor: Editor;
+  blockMenuFactory: BlockSideMenuFactory;
+  horizontalPosAnchoredAtRoot: boolean;
+};
 
-  const WIDTH = 48;
+export class BlockMenuView {
+  editor: Editor;
 
   // When true, the drag handle with be anchored at the same level as root elements
   // When false, the drag handle with be just to the left of the element
-  const horizontalPosAnchoredAtRoot = true;
+  horizontalPosAnchoredAtRoot: boolean;
 
-  let menuShown = false;
-  let addClicked = false;
+  blockMenu: BlockSideMenu;
 
-  const onShow = () => {
-    menuShown = true;
-  };
-  const onHide = () => {
-    menuShown = false;
-  };
-  const onAddClicked = () => {
-    addClicked = true;
-  };
+  hoveredBlock: HTMLElement | undefined;
 
-  return new Plugin({
-    key: new PluginKey("DraggableBlocksPlugin"),
-    view(editorView) {
-      dropElement = document.createElement("div");
-      dropElement.setAttribute("draggable", "true");
-      dropElement.style.position = "absolute";
-      dropElement.style.height = "24px"; // default height
-      document.body.append(dropElement);
-
-      dropElement.addEventListener("dragstart", (e) =>
-        dragStart(e, editorView)
-      );
-      dropElement.addEventListener("dragend", () => unsetDragImage());
+  menuOpen = false;
+  menuFrozen = false;
+
+  constructor({
+    editor,
+    blockMenuFactory,
+    horizontalPosAnchoredAtRoot,
+  }: BlockMenuViewProps) {
+    this.editor = editor;
+    this.horizontalPosAnchoredAtRoot = horizontalPosAnchoredAtRoot;
+
+    this.blockMenu = blockMenuFactory(this.getStaticParams());
 
-      return {
-        // update(view, prevState) {},
-        destroy() {
-          if (!dropElement) {
-            throw new Error("unexpected");
+    // Shows or updates menu position whenever the cursor moves, if the menu isn't frozen.
+    document.body.addEventListener(
+      "mousemove",
+      (event) => {
+        if (this.menuFrozen) {
+          return;
+        }
+
+        // Gets block at mouse cursor's vertical position.
+        const coords = {
+          left: this.editor.view.dom.clientWidth / 2, // take middle of editor
+          top: event.clientY,
+        };
+        const block = getDraggableBlockFromCoords(coords, this.editor.view);
+
+        // Closes the menu if the mouse cursor is beyond the editor vertically.
+        if (!block) {
+          if (this.menuOpen) {
+            this.menuOpen = false;
+            this.blockMenu.hide();
           }
-          dropElement.parentNode!.removeChild(dropElement);
-          dropElement = undefined;
-        },
-      };
-    },
-    props: {
-      // handleDOMEvents: {
-
-      // },
-      //   handleDOMEvents: {
-      //     dragend(view, event) {
-      //       //   setTimeout(() => {
-      //       //     let node = document.querySelector(".ProseMirror-hideselection");
-      //       //     if (node) {
-      //       //       node.classList.remove("ProseMirror-hideselection");
-      //       //     }
-      //       //   }, 50);
-      //       return true;
-      //     },
-      handleKeyDown(_view, _event) {
-        if (!dropElement) {
-          throw new Error("unexpected");
+
+          return;
+        }
+
+        // Doesn't update if the menu is already open and the mouse cursor is still hovering the same block.
+        if (
+          this.menuOpen &&
+          this.hoveredBlock?.hasAttribute("data-id") &&
+          this.hoveredBlock?.getAttribute("data-id") === block.id
+        ) {
+          return;
+        }
+
+        // Gets the block's content node, which lets to ignore child blocks when determining the block menu's position.
+        const blockContent = block.node.firstChild as HTMLElement;
+        this.hoveredBlock = blockContent;
+
+        if (!blockContent) {
+          return;
+        }
+
+        // Shows or updates elements.
+        if (!this.menuOpen) {
+          this.menuOpen = true;
+          this.blockMenu.render(this.getDynamicParams(), true);
+        } else {
+          this.blockMenu.render(this.getDynamicParams(), false);
         }
-        menuShown = false;
-        addClicked = false;
-        ReactDOM.render(<></>, dropElement);
-        return false;
       },
-      handleDOMEvents: {
-        // drag(view, event) {
-        //   // event.dataTransfer!.;
-        //   return false;
-        // },
-        mouseleave(_view, _event: any) {
-          if (!dropElement) {
-            throw new Error("unexpected");
-          }
-          // TODO
-          // dropElement.style.display = "none";
-          return true;
-        },
-        mousedown(_view, _event: any) {
-          if (!dropElement) {
-            throw new Error("unexpected");
-          }
-          menuShown = false;
-          addClicked = false;
-          ReactDOM.render(<></>, dropElement);
-          return false;
-        },
-        mousemove(view, event: any) {
-          if (!dropElement) {
-            throw new Error("unexpected");
-          }
+      true
+    );
+
+    // Hides and unfreezes the menu whenever the user selects the editor with the mouse or presses a key.
+    // TODO: Better integration with suggestions menu and only editor scope?
+    document.body.addEventListener(
+      "mousedown",
+      (event) => {
+        if (this.blockMenu.element?.contains(event.target as HTMLElement)) {
+          return;
+        }
 
-          if (menuShown || addClicked) {
-            // The submenu is open, don't move draghandle
-            // Or if the user clicked the add button
-            return true;
-          }
-          const coords = {
-            left: view.dom.clientWidth / 2, // take middle of editor
-            top: event.clientY,
-          };
-          const block = getDraggableBlockFromCoords(coords, view);
-
-          if (!block) {
-            console.warn("Perhaps we should hide element?");
-            return true;
-          }
+        if (this.menuOpen) {
+          this.menuOpen = false;
+          this.blockMenu.hide();
+        }
 
-          // I want the dim of the blocks content node
-          // because if the block contains other blocks
-          // Its dims change, moving the position of the drag handle
-          const blockContent = block.node.firstChild as HTMLElement;
+        this.menuFrozen = false;
+      },
+      true
+    );
+    document.body.addEventListener(
+      "keydown",
+      () => {
+        if (this.menuOpen) {
+          this.menuOpen = false;
+          this.blockMenu.hide();
+        }
 
-          if (!blockContent) {
-            return true;
-          }
+        this.menuFrozen = false;
+      },
+      true
+    );
+  }
+
+  destroy() {
+    if (this.menuOpen) {
+      this.menuOpen = false;
+      this.blockMenu.hide();
+    }
+  }
+
+  addBlock() {
+    this.menuOpen = false;
+    this.menuFrozen = true;
+    this.blockMenu.hide();
+
+    const blockBoundingBox = this.hoveredBlock!.getBoundingClientRect();
+
+    const pos = this.editor.view.posAtCoords({
+      left: blockBoundingBox.left,
+      top: blockBoundingBox.top,
+    });
+    if (!pos) {
+      return;
+    }
+
+    const blockInfo = getBlockInfoFromPos(this.editor.state.doc, pos.pos);
+    if (blockInfo === undefined) {
+      return;
+    }
+
+    const { contentNode, endPos } = blockInfo;
 
-          const rect = absoluteRect(blockContent);
-          const win = block.node.ownerDocument.defaultView!;
-          const dropElementRect = dropElement.getBoundingClientRect();
-          const left =
-            (horizontalPosAnchoredAtRoot ? getHorizontalAnchor() : rect.left) -
-            WIDTH +
-            win.pageXOffset;
-          rect.top +=
-            rect.height / 2 - dropElementRect.height / 2 + win.pageYOffset;
-
-          dropElement.style.left = left + "px";
-          dropElement.style.top = rect.top + "px";
-
-          ReactDOM.render(
-            <MantineProvider theme={BlockNoteTheme}>
-              <DragHandle
-                onShow={onShow}
-                onHide={onHide}
-                onAddClicked={onAddClicked}
-                key={block.id + ""}
-                view={view}
-                coords={coords}
-              />
-            </MantineProvider>,
-            dropElement
-          );
-          return true;
-        },
+    // Creates a new block if current one is not empty for the suggestion menu to open in.
+    if (contentNode.textContent.length !== 0) {
+      const newBlockInsertionPos = endPos + 1;
+      const newBlockContentPos = newBlockInsertionPos + 2;
+
+      this.editor
+        .chain()
+        .BNCreateBlock(newBlockInsertionPos)
+        .BNSetContentType(newBlockContentPos, { name: "textContent" })
+        .setTextSelection(newBlockContentPos)
+        .run();
+    }
+
+    // Focuses and activates the suggestion menu.
+    this.editor.view.focus();
+    this.editor.view.dispatch(
+      this.editor.view.state.tr.scrollIntoView().setMeta(SlashMenuPluginKey, {
+        // TODO import suggestion plugin key
+        activate: true,
+        type: "drag",
+      })
+    );
+  }
+
+  deleteBlock() {
+    this.menuOpen = false;
+    this.blockMenu.hide();
+
+    const blockBoundingBox = this.hoveredBlock!.getBoundingClientRect();
+
+    const pos = this.editor.view.posAtCoords({
+      left: blockBoundingBox.left,
+      top: blockBoundingBox.top,
+    });
+    if (!pos) {
+      return;
+    }
+
+    this.editor.commands.BNDeleteBlock(pos.pos);
+  }
+
+  getStaticParams(): BlockSideMenuStaticParams {
+    return {
+      addBlock: () => this.addBlock(),
+      deleteBlock: () => this.deleteBlock(),
+      blockDragStart: (event: DragEvent) => dragStart(event, this.editor.view),
+      blockDragEnd: () => unsetDragImage(),
+      freezeMenu: () => {
+        this.menuFrozen = true;
+      },
+      unfreezeMenu: () => {
+        this.menuFrozen = false;
       },
-    },
+    };
+  }
+
+  getDynamicParams(): BlockSideMenuDynamicParams {
+    const blockBoundingBox = this.hoveredBlock!.getBoundingClientRect();
+
+    return {
+      blockBoundingBox: new DOMRect(
+        this.horizontalPosAnchoredAtRoot
+          ? getHorizontalAnchor()
+          : blockBoundingBox.x,
+        blockBoundingBox.y,
+        blockBoundingBox.width,
+        blockBoundingBox.height
+      ),
+    };
+  }
+}
+
+export const createDraggableBlocksPlugin = (
+  options: DraggableBlocksOptions
+) => {
+  return new Plugin({
+    key: new PluginKey("DraggableBlocksPlugin"),
+    view: () =>
+      new BlockMenuView({
+        editor: options.editor,
+        blockMenuFactory: options.blockSideMenuFactory,
+        horizontalPosAnchoredAtRoot: true,
+      }),
   });
 };

package/src/extensions/FormattingToolbar/FormattingToolbarExtension.ts

@@ -0,0 +1,29 @@
+import { Extension } from "@tiptap/core";
+import { PluginKey } from "prosemirror-state";
+import { FormattingToolbarFactory } from "./FormattingToolbarFactoryTypes";
+import { createFormattingToolbarPlugin } from "./FormattingToolbarPlugin";
+
+/**
+ * The menu that is displayed when selecting a piece of text.
+ */
+export const FormattingToolbarExtension = Extension.create<{
+  formattingToolbarFactory: FormattingToolbarFactory;
+}>({
+  name: "FormattingToolbarExtension",
+
+  addProseMirrorPlugins() {
+    if (!this.options.formattingToolbarFactory) {
+      throw new Error(
+        "UI Element factory not defined for FormattingToolbarExtension"
+      );
+    }
+
+    return [
+      createFormattingToolbarPlugin({
+        editor: this.editor,
+        formattingToolbarFactory: this.options.formattingToolbarFactory,
+        pluginKey: new PluginKey("FormattingToolbarPlugin"),
+      }),
+    ];
+  },
+});

package/src/extensions/FormattingToolbar/FormattingToolbarFactoryTypes.ts

@@ -0,0 +1,35 @@
+import { EditorElement, ElementFactory } from "../../shared/EditorElement";
+import { BlockContentType } from "../Blocks/nodes/Block";
+
+export type FormattingToolbarStaticParams = {
+  toggleBold: () => void;
+  toggleItalic: () => void;
+  toggleUnderline: () => void;
+  toggleStrike: () => void;
+  setHyperlink: (url: string, text?: string) => void;
+
+  setBlockType: (type: BlockContentType) => void;
+};
+
+export type FormattingToolbarDynamicParams = {
+  boldIsActive: boolean;
+  italicIsActive: boolean;
+  underlineIsActive: boolean;
+  strikeIsActive: boolean;
+  hyperlinkIsActive: boolean;
+  activeHyperlinkUrl: string;
+  activeHyperlinkText: string;
+
+  // BlockContentType is mostly used to set a block's type, so the attr field is optional as block content types have
+  // default values for attributes. However, it means that a block type's attributes field will never be undefined due to
+  // these default values, which the Required type enforces.
+  activeBlockType: Required<BlockContentType>;
+
+  selectionBoundingBox: DOMRect;
+};
+
+export type FormattingToolbar = EditorElement<FormattingToolbarDynamicParams>;
+export type FormattingToolbarFactory = ElementFactory<
+  FormattingToolbarStaticParams,
+  FormattingToolbarDynamicParams
+>;