@blocknote/core 0.4.0 → 0.4.2

package/src/api/nodeConversions/nodeConversions.ts

@@ -1,3 +1,4 @@
+import { Mark } from "@tiptap/pm/model";
 import { Node, Schema } from "prosemirror-model";
 import {
   Block,
@@ -5,12 +6,104 @@ import {
   PartialBlock,
 } from "../../extensions/Blocks/api/blockTypes";
 import {
+  ColorStyles,
   InlineContent,
-  Style,
+  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;
 
@@ -18,24 +111,26 @@ export function blockToNode(block: PartialBlock, schema: Schema) {
     id = UniqueID.options.generateID();
   }
 
-  let content: Node[] = [];
+  let type = block.type;
 
-  if (typeof block.content === "string") {
-    content.push(schema.text(block.content));
-  } else if (typeof block.content === "object") {
-    for (const styledText of block.content) {
-      const marks = [];
+  if (type === undefined) {
+    type = "paragraph";
+  }
 
-      for (const style of styledText.styles) {
-        marks.push(schema.mark(style.type, style.props));
-      }
+  let contentNode: Node;
 
-      content.push(schema.text(styledText.text, marks));
-    }
+  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 contentNode = schema.nodes[block.type].create(block.props, content);
-
   const children: Node[] = [];
 
   if (block.children) {
@@ -55,40 +150,69 @@ export function blockToNode(block: PartialBlock, schema: Schema) {
   );
 }
 
-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;
-    }
+/**
+ * Converts an internal (prosemirror) content node to a BlockNote InlineContent array.
+ */
+function contentNodeToInlineContent(contentNode: Node) {
+  const content: InlineContent[] = [];
 
-    targetNode = node;
-    posBeforeNode = pos + 1;
+  let currentLink: Link | undefined = undefined;
 
-    return false;
-  });
+  // 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 = {};
 
-  if (targetNode === undefined || posBeforeNode === undefined) {
-    throw Error("Could not find block in the editor with matching ID.");
-  }
+    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);
+      }
+    }
 
-  return {
-    node: targetNode,
-    posBeforeNode: posBeforeNode,
-  };
+    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>
@@ -134,22 +258,7 @@ export function nodeToBlock(
     }
   }
 
-  const content: InlineContent[] = [];
-  blockInfo.contentNode.content.forEach((node) => {
-    const styles: Style[] = [];
-
-    for (const mark of node.marks) {
-      styles.push({
-        type: mark.type.name,
-        props: mark.attrs,
-      } as Style);
-    }
-
-    content.push({
-      text: node.textContent,
-      styles,
-    });
-  });
+  const content = contentNodeToInlineContent(blockInfo.contentNode);
 
   const children: Block[] = [];
   for (let i = 0; i < blockInfo.numChildBlocks; i++) {

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;
 }
 
 /*

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

@@ -1,6 +1,6 @@
 /** Define the main block types **/
 
-import { InlineContent } from "./inlineContentTypes";
+import { InlineContent, PartialInlineContent } from "./inlineContentTypes";
 
 export type BlockTemplate<
   // Type of the block.
@@ -17,7 +17,7 @@ export type BlockTemplate<
   children: Block[];
 };
 
-export type GlobalProps = {
+export type DefaultBlockProps = {
   backgroundColor: string;
   textColor: string;
   textAlignment: "left" | "center" | "right" | "justify";
@@ -25,19 +25,22 @@ export type GlobalProps = {
 
 export type NumberedListItemBlock = BlockTemplate<
   "numberedListItem",
-  GlobalProps
+  DefaultBlockProps
 >;
 
-export type BulletListItemBlock = BlockTemplate<"bulletListItem", GlobalProps>;
+export type BulletListItemBlock = BlockTemplate<
+  "bulletListItem",
+  DefaultBlockProps
+>;
 
 export type HeadingBlock = BlockTemplate<
   "heading",
-  GlobalProps & {
+  DefaultBlockProps & {
     level: "1" | "2" | "3";
   }
 >;
 
-export type ParagraphBlock = BlockTemplate<"paragraph", GlobalProps>;
+export type ParagraphBlock = BlockTemplate<"paragraph", DefaultBlockProps>;
 
 export type Block =
   | ParagraphBlock
@@ -45,12 +48,14 @@ export type Block =
   | 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"];
+      type?: B["type"];
       props?: Partial<B["props"]>;
-      content?: string | B["content"];
+      content?: string | PartialInlineContent[];
       children?: PartialBlock[];
     }
   : never;
@@ -66,7 +71,7 @@ export type BlockPropsTemplate<Props> = Props extends Block["props"]
  * will change anyway once we allow for custom blocks
  */
 
-export const globalProps: Array<keyof GlobalProps> = [
+export const globalProps: Array<keyof DefaultBlockProps> = [
   "backgroundColor",
   "textColor",
   "textAlignment",

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

@@ -1,44 +1,35 @@
-export type StyleTemplate<
-  // Type of the style.
-  // Examples might include: "bold", "italic", or "textColor".
-  Type extends string,
-  // Changeable props which affect the style's appearance.
-  // An example might be: { color: string } for a textColor style.
-  Props extends Record<string, string>
-> = {
-  type: Type;
-  props: Props;
+export type Styles = {
+  bold?: true;
+  italic?: true;
+  underline?: true;
+  strike?: true;
+  textColor?: string;
+  backgroundColor?: string;
 };
 
-export type Bold = StyleTemplate<"bold", {}>;
+export type ToggledStyles = {
+  [K in keyof Styles]-?: Required<Styles>[K] extends true ? K : never;
+}[keyof Styles];
 
-export type Italic = StyleTemplate<"italic", {}>;
-
-export type Underline = StyleTemplate<"underline", {}>;
-
-export type Strikethrough = StyleTemplate<"strike", {}>;
-
-export type TextColor = StyleTemplate<"textColor", { color: string }>;
-
-export type BackgroundColor = StyleTemplate<
-  "backgroundColor",
-  { color: string }
->;
-
-export type Link = StyleTemplate<"link", { href: string }>;
-
-export type Style =
-  | Bold
-  | Italic
-  | Underline
-  | Strikethrough
-  | TextColor
-  | BackgroundColor
-  | Link;
+export type ColorStyles = {
+  [K in keyof Styles]-?: Required<Styles>[K] extends string ? K : never;
+}[keyof Styles];
 
 export type StyledText = {
+  type: "text";
   text: string;
-  styles: Style[];
+  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;
+export type InlineContent = StyledText | Link;
+export type PartialInlineContent = StyledText | PartialLink;

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