fix: set active state correctly for nested lists

src/lib/prosemirror/commands/toggleList.ts

@@ -2,11 +2,11 @@ import { EditorState, Transaction } from 'prosemirror-state';
 import { NodeType } from 'prosemirror-model';
 import { wrapInList, liftListItem } from 'prosemirror-schema-list';
 
-import { isListItemActive } from '../helpers';
+import { isNodeActive } from '../helpers';
 
 export const toggleList = (type: NodeType, itemType: NodeType) => {
   return (state: EditorState, dispatch: (tr: Transaction) => void) => {
-    const isActive = isListItemActive(state, type);
+    const isActive = isNodeActive(state, type);
 
     if (isActive) {
       return liftListItem(itemType)(state, dispatch);

src/lib/prosemirror/helpers/index.ts

@@ -1,4 +1,3 @@
 export * from './isMarkActive';
 export * from './isNodeActive';
 export * from './isListItem';
-export * from './isListItemActive';

src/lib/prosemirror/helpers/isNodeActive.ts

@@ -1,8 +1,25 @@
 import { EditorState } from 'prosemirror-state';
-import { NodeType } from 'prosemirror-model';
+import { NodeType, ResolvedPos } from 'prosemirror-model';
+
+const findNodeType = (type: NodeType, $from: ResolvedPos): NodeType | null => {
+  for (let i = $from.depth; i > 0; i--) {
+    if ($from.node(i).type === type) {
+      return $from.node(i).type;
+    }
+  }
+
+  return null;
+};
 
 export const isNodeActive = (state: EditorState, type: NodeType, attrs = {}): boolean => {
   const { $from, to } = state.selection;
+
+  const node: NodeType = findNodeType(type, $from);
+
+  if (!Object.entries(attrs).length || !node) {
+    return !!node;
+  }
+
   return to <= $from.end() && $from.parent.hasMarkup(type, attrs);
 };
 

src/lib/prosemirror/plugins/menu/menu.ts

@@ -12,7 +12,7 @@ import {
   Command
 } from '../../../types';
 
-import { isNodeActive, isMarkActive, isListItem, isListItemActive } from '../../helpers';
+import { isNodeActive, isMarkActive, isListItem } from '../../helpers';
 import { toggleList, toggleBlockType } from '../../commands';
 
 import { getIconSvg } from '../../../utils/icons';
@@ -198,8 +198,6 @@ class MenuItemView {
       const menuItem = this.menuItem;
       let isActive = false;
 
-      const one = 1;
-
       const canExecute = command(this.editorView.state, null);
 
       if (menuItem.type === 'mark') {
@@ -209,12 +207,7 @@ class MenuItemView {
 
       if (menuItem.type === 'node') {
         const type: NodeType = schema.nodes[menuItem.key];
-
-        if (isListItem(type, schema)) {
-          isActive = isListItemActive(state, type);
-        } else {
-          isActive = isNodeActive(state, type, menuItem.attrs);
-        }
+        isActive = isNodeActive(state, type, menuItem.attrs);
       }
 
       dom.classList.toggle(activeClass, isActive);