@blocknote/core 0.3.0 → 0.4.2

package/src/extensions/Blocks/api/blockTypes.ts

@@ -0,0 +1,90 @@
+/** Define the main block types **/
+
+import { InlineContent, PartialInlineContent } from "./inlineContentTypes";
+
+export type BlockTemplate<
+  // Type of the block.
+  // Examples might include: "paragraph", "heading", or "bulletListItem".
+  Type extends string,
+  // Changeable props which affect the block's behaviour or appearance.
+  // An example might be: { textAlignment: "left" | "right" | "center" } for a paragraph block.
+  Props extends Record<string, string>
+> = {
+  id: string;
+  type: Type;
+  props: Props;
+  content: InlineContent[];
+  children: Block[];
+};
+
+export type DefaultBlockProps = {
+  backgroundColor: string;
+  textColor: string;
+  textAlignment: "left" | "center" | "right" | "justify";
+};
+
+export type NumberedListItemBlock = BlockTemplate<
+  "numberedListItem",
+  DefaultBlockProps
+>;
+
+export type BulletListItemBlock = BlockTemplate<
+  "bulletListItem",
+  DefaultBlockProps
+>;
+
+export type HeadingBlock = BlockTemplate<
+  "heading",
+  DefaultBlockProps & {
+    level: "1" | "2" | "3";
+  }
+>;
+
+export type ParagraphBlock = BlockTemplate<"paragraph", DefaultBlockProps>;
+
+export type Block =
+  | ParagraphBlock
+  | HeadingBlock
+  | BulletListItemBlock
+  | NumberedListItemBlock;
+
+export type BlockIdentifier = string | Block;
+
+/** Define "Partial Blocks", these are for updating or creating blocks */
+export type PartialBlockTemplate<B extends Block> = B extends Block
+  ? Partial<Omit<B, "props" | "children" | "content" | "type">> & {
+      type?: B["type"];
+      props?: Partial<B["props"]>;
+      content?: string | PartialInlineContent[];
+      children?: PartialBlock[];
+    }
+  : never;
+
+export type PartialBlock = PartialBlockTemplate<Block>;
+
+export type BlockPropsTemplate<Props> = Props extends Block["props"]
+  ? keyof Props
+  : never;
+
+/**
+ * Expose blockProps. This is currently not very nice, but it's expected this
+ * will change anyway once we allow for custom blocks
+ */
+
+export const globalProps: Array<keyof DefaultBlockProps> = [
+  "backgroundColor",
+  "textColor",
+  "textAlignment",
+];
+
+export const blockProps: Record<Block["type"], Set<string>> = {
+  paragraph: new Set<keyof ParagraphBlock["props"]>([...globalProps]),
+  heading: new Set<keyof HeadingBlock["props"]>([
+    ...globalProps,
+    "level" as const,
+  ]),
+  numberedListItem: new Set<keyof NumberedListItemBlock["props"]>([
+    ...globalProps,
+  ]),
+  bulletListItem: new Set<keyof BulletListItemBlock["props"]>([...globalProps]),
+};

package/src/extensions/Blocks/api/cursorPositionTypes.ts

@@ -0,0 +1,5 @@
+import { Block } from "./blockTypes";
+
+export type TextCursorPosition = {
+  block: Block;
+};

package/src/extensions/Blocks/api/inlineContentTypes.ts

@@ -0,0 +1,35 @@
+export type Styles = {
+  bold?: true;
+  italic?: true;
+  underline?: true;
+  strike?: true;
+  textColor?: string;
+  backgroundColor?: string;
+};
+
+export type ToggledStyles = {
+  [K in keyof Styles]-?: Required<Styles>[K] extends true ? K : never;
+}[keyof Styles];
+
+export type ColorStyles = {
+  [K in keyof Styles]-?: Required<Styles>[K] extends string ? K : never;
+}[keyof Styles];
+
+export type StyledText = {
+  type: "text";
+  text: string;
+  styles: Styles;
+};
+
+export type Link = {
+  type: "link";
+  href: string;
+  content: StyledText[];
+};
+
+export type PartialLink = Omit<Link, "content"> & {
+  content: string | Link["content"];
+};
+
+export type InlineContent = StyledText | Link;
+export type PartialInlineContent = StyledText | PartialLink;

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

@@ -22,7 +22,7 @@ export function getBlockInfoFromPos(
   doc: Node,
   posInBlock: number
 ): BlockInfo | undefined {
-  if (posInBlock <= 0 || posInBlock > doc.nodeSize) {
+  if (posInBlock < 0 || posInBlock > doc.nodeSize) {
     return undefined;
   }
 
@@ -32,11 +32,11 @@ export function getBlockInfoFromPos(
   let node = $pos.node(maxDepth);
   let depth = maxDepth;
 
-  while (depth >= 0) {
-    // If the outermost node is not a block, it means the position does not lie within a block.
-    if (depth === 0) {
+  while (true) {
+    if (depth < 0) {
       return undefined;
     }
+
     if (node.type.name === "blockContainer") {
       break;
     }

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

@@ -35,6 +35,7 @@ BASIC STYLES
 .blockContent h2,
 .blockContent h3,
 .blockContent li {
+  all: unset;
   margin: 0;
   padding: 0;
   font-size: inherit;
@@ -150,75 +151,79 @@ NESTED BLOCKS
 
 /* Ordered */
 [data-content-type="numberedListItem"] {
-  --index: attr(data-index)
+  --index: attr(data-index);
 }
 
 [data-prev-type="numberedListItem"] {
-  --prev-index: attr(data-prev-index)
+  --prev-index: attr(data-prev-index);
 }
 
 .blockOuter[data-prev-type="numberedListItem"]:not([data-prev-index="none"])
-> .block
-> .blockContent::before {
+  > .block
+  > .blockContent::before {
   margin-right: 1.2em;
-  content: var(--prev-index)".";
+  content: var(--prev-index) ".";
 }
 
 .blockOuter:not([data-prev-type])
-> .block
-> .blockContent[data-content-type="numberedListItem"]::before {
+  > .block
+  > .blockContent[data-content-type="numberedListItem"]::before {
   margin-right: 1.2em;
-  content: var(--index)".";
+  content: var(--index) ".";
 }
 
 /* Unordered */
 /* No list nesting */
-.blockOuter[data-prev-type="bulletListItem"]
-> .block
-> .blockContent::before {
+.blockOuter[data-prev-type="bulletListItem"] > .block > .blockContent::before {
   margin-right: 1.2em;
   content: "•";
 }
 
 .blockOuter:not([data-prev-type])
-> .block
-> .blockContent[data-content-type="bulletListItem"]::before {
+  > .block
+  > .blockContent[data-content-type="bulletListItem"]::before {
   margin-right: 1.2em;
   content: "•";
 }
 
 /* 1 level of list nesting */
-[data-content-type="bulletListItem"]~.blockGroup
-> .blockOuter[data-prev-type="bulletListItem"]
-> .block
-> .blockContent::before {
+[data-content-type="bulletListItem"]
+  ~ .blockGroup
+  > .blockOuter[data-prev-type="bulletListItem"]
+  > .block
+  > .blockContent::before {
   margin-right: 1.2em;
   content: "◦";
 }
 
-[data-content-type="bulletListItem"]~.blockGroup
-> .blockOuter:not([data-prev-type])
-> .block
-> .blockContent[data-content-type="bulletListItem"]::before {
+[data-content-type="bulletListItem"]
+  ~ .blockGroup
+  > .blockOuter:not([data-prev-type])
+  > .block
+  > .blockContent[data-content-type="bulletListItem"]::before {
   margin-right: 1.2em;
   content: "◦";
 }
 
 /* 2 levels of list nesting */
-[data-content-type="bulletListItem"]~.blockGroup
-[data-content-type="bulletListItem"]~.blockGroup
-> .blockOuter[data-prev-type="bulletListItem"]
-> .block
-> .blockContent::before {
+[data-content-type="bulletListItem"]
+  ~ .blockGroup
+  [data-content-type="bulletListItem"]
+  ~ .blockGroup
+  > .blockOuter[data-prev-type="bulletListItem"]
+  > .block
+  > .blockContent::before {
   margin-right: 1.2em;
   content: "▪";
 }
 
-[data-content-type="bulletListItem"]~.blockGroup
-[data-content-type="bulletListItem"]~.blockGroup
-> .blockOuter:not([data-prev-type])
-> .block
-> .blockContent[data-content-type="bulletListItem"]::before {
+[data-content-type="bulletListItem"]
+  ~ .blockGroup
+  [data-content-type="bulletListItem"]
+  ~ .blockGroup
+  > .blockOuter:not([data-prev-type])
+  > .block
+  > .blockContent[data-content-type="bulletListItem"]::before {
   margin-right: 1.2em;
   content: "▪";
 }
@@ -251,15 +256,13 @@ NESTED BLOCKS
   content: "Type to filter";
 }
 
-.blockContent[data-content-type="heading"].isEmpty
-  > :first-child::before {
+.blockContent[data-content-type="heading"].isEmpty > :first-child::before {
   content: "Heading";
 }
 
-.blockContent[data-content-type="bulletListItem"].isEmpty
-> :first-child:before,
+.blockContent[data-content-type="bulletListItem"].isEmpty > :first-child:before,
 .blockContent[data-content-type="numberedListItem"].isEmpty
-> :first-child:before {
+  > :first-child:before {
   content: "List";
 }
 

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

@@ -1,7 +1,11 @@
 import { mergeAttributes, Node } from "@tiptap/core";
-import { Fragment, Slice } from "prosemirror-model";
+import { Fragment, Node as PMNode, Slice } from "prosemirror-model";
 import { TextSelection } from "prosemirror-state";
-import { BlockUpdate } from "../apiTypes";
+import {
+  blockToNode,
+  inlineContentToNodes,
+} from "../../../api/nodeConversions/nodeConversions";
+import { PartialBlock } from "../api/blockTypes";
 import { getBlockInfoFromPos } from "../helpers/getBlockInfoFromPos";
 import { PreviousBlockTypePlugin } from "../PreviousBlockTypePlugin";
 import styles from "./Block.module.css";
@@ -19,13 +23,10 @@ declare module "@tiptap/core" {
       BNDeleteBlock: (posInBlock: number) => ReturnType;
       BNMergeBlocks: (posBetweenBlocks: number) => ReturnType;
       BNSplitBlock: (posInBlock: number, keepType: boolean) => ReturnType;
-      BNUpdateBlock: (
-        posInBlock: number,
-        blockUpdate: BlockUpdate
-      ) => ReturnType;
+      BNUpdateBlock: (posInBlock: number, block: PartialBlock) => ReturnType;
       BNCreateOrUpdateBlock: (
         posInBlock: number,
-        blockUpdate: BlockUpdate
+        block: PartialBlock
       ) => ReturnType;
     };
   }
@@ -197,8 +198,7 @@ export const BlockContainer = Node.create<IBlock>({
           }
 
           // Deletes next block and adds its text content to the nearest previous block.
-          // TODO: Is there any situation where we need the whole block content, not just text? Implementation for this
-          //  is trickier.
+          // TODO: Use slices.
           if (dispatch) {
             state.tr.deleteRange(startPos, startPos + contentNode.nodeSize);
             state.tr.insertText(contentNode.textContent, prevBlockEndPos - 1);
@@ -283,35 +283,86 @@ export const BlockContainer = Node.create<IBlock>({
 
           return true;
         },
-      // Updates the type and attributes of a block at a given position.
+      // Updates a block to the given specification.
       BNUpdateBlock:
-        (posInBlock, blockUpdate) =>
+        (posInBlock, block) =>
         ({ state, dispatch }) => {
           const blockInfo = getBlockInfoFromPos(state.doc, posInBlock);
           if (blockInfo === undefined) {
             return false;
           }
 
-          const { node, startPos, contentNode } = blockInfo;
+          const { startPos, endPos, node, contentNode } = blockInfo;
 
           if (dispatch) {
-            state.tr.setBlockType(
-              startPos + 1,
-              startPos + contentNode.nodeSize + 1,
-              state.schema.node(blockUpdate.type).type,
+            // Adds blockGroup node with child blocks if necessary.
+            if (block.children !== undefined) {
+              const childNodes = [];
+
+              // Creates ProseMirror nodes for each child block, including their descendants.
+              for (const child of block.children) {
+                childNodes.push(blockToNode(child, state.schema));
+              }
+
+              // Checks if a blockGroup node already exists.
+              if (node.childCount === 2) {
+                // Replaces all child nodes in the existing blockGroup with the ones created earlier.
+                state.tr.replace(
+                  startPos + contentNode.nodeSize + 1,
+                  endPos - 1,
+                  new Slice(Fragment.from(childNodes), 0, 0)
+                );
+              } else {
+                // Inserts a new blockGroup containing the child nodes created earlier.
+                state.tr.insert(
+                  startPos + contentNode.nodeSize,
+                  state.schema.nodes["blockGroup"].create({}, childNodes)
+                );
+              }
+            }
+
+            // Replaces the blockContent node's content if necessary.
+            if (block.content !== undefined) {
+              let content: PMNode[] = [];
+
+              // Checks if the provided content is a string or InlineContent[] type.
+              if (typeof block.content === "string") {
+                // Adds a single text node with no marks to the content.
+                content.push(state.schema.text(block.content));
+              } else {
+                // Adds a text node with the provided styles converted into marks to the content, for each InlineContent
+                // object.
+                content = inlineContentToNodes(block.content, state.schema);
+              }
+
+              // Replaces the contents of the blockContent node with the previously created text node(s).
+              state.tr.replace(
+                startPos + 1,
+                startPos + contentNode.nodeSize - 1,
+                new Slice(Fragment.from(content), 0, 0)
+              );
+            }
+
+            // Changes the block type and adds the provided props as node attributes. Also preserves all existing node
+            // attributes that are compatible with the new type.
+            state.tr.setNodeMarkup(
+              startPos,
+              block.type === undefined
+                ? undefined
+                : state.schema.nodes[block.type],
               {
-                ...node.attrs,
-                ...blockUpdate.props,
+                ...contentNode.attrs,
+                ...block.props,
               }
             );
           }
 
           return true;
         },
-      // 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.
+      // Updates a block to the given specification if it's empty, otherwise creates a new block from that specification
+      // below it.
       BNCreateOrUpdateBlock:
-        (posInBlock, blockUpdate) =>
+        (posInBlock, block) =>
         ({ state, chain }) => {
           const blockInfo = getBlockInfoFromPos(state.doc, posInBlock);
           if (blockInfo === undefined) {
@@ -324,7 +375,7 @@ export const BlockContainer = Node.create<IBlock>({
             const oldBlockContentPos = startPos + 1;
 
             return chain()
-              .BNUpdateBlock(posInBlock, blockUpdate)
+              .BNUpdateBlock(posInBlock, block)
               .setTextSelection(oldBlockContentPos)
               .run();
           } else {
@@ -333,7 +384,7 @@ export const BlockContainer = Node.create<IBlock>({
 
             return chain()
               .BNCreateBlock(newBlockInsertionPos)
-              .BNUpdateBlock(newBlockContentPos, blockUpdate)
+              .BNUpdateBlock(newBlockContentPos, block)
               .setTextSelection(newBlockContentPos)
               .run();
           }

package/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts

@@ -33,6 +33,7 @@ export const BulletListItemBlockContent = Node.create({
 
   parseHTML() {
     return [
+      // Case for regular HTML list structure.
       {
         tag: "li",
         getAttrs: (element) => {
@@ -46,18 +47,35 @@ export const BulletListItemBlockContent = Node.create({
             return false;
           }
 
-          // Case for BlockNote list structure.
-          if (parent.getAttribute("data-content-type") === "bulletListItem") {
+          if (parent.tagName === "UL") {
             return {};
           }
 
-          // Case for regular HTML list structure.
-          if (parent.tagName === "UL") {
+          return false;
+        },
+        node: "blockContainer",
+      },
+      // Case for BlockNote list structure.
+      {
+        tag: "p",
+        getAttrs: (element) => {
+          if (typeof element === "string") {
+            return false;
+          }
+
+          const parent = element.parentElement;
+
+          if (parent === null) {
+            return false;
+          }
+
+          if (parent.getAttribute("data-content-type") === "bulletListItem") {
             return {};
           }
 
           return false;
         },
+        priority: 300,
         node: "blockContainer",
       },
     ];
@@ -70,7 +88,7 @@ export const BulletListItemBlockContent = Node.create({
         class: styles.blockContent,
         "data-content-type": this.name,
       }),
-      ["li", 0],
+      ["p", 0],
     ];
   },
 });

package/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.ts

@@ -1,7 +1,7 @@
 import { InputRule, mergeAttributes, Node } from "@tiptap/core";
-import { NumberedListIndexingPlugin } from "./NumberedListIndexingPlugin";
 import styles from "../../../Block.module.css";
 import { handleEnter } from "../ListItemKeyboardShortcuts";
+import { NumberedListIndexingPlugin } from "./NumberedListIndexingPlugin";
 
 export const NumberedListItemBlockContent = Node.create({
   name: "numberedListItem",
@@ -52,6 +52,8 @@ export const NumberedListItemBlockContent = Node.create({
 
   parseHTML() {
     return [
+      // Case for regular HTML list structure.
+      // (e.g.: when pasting from other apps)
       {
         tag: "li",
         getAttrs: (element) => {
@@ -65,18 +67,36 @@ export const NumberedListItemBlockContent = Node.create({
             return false;
           }
 
-          // Case for BlockNote list structure.
-          if (parent.getAttribute("data-content-type") === "numberedListItem") {
+          if (parent.tagName === "OL") {
             return {};
           }
 
-          // Case for regular HTML list structure.
-          if (parent.tagName === "OL") {
+          return false;
+        },
+        node: "blockContainer",
+      },
+      // Case for BlockNote list structure.
+      // (e.g.: when pasting from blocknote)
+      {
+        tag: "p",
+        getAttrs: (element) => {
+          if (typeof element === "string") {
+            return false;
+          }
+
+          const parent = element.parentElement;
+
+          if (parent === null) {
+            return false;
+          }
+
+          if (parent.getAttribute("data-content-type") === "numberedListItem") {
             return {};
           }
 
           return false;
         },
+        priority: 300,
         node: "blockContainer",
       },
     ];
@@ -89,7 +109,9 @@ export const NumberedListItemBlockContent = Node.create({
         class: styles.blockContent,
         "data-content-type": this.name,
       }),
-      ["li", 0],
+      // we use a <p> tag, because for <li> tags we'd need to add a <ul> parent for around siblings to be semantically correct,
+      // which would be quite cumbersome
+      ["p", 0],
     ];
   },
 });