first commit

common/resources/client/text-editor/menubar/align-buttons.tsx

@@ -0,0 +1,78 @@
+import clsx from 'clsx';
+import {ComponentType} from 'react';
+import {FormatAlignLeftIcon} from '../../icons/material/FormatAlignLeft';
+import {FormatAlignCenterIcon} from '../../icons/material/FormatAlignCenter';
+import {FormatAlignRightIcon} from '../../icons/material/FormatAlignRight';
+import {FormatAlignJustifyIcon} from '../../icons/material/FormatAlignJustify';
+import {MenubarButtonProps} from './menubar-button-props';
+import {IconButton} from '../../ui/buttons/icon-button';
+import {
+  Menu,
+  MenuItem,
+  MenuTrigger,
+} from '../../ui/navigation/menu/menu-trigger';
+import {Trans} from '../../i18n/trans';
+import {message} from '../../i18n/message';
+
+const iconMap = {
+  left: {
+    icon: FormatAlignLeftIcon,
+    label: message('Align left'),
+  },
+  center: {
+    icon: FormatAlignCenterIcon,
+    label: message('Align center'),
+  },
+  right: {
+    icon: FormatAlignRightIcon,
+    label: message('Align right'),
+  },
+  justify: {
+    icon: FormatAlignJustifyIcon,
+    label: message('Justify'),
+  },
+};
+
+export function AlignButtons({editor, size}: MenubarButtonProps) {
+  const activeKey = (Object.keys(iconMap).find(key => {
+    return editor.isActive({textAlign: key});
+  }) || 'left') as keyof typeof iconMap;
+  const ActiveIcon: ComponentType = activeKey
+    ? iconMap[activeKey].icon
+    : iconMap.left.icon;
+
+  return (
+    <MenuTrigger
+      floatingWidth="auto"
+      selectionMode="single"
+      selectedValue={activeKey}
+      onSelectionChange={key => {
+        editor.commands.focus();
+        editor.commands.setTextAlign(key as string);
+      }}
+    >
+      <IconButton
+        size={size}
+        color={activeKey ? 'primary' : null}
+        className={clsx('flex-shrink-0')}
+      >
+        <ActiveIcon />
+      </IconButton>
+      <Menu>
+        {Object.entries(iconMap).map(([name, config]) => {
+          const Icon = config.icon;
+          return (
+            <MenuItem
+              key={name}
+              value={name}
+              startIcon={<Icon size="md" />}
+              capitalizeFirst
+            >
+              <Trans message={config.label.message} />
+            </MenuItem>
+          );
+        })}
+      </Menu>
+    </MenuTrigger>
+  );
+}