@blocknote/core 0.9.6 → 0.10.0

package/src/{BlockNoteExtensions.ts → editor/BlockNoteExtensions.ts}

@@ -1,45 +1,49 @@
 import { Extensions, extensions } from "@tiptap/core";
 
-import { BlockNoteEditor } from "./BlockNoteEditor";
+import type { BlockNoteEditor } from "./BlockNoteEditor";
 
-import { Bold } from "@tiptap/extension-bold";
-import { Code } from "@tiptap/extension-code";
 import Collaboration from "@tiptap/extension-collaboration";
 import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
 import { Dropcursor } from "@tiptap/extension-dropcursor";
 import { Gapcursor } from "@tiptap/extension-gapcursor";
 import { HardBreak } from "@tiptap/extension-hard-break";
 import { History } from "@tiptap/extension-history";
-import { Italic } from "@tiptap/extension-italic";
 import { Link } from "@tiptap/extension-link";
-import { Strike } from "@tiptap/extension-strike";
 import { Text } from "@tiptap/extension-text";
-import { Underline } from "@tiptap/extension-underline";
 import * as Y from "yjs";
-import styles from "./editor.module.css";
-import { BackgroundColorExtension } from "./extensions/BackgroundColor/BackgroundColorExtension";
-import { BackgroundColorMark } from "./extensions/BackgroundColor/BackgroundColorMark";
-import { BlockContainer, BlockGroup, Doc } from "./extensions/Blocks";
+import { createCopyToClipboardExtension } from "../api/exporters/copyExtension";
+import { createPasteFromClipboardExtension } from "../api/parsers/pasteExtension";
+import { BackgroundColorExtension } from "../extensions/BackgroundColor/BackgroundColorExtension";
+import { Placeholder } from "../extensions/Placeholder/PlaceholderExtension";
+import { TextAlignmentExtension } from "../extensions/TextAlignment/TextAlignmentExtension";
+import { TextColorExtension } from "../extensions/TextColor/TextColorExtension";
+import { TrailingNode } from "../extensions/TrailingNode/TrailingNodeExtension";
+import UniqueID from "../extensions/UniqueID/UniqueID";
+import { BlockContainer, BlockGroup, Doc } from "../pm-nodes";
 import {
   BlockNoteDOMAttributes,
   BlockSchema,
-} from "./extensions/Blocks/api/blockTypes";
-import { CustomBlockSerializerExtension } from "./extensions/Blocks/api/serialization";
-import blockStyles from "./extensions/Blocks/nodes/Block.module.css";
-import { Placeholder } from "./extensions/Placeholder/PlaceholderExtension";
-import { TextAlignmentExtension } from "./extensions/TextAlignment/TextAlignmentExtension";
-import { TextColorExtension } from "./extensions/TextColor/TextColorExtension";
-import { TextColorMark } from "./extensions/TextColor/TextColorMark";
-import { TrailingNode } from "./extensions/TrailingNode/TrailingNodeExtension";
-import UniqueID from "./extensions/UniqueID/UniqueID";
+  BlockSpecs,
+  InlineContentSchema,
+  InlineContentSpecs,
+  StyleSchema,
+  StyleSpecs,
+} from "../schema";
 
 /**
  * Get all the Tiptap extensions BlockNote is configured with by default
  */
-export const getBlockNoteExtensions = <BSchema extends BlockSchema>(opts: {
-  editor: BlockNoteEditor<BSchema>;
+export const getBlockNoteExtensions = <
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(opts: {
+  editor: BlockNoteEditor<BSchema, I, S>;
   domAttributes: Partial<BlockNoteDOMAttributes>;
   blockSchema: BSchema;
+  blockSpecs: BlockSpecs;
+  inlineContentSpecs: InlineContentSpecs;
+  styleSpecs: StyleSpecs;
   collaboration?: {
     fragment: Y.XmlFragment;
     user: {
@@ -62,9 +66,6 @@ export const getBlockNoteExtensions = <BSchema extends BlockSchema>(opts: {
 
     // DropCursor,
     Placeholder.configure({
-      emptyNodeClass: blockStyles.isEmpty,
-      hasAnchorClass: blockStyles.hasAnchor,
-      isFilterClass: blockStyles.isFilter,
       includeChildren: true,
       showOnlyCurrent: false,
     }),
@@ -78,33 +79,51 @@ export const getBlockNoteExtensions = <BSchema extends BlockSchema>(opts: {
     Text,
 
     // marks:
-    Bold,
-    Code,
-    Italic,
-    Strike,
-    Underline,
     Link,
-    TextColorMark,
+    ...Object.values(opts.styleSpecs).map((styleSpec) => {
+      return styleSpec.implementation.mark;
+    }),
+
     TextColorExtension,
-    BackgroundColorMark,
+
     BackgroundColorExtension,
     TextAlignmentExtension,
 
     // nodes
     Doc,
     BlockContainer.configure({
+      editor: opts.editor as any,
       domAttributes: opts.domAttributes,
     }),
     BlockGroup.configure({
       domAttributes: opts.domAttributes,
     }),
-    ...Object.values(opts.blockSchema).map((blockSpec) =>
-      blockSpec.node.configure({
-        editor: opts.editor,
-        domAttributes: opts.domAttributes,
-      })
-    ),
-    CustomBlockSerializerExtension,
+    ...Object.values(opts.inlineContentSpecs)
+      .filter((a) => a.config !== "link" && a.config !== "text")
+      .map((inlineContentSpec) => {
+        return inlineContentSpec.implementation!.node.configure({
+          editor: opts.editor as any,
+        });
+      }),
+
+    ...Object.values(opts.blockSpecs).flatMap((blockSpec) => {
+      return [
+        // dependent nodes (e.g.: tablecell / row)
+        ...(blockSpec.implementation.requiredExtensions || []).map((ext) =>
+          ext.configure({
+            editor: opts.editor,
+            domAttributes: opts.domAttributes,
+          })
+        ),
+        // the actual node itself
+        blockSpec.implementation.node.configure({
+          editor: opts.editor,
+          domAttributes: opts.domAttributes,
+        }),
+      ];
+    }),
+    createCopyToClipboardExtension(opts.editor),
+    createPasteFromClipboardExtension(opts.editor),
 
     Dropcursor.configure({ width: 5, color: "#ddeeff" }),
     // This needs to be at the bottom of this list, because Key events (such as enter, when selecting a /command),
@@ -122,12 +141,12 @@ export const getBlockNoteExtensions = <BSchema extends BlockSchema>(opts: {
       const defaultRender = (user: { color: string; name: string }) => {
         const cursor = document.createElement("span");
 
-        cursor.classList.add(styles["collaboration-cursor__caret"]);
+        cursor.classList.add("collaboration-cursor__caret");
         cursor.setAttribute("style", `border-color: ${user.color}`);
 
         const label = document.createElement("span");
 
-        label.classList.add(styles["collaboration-cursor__label"]);
+        label.classList.add("collaboration-cursor__label");
         label.setAttribute("style", `background-color: ${user.color}`);
         label.insertBefore(document.createTextNode(user.name), null);
 

package/src/editor/README.md

@@ -0,0 +1,3 @@
+### @blocknote/core/src/editor
+
+Contains main functions to set up the editor

package/src/editor/cursorPositionTypes.ts

@@ -0,0 +1,16 @@
+import {
+  Block,
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "../schema";
+
+export type TextCursorPosition<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+> = {
+  block: Block<BSchema, I, S>;
+  prevBlock: Block<BSchema, I, S> | undefined;
+  nextBlock: Block<BSchema, I, S> | undefined;
+};

package/src/{editor.module.css → editor/editor.css}

@@ -1,6 +1,6 @@
-@import url("./assets/fonts-inter.css");
+@import url("../assets/fonts-inter.css");
 
-.bnEditor {
+.bn-editor {
   outline: none;
   padding-inline: 54px;
 
@@ -11,31 +11,31 @@
 }
 
 /*
-bnRoot should be applied to all top-level elements
+bn-root should be applied to all top-level elements
 
 This includes the Prosemirror editor, but also <div> element such as 
 Tippy popups that are appended to document.body directly
 */
-.bnRoot {
+.bn-root {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 
-.bnRoot *,
-.bnRoot *::before,
-.bnRoot *::after {
+.bn-root *,
+.bn-root *::before,
+.bn-root *::after {
   -webkit-box-sizing: inherit;
   -moz-box-sizing: inherit;
   box-sizing: inherit;
 }
 
 /* reset styles, they will be set on blockContent */
-.defaultStyles p,
-.defaultStyles h1,
-.defaultStyles h2,
-.defaultStyles h3,
-.defaultStyles li {
+.bn-default-styles p,
+.bn-default-styles h1,
+.bn-default-styles h2,
+.bn-default-styles h3,
+.bn-default-styles li {
   all: unset;
   margin: 0;
   padding: 0;
@@ -44,7 +44,7 @@ Tippy popups that are appended to document.body directly
   min-width: 2px !important;
 }
 
-.defaultStyles {
+.bn-default-styles {
   font-size: 16px;
   font-weight: normal;
   font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont,
@@ -54,9 +54,16 @@ Tippy popups that are appended to document.body directly
   -moz-osx-font-smoothing: grayscale;
 }
 
-.dragPreview {
+.bn-table-drop-cursor {
   position: absolute;
-  top: -1000px;
+  z-index: 20;
+  background-color: #adf;
+  pointer-events: none;
+}
+
+.bn-drag-preview {
+  position: absolute;
+  left: -100000px;
 }
 
 /* Give a remote user a caret */
@@ -85,3 +92,23 @@ Tippy popups that are appended to document.body directly
   user-select: none;
   white-space: nowrap;
 }
+
+/* table related: */
+.bn-editor table {
+  width: auto !important;
+}
+.bn-editor th,
+.bn-editor td {
+  min-width: 1em;
+  border: 1px solid #ddd;
+  padding: 3px 5px;
+}
+
+.bn-editor .tableWrapper {
+  margin: 1em 0;
+}
+
+.bn-editor th {
+  font-weight: bold;
+  text-align: left;
+}

package/src/editor/selectionTypes.ts

@@ -0,0 +1,14 @@
+import {
+  Block,
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "../schema";
+
+export type Selection<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+> = {
+  blocks: Block<BSchema, I, S>[];
+};

package/src/editor/transformPasted.ts

@@ -0,0 +1,58 @@
+import { Fragment, Slice } from "@tiptap/pm/model";
+import { EditorView } from "@tiptap/pm/view";
+
+// helper function to remove a child from a fragment
+function removeChild(node: Fragment, n: number) {
+  const children: any[] = [];
+  node.forEach((child, _, i) => {
+    if (i !== n) {
+      children.push(child);
+    }
+  });
+  return Fragment.from(children);
+}
+
+/**
+ * fix for https://github.com/ProseMirror/prosemirror/issues/1430#issuecomment-1822570821
+ *
+ * Without this fix, pasting two paragraphs would cause the second one to be indented in the other
+ * this fix wraps every element in the slice in it's own blockContainer, to prevent Prosemirror from nesting the
+ * elements on paste.
+ *
+ * The exception is when we encounter blockGroups with listitems, because those actually should be nested
+ */
+export function transformPasted(slice: Slice, view: EditorView) {
+  let f = Fragment.from(slice.content);
+  for (let i = 0; i < f.childCount; i++) {
+    if (f.child(i).type.spec.group === "blockContent") {
+      const content = [f.child(i)];
+
+      // when there is a blockGroup with lists, it should be nested in the new blockcontainer
+      // (if we remove this if-block, the nesting bug will be fixed, but lists won't be nested correctly)
+      if (
+        i + 1 < f.childCount &&
+        f.child(i + 1).type.spec.group === "blockGroup"
+      ) {
+        const nestedChild = f
+          .child(i + 1)
+          .child(0)
+          .child(0);
+
+        if (
+          nestedChild.type.name === "bulletListItem" ||
+          nestedChild.type.name === "numberedListItem"
+        ) {
+          content.push(f.child(i + 1));
+          f = removeChild(f, i + 1);
+        }
+      }
+      const container = view.state.schema.nodes.blockContainer.create(
+        undefined,
+        content
+      );
+      f = f.replaceChild(i, container);
+    }
+  }
+
+  return new Slice(f, slice.openStart, slice.openEnd);
+}

package/src/extensions/BackgroundColor/BackgroundColorExtension.ts

@@ -1,17 +1,5 @@
 import { Extension } from "@tiptap/core";
-import { getBlockInfoFromPos } from "../Blocks/helpers/getBlockInfoFromPos";
-import { defaultProps } from "../Blocks/api/defaultProps";
-
-declare module "@tiptap/core" {
-  interface Commands<ReturnType> {
-    blockBackgroundColor: {
-      setBlockBackgroundColor: (
-        posInBlock: number,
-        color: string
-      ) => ReturnType;
-    };
-  }
-}
+import { defaultProps } from "../../blocks/defaultProps";
 
 export const BackgroundColorExtension = Extension.create({
   name: "blockBackgroundColor",
@@ -37,27 +25,4 @@ export const BackgroundColorExtension = Extension.create({
       },
     ];
   },
-
-  addCommands() {
-    return {
-      setBlockBackgroundColor:
-        (posInBlock, color) =>
-        ({ state, view }) => {
-          const blockInfo = getBlockInfoFromPos(state.doc, posInBlock);
-          if (blockInfo === undefined) {
-            return false;
-          }
-
-          state.tr.setNodeAttribute(
-            blockInfo.startPos - 1,
-            "backgroundColor",
-            color
-          );
-
-          view.focus();
-
-          return true;
-        },
-    };
-  },
 });

package/src/extensions/BackgroundColor/BackgroundColorMark.ts

@@ -1,24 +1,16 @@
 import { Mark } from "@tiptap/core";
-import { defaultProps } from "../Blocks/api/defaultProps";
+import { createStyleSpecFromTipTapMark } from "../../schema";
 
-declare module "@tiptap/core" {
-  interface Commands<ReturnType> {
-    backgroundColor: {
-      setBackgroundColor: (color: string) => ReturnType;
-    };
-  }
-}
-
-export const BackgroundColorMark = Mark.create({
+const BackgroundColorMark = Mark.create({
   name: "backgroundColor",
 
   addAttributes() {
     return {
-      color: {
+      stringValue: {
         default: undefined,
         parseHTML: (element) => element.getAttribute("data-background-color"),
         renderHTML: (attributes) => ({
-          "data-background-color": attributes.color,
+          "data-background-color": attributes.stringValue,
         }),
       },
     };
@@ -34,7 +26,9 @@ export const BackgroundColorMark = Mark.create({
           }
 
           if (element.hasAttribute("data-background-color")) {
-            return { color: element.getAttribute("data-background-color") };
+            return {
+              stringValue: element.getAttribute("data-background-color"),
+            };
           }
 
           return false;
@@ -46,18 +40,9 @@ export const BackgroundColorMark = Mark.create({
   renderHTML({ HTMLAttributes }) {
     return ["span", HTMLAttributes, 0];
   },
-
-  addCommands() {
-    return {
-      setBackgroundColor:
-        (color) =>
-        ({ commands }) => {
-          if (color !== defaultProps.backgroundColor.default) {
-            return commands.setMark(this.name, { color: color });
-          }
-
-          return commands.unsetMark(this.name);
-        },
-    };
-  },
 });
+
+export const BackgroundColor = createStyleSpecFromTipTapMark(
+  BackgroundColorMark,
+  "string"
+);

package/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -1,19 +1,20 @@
-import { isNodeSelection, isTextSelection, posToDOMRect } from "@tiptap/core";
+import { isNodeSelection, posToDOMRect } from "@tiptap/core";
 import { EditorState, Plugin, PluginKey } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
+
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
 import {
   BaseUiElementCallbacks,
   BaseUiElementState,
-  BlockNoteEditor,
-  BlockSchema,
-} from "../..";
-import { EventEmitter } from "../../shared/EventEmitter";
+} from "../../extensions-shared/BaseUiElementTypes";
+import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
+import { EventEmitter } from "../../util/EventEmitter";
 
 export type FormattingToolbarCallbacks = BaseUiElementCallbacks;
 
 export type FormattingToolbarState = BaseUiElementState;
 
-export class FormattingToolbarView<BSchema extends BlockSchema> {
+export class FormattingToolbarView {
   private formattingToolbarState?: FormattingToolbarState;
   public updateFormattingToolbar: () => void;
 
@@ -26,21 +27,14 @@ export class FormattingToolbarView<BSchema extends BlockSchema> {
     state: EditorState;
     from: number;
     to: number;
-  }) => boolean = ({ 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);
-
-    return !(!view.hasFocus() || empty || isEmptyTextBlock);
-  };
+  }) => boolean = ({ state }) => !state.selection.empty;
 
   constructor(
-    private readonly editor: BlockNoteEditor<BSchema>,
+    private readonly editor: BlockNoteEditor<
+      BlockSchema,
+      InlineContentSchema,
+      StyleSchema
+    >,
     private readonly pmView: EditorView,
     updateFormattingToolbar: (
       formattingToolbarState: FormattingToolbarState
@@ -216,13 +210,11 @@ export const formattingToolbarPluginKey = new PluginKey(
   "FormattingToolbarPlugin"
 );
 
-export class FormattingToolbarProsemirrorPlugin<
-  BSchema extends BlockSchema
-> extends EventEmitter<any> {
-  private view: FormattingToolbarView<BSchema> | undefined;
+export class FormattingToolbarProsemirrorPlugin extends EventEmitter<any> {
+  private view: FormattingToolbarView | undefined;
   public readonly plugin: Plugin;
 
-  constructor(editor: BlockNoteEditor<BSchema>) {
+  constructor(editor: BlockNoteEditor<any, any, any>) {
     super();
     this.plugin = new Plugin({
       key: formattingToolbarPluginKey,

package/src/extensions/HyperlinkToolbar/HyperlinkToolbarPlugin.ts

@@ -2,10 +2,10 @@ import { getMarkRange, posToDOMRect, Range } from "@tiptap/core";
 import { EditorView } from "@tiptap/pm/view";
 import { Mark } from "prosemirror-model";
 import { Plugin, PluginKey } from "prosemirror-state";
-import { BlockNoteEditor } from "../../BlockNoteEditor";
-import { BaseUiElementState } from "../../shared/BaseUiElementTypes";
-import { EventEmitter } from "../../shared/EventEmitter";
-import { BlockSchema } from "../Blocks/api/blockTypes";
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import { BaseUiElementState } from "../../extensions-shared/BaseUiElementTypes";
+import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
+import { EventEmitter } from "../../util/EventEmitter";
 
 export type HyperlinkToolbarState = BaseUiElementState & {
   // The hovered hyperlink's URL, and the text it's displayed with in the
@@ -14,11 +14,11 @@ export type HyperlinkToolbarState = BaseUiElementState & {
   text: string;
 };
 
-class HyperlinkToolbarView<BSchema extends BlockSchema> {
+class HyperlinkToolbarView {
   private hyperlinkToolbarState?: HyperlinkToolbarState;
   public updateHyperlinkToolbar: () => void;
 
-  menuUpdateTimer: NodeJS.Timeout | undefined;
+  menuUpdateTimer: ReturnType<typeof setTimeout> | undefined;
   startMenuUpdateTimer: () => void;
   stopMenuUpdateTimer: () => void;
 
@@ -32,7 +32,7 @@ class HyperlinkToolbarView<BSchema extends BlockSchema> {
   hyperlinkMarkRange: Range | undefined;
 
   constructor(
-    private readonly editor: BlockNoteEditor<BSchema>,
+    private readonly editor: BlockNoteEditor<any, any, any>,
     private readonly pmView: EditorView,
     updateHyperlinkToolbar: (
       hyperlinkToolbarState: HyperlinkToolbarState
@@ -275,12 +275,14 @@ export const hyperlinkToolbarPluginKey = new PluginKey(
 );
 
 export class HyperlinkToolbarProsemirrorPlugin<
-  BSchema extends BlockSchema
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
 > extends EventEmitter<any> {
-  private view: HyperlinkToolbarView<BSchema> | undefined;
+  private view: HyperlinkToolbarView | undefined;
   public readonly plugin: Plugin;
 
-  constructor(editor: BlockNoteEditor<BSchema>) {
+  constructor(editor: BlockNoteEditor<BSchema, I, S>) {
     super();
     this.plugin = new Plugin({
       key: hyperlinkToolbarPluginKey,