From f1934b8ddfa365a67a1b14a938d14cd4818716d9 Mon Sep 17 00:00:00 2001
From: sibiraj-s <dev.sibiraj@outlook.com>
Date: Wed, 13 Jan 2021 08:21:06 +0530
Subject: [PATCH] feat: add wrapper styles

---
 README.md                       | 16 +++++++++-------
 demo/src/app/app.component.html |  2 +-
 demo/src/app/app.component.scss | 15 ---------------
 docs/README.md                  | 16 +++++++++-------
 src/lib/editor.component.scss   | 17 +++++++++++++++++
 5 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/README.md b/README.md
index 97f35c51..7ccba1e1 100644
--- a/README.md
+++ b/README.md
@@ -85,13 +85,15 @@ export class EditorComponent implements OnInit, OnDestroy {
 Then in HTML
 
 ```html
-<ngx-editor-menu [editor]="editor" [toolbar]="toolbar"> </ngx-editor-menu>
-<ngx-editor
-  [editor]="editor"
-  [ngModel]="html"
-  [editable]="true"
-  [placeholder]="Type here..."
-></ngx-editor>
+<div class="NgxEditor__Wrapper">
+  <ngx-editor-menu [editor]="editor" [toolbar]="toolbar"> </ngx-editor-menu>
+  <ngx-editor
+    [editor]="editor"
+    [ngModel]="html"
+    [editable]="true"
+    [placeholder]="Type here..."
+  ></ngx-editor>
+</div>
 ```
 
 Note: Input can be a HTML string or a jsonDoc
diff --git a/demo/src/app/app.component.html b/demo/src/app/app.component.html
index a0b274f3..c1461607 100644
--- a/demo/src/app/app.component.html
+++ b/demo/src/app/app.component.html
@@ -15,7 +15,7 @@
 
     <form [formGroup]="form">
 
-      <div class="editor">
+      <div class="editor NgxEditor__Wrapper">
         <ngx-editor-menu [editor]="editor" [toolbar]="toolbar" [customMenuRef]="customMenu">
         </ngx-editor-menu>
         <ngx-editor [editor]="editor" formControlName="editorContent">
diff --git a/demo/src/app/app.component.scss b/demo/src/app/app.component.scss
index d0a485b2..7f951aee 100644
--- a/demo/src/app/app.component.scss
+++ b/demo/src/app/app.component.scss
@@ -36,21 +36,6 @@
 }
 
 .editor {
-  border: 2px solid rgba(0, 0, 0, 0.2);
-  border-radius: 4px;
-
-  .NgxEditor__MenuBar {
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-  }
-
-  .NgxEditor {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-    border: none;
-  }
-
   .CodeMirror {
     border: 1px solid #eee;
     height: auto;
diff --git a/docs/README.md b/docs/README.md
index 80bf9a5f..7414aeb1 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -85,13 +85,15 @@ export class EditorComponent implements OnInit, OnDestroy {
 Then in HTML
 
 ```html
-<ngx-editor-menu [editor]="editor" [toolbar]="toolbar"> </ngx-editor-menu>
-<ngx-editor
-  [editor]="editor"
-  [ngModel]="html"
-  [editable]="true"
-  [placeholder]="Type here..."
-></ngx-editor>
+<div class="NgxEditor__Wrapper">
+  <ngx-editor-menu [editor]="editor" [toolbar]="toolbar"> </ngx-editor-menu>
+  <ngx-editor
+    [editor]="editor"
+    [ngModel]="html"
+    [editable]="true"
+    [placeholder]="Type here..."
+  ></ngx-editor>
+</div>
 ```
 
 Note: Input can be a HTML string or a jsonDoc
diff --git a/src/lib/editor.component.scss b/src/lib/editor.component.scss
index b9d77550..9e9571b8 100644
--- a/src/lib/editor.component.scss
+++ b/src/lib/editor.component.scss
@@ -104,3 +104,20 @@ $light-gray: #f1f1f1;
     }
   }
 }
+
+.NgxEditor__Wrapper {
+  border: 1px solid rgba(0, 0, 0, 0.4);
+  border-radius: 4px;
+
+  .NgxEditor__MenuBar {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  }
+
+  .NgxEditor {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border: none;
+  }
+}