@blocknote/core 0.7.1-alpha.0 → 0.8.1

package/src/api/nodeConversions/nodeConversions.ts

@@ -2,13 +2,14 @@ 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,
-  Link,
   PartialInlineContent,
   PartialLink,
   StyledText,
@@ -32,7 +33,7 @@ const colorStyles = new Set<ColorStyle>(["textColor", "backgroundColor"]);
  * Convert a StyledText inline element to a
  * prosemirror text node with the appropriate marks
  */
-function styledTextToNode(styledText: StyledText, schema: Schema): Node {
+function styledTextToNodes(styledText: StyledText, schema: Schema): Node[] {
   const marks: Mark[] = [];
 
   for (const [style, value] of Object.entries(styledText.styles)) {
@@ -43,7 +44,22 @@ function styledTextToNode(styledText: StyledText, schema: Schema): Node {
     }
   }
 
-  return schema.text(styledText.text, marks);
+  return (
+    styledText.text
+      // Splits text & line breaks.
+      .split(/(\n)/g)
+      // If the content ends with a line break, an empty string is added to the
+      // end, which this removes.
+      .filter((text) => text.length > 0)
+      // Converts text & line breaks to nodes.
+      .map((text) => {
+        if (text === "\n") {
+          return schema.nodes["hardBreak"].create();
+        } else {
+          return schema.text(text, marks);
+        }
+      })
+  );
 }
 
 /**
@@ -56,7 +72,14 @@ function linkToNodes(link: PartialLink, schema: Schema): Node[] {
   });
 
   return styledTextArrayToNodes(link.content, schema).map((node) => {
-    return node.mark([...node.marks, linkMark]);
+    if (node.type.name === "text") {
+      return node.mark([...node.marks, linkMark]);
+    }
+
+    if (node.type.name === "hardBreak") {
+      return node;
+    }
+    throw new Error("unexpected node type");
   });
 }
 
@@ -71,12 +94,14 @@ function styledTextArrayToNodes(
   let nodes: Node[] = [];
 
   if (typeof content === "string") {
-    nodes.push(schema.text(content));
+    nodes.push(
+      ...styledTextToNodes({ type: "text", text: content, styles: {} }, schema)
+    );
     return nodes;
   }
 
   for (const styledText of content) {
-    nodes.push(styledTextToNode(styledText, schema));
+    nodes.push(...styledTextToNodes(styledText, schema));
   }
   return nodes;
 }
@@ -105,7 +130,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) {
@@ -156,15 +184,39 @@ export function blockToNode(block: PartialBlock, schema: Schema) {
  */
 function contentNodeToInlineContent(contentNode: Node) {
   const content: InlineContent[] = [];
-
-  let currentLink: Link | undefined = undefined;
+  let currentContent: InlineContent | undefined = undefined;
 
   // Most of the logic below is for handling links because in ProseMirror links are marks
   // while in BlockNote links are a type of inline content
   contentNode.content.forEach((node) => {
-    const styles: Styles = {};
+    // hardBreak nodes do not have an InlineContent equivalent, instead we
+    // add a newline to the previous node.
+    if (node.type.name === "hardBreak") {
+      if (currentContent) {
+        // Current content exists.
+        if (currentContent.type === "text") {
+          // Current content is text.
+          currentContent.text += "\n";
+        } else if (currentContent.type === "link") {
+          // Current content is a link.
+          currentContent.content[currentContent.content.length - 1].text +=
+            "\n";
+        }
+      } else {
+        // Current content does not exist.
+        currentContent = {
+          type: "text",
+          text: "\n",
+          styles: {},
+        };
+      }
+
+      return;
+    }
 
+    const styles: Styles = {};
     let linkMark: Mark | undefined;
+
     for (const mark of node.marks) {
       if (mark.type.name === "link") {
         linkMark = mark;
@@ -177,47 +229,132 @@ function contentNodeToInlineContent(contentNode: Node) {
       }
     }
 
-    if (linkMark && currentLink && linkMark.attrs.href === currentLink.href) {
-      // if the node is a link that matches the current link, add it to the current link
-      currentLink.content.push({
-        type: "text",
-        text: node.textContent,
-        styles,
-      });
-    } else if (linkMark) {
-      // if the node is a link that doesn't match the current link, create a new link
-      currentLink = {
-        type: "link",
-        href: linkMark.attrs.href,
-        content: [
-          {
+    // Parsing links and text.
+    // Current content exists.
+    if (currentContent) {
+      // Current content is text.
+      if (currentContent.type === "text") {
+        if (!linkMark) {
+          // Node is text (same type as current content).
+          if (
+            JSON.stringify(currentContent.styles) === JSON.stringify(styles)
+          ) {
+            // Styles are the same.
+            currentContent.text += node.textContent;
+          } else {
+            // Styles are different.
+            content.push(currentContent);
+            currentContent = {
+              type: "text",
+              text: node.textContent,
+              styles,
+            };
+          }
+        } else {
+          // Node is a link (different type to current content).
+          content.push(currentContent);
+          currentContent = {
+            type: "link",
+            href: linkMark.attrs.href,
+            content: [
+              {
+                type: "text",
+                text: node.textContent,
+                styles,
+              },
+            ],
+          };
+        }
+      } else if (currentContent.type === "link") {
+        // Current content is a link.
+        if (linkMark) {
+          // Node is a link (same type as current content).
+          // Link URLs are the same.
+          if (currentContent.href === linkMark.attrs.href) {
+            // Styles are the same.
+            if (
+              JSON.stringify(
+                currentContent.content[currentContent.content.length - 1].styles
+              ) === JSON.stringify(styles)
+            ) {
+              currentContent.content[currentContent.content.length - 1].text +=
+                node.textContent;
+            } else {
+              // Styles are different.
+              currentContent.content.push({
+                type: "text",
+                text: node.textContent,
+                styles,
+              });
+            }
+          } else {
+            // Link URLs are different.
+            content.push(currentContent);
+            currentContent = {
+              type: "link",
+              href: linkMark.attrs.href,
+              content: [
+                {
+                  type: "text",
+                  text: node.textContent,
+                  styles,
+                },
+              ],
+            };
+          }
+        } else {
+          // Node is text (different type to current content).
+          content.push(currentContent);
+          currentContent = {
             type: "text",
             text: node.textContent,
             styles,
-          },
-        ],
-      };
-      content.push(currentLink);
-    } else {
-      // if the node is not a link, add it to the content
-      content.push({
-        type: "text",
-        text: node.textContent,
-        styles,
-      });
-      currentLink = undefined;
+          };
+        }
+      }
+    }
+    // Current content does not exist.
+    else {
+      // Node is text.
+      if (!linkMark) {
+        currentContent = {
+          type: "text",
+          text: node.textContent,
+          styles,
+        };
+      }
+      // Node is a link.
+      else {
+        currentContent = {
+          type: "link",
+          href: linkMark.attrs.href,
+          content: [
+            {
+              type: "text",
+              text: node.textContent,
+              styles,
+            },
+          ],
+        };
+      }
     }
   });
+
+  if (currentContent) {
+    content.push(currentContent);
+  }
+
   return content;
 }
 
 /**
  * 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 +383,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

@@ -2,7 +2,7 @@
 
 .bnEditor {
   outline: none;
-  padding-inline: 50px;
+  padding-inline: 54px;
   border-radius: 8px;
 
   /* Define a set of colors to be used throughout the app for consistency
@@ -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;
@@ -57,13 +56,13 @@ Tippy popups that are appended to document.body directly
 }
 
 [data-theme="light"] {
-  background-color: #ffffff;
-  color: #444444;
+  background-color: #FFFFFF;
+  color: #3F3F3F;
 }
 
 [data-theme="dark"] {
-  background-color: #444444;
-  color: #dddddd;
+  background-color: #1F1F1F;
+  color: #CFCFCF;
 }
 
 .dragPreview {

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>;
+}