some styling

dist/assets/a-doc-editor.css

@@ -32,6 +32,7 @@
 .a-doc-editor .body .left-sidebar {
     left: 0;
     border-radius: 0 10px 10px 0;
+    box-shadow: 4px 0px 10px 4px rgba(0, 0, 0, 0.4);
     display: flex;
     flex-direction: column;
     position: absolute;
@@ -57,6 +58,7 @@
 .a-doc-editor .body .right-sidebar {
     right: 0;
     border-radius: 10px 0 0 10px;
+    box-shadow: -4px 0px 10px 4px rgba(0, 0, 0, 0.4);
     display: flex;
     flex-direction: column;
     position: absolute;
@@ -103,6 +105,7 @@
     background: #f3f3f3;
     margin-bottom: 10px;
     width: 100%;
+    box-shadow: 4px 0px 10px 4px rgba(0, 0, 0, 0.4);
 }
 
 .a-doc-editor .body .scrolling-area canvas.page:first-child {

dist/assets/a-doc-editor.js

@@ -84,9 +84,8 @@ var ADocEditor = function (customConfig) {
     </div>
     <div class="body">
         <div class="scrolling-area" id="${scrollingAreaId}">
-            <canvas class="page"></canvas>
         </div>
-        <div class="left-sidebar hide" id="${leftSidebarId}">
+        <div class="left-sidebar" id="${leftSidebarId}">
             <div class="toggle-sidebar">
                 <span></span>
                 <span>Summary</span>
@@ -94,7 +93,7 @@ var ADocEditor = function (customConfig) {
             </div>
             <div class="sidebar-body"></div>
         </div>
-        <div class="right-sidebar" id="${rightSidebarId}">
+        <div class="right-sidebar hide" id="${rightSidebarId}">
             <div class="toggle-sidebar">
                 <span>&lrarr;</span>
                 <span>Comments</span>