@blocknote/core 0.1.1 → 0.2.0

package/types/src/utils.d.ts

@@ -1,2 +1,2 @@
-export declare const isAppleOS: () => boolean;
-export declare function formatKeyboardShortcut(shortcut: string): string;
+export const isAppleOS: () => boolean;
+export function formatKeyboardShortcut(shortcut: string): string;

package/src/BlockNoteTheme.ts

@@ -1,150 +0,0 @@
-import { MantineThemeOverride } from "@mantine/core";
-
-export const BlockNoteTheme: MantineThemeOverride = {
-  activeStyles: {
-    // Removes button press effect.
-    transform: "none",
-  },
-  colorScheme: "light",
-  colors: {
-    brandFinal: [
-      "#F6F6F8",
-      "#ECEDF0",
-      "#DFE1E6",
-      "#C2C7D0",
-      "#A6ADBA",
-      "#8993A4",
-      "#6D798F",
-      "#505F79",
-      "#344563",
-      "#172B4D",
-    ],
-  },
-  components: {
-    Menu: {
-      styles: (theme) => ({
-        dropdown: {
-          backgroundColor: "white",
-          boxShadow: `0px 4px 8px ${theme.colors.brandFinal[2]}, 0px 0px 1px ${theme.colors.brandFinal[2]}`,
-          border: `1px solid ${theme.colors.brandFinal[1]}`,
-          borderRadius: "6px",
-          padding: "2px",
-        },
-      }),
-    },
-    DragHandleMenu: {
-      styles: (theme) => ({
-        root: {
-          ".mantine-Menu-item": {
-            color: theme.colors.brandFinal,
-            fontSize: "12px",
-            height: "34px",
-          },
-        },
-      }),
-    },
-    EditHyperlinkMenu: {
-      styles: (theme) => ({
-        root: {
-          backgroundColor: "white",
-          boxShadow: `0px 4px 8px ${theme.colors.brandFinal[2]}, 0px 0px 1px ${theme.colors.brandFinal[2]}`,
-          border: `1px solid ${theme.colors.brandFinal[1]}`,
-          borderRadius: "6px",
-          gap: "4px",
-          minWidth: "145px",
-          padding: "2px",
-          // Row
-          ".mantine-Group-root": {
-            flexWrap: "nowrap",
-            gap: "8px",
-            paddingInline: "6px",
-            // Row icon
-            ".mantine-Container-root": {
-              color: theme.colors.brandFinal,
-              display: "flex",
-              justifyContent: "center",
-              padding: "0",
-              width: "fit-content",
-            },
-            // Row input field
-            ".mantine-TextInput-root": {
-              background: "transparent",
-              width: "300px",
-              ".mantine-TextInput-wrapper": {
-                ".mantine-TextInput-input": {
-                  fontSize: "12px",
-                  border: 0,
-                  padding: 0,
-                },
-              },
-            },
-          },
-        },
-      }),
-    },
-    Toolbar: {
-      styles: (theme) => ({
-        root: {
-          backgroundColor: "white",
-          boxShadow: `0px 4px 8px ${theme.colors.brandFinal[2]}, 0px 0px 1px ${theme.colors.brandFinal[2]}`,
-          border: `1px solid ${theme.colors.brandFinal[1]}`,
-          borderRadius: "6px",
-          flexWrap: "nowrap",
-          gap: "2px",
-          padding: "2px",
-          width: "fit-content",
-          // Button (including dropdown target)
-          ".mantine-UnstyledButton-root": {
-            borderRadius: "4px",
-          },
-          // Dropdown
-          ".mantine-Menu-dropdown": {
-            // Dropdown item
-            ".mantine-Menu-item": {
-              color: theme.colors.brandFinal,
-              fontSize: "12px",
-              height: "34px",
-              ".mantine-Menu-itemRightSection": {
-                paddingLeft: "5px",
-              },
-            },
-          },
-        },
-      }),
-    },
-    SuggestionList: {
-      styles: (theme) => ({
-        root: {
-          // ...theme.other.defaultMenuStyles(theme),
-          ".mantine-Menu-item": {
-            // Icon
-            ".mantine-Menu-itemIcon": {
-              padding: "8px",
-              border: `1px solid ${theme.colors.brandFinal[2]}`,
-              backgroundColor: theme.colors.brandFinal[0],
-              borderRadius: "4px",
-              color: theme.colors.brandFinal,
-            },
-            // Text
-            ".mantine-Menu-itemLabel": {
-              color: theme.colors.brandFinal,
-              paddingRight: "16px",
-              ".mantine-Stack-root": {
-                gap: "0",
-              },
-            },
-            // Badge (keyboard shortcut)
-            ".mantine-Menu-itemRightSection": {
-              ".mantine-Badge-root": {
-                border: `1px solid ${theme.colors.brandFinal[2]}`,
-              },
-            },
-          },
-        },
-      }),
-    },
-  },
-  fontFamily: "Inter",
-  primaryColor: "brandFinal",
-  primaryShade: 9,
-};

package/src/EditorContent.tsx

@@ -1,2 +0,0 @@
-// BlockNote uses a similar pattern as Tiptap, so for now we can just export that
-export { EditorContent } from "@tiptap/react";

package/src/extensions/Blocks/OrderedListPlugin.ts

@@ -1,46 +0,0 @@
-import { Plugin, PluginKey } from "prosemirror-state";
-
-const PLUGIN_KEY = new PluginKey(`ordered-list`);
-
-export const OrderedListPlugin = () => {
-  return new Plugin({
-    key: PLUGIN_KEY,
-    appendTransaction: (_transactions, _oldState, newState) => {
-      const newTr = newState.tr;
-      let modified = false;
-      let count = 1;
-      let skip = 0;
-      newState.doc.descendants((node, pos) => {
-        if (node.type.name === "block" && !node.attrs.listType) {
-          count = 1;
-        }
-        if (
-          skip === 0 &&
-          node.type.name === "block" &&
-          node.attrs.listType === "oli"
-        ) {
-          skip = node.content.childCount;
-          // This assumes that the content node is always the first child of the oli block,
-          // as the content model grows this assumption may need to change
-          if (node.content.child(0).attrs.position !== `${count}.`) {
-            // TODO: @DAlperin currently sub-items just continue from the order of the parent,
-            //  sub-items should be ordered separately with letters or roman numerals or some such
-            newTr.setNodeMarkup(pos + 1, undefined, {
-              ...node.attrs,
-              position: `${count}.`,
-            });
-            modified = true;
-          }
-
-          count++;
-        } else if (skip > 0) {
-          skip--;
-        }
-      });
-      if (modified) {
-        return newTr;
-      }
-      return null;
-    },
-  });
-};

package/src/extensions/Blocks/commands/joinBackward.ts

@@ -1,274 +0,0 @@
-import { Fragment, Node, ResolvedPos, Slice } from "prosemirror-model";
-import { EditorState, NodeSelection, Selection } from "prosemirror-state";
-import {
-  canJoin,
-  liftTarget,
-  ReplaceAroundStep,
-  replaceStep,
-} from "prosemirror-transform";
-
-import { Command, TextSelection, Transaction } from "prosemirror-state";
-import { ReplaceStep } from "prosemirror-transform";
-
-/**
- * Code taken from https://github.com/ProseMirror/prosemirror-commands/blob/97a8cb5fac25e697d4693ce343e2e3b020a7fa2f/src/commands.ts
- * Reason for modification: https://github.com/YousefED/BlockNote/pull/11
- *
- * BlockA
- * BlockB
- * Order of behavior has been switched to make first and second blocks content
- * merge before trying to add second block as child of first
- *
- * behavior responsible for joining BlockB as A child of BlockA moved to (line 379 - 393 original file) after
- * behavior responsible for joining content of BlockA and BlockB (line 402 - 422 original file)
- */
-export const joinBackward: Command = (state, dispatch, view) => {
-  let { $cursor } = state.selection as TextSelection;
-  if (
-    !$cursor ||
-    (view ? !view.endOfTextblock("backward", state) : $cursor.parentOffset > 0)
-  ) {
-    return false;
-  }
-
-  let $cut = findCutBefore($cursor);
-
-  // If there is no node before this, try to lift
-  if (!$cut) {
-    let range = $cursor.blockRange(),
-      target = range && liftTarget(range);
-    if (target === null) {
-      return false;
-    }
-    if (dispatch) {
-      dispatch(state.tr.lift(range!, target).scrollIntoView());
-    }
-    return true;
-  }
-
-  let before = $cut.nodeBefore!;
-  // Apply the joining algorithm
-  if (!before.type.spec.isolating && deleteBarrier(state, $cut, dispatch)) {
-    return true;
-  }
-
-  // If the node below has no content and the node above is
-  // selectable, delete the node below and select the one above.
-  if (
-    $cursor.parent.content.size === 0 &&
-    (textblockAt(before, "end") || NodeSelection.isSelectable(before))
-  ) {
-    let delStep = replaceStep(
-      state.doc,
-      $cursor.before(),
-      $cursor.after(),
-      Slice.empty
-    );
-    if (
-      delStep &&
-      (delStep as ReplaceStep).slice.size <
-        (delStep as ReplaceStep).to - (delStep as ReplaceStep).from
-    ) {
-      if (dispatch) {
-        let tr = state.tr.step(delStep);
-        tr.setSelection(
-          textblockAt(before, "end")
-            ? Selection.findFrom(
-                tr.doc.resolve(tr.mapping.map($cut.pos, -1)),
-                -1
-              )!
-            : NodeSelection.create(tr.doc, $cut.pos - before.nodeSize)
-        );
-        dispatch(tr.scrollIntoView());
-      }
-      return true;
-    }
-  }
-
-  // If the node before is an atom, delete it
-  if (before.isAtom && $cut.depth === $cursor.depth - 1) {
-    if (dispatch) {
-      dispatch(
-        state.tr.delete($cut.pos - before.nodeSize, $cut.pos).scrollIntoView()
-      );
-    }
-    return true;
-  }
-
-  return false;
-};
-
-function findCutBefore($pos: ResolvedPos): ResolvedPos | null {
-  if (!$pos.parent.type.spec.isolating) {
-    for (let i = $pos.depth - 1; i >= 0; i--) {
-      if ($pos.index(i) > 0) {
-        return $pos.doc.resolve($pos.before(i + 1));
-      }
-      if ($pos.node(i).type.spec.isolating) {
-        break;
-      }
-    }
-  }
-  return null;
-}
-
-function deleteBarrier(
-  state: EditorState,
-  $cut: ResolvedPos,
-  dispatch: ((tr: Transaction) => void) | undefined
-) {
-  let before = $cut.nodeBefore!,
-    after = $cut.nodeAfter!,
-    conn,
-    match;
-  if (before.type.spec.isolating || after.type.spec.isolating) {
-    return false;
-  }
-  if (joinMaybeClear(state, $cut, dispatch)) {
-    return true;
-  }
-
-  let canDelAfter = $cut.parent.canReplace($cut.index(), $cut.index() + 1);
-
-  let selAfter = Selection.findFrom($cut, 1);
-  let range = selAfter && selAfter.$from.blockRange(selAfter.$to),
-    target = range && liftTarget(range);
-  if (target != null && target >= $cut.depth) {
-    if (dispatch) {
-      dispatch(state.tr.lift(range!, target).scrollIntoView());
-    }
-    return true;
-  }
-
-  if (
-    canDelAfter &&
-    textblockAt(after, "start", true) &&
-    textblockAt(before, "end")
-  ) {
-    let at = before,
-      wrap = [];
-    for (;;) {
-      wrap.push(at);
-      if (at.isTextblock) {
-        break;
-      }
-      at = at.lastChild!;
-    }
-    let afterText = after,
-      afterDepth = 1;
-    for (; !afterText.isTextblock; afterText = afterText.firstChild!) {
-      afterDepth++;
-    }
-    if (at.canReplace(at.childCount, at.childCount, afterText.content)) {
-      if (dispatch) {
-        let end = Fragment.empty;
-        for (let i = wrap.length - 1; i >= 0; i--) {
-          end = Fragment.from(wrap[i].copy(end));
-        }
-        let tr = state.tr.step(
-          new ReplaceAroundStep(
-            $cut.pos - wrap.length,
-            $cut.pos + after.nodeSize,
-            $cut.pos + afterDepth,
-            $cut.pos + after.nodeSize - afterDepth,
-            new Slice(end, wrap.length, 0),
-            0,
-            true
-          )
-        );
-        dispatch(tr.scrollIntoView());
-      }
-      return true;
-    }
-  }
-
-  if (
-    canDelAfter &&
-    (conn = (match = before.contentMatchAt(before.childCount)).findWrapping(
-      after.type
-    )) &&
-    match.matchType(conn[0] || after.type)!.validEnd
-  ) {
-    if (dispatch) {
-      let end = $cut.pos + after.nodeSize,
-        wrap = Fragment.empty;
-      for (let i = conn.length - 1; i >= 0; i--) {
-        wrap = Fragment.from(conn[i].create(null, wrap));
-      }
-      wrap = Fragment.from(before.copy(wrap));
-      let tr = state.tr.step(
-        new ReplaceAroundStep(
-          $cut.pos - 1,
-          end,
-          $cut.pos,
-          end,
-          new Slice(wrap, 1, 0),
-          conn.length,
-          true
-        )
-      );
-      let joinAt = end + 2 * conn.length;
-      if (canJoin(tr.doc, joinAt)) {
-        tr.join(joinAt);
-      }
-      dispatch(tr.scrollIntoView());
-    }
-    return true;
-  }
-  return false;
-}
-
-function textblockAt(node: Node, side: "start" | "end", only = false) {
-  for (
-    let scan: Node | null = node;
-    scan;
-    scan = side === "start" ? scan.firstChild : scan.lastChild
-  ) {
-    if (scan.isTextblock) {
-      return true;
-    }
-    if (only && scan.childCount !== 1) {
-      return false;
-    }
-  }
-  return false;
-}
-function joinMaybeClear(
-  state: EditorState,
-  $pos: ResolvedPos,
-  dispatch: ((tr: Transaction) => void) | undefined
-) {
-  let before = $pos.nodeBefore,
-    after = $pos.nodeAfter,
-    index = $pos.index();
-  if (!before || !after || !before.type.compatibleContent(after.type)) {
-    return false;
-  }
-  if (!before.content.size && $pos.parent.canReplace(index - 1, index)) {
-    if (dispatch) {
-      dispatch(
-        state.tr.delete($pos.pos - before.nodeSize, $pos.pos).scrollIntoView()
-      );
-    }
-    return true;
-  }
-  if (
-    !$pos.parent.canReplace(index, index + 1) ||
-    !(after.isTextblock || canJoin(state.doc, $pos.pos))
-  ) {
-    return false;
-  }
-  if (dispatch) {
-    dispatch(
-      state.tr
-        .clearIncompatible(
-          $pos.pos,
-          before.type,
-          before.contentMatchAt(before.childCount)
-        )
-        .join($pos.pos)
-        .scrollIntoView()
-    );
-  }
-  return true;
-}

package/src/extensions/Blocks/helpers/setBlockHeading.ts

@@ -1,30 +0,0 @@
-import { Transaction } from "prosemirror-state";
-import { Level } from "../nodes/Block";
-import { findBlock } from "./findBlock";
-
-type Dispatch = ((args?: any) => any) | undefined;
-
-export function setBlockHeading(
-  tr: Transaction,
-  dispatch: Dispatch,
-  level?: Level
-) {
-  // Get parent of TextNode
-  const containingBlock = findBlock(tr.selection);
-
-  // Should not be possible because schema dictates
-  // that each text node is nested in a BlockContent
-  // node which is nested inside a BlockNode
-  if (!containingBlock) {
-    return false;
-  }
-
-  // Add heading attribute to Block
-  if (dispatch) {
-    tr.setNodeMarkup(containingBlock.pos, undefined, {
-      ...containingBlock.node.attrs,
-      headingType: level,
-    });
-  }
-  return true;
-}

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

@@ -1,63 +0,0 @@
-import { mergeAttributes, Node } from "@tiptap/core";
-import styles from "./Block.module.css";
-export interface IBlock {
-  HTMLAttributes: Record<string, any>;
-}
-
-export const ContentBlock = Node.create<IBlock>({
-  name: "content",
-
-  addOptions() {
-    return {
-      HTMLAttributes: {},
-    };
-  },
-  addAttributes() {
-    return {
-      position: {
-        default: undefined,
-        renderHTML: (attributes) => {
-          return {
-            "data-position": attributes.position,
-          };
-        },
-        parseHTML: (element) => element.getAttribute("data-position"),
-      },
-    };
-  },
-
-  content: "inline*",
-
-  parseHTML() {
-    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;
-        }
-      }
-    ];
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    return [
-      "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
-      ["div", 0],
-    ];
-  },
-});

package/src/extensions/Blocks/rule.ts

@@ -1,48 +0,0 @@
-import {
-  callOrReturn,
-  ExtendedRegExpMatchArray,
-  InputRule,
-  InputRuleFinder,
-} from "@tiptap/core";
-import { NodeType } from "prosemirror-model";
-
-/**
- * Modified version of https://github.com/ueberdosis/tiptap/blob/6a813686f5e87cebac49a624936dbeadb5a29f95/packages/core/src/inputRules/textblockTypeInputRule.ts
- * But instead of changing the type of a node, we use setNodeMarkup to change some of it's current attributes
- *
- * Build an input rule that changes the type of a textblock when the
- * matched text is typed into it. When using a regular expresion you’ll
- * probably want the regexp to start with `^`, so that the pattern can
- * only occur at the start of a textblock.
- */
-export function textblockTypeInputRuleSameNodeType(config: {
-  find: InputRuleFinder;
-  type: NodeType;
-  getAttributes?:
-    | Record<string, any>
-    | ((match: ExtendedRegExpMatchArray) => Record<string, any>)
-    | false
-    | null;
-}) {
-  return new InputRule({
-    find: config.find,
-    handler: ({ state, range, match }) => {
-      const $start = state.doc.resolve(range.from);
-      const attributes =
-        callOrReturn(config.getAttributes, undefined, match) || {};
-
-      const blockNode = $start.node(-1);
-      if (blockNode.type !== config.type) {
-        return null;
-      }
-
-      state.tr
-        .setNodeMarkup(range.from - 2, undefined, {
-          ...blockNode.attrs,
-          ...attributes,
-        })
-        .delete(range.from, range.to);
-      return;
-    },
-  });
-}

package/src/extensions/BubbleMenu/BubbleMenuExtension.tsx

@@ -1,36 +0,0 @@
-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";
-
-/**
- * The menu that is displayed when selecting a piece of text.
- */
-export const BubbleMenuExtension = Extension.create<{}>({
-  name: "BubbleMenuExtension",
-
-  addProseMirrorPlugins() {
-    const element = document.createElement("div");
-    element.className = rootStyles.bnRoot;
-    ReactDOM.render(
-      <MantineProvider theme={BlockNoteTheme}>
-        <BubbleMenu editor={this.editor} />
-      </MantineProvider>,
-      element
-    );
-    return [
-      createBubbleMenuPlugin({
-        editor: this.editor,
-        element,
-        pluginKey: new PluginKey("BubbleMenuPlugin"),
-        tippyOptions: {
-          appendTo: document.body,
-        },
-      }),
-    ];
-  },
-});