@blocknote/core 0.1.0-alpha.3 → 0.1.0

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@blocknote/core",
+  "homepage": "https://github.com/yousefed/blocknote",
   "private": false,
-  "license": "MIT",
-  "version": "0.1.0-alpha.3",
+  "license": "MPL-2.0",
+  "version": "0.1.0",
   "files": [
     "dist",
     "types",
@@ -105,5 +106,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "806198ea45da0806b9f71010400594fdde4bbef5"
+  "gitHead": "511cb65b707ca40289d838c71ac6edd29d882eef"
 }

package/src/BlockNoteExtensions.ts

@@ -1,17 +1,16 @@
 import { Extensions, extensions } from "@tiptap/core";
 
+import { Node } from "@tiptap/core";
 import Bold from "@tiptap/extension-bold";
 import Code from "@tiptap/extension-code";
 import DropCursor from "@tiptap/extension-dropcursor";
 import GapCursor from "@tiptap/extension-gapcursor";
 import HardBreak from "@tiptap/extension-hard-break";
-import Italic from "@tiptap/extension-italic";
-import Underline from "@tiptap/extension-underline";
-// import Placeholder from "@tiptap/extension-placeholder";
-import { Node } from "@tiptap/core";
 import { History } from "@tiptap/extension-history";
+import Italic from "@tiptap/extension-italic";
 import Strike from "@tiptap/extension-strike";
 import Text from "@tiptap/extension-text";
+import Underline from "@tiptap/extension-underline";
 import { blocks } from "./extensions/Blocks";
 import blockStyles from "./extensions/Blocks/nodes/Block.module.css";
 import { BubbleMenuExtension } from "./extensions/BubbleMenu/BubbleMenuExtension";
@@ -22,12 +21,16 @@ import { Placeholder } from "./extensions/Placeholder/PlaceholderExtension";
 import SlashMenuExtension from "./extensions/SlashMenu";
 import { TrailingNode } from "./extensions/TrailingNode/TrailingNodeExtension";
 import UniqueID from "./extensions/UniqueID/UniqueID";
+
 export const Document = Node.create({
   name: "doc",
   topNode: true,
   content: "block+",
 });
 
+/**
+ * Get all the Tiptap extensions BlockNote is configured with by default
+ */
 export const getBlockNoteExtensions = () => {
   const ret: Extensions = [
     extensions.ClipboardTextSerializer,
@@ -48,7 +51,7 @@ export const getBlockNoteExtensions = () => {
       showOnlyCurrent: false,
     }),
     UniqueID.configure({
-      types: ["tcblock"],
+      types: ["block"],
     }),
     HardBreak,
     // Comments,
@@ -64,26 +67,16 @@ export const getBlockNoteExtensions = () => {
     Underline,
     HyperlinkMark,
     FixedParagraph,
+
     // custom blocks:
     ...blocks,
     DraggableBlocksExtension,
     DropCursor.configure({ width: 5, color: "#ddeeff" }),
     BubbleMenuExtension,
     History,
-    SlashMenuExtension,
     // This needs to be at the bottom of this list, because Key events (such as enter, when selecting a /command),
     // should be handled before Enter handlers in other components like splitListItem
-    // SlashCommandExtension.configure({
-    //     // Extra commands can be registered here
-    //     commands: {},
-    // }),
-    // MentionsExtension.configure({
-    //     providers: {
-    //         people: (query) => {
-    //             return PEOPLE.filter((mention) => mention.match(query));
-    //         },
-    //     },
-    // }),
+    SlashMenuExtension,
     TrailingNode,
   ];
   return ret;

package/src/EditorContent.tsx

@@ -1 +1,2 @@
-export { EditorContent } from "@tiptap/react";
+// 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

@@ -11,12 +11,12 @@ export const OrderedListPlugin = () => {
       let count = 1;
       let skip = 0;
       newState.doc.descendants((node, pos) => {
-        if (node.type.name === "tcblock" && !node.attrs.listType) {
+        if (node.type.name === "block" && !node.attrs.listType) {
           count = 1;
         }
         if (
           skip === 0 &&
-          node.type.name === "tcblock" &&
+          node.type.name === "block" &&
           node.attrs.listType === "oli"
         ) {
           skip = node.content.childCount;

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

@@ -1,3 +1,3 @@
 import { findParentNode } from "@tiptap/core";
 
-export const findBlock = findParentNode((node) => node.type.name === "tcblock");
+export const findBlock = findParentNode((node) => node.type.name === "block");

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

@@ -43,7 +43,7 @@ declare module "@tiptap/core" {
  * The main "Block node" documents consist of
  */
 export const Block = Node.create<IBlock>({
-  name: "tcblock",
+  name: "block",
   group: "block",
   addOptions() {
     return {
@@ -52,7 +52,7 @@ export const Block = Node.create<IBlock>({
   },
 
   // A block always contains content, and optionally a blockGroup which contains nested blocks
-  content: "tccontent blockgroup?",
+  content: "content blockgroup?",
 
   defining: true,
 
@@ -172,7 +172,7 @@ export const Block = Node.create<IBlock>({
           const nodePos = tr.selection.$anchor.posAtIndex(0, -1) - 1;
 
           // const node2 = tr.doc.nodeAt(nodePos);
-          if (node.type.name === "tcblock" && node.attrs["listType"]) {
+          if (node.type.name === "block" && node.attrs["listType"]) {
             if (dispatch) {
               tr.setNodeMarkup(nodePos, undefined, {
                 ...node.attrs,
@@ -203,8 +203,7 @@ export const Block = Node.create<IBlock>({
 
           // Create new block after current block
           const endOfBlock = currentBlock.pos + currentBlock.node.nodeSize;
-          let newBlock =
-            state.schema.nodes["tcblock"].createAndFill(attributes)!;
+          let newBlock = state.schema.nodes["block"].createAndFill(attributes)!;
           if (dispatch) {
             tr.insert(endOfBlock, newBlock);
             tr.setSelection(new TextSelection(tr.doc.resolve(endOfBlock + 1)));
@@ -218,7 +217,7 @@ export const Block = Node.create<IBlock>({
           const nodePos = tr.selection.$anchor.posAtIndex(0, -1) - 1;
 
           // const node2 = tr.doc.nodeAt(nodePos);
-          if (node.type.name === "tcblock") {
+          if (node.type.name === "block") {
             if (dispatch) {
               tr.setNodeMarkup(nodePos, undefined, {
                 ...node.attrs,
@@ -268,11 +267,11 @@ export const Block = Node.create<IBlock>({
           commands.command(({ tr }) => {
             const isAtStartOfNode = tr.selection.$anchor.parentOffset === 0;
             const node = tr.selection.$anchor.node(-1);
-            if (isAtStartOfNode && node.type.name === "tcblock") {
+            if (isAtStartOfNode && node.type.name === "block") {
               // we're at the start of the block, so we're trying to "backspace" the bullet or indentation
               return commands.first([
                 () => commands.unsetList(), // first try to remove the "list" property
-                () => commands.liftListItem("tcblock"), // then try to remove a level of indentation
+                () => commands.liftListItem("block"), // then try to remove a level of indentation
               ]);
             }
             return false;
@@ -292,7 +291,7 @@ export const Block = Node.create<IBlock>({
               const isAtStartOfNode = tr.selection.$anchor.parentOffset === 0;
               const anchor = tr.selection.$anchor;
               const node = anchor.node(-1);
-              if (isAtStartOfNode && node.type.name === "tcblock") {
+              if (isAtStartOfNode && node.type.name === "block") {
                 if (node.childCount === 2) {
                   // BlockB has children. We want to go from this:
                   //
@@ -337,7 +336,7 @@ export const Block = Node.create<IBlock>({
     const handleEnter = () =>
       this.editor.commands.first(({ commands }) => [
         // Try to split the current block into 2 items:
-        () => commands.splitListItem("tcblock"),
+        () => commands.splitListItem("block"),
         // Otherwise, maybe we are in an empty list item. "Enter" should remove the list bullet
         ({ tr, dispatch }) => {
           const $from = tr.selection.$from;
@@ -348,7 +347,7 @@ export const Block = Node.create<IBlock>({
           const node = tr.selection.$anchor.node(-1);
           const nodePos = tr.selection.$anchor.posAtIndex(0, -1) - 1;
 
-          if (node.type.name === "tcblock" && node.attrs["listType"]) {
+          if (node.type.name === "block" && node.attrs["listType"]) {
             if (dispatch) {
               tr.setNodeMarkup(nodePos, undefined, {
                 ...node.attrs,
@@ -373,9 +372,9 @@ export const Block = Node.create<IBlock>({
     return {
       Backspace: handleBackspace,
       Enter: handleEnter,
-      Tab: () => this.editor.commands.sinkListItem("tcblock"),
+      Tab: () => this.editor.commands.sinkListItem("block"),
       "Shift-Tab": () => {
-        return this.editor.commands.liftListItem("tcblock");
+        return this.editor.commands.liftListItem("block");
       },
       "Mod-Alt-0": () =>
         this.editor.chain().unsetList().unsetBlockHeading().run(),

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

@@ -10,7 +10,7 @@ export const BlockGroup = Node.create({
     };
   },
 
-  content: "tcblock+",
+  content: "block+",
 
   parseHTML() {
     return [{ tag: "div" }];

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

@@ -5,7 +5,7 @@ export interface IBlock {
 }
 
 export const ContentBlock = Node.create<IBlock>({
-  name: "tccontent",
+  name: "content",
 
   addOptions() {
     return {

package/src/extensions/BubbleMenu/BubbleMenuExtension.tsx

@@ -1,9 +1,10 @@
 import { Extension } from "@tiptap/core";
 import { PluginKey } from "prosemirror-state";
 import ReactDOM from "react-dom";
+import rootStyles from "../../root.module.css";
 import { createBubbleMenuPlugin } from "./BubbleMenuPlugin";
 import { BubbleMenu } from "./component/BubbleMenu";
-import rootStyles from "../../root.module.css";
+
 /**
  * The menu that is displayed when selecting a piece of text.
  */

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

@@ -1,27 +1,27 @@
+import DropdownMenu, { DropdownItemGroup } from "@atlaskit/dropdown-menu";
 import { Editor } from "@tiptap/core";
 import {
   RiBold,
   RiH1,
   RiH2,
   RiH3,
+  RiIndentDecrease,
+  RiIndentIncrease,
   RiItalic,
   RiLink,
-  RiStrikethrough,
-  RiUnderline,
-  RiIndentIncrease,
-  RiIndentDecrease,
-  RiText,
   RiListOrdered,
   RiListUnordered,
+  RiStrikethrough,
+  RiText,
+  RiUnderline,
 } from "react-icons/ri";
 import { SimpleToolbarButton } from "../../../shared/components/toolbar/SimpleToolbarButton";
 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 LinkToolbarButton from "./LinkToolbarButton";
-import DropdownMenu, { DropdownItemGroup } from "@atlaskit/dropdown-menu";
 import DropdownBlockItem from "./DropdownBlockItem";
+import LinkToolbarButton from "./LinkToolbarButton";
 
 type ListType = "li" | "oli";
 
@@ -167,19 +167,15 @@ export const BubbleMenu = (props: { editor: Editor }) => {
         icon={RiStrikethrough}
       />
       <SimpleToolbarButton
-        onClick={() =>
-          props.editor.chain().focus().sinkListItem("tcblock").run()
-        }
-        isDisabled={!props.editor.can().sinkListItem("tcblock")}
+        onClick={() => props.editor.chain().focus().sinkListItem("block").run()}
+        isDisabled={!props.editor.can().sinkListItem("block")}
         mainTooltip="Indent"
         secondaryTooltip={formatKeyboardShortcut("Tab")}
         icon={RiIndentIncrease}
       />
 
       <SimpleToolbarButton
-        onClick={() =>
-          props.editor.chain().focus().liftListItem("tcblock").run()
-        }
+        onClick={() => props.editor.chain().focus().liftListItem("block").run()}
         isDisabled={
           !props.editor.can().command(({ state }) => {
             const block = findBlock(state.selection);

package/src/extensions/DraggableBlocks/components/DragHandle.tsx

@@ -59,8 +59,7 @@ export const DragHandle = (props: {
     if (currentBlock.node.firstChild?.textContent.length !== 0) {
       // Create new block after current block
       const endOfBlock = currentBlock.pos + currentBlock.node.nodeSize;
-      let newBlock =
-        props.view.state.schema.nodes["tccontent"].createAndFill()!;
+      let newBlock = props.view.state.schema.nodes["content"].createAndFill()!;
       props.view.state.tr.insert(endOfBlock, newBlock);
       props.view.dispatch(props.view.state.tr.insert(endOfBlock, newBlock));
       props.view.dispatch(

package/src/extensions/TrailingNode/TrailingNodeExtension.ts

@@ -13,6 +13,9 @@ export interface TrailingNodeOptions {
   node: string;
 }
 
+/**
+ * Add a trailing node to the document so the user can always click at the bottom of the document and start typing
+ */
 export const TrailingNode = Extension.create<TrailingNodeOptions>({
   name: "trailingNode",
 
@@ -29,8 +32,8 @@ export const TrailingNode = Extension.create<TrailingNodeOptions>({
           const { doc, tr, schema } = state;
           const shouldInsertNodeAtEnd = plugin.getState(state);
           const endPosition = doc.content.size - 2;
-          const type = schema.nodes["tcblock"];
-          const contenttype = schema.nodes["tccontent"];
+          const type = schema.nodes["block"];
+          const contenttype = schema.nodes["content"];
           if (!shouldInsertNodeAtEnd) {
             return;
           }
@@ -58,10 +61,10 @@ export const TrailingNode = Extension.create<TrailingNodeOptions>({
 
             lastNode = lastNode.lastChild;
 
-            if (!lastNode || lastNode.type.name !== "tcblock") {
-              throw new Error("Expected tcblock");
+            if (!lastNode || lastNode.type.name !== "block") {
+              throw new Error("Expected block");
             }
-            return lastNode.nodeSize > 4; // empty <tcblock><tccontent/></tcblock> is length 4
+            return lastNode.nodeSize > 4; // empty <block><content/></block> is length 4
           },
         },
       }),

package/src/useEditor.ts

@@ -17,6 +17,10 @@ const blockNoteOptions = {
   enablePasteRules: true,
   enableCoreExtensions: false,
 };
+
+/**
+ * Main hook for importing a BlockNote editor into a react project
+ */
 export const useEditor = (
   options: Partial<BlockNoteEditorOptions> = {},
   deps: DependencyList = []

package/types/src/BlockNoteExtensions.d.ts

@@ -1,4 +1,7 @@
 import { Extensions } from "@tiptap/core";
 import { Node } from "@tiptap/core";
 export declare const Document: Node<any, any>;
+/**
+ * Get all the Tiptap extensions BlockNote is configured with by default
+ */
 export declare const getBlockNoteExtensions: () => Extensions;

package/types/src/extensions/TrailingNode/TrailingNodeExtension.d.ts

@@ -7,4 +7,7 @@ import { Extension } from "@tiptap/core";
 export interface TrailingNodeOptions {
     node: string;
 }
+/**
+ * Add a trailing node to the document so the user can always click at the bottom of the document and start typing
+ */
 export declare const TrailingNode: Extension<TrailingNodeOptions, any>;

package/types/src/useEditor.d.ts

@@ -4,5 +4,8 @@ declare type BlockNoteEditorOptions = EditorOptions & {
     enableBlockNoteExtensions: boolean;
     disableHistoryExtension: boolean;
 };
+/**
+ * Main hook for importing a BlockNote editor into a react project
+ */
 export declare const useEditor: (options?: Partial<BlockNoteEditorOptions>, deps?: DependencyList) => import("@tiptap/react").Editor | null;
 export {};

package/src/extensions/Blocks/nodes/README.md

@@ -1,26 +0,0 @@
-# Node structure
-
-We use the following document structure:
-
-```xml
-<blockgroup>
-    <block>
-        <content>Parent element 1</content>
-        <blockgroup>
-            <block>
-                <content>Nested / child / indented item</content>
-            </block>
-        </blockgroup>
-    </block>
-    <block>
-        <content>Parent element 2</content>
-        <blockgroup>
-            <block>...</block>
-            <block>...</block>
-        </blockgroup>
-    </block>
-    <block>
-        <content>Element 3 without children</content>
-    </block>
-</blockgroup>
-```