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

demo/components/Playground.tsx

@@ -43,7 +43,7 @@
 import {SplitModePreview} from './SplitModePreview';
 
 const fileUploadHandler: FileUploadHandler = async (file) => {
     console.info('[Playground] Uploading file: ' + file.name);
     await randomDelay(1000, 3000);
     return {url: URL.createObjectURL(file)};
 };
@@ -56,6 +56,7 @@
 );
 
 export type PlaygroundProps = {
+    mobile?: boolean;
     initial?: MarkupString;
     allowHTML?: boolean;
     settingsVisible?: boolean | SettingItems[];
@@ -97,16 +98,17 @@
     >;
 
 logger.setLogger({
     log: (...data) => console.log('[Deprecated logger]', ...data),
     info: (...data) => console.info('[Deprecated logger]', ...data),
     warn: (...data) => console.warn('[Deprecated logger]', ...data),
     error: (...data) => console.error('[Deprecated logger]', ...data),
     metrics: (...data) => console.info('[Deprecated logger]', ...data),
     action: (data) => console.info(`[Deprecated logger] Action: ${data.action}`, data),
 });
 
 export const Playground = memo<PlaygroundProps>((props) => {
     const {
+        mobile,
         initial,
         initialEditor,
         initialSplitModeEnabled,
@@ -148,7 +150,7 @@
     }, [mdRaw]);
 
     const renderPreview = useCallback<RenderPreview>(
         ({getValue, md, directiveSyntax}) => (
             <SplitModePreview
                 getValue={getValue}
                 allowHTML={md.html}
@@ -168,12 +170,13 @@
         [sanitizeHtml, disabledHTMLBlockModes, disableMarkdownItAttrs],
     );
 
     const logger = useMemo(() => new Logger2().nested({env: 'playground'}), []);
     useLogs(logger);
 
     const mdEditor = useMarkdownEditor(
         {
             logger,
+            mobile,
             preset: 'full',
             wysiwygConfig: {
                 placeholderOptions: placeholderOptions,
@@ -261,6 +264,7 @@
             },
         },
         [
+            mobile,
             allowHTML,
             linkify,
             linkifyTlds,
@@ -299,7 +303,7 @@
             setEditorMode(mode);
         }
         const onToolbarAction = ({id, editorMode: type}: ToolbarActionData) => {
             console.info(`The '${id}' action is performed in the ${type}-editor.`);
         };
         function onChangeSplitModeEnabled({splitModeEnabled}: {splitModeEnabled: boolean}) {
             props.onChangeSplitModeEnabled?.(splitModeEnabled);

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}