add TextFormatTools

packages/editor/package.json

@@ -35,6 +35,7 @@
     "material-icons": "^1.13.10",
     "react-hook-form": "^7.45.4",
     "react-toastify": "^9.1.3",
+    "reactstrap": "^9.2.0",
     "swr": "^2.2.2",
     "ts-deepmerge": "^6.2.0"
   }

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

@@ -1,7 +1,7 @@
 export const AttachmentsDropup = (): JSX.Element => {
   return (
-    <button type="button" className="btn btn-light btn-sm rounded-circle p-0 lh-1">
-      <span className="material-icons text-secondary">add</span>
+    <button type="button" className="btn btn-light btn-toolbar-button rounded-circle">
+      <span className="material-icons text-secondary fs-6">add</span>
     </button>
   );
 };

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

@@ -0,0 +1,60 @@
+import { memo } from 'react';
+
+import { UncontrolledCollapse } from 'reactstrap';
+
+
+const TextFormatToolsToggler = memo((): JSX.Element => {
+  return (
+    <button
+      id="btn-text-format-tools"
+      type="button"
+      className="btn btn-toolbar-button"
+      data-bs-toggle="collapse"
+      data-bs-target="#collapseTextFormatTools"
+      aria-expanded="false"
+      aria-controls="collapseTextFormatTools"
+    >
+      <span className="material-icons text-secondary fs-5">text_increase</span>
+    </button>
+  );
+});
+
+export const TextFormatTools = (): JSX.Element => {
+  return (
+    <div className="d-flex">
+      <TextFormatToolsToggler />
+
+      <UncontrolledCollapse toggler="#btn-text-format-tools" horizontal>
+        <div className="d-flex px-1 gap-0" style={{ width: '230px' }}>
+          <button type="button" className="btn btn-toolbar-button">
+            <span className="material-icons 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>
+          </button>
+          <button type="button" className="btn btn-toolbar-button">
+            <span className="material-icons 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>
+          </button>
+          <button type="button" className="btn btn-toolbar-button">
+            <span className="material-icons 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>
+          </button>
+          <button type="button" className="btn btn-toolbar-button">
+            <span className="material-icons 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>
+          </button>
+          <button type="button" className="btn btn-toolbar-button">
+            <span className="material-icons text-secondary fs-5">checklist</span>
+          </button>
+        </div>
+      </UncontrolledCollapse>
+    </div>
+  );
+};

packages/editor/src/components/CodeMirrorEditor/Toolbar/Toolbar.module.scss

@@ -0,0 +1,3 @@
+.codemirror-editor-toolbar :global {
+  @import './scss/toolbar-button.scss';
+}

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

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

packages/editor/src/components/CodeMirrorEditor/Toolbar/scss/toolbar-button.scss

@@ -0,0 +1,8 @@
+.btn-toolbar-button {
+  width: 24px !important;
+  height: 24px !important;
+  padding: 0 !important;
+  font-size: 1rem !important;
+  line-height: 1 !important;
+  text-align: center !important;
+}