@blocknote/core 0.9.6 → 0.10.1

package/src/schema/styles/createSpec.ts

@@ -0,0 +1,85 @@
+import { Mark } from "@tiptap/core";
+import { ParseRule } from "@tiptap/pm/model";
+import {
+  addStyleAttributes,
+  createInternalStyleSpec,
+  stylePropsToAttributes,
+} from "./internal";
+import { StyleConfig, StyleSpec } from "./types";
+import {UnreachableCaseError} from "../../util/typescript";
+
+export type CustomStyleImplementation<T extends StyleConfig> = {
+  render: T["propSchema"] extends "boolean"
+    ? () => {
+        dom: HTMLElement;
+        contentDOM?: HTMLElement;
+      }
+    : (value: string) => {
+        dom: HTMLElement;
+        contentDOM?: HTMLElement;
+      };
+};
+
+// TODO: support serialization
+
+export function getStyleParseRules(config: StyleConfig): ParseRule[] {
+  return [
+    {
+      tag: `[data-style-type="${config.type}"]`,
+      contentElement: (element) => {
+        const htmlElement = element as HTMLElement;
+
+        if (htmlElement.matches("[data-editable]")) {
+          return htmlElement;
+        }
+
+        return htmlElement.querySelector("[data-editable]") || htmlElement;
+      },
+    },
+  ];
+}
+
+export function createStyleSpec<T extends StyleConfig>(
+  styleConfig: T,
+  styleImplementation: CustomStyleImplementation<T>
+): StyleSpec<T> {
+  const mark = Mark.create({
+    name: styleConfig.type,
+
+    addAttributes() {
+      return stylePropsToAttributes(styleConfig.propSchema);
+    },
+
+    parseHTML() {
+      return getStyleParseRules(styleConfig);
+    },
+
+    renderHTML({ mark }) {
+      let renderResult: {
+        dom: HTMLElement;
+        contentDOM?: HTMLElement;
+      };
+
+      if (styleConfig.propSchema === "boolean") {
+        // @ts-ignore not sure why this is complaining
+        renderResult = styleImplementation.render();
+      } else if (styleConfig.propSchema === "string") {
+        renderResult = styleImplementation.render(mark.attrs.stringValue);
+      } else {
+        throw new UnreachableCaseError(styleConfig.propSchema);
+      }
+
+      // const renderResult = styleImplementation.render();
+      return addStyleAttributes(
+        renderResult,
+        styleConfig.type,
+        mark.attrs.stringValue,
+        styleConfig.propSchema
+      );
+    },
+  });
+
+  return createInternalStyleSpec(styleConfig, {
+    mark,
+  });
+}

package/src/schema/styles/internal.ts

@@ -0,0 +1,96 @@
+import { Attributes, Mark } from "@tiptap/core";
+import {
+  StyleConfig,
+  StyleImplementation,
+  StylePropSchema,
+  StyleSchemaFromSpecs,
+  StyleSpec,
+  StyleSpecs,
+} from "./types";
+
+export function stylePropsToAttributes(
+  propSchema: StylePropSchema
+): Attributes {
+  if (propSchema === "boolean") {
+    return {};
+  }
+  return {
+    stringValue: {
+      default: undefined,
+      keepOnSplit: true,
+      parseHTML: (element) => element.getAttribute("data-value"),
+      renderHTML: (attributes) =>
+        attributes.stringValue !== undefined
+          ? {
+              "data-value": attributes.stringValue,
+            }
+          : {},
+    },
+  };
+}
+
+// Function that adds necessary classes and attributes to the `dom` element
+// returned from a custom style's 'render' function, to ensure no data is lost
+// on internal copy & paste.
+export function addStyleAttributes<
+  SType extends string,
+  PSchema extends StylePropSchema
+>(
+  element: {
+    dom: HTMLElement;
+    contentDOM?: HTMLElement;
+  },
+  styleType: SType,
+  styleValue: PSchema extends "boolean" ? undefined : string,
+  propSchema: PSchema
+): {
+  dom: HTMLElement;
+  contentDOM?: HTMLElement;
+} {
+  // Sets content type attribute
+  element.dom.setAttribute("data-style-type", styleType);
+  // Adds style value as an HTML attribute in kebab-case with "data-" prefix, if
+  // the style takes a string value.
+  if (propSchema === "string") {
+    element.dom.setAttribute("data-value", styleValue as string);
+  }
+
+  if (element.contentDOM !== undefined) {
+    element.contentDOM.setAttribute("data-editable", "");
+  }
+
+  return element;
+}
+
+// This helper function helps to instantiate a stylespec with a
+// config and implementation that conform to the type of Config
+export function createInternalStyleSpec<T extends StyleConfig>(
+  config: T,
+  implementation: StyleImplementation
+) {
+  return {
+    config,
+    implementation,
+  } satisfies StyleSpec<T>;
+}
+
+export function createStyleSpecFromTipTapMark<
+  T extends Mark,
+  P extends StylePropSchema
+>(mark: T, propSchema: P) {
+  return createInternalStyleSpec(
+    {
+      type: mark.name as T["name"],
+      propSchema,
+    },
+    {
+      mark,
+    }
+  );
+}
+
+export function getStyleSchemaFromSpecs<T extends StyleSpecs>(specs: T) {
+  return Object.fromEntries(
+    Object.entries(specs).map(([key, value]) => [key, value.config])
+  ) as StyleSchemaFromSpecs<T>;
+}

package/src/schema/styles/types.ts

@@ -0,0 +1,42 @@
+import { Mark } from "@tiptap/core";
+
+export type StylePropSchema = "boolean" | "string"; // TODO: use PropSchema as name? Use objects as type similar to blocks?
+
+// StyleConfig contains the "schema" info about a Style type
+// i.e. what props it supports, what content it supports, etc.
+export type StyleConfig = {
+  type: string;
+  readonly propSchema: StylePropSchema;
+  // content: "inline" | "none" | "table";
+};
+
+// StyleImplementation contains the "implementation" info about a Style element.
+// Currently, the implementation is always a TipTap Mark
+export type StyleImplementation = {
+  mark: Mark;
+};
+
+// Container for both the config and implementation of a Style,
+// and the type of `implementation` is based on that of the config
+export type StyleSpec<T extends StyleConfig> = {
+  config: T;
+  implementation: StyleImplementation;
+};
+
+// A Schema contains all the types (Configs) supported in an editor
+// The keys are the "type" of Styles supported
+export type StyleSchema = Record<string, StyleConfig>;
+
+export type StyleSpecs = Record<string, StyleSpec<StyleConfig>>;
+
+export type StyleSchemaFromSpecs<T extends StyleSpecs> = {
+  [K in keyof T]: T[K]["config"];
+};
+
+export type Styles<T extends StyleSchema> = {
+  [K in keyof T]?: T[K]["propSchema"] extends "boolean"
+    ? boolean
+    : T[K]["propSchema"] extends "string"
+    ? string
+    : never;
+};

package/src/util/README.md

@@ -0,0 +1,3 @@
+### @blocknote/core/src/@util
+
+Contains generic utility files with helper functions / classes.

package/src/{shared/utils.ts → util/browser.ts}

@@ -1,7 +1,8 @@
 export const isAppleOS = () =>
-  /Mac/.test(navigator.platform) ||
-  (/AppleWebKit/.test(navigator.userAgent) &&
-    /Mobile\/\w+/.test(navigator.userAgent));
+    typeof navigator !== "undefined" &&
+    (/Mac/.test(navigator.platform) ||
+        (/AppleWebKit/.test(navigator.userAgent) &&
+            /Mobile\/\w+/.test(navigator.userAgent)));
 
 export function formatKeyboardShortcut(shortcut: string) {
   if (isAppleOS()) {
@@ -15,8 +16,3 @@ export function mergeCSSClasses(...classes: string[]) {
   return classes.filter((c) => c).join(" ");
 }
 
-export class UnreachableCaseError extends Error {
-  constructor(val: never) {
-    super(`Unreachable case: ${val}`);
-  }
-}

package/src/util/string.ts

@@ -0,0 +1,3 @@
+export function camelToDataKebab(str: string): string {
+  return "data-" + str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}

package/src/util/typescript.ts

@@ -0,0 +1,5 @@
+export class UnreachableCaseError extends Error {
+    constructor(val: never) {
+        super(`Unreachable case: ${val}`);
+    }
+}

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

@@ -1,6 +1,7 @@
 import { Editor } from "@tiptap/core";
-import { BlockIdentifier, BlockSchema, PartialBlock } from "../../extensions/Blocks/api/blockTypes";
-export declare function insertBlocks<BSchema extends BlockSchema>(blocksToInsert: PartialBlock<BSchema>[], referenceBlock: BlockIdentifier, placement: "before" | "after" | "nested" | undefined, editor: Editor): void;
-export declare function updateBlock<BSchema extends BlockSchema>(blockToUpdate: BlockIdentifier, update: PartialBlock<BSchema>, editor: Editor): void;
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import { BlockIdentifier, BlockSchema, InlineContentSchema, PartialBlock, StyleSchema } from "../../schema";
+export declare function insertBlocks<BSchema extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema>(blocksToInsert: PartialBlock<BSchema, I, S>[], referenceBlock: BlockIdentifier, placement: "before" | "after" | "nested" | undefined, editor: BlockNoteEditor<BSchema, I, S>): void;
+export declare function updateBlock<BSchema extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema>(blockToUpdate: BlockIdentifier, update: PartialBlock<BSchema, I, S>, editor: Editor): void;
 export declare function removeBlocks(blocksToRemove: BlockIdentifier[], editor: Editor): void;
-export declare function replaceBlocks<BSchema extends BlockSchema>(blocksToRemove: BlockIdentifier[], blocksToInsert: PartialBlock<BSchema>[], editor: Editor): void;
+export declare function replaceBlocks<BSchema extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema>(blocksToRemove: BlockIdentifier[], blocksToInsert: PartialBlock<BSchema, I, S>[], editor: BlockNoteEditor<BSchema, I, S>): void;

package/types/src/api/exporters/copyExtension.d.ts

@@ -0,0 +1,6 @@
+import { Extension } from "@tiptap/core";
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import { InlineContentSchema, StyleSchema } from "../../schema";
+export declare const createCopyToClipboardExtension: <BSchema extends Record<string, import("../../schema").BlockConfig>, I extends InlineContentSchema, S extends StyleSchema>(editor: BlockNoteEditor<BSchema, I, S>) => Extension<{
+    editor: BlockNoteEditor<BSchema, I, S>;
+}, undefined>;

package/types/src/api/exporters/html/externalHTMLExporter.d.ts

@@ -0,0 +1,8 @@
+import { Fragment, Schema } from "prosemirror-model";
+import type { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
+import { BlockSchema, InlineContentSchema, PartialBlock, StyleSchema } from "../../../schema";
+export interface ExternalHTMLExporter<BSchema extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema> {
+    exportBlocks: (blocks: PartialBlock<BSchema, I, S>[]) => string;
+    exportProseMirrorFragment: (fragment: Fragment) => string;
+}
+export declare const createExternalHTMLExporter: <BSchema extends Record<string, import("../../../schema").BlockConfig>, I extends InlineContentSchema, S extends StyleSchema>(schema: Schema, editor: BlockNoteEditor<BSchema, I, S>) => ExternalHTMLExporter<BSchema, I, S>;

package/types/src/api/exporters/html/internalHTMLSerializer.d.ts

@@ -0,0 +1,8 @@
+import { Fragment, Schema } from "prosemirror-model";
+import type { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
+import { BlockSchema, InlineContentSchema, PartialBlock, StyleSchema } from "../../../schema";
+export interface InternalHTMLSerializer<BSchema extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema> {
+    serializeProseMirrorFragment: (fragment: Fragment) => string;
+    serializeBlocks: (blocks: PartialBlock<BSchema, I, S>[]) => string;
+}
+export declare const createInternalHTMLSerializer: <BSchema extends Record<string, import("../../../schema").BlockConfig>, I extends InlineContentSchema, S extends StyleSchema>(schema: Schema, editor: BlockNoteEditor<BSchema, I, S>) => InternalHTMLSerializer<BSchema, I, S>;

package/types/src/api/exporters/html/util/sharedHTMLConversion.d.ts

@@ -0,0 +1,7 @@
+import { DOMSerializer, Fragment, Node } from "prosemirror-model";
+import type { BlockNoteEditor } from "../../../../editor/BlockNoteEditor";
+import { InlineContentSchema, StyleSchema } from "../../../../schema";
+export declare const serializeNodeInner: <BSchema extends Record<string, import("../../../../schema").BlockConfig>, I extends InlineContentSchema, S extends StyleSchema>(node: Node, options: {
+    document?: Document;
+}, serializer: DOMSerializer, editor: BlockNoteEditor<BSchema, I, S>, toExternalHTML: boolean) => HTMLElement;
+export declare const serializeProseMirrorFragment: (fragment: Fragment, serializer: DOMSerializer) => string;

package/types/src/api/exporters/markdown/markdownExporter.d.ts

@@ -0,0 +1,5 @@
+import { Schema } from "prosemirror-model";
+import type { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
+import { Block, BlockSchema, InlineContentSchema, StyleSchema } from "../../../schema";
+export declare function cleanHTMLToMarkdown(cleanHTMLString: string): string;
+export declare function blocksToMarkdown<BSchema extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema>(blocks: Block<BSchema, I, S>[], schema: Schema, editor: BlockNoteEditor<BSchema, I, S>): string;

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

@@ -1,15 +1,23 @@
-import { Node, Schema } from "prosemirror-model";
-import { Block, BlockSchema, PartialBlock } from "../../extensions/Blocks/api/blockTypes";
-import { PartialInlineContent } from "../../extensions/Blocks/api/inlineContentTypes";
+import { Node, Schema } from "@tiptap/pm/model";
+import type { Block, BlockSchema, InlineContent, InlineContentSchema, PartialBlock, PartialInlineContent, PartialTableContent, StyleSchema } from "../../schema";
 /**
  * converts an array of inline content elements to prosemirror nodes
  */
-export declare function inlineContentToNodes(blockContent: PartialInlineContent[], schema: Schema): Node[];
+export declare function inlineContentToNodes<I extends InlineContentSchema, S extends StyleSchema>(blockContent: PartialInlineContent<I, S>, schema: Schema, styleSchema: S): Node[];
+/**
+ * converts an array of inline content elements to prosemirror nodes
+ */
+export declare function tableContentToNodes<I extends InlineContentSchema, S extends StyleSchema>(tableContent: PartialTableContent<I, S>, schema: Schema, styleSchema: StyleSchema): Node[];
 /**
  * Converts a BlockNote block to a TipTap node.
  */
-export declare function blockToNode<BSchema extends BlockSchema>(block: PartialBlock<BSchema>, schema: Schema): Node;
+export declare function blockToNode(block: PartialBlock<any, any, any>, schema: Schema, styleSchema: StyleSchema): Node;
+/**
+ * Converts an internal (prosemirror) content node to a BlockNote InlineContent array.
+ */
+export declare function contentNodeToInlineContent<I extends InlineContentSchema, S extends StyleSchema>(contentNode: Node, inlineContentSchema: I, styleSchema: S): InlineContent<I, S>[];
+export declare function nodeToCustomInlineContent<I extends InlineContentSchema, S extends StyleSchema>(node: Node, inlineContentSchema: I, styleSchema: S): InlineContent<I, S>;
 /**
  * Convert a TipTap node to a BlockNote block.
  */
-export declare function nodeToBlock<BSchema extends BlockSchema>(node: Node, blockSchema: BSchema, blockCache?: WeakMap<Node, Block<BSchema>>): Block<BSchema>;
+export declare function nodeToBlock<BSchema extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema>(node: Node, blockSchema: BSchema, inlineContentSchema: I, styleSchema: S, blockCache?: WeakMap<Node, Block<BSchema, I, S>>): Block<BSchema, I, S>;

package/types/src/api/parsers/html/parseHTML.d.ts

@@ -0,0 +1,3 @@
+import { Schema } from "prosemirror-model";
+import { Block, BlockSchema, InlineContentSchema, StyleSchema } from "../../../schema";
+export declare function HTMLToBlocks<BSchema extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema>(html: string, blockSchema: BSchema, icSchema: I, styleSchema: S, pmSchema: Schema): Promise<Block<BSchema, I, S>[]>;

package/types/src/api/parsers/html/parseHTML.test.d.ts

@@ -0,0 +1 @@
+export {};

package/types/src/api/parsers/html/util/nestedLists.d.ts

@@ -0,0 +1 @@
+export declare function nestedListsToBlockNoteStructure(elementOrHTML: HTMLElement | string): HTMLElement;

package/types/src/api/parsers/html/util/nestedLists.test.d.ts

@@ -0,0 +1 @@
+export {};

package/types/src/api/parsers/markdown/parseMarkdown.d.ts

@@ -0,0 +1,3 @@
+import { Schema } from "prosemirror-model";
+import { Block, BlockSchema, InlineContentSchema, StyleSchema } from "../../../schema";
+export declare function markdownToBlocks<BSchema extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema>(markdown: string, blockSchema: BSchema, icSchema: I, styleSchema: S, pmSchema: Schema): Promise<Block<BSchema, I, S>[]>;

package/types/src/api/parsers/markdown/parseMarkdown.test.d.ts

@@ -0,0 +1 @@
+export {};

package/types/src/api/parsers/pasteExtension.d.ts

@@ -0,0 +1,6 @@
+import { Extension } from "@tiptap/core";
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import { InlineContentSchema, StyleSchema } from "../../schema";
+export declare const createPasteFromClipboardExtension: <BSchema extends Record<string, import("../../schema").BlockConfig>, I extends InlineContentSchema, S extends StyleSchema>(editor: BlockNoteEditor<BSchema, I, S>) => Extension<{
+    editor: BlockNoteEditor<BSchema, I, S>;
+}, undefined>;