@blocknote/core 0.2.2 → 0.2.4-alpha.7

package/src/extensions/Blocks/nodes/Block.module.css

@@ -10,12 +10,6 @@ BASIC STYLES
   font-weight: normal;
 }
 
-.block {
-  border-left: 2px solid white;
-  border-color: white;
-  transition: all 0.2s;
-}
-
 .block {
   /* content: ""; */
   transition: all 0.2s;
@@ -115,34 +109,34 @@ NESTED BLOCKS
 }
 
 /* HEADINGS*/
-[data-heading-level="1"] {
+[data-level="1"] {
   --level: 3em;
 }
-[data-heading-level="2"] {
+[data-level="2"] {
   --level: 2em;
 }
-[data-heading-level="3"] {
+[data-level="3"] {
   --level: 1.3em;
 }
 
-[data-prev-heading-level="1"] {
+[data-prev-level="1"] {
   --prev-level: 3em;
 }
-[data-prev-heading-level="2"] {
+[data-prev-level="2"] {
   --prev-level: 2em;
 }
-[data-prev-heading-level="3"] {
+[data-prev-level="3"] {
   --prev-level: 1.3em;
 }
 
-.blockOuter[data-prev-type="headingContent"] > .block > .blockContent {
+.blockOuter[data-prev-type="heading"] > .block > .blockContent {
   font-size: var(--prev-level);
   font-weight: bold;
 }
 
 .blockOuter:not([data-prev-type])
   > .block
-  > .blockContent[data-content-type="headingContent"] {
+  > .blockContent[data-content-type="heading"] {
   font-size: var(--level);
   font-weight: bold;
 }
@@ -155,15 +149,15 @@ NESTED BLOCKS
 }
 
 /* Ordered */
-[data-list-item-type="ordered"] {
-  --index: attr(data-list-item-index)
+[data-content-type="numberedListItem"] {
+  --index: attr(data-index)
 }
 
-[data-prev-list-item-type="ordered"] {
-  --prev-index: attr(data-prev-list-item-index)
+[data-prev-type="numberedListItem"] {
+  --prev-index: attr(data-prev-index)
 }
 
-.blockOuter[data-prev-list-item-type="ordered"]:not([data-prev-list-item-index="none"])
+.blockOuter[data-prev-type="numberedListItem"]:not([data-prev-index="none"])
 > .block
 > .blockContent::before {
   margin-right: 1.2em;
@@ -172,14 +166,14 @@ NESTED BLOCKS
 
 .blockOuter:not([data-prev-type])
 > .block
-> .blockContent[data-list-item-type="ordered"]::before {
+> .blockContent[data-content-type="numberedListItem"]::before {
   margin-right: 1.2em;
   content: var(--index)".";
 }
 
 /* Unordered */
 /* No list nesting */
-.blockOuter[data-prev-list-item-type="unordered"]
+.blockOuter[data-prev-type="bulletListItem"]
 > .block
 > .blockContent::before {
   margin-right: 1.2em;
@@ -188,43 +182,43 @@ NESTED BLOCKS
 
 .blockOuter:not([data-prev-type])
 > .block
-> .blockContent[data-list-item-type="unordered"]::before {
+> .blockContent[data-content-type="bulletListItem"]::before {
   margin-right: 1.2em;
   content: "•";
 }
 
 /* 1 level of list nesting */
-[data-list-item-type="unordered"]~.blockGroup
-> .blockOuter[data-prev-list-item-type="unordered"]
+[data-content-type="bulletListItem"]~.blockGroup
+> .blockOuter[data-prev-type="bulletListItem"]
 > .block
 > .blockContent::before {
   margin-right: 1.2em;
   content: "◦";
 }
 
-[data-list-item-type="unordered"]~.blockGroup
+[data-content-type="bulletListItem"]~.blockGroup
 > .blockOuter:not([data-prev-type])
 > .block
-> .blockContent[data-list-item-type="unordered"]::before {
+> .blockContent[data-content-type="bulletListItem"]::before {
   margin-right: 1.2em;
   content: "◦";
 }
 
 /* 2 levels of list nesting */
-[data-list-item-type="unordered"]~.blockGroup
-[data-list-item-type="unordered"]~.blockGroup
-> .blockOuter[data-prev-list-item-type="unordered"]
+[data-content-type="bulletListItem"]~.blockGroup
+[data-content-type="bulletListItem"]~.blockGroup
+> .blockOuter[data-prev-type="bulletListItem"]
 > .block
 > .blockContent::before {
   margin-right: 1.2em;
   content: "▪";
 }
 
-[data-list-item-type="unordered"]~.blockGroup
-[data-list-item-type="unordered"]~.blockGroup
+[data-content-type="bulletListItem"]~.blockGroup
+[data-content-type="bulletListItem"]~.blockGroup
 > .blockOuter:not([data-prev-type])
 > .block
-> .blockContent[data-list-item-type="unordered"]::before {
+> .blockContent[data-content-type="bulletListItem"]::before {
   margin-right: 1.2em;
   content: "▪";
 }
@@ -257,12 +251,105 @@ NESTED BLOCKS
   content: "Type to filter";
 }
 
-.blockContent[data-content-type="headingContent"].isEmpty
+.blockContent[data-content-type="heading"].isEmpty
   > :first-child::before {
   content: "Heading";
 }
 
-.blockContent[data-content-type="listItemContent"].isEmpty
-  > :first-child:before {
+.blockContent[data-content-type="bulletListItem"].isEmpty
+> :first-child:before,
+.blockContent[data-content-type="numberedListItem"].isEmpty
+> :first-child:before {
   content: "List";
 }
+
+/* TEXT COLORS */
+[data-text-color="gray"] {
+  color: #9b9a97;
+}
+
+[data-text-color="brown"] {
+  color: #64473a;
+}
+
+[data-text-color="red"] {
+  color: #e03e3e;
+}
+
+[data-text-color="orange"] {
+  color: #d9730d;
+}
+
+[data-text-color="yellow"] {
+  color: #dfab01;
+}
+
+[data-text-color="green"] {
+  color: #4d6461;
+}
+
+[data-text-color="blue"] {
+  color: #0b6e99;
+}
+
+[data-text-color="purple"] {
+  color: #6940a5;
+}
+
+[data-text-color="pink"] {
+  color: #ad1a72;
+}
+
+/* BACKGROUND COLORS */
+[data-background-color="gray"] {
+  background-color: #ebeced;
+}
+
+[data-background-color="brown"] {
+  background-color: #e9e5e3;
+}
+
+[data-background-color="red"] {
+  background-color: #fbe4e4;
+}
+
+[data-background-color="orange"] {
+  background-color: #faebdd;
+}
+
+[data-background-color="yellow"] {
+  background-color: #fbf3db;
+}
+
+[data-background-color="green"] {
+  background-color: #ddedea;
+}
+
+[data-background-color="blue"] {
+  background-color: #ddebf1;
+}
+
+[data-background-color="purple"] {
+  background-color: #eae4f2;
+}
+
+[data-background-color="pink"] {
+  background-color: #f4dfeb;
+}
+
+/* TEXT ALIGNMENT */
+[data-text-alignment="left"] {
+  text-align: left;
+}
+
+[data-text-alignment="center"] {
+  text-align: center;
+}
+
+[data-text-alignment="right"] {
+  text-align: right;
+}
+
+[data-text-alignment="justify"] {
+  text-align: justify;
+}

package/src/extensions/Blocks/nodes/{Block.ts → BlockContainer.ts}

@@ -1,23 +1,17 @@
 import { mergeAttributes, Node } from "@tiptap/core";
-import { Slice } from "prosemirror-model";
+import { Fragment, Slice } from "prosemirror-model";
 import { TextSelection } from "prosemirror-state";
-import BlockAttributes from "../BlockAttributes";
+import { BlockUpdate } from "../apiTypes";
 import { getBlockInfoFromPos } from "../helpers/getBlockInfoFromPos";
 import { PreviousBlockTypePlugin } from "../PreviousBlockTypePlugin";
 import styles from "./Block.module.css";
-import { TextContentType } from "./BlockTypes/TextBlock/TextContent";
-import { HeadingContentType } from "./BlockTypes/HeadingBlock/HeadingContent";
-import { ListItemContentType } from "./BlockTypes/ListItemBlock/ListItemContent";
+import BlockAttributes from "./BlockAttributes";
 
+// TODO
 export interface IBlock {
   HTMLAttributes: Record<string, any>;
 }
 
-export type BlockContentType =
-  | TextContentType
-  | HeadingContentType
-  | ListItemContentType;
-
 declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     block: {
@@ -25,13 +19,13 @@ declare module "@tiptap/core" {
       BNDeleteBlock: (posInBlock: number) => ReturnType;
       BNMergeBlocks: (posBetweenBlocks: number) => ReturnType;
       BNSplitBlock: (posInBlock: number, keepType: boolean) => ReturnType;
-      BNSetContentType: (
+      BNUpdateBlock: (
         posInBlock: number,
-        type: BlockContentType
+        blockUpdate: BlockUpdate
       ) => ReturnType;
-      BNCreateBlockOrSetContentType: (
+      BNCreateOrUpdateBlock: (
         posInBlock: number,
-        type: BlockContentType
+        blockUpdate: BlockUpdate
       ) => ReturnType;
     };
   }
@@ -40,9 +34,9 @@ declare module "@tiptap/core" {
 /**
  * The main "Block node" documents consist of
  */
-export const Block = Node.create<IBlock>({
-  name: "block",
-  group: "block",
+export const BlockContainer = Node.create<IBlock>({
+  name: "blockContainer",
+  group: "blockContainer",
   // A block always contains content, and optionally a blockGroup which contains nested blocks
   content: "blockContent blockGroup?",
   // Ensures content-specific keyboard handlers trigger first.
@@ -55,17 +49,6 @@ export const Block = Node.create<IBlock>({
     };
   },
 
-  addAttributes() {
-    return {
-      blockColor: {
-        default: undefined,
-      },
-      blockStyle: {
-        default: undefined,
-      },
-    };
-  },
-
   parseHTML() {
     return [
       {
@@ -82,7 +65,7 @@ export const Block = Node.create<IBlock>({
             }
           }
 
-          if (element.getAttribute("data-node-type") === "block") {
+          if (element.getAttribute("data-node-type") === "blockContainer") {
             return attrs;
           }
 
@@ -93,23 +76,15 @@ export const Block = Node.create<IBlock>({
   },
 
   renderHTML({ HTMLAttributes }) {
-    const attrs: Record<string, string> = {};
-    for (let [nodeAttr, HTMLAttr] of Object.entries(BlockAttributes)) {
-      // Ensure falsy values are not misinterpreted.
-      if (HTMLAttributes[nodeAttr] !== undefined) {
-        attrs[HTMLAttr] = HTMLAttributes[nodeAttr];
-      }
-    }
-
     return [
       "div",
-      mergeAttributes(attrs, {
+      mergeAttributes(HTMLAttributes, {
         class: styles.blockOuter,
         "data-node-type": "block-outer",
       }),
       [
         "div",
-        mergeAttributes(attrs, {
+        mergeAttributes(HTMLAttributes, {
           // TODO: maybe remove html attributes from inner block
           class: styles.block,
           "data-node-type": this.name,
@@ -125,7 +100,8 @@ export const Block = Node.create<IBlock>({
       BNCreateBlock:
         (pos) =>
         ({ state, dispatch }) => {
-          const newBlock = state.schema.nodes["block"].createAndFill()!;
+          const newBlock =
+            state.schema.nodes["blockContainer"].createAndFill()!;
 
           if (dispatch) {
             state.tr.insert(pos, newBlock);
@@ -176,10 +152,10 @@ export const Block = Node.create<IBlock>({
         ({ state, dispatch }) => {
           const nextNodeIsBlock =
             state.doc.resolve(posBetweenBlocks + 1).node().type.name ===
-            "block";
+            "blockContainer";
           const prevNodeIsBlock =
             state.doc.resolve(posBetweenBlocks - 1).node().type.name ===
-            "block";
+            "blockContainer";
 
           if (!nextNodeIsBlock || !prevNodeIsBlock) {
             return false;
@@ -246,19 +222,36 @@ export const Block = Node.create<IBlock>({
           const { contentNode, contentType, startPos, endPos, depth } =
             blockInfo;
 
-          const newBlockInsertionPos = endPos + 1;
+          const originalBlockContent = state.doc.cut(startPos + 1, posInBlock);
+          const newBlockContent = state.doc.cut(posInBlock, endPos - 1);
 
-          // Creates new block first, otherwise positions get changed due to the original block's content changing.
-          // Only text content is transferred to the new block.
-          const secondBlockContent = state.doc.textBetween(posInBlock, endPos);
+          const newBlock =
+            state.schema.nodes["blockContainer"].createAndFill()!;
 
-          const newBlock = state.schema.nodes["block"].createAndFill()!;
+          const newBlockInsertionPos = endPos + 1;
           const newBlockContentPos = newBlockInsertionPos + 2;
 
           if (dispatch) {
+            // Creates a new block. Since the schema requires it to have a content node, a paragraph node is created
+            // automatically, spanning newBlockContentPos to newBlockContentPos + 1.
             state.tr.insert(newBlockInsertionPos, newBlock);
-            state.tr.insertText(secondBlockContent, newBlockContentPos);
 
+            // Replaces the content of the newly created block's content node. Doesn't replace the whole content node so
+            // its type doesn't change.
+            state.tr.replace(
+              newBlockContentPos,
+              newBlockContentPos + 1,
+              newBlockContent.content.size > 0
+                ? new Slice(
+                    Fragment.from(newBlockContent),
+                    depth + 2,
+                    depth + 2
+                  )
+                : undefined
+            );
+
+            // Changes the type of the content node. The range doesn't matter as long as both from and to positions are
+            // within the content node.
             if (keepType) {
               state.tr.setBlockType(
                 newBlockContentPos,
@@ -267,38 +260,49 @@ export const Block = Node.create<IBlock>({
                 contentNode.attrs
               );
             }
-          }
 
-          // Updates content of original block.
-          const firstBlockContent = state.doc.content.cut(startPos, posInBlock);
+            // Sets the selection to the start of the new block's content node.
+            state.tr.setSelection(
+              new TextSelection(state.doc.resolve(newBlockContentPos))
+            );
 
-          if (dispatch) {
+            // Replaces the content of the original block's content node. Doesn't replace the whole content node so its
+            // type doesn't change.
             state.tr.replace(
-              startPos,
-              endPos,
-              new Slice(firstBlockContent, depth, depth)
+              startPos + 1,
+              endPos - 1,
+              originalBlockContent.content.size > 0
+                ? new Slice(
+                    Fragment.from(originalBlockContent),
+                    depth + 2,
+                    depth + 2
+                  )
+                : undefined
             );
           }
 
           return true;
         },
-      // Changes the content of a block at a given position to a given type.
-      BNSetContentType:
-        (posInBlock, type) =>
+      // Updates the type and attributes of a block at a given position.
+      BNUpdateBlock:
+        (posInBlock, blockUpdate) =>
         ({ state, dispatch }) => {
           const blockInfo = getBlockInfoFromPos(state.doc, posInBlock);
           if (blockInfo === undefined) {
             return false;
           }
 
-          const { startPos, contentNode } = blockInfo;
+          const { node, startPos, contentNode } = blockInfo;
 
           if (dispatch) {
             state.tr.setBlockType(
               startPos + 1,
               startPos + contentNode.nodeSize + 1,
-              state.schema.node(type.name).type,
-              type.attrs
+              state.schema.node(blockUpdate.type).type,
+              {
+                ...node.attrs,
+                ...blockUpdate.props,
+              }
             );
           }
 
@@ -306,8 +310,8 @@ export const Block = Node.create<IBlock>({
         },
       // Changes the block at a given position to a given content type if it's empty, otherwise creates a new block of
       // that type below it.
-      BNCreateBlockOrSetContentType:
-        (posInBlock, type) =>
+      BNCreateOrUpdateBlock:
+        (posInBlock, blockUpdate) =>
         ({ state, chain }) => {
           const blockInfo = getBlockInfoFromPos(state.doc, posInBlock);
           if (blockInfo === undefined) {
@@ -320,7 +324,7 @@ export const Block = Node.create<IBlock>({
             const oldBlockContentPos = startPos + 1;
 
             return chain()
-              .BNSetContentType(posInBlock, type)
+              .BNUpdateBlock(posInBlock, blockUpdate)
               .setTextSelection(oldBlockContentPos)
               .run();
           } else {
@@ -329,7 +333,7 @@ export const Block = Node.create<IBlock>({
 
             return chain()
               .BNCreateBlock(newBlockInsertionPos)
-              .BNSetContentType(newBlockContentPos, type)
+              .BNUpdateBlock(newBlockContentPos, blockUpdate)
               .setTextSelection(newBlockContentPos)
               .run();
           }
@@ -349,7 +353,7 @@ export const Block = Node.create<IBlock>({
         () => commands.deleteSelection(),
         // Undoes an input rule if one was triggered in the last editor state change.
         () => commands.undoInputRule(),
-        // Changes block type to a text block if it's not already, while the selection is at the start of the block.
+        // Reverts block content type to a paragraph if the selection is at the start of the block.
         () =>
           commands.command(({ state }) => {
             const { contentType } = getBlockInfoFromPos(
@@ -359,11 +363,12 @@ export const Block = Node.create<IBlock>({
 
             const selectionAtBlockStart =
               state.selection.$anchor.parentOffset === 0;
-            const isTextBlock = contentType.name === "textContent";
+            const isParagraph = contentType.name === "paragraph";
 
-            if (selectionAtBlockStart && !isTextBlock) {
-              return commands.BNSetContentType(state.selection.from, {
-                name: "textContent",
+            if (selectionAtBlockStart && !isParagraph) {
+              return commands.BNUpdateBlock(state.selection.from, {
+                type: "paragraph",
+                props: {},
               });
             }
 
@@ -376,7 +381,7 @@ export const Block = Node.create<IBlock>({
               state.selection.$anchor.parentOffset === 0;
 
             if (selectionAtBlockStart) {
-              return commands.liftListItem("block");
+              return commands.liftListItem("blockContainer");
             }
 
             return false;
@@ -435,7 +440,7 @@ export const Block = Node.create<IBlock>({
               blockEmpty &&
               blockIndented
             ) {
-              return commands.liftListItem("block");
+              return commands.liftListItem("blockContainer");
             }
 
             return false;
@@ -496,62 +501,51 @@ export const Block = Node.create<IBlock>({
     return {
       Backspace: handleBackspace,
       Enter: handleEnter,
-      Tab: () => this.editor.commands.sinkListItem("block"),
-      "Shift-Tab": () => this.editor.commands.liftListItem("block"),
+      // Always returning true for tab key presses ensures they're not captured by the browser. Otherwise, they blur the
+      // editor since the browser will try to use tab for keyboard navigation.
+      Tab: () => {
+        this.editor.commands.sinkListItem("blockContainer");
+        return true;
+      },
+      "Shift-Tab": () => {
+        this.editor.commands.liftListItem("blockContainer");
+        return true;
+      },
       "Mod-Alt-0": () =>
         this.editor.commands.BNCreateBlock(
           this.editor.state.selection.anchor + 2
         ),
       "Mod-Alt-1": () =>
-        this.editor.commands.BNSetContentType(
-          this.editor.state.selection.anchor,
-          {
-            name: "headingContent",
-            attrs: {
-              headingLevel: "1",
-            },
-          }
-        ),
+        this.editor.commands.BNUpdateBlock(this.editor.state.selection.anchor, {
+          type: "heading",
+          props: {
+            level: "1",
+          },
+        }),
       "Mod-Alt-2": () =>
-        this.editor.commands.BNSetContentType(
-          this.editor.state.selection.anchor,
-          {
-            name: "headingContent",
-            attrs: {
-              headingLevel: "2",
-            },
-          }
-        ),
+        this.editor.commands.BNUpdateBlock(this.editor.state.selection.anchor, {
+          type: "heading",
+          props: {
+            level: "2",
+          },
+        }),
       "Mod-Alt-3": () =>
-        this.editor.commands.BNSetContentType(
-          this.editor.state.selection.anchor,
-          {
-            name: "headingContent",
-            attrs: {
-              headingLevel: "3",
-            },
-          }
-        ),
+        this.editor.commands.BNUpdateBlock(this.editor.state.selection.anchor, {
+          type: "heading",
+          props: {
+            level: "3",
+          },
+        }),
       "Mod-Shift-7": () =>
-        this.editor.commands.BNSetContentType(
-          this.editor.state.selection.anchor,
-          {
-            name: "listItemContent",
-            attrs: {
-              listItemType: "unordered",
-            },
-          }
-        ),
+        this.editor.commands.BNUpdateBlock(this.editor.state.selection.anchor, {
+          type: "bulletListItem",
+          props: {},
+        }),
       "Mod-Shift-8": () =>
-        this.editor.commands.BNSetContentType(
-          this.editor.state.selection.anchor,
-          {
-            name: "listItemContent",
-            attrs: {
-              listItemType: "ordered",
-            },
-          }
-        ),
+        this.editor.commands.BNUpdateBlock(this.editor.state.selection.anchor, {
+          type: "numberedListItem",
+          props: {},
+        }),
     };
   },
 });