add CodeMirrorEditorToolbar

packages/core/scss/placeholders/_flex-expand.scss

@@ -12,5 +12,6 @@
   display: flex;
   flex: 1;
   flex-direction: column;
+  height: 100%;
   overflow-y: auto;
 }

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

@@ -1,10 +1,5 @@
 .codemirror-editor-container :global {
 
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  height: 100%;
-
   .cm-editor {
     width: 100%;
     height: 100%;

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

@@ -7,11 +7,13 @@ import type { ReactCodeMirrorProps } from '@uiw/react-codemirror';
 import { GlobalCodeMirrorEditorKey } from '../../consts';
 import { useCodeMirrorEditorIsolated } from '../../stores';
 
+import { CodeMirrorEditorToolbar } from './CodeMirrorEditorToolbar';
+
 import style from './CodeMirrorEditor.module.scss';
 
 const CodeMirrorEditorContainer = forwardRef<HTMLDivElement>((props, ref) => {
   return (
-    <div {...props} className={`${style['codemirror-editor-container']}`} ref={ref} />
+    <div {...props} className={`flex-expand-vert ${style['codemirror-editor-container']}`} ref={ref} />
   );
 });
 
@@ -36,5 +38,10 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
   }, [onChange]);
   useCodeMirrorEditorIsolated(editorKey, containerRef.current, cmProps);
 
-  return <CodeMirrorEditorContainer ref={containerRef} />;
+  return (
+    <div className="flex-expand-vert">
+      <CodeMirrorEditorContainer ref={containerRef} />
+      <CodeMirrorEditorToolbar />
+    </div>
+  );
 };

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

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