@blocknote/core 0.15.11 → 0.17.0

package/src/extensions/SideMenu/dragging.ts

@@ -0,0 +1,251 @@
+import { Node } from "prosemirror-model";
+import { NodeSelection, Selection } from "prosemirror-state";
+import * as pmView from "prosemirror-view";
+import { EditorView } from "prosemirror-view";
+
+import { createExternalHTMLExporter } from "../../api/exporters/html/externalHTMLExporter.js";
+import { cleanHTMLToMarkdown } from "../../api/exporters/markdown/markdownExporter.js";
+import { fragmentToBlocks } from "../../api/nodeConversions/fragmentToBlocks.js";
+import { Block } from "../../blocks/defaultBlocks.js";
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
+import { UiElementPosition } from "../../extensions-shared/UiElementPosition.js";
+import {
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "../../schema/index.js";
+import { MultipleNodeSelection } from "./MultipleNodeSelection.js";
+
+let dragImageElement: Element | undefined;
+
+export type SideMenuState<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+> = UiElementPosition & {
+  // The block that the side menu is attached to.
+  block: Block<BSchema, I, S>;
+};
+
+export function getDraggableBlockFromElement(
+  element: Element,
+  view: EditorView
+) {
+  while (
+    element &&
+    element.parentElement &&
+    element.parentElement !== view.dom &&
+    element.getAttribute?.("data-node-type") !== "blockContainer"
+  ) {
+    element = element.parentElement;
+  }
+  if (element.getAttribute?.("data-node-type") !== "blockContainer") {
+    return undefined;
+  }
+  return { node: element as HTMLElement, id: element.getAttribute("data-id")! };
+}
+
+function blockPositionFromElement(element: Element, view: EditorView) {
+  const block = getDraggableBlockFromElement(element, 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;
+    const 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.spec.group === "blockContent";
+  const selectionEndInBlockContent =
+    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);
+
+  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.
+  unsetDragImage(view.root);
+  dragImageElement = parentClone;
+
+  // TODO: This is hacky, need a better way of assigning classes to the editor so that they can also be applied to the
+  //  drag preview.
+  const classes = view.dom.className.split(" ");
+  const inheritedClasses = classes
+    .filter(
+      (className) =>
+        className !== "ProseMirror" &&
+        className !== "bn-root" &&
+        className !== "bn-editor"
+    )
+    .join(" ");
+
+  dragImageElement.className =
+    dragImageElement.className + " bn-drag-preview " + inheritedClasses;
+
+  if (view.root instanceof ShadowRoot) {
+    view.root.appendChild(dragImageElement);
+  } else {
+    view.root.body.appendChild(dragImageElement);
+  }
+}
+
+export function unsetDragImage(rootEl: Document | ShadowRoot) {
+  if (dragImageElement !== undefined) {
+    if (rootEl instanceof ShadowRoot) {
+      rootEl.removeChild(dragImageElement);
+    } else {
+      rootEl.body.removeChild(dragImageElement);
+    }
+
+    dragImageElement = undefined;
+  }
+}
+
+export function dragStart<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  e: { dataTransfer: DataTransfer | null; clientY: number },
+  editor: BlockNoteEditor<BSchema, I, S>
+) {
+  if (!e.dataTransfer) {
+    return;
+  }
+
+  const view = editor.prosemirrorView;
+
+  const editorBoundingBox = view.dom.getBoundingClientRect();
+
+  const coords = {
+    left: editorBoundingBox.left + editorBoundingBox.width / 2, // take middle of editor
+    top: e.clientY,
+  };
+
+  const elements = view.root.elementsFromPoint(coords.left, coords.top);
+  let blockEl = undefined;
+
+  for (const element of elements) {
+    if (view.dom.contains(element)) {
+      blockEl = getDraggableBlockFromElement(element, view);
+      break;
+    }
+  }
+
+  if (!blockEl) {
+    return;
+  }
+
+  const pos = blockPositionFromElement(blockEl.node, view);
+  if (pos != null) {
+    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() !== selection.$head.node() ||
+      selection instanceof MultipleNodeSelection;
+
+    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);
+    }
+
+    const selectedSlice = view.state.selection.content();
+    const schema = editor.pmSchema;
+
+    const clipboardHTML = (pmView as any).__serializeForClipboard(
+      view,
+      selectedSlice
+    ).dom.innerHTML;
+
+    const externalHTMLExporter = createExternalHTMLExporter(schema, editor);
+
+    const blocks = fragmentToBlocks(selectedSlice.content, editor.schema);
+    const externalHTML = externalHTMLExporter.exportBlocks(blocks, {});
+
+    const plainText = cleanHTMLToMarkdown(externalHTML);
+
+    e.dataTransfer.clearData();
+    e.dataTransfer.setData("blocknote/html", clipboardHTML);
+    e.dataTransfer.setData("text/html", externalHTML);
+    e.dataTransfer.setData("text/plain", plainText);
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setDragImage(dragImageElement!, 0, 0);
+    view.dragging = { slice: selectedSlice, move: true };
+  }
+}

package/src/extensions/SuggestionMenu/DefaultSuggestionItem.ts

@@ -1,4 +1,4 @@
-import type { Dictionary } from "../../i18n/dictionary";
+import type { Dictionary } from "../../i18n/dictionary.js";
 
 export type DefaultSuggestionItem = {
   key: keyof Dictionary["slash_menu"];

package/src/extensions/SuggestionMenu/SuggestionPlugin.ts

@@ -2,10 +2,14 @@ import { findParentNode } from "@tiptap/core";
 import { EditorState, Plugin, PluginKey } from "prosemirror-state";
 import { Decoration, DecorationSet, EditorView } from "prosemirror-view";
 
-import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
-import { UiElementPosition } from "../../extensions-shared/UiElementPosition";
-import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
-import { EventEmitter } from "../../util/EventEmitter";
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
+import { UiElementPosition } from "../../extensions-shared/UiElementPosition.js";
+import {
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "../../schema/index.js";
+import { EventEmitter } from "../../util/EventEmitter.js";
 
 const findBlock = findParentNode((node) => node.type.name === "blockContainer");
 

package/src/extensions/SuggestionMenu/getDefaultEmojiPickerItems.ts

@@ -1,9 +1,13 @@
 import type { Emoji, EmojiMartData } from "@emoji-mart/data";
 
-import { checkDefaultInlineContentTypeInSchema } from "../../blocks/defaultBlockTypeGuards";
-import { BlockNoteEditor } from "../../editor/BlockNoteEditor";
-import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
-import { DefaultGridSuggestionItem } from "./DefaultGridSuggestionItem";
+import { checkDefaultInlineContentTypeInSchema } from "../../blocks/defaultBlockTypeGuards.js";
+import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
+import {
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "../../schema/index.js";
+import { DefaultGridSuggestionItem } from "./DefaultGridSuggestionItem.js";
 
 let data:
   | Promise<{

package/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts

@@ -1,15 +1,15 @@
-import { Block, PartialBlock } from "../../blocks/defaultBlocks";
-import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import { Block, PartialBlock } from "../../blocks/defaultBlocks.js";
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
 
-import { checkDefaultBlockTypeInSchema } from "../../blocks/defaultBlockTypeGuards";
+import { checkDefaultBlockTypeInSchema } from "../../blocks/defaultBlockTypeGuards.js";
 import {
   BlockSchema,
   InlineContentSchema,
   StyleSchema,
   isStyledTextInlineContent,
-} from "../../schema";
-import { formatKeyboardShortcut } from "../../util/browser";
-import { DefaultSuggestionItem } from "./DefaultSuggestionItem";
+} from "../../schema/index.js";
+import { formatKeyboardShortcut } from "../../util/browser.js";
+import { DefaultSuggestionItem } from "./DefaultSuggestionItem.js";
 
 // Sets the editor's text cursor position to the next content editable block,
 // so either a block with inline content or a table. The last block is always a
@@ -51,6 +51,8 @@ export function insertOrUpdateBlock<
     throw new Error("Slash Menu open in a block that doesn't contain content.");
   }
 
+  let newBlock: Block<BSchema, I, S>;
+
   if (
     Array.isArray(currentBlock.content) &&
     ((currentBlock.content.length === 1 &&
@@ -59,19 +61,21 @@ export function insertOrUpdateBlock<
       currentBlock.content[0].text === "/") ||
       currentBlock.content.length === 0)
   ) {
-    editor.updateBlock(currentBlock, block);
+    newBlock = editor.updateBlock(currentBlock, block);
+
+    // Edge case for updating block content as `updateBlock` causes the
+    // selection to move into the next block, so we have to set it back.
+    if (block.content) {
+      editor.setTextCursorPosition(newBlock);
+    }
   } else {
-    editor.insertBlocks([block], currentBlock, "after");
-    editor.setTextCursorPosition(
-      editor.getTextCursorPosition().nextBlock!,
-      "end"
-    );
+    newBlock = editor.insertBlocks([block], currentBlock, "after")[0];
+    editor.setTextCursorPosition(editor.getTextCursorPosition().nextBlock!);
   }
 
-  const insertedBlock = editor.getTextCursorPosition().block;
   setSelectionToNextContentEditableBlock(editor);
 
-  return insertedBlock;
+  return newBlock;
 }
 
 export function getDefaultSlashMenuItems<
@@ -266,7 +270,7 @@ export function getDefaultSlashMenuItems<
           })
         );
       },
-      key: "image",
+      key: "file",
       ...editor.dictionary.slash_menu.file,
     });
   }

package/src/extensions/TableHandles/TableHandlesPlugin.ts

@@ -1,17 +1,17 @@
 import { Plugin, PluginKey, PluginView } from "prosemirror-state";
 import { Decoration, DecorationSet, EditorView } from "prosemirror-view";
-import { nodeToBlock } from "../../api/nodeConversions/nodeConversions";
-import { checkBlockIsDefaultType } from "../../blocks/defaultBlockTypeGuards";
-import { Block, DefaultBlockSchema } from "../../blocks/defaultBlocks";
-import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import { nodeToBlock } from "../../api/nodeConversions/nodeToBlock.js";
+import { checkBlockIsDefaultType } from "../../blocks/defaultBlockTypeGuards.js";
+import { Block, DefaultBlockSchema } from "../../blocks/defaultBlocks.js";
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
 import {
   BlockFromConfigNoChildren,
   BlockSchemaWithBlock,
   InlineContentSchema,
   StyleSchema,
-} from "../../schema";
-import { EventEmitter } from "../../util/EventEmitter";
-import { getDraggableBlockFromElement } from "../SideMenu/SideMenuPlugin";
+} from "../../schema/index.js";
+import { EventEmitter } from "../../util/EventEmitter.js";
+import { getDraggableBlockFromElement } from "../SideMenu/dragging.js";
 
 let dragImageElement: HTMLElement | undefined;
 
@@ -387,6 +387,10 @@ export class TableHandlesView<
         rows: rows,
       },
     });
+
+    // Have to reset text cursor position to the block as `updateBlock` moves
+    // the existing selection out of the block.
+    this.editor.setTextCursorPosition(this.state.block.id);
   };
 
   scrollHandler = () => {

package/src/extensions/TextColor/TextColorExtension.ts

@@ -1,5 +1,5 @@
 import { Extension } from "@tiptap/core";
-import { defaultProps } from "../../blocks/defaultProps";
+import { defaultProps } from "../../blocks/defaultProps.js";
 
 export const TextColorExtension = Extension.create({
   name: "blockTextColor",

package/src/extensions/TextColor/TextColorMark.ts

@@ -1,5 +1,5 @@
 import { Mark } from "@tiptap/core";
-import { createStyleSpecFromTipTapMark } from "../../schema";
+import { createStyleSpecFromTipTapMark } from "../../schema/index.js";
 
 const TextColorMark = Mark.create({
   name: "textColor",

package/src/i18n/dictionary.ts

@@ -1,7 +1,7 @@
 // function scramble(dict: any) {
 //   const newDict: any = {} as any;
 
-import type { en } from "./locales";
+import type { en } from "./locales/index.js";
 
 //   for (const key in dict) {
 //     if (typeof dict[key] === "object") {

package/src/i18n/locales/ar.ts

@@ -1,4 +1,4 @@
-import type { Dictionary } from "../dictionary";
+import type { Dictionary } from "../dictionary.js";
 
 export const ar: Dictionary = {
   slash_menu: {

package/src/i18n/locales/fr.ts

@@ -1,4 +1,4 @@
-import { Dictionary } from "../dictionary";
+import { Dictionary } from "../dictionary.js";
 
 export const fr: Dictionary = {
   slash_menu: {