Merge pull request #6480 from weseek/support/import-scss-for-Editor

support: Import scss module for Editor components

packages/app/src/components/PageEditor/CodeMirrorEditor.module.scss

@@ -90,4 +90,41 @@
       }
     }
   }
+
+  // cheat sheat
+  .overlay.overlay-gfm-cheatsheet {
+    align-items: flex-end;
+    justify-content: flex-end;
+
+    pointer-events: none;
+
+    .card.gfm-cheatsheet {
+      box-shadow: unset;
+      opacity: 0.6;
+      .card-body {
+        min-width: 30em;
+        padding-bottom: 0;
+        font-family: monospace;
+        color: bs.$text-muted;
+      }
+      ul > li {
+        list-style: none;
+      }
+    }
+
+    .gfm-cheatsheet-modal-link {
+      color: bs.$text-muted;
+      pointer-events: all;
+      cursor: pointer;
+      background-color: transparent;
+      border: none;
+
+      opacity: 0.6;
+
+      &:hover,
+      &:focus {
+        opacity: 1;
+      }
+    }
+  }
 }

packages/app/src/styles/_editor-attachment.scss → packages/app/src/components/PageEditor/Editor.module.scss

@@ -1,19 +1,29 @@
-@import 'editor-overlay';
+@use '~/styles/mixins' as ms;
+@use '~/styles/bootstrap/init' as bs;
+
+
+.editor-container :global {
+  // overlay in .editor-container
+  .overlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 7; // forward than .CodeMirror-vscrollbar
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  // loading keymap
+  @include ms.overlay-processing-style(overlay-loading-keymap, 2.5em, 0.3em);
 
-.editor-container {
   // for Dropzone
   .dropzone {
-    @mixin insertSimpleLineIcons($code) {
-      &:before {
-        margin-right: 0.2em;
-        font-family: 'simple-line-icons';
-        content: $code;
-      }
-    }
-
     position: relative; // against .overlay position: absolute
 
-    @include overlay-processing-style(overlay-dropzone-active, 2.5em, 0.5em);
+    @include ms.overlay-processing-style(overlay-dropzone-active, 2.5em, 0.5em);
 
     // unuploadable or rejected
     &.dropzone-unuploadable,
@@ -22,14 +32,14 @@
         background: rgba(200, 200, 200, 0.8);
 
         .overlay-content {
-          color: $gray-700;
+          color: bs.$gray-300;
         }
       }
     }
 
     // uploading
     &.dropzone-uploading {
-      @include overlay-processing-style(overlay-dropzone-active, 2.5em, 0.5em);
+      @include ms.overlay-processing-style(overlay-dropzone-active, 2.5em, 0.5em);
     }
 
     // unuploadable
@@ -37,7 +47,7 @@
       .overlay.overlay-dropzone-active {
         .overlay-content {
           // insert content
-          @include insertSimpleLineIcons('\e617'); // icon-exclamation
+          @include ms.insertSimpleLineIcons('\e617'); // icon-exclamation
 
           &:after {
             content: 'File uploading is disabled';
@@ -51,18 +61,18 @@
       // accepted
       &.dropzone-accepted:not(.dropzone-rejected) {
         .overlay.overlay-dropzone-active {
-          border: 4px dashed $gray-300;
+          border: 4px dashed bs.$gray-300;
 
           .overlay-content {
             // insert content
-            @include insertSimpleLineIcons('\e084'); // icon-cloud-upload
+            @include ms.insertSimpleLineIcons('\e084'); // icon-cloud-upload
 
             &:after {
               content: 'Drop here to upload';
             }
 
             // style
-            color: $secondary;
+            color: bs.$secondary;
             background: rgba(200, 200, 200, 0.8);
           }
         }
@@ -73,7 +83,7 @@
         .overlay.overlay-dropzone-active {
           .overlay-content {
             // insert content
-            @include insertSimpleLineIcons('\e032'); // icon-picture
+            @include ms.insertSimpleLineIcons('\e032'); // icon-picture
 
             &:after {
               content: 'Only an image file is allowed';
@@ -87,7 +97,7 @@
         .overlay.overlay-dropzone-active {
           .overlay-content {
             // insert content
-            @include insertSimpleLineIcons('\e617'); // icon-exclamation
+            @include ms.insertSimpleLineIcons('\e617'); // icon-exclamation
 
             &:after {
               content: 'Only 1 file is allowed';
@@ -106,7 +116,7 @@
     padding-bottom: 3px;
     font-size: small;
     border: none;
-    border-top: 1px dotted $gray-300;
+    border-top: 1px dotted bs.$gray-300;
     border-bottom: none;
 
     &:hover,
@@ -114,4 +124,40 @@
       border-bottom: none;
     }
   }
+
+  // for Navbar editor
+  .navbar-editor {
+    height: 30px;
+    padding: 0;
+
+    border-bottom: 1px solid transparent;
+
+    li {
+      display: inline-block;
+      i {
+        font-size: 16px;
+      }
+    }
+
+    button {
+      padding: 0px;
+      margin: 0 2px;
+      font-size: 1rem;
+      line-height: 1;
+      background-color: transparent;
+      border: none;
+    }
+
+    img {
+      vertical-align: bottom;
+    }
+  }
+}
+
+.modal-gfm-cheatsheet :global {
+  .modal-body {
+    .hljs {
+      font-family: bs.$font-family-monospace;
+    }
+  }
 }

packages/app/src/components/PageEditor/Editor.tsx

@@ -20,6 +20,8 @@ import CodeMirrorEditor from './CodeMirrorEditor';
 import pasteHelper from './PasteHelper';
 import TextAreaEditor from './TextAreaEditor';
 
+import styles from './Editor.module.scss';
+
 type EditorPropsType = {
   value?: string,
   isGfmMode?: boolean,
@@ -252,7 +254,7 @@ const Editor = React.forwardRef((props: EditorPropsType, ref): JSX.Element => {
     };
 
     return (
-      <Modal isOpen={isCheatsheetModalShown} toggle={hideCheatsheetModal} className="modal-gfm-cheatsheet">
+      <Modal isOpen={isCheatsheetModalShown} toggle={hideCheatsheetModal} className={`${styles['modal-gfm-cheatsheet']}`} >
         <ModalHeader tag="h4" toggle={hideCheatsheetModal} className="bg-primary text-light">
           <i className="icon-fw icon-question" />Markdown help
         </ModalHeader>
@@ -275,7 +277,7 @@ const Editor = React.forwardRef((props: EditorPropsType, ref): JSX.Element => {
 
   return (
     <>
-      <div style={flexContainer} className="editor-container">
+      <div style={flexContainer} className={`editor-container ${styles['editor-container']}`} >
         <Dropzone
           ref={dropzoneRef}
           accept={getAcceptableType()}

packages/app/src/components/PageEditor/GridEditModal.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import PropTypes from 'prop-types';
 import { useTranslation } from 'next-i18next';
+import PropTypes from 'prop-types';
 import {
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
@@ -10,6 +10,8 @@ import BootstrapGrid from '~/client/models/BootstrapGrid';
 
 import geu from './GridEditorUtil';
 
+import styles from './GridEditModal.module.scss';
+
 const resSizes = BootstrapGrid.ResponsiveSize;
 const resSizeObj = {
   [resSizes.XS_SIZE]: { displayText: 'grid_edit.smart_no' },
@@ -188,7 +190,7 @@ class GridEditModal extends React.Component {
   render() {
     const { t } = this.props;
     return (
-      <Modal isOpen={this.state.show} toggle={this.cancel} size="xl" className="grw-grid-edit-modal">
+      <Modal isOpen={this.state.show} toggle={this.cancel} size="xl" className={`${styles['grw-grid-edit-modal']}`}>
         <ModalHeader tag="h4" toggle={this.cancel} className="bg-primary text-light">
           {t('grid_edit.create_bootstrap_4_grid')}
         </ModalHeader>

packages/app/src/components/PageEditor/GridEditModal.module.scss

@@ -0,0 +1,43 @@
+@use '~/styles/bootstrap/init' as bs;
+
+.grw-grid-edit-modal {
+  .desktop-preview,
+  .tablet-preview,
+  .mobile-preview {
+    .row {
+      height: 140px;
+      margin: 0px;
+    }
+  }
+  .desktop-preview {
+    .row {
+      div {
+        padding: 0px;
+      }
+    }
+  }
+
+  .tablet-preview {
+    .row {
+      div {
+        padding: 0px;
+      }
+    }
+  }
+
+  .mobile-preview {
+    width: 75%;
+    .row {
+      div {
+        padding: 0px;
+      }
+    }
+  }
+
+  .grid-division-menu {
+    width: 60vw;
+    @include bs.media-breakpoint-down(lg) {
+      width: 80vw;
+    }
+  }
+}

packages/app/src/components/PageEditor/Preview.tsx

@@ -39,7 +39,7 @@ const Preview = React.forwardRef((props: Props, ref: RefObject<HTMLDivElement>):
         }
       }}
     >
-      <ReactMarkdown {...rendererOptions} >{markdown || ''}</ReactMarkdown>
+      <ReactMarkdown {...rendererOptions} className='wiki'>{markdown || ''}</ReactMarkdown>
     </div>
   );
 

packages/app/src/styles/_editor-navbar.scss

@@ -1,28 +0,0 @@
-.editor-container {
-  .navbar-editor {
-    height: 30px;
-    padding: 0;
-
-    border-bottom: 1px solid transparent;
-
-    li {
-      display: inline-block;
-      i {
-        font-size: 16px;
-      }
-    }
-
-    button {
-      padding: 0px;
-      margin: 0 2px;
-      font-size: 1rem;
-      line-height: 1;
-      background-color: transparent;
-      border: none;
-    }
-
-    img {
-      vertical-align: bottom;
-    }
-  }
-}

packages/app/src/styles/_editor-overlay.scss

@@ -1,72 +0,0 @@
-@mixin overlay-processing-style($additionalSelector, $contentFontSize: inherit, $contentPadding: inherit) {
-  .overlay.#{$additionalSelector} {
-    background: rgba(255, 255, 255, 0.5);
-    .overlay-content {
-      padding: $contentPadding;
-      font-size: $contentFontSize;
-      color: $gray-700;
-      background: rgba(200, 200, 200, 0.5);
-    }
-  }
-}
-
-// overlay in .editor-container
-.editor-container {
-  .overlay {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 7; // forward than .CodeMirror-vscrollbar
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  // loading keymap
-  @include overlay-processing-style(overlay-loading-keymap, 2.5em, 0.3em);
-
-  // cheat sheat
-  .overlay.overlay-gfm-cheatsheet {
-    align-items: flex-end;
-    justify-content: flex-end;
-
-    pointer-events: none;
-
-    .card.gfm-cheatsheet {
-      box-shadow: unset;
-      opacity: 0.6;
-      .card-body {
-        min-width: 30em;
-        padding-bottom: 0;
-        font-family: monospace;
-        color: $text-muted;
-      }
-      ul > li {
-        list-style: none;
-      }
-    }
-
-    .gfm-cheatsheet-modal-link {
-      color: $text-muted;
-      pointer-events: all;
-      cursor: pointer;
-      background-color: transparent;
-      border: none;
-
-      opacity: 0.6;
-
-      &:hover,
-      &:focus {
-        opacity: 1;
-      }
-    }
-  }
-}
-
-.modal-gfm-cheatsheet .modal-body {
-  .hljs {
-    font-family: $font-family-monospace;
-  }
-}

packages/app/src/styles/_mixins.scss

@@ -199,3 +199,23 @@
     }
   }
 }
+
+@mixin overlay-processing-style($additionalSelector, $contentFontSize: inherit, $contentPadding: inherit) {
+  .overlay.#{$additionalSelector} {
+    background: rgba(255, 255, 255, 0.5);
+    .overlay-content {
+      padding: $contentPadding;
+      font-size: $contentFontSize;
+      color: bs.$gray-700;
+      background: rgba(200, 200, 200, 0.5);
+    }
+  }
+}
+
+@mixin insertSimpleLineIcons($code) {
+  &:before {
+    margin-right: 0.2em;
+    font-family: 'simple-line-icons';
+    content: $code;
+  }
+}

packages/app/src/styles/_on-edit.scss

@@ -2,9 +2,8 @@
 @import './variables' ;
 @import './mixins' ;
 @import 'sidebar-wiki';
-@import 'editor-overlay';
-
 
+// global imported
 body.on-edit {
   overflow-y: hidden !important;
 
@@ -306,6 +305,7 @@ body.on-edit {
   }
 }
 
+// TODO: Never used this id class
 #tag-edit-button-tooltip {
   .tooltip-inner {
     color: black;
@@ -317,49 +317,3 @@ body.on-edit {
     border-bottom: 5px solid $gray-300;
   }
 }
-
-/*
- Grid Edit Modal
-*/
-
-.grw-grid-edit-modal {
-  .desktop-preview,
-  .tablet-preview,
-  .mobile-preview {
-    .row {
-      height: 140px;
-      margin: 0px;
-    }
-  }
-  .desktop-preview {
-    .row {
-      div {
-        padding: 0px;
-      }
-    }
-  }
-
-  .tablet-preview {
-    .row {
-      div {
-        padding: 0px;
-      }
-    }
-  }
-
-  .mobile-preview {
-    width: 75%;
-    .row {
-      div {
-        padding: 0px;
-      }
-    }
-  }
-
-  .grid-division-menu {
-    width: 60vw;
-    @include media-breakpoint-down(lg) {
-      width: 80vw;
-    }
-  }
-}