@blocknote/core 0.9.5 → 0.10.0

package/src/blocks/defaultBlockHelpers.ts

@@ -0,0 +1,95 @@
+import { blockToNode } from "../api/nodeConversions/nodeConversions";
+import type { BlockNoteEditor } from "../editor/BlockNoteEditor";
+import type {
+  Block,
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "../schema";
+import { mergeCSSClasses } from "../util/browser";
+
+// Function that creates a ProseMirror `DOMOutputSpec` for a default block.
+// Since all default blocks have the same structure (`blockContent` div with a
+// `inlineContent` element inside), this function only needs the block's name
+// for the `data-content-type` attribute of the `blockContent` element and the
+// HTML tag of the `inlineContent` element, as well as any HTML attributes to
+// add to those.
+export function createDefaultBlockDOMOutputSpec(
+  blockName: string,
+  htmlTag: string,
+  blockContentHTMLAttributes: Record<string, string>,
+  inlineContentHTMLAttributes: Record<string, string>
+) {
+  const blockContent = document.createElement("div");
+  blockContent.className = mergeCSSClasses(
+    "bn-block-content",
+    blockContentHTMLAttributes.class
+  );
+  blockContent.setAttribute("data-content-type", blockName);
+  for (const [attribute, value] of Object.entries(blockContentHTMLAttributes)) {
+    if (attribute !== "class") {
+      blockContent.setAttribute(attribute, value);
+    }
+  }
+
+  const inlineContent = document.createElement(htmlTag);
+  inlineContent.className = mergeCSSClasses(
+    "bn-inline-content",
+    inlineContentHTMLAttributes.class
+  );
+  for (const [attribute, value] of Object.entries(
+    inlineContentHTMLAttributes
+  )) {
+    if (attribute !== "class") {
+      inlineContent.setAttribute(attribute, value);
+    }
+  }
+
+  blockContent.appendChild(inlineContent);
+
+  return {
+    dom: blockContent,
+    contentDOM: inlineContent,
+  };
+}
+
+// Function used to convert default blocks to HTML. It uses the corresponding
+// node's `renderHTML` method to do the conversion by using a default
+// `DOMSerializer`.
+export const defaultBlockToHTML = <
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  block: Block<BSchema, I, S>,
+  editor: BlockNoteEditor<BSchema, I, S>
+): {
+  dom: HTMLElement;
+  contentDOM?: HTMLElement;
+} => {
+  const node = blockToNode(
+    block,
+    editor._tiptapEditor.schema,
+    editor.styleSchema
+  ).firstChild!;
+  const toDOM = editor._tiptapEditor.schema.nodes[node.type.name].spec.toDOM;
+
+  if (toDOM === undefined) {
+    throw new Error(
+      "This block has no default HTML serialization as its corresponding TipTap node doesn't implement `renderHTML`."
+    );
+  }
+
+  const renderSpec = toDOM(node);
+
+  if (typeof renderSpec !== "object" || !("dom" in renderSpec)) {
+    throw new Error(
+      "Cannot use this block's default HTML serialization as its corresponding TipTap node's `renderHTML` function does not return an object with the `dom` property."
+    );
+  }
+
+  return renderSpec as {
+    dom: HTMLElement;
+    contentDOM?: HTMLElement;
+  };
+};

package/src/blocks/defaultBlocks.ts

@@ -0,0 +1,60 @@
+import Bold from "@tiptap/extension-bold";
+import Code from "@tiptap/extension-code";
+import Italic from "@tiptap/extension-italic";
+import Strike from "@tiptap/extension-strike";
+import Underline from "@tiptap/extension-underline";
+import { BackgroundColor } from "../extensions/BackgroundColor/BackgroundColorMark";
+import { TextColor } from "../extensions/TextColor/TextColorMark";
+import {
+  BlockSpecs,
+  InlineContentSpecs,
+  StyleSpecs,
+  createStyleSpecFromTipTapMark,
+  getBlockSchemaFromSpecs,
+  getInlineContentSchemaFromSpecs,
+  getStyleSchemaFromSpecs,
+} from "../schema";
+import { Heading } from "./HeadingBlockContent/HeadingBlockContent";
+import { Image } from "./ImageBlockContent/ImageBlockContent";
+import { BulletListItem } from "./ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent";
+import { NumberedListItem } from "./ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent";
+import { Paragraph } from "./ParagraphBlockContent/ParagraphBlockContent";
+import { Table } from "./TableBlockContent/TableBlockContent";
+
+export const defaultBlockSpecs = {
+  paragraph: Paragraph,
+  heading: Heading,
+  bulletListItem: BulletListItem,
+  numberedListItem: NumberedListItem,
+  image: Image,
+  table: Table,
+} satisfies BlockSpecs;
+
+export const defaultBlockSchema = getBlockSchemaFromSpecs(defaultBlockSpecs);
+
+export type DefaultBlockSchema = typeof defaultBlockSchema;
+
+export const defaultStyleSpecs = {
+  bold: createStyleSpecFromTipTapMark(Bold, "boolean"),
+  italic: createStyleSpecFromTipTapMark(Italic, "boolean"),
+  underline: createStyleSpecFromTipTapMark(Underline, "boolean"),
+  strike: createStyleSpecFromTipTapMark(Strike, "boolean"),
+  code: createStyleSpecFromTipTapMark(Code, "boolean"),
+  textColor: TextColor,
+  backgroundColor: BackgroundColor,
+} satisfies StyleSpecs;
+
+export const defaultStyleSchema = getStyleSchemaFromSpecs(defaultStyleSpecs);
+
+export type DefaultStyleSchema = typeof defaultStyleSchema;
+
+export const defaultInlineContentSpecs = {
+  text: { config: "text", implementation: {} as any },
+  link: { config: "link", implementation: {} as any },
+} satisfies InlineContentSpecs;
+
+export const defaultInlineContentSchema = getInlineContentSchemaFromSpecs(
+  defaultInlineContentSpecs
+);
+
+export type DefaultInlineContentSchema = typeof defaultInlineContentSchema;

package/src/blocks/defaultProps.ts

@@ -0,0 +1,24 @@
+import type { Props, PropSchema } from "../schema";
+
+// TODO: this system should probably be moved / refactored.
+// The dependency from schema on this file doesn't make sense
+
+export const defaultProps = {
+  backgroundColor: {
+    default: "default" as const,
+  },
+  textColor: {
+    default: "default" as const,
+  },
+  textAlignment: {
+    default: "left" as const,
+    values: ["left", "center", "right", "justify"] as const,
+  },
+} satisfies PropSchema;
+
+export type DefaultProps = Props<typeof defaultProps>;
+
+// Default props which are set on `blockContainer` nodes rather than
+// `blockContent` nodes. Ensures that they are not redundantly added to
+// a custom block's TipTap node attributes.
+export const inheritedProps = ["backgroundColor", "textColor"];

package/src/{extensions/Blocks/nodes/Block.module.css → editor/Block.css}

@@ -2,34 +2,35 @@
 BASIC STYLES
 */
 
-.blockOuter {
+.bn-block-outer {
   line-height: 1.5;
   transition: margin 0.2s;
 }
 
 /*Ensures blocks & block content spans editor width*/
-.block {
+.bn-block {
   display: flex;
   flex-direction: column;
 }
 
 /*Ensures block content inside React node views spans editor width*/
-.reactNodeViewRenderer {
+.bn-react-node-view-renderer {
   display: flex;
   flex-grow: 1;
 }
 
-.blockContent {
+.bn-block-content {
   padding: 3px 0;
   flex-grow: 1;
   transition: font-size 0.2s;
+  width: 100%;
   /*
   because the content elements are display: block
   we use flex to position them next to list markers
   */
 }
 
-.blockContent::before {
+.bn-block-content::before {
   /* content: ""; */
   transition: all 0.2s;
   /*margin: 0px;*/
@@ -39,15 +40,16 @@ BASIC STYLES
 NESTED BLOCKS
 */
 
-.blockGroup .blockGroup {
+.bn-block-group .bn-block-group {
   margin-left: 1.5em;
 }
 
-.blockGroup .blockGroup > .blockOuter {
+.bn-block-group .bn-block-group > .bn-block-outer {
   position: relative;
 }
 
-.blockGroup .blockGroup > .blockOuter:not([data-prev-depth-changed])::before {
+.bn-block-group .bn-block-group
+  > .bn-block-outer:not([data-prev-depth-changed])::before {
   content: " ";
   display: inline;
   position: absolute;
@@ -56,7 +58,8 @@ NESTED BLOCKS
   transition: all 0.2s 0.1s;
 }
 
-.blockGroup .blockGroup > .blockOuter[data-prev-depth-change="-2"]::before {
+.bn-block-group .bn-block-group
+  > .bn-block-outer[data-prev-depth-change="-2"]::before {
   height: 0;
 }
 
@@ -94,11 +97,12 @@ NESTED BLOCKS
   --x: -5;
 }
 
-.blockOuter[data-prev-depth-change] {
+.bn-block-outer[data-prev-depth-change] {
   margin-left: calc(10px * var(--x));
 }
 
-.blockOuter[data-prev-depth-change] .blockOuter[data-prev-depth-change] {
+.bn-block-outer[data-prev-depth-change]
+  .bn-block-outer[data-prev-depth-change] {
   margin-left: 0;
 }
 
@@ -123,21 +127,21 @@ NESTED BLOCKS
   --prev-level: 1.3em;
 }
 
-.blockOuter[data-prev-type="heading"] > .block > .blockContent {
+.bn-block-outer[data-prev-type="heading"] > .bn-block > .bn-block-content {
   font-size: var(--prev-level);
   font-weight: bold;
 }
 
-.blockOuter:not([data-prev-type])
-  > .block
-  > .blockContent[data-content-type="heading"] {
+.bn-block-outer:not([data-prev-type])
+  > .bn-block
+  > .bn-block-content[data-content-type="heading"] {
   font-size: var(--level);
   font-weight: bold;
 }
 
 /* LISTS */
 
-.blockContent::before {
+.bn-block-content::before {
   margin-right: 0;
   content: "";
 }
@@ -151,79 +155,81 @@ NESTED BLOCKS
   --prev-index: attr(data-prev-index);
 }
 
-.blockOuter[data-prev-type="numberedListItem"]:not([data-prev-index="none"])
-  > .block
-  > .blockContent::before {
+.bn-block-outer[data-prev-type="numberedListItem"]:not([data-prev-index="none"])
+  > .bn-block
+  > .bn-block-content::before {
   margin-right: 1.2em;
   content: var(--prev-index) ".";
 }
 
-.blockOuter:not([data-prev-type])
-  > .block
-  > .blockContent[data-content-type="numberedListItem"]::before {
+.bn-block-outer:not([data-prev-type])
+  > .bn-block
+  > .bn-block-content[data-content-type="numberedListItem"]::before {
   margin-right: 1.2em;
   content: var(--index) ".";
 }
 
 /* Unordered */
 /* No list nesting */
-.blockOuter[data-prev-type="bulletListItem"] > .block > .blockContent::before {
+.bn-block-outer[data-prev-type="bulletListItem"]
+  > .bn-block
+  > .bn-block-content::before {
   margin-right: 1.2em;
   content: "•";
 }
 
-.blockOuter:not([data-prev-type])
-  > .block
-  > .blockContent[data-content-type="bulletListItem"]::before {
+.bn-block-outer:not([data-prev-type])
+  > .bn-block
+  > .bn-block-content[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 {
+  ~ .bn-block-group
+  > .bn-block-outer[data-prev-type="bulletListItem"]
+  > .bn-block
+  > .bn-block-content::before {
   margin-right: 1.2em;
   content: "◦";
 }
 
 [data-content-type="bulletListItem"]
-  ~ .blockGroup
-  > .blockOuter:not([data-prev-type])
-  > .block
-  > .blockContent[data-content-type="bulletListItem"]::before {
+  ~ .bn-block-group
+  > .bn-block-outer:not([data-prev-type])
+  > .bn-block
+  > .bn-block-content[data-content-type="bulletListItem"]::before {
   margin-right: 1.2em;
   content: "◦";
 }
 
 /* 2 levels of list nesting */
 [data-content-type="bulletListItem"]
-  ~ .blockGroup
+  ~ .bn-block-group
   [data-content-type="bulletListItem"]
-  ~ .blockGroup
-  > .blockOuter[data-prev-type="bulletListItem"]
-  > .block
-  > .blockContent::before {
+  ~ .bn-block-group
+  > .bn-block-outer[data-prev-type="bulletListItem"]
+  > .bn-block
+  > .bn-block-content::before {
   margin-right: 1.2em;
   content: "▪";
 }
 
 [data-content-type="bulletListItem"]
-  ~ .blockGroup
+  ~ .bn-block-group
   [data-content-type="bulletListItem"]
-  ~ .blockGroup
-  > .blockOuter:not([data-prev-type])
-  > .block
-  > .blockContent[data-content-type="bulletListItem"]::before {
+  ~ .bn-block-group
+  > .bn-block-outer:not([data-prev-type])
+  > .bn-block
+  > .bn-block-content[data-content-type="bulletListItem"]::before {
   margin-right: 1.2em;
   content: "▪";
 }
 
 /* IMAGES */
 
-[data-content-type="image"] .wrapper {
+[data-content-type="image"] .bn-image-block-content-wrapper {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -231,7 +237,7 @@ NESTED BLOCKS
   width: 100%;
 }
 
-[data-content-type="image"] .addImageButton {
+[data-content-type="image"] .bn-add-image-button {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -243,27 +249,27 @@ NESTED BLOCKS
   width: 100%;
 }
 
-[data-content-type="image"] .addImageButton:hover {
+[data-content-type="image"] .bn-add-image-button:hover {
   background-color: gainsboro;
 }
 
-[data-content-type="image"] .addImageButtonIcon {
+[data-content-type="image"] .bn-add-image-button-icon {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 5H4V19L13.2923 9.70649C13.6828 9.31595 14.3159 9.31591 14.7065 9.70641L20 15.0104V5ZM2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11Z'%3E%3C/path%3E%3C/svg%3E");
   width: 24px;
   height: 24px;
 }
 
-[data-content-type="image"] .addImageButtonText {
+[data-content-type="image"] .bn-add-image-button-text {
   color: black;
 }
 
-[data-content-type="image"] .imageAndCaptionWrapper {
+[data-content-type="image"] .bn-image-and-caption-wrapper {
   display: flex;
   flex-direction: column;
   border-radius: 4px;
 }
 
-[data-content-type="image"] .imageWrapper {
+[data-content-type="image"] .bn-image-wrapper {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -271,12 +277,12 @@ NESTED BLOCKS
   width: fit-content;
 }
 
-[data-content-type="image"] .image {
+[data-content-type="image"] .bn-image {
   border-radius: 4px;
   max-width: 100%;
 }
 
-[data-content-type="image"] .resizeHandle {
+[data-content-type="image"] .bn-image-resize-handle {
   display: none;
   position: absolute;
   width: 8px;
@@ -287,18 +293,14 @@ NESTED BLOCKS
   cursor: ew-resize;
 }
 
-[data-content-type="image"] .imageWrapper:hover .resizeHandle {
-  display: block;
-}
-
 [data-content-type="image"] .caption {
   font-size: 0.8em
 }
 
 /* PLACEHOLDERS*/
 
-.isEmpty .inlineContent:before,
-.isFilter .inlineContent:before {
+.bn-is-empty .bn-inline-content:before,
+.bn-is-filter .bn-inline-content:before {
   /*float: left; */
   content: "";
   pointer-events: none;
@@ -310,25 +312,27 @@ NESTED BLOCKS
 
 /* TODO: would be nicer if defined from code */
 
-.blockContent.isEmpty.hasAnchor .inlineContent:before {
+.bn-block-content.bn-is-empty.bn-has-anchor .bn-inline-content:before {
   content: "Enter text or type '/' for commands";
 }
 
-.blockContent.isFilter.hasAnchor .inlineContent:before {
+.bn-block-content.bn-is-filter.bn-has-anchor .bn-inline-content:before {
   content: "Type to filter";
 }
 
-.blockContent[data-content-type="heading"].isEmpty .inlineContent:before {
+.bn-block-content[data-content-type="heading"].bn-is-empty
+  .bn-inline-content:before {
   content: "Heading";
 }
 
-.blockContent[data-content-type="bulletListItem"].isEmpty .inlineContent:before,
-.blockContent[data-content-type="numberedListItem"].isEmpty
-.inlineContent:before {
+.bn-block-content[data-content-type="bulletListItem"].bn-is-empty
+  .bn-inline-content:before,
+  .bn-block-content[data-content-type="numberedListItem"].bn-is-empty
+  .bn-inline-content:before {
   content: "List";
 }
 
-.isEmpty .blockContent[data-content-type="captionedImage"] .inlineContent:before {
+.bn-is-empty .bn-block-content[data-content-type="captionedImage"] .bn-inline-content:before {
   content: "Caption";
 }
 

package/src/{BlockNoteEditor.test.ts → editor/BlockNoteEditor.test.ts}

@@ -1,12 +1,12 @@
 import { expect, it } from "vitest";
 import { BlockNoteEditor } from "./BlockNoteEditor";
-import { getBlockInfoFromPos } from "./extensions/Blocks/helpers/getBlockInfoFromPos";
+import { getBlockInfoFromPos } from "../api/getBlockInfoFromPos";
 
 /**
  * @vitest-environment jsdom
  */
 it("creates an editor", () => {
-  const editor = new BlockNoteEditor({});
+  const editor = BlockNoteEditor.create();
   const blockInfo = getBlockInfoFromPos(editor._tiptapEditor.state.doc, 2);
   expect(blockInfo?.contentNode.type.name).toEqual("paragraph");
 });