From 11f805f0b5834aed43e89966c84f8974efac16b0 Mon Sep 17 00:00:00 2001
From: Jeroen Akkerman <Jeroen_akkerman1@hotmail.com>
Date: Fri, 30 Oct 2020 13:29:42 +0100
Subject: [PATCH] Fix CSS scoping issues (#252)

---
 CHANGELOG.md        |  4 ++++
 src/css/easymde.css | 16 ++++++++--------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 80507e1..8e71dd9 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/css/easymde.css b/src/css/easymde.css
index ddd3c00..213ff2d 100644
--- a/src/css/easymde.css
+++ b/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;
-}
\ No newline at end of file
+}