@blocknote/core 0.9.6 → 0.10.1

package/src/api/formatConversions/formatConversions.ts

@@ -1,133 +0,0 @@
-import { DOMParser, DOMSerializer, Schema } from "prosemirror-model";
-import rehypeParse from "rehype-parse";
-import rehypeRemark from "rehype-remark";
-import rehypeStringify from "rehype-stringify";
-import remarkGfm from "remark-gfm";
-import remarkParse from "remark-parse";
-import remarkRehype, { defaultHandlers } from "remark-rehype";
-import remarkStringify from "remark-stringify";
-import { unified } from "unified";
-import { Block, BlockSchema } from "../../extensions/Blocks/api/blockTypes";
-
-import { blockToNode, nodeToBlock } from "../nodeConversions/nodeConversions";
-import { removeUnderlines } from "./removeUnderlinesRehypePlugin";
-import { simplifyBlocks } from "./simplifyBlocksRehypePlugin";
-
-export async function blocksToHTML<BSchema extends BlockSchema>(
-  blocks: Block<BSchema>[],
-  schema: Schema
-): Promise<string> {
-  const htmlParentElement = document.createElement("div");
-  const serializer = DOMSerializer.fromSchema(schema);
-
-  for (const block of blocks) {
-    const node = blockToNode(block, schema);
-    const htmlNode = serializer.serializeNode(node);
-    htmlParentElement.appendChild(htmlNode);
-  }
-
-  const htmlString = await unified()
-    .use(rehypeParse, { fragment: true })
-    .use(simplifyBlocks, {
-      orderedListItemBlockTypes: new Set<string>(["numberedListItem"]),
-      unorderedListItemBlockTypes: new Set<string>(["bulletListItem"]),
-    })
-    .use(rehypeStringify)
-    .process(htmlParentElement.innerHTML);
-
-  return htmlString.value as string;
-}
-
-export async function HTMLToBlocks<BSchema extends BlockSchema>(
-  html: string,
-  blockSchema: BSchema,
-  schema: Schema
-): Promise<Block<BSchema>[]> {
-  const htmlNode = document.createElement("div");
-  htmlNode.innerHTML = html.trim();
-
-  const parser = DOMParser.fromSchema(schema);
-  const parentNode = parser.parse(htmlNode); //, { preserveWhitespace: "full" });
-
-  const blocks: Block<BSchema>[] = [];
-
-  for (let i = 0; i < parentNode.firstChild!.childCount; i++) {
-    blocks.push(nodeToBlock(parentNode.firstChild!.child(i), blockSchema));
-  }
-
-  return blocks;
-}
-
-export async function blocksToMarkdown<BSchema extends BlockSchema>(
-  blocks: Block<BSchema>[],
-  schema: Schema
-): Promise<string> {
-  const markdownString = await unified()
-    .use(rehypeParse, { fragment: true })
-    .use(removeUnderlines)
-    .use(rehypeRemark)
-    .use(remarkGfm)
-    .use(remarkStringify)
-    .process(await blocksToHTML(blocks, schema));
-
-  return markdownString.value as string;
-}
-
-// modefied version of https://github.com/syntax-tree/mdast-util-to-hast/blob/main/lib/handlers/code.js
-// that outputs a data-language attribute instead of a CSS class (e.g.: language-typescript)
-function code(state: any, node: any) {
-  const value = node.value ? node.value + "\n" : "";
-  /** @type {Properties} */
-  const properties: any = {};
-
-  if (node.lang) {
-    // changed line
-    properties["data-language"] = node.lang;
-  }
-
-  // Create `<code>`.
-  /** @type {Element} */
-  let result: any = {
-    type: "element",
-    tagName: "code",
-    properties,
-    children: [{ type: "text", value }],
-  };
-
-  if (node.meta) {
-    result.data = { meta: node.meta };
-  }
-
-  state.patch(node, result);
-  result = state.applyData(node, result);
-
-  // Create `<pre>`.
-  result = {
-    type: "element",
-    tagName: "pre",
-    properties: {},
-    children: [result],
-  };
-  state.patch(node, result);
-  return result;
-}
-
-export async function markdownToBlocks<BSchema extends BlockSchema>(
-  markdown: string,
-  blockSchema: BSchema,
-  schema: Schema
-): Promise<Block<BSchema>[]> {
-  const htmlString = await unified()
-    .use(remarkParse)
-    .use(remarkGfm)
-    .use(remarkRehype, {
-      handlers: {
-        ...(defaultHandlers as any),
-        code,
-      },
-    })
-    .use(rehypeStringify)
-    .process(markdown);
-
-  return HTMLToBlocks(htmlString.value as string, blockSchema, schema);
-}

package/src/api/nodeConversions/testUtil.ts

@@ -1,65 +0,0 @@
-import {
-  Block,
-  BlockSchema,
-  PartialBlock,
-} from "../../extensions/Blocks/api/blockTypes";
-import {
-  InlineContent,
-  PartialInlineContent,
-  StyledText,
-} from "../../extensions/Blocks/api/inlineContentTypes";
-
-function textShorthandToStyledText(
-  content: string | StyledText[] = ""
-): StyledText[] {
-  if (typeof content === "string") {
-    return [
-      {
-        type: "text",
-        text: content,
-        styles: {},
-      },
-    ];
-  }
-  return content;
-}
-
-function partialContentToInlineContent(
-  content: string | PartialInlineContent[] = ""
-): InlineContent[] {
-  if (typeof content === "string") {
-    return textShorthandToStyledText(content);
-  }
-
-  return content.map((partialContent) => {
-    if (partialContent.type === "link") {
-      return {
-        ...partialContent,
-        content: textShorthandToStyledText(partialContent.content),
-      };
-    } else {
-      return partialContent;
-    }
-  });
-}
-
-export function partialBlockToBlockForTesting<BSchema extends BlockSchema>(
-  partialBlock: PartialBlock<BSchema>
-): Block<BSchema> {
-  const withDefaults = {
-    id: "",
-    type: "paragraph",
-    // because at this point we don't have an easy way to access default props at runtime,
-    // partialBlockToBlockForTesting will not set them.
-    props: {} as any,
-    content: [] as any,
-    children: [],
-    ...partialBlock,
-  } satisfies PartialBlock<BSchema>;
-
-  return {
-    ...withDefaults,
-    content: partialContentToInlineContent(withDefaults.content),
-    children: withDefaults.children.map(partialBlockToBlockForTesting),
-  };
-}

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

@@ -1,307 +0,0 @@
-import { Attribute, Attributes, Node } from "@tiptap/core";
-import { BlockNoteDOMAttributes, BlockNoteEditor } from "../../..";
-import styles from "../nodes/Block.module.css";
-import {
-  BlockConfig,
-  BlockSchema,
-  BlockSpec,
-  PropSchema,
-  TipTapNode,
-  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();
-}
-
-// Function that uses the 'propSchema' of a blockConfig to create a TipTap
-// node's `addAttributes` property.
-export function propsToAttributes<
-  BType extends string,
-  PSchema extends PropSchema,
-  ContainsInlineContent extends boolean,
-  BSchema extends BlockSchema
->(
-  blockConfig: Omit<
-    BlockConfig<BType, PSchema, ContainsInlineContent, BSchema>,
-    "render"
-  >
-): Attributes {
-  const tiptapAttributes: Record<string, Attribute> = {};
-
-  Object.entries(blockConfig.propSchema).forEach(([name, spec]) => {
-    tiptapAttributes[name] = {
-      default: spec.default,
-      keepOnSplit: true,
-      // Props are displayed in kebab-case as HTML attributes. If a prop's
-      // value is the same as its default, we don't display an HTML
-      // attribute for it.
-      parseHTML: (element) => {
-        const value = element.getAttribute(camelToDataKebab(name));
-
-        if (value === null) {
-          return null;
-        }
-
-        if (typeof spec.default === "boolean") {
-          if (value === "true") {
-            return true;
-          }
-
-          if (value === "false") {
-            return false;
-          }
-
-          return null;
-        }
-
-        if (typeof spec.default === "number") {
-          const asNumber = parseFloat(value);
-          const isNumeric =
-            !Number.isNaN(asNumber) && Number.isFinite(asNumber);
-
-          if (isNumeric) {
-            return asNumber;
-          }
-
-          return null;
-        }
-
-        return value;
-      },
-      renderHTML: (attributes) =>
-        attributes[name] !== spec.default
-          ? {
-              [camelToDataKebab(name)]: attributes[name],
-            }
-          : {},
-    };
-  });
-
-  return tiptapAttributes;
-}
-
-// Function that uses the 'parse' function of a blockConfig to create a
-// TipTap node's `parseHTML` property. This is only used for parsing content
-// from the clipboard.
-export function parse<
-  BType extends string,
-  PSchema extends PropSchema,
-  ContainsInlineContent extends boolean,
-  BSchema extends BlockSchema
->(
-  blockConfig: Omit<
-    BlockConfig<BType, PSchema, ContainsInlineContent, BSchema>,
-    "render"
-  >
-): ParseRule[] {
-  return [
-    {
-      tag: "div[data-content-type=" + blockConfig.type + "]",
-    },
-  ];
-}
-
-// Function that uses the 'render' function of a blockConfig to create a
-// TipTap node's `renderHTML` property. Since custom blocks use node views,
-// this is only used for serializing content to the clipboard.
-export 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>
-) {
-  // Create blockContent element
-  const blockContent = document.createElement("div");
-  // Add blockContent HTML attribute
-  blockContent.setAttribute("data-content-type", blockConfig.type);
-  // Add props as HTML attributes in kebab-case with "data-" prefix
-  for (const [attribute, value] of Object.entries(HTMLAttributes)) {
-    blockContent.setAttribute(attribute, value);
-  }
-
-  // TODO: This only works for content copied within BlockNote.
-  // Creates contentDOM element to serialize inline content into.
-  let contentDOM: HTMLDivElement | undefined;
-  if (blockConfig.containsInlineContent) {
-    contentDOM = document.createElement("div");
-    blockContent.appendChild(contentDOM);
-  } else {
-    contentDOM = undefined;
-  }
-
-  return contentDOM !== undefined
-    ? {
-        dom: blockContent,
-        contentDOM: contentDOM,
-      }
-    : {
-        dom: blockContent,
-      };
-}
-
-// A function to create custom block for API consumers
-// we want to hide the tiptap node from API consumers and provide a simpler API surface instead
-export function createBlockSpec<
-  BType extends string,
-  PSchema extends PropSchema,
-  ContainsInlineContent extends false,
-  BSchema extends BlockSchema
->(
-  blockConfig: BlockConfig<BType, PSchema, ContainsInlineContent, BSchema>
-): BlockSpec<BType, PSchema, ContainsInlineContent> {
-  const node = createTipTapBlock<
-    BType,
-    ContainsInlineContent,
-    {
-      editor: BlockNoteEditor<BSchema>;
-      domAttributes?: BlockNoteDOMAttributes;
-    }
-  >({
-    name: blockConfig.type,
-    content: (blockConfig.containsInlineContent
-      ? "inline*"
-      : "") as ContainsInlineContent extends true ? "inline*" : "",
-    selectable: true,
-
-    addAttributes() {
-      return propsToAttributes(blockConfig);
-    },
-
-    parseHTML() {
-      return parse(blockConfig);
-    },
-
-    renderHTML({ HTMLAttributes }) {
-      return render(blockConfig, HTMLAttributes);
-    },
-
-    addNodeView() {
-      return ({ HTMLAttributes, getPos }) => {
-        // Create blockContent element
-        const blockContent = document.createElement("div");
-        // Add custom HTML attributes
-        const blockContentDOMAttributes =
-          this.options.domAttributes?.blockContent || {};
-        for (const [attribute, value] of Object.entries(
-          blockContentDOMAttributes
-        )) {
-          if (attribute !== "class") {
-            blockContent.setAttribute(attribute, value);
-          }
-        }
-        // Set blockContent & custom classes
-        blockContent.className = mergeCSSClasses(
-          styles.blockContent,
-          blockContentDOMAttributes.class
-        );
-        // Add blockContent HTML attribute
-        blockContent.setAttribute("data-content-type", blockConfig.type);
-        // Add props as HTML attributes in kebab-case with "data-" prefix
-        for (const [attribute, value] of Object.entries(HTMLAttributes)) {
-          blockContent.setAttribute(attribute, value);
-        }
-
-        // Gets BlockNote editor instance
-        const editor = this.options.editor! as BlockNoteEditor<
-          BSchema & {
-            [k in BType]: BlockSpec<BType, PSchema, ContainsInlineContent>;
-          }
-        >;
-        // Gets position of the node
-        if (typeof getPos === "boolean") {
-          throw new Error(
-            "Cannot find node position as getPos is a boolean, not a function."
-          );
-        }
-        const pos = getPos();
-        // Gets TipTap editor instance
-        const tipTapEditor = editor._tiptapEditor;
-        // Gets parent blockContainer node
-        const blockContainer = tipTapEditor.state.doc.resolve(pos!).node();
-        // Gets block identifier
-        const blockIdentifier = blockContainer.attrs.id;
-
-        // Get the block
-        const block = editor.getBlock(blockIdentifier)!;
-        if (block.type !== blockConfig.type) {
-          throw new Error("Block type does not match");
-        }
-
-        // Render elements
-        const rendered = blockConfig.render(block as any, editor);
-        // Add HTML attributes to contentDOM
-        if (blockConfig.containsInlineContent) {
-          const contentDOM = (rendered as { contentDOM: HTMLElement })
-            .contentDOM;
-
-          const inlineContentDOMAttributes =
-            this.options.domAttributes?.inlineContent || {};
-          // Add custom HTML attributes
-          for (const [attribute, value] of Object.entries(
-            inlineContentDOMAttributes
-          )) {
-            if (attribute !== "class") {
-              contentDOM.setAttribute(attribute, value);
-            }
-          }
-          // Merge existing classes with inlineContent & custom classes
-          contentDOM.className = mergeCSSClasses(
-            contentDOM.className,
-            styles.inlineContent,
-            inlineContentDOMAttributes.class
-          );
-        }
-        // Add elements to blockContent
-        blockContent.appendChild(rendered.dom);
-
-        return "contentDOM" in rendered
-          ? {
-              dom: blockContent,
-              contentDOM: rendered.contentDOM,
-              destroy: rendered.destroy,
-            }
-          : {
-              dom: blockContent,
-              destroy: rendered.destroy,
-            };
-      };
-    },
-  });
-
-  return {
-    node: node as TipTapNode<BType, ContainsInlineContent>,
-    propSchema: blockConfig.propSchema,
-  };
-}
-
-export 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> {
-  // 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
-  // attribute to be read only.
-  return Node.create<Options, Storage>({
-    ...config,
-    group: "blockContent",
-    content: config.content,
-  }) as TipTapNode<Type, ContainsInlineContent, Options, Storage>;
-}