fix: working on multiple nested lists

This commit is contained in:
Palanikannan1437 2024-04-01 11:01:46 +05:30
parent b34a7c3dbc
commit fe14ea3577
4 changed files with 64 additions and 35 deletions

View File

@ -28,6 +28,9 @@ export const getPrevListDepth = (typeOrName: string, state: EditorState) => {
// By subtracting 1, we aim to get the depth of the parent list, which helps in identifying if the current list is a sublist // By subtracting 1, we aim to get the depth of the parent list, which helps in identifying if the current list is a sublist
depth = depth > 0 ? depth - 1 : 0; depth = depth > 0 ? depth - 1 : 0;
// Double the depth value to get results as 2, 4, 6, 8, etc.
depth = depth * 2;
console.log("Parent list depth", depth); console.log("Parent list depth", depth);
return depth; return depth;
}; };

View File

@ -6,6 +6,8 @@ import { hasListBefore } from "src/ui/extensions/custom-list-keymap/list-helpers
import { hasListItemBefore } from "src/ui/extensions/custom-list-keymap/list-helpers/has-list-item-before"; import { hasListItemBefore } from "src/ui/extensions/custom-list-keymap/list-helpers/has-list-item-before";
import { listItemHasSubList } from "src/ui/extensions/custom-list-keymap/list-helpers/list-item-has-sub-list"; import { listItemHasSubList } from "src/ui/extensions/custom-list-keymap/list-helpers/list-item-has-sub-list";
import { isCurrentParagraphASibling } from "src/ui/extensions/custom-list-keymap/list-helpers/is-para-sibling";
import { nextListIsSibling } from "src/ui/extensions/custom-list-keymap/list-helpers/next-list-is-sibling";
import { prevListIsHigher } from "src/ui/extensions/custom-list-keymap/list-helpers/prev-list-is-higher"; import { prevListIsHigher } from "src/ui/extensions/custom-list-keymap/list-helpers/prev-list-is-higher";
export const handleBackspace = (editor: Editor, name: string, parentListTypes: string[]) => { export const handleBackspace = (editor: Editor, name: string, parentListTypes: string[]) => {
@ -44,7 +46,6 @@ export const handleBackspace = (editor: Editor, name: string, parentListTypes: s
.joinForward() .joinForward()
.run(); .run();
} }
const isCurrentListItemSublist = prevListIsHigher(name, editor.state);
// if the cursor is not inside the current node type // if the cursor is not inside the current node type
// do nothing and proceed // do nothing and proceed
@ -57,65 +58,47 @@ export const handleBackspace = (editor: Editor, name: string, parentListTypes: s
if (!isAtStartOfNode(editor.state)) { if (!isAtStartOfNode(editor.state)) {
return false; return false;
} }
const isParaSibling = isCurrentParagraphASibling(editor.state);
const isCurrentListItemSublist = prevListIsHigher(name, editor.state);
const listItemPos = findListItemPos(name, editor.state); const listItemPos = findListItemPos(name, editor.state);
const nextListItemIsSibling = nextListIsSibling(name, editor.state);
if (!listItemPos) { if (!listItemPos) {
return false; return false;
} }
const currentNode = listItemPos.$pos.node(listItemPos.depth); const currentNode = listItemPos.$pos.node(listItemPos.depth);
const currentNodeSize = currentNode.nodeSize;
const currentListItemHasSubList = listItemHasSubList(name, editor.state, currentNode); const currentListItemHasSubList = listItemHasSubList(name, editor.state, currentNode);
// __AUTO_GENERATED_PRINT_VAR_START__
console.log( if (currentListItemHasSubList && isCurrentListItemSublist && isParaSibling) {
"handleBackspace isCurrentListItemSublist: %s",
isCurrentListItemSublist,
hasListItemBefore(name, editor.state)
); // __AUTO_GENERATED_PRINT_VAR_END__
// if the cursor is not at the start of a node
// do nothing and proceed
if (!isAtStartOfNode(editor.state)) {
return false; 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 has a sublist, join the list items (this scenario only occurs when a sublist's first item is lifted)
if (currentListItemHasSubList && isCurrentListItemSublist) { if (currentListItemHasSubList && isCurrentListItemSublist) {
console.log("ran 2");
editor.chain().liftListItem(name).run(); editor.chain().liftListItem(name).run();
return editor.commands.joinItemBackward(); return editor.commands.joinItemBackward();
} }
if (
// hasListItemBefore(name, editor.state) && if (isCurrentListItemSublist && nextListItemIsSibling) {
// currentListItemHasSubList && return false;
// currentNodeSize > 4 && }
// !previousListItemHasSubList
isCurrentListItemSublist if (isCurrentListItemSublist) {
) {
console.log("ran 0");
// editor.chain().liftListItem(name).run();
return false; return false;
// return editor.commands.joinItemBackward();
// return editor.chain().liftListItem(name).run();
} }
if (currentListItemHasSubList) { if (currentListItemHasSubList) {
console.log("ran 1");
return false; return false;
} }
// if u are first node which has both parent list and sub list
// then do
// if the previous item is a list item and doesn't have a sublist, join the list items
if (hasListItemBefore(name, editor.state)) { if (hasListItemBefore(name, editor.state)) {
console.log("ran 3");
return editor.chain().liftListItem(name).run(); return editor.chain().liftListItem(name).run();
} }
console.log("ran 4"); if (!currentListItemHasSubList) {
return false;
}
// otherwise in the end, a backspace should // otherwise in the end, a backspace should
// always just lift the list item if // always just lift the list item if
// joining / merging is not possible // joining / merging is not possible

View File

@ -0,0 +1,22 @@
import { EditorState } from "@tiptap/pm/state";
export const isCurrentParagraphASibling = (state: EditorState): boolean => {
const { $from } = state.selection;
const listItemNode = $from.node(-1); // Get the parent node of the current selection, assuming it's a list item.
const currentParagraphNode = $from.parent; // Get the current node where the selection is.
// Ensure we're in a paragraph and the parent is a list item.
if (currentParagraphNode.type.name === "paragraph" && listItemNode.type.name === "listItem") {
let paragraphNodesCount = 0;
listItemNode.forEach((child) => {
if (child.type.name === "paragraph") {
paragraphNodesCount++;
}
});
// If there are more than one paragraph nodes, the current paragraph is a sibling.
return paragraphNodesCount > 1;
}
return false;
};

View File

@ -0,0 +1,21 @@
import { EditorState } from "@tiptap/pm/state";
import { findListItemPos } from "src/ui/extensions/custom-list-keymap/list-helpers/find-list-item-pos";
import { getNextListDepth } from "src/ui/extensions/custom-list-keymap/list-helpers/get-next-list-depth";
export const nextListIsSibling = (typeOrName: string, state: EditorState) => {
const listDepth = getNextListDepth(typeOrName, state);
const listItemPos = findListItemPos(typeOrName, state);
if (!listItemPos || !listDepth) {
return false;
}
console.log("sibling", listDepth, "current", listItemPos.depth, listItemPos, listDepth < listItemPos.depth);
if (listDepth === listItemPos.depth) {
return true;
}
return false;
};