feat: introduce BaseBlock, a base of the restraints

Author: maxswjeon

packages/core/src/BlockNoteEditor.ts

@@ -2,36 +2,33 @@ import { Editor, EditorOptions } from "@tiptap/core";
 import { Node } from "prosemirror-model";
 // import "./blocknote.css";
 import { Editor as TiptapEditor } from "@tiptap/core/dist/packages/core/src/Editor";
+import { UiFactories, getBlockNoteExtensions } from "./BlockNoteExtensions";
 import {
   insertBlocks,
   removeBlocks,
   replaceBlocks,
   updateBlock,
 } from "./api/blockManipulation/blockManipulation";
 import {
+  HTMLToBlocks,
   blocksToHTML,
   blocksToMarkdown,
-  HTMLToBlocks,
   markdownToBlocks,
 } from "./api/formatConversions/formatConversions";
 import { nodeToBlock } from "./api/nodeConversions/nodeConversions";
 import { getNodeById } from "./api/util/nodeUtil";
-import { getBlockNoteExtensions, UiFactories } from "./BlockNoteExtensions";
 import styles from "./editor.module.css";
 import {
+  BaseBlock,
   BlockIdentifier,
   BlockSpec,
-  BlockTemplate,
   PartialBlockTemplate,
 } from "./extensions/Blocks/api/blockTypes";
 import {
   MouseCursorPosition,
   TextCursorPosition,
 } from "./extensions/Blocks/api/cursorPositionTypes";
-import {
-  defaultBlocks,
-  DefaultBlockTypes,
-} from "./extensions/Blocks/api/defaultBlocks";
+import { defaultBlocks } from "./extensions/Blocks/api/defaultBlocks";
 import {
   ColorStyle,
   Styles,
@@ -44,16 +41,7 @@ import {
   defaultSlashMenuItems,
 } from "./extensions/SlashMenu";
 
-// We need to separate WithChildren, otherwise we get issues with recursive types
-// maybe worth a revisit before merging
-type WithChildren<Block extends BlockTemplate<any, any>> = Block & {
-  children: WithChildren<Block>[];
-};
-
-export type BlockNoteEditorOptions<
-  BareBlock extends BlockTemplate<any, any>,
-  Block extends BareBlock = WithChildren<BareBlock>
-> = {
+export type BlockNoteEditorOptions<Block extends BaseBlock = BaseBlock> = {
   // TODO: Figure out if enableBlockNoteExtensions/disableHistoryExtension are needed and document them.
   enableBlockNoteExtensions: boolean;
   disableHistoryExtension: boolean;
@@ -116,10 +104,7 @@ const blockNoteTipTapOptions = {
 };
 
 // TODO: make type of BareBlock / Block automatically based on options.blocks
-export class BlockNoteEditor<
-  BareBlock extends BlockTemplate<any, any> = DefaultBlockTypes,
-  Block extends BareBlock & { children: Block[] } = WithChildren<BareBlock>
-> {
+export class BlockNoteEditor<Block extends BaseBlock = BaseBlock> {
   public readonly _tiptapEditor: TiptapEditor & { contentComponent: any };
   private blockCache = new WeakMap<Node, Block>();
   private mousePos = { x: 0, y: 0 };
@@ -134,7 +119,6 @@ export class BlockNoteEditor<
   }
 
   constructor(options: Partial<BlockNoteEditorOptions<Block>> = {}) {
-    console.log("test");
     // apply defaults
     options = {
       defaultStyles: true,
@@ -266,7 +250,7 @@ export class BlockNoteEditor<
    * @param reverse Whether the blocks should be traversed in reverse order.
    */
   public forEachBlock(
-    callback: (block: Block) => boolean,
+    callback: (block: BaseBlock) => boolean,
     reverse: boolean = false
   ): void {
     const blocks = this.topLevelBlocks.slice();
@@ -275,15 +259,17 @@ export class BlockNoteEditor<
       blocks.reverse();
     }
 
-    function traverseBlockArray(blockArray: Block[]): boolean {
+    function traverseBlockArray(blockArray: BaseBlock[]): boolean {
       for (const block of blockArray) {
         if (!callback(block)) {
           return false;
         }
 
-        const children = reverse
-          ? block.children.slice().reverse()
-          : block.children;
+        const children: BaseBlock[] = block.children
+          ? reverse
+            ? block.children.slice().reverse()
+            : block.children
+          : [];
 
         if (!traverseBlockArray(children)) {
           return false;
@@ -685,12 +671,8 @@ export class BlockNoteEditor<
    * @param markdown The Markdown string to parse blocks from.
    * @returns The blocks parsed from the Markdown string.
    */
-  public async markdownToBlocks(markdown: string): Promise<Block[]> {
-    return markdownToBlocks(
-      markdown,
-      this.schema,
-      this._tiptapEditor.schema
-    ) as any; // TODO: fix type
+  public async markdownToBlocks(markdown: string): Promise<BaseBlock[]> {
+    return markdownToBlocks(markdown, this.schema, this._tiptapEditor.schema);
   }
 }
 

packages/core/src/api/formatConversions/formatConversions.ts

@@ -8,6 +8,7 @@ import remarkRehype from "remark-rehype";
 import remarkStringify from "remark-stringify";
 import { unified } from "unified";
 import {
+  BaseBlock,
   BlockSpec,
   BlockTemplate,
 } from "../../extensions/Blocks/api/blockTypes";
@@ -45,14 +46,14 @@ export async function HTMLToBlocks(
   html: string,
   schema: Map<string, BlockSpec>,
   pmSchema: Schema
-): Promise<BlockTemplate<any, any>[]> {
+): Promise<BaseBlock[]> {
   const htmlNode = document.createElement("div");
   htmlNode.innerHTML = html.trim();
 
   const parser = DOMParser.fromSchema(pmSchema);
   const parentNode = parser.parse(htmlNode);
 
-  const blocks: BlockTemplate<any, any>[] = [];
+  const blocks: BaseBlock[] = [];
 
   for (let i = 0; i < parentNode.firstChild!.childCount; i++) {
     blocks.push(nodeToBlock(parentNode.firstChild!.child(i), schema));
@@ -62,7 +63,7 @@ export async function HTMLToBlocks(
 }
 
 export async function blocksToMarkdown(
-  blocks: BlockTemplate<any, any>[],
+  blocks: BaseBlock[],
   schema: Schema
 ): Promise<string> {
   const markdownString = await unified()

packages/core/src/extensions/Blocks/api/block.ts

@@ -1,5 +1,5 @@
 import { Attribute, Node } from "@tiptap/core";
-import { PropsFromPropSpec, PropSpec } from "./blockTypes";
+import { PropSpec, PropsFromPropSpec } from "./blockTypes";
 
 function camelToDataKebab(str: string): string {
   return "data-" + str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
@@ -26,7 +26,7 @@ export function createBlockFromTiptapNode<
 ) {
   if (node.name !== blockType) {
     throw Error(
-      "Node must be of type " + blockType + ", but is of type" + node.name + "."
+      `Node must be of type ${blockType}, but is of type ${node.name}.`
     );
   }
 

packages/core/src/extensions/Blocks/api/blockTypes.ts

@@ -16,8 +16,11 @@ export type BlockTemplate<
   type: Type;
   props: Props;
   content: InlineContent[];
+  children?: BlockTemplate<string, Record<string, string>>[];
 };
 
+export type BaseBlock = BlockTemplate<string, Record<string, string>>;
+
 // information about a blocks props when defining Block types
 export type PropSpec = {
   name: string;