@blocknote/core 0.3.0 → 0.4.0

package/package.json

@@ -3,7 +3,7 @@
   "homepage": "https://github.com/yousefed/blocknote",
   "private": false,
   "license": "MPL-2.0",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "files": [
     "dist",
     "types",
@@ -43,7 +43,9 @@
     "build": "tsc && vite build",
     "build-bundled": "tsc && vite build --config vite.config.bundled.ts && git checkout tmp-releases && rm -rf ../../release && mv ../../release-tmp ../../release",
     "preview": "vite preview",
-    "lint": "eslint src --max-warnings 0"
+    "lint": "eslint src --max-warnings 0",
+    "test": "vitest",
+    "test-watch": "vitest watch"
   },
   "dependencies": {
     "@emotion/cache": "^11.10.5",
@@ -66,21 +68,30 @@
     "@tiptap/extension-text": "2.0.0-beta.217",
     "@tiptap/extension-underline": "2.0.0-beta.217",
     "@tiptap/pm": "2.0.0-beta.217",
+    "hast-util-from-dom": "^4.2.0",
     "lodash": "^4.17.21",
+    "rehype": "^12.0.1",
+    "rehype-remark": "^9.1.2",
+    "remark": "^14.0.2",
+    "remark-gfm": "^3.0.1",
+    "remark-rehype": "^10.1.0",
     "uuid": "^8.3.2",
     "y-prosemirror": "1.0.20",
     "y-protocols": "1.0.5",
     "yjs": "13.5.44"
   },
   "devDependencies": {
+    "@types/hast": "^2.3.4",
     "@types/lodash": "^4.14.179",
     "@types/uuid": "^8.3.4",
     "eslint": "^8.10.0",
     "eslint-config-react-app": "^7.0.0",
+    "jsdom": "^21.1.0",
     "prettier": "^2.7.1",
     "typescript": "^4.5.4",
-    "vite": "^3.0.5",
-    "vite-plugin-eslint": "^1.7.0"
+    "vite": "^4.1.2",
+    "vite-plugin-eslint": "^1.8.1",
+    "vitest": "^0.28.5"
   },
   "eslintConfig": {
     "extends": [
@@ -95,5 +106,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "d73e52dc397e409689607e2a94f2475fef916099"
+  "gitHead": "aa88219581e5427fd86c759b827ffc2b2f3af99b"
 }

package/src/BlockNoteEditor.test.ts

@@ -0,0 +1,12 @@
+import { expect, it } from "vitest";
+import { BlockNoteEditor } from "./BlockNoteEditor";
+import { getBlockInfoFromPos } from "./extensions/Blocks/helpers/getBlockInfoFromPos";
+
+/**
+ * @vitest-environment jsdom
+ */
+it("creates an editor", () => {
+  const editor = new BlockNoteEditor({});
+  const blockInfo = getBlockInfoFromPos(editor._tiptapEditor.state.doc, 2);
+  expect(blockInfo?.contentNode.type.name).toEqual("paragraph");
+});

package/src/BlockNoteEditor.ts

@@ -1,54 +1,77 @@
 import { Editor, EditorOptions } from "@tiptap/core";
 
 // import "./blocknote.css";
+import { Editor as EditorAPI } from "./api/Editor";
 import { getBlockNoteExtensions, UiFactories } from "./BlockNoteExtensions";
 import styles from "./editor.module.css";
+import { defaultSlashCommands, SlashCommand } from "./extensions/SlashMenu";
 
-export type BlockNoteEditorOptions = EditorOptions & {
+export type BlockNoteEditorOptions = {
   enableBlockNoteExtensions: boolean;
   disableHistoryExtension: boolean;
   uiFactories: UiFactories;
+  slashCommands: SlashCommand[];
+  parentElement: HTMLElement;
+  editorDOMAttributes: Record<string, string>;
+  onUpdate: () => void;
+  onCreate: () => void;
+
+  // tiptap options, undocumented
+  _tiptapOptions: any;
 };
 
-const blockNoteOptions = {
+const blockNoteTipTapOptions = {
   enableInputRules: true,
   enablePasteRules: true,
   enableCoreExtensions: false,
 };
 
-export class BlockNoteEditor {
-  public readonly tiptapEditor: Editor & { contentComponent: any };
+export class BlockNoteEditor extends EditorAPI {
+  public readonly _tiptapEditor: Editor & { contentComponent: any };
+
+  public get domElement() {
+    return this._tiptapEditor.view.dom as HTMLDivElement;
+  }
 
   constructor(options: Partial<BlockNoteEditorOptions> = {}) {
-    const blockNoteExtensions = getBlockNoteExtensions(
-      options.uiFactories || {}
-    );
+    const blockNoteExtensions = getBlockNoteExtensions({
+      uiFactories: options.uiFactories || {},
+      slashCommands: options.slashCommands || defaultSlashCommands,
+    });
 
     let extensions = options.disableHistoryExtension
       ? blockNoteExtensions.filter((e) => e.name !== "history")
       : blockNoteExtensions;
 
-    const tiptapOptions = {
-      ...blockNoteOptions,
-      ...options,
+    const tiptapOptions: EditorOptions = {
+      ...blockNoteTipTapOptions,
+      ...options._tiptapOptions,
+      onUpdate: () => {
+        options.onUpdate?.();
+      },
+      onCreate: () => {
+        options.onCreate?.();
+      },
       extensions:
         options.enableBlockNoteExtensions === false
-          ? options.extensions
-          : [...(options.extensions || []), ...extensions],
+          ? options._tiptapOptions?.extensions
+          : [...(options._tiptapOptions?.extensions || []), ...extensions],
       editorProps: {
         attributes: {
-          ...(options.editorProps?.attributes || {}),
+          ...(options.editorDOMAttributes || {}),
           class: [
             styles.bnEditor,
             styles.bnRoot,
-            (options.editorProps?.attributes as any)?.class || "",
+            options.editorDOMAttributes?.class || "",
           ].join(" "),
         },
       },
     };
 
-    this.tiptapEditor = new Editor(tiptapOptions) as Editor & {
+    const _tiptapEditor = new Editor(tiptapOptions) as Editor & {
       contentComponent: any;
     };
+    super(_tiptapEditor);
+    this._tiptapEditor = _tiptapEditor;
   }
 }

package/src/BlockNoteExtensions.ts

@@ -7,29 +7,29 @@ import GapCursor from "@tiptap/extension-gapcursor";
 import HardBreak from "@tiptap/extension-hard-break";
 import { History } from "@tiptap/extension-history";
 import Italic from "@tiptap/extension-italic";
+import { Link } from "@tiptap/extension-link";
 import Strike from "@tiptap/extension-strike";
 import Text from "@tiptap/extension-text";
 import Underline from "@tiptap/extension-underline";
+import { BackgroundColorExtension } from "./extensions/BackgroundColor/BackgroundColorExtension";
+import { BackgroundColorMark } from "./extensions/BackgroundColor/BackgroundColorMark";
 import { blocks } from "./extensions/Blocks";
 import blockStyles from "./extensions/Blocks/nodes/Block.module.css";
-import { FormattingToolbarExtension } from "./extensions/FormattingToolbar/FormattingToolbarExtension";
+import { BlockSideMenuFactory } from "./extensions/DraggableBlocks/BlockSideMenuFactoryTypes";
 import { DraggableBlocksExtension } from "./extensions/DraggableBlocks/DraggableBlocksExtension";
+import { FormattingToolbarExtension } from "./extensions/FormattingToolbar/FormattingToolbarExtension";
+import { FormattingToolbarFactory } from "./extensions/FormattingToolbar/FormattingToolbarFactoryTypes";
 import HyperlinkMark from "./extensions/HyperlinkToolbar/HyperlinkMark";
+import { HyperlinkToolbarFactory } from "./extensions/HyperlinkToolbar/HyperlinkToolbarFactoryTypes";
 import { Placeholder } from "./extensions/Placeholder/PlaceholderExtension";
-import SlashMenuExtension from "./extensions/SlashMenu";
+import { SlashCommand, SlashMenuExtension } from "./extensions/SlashMenu";
+import { SlashMenuItem } from "./extensions/SlashMenu/SlashMenuItem";
+import { TextAlignmentExtension } from "./extensions/TextAlignment/TextAlignmentExtension";
+import { TextColorExtension } from "./extensions/TextColor/TextColorExtension";
+import { TextColorMark } from "./extensions/TextColor/TextColorMark";
 import { TrailingNode } from "./extensions/TrailingNode/TrailingNodeExtension";
 import UniqueID from "./extensions/UniqueID/UniqueID";
-import { FormattingToolbarFactory } from "./extensions/FormattingToolbar/FormattingToolbarFactoryTypes";
-import { HyperlinkToolbarFactory } from "./extensions/HyperlinkToolbar/HyperlinkToolbarFactoryTypes";
 import { SuggestionsMenuFactory } from "./shared/plugins/suggestion/SuggestionsMenuFactoryTypes";
-import { BlockSideMenuFactory } from "./extensions/DraggableBlocks/BlockSideMenuFactoryTypes";
-import { Link } from "@tiptap/extension-link";
-import { SlashMenuItem } from "./extensions/SlashMenu/SlashMenuItem";
-import { BackgroundColorMark } from "./extensions/BackgroundColor/BackgroundColorMark";
-import { TextColorMark } from "./extensions/TextColor/TextColorMark";
-import { BackgroundColorExtension } from "./extensions/BackgroundColor/BackgroundColorExtension";
-import { TextColorExtension } from "./extensions/TextColor/TextColorExtension";
-import { TextAlignmentExtension } from "./extensions/TextAlignment/TextAlignmentExtension";
 
 export type UiFactories = Partial<{
   formattingToolbarFactory: FormattingToolbarFactory;
@@ -41,7 +41,10 @@ export type UiFactories = Partial<{
 /**
  * Get all the Tiptap extensions BlockNote is configured with by default
  */
-export const getBlockNoteExtensions = (uiFactories: UiFactories) => {
+export const getBlockNoteExtensions = (opts: {
+  uiFactories: UiFactories;
+  slashCommands: SlashCommand[];
+}) => {
   const ret: Extensions = [
     extensions.ClipboardTextSerializer,
     extensions.Commands,
@@ -91,36 +94,37 @@ export const getBlockNoteExtensions = (uiFactories: UiFactories) => {
     TrailingNode,
   ];
 
-  if (uiFactories.blockSideMenuFactory) {
+  if (opts.uiFactories.blockSideMenuFactory) {
     ret.push(
       DraggableBlocksExtension.configure({
-        blockSideMenuFactory: uiFactories.blockSideMenuFactory,
+        blockSideMenuFactory: opts.uiFactories.blockSideMenuFactory,
       })
     );
   }
 
-  if (uiFactories.formattingToolbarFactory) {
+  if (opts.uiFactories.formattingToolbarFactory) {
     ret.push(
       FormattingToolbarExtension.configure({
-        formattingToolbarFactory: uiFactories.formattingToolbarFactory,
+        formattingToolbarFactory: opts.uiFactories.formattingToolbarFactory,
       })
     );
   }
 
-  if (uiFactories.hyperlinkToolbarFactory) {
+  if (opts.uiFactories.hyperlinkToolbarFactory) {
     ret.push(
       HyperlinkMark.configure({
-        hyperlinkToolbarFactory: uiFactories.hyperlinkToolbarFactory,
+        hyperlinkToolbarFactory: opts.uiFactories.hyperlinkToolbarFactory,
       })
     );
   } else {
     ret.push(Link);
   }
 
-  if (uiFactories.slashMenuFactory) {
+  if (opts.uiFactories.slashMenuFactory) {
     ret.push(
       SlashMenuExtension.configure({
-        slashMenuFactory: uiFactories.slashMenuFactory,
+        commands: opts.slashCommands,
+        slashMenuFactory: opts.uiFactories.slashMenuFactory,
       })
     );
   }

package/src/api/Editor.ts

@@ -0,0 +1,142 @@
+import { Editor as TiptapEditor } from "@tiptap/core";
+import { Node } from "prosemirror-model";
+import { getBlockInfoFromPos } from "../extensions/Blocks/helpers/getBlockInfoFromPos";
+import { Block, PartialBlock } from "../extensions/Blocks/api/blockTypes";
+import { TextCursorPosition } from "../extensions/Blocks/api/cursorPositionTypes";
+import { nodeToBlock } from "./nodeConversions/nodeConversions";
+import {
+  insertBlocks,
+  removeBlocks,
+  replaceBlocks,
+  updateBlock,
+} from "./blockManipulation/blockManipulation";
+import {
+  blocksToHTML,
+  blocksToMarkdown,
+  HTMLToBlocks,
+  markdownToBlocks,
+} from "./formatConversions/formatConversions";
+
+export class Editor {
+  constructor(
+    private tiptapEditor: TiptapEditor,
+    private blockCache = new WeakMap<Node, Block>()
+  ) {}
+
+  /**
+   * Gets a list of all top-level blocks that are in the editor.
+   */
+  public get allBlocks(): Block[] {
+    const blocks: Block[] = [];
+
+    this.tiptapEditor.state.doc.firstChild!.descendants((node) => {
+      blocks.push(nodeToBlock(node, this.blockCache));
+
+      return false;
+    });
+
+    return blocks;
+  }
+
+  /**
+   * Gets information regarding the position of the text cursor in the editor.
+   */
+  public get textCursorPosition(): TextCursorPosition {
+    const { node } = getBlockInfoFromPos(
+      this.tiptapEditor.state.doc,
+      this.tiptapEditor.state.selection.from
+    )!;
+
+    return { block: nodeToBlock(node, this.blockCache) };
+  }
+
+  /**
+   * Inserts multiple blocks before, after, or nested inside an existing block in the editor.
+   * @param blocksToInsert An array of blocks to insert.
+   * @param blockToInsertAt An existing block, marking where the new blocks should be inserted at.
+   * @param placement Determines whether the blocks should be inserted just before, just after, or nested inside the
+   * existing block.
+   */
+  public insertBlocks(
+    blocksToInsert: PartialBlock[],
+    blockToInsertAt: Block,
+    placement: "before" | "after" | "nested" = "before"
+  ): void {
+    insertBlocks(blocksToInsert, blockToInsertAt, placement, this.tiptapEditor);
+  }
+
+  /**
+   * Updates a block in the editor to the given specification.
+   * @param blockToUpdate The block that should be updated.
+   * @param updatedBlock The specification that the block should be updated to.
+   */
+  public updateBlock(blockToUpdate: Block, updatedBlock: PartialBlock) {
+    updateBlock(blockToUpdate, updatedBlock, this.tiptapEditor);
+  }
+
+  /**
+   * Removes multiple blocks from the editor. Throws an error if any of the blocks could not be found.
+   * @param blocksToRemove An array of blocks that should be removed.
+   */
+  public removeBlocks(blocksToRemove: Block[]) {
+    removeBlocks(blocksToRemove, this.tiptapEditor);
+  }
+
+  /**
+   * Replaces multiple blocks in the editor with several other blocks. If the provided blocks to remove are not adjacent
+   * to each other, the new blocks are inserted at the position of the first block in the array. Throws an error if any
+   * of the blocks could not be found.
+   * @param blocksToRemove An array of blocks that should be replaced.
+   * @param blocksToInsert An array of blocks to replace the old ones with.
+   */
+  public replaceBlocks(
+    blocksToRemove: Block[],
+    blocksToInsert: PartialBlock[]
+  ) {
+    replaceBlocks(blocksToRemove, blocksToInsert, this.tiptapEditor);
+  }
+
+  /**
+   * Executes a callback function whenever the editor's content changes.
+   * @param callback The callback function to execute.
+   */
+  public onContentChange(callback: () => void) {
+    this.tiptapEditor.on("update", callback);
+  }
+
+  /**
+   * Serializes a list of blocks into an HTML string. The output is not the same as what's rendered by the editor, and
+   * is simplified in order to better conform to HTML standards. Block structuring elements are removed, children of
+   * blocks which aren't list items are lifted out of them, and list items blocks are wrapped in `ul`/`ol` tags.
+   * @param blocks The list of blocks to serialize into HTML.
+   */
+  public async blocksToHTML(blocks: Block[]): Promise<string> {
+    return blocksToHTML(blocks, this.tiptapEditor.schema);
+  }
+
+  /**
+   * Creates a list of blocks from an HTML string.
+   * @param htmlString The HTML string to create a list of blocks from.
+   */
+  public async HTMLToBlocks(htmlString: string): Promise<Block[]> {
+    return HTMLToBlocks(htmlString, this.tiptapEditor.schema);
+  }
+
+  /**
+   * Serializes a list of blocks into a Markdown string. The output is simplified as Markdown does not support all
+   * features of BlockNote. Block structuring elements are removed, children of blocks which aren't list items are
+   * lifted out of them, and certain styles are removed.
+   * @param blocks The list of blocks to serialize into Markdown.
+   */
+  public async blocksToMarkdown(blocks: Block[]): Promise<string> {
+    return blocksToMarkdown(blocks, this.tiptapEditor.schema);
+  }
+
+  /**
+   * Creates a list of blocks from a Markdown string.
+   * @param markdownString The Markdown string to create a list of blocks from.
+   */
+  public async markdownToBlocks(markdownString: string): Promise<Block[]> {
+    return markdownToBlocks(markdownString, this.tiptapEditor.schema);
+  }
+}

package/src/api/blockManipulation/blockManipulation.ts

@@ -0,0 +1,114 @@
+import { Editor } from "@tiptap/core";
+import { Node } from "prosemirror-model";
+import { Block, PartialBlock } from "../../extensions/Blocks/api/blockTypes";
+import { blockToNode, getNodeById } from "../nodeConversions/nodeConversions";
+
+export function insertBlocks(
+  blocksToInsert: PartialBlock[],
+  blockToInsertAt: Block,
+  placement: "before" | "after" | "nested" = "before",
+  editor: Editor
+): void {
+  const nodesToInsert: Node[] = [];
+  for (const blockSpec of blocksToInsert) {
+    nodesToInsert.push(blockToNode(blockSpec, editor.schema));
+  }
+
+  let insertionPos = -1;
+
+  const { node, posBeforeNode } = getNodeById(
+    blockToInsertAt.id,
+    editor.state.doc
+  );
+
+  if (placement === "before") {
+    insertionPos = posBeforeNode;
+  }
+
+  if (placement === "after") {
+    insertionPos = posBeforeNode + node.nodeSize;
+  }
+
+  if (placement === "nested") {
+    // Case if block doesn't already have children.
+    if (node.childCount < 2) {
+      insertionPos = posBeforeNode + node.firstChild!.nodeSize + 1;
+
+      const blockGroupNode = editor.state.schema.nodes["blockGroup"].create(
+        {},
+        nodesToInsert
+      );
+
+      editor.view.dispatch(
+        editor.state.tr.insert(insertionPos, blockGroupNode)
+      );
+
+      return;
+    }
+
+    insertionPos = posBeforeNode + node.firstChild!.nodeSize + 2;
+  }
+
+  editor.view.dispatch(editor.state.tr.insert(insertionPos, nodesToInsert));
+}
+
+export function updateBlock(
+  blockToUpdate: Block,
+  updatedBlock: PartialBlock,
+  editor: Editor
+) {
+  const { posBeforeNode } = getNodeById(blockToUpdate.id, editor.state.doc);
+
+  editor.commands.BNUpdateBlock(posBeforeNode + 1, updatedBlock);
+}
+
+export function removeBlocks(blocksToRemove: Block[], editor: Editor) {
+  const idsOfBlocksToRemove = new Set<string>(
+    blocksToRemove.map((block) => block.id)
+  );
+
+  let removedSize = 0;
+
+  editor.state.doc.descendants((node, pos) => {
+    // Skips traversing nodes after all target blocks have been removed.
+    if (idsOfBlocksToRemove.size === 0) {
+      return false;
+    }
+
+    // Keeps traversing nodes if block with target ID has not been found.
+    if (
+      node.type.name !== "blockContainer" ||
+      !idsOfBlocksToRemove.has(node.attrs.id)
+    ) {
+      return true;
+    }
+
+    idsOfBlocksToRemove.delete(node.attrs.id);
+    const oldDocSize = editor.state.doc.nodeSize;
+
+    editor.commands.BNDeleteBlock(pos - removedSize + 1);
+
+    const newDocSize = editor.state.doc.nodeSize;
+    removedSize += oldDocSize - newDocSize;
+
+    return false;
+  });
+
+  if (idsOfBlocksToRemove.size > 0) {
+    let notFoundIds = [...idsOfBlocksToRemove].join("\n");
+
+    throw Error(
+      "Blocks with the following IDs could not be found in the editor: " +
+        notFoundIds
+    );
+  }
+}
+
+export function replaceBlocks(
+  blocksToRemove: Block[],
+  blocksToInsert: PartialBlock[],
+  editor: Editor
+) {
+  insertBlocks(blocksToInsert, blocksToRemove[0], "before", editor);
+  removeBlocks(blocksToRemove, editor);
+}

package/src/api/formatConversions/formatConversions.ts

@@ -0,0 +1,86 @@
+import { DOMParser, DOMSerializer, Schema } from "prosemirror-model";
+import { unified } from "unified";
+import rehypeParse from "rehype-parse";
+import rehypeStringify from "rehype-stringify";
+import rehypeRemark from "rehype-remark";
+import remarkGfm from "remark-gfm";
+import remarkStringify from "remark-stringify";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import { Block } from "../../extensions/Blocks/api/blockTypes";
+import { blockToNode, nodeToBlock } from "../nodeConversions/nodeConversions";
+import { simplifyBlocks } from "./simplifyBlocksRehypePlugin";
+import { removeUnderlines } from "./removeUnderlinesRehypePlugin";
+
+export async function blocksToHTML(
+  blocks: Block[],
+  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(
+  htmlString: string,
+  schema: Schema
+): Promise<Block[]> {
+  const htmlNode = document.createElement("div");
+  htmlNode.innerHTML = htmlString.trim();
+
+  const parser = DOMParser.fromSchema(schema);
+  const parentNode = parser.parse(htmlNode);
+
+  const blocks: Block[] = [];
+
+  for (let i = 0; i < parentNode.firstChild!.childCount; i++) {
+    blocks.push(nodeToBlock(parentNode.firstChild!.child(i)));
+  }
+
+  return blocks;
+}
+
+export async function blocksToMarkdown(
+  blocks: Block[],
+  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;
+}
+
+export async function markdownToBlocks(
+  markdownString: string,
+  schema: Schema
+): Promise<Block[]> {
+  const htmlString = await unified()
+    .use(remarkParse)
+    .use(remarkGfm)
+    .use(remarkRehype)
+    .use(rehypeStringify)
+    .process(markdownString);
+
+  return HTMLToBlocks(htmlString.value as string, schema);
+}

package/src/api/formatConversions/removeUnderlinesRehypePlugin.ts

@@ -0,0 +1,39 @@
+import { Element as HASTElement, Parent as HASTParent } from "hast";
+
+/**
+ * Rehype plugin which removes <u> tags. Used to remove underlines before converting HTML to markdown, as Markdown
+ * doesn't support underlines.
+ */
+export function removeUnderlines() {
+  const removeUnderlinesHelper = (tree: HASTParent) => {
+    let numChildElements = tree.children.length;
+
+    for (let i = 0; i < numChildElements; i++) {
+      const node = tree.children[i];
+
+      if (node.type === "element") {
+        // Recursively removes underlines from child elements.
+        removeUnderlinesHelper(node);
+
+        if ((node as HASTElement).tagName === "u") {
+          // Lifts child nodes outside underline element, deletes the underline element, and updates current index &
+          // the number of child elements.
+          if (node.children.length > 0) {
+            tree.children.splice(i, 1, ...node.children);
+
+            const numElementsAdded = node.children.length - 1;
+            numChildElements += numElementsAdded;
+            i += numElementsAdded;
+          } else {
+            tree.children.splice(i, 1);
+
+            numChildElements--;
+            i--;
+          }
+        }
+      }
+    }
+  };
+
+  return removeUnderlinesHelper;
+}