fix(bundle): dont pass invalid props to dom in ToolbarColors component (#836)

Author: d3m1d0v

demo/components/Playground.tsx

@@ -56,6 +56,7 @@ const wCommandMenuConfig = wysiwygToolbarConfigs.wCommandMenuConfig.concat(
 );
 
 export type PlaygroundProps = {
+    mobile?: boolean;
     initial?: MarkupString;
     allowHTML?: boolean;
     settingsVisible?: boolean | SettingItems[];
@@ -107,6 +108,7 @@ logger.setLogger({
 
 export const Playground = memo<PlaygroundProps>((props) => {
     const {
+        mobile,
         initial,
         initialEditor,
         initialSplitModeEnabled,
@@ -174,6 +176,7 @@ export const Playground = memo<PlaygroundProps>((props) => {
     const mdEditor = useMarkdownEditor(
         {
             logger,
+            mobile,
             preset: 'full',
             wysiwygConfig: {
                 placeholderOptions: placeholderOptions,
@@ -261,6 +264,7 @@ export const Playground = memo<PlaygroundProps>((props) => {
             },
         },
         [
+            mobile,
             allowHTML,
             linkify,
             linkifyTlds,

demo/components/PlaygroundMini.tsx

@@ -6,6 +6,7 @@ import {Playground, type PlaygroundProps} from './Playground';
 
 export type PlaygroundMiniProps = Pick<
     PlaygroundProps,
+    | 'mobile'
     | 'initialEditor'
     | 'settingsVisible'
     | 'breaks'

demo/defaults/args.ts

@@ -5,6 +5,7 @@ import type {PlaygroundMiniProps} from '../components/PlaygroundMini';
 export const args: Meta<PlaygroundMiniProps>['args'] = {
     initialEditor: 'wysiwyg',
     settingsVisible: true,
+    mobile: false,
     allowHTML: true,
     breaks: true,
     linkify: true,

demo/stories/playground/Playground.stories.tsx

@@ -6,6 +6,7 @@ import {getInitialMd} from '../../utils/getInitialMd';
 
 export const Story: StoryObj<typeof component> = {
     args: {
+        mobile: false,
         disableMarkdownItAttrs: true,
     },
 };

src/bundle/toolbar/ToolbarButtonWithPopupMenu.tsx

@@ -31,20 +31,20 @@ export type MenuItem = {
     ignoreActive?: boolean;
 };
 
-export type ToolbarButtonWithPopupMenuProps = Omit<
-    ToolbarBaseProps<never> &
-        Pick<PopupProps, 'disablePortal'> & {
-            icon: ToolbarIconData;
-            iconClassName?: string;
-            chevronIconClassName?: string;
-            title: string | (() => string);
-            menuItems: MenuItem[];
-            /** @default 'classic' */
-            _selectionType?: 'classic' | 'light';
-            qaMenu?: string;
-        },
-    'editor'
->;
+export type ToolbarButtonWithPopupMenuProps = Pick<
+    ToolbarBaseProps<never>,
+    'className' | 'focus' | 'onClick' | 'qa'
+> &
+    Pick<PopupProps, 'disablePortal'> & {
+        icon: ToolbarIconData;
+        iconClassName?: string;
+        chevronIconClassName?: string;
+        title: string | (() => string);
+        menuItems: MenuItem[];
+        /** @default 'classic' */
+        _selectionType?: 'classic' | 'light';
+        qaMenu?: string;
+    };
 
 export const ToolbarButtonWithPopupMenu: React.FC<ToolbarButtonWithPopupMenuProps> = ({
     disablePortal,

src/bundle/toolbar/custom/ToolbarColors.tsx

@@ -76,7 +76,10 @@ export const ToolbarColors: React.FC<ToolbarColorsProps> = (props) => {
 
     return (
         <ToolbarButtonWithPopupMenu
-            {...props}
+            qa={props.qa}
+            focus={props.focus}
+            onClick={props.onClick}
+            className={props.className}
             qaMenu="g-md-toolbar-menu"
             title={i18n('colorify')}
             menuItems={items}