@blocknote/core 0.8.0 → 0.8.2

package/src/api/nodeConversions/nodeConversions.ts

@@ -10,7 +10,6 @@ import { defaultProps } from "../../extensions/Blocks/api/defaultBlocks";
 import {
   ColorStyle,
   InlineContent,
-  Link,
   PartialInlineContent,
   PartialLink,
   StyledText,
@@ -34,7 +33,7 @@ const colorStyles = new Set<ColorStyle>(["textColor", "backgroundColor"]);
  * Convert a StyledText inline element to a
  * prosemirror text node with the appropriate marks
  */
-function styledTextToNode(styledText: StyledText, schema: Schema): Node {
+function styledTextToNodes(styledText: StyledText, schema: Schema): Node[] {
   const marks: Mark[] = [];
 
   for (const [style, value] of Object.entries(styledText.styles)) {
@@ -45,7 +44,22 @@ function styledTextToNode(styledText: StyledText, schema: Schema): Node {
     }
   }
 
-  return schema.text(styledText.text, marks);
+  return (
+    styledText.text
+      // Splits text & line breaks.
+      .split(/(\n)/g)
+      // If the content ends with a line break, an empty string is added to the
+      // end, which this removes.
+      .filter((text) => text.length > 0)
+      // Converts text & line breaks to nodes.
+      .map((text) => {
+        if (text === "\n") {
+          return schema.nodes["hardBreak"].create();
+        } else {
+          return schema.text(text, marks);
+        }
+      })
+  );
 }
 
 /**
@@ -58,7 +72,14 @@ function linkToNodes(link: PartialLink, schema: Schema): Node[] {
   });
 
   return styledTextArrayToNodes(link.content, schema).map((node) => {
-    return node.mark([...node.marks, linkMark]);
+    if (node.type.name === "text") {
+      return node.mark([...node.marks, linkMark]);
+    }
+
+    if (node.type.name === "hardBreak") {
+      return node;
+    }
+    throw new Error("unexpected node type");
   });
 }
 
@@ -73,12 +94,14 @@ function styledTextArrayToNodes(
   let nodes: Node[] = [];
 
   if (typeof content === "string") {
-    nodes.push(schema.text(content));
+    nodes.push(
+      ...styledTextToNodes({ type: "text", text: content, styles: {} }, schema)
+    );
     return nodes;
   }
 
   for (const styledText of content) {
-    nodes.push(styledTextToNode(styledText, schema));
+    nodes.push(...styledTextToNodes(styledText, schema));
   }
   return nodes;
 }
@@ -161,15 +184,39 @@ export function blockToNode<BSchema extends BlockSchema>(
  */
 function contentNodeToInlineContent(contentNode: Node) {
   const content: InlineContent[] = [];
-
-  let currentLink: Link | undefined = undefined;
+  let currentContent: InlineContent | undefined = undefined;
 
   // Most of the logic below is for handling links because in ProseMirror links are marks
   // while in BlockNote links are a type of inline content
   contentNode.content.forEach((node) => {
-    const styles: Styles = {};
+    // hardBreak nodes do not have an InlineContent equivalent, instead we
+    // add a newline to the previous node.
+    if (node.type.name === "hardBreak") {
+      if (currentContent) {
+        // Current content exists.
+        if (currentContent.type === "text") {
+          // Current content is text.
+          currentContent.text += "\n";
+        } else if (currentContent.type === "link") {
+          // Current content is a link.
+          currentContent.content[currentContent.content.length - 1].text +=
+            "\n";
+        }
+      } else {
+        // Current content does not exist.
+        currentContent = {
+          type: "text",
+          text: "\n",
+          styles: {},
+        };
+      }
+
+      return;
+    }
 
+    const styles: Styles = {};
     let linkMark: Mark | undefined;
+
     for (const mark of node.marks) {
       if (mark.type.name === "link") {
         linkMark = mark;
@@ -182,37 +229,121 @@ function contentNodeToInlineContent(contentNode: Node) {
       }
     }
 
-    if (linkMark && currentLink && linkMark.attrs.href === currentLink.href) {
-      // if the node is a link that matches the current link, add it to the current link
-      currentLink.content.push({
-        type: "text",
-        text: node.textContent,
-        styles,
-      });
-    } else if (linkMark) {
-      // if the node is a link that doesn't match the current link, create a new link
-      currentLink = {
-        type: "link",
-        href: linkMark.attrs.href,
-        content: [
-          {
+    // Parsing links and text.
+    // Current content exists.
+    if (currentContent) {
+      // Current content is text.
+      if (currentContent.type === "text") {
+        if (!linkMark) {
+          // Node is text (same type as current content).
+          if (
+            JSON.stringify(currentContent.styles) === JSON.stringify(styles)
+          ) {
+            // Styles are the same.
+            currentContent.text += node.textContent;
+          } else {
+            // Styles are different.
+            content.push(currentContent);
+            currentContent = {
+              type: "text",
+              text: node.textContent,
+              styles,
+            };
+          }
+        } else {
+          // Node is a link (different type to current content).
+          content.push(currentContent);
+          currentContent = {
+            type: "link",
+            href: linkMark.attrs.href,
+            content: [
+              {
+                type: "text",
+                text: node.textContent,
+                styles,
+              },
+            ],
+          };
+        }
+      } else if (currentContent.type === "link") {
+        // Current content is a link.
+        if (linkMark) {
+          // Node is a link (same type as current content).
+          // Link URLs are the same.
+          if (currentContent.href === linkMark.attrs.href) {
+            // Styles are the same.
+            if (
+              JSON.stringify(
+                currentContent.content[currentContent.content.length - 1].styles
+              ) === JSON.stringify(styles)
+            ) {
+              currentContent.content[currentContent.content.length - 1].text +=
+                node.textContent;
+            } else {
+              // Styles are different.
+              currentContent.content.push({
+                type: "text",
+                text: node.textContent,
+                styles,
+              });
+            }
+          } else {
+            // Link URLs are different.
+            content.push(currentContent);
+            currentContent = {
+              type: "link",
+              href: linkMark.attrs.href,
+              content: [
+                {
+                  type: "text",
+                  text: node.textContent,
+                  styles,
+                },
+              ],
+            };
+          }
+        } else {
+          // Node is text (different type to current content).
+          content.push(currentContent);
+          currentContent = {
             type: "text",
             text: node.textContent,
             styles,
-          },
-        ],
-      };
-      content.push(currentLink);
-    } else {
-      // if the node is not a link, add it to the content
-      content.push({
-        type: "text",
-        text: node.textContent,
-        styles,
-      });
-      currentLink = undefined;
+          };
+        }
+      }
+    }
+    // Current content does not exist.
+    else {
+      // Node is text.
+      if (!linkMark) {
+        currentContent = {
+          type: "text",
+          text: node.textContent,
+          styles,
+        };
+      }
+      // Node is a link.
+      else {
+        currentContent = {
+          type: "link",
+          href: linkMark.attrs.href,
+          content: [
+            {
+              type: "text",
+              text: node.textContent,
+              styles,
+            },
+          ],
+        };
+      }
     }
   });
+
+  if (currentContent) {
+    content.push(currentContent);
+  }
+
   return content;
 }
 

package/src/editor.module.css

@@ -2,7 +2,7 @@
 
 .bnEditor {
   outline: none;
-  padding-inline: 50px;
+  padding-inline: 54px;
   border-radius: 8px;
 
   /* Define a set of colors to be used throughout the app for consistency
@@ -56,13 +56,13 @@ Tippy popups that are appended to document.body directly
 }
 
 [data-theme="light"] {
-  background-color: #ffffff;
-  color: #444444;
+  background-color: #FFFFFF;
+  color: #3F3F3F;
 }
 
 [data-theme="dark"] {
-  background-color: #444444;
-  color: #dddddd;
+  background-color: #1F1F1F;
+  color: #CFCFCF;
 }
 
 .dragPreview {

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

@@ -60,14 +60,14 @@ NESTED BLOCKS
   .blockGroup
   .blockGroup
   > .blockOuter:not([data-prev-depth-changed])::before {
-  border-left: 1px solid #cccccc;
+  border-left: 1px solid #AFAFAF;
 }
 
 [data-theme="dark"]
   .blockGroup
   .blockGroup
   > .blockOuter:not([data-prev-depth-changed])::before {
-  border-left: 1px solid #999999;
+  border-left: 1px solid #7F7F7F;
 }
 
 .blockGroup .blockGroup > .blockOuter[data-prev-depth-change="-2"]::before {
@@ -250,12 +250,12 @@ NESTED BLOCKS
 
 [data-theme="light"] .isEmpty .inlineContent:before,
 .isFilter .inlineContent:before {
-  color: #cccccc;
+  color: #CFCFCF;
 }
 
 [data-theme="dark"] .isEmpty .inlineContent:before,
 .isFilter .inlineContent:before {
-  color: #999999;
+  color: #7F7F7F;
 }
 
 /* TODO: would be nicer if defined from code */

package/src/extensions/Blocks/nodes/BlockContainer.ts

@@ -281,10 +281,19 @@ export const BlockContainer = Node.create<IBlock>({
           }
 
           // Deletes next block and adds its text content to the nearest previous block.
-          // TODO: Use slices.
+
           if (dispatch) {
-            state.tr.deleteRange(startPos, startPos + contentNode.nodeSize);
-            state.tr.insertText(contentNode.textContent, prevBlockEndPos - 1);
+            dispatch(
+              state.tr
+                .deleteRange(startPos, startPos + contentNode.nodeSize)
+                .replace(
+                  prevBlockEndPos - 1,
+                  startPos,
+                  new Slice(contentNode.content, 0, 0)
+                )
+                .scrollIntoView()
+            );
+
             state.tr.setSelection(
               new TextSelection(state.doc.resolve(prevBlockEndPos - 1))
             );

package/src/extensions/DraggableBlocks/BlockSideMenuFactoryTypes.ts

@@ -12,12 +12,12 @@ export type BlockSideMenuStaticParams<BSchema extends BlockSchema> = {
 
   freezeMenu: () => void;
   unfreezeMenu: () => void;
+
+  getReferenceRect: () => DOMRect;
 };
 
 export type BlockSideMenuDynamicParams<BSchema extends BlockSchema> = {
   block: Block<BSchema>;
-
-  referenceRect: DOMRect;
 };
 
 export type BlockSideMenu<BSchema extends BlockSchema> = EditorElement<

package/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts

@@ -250,6 +250,8 @@ export class BlockMenuView<BSchema extends BlockSchema> {
   menuOpen = false;
   menuFrozen = false;
 
+  private lastPosition: DOMRect | undefined;
+
   constructor({
     tiptapEditor,
     editor,
@@ -272,9 +274,6 @@ export class BlockMenuView<BSchema extends BlockSchema> {
     // Shows or updates menu position whenever the cursor moves, if the menu isn't frozen.
     document.body.addEventListener("mousemove", this.onMouseMove, true);
 
-    // Makes menu scroll with the page.
-    document.addEventListener("scroll", this.onScroll);
-
     // Hides and unfreezes the menu whenever the user selects the editor with the mouse or presses a key.
     // TODO: Better integration with suggestions menu and only editor scope?
     document.body.addEventListener("mousedown", this.onMouseDown, true);
@@ -320,7 +319,7 @@ export class BlockMenuView<BSchema extends BlockSchema> {
   };
 
   /**
-   * If the event is outside of the editor contents,
+   * If the event is outside the editor contents,
    * we dispatch a fake event, so that we can still drop the content
    * when dragging / dropping to the side of the editor
    */
@@ -375,11 +374,45 @@ export class BlockMenuView<BSchema extends BlockSchema> {
       return;
     }
 
-    // Editor itself may have padding or other styling which affects size/position, so we get the boundingRect of
-    // the first child (i.e. the blockGroup that wraps all blocks in the editor) for a more accurate bounding box.
+    // Editor itself may have padding or other styling which affects
+    // size/position, so we get the boundingRect of the first child (i.e. the
+    // blockGroup that wraps all blocks in the editor) for more accurate side
+    // menu placement.
     const editorBoundingBox = (
       this.ttEditor.view.dom.firstChild! as HTMLElement
     ).getBoundingClientRect();
+    // We want the full area of the editor to check if the cursor is hovering
+    // above it though.
+    const editorOuterBoundingBox =
+      this.ttEditor.view.dom.getBoundingClientRect();
+    const cursorWithinEditor =
+      event.clientX >= editorOuterBoundingBox.left &&
+      event.clientX <= editorOuterBoundingBox.right &&
+      event.clientY >= editorOuterBoundingBox.top &&
+      event.clientY <= editorOuterBoundingBox.bottom;
+
+    // Doesn't update if the mouse hovers an element that's over the editor but
+    // isn't a part of it or the side menu.
+    if (
+      // Cursor is within the editor area
+      cursorWithinEditor &&
+      // An element is hovered
+      event &&
+      event.target &&
+      // Element is outside the editor
+      this.ttEditor.view.dom !== event.target &&
+      !this.ttEditor.view.dom.contains(event.target as HTMLElement) &&
+      // Element is outside the side menu
+      this.blockMenu.element !== event.target &&
+      !this.blockMenu.element?.contains(event.target as HTMLElement)
+    ) {
+      if (this.menuOpen) {
+        this.menuOpen = false;
+        this.blockMenu.hide();
+      }
+
+      return;
+    }
 
     this.horizontalPosAnchor = editorBoundingBox.x;
 
@@ -429,12 +462,6 @@ export class BlockMenuView<BSchema extends BlockSchema> {
     }
   };
 
-  onScroll = () => {
-    if (this.menuOpen) {
-      this.blockMenu.render(this.getDynamicParams(), false);
-    }
-  };
-
   destroy() {
     if (this.menuOpen) {
       this.menuOpen = false;
@@ -445,7 +472,6 @@ export class BlockMenuView<BSchema extends BlockSchema> {
     this.ttEditor.view.dom.removeEventListener("dragstart", this.onDragStart);
     document.body.removeEventListener("drop", this.onDrop);
     document.body.removeEventListener("mousedown", this.onMouseDown);
-    document.removeEventListener("scroll", this.onScroll);
     document.body.removeEventListener("keydown", this.onKeyDown);
   }
 
@@ -514,23 +540,32 @@ export class BlockMenuView<BSchema extends BlockSchema> {
       unfreezeMenu: () => {
         this.menuFrozen = false;
       },
+      getReferenceRect: () => {
+        if (!this.menuOpen) {
+          if (this.lastPosition === undefined) {
+            throw new Error(
+              "Attempted to access block reference rect before rendering block side menu."
+            );
+          }
+
+          return this.lastPosition;
+        }
+
+        const blockContent = this.hoveredBlock!.firstChild! as HTMLElement;
+        const blockContentBoundingBox = blockContent.getBoundingClientRect();
+        if (this.horizontalPosAnchoredAtRoot) {
+          blockContentBoundingBox.x = this.horizontalPosAnchor;
+        }
+        this.lastPosition = blockContentBoundingBox;
+
+        return blockContentBoundingBox;
+      },
     };
   }
 
   getDynamicParams(): BlockSideMenuDynamicParams<BSchema> {
-    const blockContent = this.hoveredBlock!.firstChild! as HTMLElement;
-    const blockContentBoundingBox = blockContent.getBoundingClientRect();
-
     return {
       block: this.editor.getBlock(this.hoveredBlock!.getAttribute("data-id")!)!,
-      referenceRect: new DOMRect(
-        this.horizontalPosAnchoredAtRoot
-          ? this.horizontalPosAnchor
-          : blockContentBoundingBox.x,
-        blockContentBoundingBox.y,
-        blockContentBoundingBox.width,
-        blockContentBoundingBox.height
-      ),
     };
   }
 }

package/src/extensions/FormattingToolbar/FormattingToolbarFactoryTypes.ts

@@ -4,15 +4,13 @@ import { BlockSchema } from "../Blocks/api/blockTypes";
 
 export type FormattingToolbarStaticParams<BSchema extends BlockSchema> = {
   editor: BlockNoteEditor<BSchema>;
-};
 
-export type FormattingToolbarDynamicParams = {
-  referenceRect: DOMRect;
+  getReferenceRect: () => DOMRect;
 };
 
-export type FormattingToolbar = EditorElement<
-  FormattingToolbarDynamicParams
->;
+export type FormattingToolbarDynamicParams = {};
+
+export type FormattingToolbar = EditorElement<FormattingToolbarDynamicParams>;
 export type FormattingToolbarFactory<BSchema extends BlockSchema> =
   ElementFactory<
     FormattingToolbarStaticParams<BSchema>,

package/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -9,7 +9,6 @@ import { EditorView } from "prosemirror-view";
 import { BlockNoteEditor, BlockSchema } from "../..";
 import {
   FormattingToolbar,
-  FormattingToolbarDynamicParams,
   FormattingToolbarFactory,
   FormattingToolbarStaticParams,
 } from "./FormattingToolbarFactoryTypes";
@@ -44,6 +43,8 @@ export class FormattingToolbarView<BSchema extends BlockSchema> {
 
   public prevWasEditable: boolean | null = null;
 
+  private lastPosition: DOMRect | undefined;
+
   public shouldShow: (props: {
     view: EditorView;
     state: EditorState;
@@ -80,8 +81,6 @@ export class FormattingToolbarView<BSchema extends BlockSchema> {
 
     this.ttEditor.on("focus", this.focusHandler);
     this.ttEditor.on("blur", this.blurHandler);
-
-    document.addEventListener("scroll", this.scrollHandler);
   }
 
   viewMousedownHandler = () => {
@@ -110,11 +109,15 @@ export class FormattingToolbarView<BSchema extends BlockSchema> {
       return;
     }
 
+    // Checks if the focus is moving to an element outside the editor. If it is,
+    // the toolbar is hidden.
     if (
-      event?.relatedTarget &&
-      this.formattingToolbar.element?.parentNode?.contains(
-        event.relatedTarget as Node
-      )
+      // An element is clicked.
+      event &&
+      event.relatedTarget &&
+      // Element is outside the toolbar.
+      (this.formattingToolbar.element === (event.relatedTarget as Node) ||
+        this.formattingToolbar.element?.contains(event.relatedTarget as Node))
     ) {
       return;
     }
@@ -125,12 +128,6 @@ export class FormattingToolbarView<BSchema extends BlockSchema> {
     }
   };
 
-  scrollHandler = () => {
-    if (this.toolbarIsOpen) {
-      this.formattingToolbar.render(this.getDynamicParams(), false);
-    }
-  };
-
   update(view: EditorView, oldState?: EditorState) {
     const { state, composing } = view;
     const { doc, selection } = state;
@@ -166,15 +163,9 @@ export class FormattingToolbarView<BSchema extends BlockSchema> {
       !this.preventShow &&
       (shouldShow || this.preventHide)
     ) {
-      this.formattingToolbar.render(this.getDynamicParams(), true);
+      this.formattingToolbar.render({}, true);
       this.toolbarIsOpen = true;
 
-      // TODO: Is this necessary? Also for other menu plugins.
-      // Listener stops focus moving to the menu on click.
-      this.formattingToolbar.element!.addEventListener("mousedown", (event) =>
-        event.preventDefault()
-      );
-
       return;
     }
 
@@ -184,7 +175,7 @@ export class FormattingToolbarView<BSchema extends BlockSchema> {
       !this.preventShow &&
       (shouldShow || this.preventHide)
     ) {
-      this.formattingToolbar.render(this.getDynamicParams(), false);
+      this.formattingToolbar.render({}, false);
       return;
     }
 
@@ -197,12 +188,6 @@ export class FormattingToolbarView<BSchema extends BlockSchema> {
       this.formattingToolbar.hide();
       this.toolbarIsOpen = false;
 
-      // Listener stops focus moving to the menu on click.
-      this.formattingToolbar.element!.removeEventListener(
-        "mousedown",
-        (event) => event.preventDefault()
-      );
-
       return;
     }
   }
@@ -214,8 +199,6 @@ export class FormattingToolbarView<BSchema extends BlockSchema> {
 
     this.ttEditor.off("focus", this.focusHandler);
     this.ttEditor.off("blur", this.blurHandler);
-
-    document.removeEventListener("scroll", this.scrollHandler);
   }
 
   getSelectionBoundingBox() {
@@ -241,12 +224,22 @@ export class FormattingToolbarView<BSchema extends BlockSchema> {
   getStaticParams(): FormattingToolbarStaticParams<BSchema> {
     return {
       editor: this.editor,
-    };
-  }
-
-  getDynamicParams(): FormattingToolbarDynamicParams {
-    return {
-      referenceRect: this.getSelectionBoundingBox(),
+      getReferenceRect: () => {
+        if (!this.toolbarIsOpen) {
+          if (this.lastPosition === undefined) {
+            throw new Error(
+              "Attempted to access selection reference rect before rendering formatting toolbar."
+            );
+          }
+
+          return this.lastPosition;
+        }
+
+        const selectionBoundingBox = this.getSelectionBoundingBox();
+        this.lastPosition = selectionBoundingBox;
+
+        return selectionBoundingBox;
+      },
     };
   }
 }

package/src/extensions/HyperlinkToolbar/HyperlinkToolbarFactoryTypes.ts

@@ -3,13 +3,13 @@ import { EditorElement, ElementFactory } from "../../shared/EditorElement";
 export type HyperlinkToolbarStaticParams = {
   editHyperlink: (url: string, text: string) => void;
   deleteHyperlink: () => void;
+
+  getReferenceRect: () => DOMRect;
 };
 
 export type HyperlinkToolbarDynamicParams = {
   url: string;
   text: string;
-
-  referenceRect: DOMRect;
 };
 
 export type HyperlinkToolbar = EditorElement<HyperlinkToolbarDynamicParams>;