@blocknote/core 0.7.0 → 0.8.0

package/src/api/formatConversions/formatConversions.ts

@@ -7,13 +7,14 @@ import remarkParse from "remark-parse";
 import remarkRehype from "remark-rehype";
 import remarkStringify from "remark-stringify";
 import { unified } from "unified";
-import { Block } from "../../extensions/Blocks/api/blockTypes";
+import { Block, BlockSchema } from "../../extensions/Blocks/api/blockTypes";
+
 import { blockToNode, nodeToBlock } from "../nodeConversions/nodeConversions";
 import { removeUnderlines } from "./removeUnderlinesRehypePlugin";
 import { simplifyBlocks } from "./simplifyBlocksRehypePlugin";
 
-export async function blocksToHTML(
-  blocks: Block[],
+export async function blocksToHTML<BSchema extends BlockSchema>(
+  blocks: Block<BSchema>[],
   schema: Schema
 ): Promise<string> {
   const htmlParentElement = document.createElement("div");
@@ -37,27 +38,28 @@ export async function blocksToHTML(
   return htmlString.value as string;
 }
 
-export async function HTMLToBlocks(
+export async function HTMLToBlocks<BSchema extends BlockSchema>(
   html: string,
+  blockSchema: BSchema,
   schema: Schema
-): Promise<Block[]> {
+): Promise<Block<BSchema>[]> {
   const htmlNode = document.createElement("div");
   htmlNode.innerHTML = html.trim();
 
   const parser = DOMParser.fromSchema(schema);
   const parentNode = parser.parse(htmlNode);
 
-  const blocks: Block[] = [];
+  const blocks: Block<BSchema>[] = [];
 
   for (let i = 0; i < parentNode.firstChild!.childCount; i++) {
-    blocks.push(nodeToBlock(parentNode.firstChild!.child(i)));
+    blocks.push(nodeToBlock(parentNode.firstChild!.child(i), blockSchema));
   }
 
   return blocks;
 }
 
-export async function blocksToMarkdown(
-  blocks: Block[],
+export async function blocksToMarkdown<BSchema extends BlockSchema>(
+  blocks: Block<BSchema>[],
   schema: Schema
 ): Promise<string> {
   const markdownString = await unified()
@@ -71,10 +73,11 @@ export async function blocksToMarkdown(
   return markdownString.value as string;
 }
 
-export async function markdownToBlocks(
+export async function markdownToBlocks<BSchema extends BlockSchema>(
   markdown: string,
+  blockSchema: BSchema,
   schema: Schema
-): Promise<Block[]> {
+): Promise<Block<BSchema>[]> {
   const htmlString = await unified()
     .use(remarkParse)
     .use(remarkGfm)
@@ -82,5 +85,5 @@ export async function markdownToBlocks(
     .use(rehypeStringify)
     .process(markdown);
 
-  return HTMLToBlocks(htmlString.value as string, schema);
+  return HTMLToBlocks(htmlString.value as string, blockSchema, schema);
 }

package/src/api/nodeConversions/nodeConversions.test.ts

@@ -5,14 +5,18 @@ import { BlockNoteEditor, PartialBlock } from "../..";
 import UniqueID from "../../extensions/UniqueID/UniqueID";
 import { blockToNode, nodeToBlock } from "./nodeConversions";
 import { partialBlockToBlockForTesting } from "./testUtil";
+import {
+  defaultBlockSchema,
+  DefaultBlockSchema,
+} from "../../extensions/Blocks/api/defaultBlocks";
 
 let editor: BlockNoteEditor;
 let tt: Editor;
 
-let simpleBlock: PartialBlock;
+let simpleBlock: PartialBlock<DefaultBlockSchema>;
 let simpleNode: Node;
 
-let complexBlock: PartialBlock;
+let complexBlock: PartialBlock<DefaultBlockSchema>;
 let complexNode: Node;
 
 beforeEach(() => {
@@ -119,7 +123,10 @@ describe("Simple ProseMirror Node Conversions", () => {
   });
 
   it("Convert simple node to block", async () => {
-    const firstBlockConversion = nodeToBlock(simpleNode);
+    const firstBlockConversion = nodeToBlock<DefaultBlockSchema>(
+      simpleNode,
+      defaultBlockSchema
+    );
 
     expect(firstBlockConversion).toMatchSnapshot();
 
@@ -137,7 +144,10 @@ describe("Complex ProseMirror Node Conversions", () => {
   });
 
   it("Convert complex node to block", async () => {
-    const firstBlockConversion = nodeToBlock(complexNode);
+    const firstBlockConversion = nodeToBlock<DefaultBlockSchema>(
+      complexNode,
+      defaultBlockSchema
+    );
 
     expect(firstBlockConversion).toMatchSnapshot();
 
@@ -149,7 +159,7 @@ describe("Complex ProseMirror Node Conversions", () => {
 
 describe("links", () => {
   it("Convert a block with link", async () => {
-    const block: PartialBlock = {
+    const block: PartialBlock<DefaultBlockSchema> = {
       id: UniqueID.options.generateID(),
       type: "paragraph",
       content: [
@@ -162,7 +172,10 @@ describe("links", () => {
     };
     const node = blockToNode(block, tt.schema);
     expect(node).toMatchSnapshot();
-    const outputBlock = nodeToBlock(node);
+    const outputBlock = nodeToBlock<DefaultBlockSchema>(
+      node,
+      defaultBlockSchema
+    );
 
     // Temporary fix to set props to {}, because at this point
     // we don't have an easy way to access default props at runtime,
@@ -174,7 +187,7 @@ describe("links", () => {
   });
 
   it("Convert link block with marks", async () => {
-    const block: PartialBlock = {
+    const block: PartialBlock<DefaultBlockSchema> = {
       id: UniqueID.options.generateID(),
       type: "paragraph",
       content: [
@@ -200,7 +213,10 @@ describe("links", () => {
     };
     const node = blockToNode(block, tt.schema);
     // expect(node).toMatchSnapshot();
-    const outputBlock = nodeToBlock(node);
+    const outputBlock = nodeToBlock<DefaultBlockSchema>(
+      node,
+      defaultBlockSchema
+    );
 
     // Temporary fix to set props to {}, because at this point
     // we don't have an easy way to access default props at runtime,
@@ -212,7 +228,7 @@ describe("links", () => {
   });
 
   it("Convert two adjacent links in a block", async () => {
-    const block: PartialBlock = {
+    const block: PartialBlock<DefaultBlockSchema> = {
       id: UniqueID.options.generateID(),
       type: "paragraph",
       content: [
@@ -231,7 +247,10 @@ describe("links", () => {
 
     const node = blockToNode(block, tt.schema);
     expect(node).toMatchSnapshot();
-    const outputBlock = nodeToBlock(node);
+    const outputBlock = nodeToBlock<DefaultBlockSchema>(
+      node,
+      defaultBlockSchema
+    );
 
     // Temporary fix to set props to {}, because at this point
     // we don't have an easy way to access default props at runtime,

package/src/api/nodeConversions/nodeConversions.ts

@@ -2,9 +2,11 @@ import { Mark } from "@tiptap/pm/model";
 import { Node, Schema } from "prosemirror-model";
 import {
   Block,
-  blockProps,
+  BlockSchema,
   PartialBlock,
 } from "../../extensions/Blocks/api/blockTypes";
+
+import { defaultProps } from "../../extensions/Blocks/api/defaultBlocks";
 import {
   ColorStyle,
   InlineContent,
@@ -105,7 +107,10 @@ export function inlineContentToNodes(
 /**
  * Converts a BlockNote block to a TipTap node.
  */
-export function blockToNode(block: PartialBlock, schema: Schema) {
+export function blockToNode<BSchema extends BlockSchema>(
+  block: PartialBlock<BSchema>,
+  schema: Schema
+) {
   let id = block.id;
 
   if (id === undefined) {
@@ -214,10 +219,11 @@ function contentNodeToInlineContent(contentNode: Node) {
 /**
  * Convert a TipTap node to a BlockNote block.
  */
-export function nodeToBlock(
+export function nodeToBlock<BSchema extends BlockSchema>(
   node: Node,
-  blockCache?: WeakMap<Node, Block>
-): Block {
+  blockSchema: BSchema,
+  blockCache?: WeakMap<Node, Block<BSchema>>
+): Block<BSchema> {
   if (node.type.name !== "blockContainer") {
     throw Error(
       "Node must be of type blockContainer, but is of type" +
@@ -246,29 +252,44 @@ export function nodeToBlock(
     ...blockInfo.node.attrs,
     ...blockInfo.contentNode.attrs,
   })) {
-    if (!(blockInfo.contentType.name in blockProps)) {
+    const blockSpec = blockSchema[blockInfo.contentType.name];
+    if (!blockSpec) {
       throw Error(
         "Block is of an unrecognized type: " + blockInfo.contentType.name
       );
     }
 
-    const validAttrs = blockProps[blockInfo.contentType.name as Block["type"]];
+    const propSchema = blockSpec.propSchema;
 
-    if (validAttrs.has(attr)) {
+    if (attr in propSchema) {
       props[attr] = value;
     }
+    // Block ids are stored as node attributes the same way props are, so we
+    // need to ensure we don't attempt to read block ids as props.
+
+    // the second check is for the backgroundColor & textColor props.
+    // Since we want them to be inherited by child blocks, we can't put them on the blockContent node,
+    // and instead have to put them on the blockContainer node.
+    // The blockContainer node is the same for all block types, but some custom blocks might not use backgroundColor & textColor,
+    // so these 2 props are technically unexpected but we shouldn't log a warning.
+    // (this is a bit hacky)
+    else if (attr !== "id" && !(attr in defaultProps)) {
+      console.warn("Block has an unrecognized attribute: " + attr);
+    }
   }
 
   const content = contentNodeToInlineContent(blockInfo.contentNode);
 
-  const children: Block[] = [];
+  const children: Block<BSchema>[] = [];
   for (let i = 0; i < blockInfo.numChildBlocks; i++) {
-    children.push(nodeToBlock(blockInfo.node.lastChild!.child(i)));
+    children.push(
+      nodeToBlock(blockInfo.node.lastChild!.child(i), blockSchema, blockCache)
+    );
   }
 
-  const block: Block = {
+  const block: Block<BSchema> = {
     id,
-    type: blockInfo.contentType.name as Block["type"],
+    type: blockInfo.contentType.name,
     props,
     content,
     children,

package/src/api/nodeConversions/testUtil.ts

@@ -1,4 +1,8 @@
-import { Block, PartialBlock } from "../../extensions/Blocks/api/blockTypes";
+import {
+  Block,
+  BlockSchema,
+  PartialBlock,
+} from "../../extensions/Blocks/api/blockTypes";
 import {
   InlineContent,
   PartialInlineContent,
@@ -39,9 +43,9 @@ function partialContentToInlineContent(
   });
 }
 
-export function partialBlockToBlockForTesting(
-  partialBlock: PartialBlock
-): Block {
+export function partialBlockToBlockForTesting<BSchema extends BlockSchema>(
+  partialBlock: PartialBlock<BSchema>
+): Block<BSchema> {
   const withDefaults = {
     id: "",
     type: "paragraph" as any,

package/src/editor.module.css

@@ -38,7 +38,6 @@ Tippy popups that are appended to document.body directly
 .defaultStyles h3,
 .defaultStyles li {
   all: unset !important;
-  flex-grow: 1 !important;
   margin: 0;
   padding: 0;
   font-size: inherit;

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

@@ -0,0 +1,229 @@
+import { Attribute, Node } from "@tiptap/core";
+import { BlockNoteEditor } from "../../..";
+import styles from "../nodes/Block.module.css";
+import {
+  BlockConfig,
+  BlockSchema,
+  BlockSpec,
+  PropSchema,
+  TipTapNode,
+  TipTapNodeConfig,
+} from "./blockTypes";
+
+export function camelToDataKebab(str: string): string {
+  return "data-" + str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+
+// Function that uses the 'propSchema' of a blockConfig to create a TipTap
+// node's `addAttributes` property.
+export function propsToAttributes<
+  BType extends string,
+  PSchema extends PropSchema,
+  ContainsInlineContent extends boolean,
+  BSchema extends BlockSchema
+>(
+  blockConfig: Omit<
+    BlockConfig<BType, PSchema, ContainsInlineContent, BSchema>,
+    "render"
+  >
+) {
+  const tiptapAttributes: Record<string, Attribute> = {};
+
+  Object.entries(blockConfig.propSchema).forEach(([name, spec]) => {
+    tiptapAttributes[name] = {
+      default: spec.default,
+      keepOnSplit: true,
+      // Props are displayed in kebab-case as HTML attributes. If a prop's
+      // value is the same as its default, we don't display an HTML
+      // attribute for it.
+      parseHTML: (element) => element.getAttribute(camelToDataKebab(name)),
+      renderHTML: (attributes) =>
+        attributes[name] !== spec.default
+          ? {
+              [camelToDataKebab(name)]: attributes[name],
+            }
+          : {},
+    };
+  });
+
+  return tiptapAttributes;
+}
+
+// Function that uses the 'parse' function of a blockConfig to create a
+// TipTap node's `parseHTML` property. This is only used for parsing content
+// from the clipboard.
+export function parse<
+  BType extends string,
+  PSchema extends PropSchema,
+  ContainsInlineContent extends boolean,
+  BSchema extends BlockSchema
+>(
+  blockConfig: Omit<
+    BlockConfig<BType, PSchema, ContainsInlineContent, BSchema>,
+    "render"
+  >
+) {
+  return [
+    {
+      tag: "div[data-content-type=" + blockConfig.type + "]",
+    },
+  ];
+}
+
+// Function that uses the 'render' function of a blockConfig to create a
+// TipTap node's `renderHTML` property. Since custom blocks use node views,
+// this is only used for serializing content to the clipboard.
+export function render<
+  BType extends string,
+  PSchema extends PropSchema,
+  ContainsInlineContent extends boolean,
+  BSchema extends BlockSchema
+>(
+  blockConfig: Omit<
+    BlockConfig<BType, PSchema, ContainsInlineContent, BSchema>,
+    "render"
+  >,
+  HTMLAttributes: Record<string, any>
+) {
+  // Create blockContent element
+  const blockContent = document.createElement("div");
+  // Add blockContent HTML attribute
+  blockContent.setAttribute("data-content-type", blockConfig.type);
+  // Add props as HTML attributes in kebab-case with "data-" prefix
+  for (const [attribute, value] of Object.entries(HTMLAttributes)) {
+    blockContent.setAttribute(attribute, value);
+  }
+
+  // TODO: This only works for content copied within BlockNote.
+  // Creates contentDOM element to serialize inline content into.
+  let contentDOM: HTMLDivElement | undefined;
+  if (blockConfig.containsInlineContent) {
+    contentDOM = document.createElement("div");
+    blockContent.appendChild(contentDOM);
+  } else {
+    contentDOM = undefined;
+  }
+
+  return contentDOM !== undefined
+    ? {
+        dom: blockContent,
+        contentDOM: contentDOM,
+      }
+    : {
+        dom: blockContent,
+      };
+}
+
+// A function to create custom block for API consumers
+// we want to hide the tiptap node from API consumers and provide a simpler API surface instead
+export function createBlockSpec<
+  BType extends string,
+  PSchema extends PropSchema,
+  ContainsInlineContent extends boolean,
+  BSchema extends BlockSchema
+>(
+  blockConfig: BlockConfig<BType, PSchema, ContainsInlineContent, BSchema>
+): BlockSpec<BType, PSchema> {
+  const node = createTipTapBlock<BType>({
+    name: blockConfig.type,
+    content: blockConfig.containsInlineContent ? "inline*" : "",
+    selectable: blockConfig.containsInlineContent,
+
+    addOptions() {
+      return {
+        editor: undefined,
+      };
+    },
+
+    addAttributes() {
+      return propsToAttributes(blockConfig);
+    },
+
+    parseHTML() {
+      return parse(blockConfig);
+    },
+
+    renderHTML({ HTMLAttributes }) {
+      return render(blockConfig, HTMLAttributes);
+    },
+
+    addNodeView() {
+      return ({ HTMLAttributes, getPos }) => {
+        // Create blockContent element
+        const blockContent = document.createElement("div");
+        // Sets blockContent class
+        blockContent.className = styles.blockContent;
+        // Add blockContent HTML attribute
+        blockContent.setAttribute("data-content-type", blockConfig.type);
+        // Add props as HTML attributes in kebab-case with "data-" prefix
+        for (const [attribute, value] of Object.entries(HTMLAttributes)) {
+          blockContent.setAttribute(attribute, value);
+        }
+
+        // Gets BlockNote editor instance
+        const editor = this.options.editor! as BlockNoteEditor<
+          BSchema & { [k in BType]: BlockSpec<BType, PSchema> }
+        >;
+        // Gets position of the node
+        if (typeof getPos === "boolean") {
+          throw new Error(
+            "Cannot find node position as getPos is a boolean, not a function."
+          );
+        }
+        const pos = getPos();
+        // Gets TipTap editor instance
+        const tipTapEditor = editor._tiptapEditor;
+        // Gets parent blockContainer node
+        const blockContainer = tipTapEditor.state.doc.resolve(pos!).node();
+        // Gets block identifier
+        const blockIdentifier = blockContainer.attrs.id;
+
+        // Get the block
+        const block = editor.getBlock(blockIdentifier)!;
+        if (block.type !== blockConfig.type) {
+          throw new Error("Block type does not match");
+        }
+
+        // Render elements
+        const rendered = blockConfig.render(block as any, editor);
+        // Add inlineContent class to inline content
+        if ("contentDOM" in rendered) {
+          rendered.contentDOM.className = `${
+            rendered.contentDOM.className
+              ? rendered.contentDOM.className + " "
+              : ""
+          }${styles.inlineContent}`;
+        }
+        // Add elements to blockContent
+        blockContent.appendChild(rendered.dom);
+
+        return "contentDOM" in rendered
+          ? {
+              dom: blockContent,
+              contentDOM: rendered.contentDOM,
+            }
+          : {
+              dom: blockContent,
+            };
+      };
+    },
+  });
+
+  return {
+    node: node,
+    propSchema: blockConfig.propSchema,
+  };
+}
+
+export function createTipTapBlock<Type extends string>(
+  config: TipTapNodeConfig<Type>
+): TipTapNode<Type> {
+  // Type cast is needed as Node.name is mutable, though there is basically no
+  // reason to change it after creation. Alternative is to wrap Node in a new
+  // class, which I don't think is worth it since we'd only be changing 1
+  // attribute to be read only.
+  return Node.create({
+    ...config,
+    group: "blockContent",
+  }) as TipTapNode<Type>;
+}