add buttons

apps/app/src/styles/font-icons.scss

@@ -3,4 +3,5 @@
 @import 'font-awesome';
 @import 'simple-line-icons';
 @import 'material-icons/iconfont/filled';
+@import 'material-icons/iconfont/outlined';
 @import '@icon/themify-icons/themify-icons';

packages/editor/src/components/CodeMirrorEditor/Toolbar/DiagramButton.tsx

@@ -0,0 +1,7 @@
+export const DiagramButton = (): JSX.Element => {
+  return (
+    <button type="button" className="btn btn-toolbar-button">
+      <span className="material-icons-outlined text-secondary fs-6">lan</span>
+    </button>
+  );
+};

packages/editor/src/components/CodeMirrorEditor/Toolbar/EmojiButton.tsx

@@ -0,0 +1,7 @@
+export const EmojiButton = (): JSX.Element => {
+  return (
+    <button type="button" className="btn btn-toolbar-button">
+      <span className="material-icons-outlined text-secondary fs-6">emoji_emotions</span>
+    </button>
+  );
+};

packages/editor/src/components/CodeMirrorEditor/Toolbar/TableButton.tsx

@@ -0,0 +1,7 @@
+export const TableButton = (): JSX.Element => {
+  return (
+    <button type="button" className="btn btn-toolbar-button">
+      <span className="material-icons-outlined text-secondary fs-6">table_chart</span>
+    </button>
+  );
+};

packages/editor/src/components/CodeMirrorEditor/Toolbar/TextFormatTools.tsx

@@ -25,33 +25,33 @@ export const TextFormatTools = (): JSX.Element => {
       <TextFormatToolsToggler />
 
       <UncontrolledCollapse toggler="#btn-text-format-tools" horizontal>
-        <div className="d-flex px-1 gap-0" style={{ width: '230px' }}>
+        <div className="d-flex px-1 gap-0" style={{ width: '200px' }}>
           <button type="button" className="btn btn-toolbar-button">
-            <span className="material-icons text-secondary fs-5">format_bold</span>
+            <span className="material-icons-outlined text-secondary fs-5">format_bold</span>
           </button>
           <button type="button" className="btn btn-toolbar-button">
-            <span className="material-icons text-secondary fs-5">format_italic</span>
+            <span className="material-icons-outlined text-secondary fs-5">format_italic</span>
           </button>
           <button type="button" className="btn btn-toolbar-button">
-            <span className="material-icons text-secondary fs-5">format_strikethrough</span>
+            <span className="material-icons-outlined text-secondary fs-5">format_strikethrough</span>
           </button>
           <button type="button" className="btn btn-toolbar-button">
-            <span className="material-icons text-secondary fs-5">block</span>
+            <span className="material-icons-outlined text-secondary fs-5">block</span>
           </button>
           <button type="button" className="btn btn-toolbar-button">
-            <span className="material-icons text-secondary fs-5">code</span>
+            <span className="material-icons-outlined text-secondary fs-5">code</span>
           </button>
           <button type="button" className="btn btn-toolbar-button">
-            <span className="material-icons text-secondary fs-5">format_list_bulleted</span>
+            <span className="material-icons-outlined text-secondary fs-5">format_list_bulleted</span>
           </button>
           <button type="button" className="btn btn-toolbar-button">
-            <span className="material-icons text-secondary fs-5">format_list_numbered</span>
+            <span className="material-icons-outlined text-secondary fs-5">format_list_numbered</span>
           </button>
           <button type="button" className="btn btn-toolbar-button">
-            <span className="material-icons text-secondary fs-5">block</span>
+            <span className="material-icons-outlined text-secondary fs-5">block</span>
           </button>
           <button type="button" className="btn btn-toolbar-button">
-            <span className="material-icons text-secondary fs-5">checklist</span>
+            <span className="material-icons-outlined text-secondary fs-5">checklist</span>
           </button>
         </div>
       </UncontrolledCollapse>

packages/editor/src/components/CodeMirrorEditor/Toolbar/Toolbar.tsx

@@ -1,13 +1,21 @@
+import { memo } from 'react';
+
 import { AttachmentsDropup } from './AttachmentsDropup';
+import { DiagramButton } from './DiagramButton';
+import { EmojiButton } from './EmojiButton';
+import { TableButton } from './TableButton';
 import { TextFormatTools } from './TextFormatTools';
 
 import styles from './Toolbar.module.scss';
 
-export const Toolbar = (): JSX.Element => {
+export const Toolbar = memo((): JSX.Element => {
   return (
-    <div className={`d-flex gap-3 p-2 codemirror-editor-toolbar ${styles['codemirror-editor-toolbar']}`}>
+    <div className={`d-flex gap-2 p-2 codemirror-editor-toolbar ${styles['codemirror-editor-toolbar']}`}>
       <AttachmentsDropup />
       <TextFormatTools />
+      <EmojiButton />
+      <TableButton />
+      <DiagramButton />
     </div>
   );
-};
+});

packages/editor/src/main.scss

@@ -3,5 +3,6 @@
 
 $material-icons-font-path: 'material-icons/iconfont/';
 @import 'material-icons/iconfont/filled';
+@import 'material-icons/iconfont/outlined';
 
 @import '@growi/core/scss/flex-expand';