Fix CSS scoping issues (#252)

CHANGELOG.md

@@ -8,6 +8,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - CodeMirror autorefresh plugin and autoRefresh option (Thanks to [@mbolli], [#249]).
 
+### Fixed
+- CSS scoping issues when the editor is used in combination with other CodeMirror instances ([#252]).
+
 ## [2.12.1] - 2020-10-06
 ### Changed
 - Set `previewImagesInEditor` option to `false` by default ([#251]).
@@ -174,6 +177,7 @@ Project forked from [SimpleMDE](https://github.com/sparksuite/simplemde-markdown
 - Cursor not always showing in "text" mode over the edit field
 
 <!-- Linked issues -->
+[#252]: https://github.com/Ionaru/easy-markdown-editor/issues/252
 [#251]: https://github.com/Ionaru/easy-markdown-editor/issues/251
 [#239]: https://github.com/Ionaru/easy-markdown-editor/issues/239
 [#178]: https://github.com/Ionaru/easy-markdown-editor/issues/178

src/css/easymde.css

@@ -8,7 +8,7 @@
     flex-wrap: wrap;
 }
 
-.CodeMirror {
+.EasyMDEContainer .CodeMirror {
     box-sizing: border-box;
     height: auto;
     border: 1px solid #ddd;
@@ -20,11 +20,11 @@
     word-wrap: break-word;
 }
 
-.CodeMirror-scroll {
+.EasyMDEContainer .CodeMirror-scroll {
     cursor: text;
 }
 
-.CodeMirror-fullscreen {
+.EasyMDEContainer .CodeMirror-fullscreen {
     background: #fff;
     position: fixed !important;
     top: 50px;
@@ -37,22 +37,22 @@
     border-bottom-right-radius: 0 !important;
 }
 
-.CodeMirror-sided {
+.EasyMDEContainer .CodeMirror-sided {
     width: 50% !important;
 }
 
-.CodeMirror-sided.sided--no-fullscreen {
+.EasyMDEContainer .CodeMirror-sided.sided--no-fullscreen {
     border-right: none!important;
     border-bottom-right-radius: 0px;
     position: relative;
     flex: 1 1 auto;
 }
 
-.CodeMirror-placeholder {
+.EasyMDEContainer .CodeMirror-placeholder {
     opacity: .5;
 }
 
-.CodeMirror-focused .CodeMirror-selected {
+.EasyMDEContainer .CodeMirror-focused .CodeMirror-selected {
     background: #d9d9d9;
 }
 
@@ -385,4 +385,4 @@ span[data-img-src]::before{
     padding-top: var(--height);
     width: var(--width);
     background-repeat: no-repeat;
-}
+}