first commit

common/resources/client/text-editor/menubar/font-style-buttons.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import clsx from 'clsx';
+import {IconButton} from '../../ui/buttons/icon-button';
+import {FormatBoldIcon} from '../../icons/material/FormatBold';
+import {FormatItalicIcon} from '../../icons/material/FormatItalic';
+import {FormatUnderlinedIcon} from '../../icons/material/FormatUnderlined';
+import {MenubarButtonProps} from './menubar-button-props';
+import {Tooltip} from '@common/ui/tooltip/tooltip';
+import {Trans} from '@common/i18n/trans';
+
+export function FontStyleButtons({editor, size}: MenubarButtonProps) {
+  return (
+    <span className={clsx('flex-shrink-0 whitespace-nowrap')}>
+      <Tooltip label={<Trans message="Bold" />}>
+        <IconButton
+          size={size}
+          color={editor.isActive('bold') ? 'primary' : null}
+          onClick={() => {
+            editor.commands.focus();
+            editor.commands.toggleBold();
+          }}
+        >
+          <FormatBoldIcon />
+        </IconButton>
+      </Tooltip>
+      <Tooltip label={<Trans message="Italic" />}>
+        <IconButton
+          size={size}
+          color={editor.isActive('italic') ? 'primary' : null}
+          onClick={() => {
+            editor.commands.focus();
+            editor.commands.toggleItalic();
+          }}
+        >
+          <FormatItalicIcon />
+        </IconButton>
+      </Tooltip>
+      <Tooltip label={<Trans message="Underline" />}>
+        <IconButton
+          size={size}
+          color={editor.isActive('underline') ? 'primary' : null}
+          onClick={() => {
+            editor.commands.focus();
+            editor.commands.toggleUnderline();
+          }}
+        >
+          <FormatUnderlinedIcon />
+        </IconButton>
+      </Tooltip>
+    </span>
+  );
+}