@blocknote/core 0.9.3 → 0.9.4

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

@@ -1,4 +1,4 @@
-import { Attribute, Node } from "@tiptap/core";
+import { Attribute, Attributes, Node } from "@tiptap/core";
 import { BlockNoteDOMAttributes, BlockNoteEditor } from "../../..";
 import styles from "../nodes/Block.module.css";
 import {
@@ -10,6 +10,7 @@ import {
   TipTapNodeConfig,
 } from "./blockTypes";
 import { mergeCSSClasses } from "../../../shared/utils";
+import { ParseRule } from "prosemirror-model";
 
 export function camelToDataKebab(str: string): string {
   return "data-" + str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
@@ -27,7 +28,7 @@ export function propsToAttributes<
     BlockConfig<BType, PSchema, ContainsInlineContent, BSchema>,
     "render"
   >
-) {
+): Attributes {
   const tiptapAttributes: Record<string, Attribute> = {};
 
   Object.entries(blockConfig.propSchema).forEach(([name, spec]) => {
@@ -63,7 +64,7 @@ export function parse<
     BlockConfig<BType, PSchema, ContainsInlineContent, BSchema>,
     "render"
   >
-) {
+): ParseRule[] {
   return [
     {
       tag: "div[data-content-type=" + blockConfig.type + "]",
@@ -120,21 +121,24 @@ export function render<
 export function createBlockSpec<
   BType extends string,
   PSchema extends PropSchema,
-  ContainsInlineContent extends boolean,
+  ContainsInlineContent extends false,
   BSchema extends BlockSchema
 >(
   blockConfig: BlockConfig<BType, PSchema, ContainsInlineContent, BSchema>
-): BlockSpec<BType, PSchema> {
+): BlockSpec<BType, PSchema, ContainsInlineContent> {
   const node = createTipTapBlock<
     BType,
+    ContainsInlineContent,
     {
       editor: BlockNoteEditor<BSchema>;
       domAttributes?: BlockNoteDOMAttributes;
     }
   >({
     name: blockConfig.type,
-    content: blockConfig.containsInlineContent ? "inline*" : "",
-    selectable: blockConfig.containsInlineContent,
+    content: (blockConfig.containsInlineContent
+      ? "inline*"
+      : "") as ContainsInlineContent extends true ? "inline*" : "",
+    selectable: true,
 
     addAttributes() {
       return propsToAttributes(blockConfig);
@@ -176,7 +180,9 @@ export function createBlockSpec<
 
         // Gets BlockNote editor instance
         const editor = this.options.editor! as BlockNoteEditor<
-          BSchema & { [k in BType]: BlockSpec<BType, PSchema> }
+          BSchema & {
+            [k in BType]: BlockSpec<BType, PSchema, ContainsInlineContent>;
+          }
         >;
         // Gets position of the node
         if (typeof getPos === "boolean") {
@@ -201,7 +207,10 @@ export function createBlockSpec<
         // Render elements
         const rendered = blockConfig.render(block as any, editor);
         // Add HTML attributes to contentDOM
-        if ("contentDOM" in rendered) {
+        if (blockConfig.containsInlineContent) {
+          const contentDOM = (rendered as { contentDOM: HTMLElement })
+            .contentDOM;
+
           const inlineContentDOMAttributes =
             this.options.domAttributes?.inlineContent || {};
           // Add custom HTML attributes
@@ -209,12 +218,12 @@ export function createBlockSpec<
             inlineContentDOMAttributes
           )) {
             if (attribute !== "class") {
-              rendered.contentDOM.setAttribute(attribute, value);
+              contentDOM.setAttribute(attribute, value);
             }
           }
           // Merge existing classes with inlineContent & custom classes
-          rendered.contentDOM.className = mergeCSSClasses(
-            rendered.contentDOM.className,
+          contentDOM.className = mergeCSSClasses(
+            contentDOM.className,
             styles.inlineContent,
             inlineContentDOMAttributes.class
           );
@@ -226,22 +235,25 @@ export function createBlockSpec<
           ? {
               dom: blockContent,
               contentDOM: rendered.contentDOM,
+              destroy: rendered.destroy,
             }
           : {
               dom: blockContent,
+              destroy: rendered.destroy,
             };
       };
     },
   });
 
   return {
-    node: node as TipTapNode<BType>,
+    node: node as TipTapNode<BType, ContainsInlineContent>,
     propSchema: blockConfig.propSchema,
   };
 }
 
 export function createTipTapBlock<
   Type extends string,
+  ContainsInlineContent extends boolean,
   Options extends {
     domAttributes?: BlockNoteDOMAttributes;
   } = {
@@ -249,8 +261,8 @@ export function createTipTapBlock<
   },
   Storage = any
 >(
-  config: TipTapNodeConfig<Type, Options, Storage>
-): TipTapNode<Type, Options, Storage> {
+  config: TipTapNodeConfig<Type, ContainsInlineContent, Options, Storage>
+): TipTapNode<Type, ContainsInlineContent, Options, Storage> {
   // 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
@@ -258,5 +270,6 @@ export function createTipTapBlock<
   return Node.create<Options, Storage>({
     ...config,
     group: "blockContent",
-  }) as TipTapNode<Type, Options, Storage>;
+    content: config.content,
+  }) as TipTapNode<Type, ContainsInlineContent, Options, Storage>;
 }

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

@@ -16,11 +16,13 @@ export type BlockNoteDOMAttributes = Partial<{
 }>;
 
 // A configuration for a TipTap node, but with stricter type constraints on the
-// "name" and "group" properties. The "name" property is now always a string
-// literal type, and the "blockGroup" property cannot be configured as it should
-// always be "blockContent". Used as the parameter in `createTipTapNode`.
+// "name" and "content" properties. The "name" property is now always a string
+// literal type, and the "content" property can only be "inline*" or "". Used as
+// the parameter in `createTipTapNode`. The "group" is also removed as
+// `createTipTapNode` always sets it to "blockContent"
 export type TipTapNodeConfig<
   Name extends string,
+  ContainsInlineContent extends boolean,
   Options extends {
     domAttributes?: BlockNoteDOMAttributes;
   } = {
@@ -30,32 +32,58 @@ export type TipTapNodeConfig<
 > = {
   [K in keyof NodeConfig<Options, Storage>]: K extends "name"
     ? Name
+    : K extends "content"
+    ? ContainsInlineContent extends true
+      ? "inline*"
+      : ""
     : K extends "group"
     ? never
     : NodeConfig<Options, Storage>[K];
+} & {
+  name: Name;
+  content: ContainsInlineContent extends true ? "inline*" : "";
 };
 
-// A TipTap node with stricter type constraints on the "name" and "group"
-// properties. The "name" property is now a string literal type, and the
-// "blockGroup" property is now "blockContent". Returned by `createTipTapNode`.
+// A TipTap node with stricter type constraints on the "name", "group", and
+// "content properties. The "name" property is now a string literal type, and
+// the "blockGroup" property is now "blockContent", and the "content" property
+// can only be "inline*" or "". Returned by `createTipTapNode`.
 export type TipTapNode<
   Name extends string,
+  ContainsInlineContent extends boolean,
   Options extends {
     domAttributes?: BlockNoteDOMAttributes;
   } = {
     domAttributes?: BlockNoteDOMAttributes;
   },
   Storage = any
-> = Node<Options, Storage> & {
-  name: Name;
-  group: "blockContent";
+> = {
+  [Key in keyof Node<Options, Storage>]: Key extends "name"
+    ? Name
+    : Key extends "config"
+    ? {
+        [ConfigKey in keyof Node<
+          Options,
+          Storage
+        >["config"]]: ConfigKey extends "group"
+          ? "blockContent"
+          : ConfigKey extends "content"
+          ? ContainsInlineContent extends true
+            ? "inline*"
+            : ""
+          : NodeConfig<Options, Storage>["config"][ConfigKey];
+      } & {
+        group: "blockContent";
+        content: ContainsInlineContent extends true ? "inline*" : "";
+      }
+    : Node<Options, Storage>["config"][Key];
 };
 
 // Defines a single prop spec, which includes the default value the prop should
 // take and possible values it can take.
-export type PropSpec = {
-  values?: readonly string[];
-  default: string;
+export type PropSpec<PType extends boolean | number | string> = {
+  values?: readonly PType[];
+  default: PType;
 };
 
 // Defines multiple block prop specs. The key of each prop is the name of the
@@ -63,15 +91,25 @@ export type PropSpec = {
 // in a block config or schema. From a prop schema, we can derive both the props'
 // internal implementation (as TipTap node attributes) and the type information
 // for the external API.
-export type PropSchema = Record<string, PropSpec>;
+export type PropSchema = Record<string, PropSpec<boolean | number | string>>;
 
 // Defines Props objects for use in Block objects in the external API. Converts
 // each prop spec into a union type of its possible values, or a string if no
 // values are specified.
 export type Props<PSchema extends PropSchema> = {
-  [PType in keyof PSchema]: PSchema[PType]["values"] extends readonly string[]
-    ? PSchema[PType]["values"][number]
-    : string;
+  [PName in keyof PSchema]: PSchema[PName]["default"] extends boolean
+    ? PSchema[PName]["values"] extends readonly boolean[]
+      ? PSchema[PName]["values"][number]
+      : boolean
+    : PSchema[PName]["default"] extends number
+    ? PSchema[PName]["values"] extends readonly number[]
+      ? PSchema[PName]["values"][number]
+      : number
+    : PSchema[PName]["default"] extends string
+    ? PSchema[PName]["values"] extends readonly string[]
+      ? PSchema[PName]["values"][number]
+      : string
+    : never;
 };
 
 // Defines the config for a single block. Meant to be used as an argument to
@@ -96,7 +134,9 @@ export type BlockConfig<
      * The custom block to render
      */
     block: SpecificBlock<
-      BSchema & { [k in Type]: BlockSpec<Type, PSchema> },
+      BSchema & {
+        [k in Type]: BlockSpec<Type, PSchema, ContainsInlineContent>;
+      },
       Type
     >,
     /**
@@ -104,16 +144,20 @@ export type BlockConfig<
      * This is typed generically. If you want an editor with your custom schema, you need to
      * cast it manually, e.g.: `const e = editor as BlockNoteEditor<typeof mySchema>;`
      */
-    editor: BlockNoteEditor<BSchema & { [k in Type]: BlockSpec<Type, PSchema> }>
+    editor: BlockNoteEditor<
+      BSchema & { [k in Type]: BlockSpec<Type, PSchema, ContainsInlineContent> }
+    >
     // (note) if we want to fix the manual cast, we need to prevent circular references and separate block definition and render implementations
     // or allow manually passing <BSchema>, but that's not possible without passing the other generics because Typescript doesn't support partial inferred generics
   ) => ContainsInlineContent extends true
     ? {
         dom: HTMLElement;
         contentDOM: HTMLElement;
+        destroy?: () => void;
       }
     : {
         dom: HTMLElement;
+        destroy?: () => void;
       };
 };
 
@@ -121,18 +165,22 @@ export type BlockConfig<
 // the TipTap node used to implement it. Usually created using `createBlockSpec`
 // though it can also be defined from scratch by providing your own TipTap node,
 // allowing for more advanced custom blocks.
-export type BlockSpec<Type extends string, PSchema extends PropSchema> = {
+export type BlockSpec<
+  Type extends string,
+  PSchema extends PropSchema,
+  ContainsInlineContent extends boolean
+> = {
+  node: TipTapNode<Type, ContainsInlineContent, any>;
   readonly propSchema: PSchema;
-  node: TipTapNode<Type, any>;
 };
 
 // Utility type. For a given object block schema, ensures that the key of each
 // block spec matches the name of the TipTap node in it.
-export type TypesMatch<
-  Blocks extends Record<string, BlockSpec<string, PropSchema>>
+type NamesMatch<
+  Blocks extends Record<string, BlockSpec<string, PropSchema, boolean>>
 > = Blocks extends {
   [Type in keyof Blocks]: Type extends string
-    ? Blocks[Type] extends BlockSpec<Type, PropSchema>
+    ? Blocks[Type] extends BlockSpec<Type, PropSchema, boolean>
       ? Blocks[Type]
       : never
     : never;
@@ -145,8 +193,8 @@ export type TypesMatch<
 // `blocks` option of the BlockNoteEditor. From a block schema, we can derive
 // both the blocks' internal implementation (as TipTap nodes) and the type
 // information for the external API.
-export type BlockSchema = TypesMatch<
-  Record<string, BlockSpec<string, PropSchema>>
+export type BlockSchema = NamesMatch<
+  Record<string, BlockSpec<string, PropSchema, boolean>>
 >;
 
 // Converts each block spec into a Block object without children. We later merge
@@ -157,7 +205,9 @@ type BlocksWithoutChildren<BSchema extends BlockSchema> = {
     id: string;
     type: BType;
     props: Props<BSchema[BType]["propSchema"]>;
-    content: InlineContent[];
+    content: BSchema[BType]["node"]["config"]["content"] extends "inline*"
+      ? InlineContent[]
+      : undefined;
   };
 };
 
@@ -182,7 +232,9 @@ type PartialBlocksWithoutChildren<BSchema extends BlockSchema> = {
     id: string;
     type: BType;
     props: Partial<Props<BSchema[BType]["propSchema"]>>;
-    content: PartialInlineContent[] | string;
+    content: BSchema[BType]["node"]["config"]["content"] extends "inline*"
+      ? PartialInlineContent[] | string
+      : undefined;
   }>;
 };
 

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

@@ -1,44 +1,16 @@
-import { HeadingBlockContent } from "../nodes/BlockContent/HeadingBlockContent/HeadingBlockContent";
-import { BulletListItemBlockContent } from "../nodes/BlockContent/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent";
-import { NumberedListItemBlockContent } from "../nodes/BlockContent/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent";
-import { ParagraphBlockContent } from "../nodes/BlockContent/ParagraphBlockContent/ParagraphBlockContent";
-import { PropSchema, TypesMatch } from "./blockTypes";
-
-export const defaultProps = {
-  backgroundColor: {
-    default: "transparent" as const,
-  },
-  textColor: {
-    default: "black" as const, // TODO
-  },
-  textAlignment: {
-    default: "left" as const,
-    values: ["left", "center", "right", "justify"] as const,
-  },
-} satisfies PropSchema;
-
-export type DefaultProps = typeof defaultProps;
+import { Heading } from "../nodes/BlockContent/HeadingBlockContent/HeadingBlockContent";
+import { BulletListItem } from "../nodes/BlockContent/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent";
+import { NumberedListItem } from "../nodes/BlockContent/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent";
+import { Paragraph } from "../nodes/BlockContent/ParagraphBlockContent/ParagraphBlockContent";
+import { Image } from "../nodes/BlockContent/ImageBlockContent/ImageBlockContent";
+import { BlockSchema } from "./blockTypes";
 
 export const defaultBlockSchema = {
-  paragraph: {
-    propSchema: defaultProps,
-    node: ParagraphBlockContent,
-  },
-  heading: {
-    propSchema: {
-      ...defaultProps,
-      level: { default: "1", values: ["1", "2", "3"] as const },
-    },
-    node: HeadingBlockContent,
-  },
-  bulletListItem: {
-    propSchema: defaultProps,
-    node: BulletListItemBlockContent,
-  },
-  numberedListItem: {
-    propSchema: defaultProps,
-    node: NumberedListItemBlockContent,
-  },
-} as const;
+  paragraph: Paragraph,
+  heading: Heading,
+  bulletListItem: BulletListItem,
+  numberedListItem: NumberedListItem,
+  image: Image,
+} as const satisfies BlockSchema;
 
-export type DefaultBlockSchema = TypesMatch<typeof defaultBlockSchema>;
+export type DefaultBlockSchema = typeof defaultBlockSchema;

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

@@ -0,0 +1,16 @@
+import { Props, PropSchema } from "./blockTypes";
+
+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>;

package/src/extensions/Blocks/nodes/Block.module.css

@@ -56,20 +56,6 @@ NESTED BLOCKS
   transition: all 0.2s 0.1s;
 }
 
-[data-theme="light"]
-  .blockGroup
-  .blockGroup
-  > .blockOuter:not([data-prev-depth-changed])::before {
-  border-left: 1px solid #AFAFAF;
-}
-
-[data-theme="dark"]
-  .blockGroup
-  .blockGroup
-  > .blockOuter:not([data-prev-depth-changed])::before {
-  border-left: 1px solid #7F7F7F;
-}
-
 .blockGroup .blockGroup > .blockOuter[data-prev-depth-change="-2"]::before {
   height: 0;
 }
@@ -235,6 +221,80 @@ NESTED BLOCKS
   content: "▪";
 }
 
+/* IMAGES */
+
+[data-content-type="image"] .wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  user-select: none;
+  width: 100%;
+}
+
+[data-content-type="image"] .addImageButton {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  background-color: whitesmoke;
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 12px;
+  width: 100%;
+}
+
+[data-content-type="image"] .addImageButton:hover {
+  background-color: gainsboro;
+}
+
+[data-content-type="image"] .addImageButtonIcon {
+  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 {
+  color: black;
+}
+
+[data-content-type="image"] .imageAndCaptionWrapper {
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+}
+
+[data-content-type="image"] .imageWrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  position: relative;
+  width: fit-content;
+}
+
+[data-content-type="image"] .image {
+  border-radius: 4px;
+  max-width: 100%;
+}
+
+[data-content-type="image"] .resizeHandle {
+  display: none;
+  position: absolute;
+  width: 8px;
+  height: 30px;
+  background-color: black;
+  border: 1px solid white;
+  border-radius: 4px;
+  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,
@@ -248,16 +308,6 @@ NESTED BLOCKS
   font-style: italic;
 }
 
-[data-theme="light"] .isEmpty .inlineContent:before,
-.isFilter .inlineContent:before {
-  color: #CFCFCF;
-}
-
-[data-theme="dark"] .isEmpty .inlineContent:before,
-.isFilter .inlineContent:before {
-  color: #7F7F7F;
-}
-
 /* TODO: would be nicer if defined from code */
 
 .blockContent.isEmpty.hasAnchor .inlineContent:before {
@@ -278,6 +328,10 @@ NESTED BLOCKS
   content: "List";
 }
 
+.isEmpty .blockContent[data-content-type="captionedImage"] .inlineContent:before {
+  content: "Caption";
+}
+
 /* TEXT COLORS */
 [data-text-color="gray"] {
   color: #9b9a97;

package/src/extensions/Blocks/nodes/BlockContainer.ts

@@ -1,6 +1,6 @@
 import { mergeAttributes, Node } from "@tiptap/core";
 import { Fragment, Node as PMNode, Slice } from "prosemirror-model";
-import { TextSelection } from "prosemirror-state";
+import { NodeSelection, TextSelection } from "prosemirror-state";
 import {
   blockToNode,
   inlineContentToNodes,
@@ -16,6 +16,7 @@ import { PreviousBlockTypePlugin } from "../PreviousBlockTypePlugin";
 import styles from "./Block.module.css";
 import BlockAttributes from "./BlockAttributes";
 import { mergeCSSClasses } from "../../../shared/utils";
+import { NonEditableBlockPlugin } from "../NonEditableBlockPlugin";
 
 declare module "@tiptap/core" {
   interface Commands<ReturnType> {
@@ -205,14 +206,20 @@ export const BlockContainer = Node.create<{
               // Replaces the blockContent node with one of the new type and
               // adds the provided props as attributes. Also preserves all
               // existing attributes that are compatible with the new type.
-              state.tr.replaceWith(
-                startPos,
-                endPos,
-                state.schema.nodes[newType].create({
-                  ...contentNode.attrs,
-                  ...block.props,
-                })
-              );
+              // Need to reset the selection since replacing the block content
+              // sets it to the next block.
+              state.tr
+                .replaceWith(
+                  startPos,
+                  endPos,
+                  state.schema.nodes[newType].create({
+                    ...contentNode.attrs,
+                    ...block.props,
+                  })
+                )
+                .setSelection(
+                  new NodeSelection(state.tr.doc.resolve(startPos))
+                );
             } else {
               // Changes the blockContent node type and adds the provided props
               // as attributes. Also preserves all existing attributes that are
@@ -404,7 +411,7 @@ export const BlockContainer = Node.create<{
   },
 
   addProseMirrorPlugins() {
-    return [PreviousBlockTypePlugin()];
+    return [PreviousBlockTypePlugin(), NonEditableBlockPlugin()];
   },
 
   addKeyboardShortcuts() {
@@ -577,37 +584,6 @@ export const BlockContainer = Node.create<{
         this.editor.commands.BNCreateBlock(
           this.editor.state.selection.anchor + 2
         ),
-      "Mod-Alt-1": () =>
-        this.editor.commands.BNUpdateBlock(this.editor.state.selection.anchor, {
-          type: "heading",
-          props: {
-            level: "1",
-          },
-        }),
-      "Mod-Alt-2": () =>
-        this.editor.commands.BNUpdateBlock(this.editor.state.selection.anchor, {
-          type: "heading",
-          props: {
-            level: "2",
-          },
-        }),
-      "Mod-Alt-3": () =>
-        this.editor.commands.BNUpdateBlock(this.editor.state.selection.anchor, {
-          type: "heading",
-          props: {
-            level: "3",
-          },
-        }),
-      "Mod-Shift-7": () =>
-        this.editor.commands.BNUpdateBlock(this.editor.state.selection.anchor, {
-          type: "bulletListItem",
-          props: {},
-        }),
-      "Mod-Shift-8": () =>
-        this.editor.commands.BNUpdateBlock(this.editor.state.selection.anchor, {
-          type: "numberedListItem",
-          props: {},
-        }),
     };
   },
 });