@blocknote/core 0.16.0 → 0.17.0

package/src/api/getBlockInfoFromPos.ts

@@ -1,114 +1,196 @@
-import { Node, NodeType } from "prosemirror-model";
+import { Node, ResolvedPos } from "prosemirror-model";
+import { EditorState } from "prosemirror-state";
 
-export type BlockInfoWithoutPositions = {
-  id: string;
+type SingleBlockInfo = {
   node: Node;
-  contentNode: Node;
-  contentType: NodeType;
-  numChildBlocks: number;
+  beforePos: number;
+  afterPos: number;
 };
 
-export type BlockInfo = BlockInfoWithoutPositions & {
-  startPos: number;
-  endPos: number;
-  depth: number;
+export type BlockInfo = {
+  blockContainer: SingleBlockInfo;
+  blockContent: SingleBlockInfo;
+  blockGroup?: SingleBlockInfo;
 };
 
 /**
- * Helper function for `getBlockInfoFromPos`, returns information regarding
- * provided blockContainer node.
- * @param blockContainer The blockContainer node to retrieve info for.
+ * Retrieves the position just before the nearest blockContainer node in a
+ * ProseMirror doc, relative to a position. If the position is within a
+ * blockContainer node or its descendants, the position just before it is
+ * returned. If the position is not within a blockContainer node or its
+ * descendants, the position just before the next closest blockContainer node
+ * is returned. If the position is beyond the last blockContainer, the position
+ * just before the last blockContainer is returned.
+ * @param doc The ProseMirror doc.
+ * @param pos An integer position in the document.
+ * @returns The position just before the nearest blockContainer node.
  */
-export function getBlockInfo(blockContainer: Node): BlockInfoWithoutPositions {
-  const id = blockContainer.attrs["id"];
-  const contentNode = blockContainer.firstChild!;
-  const contentType = contentNode.type;
-  const numChildBlocks =
-    blockContainer.childCount === 2 ? blockContainer.lastChild!.childCount : 0;
+export function getNearestBlockContainerPos(doc: Node, pos: number) {
+  const $pos = doc.resolve(pos);
 
-  return {
-    id,
-    node: blockContainer,
-    contentNode,
-    contentType,
-    numChildBlocks,
-  };
-}
+  // Checks if the position provided is already just before a blockContainer
+  // node, in which case we return the position.
+  if ($pos.nodeAfter && $pos.nodeAfter.type.name === "blockContainer") {
+    return {
+      posBeforeNode: $pos.pos,
+      node: $pos.nodeAfter,
+    };
+  }
 
-/**
- * Retrieves information regarding the nearest blockContainer node in a
- * ProseMirror doc, relative to a position.
- * @param doc The ProseMirror doc.
- * @param pos An integer position.
- * @returns A BlockInfo object for the nearest blockContainer node.
- */
-export function getBlockInfoFromPos(doc: Node, pos: number): BlockInfo {
-  // If the position is outside the outer block group, we need to move it to the
-  // nearest block. This happens when the collaboration plugin is active, where
-  // the selection is placed at the very end of the doc.
-  const outerBlockGroupStartPos = 1;
-  const outerBlockGroupEndPos = doc.nodeSize - 2;
-  if (pos <= outerBlockGroupStartPos) {
-    pos = outerBlockGroupStartPos + 1;
-
-    while (
-      doc.resolve(pos).parent.type.name !== "blockContainer" &&
-      pos < outerBlockGroupEndPos
-    ) {
-      pos++;
-    }
-  } else if (pos >= outerBlockGroupEndPos) {
-    pos = outerBlockGroupEndPos - 1;
-
-    while (
-      doc.resolve(pos).parent.type.name !== "blockContainer" &&
-      pos > outerBlockGroupStartPos
-    ) {
-      pos--;
+  // Checks the node containing the position and its ancestors until a
+  // blockContainer node is found and returned.
+  let depth = $pos.depth;
+  let node = $pos.node(depth);
+  while (depth > 0) {
+    if (node.type.name === "blockContainer") {
+      return {
+        posBeforeNode: $pos.before(depth),
+        node: node,
+      };
     }
-  }
 
-  // This gets triggered when a node selection on a block is active, i.e. when
-  // you drag and drop a block.
-  if (doc.resolve(pos).parent.type.name === "blockGroup") {
-    pos++;
+    depth--;
+    node = $pos.node(depth);
   }
 
-  const $pos = doc.resolve(pos);
+  // If the position doesn't lie within a blockContainer node, we instead find
+  // the position of the next closest one. If the position is beyond the last
+  // blockContainer, we return the position of the last blockContainer. While
+  // running `doc.descendants` is expensive, this case should be very rarely
+  // triggered. However, it's possible for the position to sometimes be beyond
+  // the last blockContainer node. This is a problem specifically when using the
+  // collaboration plugin.
+  const allBlockContainerPositions: number[] = [];
+  doc.descendants((node, pos) => {
+    if (node.type.name === "blockContainer") {
+      allBlockContainerPositions.push(pos);
+    }
+  });
 
-  const maxDepth = $pos.depth;
-  let node = $pos.node(maxDepth);
-  let depth = maxDepth;
+  // eslint-disable-next-line no-console
+  console.warn(`Position ${pos} is not within a blockContainer node.`);
 
-  // eslint-disable-next-line no-constant-condition
-  while (true) {
-    if (depth < 0) {
-      throw new Error(
-        "Could not find blockContainer node. This can only happen if the underlying BlockNote schema has been edited."
-      );
-    }
+  const resolvedPos = doc.resolve(
+    allBlockContainerPositions.find((position) => position >= pos) ||
+      allBlockContainerPositions[allBlockContainerPositions.length - 1]
+  );
+  return {
+    posBeforeNode: resolvedPos.pos,
+    node: resolvedPos.nodeAfter!,
+  };
+}
 
-    if (node.type.name === "blockContainer") {
-      break;
+/**
+ * Gets information regarding the ProseMirror nodes that make up a block in a
+ * BlockNote document. This includes the main `blockContainer` node, the
+ * `blockContent` node with the block's main body, and the optional `blockGroup`
+ * node which contains the block's children. As well as the nodes, also returns
+ * the ProseMirror positions just before & after each node.
+ * @param node The main `blockContainer` node that the block information should
+ * be retrieved from,
+ * @param blockContainerBeforePosOffset the position just before the
+ * `blockContainer` node in the document.
+ */
+export function getBlockInfoWithManualOffset(
+  node: Node,
+  blockContainerBeforePosOffset: number
+): BlockInfo {
+  const blockContainerNode = node;
+  const blockContainerBeforePos = blockContainerBeforePosOffset;
+  const blockContainerAfterPos =
+    blockContainerBeforePos + blockContainerNode.nodeSize;
+
+  const blockContainer: SingleBlockInfo = {
+    node: blockContainerNode,
+    beforePos: blockContainerBeforePos,
+    afterPos: blockContainerAfterPos,
+  };
+  let blockContent: SingleBlockInfo | undefined = undefined;
+  let blockGroup: SingleBlockInfo | undefined = undefined;
+
+  blockContainerNode.forEach((node, offset) => {
+    if (node.type.spec.group === "blockContent") {
+      // console.log(beforePos, offset);
+      const blockContentNode = node;
+      const blockContentBeforePos = blockContainerBeforePos + offset + 1;
+      const blockContentAfterPos = blockContentBeforePos + node.nodeSize;
+
+      blockContent = {
+        node: blockContentNode,
+        beforePos: blockContentBeforePos,
+        afterPos: blockContentAfterPos,
+      };
+    } else if (node.type.name === "blockGroup") {
+      const blockGroupNode = node;
+      const blockGroupBeforePos = blockContainerBeforePos + offset + 1;
+      const blockGroupAfterPos = blockGroupBeforePos + node.nodeSize;
+
+      blockGroup = {
+        node: blockGroupNode,
+        beforePos: blockGroupBeforePos,
+        afterPos: blockGroupAfterPos,
+      };
     }
+  });
 
-    depth -= 1;
-    node = $pos.node(depth);
+  if (!blockContent) {
+    throw new Error(
+      `blockContainer node does not contain a blockContent node in its children: ${blockContainerNode}`
+    );
   }
 
-  const { id, contentNode, contentType, numChildBlocks } = getBlockInfo(node);
-
-  const startPos = $pos.start(depth);
-  const endPos = $pos.end(depth);
-
   return {
-    id,
-    node,
-    contentNode,
-    contentType,
-    numChildBlocks,
-    startPos,
-    endPos,
-    depth,
+    blockContainer,
+    blockContent,
+    blockGroup,
   };
 }
+
+/**
+ * Gets information regarding the ProseMirror nodes that make up a block in a
+ * BlockNote document. This includes the main `blockContainer` node, the
+ * `blockContent` node with the block's main body, and the optional `blockGroup`
+ * node which contains the block's children. As well as the nodes, also returns
+ * the ProseMirror positions just before & after each node.
+ * @param posInfo An object with the main `blockContainer` node that the block
+ * information should be retrieved from, and the position just before it in the
+ * document.
+ */
+export function getBlockInfo(posInfo: { posBeforeNode: number; node: Node }) {
+  return getBlockInfoWithManualOffset(posInfo.node, posInfo.posBeforeNode);
+}
+
+/**
+ * Gets information regarding the ProseMirror nodes that make up a block from a
+ * resolved position just before the `blockContainer` node in the document that
+ * corresponds to it.
+ * @param resolvedPos The resolved position just before the `blockContainer`
+ * node.
+ */
+export function getBlockInfoFromResolvedPos(resolvedPos: ResolvedPos) {
+  if (!resolvedPos.nodeAfter) {
+    throw new Error(
+      `Attempted to get blockContainer node at position ${resolvedPos.pos} but a node at this position does not exist`
+    );
+  }
+  if (resolvedPos.nodeAfter.type.name !== "blockContainer") {
+    throw new Error(
+      `Attempted to get blockContainer node at position ${resolvedPos.pos} but found node of different type ${resolvedPos.nodeAfter}`
+    );
+  }
+  return getBlockInfoWithManualOffset(resolvedPos.nodeAfter, resolvedPos.pos);
+}
+
+/**
+ * Gets information regarding the ProseMirror nodes that make up a block. The
+ * block chosen is the one currently containing the current ProseMirror
+ * selection.
+ * @param state The ProseMirror editor state.
+ */
+export function getBlockInfoFromSelection(state: EditorState) {
+  const posInfo = getNearestBlockContainerPos(
+    state.doc,
+    state.selection.anchor
+  );
+  return getBlockInfo(posInfo);
+}

package/src/api/nodeConversions/blockToNode.ts

@@ -0,0 +1,257 @@
+import { Mark, Node, Schema } from "@tiptap/pm/model";
+
+import UniqueID from "../../extensions/UniqueID/UniqueID.js";
+import type {
+  InlineContentSchema,
+  PartialCustomInlineContentFromConfig,
+  PartialInlineContent,
+  PartialLink,
+  PartialTableContent,
+  StyleSchema,
+  StyledText,
+} from "../../schema";
+
+import type { PartialBlock } from "../../blocks/defaultBlocks";
+import {
+  isPartialLinkInlineContent,
+  isStyledTextInlineContent,
+} from "../../schema/inlineContent/types.js";
+import { UnreachableCaseError } from "../../util/typescript.js";
+
+/**
+ * Convert a StyledText inline element to a
+ * prosemirror text node with the appropriate marks
+ */
+function styledTextToNodes<T extends StyleSchema>(
+  styledText: StyledText<T>,
+  schema: Schema,
+  styleSchema: T
+): Node[] {
+  const marks: Mark[] = [];
+
+  for (const [style, value] of Object.entries(styledText.styles)) {
+    const config = styleSchema[style];
+    if (!config) {
+      throw new Error(`style ${style} not found in styleSchema`);
+    }
+
+    if (config.propSchema === "boolean") {
+      marks.push(schema.mark(style));
+    } else if (config.propSchema === "string") {
+      marks.push(schema.mark(style, { stringValue: value }));
+    } else {
+      throw new UnreachableCaseError(config.propSchema);
+    }
+  }
+
+  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);
+        }
+      })
+  );
+}
+
+/**
+ * Converts a Link inline content element to
+ * prosemirror text nodes with the appropriate marks
+ */
+function linkToNodes(
+  link: PartialLink<StyleSchema>,
+  schema: Schema,
+  styleSchema: StyleSchema
+): Node[] {
+  const linkMark = schema.marks.link.create({
+    href: link.href,
+  });
+
+  return styledTextArrayToNodes(link.content, schema, styleSchema).map(
+    (node) => {
+      if (node.type.name === "text") {
+        return node.mark([...node.marks, linkMark]);
+      }
+
+      if (node.type.name === "hardBreak") {
+        return node;
+      }
+      throw new Error("unexpected node type");
+    }
+  );
+}
+
+/**
+ * Converts an array of StyledText inline content elements to
+ * prosemirror text nodes with the appropriate marks
+ */
+function styledTextArrayToNodes<S extends StyleSchema>(
+  content: string | StyledText<S>[],
+  schema: Schema,
+  styleSchema: S
+): Node[] {
+  const nodes: Node[] = [];
+
+  if (typeof content === "string") {
+    nodes.push(
+      ...styledTextToNodes(
+        { type: "text", text: content, styles: {} },
+        schema,
+        styleSchema
+      )
+    );
+    return nodes;
+  }
+
+  for (const styledText of content) {
+    nodes.push(...styledTextToNodes(styledText, schema, styleSchema));
+  }
+  return nodes;
+}
+
+/**
+ * converts an array of inline content elements to prosemirror nodes
+ */
+export function inlineContentToNodes<
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  blockContent: PartialInlineContent<I, S>,
+  schema: Schema,
+  styleSchema: S
+): Node[] {
+  const nodes: Node[] = [];
+
+  for (const content of blockContent) {
+    if (typeof content === "string") {
+      nodes.push(...styledTextArrayToNodes(content, schema, styleSchema));
+    } else if (isPartialLinkInlineContent(content)) {
+      nodes.push(...linkToNodes(content, schema, styleSchema));
+    } else if (isStyledTextInlineContent(content)) {
+      nodes.push(...styledTextArrayToNodes([content], schema, styleSchema));
+    } else {
+      nodes.push(
+        blockOrInlineContentToContentNode(content, schema, styleSchema)
+      );
+    }
+  }
+  return nodes;
+}
+
+/**
+ * converts an array of inline content elements to prosemirror nodes
+ */
+export function tableContentToNodes<
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  tableContent: PartialTableContent<I, S>,
+  schema: Schema,
+  styleSchema: StyleSchema
+): Node[] {
+  const rowNodes: Node[] = [];
+
+  for (const row of tableContent.rows) {
+    const columnNodes: Node[] = [];
+    for (const cell of row.cells) {
+      let pNode: Node;
+      if (!cell) {
+        pNode = schema.nodes["tableParagraph"].create({});
+      } else if (typeof cell === "string") {
+        pNode = schema.nodes["tableParagraph"].create({}, schema.text(cell));
+      } else {
+        const textNodes = inlineContentToNodes(cell, schema, styleSchema);
+        pNode = schema.nodes["tableParagraph"].create({}, textNodes);
+      }
+
+      const cellNode = schema.nodes["tableCell"].create({}, pNode);
+      columnNodes.push(cellNode);
+    }
+    const rowNode = schema.nodes["tableRow"].create({}, columnNodes);
+    rowNodes.push(rowNode);
+  }
+  return rowNodes;
+}
+
+function blockOrInlineContentToContentNode(
+  block:
+    | PartialBlock<any, any, any>
+    | PartialCustomInlineContentFromConfig<any, any>,
+  schema: Schema,
+  styleSchema: StyleSchema
+) {
+  let contentNode: Node;
+  let type = block.type;
+
+  // TODO: needed? came from previous code
+  if (type === undefined) {
+    type = "paragraph";
+  }
+
+  if (!schema.nodes[type]) {
+    throw new Error(`node type ${type} not found in schema`);
+  }
+
+  if (!block.content) {
+    contentNode = schema.nodes[type].create(block.props);
+  } else if (typeof block.content === "string") {
+    const nodes = inlineContentToNodes([block.content], schema, styleSchema);
+    contentNode = schema.nodes[type].create(block.props, nodes);
+  } else if (Array.isArray(block.content)) {
+    const nodes = inlineContentToNodes(block.content, schema, styleSchema);
+    contentNode = schema.nodes[type].create(block.props, nodes);
+  } else if (block.content.type === "tableContent") {
+    const nodes = tableContentToNodes(block.content, schema, styleSchema);
+    contentNode = schema.nodes[type].create(block.props, nodes);
+  } else {
+    throw new UnreachableCaseError(block.content.type);
+  }
+  return contentNode;
+}
+
+/**
+ * Converts a BlockNote block to a TipTap node.
+ */
+export function blockToNode(
+  block: PartialBlock<any, any, any>,
+  schema: Schema,
+  styleSchema: StyleSchema
+) {
+  let id = block.id;
+
+  if (id === undefined) {
+    id = UniqueID.options.generateID();
+  }
+
+  const contentNode = blockOrInlineContentToContentNode(
+    block,
+    schema,
+    styleSchema
+  );
+
+  const children: Node[] = [];
+
+  if (block.children) {
+    for (const child of block.children) {
+      children.push(blockToNode(child, schema, styleSchema));
+    }
+  }
+
+  const groupNode = schema.nodes["blockGroup"].create({}, children);
+
+  return schema.nodes["blockContainer"].create(
+    {
+      id: id,
+      ...block.props,
+    },
+    children.length > 0 ? [contentNode, groupNode] : contentNode
+  );
+}

package/src/api/nodeConversions/fragmentToBlocks.ts

@@ -0,0 +1,60 @@
+import { Fragment } from "@tiptap/pm/model";
+import { BlockNoteSchema } from "../../editor/BlockNoteSchema.js";
+import {
+  BlockNoDefaults,
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "../../schema/index.js";
+import { nodeToBlock } from "./nodeToBlock.js";
+
+/**
+ * Converts all Blocks within a fragment to BlockNote blocks.
+ */
+export function fragmentToBlocks<
+  B extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(fragment: Fragment, schema: BlockNoteSchema<B, I, S>) {
+  // first convert selection to blocknote-style blocks, and then
+  // pass these to the exporter
+  const blocks: BlockNoDefaults<B, I, S>[] = [];
+  fragment.descendants((node) => {
+    if (node.type.name === "blockContainer") {
+      if (node.firstChild?.type.name === "blockGroup") {
+        // selection started within a block group
+        // in this case the fragment starts with:
+        // <blockContainer>
+        //   <blockGroup>
+        //     <blockContainer ... />
+        //     <blockContainer ... />
+        //   </blockGroup>
+        // </blockContainer>
+        //
+        // instead of:
+        // <blockContainer>
+        //   <blockContent ... />
+        //   <blockGroup>
+        //     <blockContainer ... />
+        //     <blockContainer ... />
+        //   </blockGroup>
+        // </blockContainer>
+        //
+        // so we don't need to serialize this block, just descend into the children of the blockGroup
+        return true;
+      }
+      blocks.push(
+        nodeToBlock(
+          node,
+          schema.blockSchema,
+          schema.inlineContentSchema,
+          schema.styleSchema
+        )
+      );
+      // don't descend into children, as they're already included in the block returned by nodeToBlock
+      return false;
+    }
+    return true;
+  });
+  return blocks;
+}

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

@@ -1,17 +1,18 @@
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
 
-import { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
 
-import { PartialBlock } from "../../blocks/defaultBlocks";
-import { customBlocksTestCases } from "../testUtil/cases/customBlocks";
-import { customInlineContentTestCases } from "../testUtil/cases/customInlineContent";
-import { customStylesTestCases } from "../testUtil/cases/customStyles";
-import { defaultSchemaTestCases } from "../testUtil/cases/defaultSchema";
+import { PartialBlock } from "../../blocks/defaultBlocks.js";
+import { customBlocksTestCases } from "../testUtil/cases/customBlocks.js";
+import { customInlineContentTestCases } from "../testUtil/cases/customInlineContent.js";
+import { customStylesTestCases } from "../testUtil/cases/customStyles.js";
+import { defaultSchemaTestCases } from "../testUtil/cases/defaultSchema.js";
 import {
   addIdsToBlock,
   partialBlockToBlockForTesting,
-} from "../testUtil/partialBlockTestUtil";
-import { blockToNode, nodeToBlock } from "./nodeConversions";
+} from "../testUtil/partialBlockTestUtil.js";
+import { blockToNode } from "./blockToNode.js";
+import { nodeToBlock } from "./nodeToBlock.js";
 
 function validateConversion(
   block: PartialBlock<any, any, any>,