@blocknote/core 0.4.6-alpha.4 → 0.5.0

package/package.json

@@ -3,7 +3,7 @@
   "homepage": "https://github.com/TypeCellOS/BlockNote",
   "private": false,
   "license": "MPL-2.0",
-  "version": "0.4.6-alpha.4",
+  "version": "0.5.0",
   "files": [
     "dist",
     "types",
@@ -109,5 +109,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "4ec9f17bdaa504a53eb080909e0e6c22ba071b61"
+  "gitHead": "31e2f4516ba88cb1a6439fbf464f8bcab5dffd1b"
 }

package/src/BlockNoteEditor.ts

@@ -34,13 +34,49 @@ export type BlockNoteEditorOptions = {
   // TODO: Figure out if enableBlockNoteExtensions/disableHistoryExtension are needed and document them.
   enableBlockNoteExtensions: boolean;
   disableHistoryExtension: boolean;
+  /**
+   * Factories used to create a custom UI for BlockNote
+   */
   uiFactories: UiFactories;
+  /**
+   * TODO: why is this called slashCommands and not slashMenuItems?
+   *
+   * @default defaultSlashMenuItems from `./extensions/SlashMenu`
+   */
   slashCommands: BaseSlashMenuItem[];
+
+  /**
+   * The HTML element that should be used as the parent element for the editor.
+   *
+   * @default: undefined, the editor is not attached to the DOM
+   */
   parentElement: HTMLElement;
+  /**
+   * An object containing attributes that should be added to the editor's HTML element.
+   *
+   * @example { class: "my-editor-class" }
+   */
   editorDOMAttributes: Record<string, string>;
+  /**
+   *  A callback function that runs when the editor is ready to be used.
+   */
   onEditorReady: (editor: BlockNoteEditor) => void;
+  /**
+   * A callback function that runs whenever the editor's contents change.
+   */
   onEditorContentChange: (editor: BlockNoteEditor) => void;
+  /**
+   * A callback function that runs whenever the text cursor position changes.
+   */
   onTextCursorPositionChange: (editor: BlockNoteEditor) => void;
+  initialContent: PartialBlock[];
+
+  /**
+   * Use default BlockNote font and reset the styles of <p> <li> <h1> elements etc., that are used in BlockNote.
+   *
+   * @default true
+   */
+  defaultStyles: boolean;
 
   // tiptap options, undocumented
   _tiptapOptions: any;
@@ -61,6 +97,12 @@ export class BlockNoteEditor {
   }
 
   constructor(options: Partial<BlockNoteEditorOptions> = {}) {
+    // apply defaults
+    options = {
+      defaultStyles: true,
+      ...options,
+    };
+
     const blockNoteExtensions = getBlockNoteExtensions({
       editor: this,
       uiFactories: options.uiFactories || {},
@@ -72,10 +114,19 @@ export class BlockNoteEditor {
       : blockNoteExtensions;
 
     const tiptapOptions: EditorOptions = {
+      // TODO: This approach to setting initial content is "cleaner" but requires the PM editor schema, which is only
+      //  created after initializing the TipTap editor. Not sure it's feasible.
+      // content:
+      //   options.initialContent &&
+      //   options.initialContent.map((block) =>
+      //     blockToNode(block, this._tiptapEditor.schema).toJSON()
+      //   ),
       ...blockNoteTipTapOptions,
       ...options._tiptapOptions,
       onCreate: () => {
         options.onEditorReady?.(this);
+        options.initialContent &&
+          this.replaceBlocks(this.topLevelBlocks, options.initialContent);
       },
       onUpdate: () => {
         options.onEditorContentChange?.(this);
@@ -93,6 +144,7 @@ export class BlockNoteEditor {
           class: [
             styles.bnEditor,
             styles.bnRoot,
+            options.defaultStyles ? styles.defaultStyles : "",
             options.editorDOMAttributes?.class || "",
           ].join(" "),
         },
@@ -159,24 +211,34 @@ export class BlockNoteEditor {
    * @param reverse Whether the blocks should be traversed in reverse order.
    */
   public forEachBlock(
-    callback: (block: Block) => void,
+    callback: (block: Block) => boolean,
     reverse: boolean = false
   ): void {
-    function helper(blocks: Block[]) {
-      if (reverse) {
-        for (const block of blocks.reverse()) {
-          helper(block.children);
-          callback(block);
+    const blocks = this.topLevelBlocks.slice();
+
+    if (reverse) {
+      blocks.reverse();
+    }
+
+    function traverseBlockArray(blockArray: Block[]): boolean {
+      for (const block of blockArray) {
+        if (callback(block) === false) {
+          return false;
         }
-      } else {
-        for (const block of blocks) {
-          callback(block);
-          helper(block.children);
+
+        const children = reverse
+          ? block.children.slice().reverse()
+          : block.children;
+
+        if (traverseBlockArray(children) === false) {
+          return false;
         }
       }
+
+      return true;
     }
 
-    helper(this.topLevelBlocks);
+    traverseBlockArray(blocks);
   }
 
   /**
@@ -273,7 +335,7 @@ export class BlockNoteEditor {
    * @param blockToUpdate The block that should be updated.
    * @param update A partial block which defines how the existing block should be changed.
    */
-  public updateBlock(blockToUpdate: Block, update: PartialBlock) {
+  public updateBlock(blockToUpdate: BlockIdentifier, update: PartialBlock) {
     updateBlock(blockToUpdate, update, this._tiptapEditor);
   }
 
@@ -281,7 +343,7 @@ export class BlockNoteEditor {
    * Removes existing blocks from the editor. Throws an error if any of the blocks could not be found.
    * @param blocksToRemove An array of identifiers for existing blocks that should be removed.
    */
-  public removeBlocks(blocksToRemove: Block[]) {
+  public removeBlocks(blocksToRemove: BlockIdentifier[]) {
     removeBlocks(blocksToRemove, this._tiptapEditor);
   }
 
@@ -293,7 +355,7 @@ export class BlockNoteEditor {
    * @param blocksToInsert An array of partial blocks to replace the old ones with.
    */
   public replaceBlocks(
-    blocksToRemove: Block[],
+    blocksToRemove: BlockIdentifier[],
     blocksToInsert: PartialBlock[]
   ) {
     replaceBlocks(blocksToRemove, blocksToInsert, this._tiptapEditor);

package/src/editor.module.css

@@ -3,6 +3,11 @@
 .bnEditor {
   outline: none;
   margin-left: 50px;
+
+  /* Define a set of colors to be used throughout the app for consistency
+  see https://atlassian.design/foundations/color for more info */
+  --N800: #172b4d; /* Dark neutral used for tooltips and text on light background */
+  --N40: #dfe1e6; /* Light neutral used for subtle borders and text on dark background */
 }
 
 /*
@@ -25,13 +30,21 @@ Tippy popups that are appended to document.body directly
   box-sizing: inherit;
 }
 
-.bnEditor,
-.dragPreview {
-  /* Define a set of colors to be used throughout the app for consistency
-  see https://atlassian.design/foundations/color for more info */
-  --N800: #172b4d; /* Dark neutral used for tooltips and text on light background */
-  --N40: #dfe1e6; /* Light neutral used for subtle borders and text on dark background */
+/* reset styles, they will be set on blockContent */
+.defaultStyles p,
+.defaultStyles h1,
+.defaultStyles h2,
+.defaultStyles h3,
+.defaultStyles li {
+  all: unset;
+  margin: 0;
+  padding: 0;
+  font-size: inherit;
+}
 
+.defaultStyles {
+  font-size: 16px;
+  font-weight: normal;
   font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont,
     "Open Sans", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
     "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

package/src/extensions/Blocks/nodes/Block.module.css

@@ -3,21 +3,11 @@ BASIC STYLES
 */
 
 .blockOuter {
-  /* padding-bottom: 15px; */
-  font-size: 16px;
   line-height: 1.5;
-  transition: all 0.2s;
-  font-weight: normal;
-}
-
-.block {
-  /* content: ""; */
-  transition: all 0.2s;
-  margin: 0px;
+  transition: margin 0.2s;
 }
 
 .blockContent {
-  font-size: 1em;
   padding: 3px 0;
   transition: font-size 0.2s;
   /* display: inline-block; */
@@ -29,18 +19,6 @@ BASIC STYLES
   /*margin: 0px;*/
 }
 
-/* reset styles, they will be set on blockContent */
-.blockContent p,
-.blockContent h1,
-.blockContent h2,
-.blockContent h3,
-.blockContent li {
-  all: unset;
-  margin: 0;
-  padding: 0;
-  font-size: inherit;
-}
-
 /*
 NESTED BLOCKS
 */

package/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts

@@ -158,8 +158,26 @@ function setDragImage(view: EditorView, from: number, to = from) {
   // dataTransfer.setDragImage(element) only works if element is attached to the DOM.
   unsetDragImage();
   dragImageElement = parentClone;
+
+  // TODO: This is hacky, need a better way of assigning classes to the editor so that they can also be applied to the
+  //  drag preview.
+  const classes = view.dom.className.split(" ");
+  const inheritedClasses = classes
+    .filter(
+      (className) =>
+        !className.includes("bn") &&
+        !className.includes("ProseMirror") &&
+        !className.includes("editor")
+    )
+    .join(" ");
+
   dragImageElement.className =
-    dragImageElement.className + " " + styles.dragPreview;
+    dragImageElement.className +
+    " " +
+    styles.dragPreview +
+    " " +
+    inheritedClasses;
+
   document.body.appendChild(dragImageElement);
 }
 

package/types/src/BlockNoteEditor.d.ts

@@ -6,13 +6,47 @@ import { BaseSlashMenuItem } from "./extensions/SlashMenu";
 export type BlockNoteEditorOptions = {
     enableBlockNoteExtensions: boolean;
     disableHistoryExtension: boolean;
+    /**
+     * Factories used to create a custom UI for BlockNote
+     */
     uiFactories: UiFactories;
+    /**
+     * TODO: why is this called slashCommands and not slashMenuItems?
+     *
+     * @default defaultSlashMenuItems from `./extensions/SlashMenu`
+     */
     slashCommands: BaseSlashMenuItem[];
+    /**
+     * The HTML element that should be used as the parent element for the editor.
+     *
+     * @default: undefined, the editor is not attached to the DOM
+     */
     parentElement: HTMLElement;
+    /**
+     * An object containing attributes that should be added to the editor's HTML element.
+     *
+     * @example { class: "my-editor-class" }
+     */
     editorDOMAttributes: Record<string, string>;
+    /**
+     *  A callback function that runs when the editor is ready to be used.
+     */
     onEditorReady: (editor: BlockNoteEditor) => void;
+    /**
+     * A callback function that runs whenever the editor's contents change.
+     */
     onEditorContentChange: (editor: BlockNoteEditor) => void;
+    /**
+     * A callback function that runs whenever the text cursor position changes.
+     */
     onTextCursorPositionChange: (editor: BlockNoteEditor) => void;
+    initialContent: PartialBlock[];
+    /**
+     * Use default BlockNote font and reset the styles of <p> <li> <h1> elements etc., that are used in BlockNote.
+     *
+     * @default true
+     */
+    defaultStyles: boolean;
     _tiptapOptions: any;
 };
 export declare class BlockNoteEditor {
@@ -38,7 +72,7 @@ export declare class BlockNoteEditor {
      * @param callback The callback to execute for each block. Returning `false` stops the traversal.
      * @param reverse Whether the blocks should be traversed in reverse order.
      */
-    forEachBlock(callback: (block: Block) => void, reverse?: boolean): void;
+    forEachBlock(callback: (block: Block) => boolean, reverse?: boolean): void;
     /**
      * Gets a snapshot of the current text cursor position.
      * @returns A snapshot of the current text cursor position.
@@ -67,12 +101,12 @@ export declare class BlockNoteEditor {
      * @param blockToUpdate The block that should be updated.
      * @param update A partial block which defines how the existing block should be changed.
      */
-    updateBlock(blockToUpdate: Block, update: PartialBlock): void;
+    updateBlock(blockToUpdate: BlockIdentifier, update: PartialBlock): void;
     /**
      * Removes existing blocks from the editor. Throws an error if any of the blocks could not be found.
      * @param blocksToRemove An array of identifiers for existing blocks that should be removed.
      */
-    removeBlocks(blocksToRemove: Block[]): void;
+    removeBlocks(blocksToRemove: BlockIdentifier[]): void;
     /**
      * Replaces existing blocks in the editor with new blocks. If the blocks that should be removed are not adjacent or
      * are at different nesting levels, `blocksToInsert` will be inserted at the position of the first block in
@@ -80,7 +114,7 @@ export declare class BlockNoteEditor {
      * @param blocksToRemove An array of blocks that should be replaced.
      * @param blocksToInsert An array of partial blocks to replace the old ones with.
      */
-    replaceBlocks(blocksToRemove: Block[], blocksToInsert: PartialBlock[]): void;
+    replaceBlocks(blocksToRemove: BlockIdentifier[], blocksToInsert: PartialBlock[]): void;
     /**
      * Serializes blocks into an HTML string. To better conform to HTML standards, children of blocks which aren't list
      * items are un-nested in the output HTML.