@bigbinary/neeto-editor 1.45.27 → 1.45.28

package/dist/cjs/Editor.cjs.js

@@ -5,7 +5,7 @@ var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var React = require('react');
-var Menu$3 = require('./chunk-DZ7EK7nf.cjs.js');
+var Menu$3 = require('./chunk-C-KwpuWA.cjs.js');
 var classnames = require('classnames');
 var constants = require('./chunk-B9Evf49b.cjs.js');
 var neetoCist = require('@bigbinary/neeto-cist');
@@ -3028,6 +3028,268 @@ const Highlight = Menu$3.Mark.create({
     },
 });
 
+const findListItemPos = (typeOrName, state) => {
+    const { $from } = state.selection;
+    const nodeType = Menu$3.getNodeType(typeOrName, state.schema);
+    let currentNode = null;
+    let currentDepth = $from.depth;
+    let currentPos = $from.pos;
+    let targetDepth = null;
+    while (currentDepth > 0 && targetDepth === null) {
+        currentNode = $from.node(currentDepth);
+        if (currentNode.type === nodeType) {
+            targetDepth = currentDepth;
+        }
+        else {
+            currentDepth -= 1;
+            currentPos -= 1;
+        }
+    }
+    if (targetDepth === null) {
+        return null;
+    }
+    return { $pos: state.doc.resolve(currentPos), depth: targetDepth };
+};
+
+const getNextListDepth = (typeOrName, state) => {
+    const listItemPos = findListItemPos(typeOrName, state);
+    if (!listItemPos) {
+        return false;
+    }
+    const [, depth] = Menu$3.getNodeAtPosition(state, typeOrName, listItemPos.$pos.pos + 4);
+    return depth;
+};
+
+const hasListBefore = (editorState, name, parentListTypes) => {
+    const { $anchor } = editorState.selection;
+    const previousNodePos = Math.max(0, $anchor.pos - 2);
+    const previousNode = editorState.doc.resolve(previousNodePos).node();
+    if (!previousNode || !parentListTypes.includes(previousNode.type.name)) {
+        return false;
+    }
+    return true;
+};
+
+const hasListItemBefore = (typeOrName, state) => {
+    var _a;
+    const { $anchor } = state.selection;
+    const $targetPos = state.doc.resolve($anchor.pos - 2);
+    if ($targetPos.index() === 0) {
+        return false;
+    }
+    if (((_a = $targetPos.nodeBefore) === null || _a === void 0 ? void 0 : _a.type.name) !== typeOrName) {
+        return false;
+    }
+    return true;
+};
+
+const listItemHasSubList = (typeOrName, state, node) => {
+    if (!node) {
+        return false;
+    }
+    const nodeType = Menu$3.getNodeType(typeOrName, state.schema);
+    let hasSubList = false;
+    node.descendants(child => {
+        if (child.type === nodeType) {
+            hasSubList = true;
+        }
+    });
+    return hasSubList;
+};
+
+const handleBackspace = (editor, name, parentListTypes) => {
+    // this is required to still handle the undo handling
+    if (editor.commands.undoInputRule()) {
+        return true;
+    }
+    // if the selection is not collapsed
+    // we can rely on the default backspace behavior
+    if (editor.state.selection.from !== editor.state.selection.to) {
+        return false;
+    }
+    // if the current item is NOT inside a list item &
+    // the previous item is a list (orderedList or bulletList)
+    // move the cursor into the list and delete the current item
+    if (!Menu$3.isNodeActive(editor.state, name) && hasListBefore(editor.state, name, parentListTypes)) {
+        const { $anchor } = editor.state.selection;
+        const $listPos = editor.state.doc.resolve($anchor.before() - 1);
+        const listDescendants = [];
+        $listPos.node().descendants((node, pos) => {
+            if (node.type.name === name) {
+                listDescendants.push({ node, pos });
+            }
+        });
+        const lastItem = listDescendants.at(-1);
+        if (!lastItem) {
+            return false;
+        }
+        const $lastItemPos = editor.state.doc.resolve($listPos.start() + lastItem.pos + 1);
+        return editor.chain().cut({ from: $anchor.start() - 1, to: $anchor.end() + 1 }, $lastItemPos.end()).joinForward().run();
+    }
+    // if the cursor is not inside the current node type
+    // do nothing and proceed
+    if (!Menu$3.isNodeActive(editor.state, name)) {
+        return false;
+    }
+    // if the cursor is not at the start of a node
+    // do nothing and proceed
+    if (!Menu$3.isAtStartOfNode(editor.state)) {
+        return false;
+    }
+    const listItemPos = findListItemPos(name, editor.state);
+    if (!listItemPos) {
+        return false;
+    }
+    const $prev = editor.state.doc.resolve(listItemPos.$pos.pos - 2);
+    const prevNode = $prev.node(listItemPos.depth);
+    const previousListItemHasSubList = listItemHasSubList(name, editor.state, prevNode);
+    // if the previous item is a list item and doesn't have a sublist, join the list items
+    if (hasListItemBefore(name, editor.state) && !previousListItemHasSubList) {
+        return editor.commands.joinItemBackward();
+    }
+    // otherwise in the end, a backspace should
+    // always just lift the list item if
+    // joining / merging is not possible
+    return editor.chain().liftListItem(name).run();
+};
+
+const nextListIsDeeper = (typeOrName, state) => {
+    const listDepth = getNextListDepth(typeOrName, state);
+    const listItemPos = findListItemPos(typeOrName, state);
+    if (!listItemPos || !listDepth) {
+        return false;
+    }
+    if (listDepth > listItemPos.depth) {
+        return true;
+    }
+    return false;
+};
+
+const nextListIsHigher = (typeOrName, state) => {
+    const listDepth = getNextListDepth(typeOrName, state);
+    const listItemPos = findListItemPos(typeOrName, state);
+    if (!listItemPos || !listDepth) {
+        return false;
+    }
+    if (listDepth < listItemPos.depth) {
+        return true;
+    }
+    return false;
+};
+
+const handleDelete = (editor, name) => {
+    // if the cursor is not inside the current node type
+    // do nothing and proceed
+    if (!Menu$3.isNodeActive(editor.state, name)) {
+        return false;
+    }
+    // if the cursor is not at the end of a node
+    // do nothing and proceed
+    if (!Menu$3.isAtEndOfNode(editor.state, name)) {
+        return false;
+    }
+    // if the selection is not collapsed, or not within a single node
+    // do nothing and proceed
+    const { selection } = editor.state;
+    const { $from, $to } = selection;
+    if (!selection.empty && $from.sameParent($to)) {
+        return false;
+    }
+    // check if the next node is a list with a deeper depth
+    if (nextListIsDeeper(name, editor.state)) {
+        return editor
+            .chain()
+            .focus(editor.state.selection.from + 4)
+            .lift(name)
+            .joinBackward()
+            .run();
+    }
+    if (nextListIsHigher(name, editor.state)) {
+        return editor.chain()
+            .joinForward()
+            .joinBackward()
+            .run();
+    }
+    return editor.commands.joinItemForward();
+};
+
+/**
+ * This extension registers custom keymaps to change the behaviour of the backspace and delete keys.
+ * By default Prosemirror keyhandling will always lift or sink items so paragraphs are joined into
+ * the adjacent or previous list item. This extension will prevent this behaviour and instead will
+ * try to join paragraphs from two list items into a single list item.
+ * @see https://www.tiptap.dev/api/extensions/list-keymap
+ */
+const ListKeymap = Menu$3.Extension.create({
+    name: 'listKeymap',
+    addOptions() {
+        return {
+            listTypes: [
+                {
+                    itemName: 'listItem',
+                    wrapperNames: ['bulletList', 'orderedList'],
+                },
+                {
+                    itemName: 'taskItem',
+                    wrapperNames: ['taskList'],
+                },
+            ],
+        };
+    },
+    addKeyboardShortcuts() {
+        return {
+            Delete: ({ editor }) => {
+                let handled = false;
+                this.options.listTypes.forEach(({ itemName }) => {
+                    if (editor.state.schema.nodes[itemName] === undefined) {
+                        return;
+                    }
+                    if (handleDelete(editor, itemName)) {
+                        handled = true;
+                    }
+                });
+                return handled;
+            },
+            'Mod-Delete': ({ editor }) => {
+                let handled = false;
+                this.options.listTypes.forEach(({ itemName }) => {
+                    if (editor.state.schema.nodes[itemName] === undefined) {
+                        return;
+                    }
+                    if (handleDelete(editor, itemName)) {
+                        handled = true;
+                    }
+                });
+                return handled;
+            },
+            Backspace: ({ editor }) => {
+                let handled = false;
+                this.options.listTypes.forEach(({ itemName, wrapperNames }) => {
+                    if (editor.state.schema.nodes[itemName] === undefined) {
+                        return;
+                    }
+                    if (handleBackspace(editor, itemName, wrapperNames)) {
+                        handled = true;
+                    }
+                });
+                return handled;
+            },
+            'Mod-Backspace': ({ editor }) => {
+                let handled = false;
+                this.options.listTypes.forEach(({ itemName, wrapperNames }) => {
+                    if (editor.state.schema.nodes[itemName] === undefined) {
+                        return;
+                    }
+                    if (handleBackspace(editor, itemName, wrapperNames)) {
+                        handled = true;
+                    }
+                });
+                return handled;
+            },
+        };
+    },
+});
+
 /**
  * This extension allows you to create table cells.
  * @see https://www.tiptap.dev/api/nodes/table-cell
@@ -10771,51 +11033,16 @@ var KeyboardShortcuts = function KeyboardShortcuts(_ref) {
             return true;
           }
           return false;
-        },
-        // To fix the issue with backspace on the empty list item moving the focus to the block on top.
-        // https://github.com/ueberdosis/tiptap/issues/2829#issuecomment-1511064298
-        Backspace: function Backspace() {
-          return _this.editor.commands.command(function (_ref2) {
-            var tr = _ref2.tr;
-            var selection = tr.selection,
-              doc = tr.doc;
-            var $cursor = selection.$cursor;
-            var depth = $cursor === null || $cursor === void 0 ? void 0 : $cursor.depth;
-            if ($cursor && depth >= 3 &&
-            // At least the structure is doc -> orderedList/bulletList -> listItem -> paragraph
-            $cursor.parent.type.name === "paragraph" &&
-            // The cursor is inside a paragraph.
-            $cursor.parentOffset === 0 &&
-            // The cursor is at the beginning of the paragraph.
-            $cursor.node(depth - 1).type.name === "listItem" &&
-            // The paragraph is inside a listItem.
-            $cursor.index(depth - 1) === 0 &&
-            // The paragraph is at the beginning of the listItem.
-            $cursor.index(depth - 2) === 0 // The listItem is at the beginning of the list.
-            ) {
-              var listItemNode = $cursor.node(depth - 1);
-              var listItemPos = $cursor.before(depth - 1);
-              var $contentBegin = doc.resolve(listItemPos + 1);
-              var $contentEnd = doc.resolve(listItemPos + listItemNode.nodeSize - 1);
-              var range = $contentBegin.blockRange($contentEnd);
-              var target = Menu$3.liftTarget(range);
-              if (target !== null) {
-                tr.lift(range, target);
-                return true;
-              }
-            }
-            return false;
-          });
         }
       }, shortcuts);
     }
   });
 };
 var KeyboardShortcuts$1 = {
-  configure: function configure(_ref3) {
-    var onSubmit = _ref3.onSubmit,
-      shortcuts = _ref3.shortcuts,
-      isBlockQuoteActive = _ref3.isBlockQuoteActive;
+  configure: function configure(_ref2) {
+    var onSubmit = _ref2.onSubmit,
+      shortcuts = _ref2.shortcuts,
+      isBlockQuoteActive = _ref2.isBlockQuoteActive;
     return KeyboardShortcuts({
       onSubmit: onSubmit,
       shortcuts: shortcuts,
@@ -19204,7 +19431,7 @@ var useCustomExtensions = function useCustomExtensions(_ref) {
     onSubmit: onSubmit,
     shortcuts: keyboardShortcuts,
     isBlockQuoteActive: options.includes(constants.EDITOR_OPTIONS.BLOCKQUOTE)
-  })];
+  }), ListKeymap];
   if (isVideoEmbedActive) {
     customExtensions.push(Embeds);
   }