@blocknote/core 0.46.2 → 0.47.1

package/src/extensions/tiptap-extensions/KeyboardShortcuts/KeyboardShortcutsExtension.ts

@@ -1,8 +1,11 @@
 import { Extension } from "@tiptap/core";
-
+import { Fragment, Node } from "prosemirror-model";
 import { TextSelection } from "prosemirror-state";
+
 import {
   getBottomNestedBlockInfo,
+  getNextBlockInfo,
+  getParentBlockInfo,
   getPrevBlockInfo,
   mergeBlocksCommand,
 } from "../../../api/blockManipulation/commands/mergeBlocks/mergeBlocks.js";
@@ -10,7 +13,10 @@ import { nestBlock } from "../../../api/blockManipulation/commands/nestBlock/nes
 import { fixColumnList } from "../../../api/blockManipulation/commands/replaceBlocks/util/fixColumnList.js";
 import { splitBlockCommand } from "../../../api/blockManipulation/commands/splitBlock/splitBlock.js";
 import { updateBlockCommand } from "../../../api/blockManipulation/commands/updateBlock/updateBlock.js";
-import { getBlockInfoFromSelection } from "../../../api/getBlockInfoFromPos.js";
+import {
+  getBlockInfoFromResolvedPos,
+  getBlockInfoFromSelection,
+} from "../../../api/getBlockInfoFromPos.js";
 import { BlockNoteEditor } from "../../../editor/BlockNoteEditor.js";
 import { FormattingToolbarExtension } from "../../FormattingToolbar/FormattingToolbar.js";
 import { FilePanelExtension } from "../../FilePanel/FilePanel.js";
@@ -83,6 +89,21 @@ export const KeyboardShortcutsExtension = Extension.create<{
             }
             const { bnBlock: blockContainer, blockContent } = blockInfo;
 
+            const prevBlockInfo = getPrevBlockInfo(
+              state.doc,
+              blockInfo.bnBlock.beforePos,
+            );
+            // If the previous block has no inline content, it can't be merged.
+            // It's instead deleted, which is done later in the chan, so we
+            // return early here.
+            if (
+              !prevBlockInfo ||
+              !prevBlockInfo.isBlockContainer ||
+              prevBlockInfo.blockContent.node.type.spec.content !== "inline*"
+            ) {
+              return false;
+            }
+
             const selectionAtBlockStart =
               state.selection.from === blockContent.beforePos + 1;
             const selectionEmpty = state.selection.empty;
@@ -98,9 +119,46 @@ export const KeyboardShortcutsExtension = Extension.create<{
 
             return false;
           }),
+        // If the previous block is a columnList, moves the current block to
+        // the end of the last column in it.
+        () =>
+          commands.command(({ state, tr, dispatch }) => {
+            const blockInfo = getBlockInfoFromSelection(state);
+            if (!blockInfo.isBlockContainer) {
+              return false;
+            }
+
+            const prevBlockInfo = getPrevBlockInfo(
+              state.doc,
+              blockInfo.bnBlock.beforePos,
+            );
+            if (!prevBlockInfo || prevBlockInfo.isBlockContainer) {
+              return false;
+            }
+
+            if (dispatch) {
+              const columnAfterPos = prevBlockInfo.bnBlock.afterPos - 1;
+              const $blockAfterPos = tr.doc.resolve(columnAfterPos - 1);
+
+              tr.delete(
+                blockInfo.bnBlock.beforePos,
+                blockInfo.bnBlock.afterPos,
+              );
+              tr.insert($blockAfterPos.pos, blockInfo.bnBlock.node);
+              tr.setSelection(
+                TextSelection.near(tr.doc.resolve($blockAfterPos.pos + 1)),
+              );
+
+              return true;
+            }
+
+            return false;
+          }),
+        // If the block is the first in a column, moves it to the end of the
+        // previous column. If there is no previous column, moves it above the
+        // columnList.
         () =>
           commands.command(({ state, tr, dispatch }) => {
-            // when at the start of a first block in a column
             const blockInfo = getBlockInfoFromSelection(state);
             if (!blockInfo.isBlockContainer) {
               return false;
@@ -116,7 +174,6 @@ export const KeyboardShortcutsExtension = Extension.create<{
 
             const prevBlock = $pos.nodeBefore;
             if (prevBlock) {
-              // should be no previous block
               return false;
             }
 
@@ -130,31 +187,22 @@ export const KeyboardShortcutsExtension = Extension.create<{
             const columnListPos = $columnPos.before();
 
             if (dispatch) {
-              const fragment = tr.doc.slice(
-                blockInfo.bnBlock.beforePos,
-                blockInfo.bnBlock.afterPos,
-              ).content;
-
               tr.delete(
                 blockInfo.bnBlock.beforePos,
                 blockInfo.bnBlock.afterPos,
               );
+              fixColumnList(tr, columnListPos);
 
-              if ($columnPos.index() === 0) {
-                // Fix `columnList` and insert the block before it.
-                fixColumnList(tr, columnListPos);
-                tr.insert(columnListPos, fragment);
+              if ($columnPos.pos === columnListPos + 1) {
+                tr.insert(columnListPos, blockInfo.bnBlock.node);
                 tr.setSelection(
                   TextSelection.near(tr.doc.resolve(columnListPos)),
                 );
               } else {
-                // Insert the block at the end of the first column and fix
-                // `columnList`.
-                tr.insert($columnPos.pos - 1, fragment);
+                tr.insert($columnPos.pos - 1, blockInfo.bnBlock.node);
                 tr.setSelection(
-                  TextSelection.near(tr.doc.resolve($columnPos.pos - 1)),
+                  TextSelection.near(tr.doc.resolve($columnPos.pos)),
                 );
-                fixColumnList(tr, columnListPos);
               }
             }
 
@@ -184,6 +232,14 @@ export const KeyboardShortcutsExtension = Extension.create<{
 
               let chainedCommands = chain();
 
+              // Moves the children of the current block to the previous one.
+              if (blockInfo.childContainer) {
+                chainedCommands.insertContentAt(
+                  blockInfo.bnBlock.afterPos,
+                  blockInfo.childContainer?.node.content,
+                );
+              }
+
               if (
                 prevBlockInfo.blockContent.node.type.spec.content ===
                 "tableRow+"
@@ -200,17 +256,12 @@ export const KeyboardShortcutsExtension = Extension.create<{
               } else if (
                 prevBlockInfo.blockContent.node.type.spec.content === ""
               ) {
-                const nonEditableBlockContentStartPos =
-                  prevBlockInfo.blockContent.afterPos -
-                  prevBlockInfo.blockContent.node.nodeSize;
-
                 chainedCommands = chainedCommands.setNodeSelection(
-                  nonEditableBlockContentStartPos,
+                  prevBlockInfo.blockContent.beforePos,
                 );
               } else {
                 const blockContentStartPos =
-                  prevBlockInfo.blockContent.afterPos -
-                  prevBlockInfo.blockContent.node.nodeSize;
+                  prevBlockInfo.blockContent.afterPos - 1;
 
                 chainedCommands =
                   chainedCommands.setTextSelection(blockContentStartPos);
@@ -235,8 +286,7 @@ export const KeyboardShortcutsExtension = Extension.create<{
             const blockInfo = getBlockInfoFromSelection(state);
 
             if (!blockInfo.isBlockContainer) {
-              // TODO
-              throw new Error(`todo`);
+              return false;
             }
 
             const selectionAtBlockStart =
@@ -255,8 +305,7 @@ export const KeyboardShortcutsExtension = Extension.create<{
               );
 
               if (!bottomBlock.isBlockContainer) {
-                // TODO
-                throw new Error(`todo`);
+                return false;
               }
 
               const prevBlockNotTableAndNoContent =
@@ -287,50 +336,388 @@ export const KeyboardShortcutsExtension = Extension.create<{
       ]);
 
     const handleDelete = () =>
-      this.editor.commands.first(({ commands }) => [
+      this.editor.commands.first(({ chain, commands }) => [
         // Deletes the selection if it's not empty.
         () => commands.deleteSelection(),
+        // Deletes the first child block and un-nests its children, if the
+        // selection is empty and at the end of the current block. If both the
+        // parent and child blocks have inline content, the child block's
+        // content is appended to the parent's. The child block's own children
+        // are unindented before it's deleted.
+        () =>
+          commands.command(({ state }) => {
+            const blockInfo = getBlockInfoFromSelection(state);
+            if (!blockInfo.isBlockContainer || !blockInfo.childContainer) {
+              return false;
+            }
+            const { blockContent, childContainer } = blockInfo;
+
+            const selectionAtBlockEnd =
+              state.selection.from === blockContent.afterPos - 1;
+            const selectionEmpty = state.selection.empty;
+
+            const firstChildBlockInfo = getBlockInfoFromResolvedPos(
+              state.doc.resolve(childContainer.beforePos + 1),
+            );
+            if (!firstChildBlockInfo.isBlockContainer) {
+              return false;
+            }
+
+            if (selectionAtBlockEnd && selectionEmpty) {
+              const firstChildBlockContent =
+                firstChildBlockInfo.blockContent.node;
+              const firstChildBlockHasInlineContent =
+                firstChildBlockContent.type.spec.content === "inline*";
+              const blockHasInlineContent =
+                blockContent.node.type.spec.content === "inline*";
+
+              return (
+                chain()
+                  // Un-nests child block's children if necessary.
+                  .insertContentAt(
+                    firstChildBlockInfo.bnBlock.afterPos,
+                    firstChildBlockInfo.childContainer?.node.content ||
+                      Fragment.empty,
+                  )
+                  .deleteRange(
+                    // Deletes whole child container if there's only one child.
+                    childContainer.node.childCount === 1
+                      ? {
+                          from: childContainer.beforePos,
+                          to: childContainer.afterPos,
+                        }
+                      : {
+                          from: firstChildBlockInfo.bnBlock.beforePos,
+                          to: firstChildBlockInfo.bnBlock.afterPos,
+                        },
+                  )
+                  // Appends inline content from child block if possible.
+                  .insertContentAt(
+                    state.selection.from,
+                    firstChildBlockHasInlineContent && blockHasInlineContent
+                      ? firstChildBlockContent.content
+                      : null,
+                  )
+                  .setTextSelection(state.selection.from)
+                  .scrollIntoView()
+                  .run()
+              );
+            }
+
+            return false;
+          }),
         // Merges block with the next one (at the same nesting level or lower),
         // if one exists, the block has no children, and the selection is at the
         // end of the block.
         () =>
           commands.command(({ state }) => {
-            // TODO: Change this to not rely on offsets & schema assumptions
             const blockInfo = getBlockInfoFromSelection(state);
             if (!blockInfo.isBlockContainer) {
               return false;
             }
-            const {
-              bnBlock: blockContainer,
-              blockContent,
-              childContainer,
-            } = blockInfo;
+            const { bnBlock: blockContainer, blockContent } = blockInfo;
+
+            const nextBlockInfo = getNextBlockInfo(
+              state.doc,
+              blockInfo.bnBlock.beforePos,
+            );
+            if (!nextBlockInfo || !nextBlockInfo.isBlockContainer) {
+              return false;
+            }
 
-            const { depth } = state.doc.resolve(blockContainer.beforePos);
-            const blockAtDocEnd =
-              blockContainer.afterPos === state.doc.nodeSize - 3;
             const selectionAtBlockEnd =
               state.selection.from === blockContent.afterPos - 1;
             const selectionEmpty = state.selection.empty;
-            const hasChildBlocks = childContainer !== undefined;
 
-            if (
-              !blockAtDocEnd &&
-              selectionAtBlockEnd &&
-              selectionEmpty &&
-              !hasChildBlocks
-            ) {
-              let oldDepth = depth;
-              let newPos = blockContainer.afterPos + 1;
-              let newDepth = state.doc.resolve(newPos).depth;
-
-              while (newDepth < oldDepth) {
-                oldDepth = newDepth;
-                newPos += 2;
-                newDepth = state.doc.resolve(newPos).depth;
+            const posBetweenBlocks = blockContainer.afterPos;
+
+            if (selectionAtBlockEnd && selectionEmpty) {
+              return chain()
+                .command(mergeBlocksCommand(posBetweenBlocks))
+                .scrollIntoView()
+                .run();
+            }
+
+            return false;
+          }),
+        // If the previous block is a columnList, moves the current block to
+        // the end of the last column in it.
+        () =>
+          commands.command(({ state, tr, dispatch }) => {
+            const blockInfo = getBlockInfoFromSelection(state);
+            if (!blockInfo.isBlockContainer) {
+              return false;
+            }
+
+            const nextBlockInfo = getNextBlockInfo(
+              state.doc,
+              blockInfo.bnBlock.beforePos,
+            );
+            if (!nextBlockInfo || nextBlockInfo.isBlockContainer) {
+              return false;
+            }
+
+            if (dispatch) {
+              const columnBeforePos = nextBlockInfo.bnBlock.beforePos + 1;
+              const $blockBeforePos = tr.doc.resolve(columnBeforePos + 1);
+
+              tr.delete(
+                $blockBeforePos.pos,
+                $blockBeforePos.pos + $blockBeforePos.nodeAfter!.nodeSize,
+              );
+              fixColumnList(tr, nextBlockInfo.bnBlock.beforePos);
+              tr.insert(blockInfo.bnBlock.afterPos, $blockBeforePos.nodeAfter!);
+              tr.setSelection(
+                TextSelection.near(tr.doc.resolve($blockBeforePos.pos)),
+              );
+
+              return true;
+            }
+
+            return false;
+          }),
+        // If the block is the last in a column, moves it to the start of the
+        // next column. If there is no next column, moves it below the
+        // columnList.
+        () =>
+          commands.command(({ state, tr, dispatch }) => {
+            const blockInfo = getBlockInfoFromSelection(state);
+            if (!blockInfo.isBlockContainer) {
+              return false;
+            }
+
+            const selectionAtBlockEnd =
+              tr.selection.from === blockInfo.blockContent.afterPos - 1;
+            if (!selectionAtBlockEnd) {
+              return false;
+            }
+
+            const $pos = tr.doc.resolve(blockInfo.bnBlock.afterPos);
+
+            const nextBlock = $pos.nodeAfter;
+            if (nextBlock) {
+              return false;
+            }
+
+            const parentBlock = $pos.node();
+            if (parentBlock.type.name !== "column") {
+              return false;
+            }
+
+            const $blockEndPos = tr.doc.resolve(blockInfo.bnBlock.afterPos);
+            const $columnEndPos = tr.doc.resolve($blockEndPos.after());
+            const columnListEndPos = $columnEndPos.after();
+
+            if (dispatch) {
+              // Position before first block in next column, or first block
+              // after columnList if there is no next column.
+              const nextBlockBeforePos =
+                $columnEndPos.pos === columnListEndPos - 1
+                  ? columnListEndPos
+                  : $columnEndPos.pos + 1;
+              const nextBlockInfo = getBlockInfoFromResolvedPos(
+                tr.doc.resolve(nextBlockBeforePos),
+              );
+
+              tr.delete(
+                nextBlockInfo.bnBlock.beforePos,
+                nextBlockInfo.bnBlock.afterPos,
+              );
+              fixColumnList(
+                tr,
+                columnListEndPos - $columnEndPos.node().nodeSize,
+              );
+              tr.insert($blockEndPos.pos, nextBlockInfo.bnBlock.node);
+              tr.setSelection(
+                TextSelection.near(tr.doc.resolve(nextBlockBeforePos)),
+              );
+            }
+
+            return true;
+          }),
+        // Deletes the next block at either the same or lower nesting level, if
+        // the selection is empty and at the end of the block. If both the
+        // current and next blocks have inline content, the next block's
+        // content is appended to the current block's. The next block's own 
+        // children are unindented before it's deleted.
+        () =>
+          commands.command(({ state }) => {
+            const blockInfo = getBlockInfoFromSelection(state);
+            if (!blockInfo.isBlockContainer) {
+              return false;
+            }
+            const { blockContent } = blockInfo;
+
+            const selectionAtBlockEnd =
+              state.selection.from === blockContent.afterPos - 1;
+            const selectionEmpty = state.selection.empty;
+
+            if (selectionAtBlockEnd && selectionEmpty) {
+              const getNextBlockInfoAtAnyLevel = (
+                doc: Node,
+                beforePos: number,
+              ) => {
+                const nextBlockInfo = getNextBlockInfo(doc, beforePos);
+                if (nextBlockInfo) {
+                  return nextBlockInfo;
+                }
+
+                const parentBlockInfo = getParentBlockInfo(doc, beforePos);
+                if (!parentBlockInfo) {
+                  return undefined;
+                }
+
+                return getNextBlockInfoAtAnyLevel(
+                  doc,
+                  parentBlockInfo.bnBlock.beforePos,
+                );
+              };
+
+              const nextBlockInfo = getNextBlockInfoAtAnyLevel(
+                state.doc,
+                blockInfo.bnBlock.beforePos,
+              );
+              if (!nextBlockInfo || !nextBlockInfo.isBlockContainer) {
+                return false;
               }
 
-              return commands.command(mergeBlocksCommand(newPos - 1));
+              const nextBlockContent = nextBlockInfo.blockContent.node;
+              const nextBlockHasInlineContent =
+                nextBlockContent.type.spec.content === "inline*";
+              const blockHasInlineContent =
+                blockContent.node.type.spec.content === "inline*";
+
+              return (
+                chain()
+                  // Un-nests next block's children if necessary.
+                  .insertContentAt(
+                    nextBlockInfo.bnBlock.afterPos,
+                    nextBlockInfo.childContainer?.node.content ||
+                      Fragment.empty,
+                  )
+                  .deleteRange({
+                    from: nextBlockInfo.bnBlock.beforePos,
+                    to: nextBlockInfo.bnBlock.afterPos,
+                  })
+                  // Appends inline content from child block if possible.
+                  .insertContentAt(
+                    state.selection.from,
+                    nextBlockHasInlineContent && blockHasInlineContent
+                      ? nextBlockContent.content
+                      : null,
+                  )
+                  .setTextSelection(state.selection.from)
+                  .scrollIntoView()
+                  .run()
+              );
+            }
+
+            return false;
+          }),
+        // Deletes the current block if it's an empty block with inline content,
+        // and moves the selection to the next block.
+        () =>
+          commands.command(({ state }) => {
+            const blockInfo = getBlockInfoFromSelection(state);
+            if (!blockInfo.isBlockContainer) {
+              return false;
+            }
+
+            const blockEmpty =
+              blockInfo.blockContent.node.childCount === 0 &&
+              blockInfo.blockContent.node.type.spec.content === "inline*";
+
+            if (blockEmpty) {
+              const nextBlockInfo = getNextBlockInfo(
+                state.doc,
+                blockInfo.bnBlock.beforePos,
+              );
+              if (!nextBlockInfo || !nextBlockInfo.isBlockContainer) {
+                return false;
+              }
+
+              let chainedCommands = chain();
+
+              if (
+                nextBlockInfo.blockContent.node.type.spec.content ===
+                "tableRow+"
+              ) {
+                const tableBlockStartPos = blockInfo.bnBlock.afterPos + 1;
+                const tableBlockContentStartPos = tableBlockStartPos + 1;
+                const firstRowStartPos = tableBlockContentStartPos + 1;
+                const firstCellStartPos = firstRowStartPos + 1;
+                const firstCellParagraphStartPos = firstCellStartPos + 1;
+
+                chainedCommands = chainedCommands.setTextSelection(
+                  firstCellParagraphStartPos,
+                );
+              } else if (
+                nextBlockInfo.blockContent.node.type.spec.content === ""
+              ) {
+                chainedCommands = chainedCommands.setNodeSelection(
+                  nextBlockInfo.blockContent.beforePos,
+                );
+              } else {
+                chainedCommands = chainedCommands.setTextSelection(
+                  nextBlockInfo.blockContent.beforePos + 1,
+                );
+              }
+
+              return chainedCommands
+                .deleteRange({
+                  from: blockInfo.bnBlock.beforePos,
+                  to: blockInfo.bnBlock.afterPos,
+                })
+                .scrollIntoView()
+                .run();
+            }
+
+            return false;
+          }),
+        // Deletes next block if it contains no content and isn't a table,
+        // when the selection is empty and at the end of the block. Moves the
+        // current block into the deleted block's place.
+        () =>
+          commands.command(({ state }) => {
+            const blockInfo = getBlockInfoFromSelection(state);
+
+            if (!blockInfo.isBlockContainer) {
+              return false;
+            }
+
+            const selectionAtBlockEnd =
+              state.selection.from === blockInfo.blockContent.afterPos - 1;
+            const selectionEmpty = state.selection.empty;
+
+            const nextBlockInfo = getNextBlockInfo(
+              state.doc,
+              blockInfo.bnBlock.beforePos,
+            );
+            if (!nextBlockInfo) {
+              return false;
+            }
+            if (!nextBlockInfo.isBlockContainer) {
+              return false;
+            }
+
+            if (nextBlockInfo && selectionAtBlockEnd && selectionEmpty) {
+              const nextBlockNotTableAndNoContent =
+                nextBlockInfo.blockContent.node.type.spec.content === "" ||
+                (nextBlockInfo.blockContent.node.type.spec.content ===
+                  "inline*" &&
+                  nextBlockInfo.blockContent.node.childCount === 0);
+
+              if (nextBlockNotTableAndNoContent) {
+                  const childBlocks =
+                    nextBlockInfo.bnBlock.node.lastChild!.content;
+                  return chain()
+                    .deleteRange({
+                      from: nextBlockInfo.bnBlock.beforePos,
+                      to: nextBlockInfo.bnBlock.afterPos,
+                    })
+                    .insertContentAt(blockInfo.bnBlock.afterPos, nextBlockInfo.bnBlock.node.childCount === 2 ? childBlocks : null)
+                    .run();
+              }
             }
 
             return false;
@@ -413,7 +800,7 @@ export const KeyboardShortcutsExtension = Extension.create<{
         // Creates a new block and moves the selection to it if the current one is empty, while the selection is also
         // empty & at the start of the block.
         () =>
-          commands.command(({ state, dispatch }) => {
+          commands.command(({ state, dispatch, tr }) => {
             const blockInfo = getBlockInfoFromSelection(state);
             if (!blockInfo.isBlockContainer) {
               return false;
@@ -431,15 +818,34 @@ export const KeyboardShortcutsExtension = Extension.create<{
               const newBlockContentPos = newBlockInsertionPos + 2;
 
               if (dispatch) {
-                const newBlock =
-                  state.schema.nodes["blockContainer"].createAndFill()!;
-
-                state.tr
-                  .insert(newBlockInsertionPos, newBlock)
+                // Creates a new block with the children of the current block,
+                // if it has any.
+                const newBlock = state.schema.nodes[
+                  "blockContainer"
+                ].createAndFill(
+                  undefined,
+                  [
+                    state.schema.nodes["paragraph"].createAndFill() ||
+                      undefined,
+                    blockInfo.childContainer?.node,
+                  ].filter((node) => node !== undefined),
+                )!;
+
+                // Inserts the new block and moves the selection to it.
+                tr.insert(newBlockInsertionPos, newBlock)
+                  .setSelection(
+                    new TextSelection(tr.doc.resolve(newBlockContentPos)),
+                  )
                   .scrollIntoView();
-                state.tr.setSelection(
-                  new TextSelection(state.doc.resolve(newBlockContentPos)),
-                );
+
+                // Deletes old block's children, as they have been moved to
+                // the new one.
+                if (blockInfo.childContainer) {
+                  tr.delete(
+                    blockInfo.childContainer.beforePos,
+                    blockInfo.childContainer.afterPos,
+                  );
+                }
               }
 
               return true;