feat: option to not highlighting active list button and toParagraph action improvement (#196)

Author: smsochneg

src/extensions/base/BaseSchema/index.ts

@@ -1,4 +1,4 @@
-import {setBlockType} from 'prosemirror-commands';
+import {chainCommands, setBlockType} from 'prosemirror-commands';
 import type {Command} from 'prosemirror-state';
 import {hasParentNodeOfType} from 'prosemirror-utils';
 
@@ -31,9 +31,11 @@ export const BaseSchema: ExtensionAuto<BaseSchemaOptions> = (builder, opts) => {
     builder.addAction(pAction, ({schema}) => {
         const p = pType(schema);
         const cmd = setBlockType(p);
+        const isParagraph: Command = (state) => hasParentNodeOfType(p)(state.selection);
+
         return {
-            isActive: (state) => hasParentNodeOfType(p)(state.selection),
-            isEnable: cmd,
+            isActive: isParagraph,
+            isEnable: chainCommands(isParagraph, cmd),
             run: cmd,
         };
     });

src/toolbar/ToolbarListButton.tsx

@@ -10,7 +10,7 @@ import {i18n} from '../i18n/common';
 import {useBooleanState} from '../react-utils/hooks';
 
 import {ToolbarTooltipDelay} from './const';
-import {ToolbarBaseProps, ToolbarIconData, ToolbarItemData} from './types';
+import {ToolbarBaseProps, ToolbarIconData, ToolbarListButtonItemData} from './types';
 
 import './ToolbarListButton.scss';
 
@@ -20,7 +20,7 @@ export type ToolbarListButtonData<E> = {
     icon: ToolbarIconData;
     title: string | (() => string);
     withArrow?: boolean;
-    data: ToolbarItemData<E>[];
+    data: ToolbarListButtonItemData<E>[];
     alwaysActive?: boolean;
     hideDisabled?: boolean;
 };
@@ -41,7 +41,9 @@ export function ToolbarListButton<E>({
     const buttonRef = React.useRef<HTMLButtonElement>(null);
     const [open, , hide, toggleOpen] = useBooleanState(false);
 
-    const someActive = alwaysActive ? false : data.some((item) => item.isActive(editor));
+    const someActive = alwaysActive
+        ? false
+        : data.some((item) => item.isActive(editor) && !item.doNotActivateList);
     const everyDisabled = alwaysActive ? false : data.every((item) => !item.isEnable(editor));
 
     const popupOpen = everyDisabled ? false : open;

src/toolbar/types.ts

@@ -72,6 +72,10 @@ export type ToolbarReactComponentData<E> = {
     component: React.ComponentType<ToolbarBaseProps<E>>;
 };
 
+export type ToolbarListButtonItemData<E> = ToolbarItemData<E> & {
+    doNotActivateList?: boolean;
+};
+
 export type ToolbarReactNodeData = {
     id: string;
     type: ToolbarDataType.ReactNode;