@blocknote/core 0.38.0 → 0.39.0

package/src/blocks/defaultBlockTypeGuards.ts

@@ -1,201 +1,170 @@
 import { CellSelection } from "prosemirror-tables";
 import type { BlockNoteEditor } from "../editor/BlockNoteEditor.js";
-import {
-  BlockConfig,
-  BlockFromConfig,
-  BlockSchema,
-  FileBlockConfig,
-  InlineContentConfig,
-  InlineContentSchema,
-  StyleSchema,
-} from "../schema/index.js";
-import {
-  Block,
-  DefaultBlockSchema,
-  DefaultInlineContentSchema,
-  defaultBlockSchema,
-  defaultInlineContentSchema,
-} from "./defaultBlocks.js";
-import { defaultProps } from "./defaultProps.js";
+import { BlockConfig, PropSchema, PropSpec } from "../schema/index.js";
+import { Block } from "./defaultBlocks.js";
 import { Selection } from "prosemirror-state";
 
-export function checkDefaultBlockTypeInSchema<
-  BlockType extends keyof DefaultBlockSchema,
-  I extends InlineContentSchema,
-  S extends StyleSchema,
+export function editorHasBlockWithType<
+  BType extends string,
+  Props extends
+    | PropSchema
+    | Record<string, "boolean" | "number" | "string">
+    | undefined = undefined,
 >(
-  blockType: BlockType,
-  editor: BlockNoteEditor<any, I, S>,
+  editor: BlockNoteEditor<any, any, any>,
+  blockType: BType,
+  props?: Props,
 ): editor is BlockNoteEditor<
-  { [K in BlockType]: DefaultBlockSchema[BlockType] },
-  I,
-  S
+  {
+    [BT in BType]: Props extends PropSchema
+      ? BlockConfig<BT, Props>
+      : Props extends Record<string, "boolean" | "number" | "string">
+        ? BlockConfig<
+            BT,
+            {
+              [PN in keyof Props]: {
+                default: undefined;
+                type: Props[PN];
+                values?: any[];
+              };
+            }
+          >
+        : BlockConfig<BT, PropSchema>;
+  },
+  any,
+  any
 > {
-  return (
-    blockType in editor.schema.blockSchema &&
-    editor.schema.blockSchema[blockType] === defaultBlockSchema[blockType]
-  );
-}
+  if (!(blockType in editor.schema.blockSpecs)) {
+    return false;
+  }
 
-export function checkBlockTypeInSchema<
-  BlockType extends string,
-  Config extends BlockConfig,
->(
-  blockType: BlockType,
-  blockConfig: Config,
-  editor: BlockNoteEditor<any, any, any>,
-): editor is BlockNoteEditor<{ [T in BlockType]: Config }, any, any> {
-  return (
-    blockType in editor.schema.blockSchema &&
-    editor.schema.blockSchema[blockType] === blockConfig
-  );
-}
+  if (!props) {
+    return true;
+  }
 
-export function checkDefaultInlineContentTypeInSchema<
-  InlineContentType extends keyof DefaultInlineContentSchema,
-  B extends BlockSchema,
-  S extends StyleSchema,
->(
-  inlineContentType: InlineContentType,
-  editor: BlockNoteEditor<B, any, S>,
-): editor is BlockNoteEditor<
-  B,
-  { [K in InlineContentType]: DefaultInlineContentSchema[InlineContentType] },
-  S
-> {
-  return (
-    inlineContentType in editor.schema.inlineContentSchema &&
-    editor.schema.inlineContentSchema[inlineContentType] ===
-      defaultInlineContentSchema[inlineContentType]
-  );
-}
+  for (const [propName, propSpec] of Object.entries(props)) {
+    if (!(propName in editor.schema.blockSpecs[blockType].config.propSchema)) {
+      return false;
+    }
 
-export function checkInlineContentTypeInSchema<
-  InlineContentType extends string,
-  Config extends InlineContentConfig,
->(
-  inlineContentType: InlineContentType,
-  inlineContentConfig: Config,
-  editor: BlockNoteEditor<any, any, any>,
-): editor is BlockNoteEditor<any, { [T in InlineContentType]: Config }, any> {
-  return (
-    inlineContentType in editor.schema.inlineContentSchema &&
-    editor.schema.inlineContentSchema[inlineContentType] === inlineContentConfig
-  );
-}
+    if (typeof propSpec === "string") {
+      if (
+        editor.schema.blockSpecs[blockType].config.propSchema[propName]
+          .default &&
+        typeof editor.schema.blockSpecs[blockType].config.propSchema[propName]
+          .default !== propSpec
+      ) {
+        return false;
+      }
 
-export function checkBlockIsDefaultType<
-  BlockType extends keyof DefaultBlockSchema,
-  I extends InlineContentSchema,
-  S extends StyleSchema,
->(
-  blockType: BlockType,
-  block: Block<any, I, S>,
-  editor: BlockNoteEditor<any, I, S>,
-): block is BlockFromConfig<DefaultBlockSchema[BlockType], I, S> {
-  return (
-    block.type === blockType &&
-    block.type in editor.schema.blockSchema &&
-    checkDefaultBlockTypeInSchema(block.type, editor)
-  );
-}
+      if (
+        editor.schema.blockSpecs[blockType].config.propSchema[propName].type &&
+        editor.schema.blockSpecs[blockType].config.propSchema[propName].type !==
+          propSpec
+      ) {
+        return false;
+      }
+    } else {
+      if (
+        editor.schema.blockSpecs[blockType].config.propSchema[propName]
+          .default !== propSpec.default
+      ) {
+        return false;
+      }
 
-export function checkBlockIsFileBlock<
-  B extends BlockSchema,
-  I extends InlineContentSchema,
-  S extends StyleSchema,
->(
-  block: Block<any, I, S>,
-  editor: BlockNoteEditor<B, I, S>,
-): block is BlockFromConfig<FileBlockConfig, I, S> {
-  return (
-    (block.type in editor.schema.blockSchema &&
-      editor.schema.blockSchema[block.type].isFileBlock) ||
-    false
-  );
-}
+      if (
+        editor.schema.blockSpecs[blockType].config.propSchema[propName]
+          .default === undefined &&
+        propSpec.default === undefined
+      ) {
+        if (
+          editor.schema.blockSpecs[blockType].config.propSchema[propName]
+            .type !== propSpec.type
+        ) {
+          return false;
+        }
+      }
 
-export function checkBlockIsFileBlockWithPreview<
-  B extends BlockSchema,
-  I extends InlineContentSchema,
-  S extends StyleSchema,
->(
-  block: Block<any, I, S>,
-  editor: BlockNoteEditor<B, I, S>,
-): block is BlockFromConfig<
-  FileBlockConfig & {
-    propSchema: Required<FileBlockConfig["propSchema"]>;
-  },
-  I,
-  S
-> {
-  return (
-    (block.type in editor.schema.blockSchema &&
-      editor.schema.blockSchema[block.type].isFileBlock &&
-      "showPreview" in editor.schema.blockSchema[block.type].propSchema) ||
-    false
-  );
-}
+      if (
+        typeof editor.schema.blockSpecs[blockType].config.propSchema[propName]
+          .values !== typeof propSpec.values
+      ) {
+        return false;
+      }
+
+      if (
+        typeof editor.schema.blockSpecs[blockType].config.propSchema[propName]
+          .values === "object" &&
+        typeof propSpec.values === "object"
+      ) {
+        if (
+          editor.schema.blockSpecs[blockType].config.propSchema[propName].values
+            .length !== propSpec.values.length
+        ) {
+          return false;
+        }
+
+        for (
+          let i = 0;
+          i <
+          editor.schema.blockSpecs[blockType].config.propSchema[propName].values
+            .length;
+          i++
+        ) {
+          if (
+            editor.schema.blockSpecs[blockType].config.propSchema[propName]
+              .values[i] !== propSpec.values[i]
+          ) {
+            return false;
+          }
+        }
+      }
+    }
+  }
 
-export function checkBlockIsFileBlockWithPlaceholder<
-  B extends BlockSchema,
-  I extends InlineContentSchema,
-  S extends StyleSchema,
->(block: Block<B, I, S>, editor: BlockNoteEditor<B, I, S>) {
-  const config = editor.schema.blockSchema[block.type];
-  return config.isFileBlock && !block.props.url;
+  return true;
 }
 
-export function checkBlockTypeHasDefaultProp<
-  Prop extends keyof typeof defaultProps,
-  I extends InlineContentSchema,
-  S extends StyleSchema,
+export function blockHasType<
+  BType extends string,
+  Props extends
+    | PropSchema
+    | Record<string, "boolean" | "number" | "string">
+    | undefined = undefined,
 >(
-  prop: Prop,
-  blockType: string,
-  editor: BlockNoteEditor<any, I, S>,
-): editor is BlockNoteEditor<
+  block: Block<any, any, any>,
+  editor: BlockNoteEditor<any, any, any>,
+  blockType: BType,
+  props?: Props,
+): block is Block<
   {
-    [BT in string]: {
-      type: BT;
-      propSchema: {
-        [P in Prop]: (typeof defaultProps)[P];
-      };
-      content: "table" | "inline" | "none";
-    };
+    [BT in BType]: Props extends PropSchema
+      ? BlockConfig<BT, Props>
+      : Props extends Record<string, "boolean" | "number" | "string">
+        ? BlockConfig<
+            BT,
+            {
+              [PN in keyof Props]: PropSpec<
+                Props[PN] extends "boolean"
+                  ? boolean
+                  : Props[PN] extends "number"
+                    ? number
+                    : Props[PN] extends "string"
+                      ? string
+                      : never
+              >;
+            }
+          >
+        : BlockConfig<BT, PropSchema>;
   },
-  I,
-  S
+  any,
+  any
 > {
   return (
-    blockType in editor.schema.blockSchema &&
-    prop in editor.schema.blockSchema[blockType].propSchema &&
-    editor.schema.blockSchema[blockType].propSchema[prop] === defaultProps[prop]
+    editorHasBlockWithType(editor, blockType, props) && block.type === blockType
   );
 }
 
-export function checkBlockHasDefaultProp<
-  Prop extends keyof typeof defaultProps,
-  I extends InlineContentSchema,
-  S extends StyleSchema,
->(
-  prop: Prop,
-  block: Block<any, I, S>,
-  editor: BlockNoteEditor<any, I, S>,
-): block is BlockFromConfig<
-  {
-    type: string;
-    propSchema: {
-      [P in Prop]: (typeof defaultProps)[P];
-    };
-    content: "table" | "inline" | "none";
-  },
-  I,
-  S
-> {
-  return checkBlockTypeHasDefaultProp(prop, block.type, editor);
-}
-
 export function isTableCellSelection(
   selection: Selection,
 ): selection is CellSelection {

package/src/blocks/defaultBlocks.ts

@@ -3,60 +3,132 @@ 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.js";
-import { TextColor } from "../extensions/TextColor/TextColorMark.js";
+import {
+  createAudioBlockSpec,
+  createBulletListItemBlockSpec,
+  createCheckListItemBlockSpec,
+  createCodeBlockSpec,
+  createFileBlockSpec,
+  createHeadingBlockSpec,
+  createImageBlockSpec,
+  createNumberedListItemBlockSpec,
+  createParagraphBlockSpec,
+  createQuoteBlockSpec,
+  createToggleListItemBlockSpec,
+  createVideoBlockSpec,
+  defaultProps,
+} from "./index.js";
 import {
   BlockNoDefaults,
   BlockSchema,
-  BlockSpecs,
   InlineContentSchema,
   InlineContentSpecs,
   PartialBlockNoDefaults,
   StyleSchema,
   StyleSpecs,
+  createStyleSpec,
   createStyleSpecFromTipTapMark,
-  getBlockSchemaFromSpecs,
   getInlineContentSchemaFromSpecs,
   getStyleSchemaFromSpecs,
 } from "../schema/index.js";
-
-import { AudioBlock } from "./AudioBlockContent/AudioBlockContent.js";
-import { CodeBlock } from "./CodeBlockContent/CodeBlockContent.js";
-import { FileBlock } from "./FileBlockContent/FileBlockContent.js";
-import { Heading } from "./HeadingBlockContent/HeadingBlockContent.js";
-import { ImageBlock } from "./ImageBlockContent/ImageBlockContent.js";
-import { ToggleListItem } from "./ListItemBlockContent/ToggleListItemBlockContent/ToggleListItemBlockContent.js";
-import { BulletListItem } from "./ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.js";
-import { CheckListItem } from "./ListItemBlockContent/CheckListItemBlockContent/CheckListItemBlockContent.js";
-import { NumberedListItem } from "./ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.js";
-import { Paragraph } from "./ParagraphBlockContent/ParagraphBlockContent.js";
-import { Quote } from "./QuoteBlockContent/QuoteBlockContent.js";
-import { Table } from "./TableBlockContent/TableBlockContent.js";
-import { VideoBlock } from "./VideoBlockContent/VideoBlockContent.js";
+import { createTableBlockSpec } from "./Table/block.js";
+import { COLORS_DEFAULT } from "../editor/defaultColors.js";
 
 export const defaultBlockSpecs = {
-  paragraph: Paragraph,
-  heading: Heading,
-  quote: Quote,
-  codeBlock: CodeBlock,
-  toggleListItem: ToggleListItem,
-  bulletListItem: BulletListItem,
-  numberedListItem: NumberedListItem,
-  checkListItem: CheckListItem,
-  table: Table,
-  file: FileBlock,
-  image: ImageBlock,
-  video: VideoBlock,
-  audio: AudioBlock,
-} satisfies BlockSpecs;
-
-export const defaultBlockSchema = getBlockSchemaFromSpecs(defaultBlockSpecs);
+  audio: createAudioBlockSpec(),
+  bulletListItem: createBulletListItemBlockSpec(),
+  checkListItem: createCheckListItemBlockSpec(),
+  codeBlock: createCodeBlockSpec(),
+  file: createFileBlockSpec(),
+  heading: createHeadingBlockSpec(),
+  image: createImageBlockSpec(),
+  numberedListItem: createNumberedListItemBlockSpec(),
+  paragraph: createParagraphBlockSpec(),
+  quote: createQuoteBlockSpec(),
+  table: createTableBlockSpec(),
+  toggleListItem: createToggleListItemBlockSpec(),
+  video: createVideoBlockSpec(),
+} as const;
 
 // underscore is used that in case a user overrides DefaultBlockSchema,
 // they can still access the original default block schema
-export type _DefaultBlockSchema = typeof defaultBlockSchema;
+export type _DefaultBlockSchema = {
+  [K in keyof typeof defaultBlockSpecs]: (typeof defaultBlockSpecs)[K]["config"];
+};
 export type DefaultBlockSchema = _DefaultBlockSchema;
 
+const TextColor = createStyleSpec(
+  {
+    type: "textColor",
+    propSchema: "string",
+  },
+  {
+    render: () => {
+      const span = document.createElement("span");
+
+      return {
+        dom: span,
+        contentDOM: span,
+      };
+    },
+    toExternalHTML: (value) => {
+      const span = document.createElement("span");
+      if (value !== defaultProps.textColor.default) {
+        span.style.color =
+          value in COLORS_DEFAULT ? COLORS_DEFAULT[value].text : value;
+      }
+
+      return {
+        dom: span,
+        contentDOM: span,
+      };
+    },
+    parse: (element) => {
+      if (element.tagName === "SPAN" && element.style.color) {
+        return element.style.color;
+      }
+
+      return undefined;
+    },
+  },
+);
+
+const BackgroundColor = createStyleSpec(
+  {
+    type: "backgroundColor",
+    propSchema: "string",
+  },
+  {
+    render: () => {
+      const span = document.createElement("span");
+
+      return {
+        dom: span,
+        contentDOM: span,
+      };
+    },
+    toExternalHTML: (value) => {
+      const span = document.createElement("span");
+      if (value !== defaultProps.backgroundColor.default) {
+        span.style.backgroundColor =
+          value in COLORS_DEFAULT ? COLORS_DEFAULT[value].background : value;
+      }
+
+      return {
+        dom: span,
+        contentDOM: span,
+      };
+    },
+    parse: (element) => {
+      if (element.tagName === "SPAN" && element.style.backgroundColor) {
+        return element.style.backgroundColor;
+      }
+
+      return undefined;
+    },
+  },
+);
+
 export const defaultStyleSpecs = {
   bold: createStyleSpecFromTipTapMark(Bold, "boolean"),
   italic: createStyleSpecFromTipTapMark(Italic, "boolean"),

package/src/blocks/defaultProps.ts

@@ -1,3 +1,6 @@
+import { Attribute } from "@tiptap/core";
+
+import { COLORS_DEFAULT } from "../editor/defaultColors.js";
 import type { Props, PropSchema } from "../schema/index.js";
 
 // TODO: this system should probably be moved / refactored.
@@ -18,7 +21,145 @@ export const defaultProps = {
 
 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"];
+export const parseDefaultProps = (element: HTMLElement) => {
+  const props: Partial<DefaultProps> = {};
+
+  // If the `data-` attribute is found, set the prop to the value, as this most
+  // likely means the parsed element was exported by BlockNote originally.
+  // Otherwise, just use whatever is found in the inline styles, if anything.
+  if (element.hasAttribute("data-background-color")) {
+    props.backgroundColor = element.getAttribute("data-background-color")!;
+  } else if (element.style.backgroundColor) {
+    props.backgroundColor = element.style.backgroundColor;
+  }
+
+  // If the `data-` attribute is found, set the prop to the value, as this most
+  // likely means the parsed element was exported by BlockNote originally.
+  // Otherwise, just use whatever is found in the inline styles, if anything.
+  if (element.hasAttribute("data-text-color")) {
+    props.textColor = element.getAttribute("data-text-color")!;
+  } else if (element.style.color) {
+    props.textColor = element.style.color;
+  }
+
+  props.textAlignment = defaultProps.textAlignment.values.includes(
+    element.style.textAlign as DefaultProps["textAlignment"],
+  )
+    ? (element.style.textAlign as DefaultProps["textAlignment"])
+    : undefined;
+
+  return props;
+};
+
+export const addDefaultPropsExternalHTML = (
+  props: Partial<DefaultProps>,
+  element: HTMLElement,
+) => {
+  if (
+    props.backgroundColor &&
+    props.backgroundColor !== defaultProps.backgroundColor.default
+  ) {
+    // The color can be any string. If the string matches one of the default
+    // theme color names, set the theme color. Otherwise, set the color as-is
+    // (may be a CSS color name, hex value, RGB value, etc).
+    element.style.backgroundColor =
+      props.backgroundColor in COLORS_DEFAULT
+        ? COLORS_DEFAULT[props.backgroundColor].background
+        : props.backgroundColor;
+  }
+
+  if (props.textColor && props.textColor !== defaultProps.textColor.default) {
+    // The color can be any string. If the string matches one of the default
+    // theme color names, set the theme color. Otherwise, set the color as-is
+    // (may be a CSS color name, hex value, RGB value, etc).
+    element.style.color =
+      props.textColor in COLORS_DEFAULT
+        ? COLORS_DEFAULT[props.textColor].text
+        : props.textColor;
+  }
+
+  if (
+    props.textAlignment &&
+    props.textAlignment !== defaultProps.textAlignment.default
+  ) {
+    element.style.textAlign = props.textAlignment;
+  }
+};
+
+export const getBackgroundColorAttribute = (
+  attributeName = "backgroundColor",
+): Attribute => ({
+  default: defaultProps.backgroundColor.default,
+  parseHTML: (element) => {
+    if (element.hasAttribute("data-background-color")) {
+      return element.getAttribute("data-background-color")!;
+    }
+
+    if (element.style.backgroundColor) {
+      return element.style.backgroundColor;
+    }
+
+    return defaultProps.backgroundColor.default;
+  },
+  renderHTML: (attributes) => {
+    if (attributes[attributeName] === defaultProps.backgroundColor.default) {
+      return {};
+    }
+
+    return {
+      "data-background-color": attributes[attributeName],
+    };
+  },
+});
+
+export const getTextColorAttribute = (
+  attributeName = "textColor",
+): Attribute => ({
+  default: defaultProps.textColor.default,
+  parseHTML: (element) => {
+    if (element.hasAttribute("data-text-color")) {
+      return element.getAttribute("data-text-color")!;
+    }
+
+    if (element.style.color) {
+      return element.style.color;
+    }
+
+    return defaultProps.textColor.default;
+  },
+  renderHTML: (attributes) => {
+    if (attributes[attributeName] === defaultProps.textColor.default) {
+      return {};
+    }
+
+    return {
+      "data-text-color": attributes[attributeName],
+    };
+  },
+});
+
+export const getTextAlignmentAttribute = (
+  attributeName = "textAlignment",
+): Attribute => ({
+  default: defaultProps.textAlignment.default,
+  parseHTML: (element) => {
+    if (element.hasAttribute("data-text-alignment")) {
+      return element.getAttribute("data-text-alignment");
+    }
+
+    if (element.style.textAlign) {
+      return element.style.textAlign;
+    }
+
+    return defaultProps.textAlignment.default;
+  },
+  renderHTML: (attributes) => {
+    if (attributes[attributeName] === defaultProps.textAlignment.default) {
+      return {};
+    }
+
+    return {
+      "data-text-alignment": attributes[attributeName],
+    };
+  },
+});