add AttachmentsDropup

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

@@ -7,7 +7,7 @@ import type { ReactCodeMirrorProps } from '@uiw/react-codemirror';
 import { GlobalCodeMirrorEditorKey } from '../../consts';
 import { useCodeMirrorEditorIsolated } from '../../stores';
 
-import { CodeMirrorEditorToolbar } from './CodeMirrorEditorToolbar';
+import { Toolbar } from './Toolbar';
 
 import style from './CodeMirrorEditor.module.scss';
 
@@ -41,7 +41,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
   return (
     <div className="flex-expand-vert">
       <CodeMirrorEditorContainer ref={containerRef} />
-      <CodeMirrorEditorToolbar />
+      <Toolbar />
     </div>
   );
 };

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

@@ -1,5 +0,0 @@
-export const CodeMirrorEditorToolbar = (): JSX.Element => {
-  return (
-    <div className="d-flex">toolbar</div>
-  );
-};

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

@@ -0,0 +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>
+  );
+};

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

@@ -0,0 +1,9 @@
+import { AttachmentsDropup } from './AttachmentsDropup';
+
+export const Toolbar = (): JSX.Element => {
+  return (
+    <div className="d-flex p-1">
+      <AttachmentsDropup />
+    </div>
+  );
+};

packages/editor/src/components/CodeMirrorEditor/Toolbar/index.ts

@@ -0,0 +1 @@
+export * from './Toolbar';

packages/editor/src/main.scss

@@ -1,4 +1,7 @@
 @import 'bootstrap';
 @import 'react-toastify/scss/main';
 
+$material-icons-font-path: 'material-icons/iconfont/';
+@import 'material-icons/iconfont/filled';
+
 @import '@growi/core/scss/flex-expand';