@bigbinary/neeto-editor 1.45.26 → 1.45.28

package/dist/Editor.js

@@ -4,7 +4,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import * as React from 'react';
 import React__default, { memo, useEffect, useState, useRef, useCallback, createElement, forwardRef, useImperativeHandle } from 'react';
-import { E as Extension, a as Mark, m as mergeAttributes, b as markInputRule, c as markPasteRule, D as DecorationSet, d as Decoration, g as getMarkAttributes, N as Node, w as wrappingInputRule, t as textblockTypeInputRule, k as keydownHandler, e as callOrReturn, f as getExtensionField, i as isNodeSelection, n as nodeInputRule, h as findChildren, j as NodeViewWrapper, l as NodeViewContent, R as ReactNodeViewRenderer, P as PasteRule, v as validateUrl, o as escapeForRegEx, p as ReactRenderer, q as EmojiPickerMenu, r as emojiPickerApi, s as liftTarget, u as combineTransactionSteps, x as getChangedRanges, y as findChildrenInRange, z as getMarksBetween, A as getAttributes, I as InputRule, B as highlightFocussedNode, C as resetFocussedNode, F as findParentNodeClosestToPos, G as BubbleMenu, H as getLinkPopoverPosition, J as getMarkType, K as getMarkRange, L as useEditor, O as useEditorState, M as Menu$3, Q as EditorContent, S as MediaUploader, T as EmbedOption, U as EditorView } from './chunk-B_ypvaUL.js';
+import { E as Extension, a as Mark, m as mergeAttributes, b as markInputRule, c as markPasteRule, D as DecorationSet, d as Decoration, g as getMarkAttributes, N as Node, i as isNodeActive, e as isAtStartOfNode, f as isAtEndOfNode, h as getNodeType, j as getNodeAtPosition, w as wrappingInputRule, t as textblockTypeInputRule, k as keydownHandler, l as callOrReturn, n as getExtensionField, o as isNodeSelection, p as nodeInputRule, q as findChildren, r as NodeViewWrapper, s as NodeViewContent, R as ReactNodeViewRenderer, P as PasteRule, v as validateUrl, u as escapeForRegEx, x as ReactRenderer, y as EmojiPickerMenu, z as emojiPickerApi, A as combineTransactionSteps, B as getChangedRanges, C as findChildrenInRange, F as getMarksBetween, G as getAttributes, I as InputRule, H as highlightFocussedNode, J as resetFocussedNode, K as findParentNodeClosestToPos, L as BubbleMenu, O as getLinkPopoverPosition, Q as getMarkType, S as getMarkRange, T as useEditor, U as useEditorState, M as Menu$3, V as EditorContent, W as MediaUploader, X as EmbedOption, Y as EditorView } from './chunk-C0xZGEez.js';
 import classnames from 'classnames';
 import { C as COMBINED_REGEX, D as DIRECT_UPLOAD_ENDPOINT, E as EDITOR_OPTIONS, a as EDITOR_SIZES } from './chunk-FWwP48qR.js';
 import { isNotPresent, isNotEmpty, isPresent, noop as noop$1, slugify } from '@bigbinary/neeto-cist';
@@ -3008,6 +3008,268 @@ const Highlight = Mark.create({
     },
 });
 
+const findListItemPos = (typeOrName, state) => {
+    const { $from } = state.selection;
+    const nodeType = 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] = 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 = 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 (!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 (!isNodeActive(editor.state, name)) {
+        return false;
+    }
+    // if the cursor is not at the start of a node
+    // do nothing and proceed
+    if (!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 (!isNodeActive(editor.state, name)) {
+        return false;
+    }
+    // if the cursor is not at the end of a node
+    // do nothing and proceed
+    if (!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 = 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
@@ -10751,51 +11013,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 = 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,
@@ -19184,7 +19411,7 @@ var useCustomExtensions = function useCustomExtensions(_ref) {
     onSubmit: onSubmit,
     shortcuts: keyboardShortcuts,
     isBlockQuoteActive: options.includes(EDITOR_OPTIONS.BLOCKQUOTE)
-  })];
+  }), ListKeymap];
   if (isVideoEmbedActive) {
     customExtensions.push(Embeds);
   }