feat(toolbar): show current heading level in editor toolbar (#696)

Author: d3m1d0v

src/bundle/config/w-heading-config.tsx

@@ -82,6 +82,7 @@ export const wHeading6ItemData: WToolbarListButtonItemData = {
 export const wHeadingListConfig: WToolbarListButtonData = {
     icon: icons.headline,
     withArrow: true,
+    replaceActiveIcon: true,
     title: i18n.bind(null, 'heading'),
     data: [
         wTextItemData,

src/bundle/toolbar/utils/toolbarsConfigs.ts

@@ -29,6 +29,7 @@ interface TransformedItem {
     icon?: ToolbarIconData;
     hotkey?: string;
     withArrow?: boolean;
+    replaceActiveIcon?: true;
     doNotActivateList?: boolean;
     preview?: React.ReactNode;
     wysiwyg?: ToolbarItemWysiwyg<ToolbarDataType>;
@@ -59,7 +60,10 @@ const transformItem = (
         hotkey: item.view.hotkey,
         doNotActivateList: item.view.doNotActivateList,
         ...(isSingleButton && {preview: (item.view as any).preview}),
-        ...(isListButton && {withArrow: (item.view as any).withArrow}),
+        ...(isListButton && {
+            withArrow: (item.view as any).withArrow,
+            replaceActiveIcon: (item.view as any).replaceActiveIcon,
+        }),
         ...(type === 'wysiwyg' && item.wysiwyg && {...item.wysiwyg}),
         ...(type === 'markup' && item.markup && {...item.markup}),
     };

src/modules/toolbars/items.tsx

@@ -806,6 +806,7 @@ export const headingListItemView: ToolbarItemView<ToolbarDataType.ListButton> =
     icon: icons.headline,
     title: i18n.bind(null, 'heading'),
     withArrow: true,
+    replaceActiveIcon: true,
 };
 
 // ---- Lists list ----

src/modules/toolbars/types.ts

@@ -34,6 +34,8 @@ export type ToolbarItemView<T extends ToolbarDataType = ToolbarDataType.SingleBu
             withArrow?: boolean;
             icon: ToolbarIconData;
             title: string | (() => string);
+            /** When state changes to active, replace default icon with icon of first active item */
+            replaceActiveIcon?: boolean;
         }
       : {});
 

src/toolbar/ToolbarListButton.tsx

@@ -35,16 +35,13 @@ export function ToolbarListButton<E>({
     withArrow,
     data,
     alwaysActive,
+    replaceActiveIcon,
 }: ToolbarListButtonProps<E>) {
     const [anchorElement, setAnchorElement] = useElementState();
     const [open, , hide, toggleOpen] = useBooleanState(false);
     const [popupItem, setPopupItem] = useState<ToolbarButtonPopupData<E>>();
 
-    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;
     const shouldForceHide = open && !popupOpen;
     useEffect(() => {
@@ -55,6 +52,13 @@ export function ToolbarListButton<E>({
 
     if (data.length === 0) return null;
 
+    const activeItem = data.find((item) => item.isActive(editor) && !item.doNotActivateList);
+    const someActive = alwaysActive ? false : Boolean(activeItem);
+
+    if (replaceActiveIcon && someActive && activeItem) {
+        icon = activeItem.icon;
+    }
+
     const buttonContent = [<Icon key={1} data={icon.data} size={icon.size ?? 16} />];
     if (withArrow) {
         buttonContent.push(<Fragment key={2}>{''}</Fragment>);

src/toolbar/types.ts

@@ -97,6 +97,8 @@ export type ToolbarListButtonData<E> = {
     data: ToolbarListButtonItemData<E>[];
     alwaysActive?: boolean;
     hideDisabled?: boolean;
+    /** When state changes to active, replace default icon with icon of first active item */
+    replaceActiveIcon?: boolean;
 };
 
 /**