@blocknote/core 0.3.0 → 0.4.2

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

@@ -0,0 +1,244 @@
+import { Editor } from "@tiptap/core";
+import { Node } from "prosemirror-model";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { BlockNoteEditor, PartialBlock } from "../..";
+import UniqueID from "../../extensions/UniqueID/UniqueID";
+import { blockToNode, nodeToBlock } from "./nodeConversions";
+import { partialBlockToBlockForTesting } from "./testUtil";
+
+let editor: BlockNoteEditor;
+let tt: Editor;
+
+let simpleBlock: PartialBlock;
+let simpleNode: Node;
+
+let complexBlock: PartialBlock;
+let complexNode: Node;
+
+beforeEach(() => {
+  (window as Window & { __TEST_OPTIONS?: {} }).__TEST_OPTIONS = {};
+
+  editor = new BlockNoteEditor();
+  tt = editor._tiptapEditor;
+
+  simpleBlock = {
+    type: "paragraph",
+  };
+  simpleNode = tt.schema.nodes["blockContainer"].create(
+    { id: UniqueID.options.generateID() },
+    tt.schema.nodes["paragraph"].create()
+  );
+
+  complexBlock = {
+    type: "heading",
+    props: {
+      backgroundColor: "blue",
+      textColor: "yellow",
+      textAlignment: "right",
+      level: "2",
+    },
+    content: [
+      {
+        type: "text",
+        text: "Heading ",
+        styles: {
+          bold: true,
+          underline: true,
+        },
+      },
+      {
+        type: "text",
+        text: "2",
+        styles: {
+          italic: true,
+          strike: true,
+        },
+      },
+    ],
+    children: [
+      {
+        type: "paragraph",
+        props: {
+          backgroundColor: "red",
+        },
+        content: "Paragraph",
+        children: [],
+      },
+      {
+        type: "bulletListItem",
+      },
+    ],
+  };
+  complexNode = tt.schema.nodes["blockContainer"].create(
+    {
+      id: UniqueID.options.generateID(),
+      backgroundColor: "blue",
+      textColor: "yellow",
+    },
+    [
+      tt.schema.nodes["heading"].create(
+        { textAlignment: "right", level: "2" },
+        [
+          tt.schema.text("Heading ", [
+            tt.schema.mark("bold"),
+            tt.schema.mark("underline"),
+          ]),
+          tt.schema.text("2", [
+            tt.schema.mark("italic"),
+            tt.schema.mark("strike"),
+          ]),
+        ]
+      ),
+      tt.schema.nodes["blockGroup"].create({}, [
+        tt.schema.nodes["blockContainer"].create(
+          { id: UniqueID.options.generateID(), backgroundColor: "red" },
+          [tt.schema.nodes["paragraph"].create({}, tt.schema.text("Paragraph"))]
+        ),
+        tt.schema.nodes["blockContainer"].create(
+          { id: UniqueID.options.generateID() },
+          [tt.schema.nodes["bulletListItem"].create()]
+        ),
+      ]),
+    ]
+  );
+});
+
+afterEach(() => {
+  tt.destroy();
+  editor = undefined as any;
+  tt = undefined as any;
+
+  delete (window as Window & { __TEST_OPTIONS?: {} }).__TEST_OPTIONS;
+});
+
+describe("Simple ProseMirror Node Conversions", () => {
+  it("Convert simple block to node", async () => {
+    const firstNodeConversion = blockToNode(simpleBlock, tt.schema);
+
+    expect(firstNodeConversion).toMatchSnapshot();
+  });
+
+  it("Convert simple node to block", async () => {
+    const firstBlockConversion = nodeToBlock(simpleNode);
+
+    expect(firstBlockConversion).toMatchSnapshot();
+
+    const firstNodeConversion = blockToNode(firstBlockConversion, tt.schema);
+
+    expect(firstNodeConversion).toStrictEqual(simpleNode);
+  });
+});
+
+describe("Complex ProseMirror Node Conversions", () => {
+  it("Convert complex block to node", async () => {
+    const firstNodeConversion = blockToNode(complexBlock, tt.schema);
+
+    expect(firstNodeConversion).toMatchSnapshot();
+  });
+
+  it("Convert complex node to block", async () => {
+    const firstBlockConversion = nodeToBlock(complexNode);
+
+    expect(firstBlockConversion).toMatchSnapshot();
+
+    const firstNodeConversion = blockToNode(firstBlockConversion, tt.schema);
+
+    expect(firstNodeConversion).toStrictEqual(complexNode);
+  });
+});
+
+describe("links", () => {
+  it("Convert a block with link", async () => {
+    const block: PartialBlock = {
+      id: UniqueID.options.generateID(),
+      type: "paragraph",
+      content: [
+        {
+          type: "link",
+          href: "https://www.website.com",
+          content: "Website",
+        },
+      ],
+    };
+    const node = blockToNode(block, tt.schema);
+    expect(node).toMatchSnapshot();
+    const outputBlock = nodeToBlock(node);
+
+    // Temporary fix to set props to {}, because at this point
+    // we don't have an easy way to access default props at runtime,
+    // so partialBlockToBlockForTesting will not set them.
+    (outputBlock as any).props = {};
+    const fullOriginalBlock = partialBlockToBlockForTesting(block);
+
+    expect(outputBlock).toStrictEqual(fullOriginalBlock);
+  });
+
+  it("Convert link block with marks", async () => {
+    const block: PartialBlock = {
+      id: UniqueID.options.generateID(),
+      type: "paragraph",
+      content: [
+        {
+          type: "link",
+          href: "https://www.website.com",
+          content: [
+            {
+              type: "text",
+              text: "Web",
+              styles: {
+                bold: true,
+              },
+            },
+            {
+              type: "text",
+              text: "site",
+              styles: {},
+            },
+          ],
+        },
+      ],
+    };
+    const node = blockToNode(block, tt.schema);
+    // expect(node).toMatchSnapshot();
+    const outputBlock = nodeToBlock(node);
+
+    // Temporary fix to set props to {}, because at this point
+    // we don't have an easy way to access default props at runtime,
+    // so partialBlockToBlockForTesting will not set them.
+    (outputBlock as any).props = {};
+    const fullOriginalBlock = partialBlockToBlockForTesting(block);
+
+    expect(outputBlock).toStrictEqual(fullOriginalBlock);
+  });
+
+  it("Convert two adjacent links in a block", async () => {
+    const block: PartialBlock = {
+      id: UniqueID.options.generateID(),
+      type: "paragraph",
+      content: [
+        {
+          type: "link",
+          href: "https://www.website.com",
+          content: "Website",
+        },
+        {
+          type: "link",
+          href: "https://www.website2.com",
+          content: "Website2",
+        },
+      ],
+    };
+
+    const node = blockToNode(block, tt.schema);
+    expect(node).toMatchSnapshot();
+    const outputBlock = nodeToBlock(node);
+
+    // Temporary fix to set props to {}, because at this point
+    // we don't have an easy way to access default props at runtime,
+    // so partialBlockToBlockForTesting will not set them.
+    (outputBlock as any).props = {};
+    const fullOriginalBlock = partialBlockToBlockForTesting(block);
+
+    expect(outputBlock).toStrictEqual(fullOriginalBlock);
+  });
+});

package/src/api/nodeConversions/nodeConversions.ts

@@ -0,0 +1,279 @@
+import { Mark } from "@tiptap/pm/model";
+import { Node, Schema } from "prosemirror-model";
+import {
+  Block,
+  blockProps,
+  PartialBlock,
+} from "../../extensions/Blocks/api/blockTypes";
+import {
+  ColorStyles,
+  InlineContent,
+  Link,
+  PartialInlineContent,
+  PartialLink,
+  StyledText,
+  Styles,
+  ToggledStyles,
+} from "../../extensions/Blocks/api/inlineContentTypes";
+import { getBlockInfoFromPos } from "../../extensions/Blocks/helpers/getBlockInfoFromPos";
+import UniqueID from "../../extensions/UniqueID/UniqueID";
+import { UnreachableCaseError } from "../../shared/utils";
+
+const toggleStyles = new Set<ToggledStyles>([
+  "bold",
+  "italic",
+  "underline",
+  "strike",
+]);
+const colorStyles = new Set<ColorStyles>(["textColor", "backgroundColor"]);
+
+/**
+ * Convert a StyledText inline element to a
+ * prosemirror text node with the appropriate marks
+ */
+function styledTextToNode(styledText: StyledText, schema: Schema): Node {
+  const marks: Mark[] = [];
+
+  for (const [style, value] of Object.entries(styledText.styles)) {
+    if (toggleStyles.has(style as ToggledStyles)) {
+      marks.push(schema.mark(style));
+    } else if (colorStyles.has(style as ColorStyles)) {
+      marks.push(schema.mark(style, { color: value }));
+    }
+  }
+
+  return schema.text(styledText.text, marks);
+}
+
+/**
+ * Converts a Link inline content element to
+ * prosemirror text nodes with the appropriate marks
+ */
+function linkToNodes(link: PartialLink, schema: Schema): Node[] {
+  const linkMark = schema.marks.link.create({
+    href: link.href,
+  });
+
+  return styledTextArrayToNodes(link.content, schema).map((node) => {
+    return node.mark([...node.marks, linkMark]);
+  });
+}
+
+/**
+ * Converts an array of StyledText inline content elements to
+ * prosemirror text nodes with the appropriate marks
+ */
+function styledTextArrayToNodes(
+  content: string | StyledText[],
+  schema: Schema
+): Node[] {
+  let nodes: Node[] = [];
+
+  if (typeof content === "string") {
+    nodes.push(schema.text(content));
+    return nodes;
+  }
+
+  for (const styledText of content) {
+    nodes.push(styledTextToNode(styledText, schema));
+  }
+  return nodes;
+}
+
+/**
+ * converts an array of inline content elements to prosemirror nodes
+ */
+export function inlineContentToNodes(
+  blockContent: PartialInlineContent[],
+  schema: Schema
+): Node[] {
+  let nodes: Node[] = [];
+
+  for (const content of blockContent) {
+    if (content.type === "link") {
+      nodes.push(...linkToNodes(content, schema));
+    } else if (content.type === "text") {
+      nodes.push(...styledTextArrayToNodes([content], schema));
+    } else {
+      throw new UnreachableCaseError(content);
+    }
+  }
+  return nodes;
+}
+
+/**
+ * Converts a BlockNote block to a TipTap node.
+ */
+export function blockToNode(block: PartialBlock, schema: Schema) {
+  let id = block.id;
+
+  if (id === undefined) {
+    id = UniqueID.options.generateID();
+  }
+
+  let type = block.type;
+
+  if (type === undefined) {
+    type = "paragraph";
+  }
+
+  let contentNode: Node;
+
+  if (!block.content) {
+    contentNode = schema.nodes[type].create(block.props);
+  } else if (typeof block.content === "string") {
+    contentNode = schema.nodes[type].create(
+      block.props,
+      schema.text(block.content)
+    );
+  } else {
+    const nodes = inlineContentToNodes(block.content, schema);
+    contentNode = schema.nodes[type].create(block.props, nodes);
+  }
+
+  const children: Node[] = [];
+
+  if (block.children) {
+    for (const child of block.children) {
+      children.push(blockToNode(child, schema));
+    }
+  }
+
+  const groupNode = schema.nodes["blockGroup"].create({}, children);
+
+  return schema.nodes["blockContainer"].create(
+    {
+      id: id,
+      ...block.props,
+    },
+    children.length > 0 ? [contentNode, groupNode] : contentNode
+  );
+}
+
+/**
+ * Converts an internal (prosemirror) content node to a BlockNote InlineContent array.
+ */
+function contentNodeToInlineContent(contentNode: Node) {
+  const content: InlineContent[] = [];
+
+  let currentLink: Link | 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 = {};
+
+    let linkMark: Mark | undefined;
+    for (const mark of node.marks) {
+      if (mark.type.name === "link") {
+        linkMark = mark;
+      } else if (toggleStyles.has(mark.type.name as ToggledStyles)) {
+        styles[mark.type.name as ToggledStyles] = true;
+      } else if (colorStyles.has(mark.type.name as ColorStyles)) {
+        styles[mark.type.name as ColorStyles] = mark.attrs.color;
+      } else {
+        throw Error("Mark is of an unrecognized type: " + mark.type.name);
+      }
+    }
+
+    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: [
+          {
+            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;
+    }
+  });
+  return content;
+}
+
+/**
+ * Convert a TipTap node to a BlockNote block.
+ */
+export function nodeToBlock(
+  node: Node,
+  blockCache?: WeakMap<Node, Block>
+): Block {
+  if (node.type.name !== "blockContainer") {
+    throw Error(
+      "Node must be of type blockContainer, but is of type" +
+        node.type.name +
+        "."
+    );
+  }
+
+  const cachedBlock = blockCache?.get(node);
+
+  if (cachedBlock) {
+    return cachedBlock;
+  }
+
+  const blockInfo = getBlockInfoFromPos(node, 0)!;
+
+  let id = blockInfo.id;
+
+  // Only used for blocks converted from other formats.
+  if (id === null) {
+    id = UniqueID.options.generateID();
+  }
+
+  const props: any = {};
+  for (const [attr, value] of Object.entries({
+    ...blockInfo.node.attrs,
+    ...blockInfo.contentNode.attrs,
+  })) {
+    if (!(blockInfo.contentType.name in blockProps)) {
+      throw Error(
+        "Block is of an unrecognized type: " + blockInfo.contentType.name
+      );
+    }
+
+    const validAttrs = blockProps[blockInfo.contentType.name as Block["type"]];
+
+    if (validAttrs.has(attr)) {
+      props[attr] = value;
+    }
+  }
+
+  const content = contentNodeToInlineContent(blockInfo.contentNode);
+
+  const children: Block[] = [];
+  for (let i = 0; i < blockInfo.numChildBlocks; i++) {
+    children.push(nodeToBlock(blockInfo.node.lastChild!.child(i)));
+  }
+
+  const block: Block = {
+    id,
+    type: blockInfo.contentType.name as Block["type"],
+    props,
+    content,
+    children,
+  };
+
+  blockCache?.set(node, block);
+
+  return block;
+}

package/src/api/nodeConversions/testUtil.ts

@@ -0,0 +1,61 @@
+import { Block, PartialBlock } from "../../extensions/Blocks/api/blockTypes";
+import {
+  InlineContent,
+  PartialInlineContent,
+  StyledText,
+} from "../../extensions/Blocks/api/inlineContentTypes";
+
+function textShorthandToStyledText(
+  content: string | StyledText[] = ""
+): StyledText[] {
+  if (typeof content === "string") {
+    return [
+      {
+        type: "text",
+        text: content,
+        styles: {},
+      },
+    ];
+  }
+  return content;
+}
+
+function partialContentToInlineContent(
+  content: string | PartialInlineContent[] = ""
+): InlineContent[] {
+  if (typeof content === "string") {
+    return textShorthandToStyledText(content);
+  }
+
+  return content.map((partialContent) => {
+    if (partialContent.type === "link") {
+      return {
+        ...partialContent,
+        content: textShorthandToStyledText(partialContent.content),
+      };
+    } else {
+      return partialContent;
+    }
+  });
+}
+
+export function partialBlockToBlockForTesting(
+  partialBlock: PartialBlock
+): Block {
+  const withDefaults = {
+    id: "",
+    type: "paragraph" as any,
+    // because at this point we don't have an easy way to access default props at runtime,
+    // partialBlockToBlockForTesting will not set them.
+    props: {} as any,
+    content: [],
+    children: [],
+    ...partialBlock,
+  };
+
+  return {
+    ...withDefaults,
+    content: partialContentToInlineContent(withDefaults.content),
+    children: withDefaults.children.map(partialBlockToBlockForTesting),
+  };
+}

package/src/api/util/nodeUtil.ts

@@ -0,0 +1,38 @@
+import { Node } from "prosemirror-model";
+
+/**
+ * Get a TipTap node by id
+ */
+export function getNodeById(
+  id: string,
+  doc: Node
+): { node: Node; posBeforeNode: number } {
+  let targetNode: Node | undefined = undefined;
+  let posBeforeNode: number | undefined = undefined;
+
+  doc.firstChild!.descendants((node, pos) => {
+    // Skips traversing nodes after node with target ID has been found.
+    if (targetNode) {
+      return false;
+    }
+
+    // Keeps traversing nodes if block with target ID has not been found.
+    if (node.type.name !== "blockContainer" || node.attrs.id !== id) {
+      return true;
+    }
+
+    targetNode = node;
+    posBeforeNode = pos + 1;
+
+    return false;
+  });
+
+  if (targetNode === undefined || posBeforeNode === undefined) {
+    throw Error("Could not find block in the editor with matching ID.");
+  }
+
+  return {
+    node: targetNode,
+    posBeforeNode: posBeforeNode,
+  };
+}

package/src/editor.module.css

@@ -2,6 +2,7 @@
 
 .bnEditor {
   outline: none;
+  margin-left: 50px;
 }
 
 /*
@@ -24,7 +25,8 @@ Tippy popups that are appended to document.body directly
   box-sizing: inherit;
 }
 
-.bnEditor, .dragPreview {
+.bnEditor,
+.dragPreview {
   /* Define a set of colors to be used throughout the app for consistency
   see https://atlassian.design/foundations/color for more info */
   --N800: #172b4d; /* Dark neutral used for tooltips and text on light background */
@@ -38,3 +40,8 @@ Tippy popups that are appended to document.body directly
 
   color: rgb(60, 65, 73);
 }
+
+.dragPreview {
+  position: absolute;
+  top: -1000px;
+}

package/src/extensions/Blocks/PreviousBlockTypePlugin.ts

@@ -24,6 +24,7 @@ const nodeAttributes: Record<string, string> = {
  * Solution: When attributes change on a node, this plugin sets a data-* attribute with the "previous" value. This way we can still use CSS transitions. (See block.module.css)
  */
 export const PreviousBlockTypePlugin = () => {
+  let timeout: any;
   return new Plugin({
     key: PLUGIN_KEY,
     view(_editorView) {
@@ -32,13 +33,18 @@ export const PreviousBlockTypePlugin = () => {
           if (this.key?.getState(view.state).updatedBlocks.size > 0) {
             // use setTimeout 0 to clear the decorations so that at least
             // for one DOM-render the decorations have been applied
-            setTimeout(() => {
+            timeout = setTimeout(() => {
               view.dispatch(
                 view.state.tr.setMeta(PLUGIN_KEY, { clearUpdate: true })
               );
             }, 0);
           }
         },
+        destroy: () => {
+          if (timeout) {
+            clearTimeout(timeout);
+          }
+        },
       };
     },
     state: {