@atlaskit/editor-plugin-text-formatting 0.1.0

package/dist/es2019/pm-plugins/smart-input-rule.js

@@ -0,0 +1,155 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, PUNC, SYMBOL } from '@atlaskit/editor-common/analytics';
+import { inputRuleWithAnalytics } from '@atlaskit/editor-common/utils';
+import { Selection } from '@atlaskit/editor-prosemirror/state';
+import { createPlugin, createRule } from '@atlaskit/prosemirror-input-rules';
+
+/**
+ * Creates an InputRuleHandler that will match on a regular expression of the
+ * form `(prefix, content, suffix?)`, and replace it with some given text,
+ * maintaining prefix and suffix around the replacement.
+ *
+ * @param text text to replace with
+ */
+function replaceTextUsingCaptureGroup(text) {
+  return (state, match, start, end) => {
+    const [, prefix,, suffix] = match;
+    const replacement = text + (suffix || '');
+    let {
+      tr,
+      selection: {
+        $to
+      }
+    } = state;
+    const startPos = start + (prefix || '').length;
+    const safePos = Math.min(
+    // I know it is almost impossible to have a negative value at this point.
+    // But, this is JS #trustnoone
+    Math.max(startPos, 0), end);
+    tr.replaceWith(safePos, end, state.schema.text(replacement, $to.marks()));
+    tr.setSelection(Selection.near(tr.doc.resolve(tr.selection.to)));
+    return tr;
+  };
+}
+function createReplacementRule(to, from) {
+  return createRule(from, replaceTextUsingCaptureGroup(to));
+}
+
+/**
+ * Create replacement rules fiven a replacement map
+ * @param replMap - Replacement map
+ * @param trackingEventName - Analytics V2 tracking event name
+ * @param replacementRuleWithAnalytics - Analytics GAS V3 middleware for replacement and rules.
+ */
+function createReplacementRules(replMap, replacementRuleWithAnalytics) {
+  return Object.keys(replMap).map(replacement => {
+    const regex = replMap[replacement];
+    const rule = createReplacementRule(replacement, regex);
+    if (replacementRuleWithAnalytics) {
+      return replacementRuleWithAnalytics(replacement)(rule);
+    }
+    return rule;
+  });
+}
+
+// We don't agressively upgrade single quotes to smart quotes because
+// they may clash with an emoji. Only do that when we have a matching
+// single quote, or a contraction.
+function createSingleQuotesRules() {
+  return [
+  // wrapped text
+  createRule(/(\s|^)'(\S+.*\S+)'$/, (state, match, start, end) => {
+    const OPEN_SMART_QUOTE_CHAR = '‘';
+    const CLOSED_SMART_QUOTE_CHAR = '’';
+    const [, spacing, innerContent] = match;
+    // Edge case where match begins with some spacing. We need to add
+    // it back to the document
+    const openQuoteReplacement = spacing + OPEN_SMART_QUOTE_CHAR;
+    // End is not always where the closed quote is, edge case exists
+    // when there is spacing after the closed quote. We need to
+    // determine position of closed quote from the start position.
+    const positionOfClosedQuote = start + openQuoteReplacement.length + innerContent.length;
+    return state.tr.insertText(CLOSED_SMART_QUOTE_CHAR, positionOfClosedQuote, end).insertText(openQuoteReplacement, start, start + openQuoteReplacement.length);
+  }),
+  // apostrophe
+  createReplacementRule('’', /(\w+)(')(\w+)$/)];
+}
+
+/**
+ * Get replacement rules related to product
+ */
+function getProductRules(editorAnalyticsAPI) {
+  const productRuleWithAnalytics = product => inputRuleWithAnalytics((_, match) => ({
+    action: ACTION.SUBSTITUTED,
+    actionSubject: ACTION_SUBJECT.TEXT,
+    actionSubjectId: ACTION_SUBJECT_ID.PRODUCT_NAME,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      product,
+      originalSpelling: match[2]
+    }
+  }), editorAnalyticsAPI);
+  return createReplacementRules({
+    Atlassian: /(\s+|^)(atlassian)(\s)$/,
+    Jira: /(\s+|^)(jira|JIRA)(\s)$/,
+    Bitbucket: /(\s+|^)(bitbucket|BitBucket)(\s)$/,
+    Hipchat: /(\s+|^)(hipchat|HipChat)(\s)$/,
+    Trello: /(\s+|^)(trello)(\s)$/
+  }, productRuleWithAnalytics);
+}
+
+/**
+ * Get replacement rules related to symbol
+ */
+function getSymbolRules(editorAnalyticsAPI) {
+  const symbolToString = {
+    '→': SYMBOL.ARROW_RIGHT,
+    '←': SYMBOL.ARROW_LEFT,
+    '↔︎': SYMBOL.ARROW_DOUBLE
+  };
+  const symbolRuleWithAnalytics = symbol => inputRuleWithAnalytics({
+    action: ACTION.SUBSTITUTED,
+    actionSubject: ACTION_SUBJECT.TEXT,
+    actionSubjectId: ACTION_SUBJECT_ID.SYMBOL,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      symbol: symbolToString[symbol]
+    }
+  }, editorAnalyticsAPI);
+  return createReplacementRules({
+    '→': /(\s+|^)(--?>)(\s)$/,
+    '←': /(\s+|^)(<--?)(\s)$/,
+    '↔︎': /(\s+|^)(<->?)(\s)$/
+  }, symbolRuleWithAnalytics);
+}
+
+/**
+ * Get replacement rules related to punctuation
+ */
+function getPunctuationRules(editorAnalyticsAPI) {
+  const punctuationToString = {
+    '–': PUNC.DASH,
+    '…': PUNC.ELLIPSIS,
+    '”': PUNC.QUOTE_DOUBLE,
+    [PUNC.QUOTE_SINGLE]: PUNC.QUOTE_SINGLE
+  };
+  const punctuationRuleWithAnalytics = punctuation => inputRuleWithAnalytics({
+    action: ACTION.SUBSTITUTED,
+    actionSubject: ACTION_SUBJECT.TEXT,
+    actionSubjectId: ACTION_SUBJECT_ID.PUNC,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      punctuation: punctuationToString[punctuation]
+    }
+  }, editorAnalyticsAPI);
+  const dashEllipsisRules = createReplacementRules({
+    '–': /(\s+|^)(--)(\s)$/,
+    '…': /()(\.\.\.)$/
+  }, punctuationRuleWithAnalytics);
+  const doubleQuoteRules = createReplacementRules({
+    '“': /((?:^|[\s\{\[\(\<'"\u2018\u201C]))(")$/,
+    '”': /"$/
+  }, punctuationRuleWithAnalytics);
+  const singleQuoteRules = createSingleQuotesRules();
+  return [...dashEllipsisRules, ...doubleQuoteRules, ...singleQuoteRules.map(rule => punctuationRuleWithAnalytics(PUNC.QUOTE_SINGLE)(rule))];
+}
+export default (editorAnalyticsAPI => createPlugin('text-formatting:smart-input', [...getProductRules(editorAnalyticsAPI), ...getSymbolRules(editorAnalyticsAPI), ...getPunctuationRules(editorAnalyticsAPI)]));

package/dist/es2019/ui/Toolbar/constants.js

@@ -0,0 +1,20 @@
+import { ToolbarSize } from '@atlaskit/editor-common/types';
+import { IconTypes } from './types';
+export const DefaultButtonsToolbar = [IconTypes.strong, IconTypes.em];
+export const DefaultButtonsMenu = [IconTypes.underline, IconTypes.strike, IconTypes.code, IconTypes.subscript, IconTypes.superscript];
+export const ResponsiveCustomButtonToolbar = {
+  [ToolbarSize.XXL]: DefaultButtonsToolbar,
+  [ToolbarSize.XL]: DefaultButtonsToolbar,
+  [ToolbarSize.L]: DefaultButtonsToolbar,
+  [ToolbarSize.M]: [],
+  [ToolbarSize.S]: [],
+  [ToolbarSize.XXXS]: []
+};
+export const ResponsiveCustomMenu = {
+  [ToolbarSize.XXL]: DefaultButtonsMenu,
+  [ToolbarSize.XL]: DefaultButtonsMenu,
+  [ToolbarSize.L]: DefaultButtonsMenu,
+  [ToolbarSize.M]: [IconTypes.strong, IconTypes.em, ...DefaultButtonsMenu],
+  [ToolbarSize.S]: [IconTypes.strong, IconTypes.em, ...DefaultButtonsMenu],
+  [ToolbarSize.XXXS]: [IconTypes.strong, IconTypes.em, ...DefaultButtonsMenu]
+};

package/dist/es2019/ui/Toolbar/dropdown-menu.js

@@ -0,0 +1,66 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { DropdownMenuWithKeyboardNavigation as DropdownMenu } from '@atlaskit/editor-common/ui-menu';
+import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
+import { useMenuState } from './hooks/menu-state';
+import { MoreButton } from './more-button';
+export const FormattingTextDropdownMenu = /*#__PURE__*/React.memo(({
+  editorView,
+  moreButtonLabel,
+  isReducedSpacing,
+  items,
+  hasFormattingActive,
+  popupsBoundariesElement,
+  popupsMountPoint,
+  popupsScrollableElement
+}) => {
+  const [isMenuOpen, toggleMenu, closeMenu] = useMenuState();
+  const [isOpenedByKeyboard, setIsOpenedByKeyboard] = useState(false);
+  const group = useMemo(() => [{
+    items
+  }], [items]);
+  const onItemActivated = useCallback(({
+    item,
+    shouldCloseMenu = true
+  }) => {
+    item.command(editorView.state, editorView.dispatch);
+    if (shouldCloseMenu) {
+      closeMenu();
+    }
+  }, [editorView.state, editorView.dispatch, closeMenu]);
+  return /*#__PURE__*/React.createElement(DropdownMenu, {
+    mountTo: popupsMountPoint,
+    onOpenChange: closeMenu,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    onItemActivated: onItemActivated,
+    isOpen: isMenuOpen,
+    items: group,
+    zIndex: akEditorMenuZIndex,
+    fitHeight: 188,
+    fitWidth: 136,
+    shouldUseDefaultRole: true,
+    shouldFocusFirstItem: () => {
+      if (isOpenedByKeyboard) {
+        setIsOpenedByKeyboard(false);
+      }
+      return isOpenedByKeyboard;
+    }
+  }, /*#__PURE__*/React.createElement(MoreButton, {
+    isSelected: isMenuOpen || hasFormattingActive,
+    label: moreButtonLabel,
+    isReducedSpacing: isReducedSpacing,
+    isDisabled: false,
+    onClick: () => {
+      toggleMenu();
+      setIsOpenedByKeyboard(false);
+    },
+    onKeyDown: event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        toggleMenu();
+        setIsOpenedByKeyboard(true);
+      }
+    },
+    "aria-expanded": isMenuOpen
+  }));
+});

package/dist/es2019/ui/Toolbar/hooks/clear-formatting-icon.js

@@ -0,0 +1,44 @@
+/** @jsx jsx */
+import { useCallback, useMemo } from 'react';
+import { jsx } from '@emotion/react';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { clearFormatting as clearFormattingKeymap, tooltip } from '@atlaskit/editor-common/keymaps';
+import { toolbarMessages } from '@atlaskit/editor-common/messages';
+import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
+import { clearFormattingWithAnalytics } from '../../../commands/clear-formatting';
+import { pluginKey as clearFormattingPluginKey } from '../../../pm-plugins/clear-formatting';
+const useClearFormattingPluginState = editorState => {
+  return useMemo(() => clearFormattingPluginKey.getState(editorState), [editorState]);
+};
+export const useClearIcon = ({
+  intl,
+  editorState,
+  editorAnalyticsAPI
+}) => {
+  const pluginState = useClearFormattingPluginState(editorState);
+  const isPluginAvailable = Boolean(pluginState);
+  const formattingIsPresent = Boolean(pluginState === null || pluginState === void 0 ? void 0 : pluginState.formattingIsPresent);
+  const clearFormattingLabel = intl.formatMessage(toolbarMessages.clearFormatting);
+  const clearFormattingToolbar = useCallback((state, dispatch) => clearFormattingWithAnalytics(INPUT_METHOD.TOOLBAR, editorAnalyticsAPI)(state, dispatch), [editorAnalyticsAPI]);
+  return useMemo(() => {
+    if (!isPluginAvailable) {
+      return null;
+    }
+    return {
+      key: 'clearFormatting',
+      command: clearFormattingToolbar,
+      content: clearFormattingLabel,
+      elemAfter:
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+      jsx("div", {
+        css: shortcutStyle
+      }, tooltip(clearFormattingKeymap)),
+      value: {
+        name: 'clearFormatting'
+      },
+      isActive: false,
+      isDisabled: !formattingIsPresent,
+      'aria-label': clearFormattingKeymap ? tooltip(clearFormattingKeymap, String(clearFormattingLabel)) : String(clearFormattingLabel)
+    };
+  }, [isPluginAvailable, clearFormattingToolbar, clearFormattingLabel, formattingIsPresent]);
+};

package/dist/es2019/ui/Toolbar/hooks/formatting-icons.js

@@ -0,0 +1,212 @@
+/** @jsx jsx */
+import React, { useMemo } from 'react';
+import { jsx } from '@emotion/react';
+import { INPUT_METHOD, TOOLBAR_ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
+import { getAriaKeyshortcuts, toggleBold, toggleCode, toggleItalic, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleUnderline, tooltip, ToolTipContent } from '@atlaskit/editor-common/keymaps';
+import { toolbarMessages } from '@atlaskit/editor-common/messages';
+import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
+import BoldIcon from '@atlaskit/icon/glyph/editor/bold';
+import ItalicIcon from '@atlaskit/icon/glyph/editor/italic';
+import { toggleCodeWithAnalytics, toggleEmWithAnalytics, toggleStrikeWithAnalytics, toggleStrongWithAnalytics, toggleSubscriptWithAnalytics, toggleSuperscriptWithAnalytics, toggleUnderlineWithAnalytics } from '../../../actions';
+import { pluginKey as textFormattingPluginKey } from '../../../pm-plugins/plugin-key';
+import { IconTypes } from '../types';
+const withToolbarInputMethod = func => func({
+  inputMethod: INPUT_METHOD.TOOLBAR
+});
+const IconButtons = editorAnalyticsAPI => ({
+  strong: {
+    buttonId: TOOLBAR_ACTION_SUBJECT_ID.TEXT_FORMATTING_STRONG,
+    command: withToolbarInputMethod(toggleStrongWithAnalytics(editorAnalyticsAPI)),
+    message: toolbarMessages.bold,
+    tooltipKeymap: toggleBold,
+    component: () => jsx(BoldIcon, {
+      label: ""
+    })
+  },
+  em: {
+    buttonId: TOOLBAR_ACTION_SUBJECT_ID.TEXT_FORMATTING_ITALIC,
+    command: withToolbarInputMethod(toggleEmWithAnalytics(editorAnalyticsAPI)),
+    message: toolbarMessages.italic,
+    tooltipKeymap: toggleItalic,
+    component: () => jsx(ItalicIcon, {
+      label: ""
+    })
+  },
+  underline: {
+    command: withToolbarInputMethod(toggleUnderlineWithAnalytics(editorAnalyticsAPI)),
+    message: toolbarMessages.underline,
+    tooltipKeymap: toggleUnderline
+  },
+  strike: {
+    command: withToolbarInputMethod(toggleStrikeWithAnalytics(editorAnalyticsAPI)),
+    message: toolbarMessages.strike,
+    tooltipKeymap: toggleStrikethrough
+  },
+  code: {
+    command: withToolbarInputMethod(toggleCodeWithAnalytics(editorAnalyticsAPI)),
+    message: toolbarMessages.code,
+    tooltipKeymap: toggleCode
+  },
+  subscript: {
+    command: withToolbarInputMethod(toggleSubscriptWithAnalytics(editorAnalyticsAPI)),
+    message: toolbarMessages.subscript,
+    tooltipKeymap: toggleSubscript
+  },
+  superscript: {
+    command: withToolbarInputMethod(toggleSuperscriptWithAnalytics(editorAnalyticsAPI)),
+    message: toolbarMessages.superscript,
+    tooltipKeymap: toggleSuperscript
+  }
+});
+const getIcon = ({
+  iconType,
+  isDisabled,
+  isActive,
+  intl,
+  editorAnalyticsAPI
+}) => {
+  const icon = IconButtons(editorAnalyticsAPI)[iconType];
+  const content = intl.formatMessage(icon.message);
+  const {
+    tooltipKeymap
+  } = icon;
+  return {
+    content,
+    buttonId: icon.buttonId,
+    iconMark: iconType,
+    key: iconType,
+    command: icon.command,
+    iconElement: icon.component ? icon.component() : undefined,
+    tooltipElement: tooltipKeymap ? jsx(ToolTipContent, {
+      description: content,
+      keymap: tooltipKeymap
+    }) : undefined,
+    elemAfter: tooltipKeymap ?
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    jsx("div", {
+      css: shortcutStyle
+    }, tooltip(tooltipKeymap)) : undefined,
+    value: {
+      name: iconType
+    },
+    isActive,
+    isDisabled,
+    'aria-label': tooltipKeymap ? tooltip(tooltipKeymap, String(content)) : String(content),
+    'aria-keyshortcuts': getAriaKeyshortcuts(tooltipKeymap)
+  };
+};
+const IconsMarkSchema = {
+  [IconTypes.strong]: 'strong',
+  [IconTypes.em]: 'em',
+  [IconTypes.strike]: 'strike',
+  [IconTypes.code]: 'code',
+  [IconTypes.underline]: 'underline',
+  [IconTypes.superscript]: 'subsup',
+  [IconTypes.subscript]: 'subsup'
+};
+const buildMenuIconState = iconMark => ({
+  schema,
+  textFormattingPluginState
+}) => {
+  const hasPluginState = Boolean(Object.keys(textFormattingPluginState || {}).length);
+  const markSchema = IconsMarkSchema[iconMark];
+  const hasSchemaMark = Boolean(schema.marks[markSchema]);
+  if (!hasPluginState) {
+    return {
+      isActive: false,
+      isDisabled: true,
+      isHidden: false,
+      hasSchemaMark
+    };
+  }
+  const isActive = textFormattingPluginState[`${iconMark}Active`];
+  const isDisabled = textFormattingPluginState[`${iconMark}Disabled`];
+  const isHidden = textFormattingPluginState[`${iconMark}Hidden`];
+  return {
+    isActive: Boolean(isActive),
+    isDisabled: Boolean(isDisabled),
+    isHidden: Boolean(isHidden),
+    hasSchemaMark
+  };
+};
+const buildIcon = (iconMark, editorAnalyticsAPI) => {
+  const getState = buildMenuIconState(iconMark);
+  return ({
+    schema,
+    textFormattingPluginState,
+    intl,
+    isToolbarDisabled
+  }) => {
+    const iconState = getState({
+      schema,
+      textFormattingPluginState
+    });
+    const {
+      isActive,
+      isDisabled,
+      isHidden,
+      hasSchemaMark
+    } = iconState;
+    const iconComponent = useMemo(() => getIcon({
+      iconType: IconTypes[iconMark],
+      isDisabled: isToolbarDisabled || isDisabled,
+      isActive,
+      intl,
+      editorAnalyticsAPI
+    }), [isToolbarDisabled, isDisabled, isActive, intl]);
+    const shouldRenderIcon = hasSchemaMark && !isHidden;
+    return useMemo(() => shouldRenderIcon ? iconComponent : null, [shouldRenderIcon, iconComponent]);
+  };
+};
+const useTextFormattingPluginState = editorState => useMemo(() => {
+  const pluginState = textFormattingPluginKey.getState(editorState);
+
+  // TODO: ED-13910 for reasons that goes beyond my knowledge. This is the only way to make the current unit tests happy. Even thought this was wrong before
+  return pluginState;
+}, [editorState]);
+export const useFormattingIcons = ({
+  isToolbarDisabled,
+  editorState,
+  intl,
+  editorAnalyticsAPI
+}) => {
+  const textFormattingPluginState = useTextFormattingPluginState(editorState);
+  const {
+    schema
+  } = editorState;
+  const props = {
+    schema,
+    textFormattingPluginState,
+    intl,
+    isToolbarDisabled: Boolean(isToolbarDisabled)
+  };
+  const buildStrongIcon = buildIcon(IconTypes.strong, editorAnalyticsAPI);
+  const buildEmIcon = buildIcon(IconTypes.em, editorAnalyticsAPI);
+  const buildUnderlineIcon = buildIcon(IconTypes.underline, editorAnalyticsAPI);
+  const buildStrikeIcon = buildIcon(IconTypes.strike, editorAnalyticsAPI);
+  const buildCodeIcon = buildIcon(IconTypes.code, editorAnalyticsAPI);
+  const buildSubscriptIcon = buildIcon(IconTypes.subscript, editorAnalyticsAPI);
+  const buildSuperscriptIcon = buildIcon(IconTypes.superscript, editorAnalyticsAPI);
+  const strongIcon = buildStrongIcon(props);
+  const emIcon = buildEmIcon(props);
+  const underlineIcon = buildUnderlineIcon(props);
+  const strikeIcon = buildStrikeIcon(props);
+  const codeIcon = buildCodeIcon(props);
+  const subscriptIcon = buildSubscriptIcon(props);
+  const superscriptIcon = buildSuperscriptIcon(props);
+  const result = useMemo(() => [strongIcon, emIcon, underlineIcon, strikeIcon, codeIcon, subscriptIcon, superscriptIcon], [strongIcon, emIcon, underlineIcon, strikeIcon, codeIcon, subscriptIcon, superscriptIcon]);
+  return result;
+};
+export const useHasFormattingActived = ({
+  editorState,
+  iconTypeList
+}) => {
+  const textFormattingPluginState = useTextFormattingPluginState(editorState);
+  const hasActiveFormatting = useMemo(() => {
+    if (!textFormattingPluginState) {
+      return false;
+    }
+    return iconTypeList.some(iconType => textFormattingPluginState[`${iconType}Active`]);
+  }, [textFormattingPluginState, iconTypeList]);
+  return hasActiveFormatting;
+};

package/dist/es2019/ui/Toolbar/hooks/menu-state.js

@@ -0,0 +1,11 @@
+import { useCallback, useState } from 'react';
+export const useMenuState = () => {
+  const [isMenuOpen, setIsMenuOpened] = useState(false);
+  const toggleMenu = useCallback(() => {
+    setIsMenuOpened(!isMenuOpen);
+  }, [isMenuOpen]);
+  const closeMenu = useCallback(() => {
+    setIsMenuOpened(false);
+  }, []);
+  return [isMenuOpen, toggleMenu, closeMenu];
+};

package/dist/es2019/ui/Toolbar/hooks/responsive-toolbar-buttons.js

@@ -0,0 +1,48 @@
+import { useMemo } from 'react';
+import { DefaultButtonsMenu, DefaultButtonsToolbar, ResponsiveCustomButtonToolbar, ResponsiveCustomMenu } from '../constants';
+export const useResponsiveIconTypeButtons = ({
+  toolbarSize,
+  responsivenessEnabled
+}) => {
+  const iconTypeList = useMemo(() => ResponsiveCustomButtonToolbar[toolbarSize], [toolbarSize]);
+  return responsivenessEnabled ? iconTypeList : DefaultButtonsToolbar;
+};
+export const useResponsiveIconTypeMenu = ({
+  toolbarSize,
+  responsivenessEnabled
+}) => {
+  const iconTypeList = useMemo(() => ResponsiveCustomMenu[toolbarSize], [toolbarSize]);
+  return responsivenessEnabled ? iconTypeList : DefaultButtonsMenu;
+};
+export const useResponsiveToolbarButtons = ({
+  icons,
+  toolbarSize,
+  responsivenessEnabled
+}) => {
+  const iconTypeList = useResponsiveIconTypeButtons({
+    toolbarSize,
+    responsivenessEnabled
+  });
+  const iconsPosition = useMemo(() => {
+    return icons.reduce((acc, icon) => {
+      if (!icon || !icon.iconMark) {
+        return acc;
+      }
+      const isIconSingleButton = iconTypeList.includes(icon.iconMark);
+      if (isIconSingleButton) {
+        return {
+          dropdownItems: acc.dropdownItems,
+          singleItems: [...acc.singleItems, icon]
+        };
+      }
+      return {
+        dropdownItems: [...acc.dropdownItems, icon],
+        singleItems: acc.singleItems
+      };
+    }, {
+      dropdownItems: [],
+      singleItems: []
+    });
+  }, [icons, iconTypeList]);
+  return iconsPosition;
+};