omit expand-editor()

apps/app/src/components/Page/DisplaySwitcher.tsx

@@ -13,7 +13,6 @@ import { LazyRenderer } from '../Common/LazyRenderer';
 
 
 const PageEditor = dynamic(() => import('../PageEditor'), { ssr: false });
-const PageEditorByHackmd = dynamic(() => import('../PageEditorByHackmd').then(mod => mod.PageEditorByHackmd), { ssr: false });
 const EditorNavbarBottom = dynamic(() => import('../PageEditor/EditorNavbarBottom'), { ssr: false });
 
 
@@ -38,15 +37,7 @@ export const DisplaySwitcher = (props: Props): JSX.Element => {
       { isViewMode && pageView }
 
       <LazyRenderer shouldRender={isEditable === true && editorMode === EditorMode.Editor}>
-        <div data-testid="page-editor" id="page-editor" className="editor-root">
-          <PageEditor />
-        </div>
-      </LazyRenderer>
-
-      <LazyRenderer shouldRender={isEditable === true && editorMode === EditorMode.HackMD}>
-        <div id="page-editor-with-hackmd" className="editor-root">
-          <PageEditorByHackmd />
-        </div>
+        <PageEditor />
       </LazyRenderer>
 
       { isEditable && !isViewMode && <EditorNavbarBottom /> }

apps/app/src/components/PageEditor/PageEditor.tsx

@@ -558,7 +558,7 @@ export const PageEditor = React.memo((): JSX.Element => {
   const isUploadable = isUploadableImage || isUploadableFile;
 
   return (
-    <div className="d-flex flex-wrap">
+    <div data-testid="page-editor" id="page-editor" className="d-flex flex-grow-1 overflow-auto">
       <div className="page-editor-editor-container flex-grow-1 flex-basis-0 mw-0">
         {/* <Editor
           ref={editorRef}
@@ -574,7 +574,7 @@ export const PageEditor = React.memo((): JSX.Element => {
         /> */}
         <CodeMirrorEditor />
       </div>
-      <div className="d-none d-lg-block page-editor-preview-container flex-grow-1 flex-basis-0 mw-0">
+      <div className="d-none d-lg-flex page-editor-preview-container flex-grow-1 flex-basis-0 mw-0">
         <Preview
           ref={previewRef}
           rendererOptions={rendererOptions}

apps/app/src/styles/_editor.scss

@@ -1,6 +1,5 @@
 @import './bootstrap/init' ;
 @import './variables' ;
-@import './mixins' ;
 @import './organisms/wiki-custom-sidebar';
 
 // global imported
@@ -31,16 +30,6 @@
     height: calc(100vh - #{$grw-navbar-border-width});
   }
 
-  // calculate margin
-  $editor-margin-top: $grw-navbar-border-width + $grw-subnav-height-on-edit;
-  @include expand-editor($editor-margin-top);
-
-  @include media-breakpoint-up(lg) {
-    // calculate margin
-    $editor-margin-top: $grw-navbar-border-width + $grw-subnav-height-lg-on-edit;
-    @include expand-editor($editor-margin-top);
-  }
-
   // show
   .d-edit-block {
     display: block !important;

apps/app/src/styles/_mixins.scss

@@ -17,52 +17,6 @@
   }
 }
 
-@mixin expand-editor($editor-margin-top) {
-  $header-plus-footer: $editor-margin-top + $grw-editor-navbar-bottom-height;
-
-  $editor-margin: $header-plus-footer //
-    + 25px //   add .btn-open-dropzone height
-    + 30px; //  add .navbar-editor height
-
-  .editor-root {
-    width: 100%;
-    height: calc(100vh - #{$header-plus-footer});
-    min-height: calc(100vh - #{$header-plus-footer}); // for IE11
-    margin-top: 0px !important;
-
-    // left(editor)
-    .page-editor-editor-container {
-      height: calc(100vh - #{$header-plus-footer});
-      min-height: calc(100vh - #{$header-plus-footer}); // for IE11
-
-      .react-codemirror2,
-      .CodeMirror,
-      .CodeMirror-scroll,
-      .textarea-editor {
-        height: calc(100vh - #{$editor-margin});
-      }
-    }
-
-    // right(preview)
-    .page-editor-preview-container,
-    .page-editor-preview-body {
-      height: calc(100vh - #{$header-plus-footer});
-      min-height: calc(100vh - #{$header-plus-footer}); // for IE11
-    }
-  }
-
-  .editor-root#page-editor-with-hackmd {
-    &,
-    .hackmd-preinit,
-    .hackmd-error,
-    #iframe-hackmd-container > iframe {
-      width: 100%;
-      height: calc(100vh - #{$header-plus-footer});
-      min-height: calc(100vh - #{$header-plus-footer}); // for IE11
-    }
-  }
-}
-
 @mixin apply-navigation-transition() {
   transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
   transition-duration: 300ms;

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

@@ -1,7 +1,13 @@
 .codemirror-editor :global {
 
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  height: 100%;
+
   .cm-editor {
-    height: 100vh;
+    width: 100%;
+    height: 100%;
   }
 
 }