first commit

common/resources/client/text-editor/menubar/format-menu-trigger.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import clsx from 'clsx';
+import {Button} from '../../ui/buttons/button';
+import {KeyboardArrowDownIcon} from '../../icons/material/KeyboardArrowDown';
+import {Keyboard} from '../../ui/keyboard/keyboard';
+import {MenubarButtonProps} from './menubar-button-props';
+import {
+  Menu,
+  MenuItem,
+  MenuTrigger,
+} from '../../ui/navigation/menu/menu-trigger';
+import {Trans} from '../../i18n/trans';
+
+type Level = 1 | 2 | 3 | 4;
+
+export function FormatMenuTrigger({editor, size}: MenubarButtonProps) {
+  return (
+    <MenuTrigger
+      floatingMinWidth="w-256"
+      onItemSelected={key => {
+        editor.commands.focus();
+        if (typeof key === 'string' && key.startsWith('h')) {
+          editor.commands.toggleHeading({
+            level: parseInt(key.replace('h', '')) as Level,
+          });
+        } else if (key === 'code') {
+          editor.commands.toggleCode();
+        } else if (key === 'strike') {
+          editor.commands.toggleStrike();
+        } else if (key === 'super') {
+          editor.commands.toggleSuperscript();
+        } else if (key === 'sub') {
+          editor.commands.toggleSubscript();
+        } else if (key === 'blockquote') {
+          editor.commands.toggleBlockquote();
+        } else if (key === 'paragraph') {
+          editor.commands.setParagraph();
+        }
+      }}
+    >
+      <Button
+        className={clsx('flex-shrink-0')}
+        variant="text"
+        size={size}
+        endIcon={<KeyboardArrowDownIcon />}
+      >
+        <Trans message="Format" />
+      </Button>
+      <Menu>
+        <MenuItem value="h1" endSection={<Keyboard modifier>Alt+1</Keyboard>}>
+          <Trans message="Heading :number" values={{number: 1}} />
+        </MenuItem>
+        <MenuItem value="h2" endSection={<Keyboard modifier>Alt+2</Keyboard>}>
+          <Trans message="Heading :number" values={{number: 2}} />
+        </MenuItem>
+        <MenuItem value="h3" endSection={<Keyboard modifier>Alt+3</Keyboard>}>
+          <Trans message="Heading :number" values={{number: 3}} />
+        </MenuItem>
+        <MenuItem value="h4" endSection={<Keyboard modifier>Alt+4</Keyboard>}>
+          <Trans message="Heading :number" values={{number: 4}} />
+        </MenuItem>
+        <MenuItem value="code" endSection={<Keyboard modifier>E</Keyboard>}>
+          <Trans message="Code" />
+        </MenuItem>
+        <MenuItem
+          value="strike"
+          endSection={<Keyboard modifier>Shift+X</Keyboard>}
+        >
+          <Trans message="Strikethrough" />
+        </MenuItem>
+        <MenuItem
+          value="super"
+          endSection={
+            <Keyboard modifier separator=" ">
+              .
+            </Keyboard>
+          }
+        >
+          <Trans message="Superscript" />
+        </MenuItem>
+        <MenuItem
+          value="sub"
+          endSection={
+            <Keyboard modifier separator=" ">
+              ,
+            </Keyboard>
+          }
+        >
+          <Trans message="Subscript" />
+        </MenuItem>
+        <MenuItem
+          value="blockquote"
+          endSection={<Keyboard modifier>Shift+B</Keyboard>}
+        >
+          <Trans message="Blockquote" />
+        </MenuItem>
+        <MenuItem
+          value="paragraph"
+          endSection={<Keyboard modifier>Alt+0</Keyboard>}
+        >
+          <Trans message="Paragraph" />
+        </MenuItem>
+      </Menu>
+    </MenuTrigger>
+  );
+}