@blocknote/core 0.9.6 → 0.10.0

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

@@ -1,249 +0,0 @@
-/** Define the main block types **/
-import { Node, NodeConfig } from "@tiptap/core";
-import { BlockNoteEditor } from "../../../BlockNoteEditor";
-import { InlineContent, PartialInlineContent } from "./inlineContentTypes";
-import { DefaultBlockSchema } from "./defaultBlocks";
-
-export type BlockNoteDOMElement =
-  | "editor"
-  | "blockContainer"
-  | "blockGroup"
-  | "blockContent"
-  | "inlineContent";
-
-export type BlockNoteDOMAttributes = Partial<{
-  [DOMElement in BlockNoteDOMElement]: Record<string, string>;
-}>;
-
-// A configuration for a TipTap node, but with stricter type constraints on the
-// "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;
-  } = {
-    domAttributes?: BlockNoteDOMAttributes;
-  },
-  Storage = any
-> = {
-  [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", "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
-> = {
-  [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<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
-// prop, while the value is a corresponding prop spec. This should be included
-// 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<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> = {
-  [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
-// `createBlockSpec`, which will create a new block spec from it. This is the
-// main way we expect people to create custom blocks as consumers don't need to
-// know anything about the TipTap API since the associated nodes are created
-// automatically.
-export type BlockConfig<
-  Type extends string,
-  PSchema extends PropSchema,
-  ContainsInlineContent extends boolean,
-  BSchema extends BlockSchema
-> = {
-  // Attributes to define block in the API as well as a TipTap node.
-  type: Type;
-  readonly propSchema: PSchema;
-
-  // Additional attributes to help define block as a TipTap node.
-  containsInlineContent: ContainsInlineContent;
-  render: (
-    /**
-     * The custom block to render
-     */
-    block: SpecificBlock<
-      BSchema & {
-        [k in Type]: BlockSpec<Type, PSchema, ContainsInlineContent>;
-      },
-      Type
-    >,
-    /**
-     * The BlockNote editor instance
-     * 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, 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;
-      };
-};
-
-// Defines a single block spec, which includes the props that the block has and
-// 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,
-  ContainsInlineContent extends boolean
-> = {
-  node: TipTapNode<Type, ContainsInlineContent, any>;
-  readonly propSchema: PSchema;
-};
-
-// 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.
-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, boolean>
-      ? Blocks[Type]
-      : never
-    : never;
-}
-  ? Blocks
-  : never;
-
-// Defines multiple block specs. Also ensures that the key of each block schema
-// is the same as name of the TipTap node in it. This should be passed in the
-// `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 = NamesMatch<
-  Record<string, BlockSpec<string, PropSchema, boolean>>
->;
-
-// Converts each block spec into a Block object without children. We later merge
-// them into a union type and add a children property to create the Block and
-// PartialBlock objects we use in the external API.
-type BlocksWithoutChildren<BSchema extends BlockSchema> = {
-  [BType in keyof BSchema]: {
-    id: string;
-    type: BType;
-    props: Props<BSchema[BType]["propSchema"]>;
-    content: BSchema[BType]["node"]["config"]["content"] extends "inline*"
-      ? InlineContent[]
-      : undefined;
-  };
-};
-
-// Converts each block spec into a Block object without children, merges them
-// into a union type, and adds a children property
-export type Block<BSchema extends BlockSchema = DefaultBlockSchema> =
-  BlocksWithoutChildren<BSchema>[keyof BlocksWithoutChildren<BSchema>] & {
-    children: Block<BSchema>[];
-  };
-
-export type SpecificBlock<
-  BSchema extends BlockSchema,
-  BlockType extends keyof BSchema
-> = BlocksWithoutChildren<BSchema>[BlockType] & {
-  children: Block<BSchema>[];
-};
-
-// Same as BlockWithoutChildren, but as a partial type with some changes to make
-// it easier to create/update blocks in the editor.
-type PartialBlocksWithoutChildren<BSchema extends BlockSchema> = {
-  [BType in keyof BSchema]: Partial<{
-    id: string;
-    type: BType;
-    props: Partial<Props<BSchema[BType]["propSchema"]>>;
-    content: BSchema[BType]["node"]["config"]["content"] extends "inline*"
-      ? PartialInlineContent[] | string
-      : undefined;
-  }>;
-};
-
-// Same as Block, but as a partial type with some changes to make it easier to
-// create/update blocks in the editor.
-export type PartialBlock<BSchema extends BlockSchema = DefaultBlockSchema> =
-  PartialBlocksWithoutChildren<BSchema>[keyof PartialBlocksWithoutChildren<BSchema>] &
-    Partial<{
-      children: PartialBlock<BSchema>[];
-    }>;
-
-export type BlockIdentifier = { id: string } | string;

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

@@ -1,7 +0,0 @@
-import { Block, BlockSchema } from "./blockTypes";
-
-export type TextCursorPosition<BSchema extends BlockSchema> = {
-  block: Block<BSchema>;
-  prevBlock: Block<BSchema> | undefined;
-  nextBlock: Block<BSchema> | undefined;
-};

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

@@ -1,16 +0,0 @@
-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: Paragraph,
-  heading: Heading,
-  bulletListItem: BulletListItem,
-  numberedListItem: NumberedListItem,
-  image: Image,
-} as const satisfies BlockSchema;
-
-export type DefaultBlockSchema = typeof defaultBlockSchema;

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

@@ -1,16 +0,0 @@
-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/api/inlineContentTypes.ts

@@ -1,36 +0,0 @@
-export type Styles = {
-  bold?: true;
-  italic?: true;
-  underline?: true;
-  strike?: true;
-  code?: true;
-  textColor?: string;
-  backgroundColor?: string;
-};
-
-export type ToggledStyle = {
-  [K in keyof Styles]-?: Required<Styles>[K] extends true ? K : never;
-}[keyof Styles];
-
-export type ColorStyle = {
-  [K in keyof Styles]-?: Required<Styles>[K] extends string ? K : never;
-}[keyof Styles];
-
-export type StyledText = {
-  type: "text";
-  text: string;
-  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 | Link;
-export type PartialInlineContent = StyledText | PartialLink;

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

@@ -1,5 +0,0 @@
-import { Block, BlockSchema } from "./blockTypes";
-
-export type Selection<BSchema extends BlockSchema> = {
-  blocks: Block<BSchema>[];
-};

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

@@ -1,29 +0,0 @@
-import { Extension } from "@tiptap/core";
-import { Plugin } from "prosemirror-state";
-import { DOMSerializer, Schema } from "prosemirror-model";
-
-const customBlockSerializer = (schema: Schema) => {
-  const defaultSerializer = DOMSerializer.fromSchema(schema);
-
-  return new DOMSerializer(
-    {
-      ...defaultSerializer.nodes,
-      // TODO: If a serializer is defined in the config for a custom block, it
-      //  should be added here. We still need to figure out how the serializer
-      //  should be defined in the custom blocks API though, and implement that,
-      //  before we can do this.
-    },
-    defaultSerializer.marks
-  );
-};
-export const CustomBlockSerializerExtension = Extension.create({
-  addProseMirrorPlugins() {
-    return [
-      new Plugin({
-        props: {
-          clipboardSerializer: customBlockSerializer(this.editor.schema),
-        },
-      }),
-    ];
-  },
-});

package/src/extensions/Blocks/helpers/findBlock.ts

@@ -1,5 +0,0 @@
-import { findParentNode } from "@tiptap/core";
-
-export const findBlock = findParentNode(
-  (node) => node.type.name === "blockContainer"
-);

package/src/extensions/Blocks/index.ts

@@ -1,8 +0,0 @@
-import { Node } from "@tiptap/core";
-export { BlockContainer } from "./nodes/BlockContainer";
-export { BlockGroup } from "./nodes/BlockGroup";
-export const Doc = Node.create({
-  name: "doc",
-  topNode: true,
-  content: "blockGroup",
-});

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

@@ -1,10 +0,0 @@
-// Object containing all possible block attributes.
-const BlockAttributes: Record<string, string> = {
-  blockColor: "data-block-color",
-  blockStyle: "data-block-style",
-  id: "data-id",
-  depth: "data-depth",
-  depthChange: "data-depth-change",
-};
-
-export default BlockAttributes;

package/src/extensions/Blocks/nodes/BlockContent/HeadingBlockContent/HeadingBlockContent.ts

@@ -1,142 +0,0 @@
-import { InputRule, mergeAttributes } from "@tiptap/core";
-import { defaultProps } from "../../../api/defaultProps";
-import { createTipTapBlock } from "../../../api/block";
-import { BlockSpec, PropSchema } from "../../../api/blockTypes";
-import { mergeCSSClasses } from "../../../../../shared/utils";
-import styles from "../../Block.module.css";
-
-export const headingPropSchema = {
-  ...defaultProps,
-  level: { default: 1, values: [1, 2, 3] as const },
-} satisfies PropSchema;
-
-const HeadingBlockContent = createTipTapBlock<"heading", true>({
-  name: "heading",
-  content: "inline*",
-
-  addAttributes() {
-    return {
-      level: {
-        default: 1,
-        // instead of "level" attributes, use "data-level"
-        parseHTML: (element) => element.getAttribute("data-level")!,
-        renderHTML: (attributes) => {
-          return {
-            "data-level": (attributes.level as number).toString(),
-          };
-        },
-      },
-    };
-  },
-
-  addInputRules() {
-    return [
-      ...[1, 2, 3].map((level) => {
-        // Creates a heading of appropriate level when starting with "#", "##", or "###".
-        return new InputRule({
-          find: new RegExp(`^(#{${level}})\\s$`),
-          handler: ({ state, chain, range }) => {
-            chain()
-              .BNUpdateBlock<{
-                heading: BlockSpec<"heading", typeof headingPropSchema, true>;
-              }>(state.selection.from, {
-                type: "heading",
-                props: {
-                  level: level as 1 | 2 | 3,
-                },
-              })
-              // Removes the "#" character(s) used to set the heading.
-              .deleteRange({ from: range.from, to: range.to });
-          },
-        });
-      }),
-    ];
-  },
-
-  addKeyboardShortcuts() {
-    return {
-      "Mod-Alt-1": () =>
-        this.editor.commands.BNUpdateBlock<{
-          heading: BlockSpec<"heading", typeof headingPropSchema, true>;
-        }>(this.editor.state.selection.anchor, {
-          type: "heading",
-          props: {
-            level: 1,
-          },
-        }),
-      "Mod-Alt-2": () =>
-        this.editor.commands.BNUpdateBlock<{
-          heading: BlockSpec<"heading", typeof headingPropSchema, true>;
-        }>(this.editor.state.selection.anchor, {
-          type: "heading",
-          props: {
-            level: 2,
-          },
-        }),
-      "Mod-Alt-3": () =>
-        this.editor.commands.BNUpdateBlock<{
-          heading: BlockSpec<"heading", typeof headingPropSchema, true>;
-        }>(this.editor.state.selection.anchor, {
-          type: "heading",
-          props: {
-            level: 3,
-          },
-        }),
-    };
-  },
-
-  parseHTML() {
-    return [
-      {
-        tag: "h1",
-        attrs: { level: 1 },
-        node: "heading",
-      },
-      {
-        tag: "h2",
-        attrs: { level: 2 },
-        node: "heading",
-      },
-      {
-        tag: "h3",
-        attrs: { level: 3 },
-        node: "heading",
-      },
-    ];
-  },
-
-  renderHTML({ node, HTMLAttributes }) {
-    const blockContentDOMAttributes =
-      this.options.domAttributes?.blockContent || {};
-    const inlineContentDOMAttributes =
-      this.options.domAttributes?.inlineContent || {};
-
-    return [
-      "div",
-      mergeAttributes(HTMLAttributes, {
-        ...blockContentDOMAttributes,
-        class: mergeCSSClasses(
-          styles.blockContent,
-          blockContentDOMAttributes.class
-        ),
-        "data-content-type": this.name,
-      }),
-      [
-        `h${node.attrs.level}`,
-        {
-          ...inlineContentDOMAttributes,
-          class: mergeCSSClasses(
-            styles.inlineContent,
-            inlineContentDOMAttributes.class
-          ),
-        },
-        0,
-      ],
-    ];
-  },
-});
-
-export const Heading = {
-  node: HeadingBlockContent,
-  propSchema: headingPropSchema,
-} satisfies BlockSpec<"heading", typeof headingPropSchema, true>;

package/src/extensions/Blocks/nodes/BlockContent/ParagraphBlockContent/ParagraphBlockContent.ts

@@ -1,62 +0,0 @@
-import { mergeAttributes } from "@tiptap/core";
-import { defaultProps } from "../../../api/defaultProps";
-import { createTipTapBlock } from "../../../api/block";
-import { mergeCSSClasses } from "../../../../../shared/utils";
-import styles from "../../Block.module.css";
-
-export const paragraphPropSchema = {
-  ...defaultProps,
-};
-
-export const ParagraphBlockContent = createTipTapBlock<"paragraph", true>({
-  name: "paragraph",
-  content: "inline*",
-
-  parseHTML() {
-    return [
-      {
-        tag: "p",
-        priority: 200,
-        node: "paragraph",
-      },
-    ];
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    const blockContentDOMAttributes =
-      this.options.domAttributes?.blockContent || {};
-    const inlineContentDOMAttributes =
-      this.options.domAttributes?.inlineContent || {};
-
-    return [
-      "div",
-      mergeAttributes(
-        {
-          ...blockContentDOMAttributes,
-          class: mergeCSSClasses(
-            styles.blockContent,
-            blockContentDOMAttributes.class
-          ),
-          "data-content-type": this.name,
-        },
-        HTMLAttributes
-      ),
-      [
-        "p",
-        {
-          ...inlineContentDOMAttributes,
-          class: mergeCSSClasses(
-            styles.inlineContent,
-            inlineContentDOMAttributes.class
-          ),
-        },
-        0,
-      ],
-    ];
-  },
-});
-
-export const Paragraph = {
-  node: ParagraphBlockContent,
-  propSchema: paragraphPropSchema,
-};

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

@@ -1,53 +0,0 @@
-import { mergeAttributes, Node } from "@tiptap/core";
-import styles from "./Block.module.css";
-import { BlockNoteDOMAttributes } from "../api/blockTypes";
-import { mergeCSSClasses } from "../../../shared/utils";
-
-export const BlockGroup = Node.create<{
-  domAttributes?: BlockNoteDOMAttributes;
-}>({
-  name: "blockGroup",
-  group: "blockGroup",
-  content: "blockContainer+",
-
-  parseHTML() {
-    return [
-      {
-        tag: "div",
-        getAttrs: (element) => {
-          if (typeof element === "string") {
-            return false;
-          }
-
-          if (element.getAttribute("data-node-type") === "blockGroup") {
-            // Null means the element matches, but we don't want to add any attributes to the node.
-            return null;
-          }
-
-          return false;
-        },
-      },
-    ];
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    const blockGroupDOMAttributes =
-      this.options.domAttributes?.blockGroup || {};
-
-    return [
-      "div",
-      mergeAttributes(
-        {
-          ...blockGroupDOMAttributes,
-          class: mergeCSSClasses(
-            styles.blockGroup,
-            blockGroupDOMAttributes.class
-          ),
-          "data-node-type": "blockGroup",
-        },
-        HTMLAttributes
-      ),
-      0,
-    ];
-  },
-});

package/types/src/api/formatConversions/formatConversions.d.ts

@@ -1,6 +0,0 @@
-import { Schema } from "prosemirror-model";
-import { Block, BlockSchema } from "../../extensions/Blocks/api/blockTypes";
-export declare function blocksToHTML<BSchema extends BlockSchema>(blocks: Block<BSchema>[], schema: Schema): Promise<string>;
-export declare function HTMLToBlocks<BSchema extends BlockSchema>(html: string, blockSchema: BSchema, schema: Schema): Promise<Block<BSchema>[]>;
-export declare function blocksToMarkdown<BSchema extends BlockSchema>(blocks: Block<BSchema>[], schema: Schema): Promise<string>;
-export declare function markdownToBlocks<BSchema extends BlockSchema>(markdown: string, blockSchema: BSchema, schema: Schema): Promise<Block<BSchema>[]>;

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

@@ -1,20 +0,0 @@
-import { Attributes } from "@tiptap/core";
-import { BlockNoteDOMAttributes } from "../../..";
-import { BlockConfig, BlockSchema, BlockSpec, PropSchema, TipTapNode, TipTapNodeConfig } from "./blockTypes";
-import { ParseRule } from "prosemirror-model";
-export declare function camelToDataKebab(str: string): string;
-export declare function propsToAttributes<BType extends string, PSchema extends PropSchema, ContainsInlineContent extends boolean, BSchema extends BlockSchema>(blockConfig: Omit<BlockConfig<BType, PSchema, ContainsInlineContent, BSchema>, "render">): Attributes;
-export declare function parse<BType extends string, PSchema extends PropSchema, ContainsInlineContent extends boolean, BSchema extends BlockSchema>(blockConfig: Omit<BlockConfig<BType, PSchema, ContainsInlineContent, BSchema>, "render">): ParseRule[];
-export declare function render<BType extends string, PSchema extends PropSchema, ContainsInlineContent extends boolean, BSchema extends BlockSchema>(blockConfig: Omit<BlockConfig<BType, PSchema, ContainsInlineContent, BSchema>, "render">, HTMLAttributes: Record<string, any>): {
-    dom: HTMLDivElement;
-    contentDOM: HTMLDivElement;
-} | {
-    dom: HTMLDivElement;
-    contentDOM?: undefined;
-};
-export declare function createBlockSpec<BType extends string, PSchema extends PropSchema, ContainsInlineContent extends false, BSchema extends BlockSchema>(blockConfig: BlockConfig<BType, PSchema, ContainsInlineContent, BSchema>): BlockSpec<BType, PSchema, ContainsInlineContent>;
-export declare function createTipTapBlock<Type extends string, ContainsInlineContent extends boolean, Options extends {
-    domAttributes?: BlockNoteDOMAttributes;
-} = {
-    domAttributes?: BlockNoteDOMAttributes;
-}, Storage = any>(config: TipTapNodeConfig<Type, ContainsInlineContent, Options, Storage>): TipTapNode<Type, ContainsInlineContent, Options, Storage>;