local init

.eslintrc.js

@@ -16,7 +16,7 @@ module.exports = {
         "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
     },
     globals: {
-        $: true,
+        cash: true,
         $nuxt: true
     },
     parserOptions: {

package.json

@@ -8,65 +8,68 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^21.0.0",
-    "@ckeditor/ckeditor5-dev-utils": "^23.1.1",
-    "@ckeditor/ckeditor5-dev-webpack-plugin": "^23.1.1",
-    "@ckeditor/ckeditor5-easy-image": "^21.0.0",
-    "@ckeditor/ckeditor5-editor-balloon": "^21.0.0",
-    "@ckeditor/ckeditor5-editor-classic": "^21.0.0",
-    "@ckeditor/ckeditor5-editor-decoupled": "^21.0.0",
-    "@ckeditor/ckeditor5-editor-inline": "^21.0.0",
-    "@ckeditor/ckeditor5-essentials": "^21.0.0",
-    "@ckeditor/ckeditor5-font": "^21.0.0",
-    "@ckeditor/ckeditor5-heading": "^21.0.0",
-    "@ckeditor/ckeditor5-highlight": "^21.0.0",
-    "@ckeditor/ckeditor5-link": "^21.0.0",
-    "@ckeditor/ckeditor5-paragraph": "^21.0.0",
-    "@ckeditor/ckeditor5-theme-lark": "^21.0.0",
-    "@ckeditor/ckeditor5-vue": "^1.0.1",
+    "@ckeditor/ckeditor5-basic-styles": "^23.1.0",
+    "@ckeditor/ckeditor5-dev-utils": "^23.6.1",
+    "@ckeditor/ckeditor5-dev-webpack-plugin": "^23.6.1",
+    "@ckeditor/ckeditor5-easy-image": "^23.1.0",
+    "@ckeditor/ckeditor5-editor-balloon": "^23.1.0",
+    "@ckeditor/ckeditor5-editor-classic": "^23.1.0",
+    "@ckeditor/ckeditor5-editor-decoupled": "^23.1.0",
+    "@ckeditor/ckeditor5-editor-inline": "^23.1.0",
+    "@ckeditor/ckeditor5-essentials": "^23.1.0",
+    "@ckeditor/ckeditor5-font": "^23.1.0",
+    "@ckeditor/ckeditor5-heading": "^23.1.0",
+    "@ckeditor/ckeditor5-highlight": "^23.1.0",
+    "@ckeditor/ckeditor5-link": "^23.1.0",
+    "@ckeditor/ckeditor5-paragraph": "^23.1.0",
+    "@ckeditor/ckeditor5-theme-lark": "^23.1.0",
+    "@ckeditor/ckeditor5-vue": "^2.0.1",
     "@google/markerclusterer": "^2.0.8",
-    "cash-dom": "^8.0.0",
-    "chart.js": "^2.9.3",
-    "core-js": "^3.6.5",
-    "dayjs": "^1.8.29",
+    "@popperjs/core": "^2.5.4",
+    "cash-dom": "^8.1.0",
+    "chart.js": "^2.9.4",
+    "core-js": "^3.8.0",
+    "dayjs": "^1.9.6",
+    "feather-icons": "^4.28.0",
     "google-maps-api-loader": "^1.1.1",
-    "highlight.js": "^10.1.1",
-    "js-beautify": "^1.11.0",
+    "highlight.js": "^10.4.1",
+    "js-beautify": "^1.13.0",
     "litepicker": "^1.5.7",
-    "lodash": "^4.17.19",
-    "postcss-loader": "3",
-    "raw-loader": "0.5.1",
-    "sass-loader": "^9.0.2",
+    "lodash": "^4.17.20",
+    "postcss-loader": "4",
+    "raw-loader": "4.0.2",
+    "sass-loader": "^10.1.0",
+    "tabulator-tables": "^4.9.1",
     "tail.select": "^0.5.15",
-    "toastify-js": "^1.9.0",
+    "toastify-js": "^1.9.3",
     "velocity-animate": "^1.5.2",
-    "vue": "^2.6.11",
-    "vue-chartjs": "^3.5.0",
+    "vue": "^2.6.12",
+    "vue-chartjs": "^3.5.1",
     "vue-feather-icons": "^5.1.0",
-    "vue-router": "^3.2.0",
+    "vue-router": "^3.4.9",
     "vue-slick-carousel": "^1.0.6",
-    "vue-tippy": "^4.5.1",
+    "vue-tippy": "^4.7.2",
     "vue2-dropzone": "^3.6.0",
-    "vuelidate": "^0.7.5",
-    "vuetable-2": "^1.7.5",
-    "vuex": "^3.4.0",
+    "vuelidate": "^0.7.6",
+    "vuex": "^3.6.0",
+    "xlsx": "^0.16.9",
     "zoom-vanilla.js": "^2.0.6"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.4.0",
-    "@vue/cli-plugin-eslint": "~4.4.0",
-    "@vue/cli-plugin-router": "~4.4.0",
-    "@vue/cli-plugin-vuex": "~4.4.0",
-    "@vue/cli-service": "~4.4.0",
+    "@vue/cli-plugin-babel": "~4.5.9",
+    "@vue/cli-plugin-eslint": "~4.5.9",
+    "@vue/cli-plugin-router": "~4.5.9",
+    "@vue/cli-plugin-vuex": "~4.5.9",
+    "@vue/cli-service": "~4.5.9",
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-vue": "^6.2.2",
-    "node-sass": "^4.12.0",
-    "prettier": "^1.19.1",
-    "tailwindcss": "^1.5.1",
-    "vue-template-compiler": "^2.6.11"
+    "eslint": "^7.14.0",
+    "eslint-plugin-prettier": "^3.2.0",
+    "eslint-plugin-vue": "^7.2.0",
+    "node-sass": "^5.0.0",
+    "prettier": "^2.2.1",
+    "tailwindcss": "^2.0.1",
+    "vue-template-compiler": "^2.6.12"
   },
   "eslintConfig": {
     "root": true,

src/assets/sass/_ckeditor.scss

@@ -11,6 +11,10 @@
   .document-editor__toolbar .ck-toolbar {
     border: 0;
     border-radius: 0;
+    @apply bg-gray-200;
+    .ck-icon {
+      width: 16px;
+    }
   }
   .document-editor__editable-container {
     overflow-y: scroll;
@@ -81,14 +85,20 @@
   }
 }
 
-.ck-content {
-  min-height: 200px;
+.ck.ck-content {
+  min-height: 250px;
   &.ck-editor__editable_inline {
     @apply border border-gray-300;
   }
 }
 
-.ck {
+.ck .ck {
+  .ck-content {
+    min-height: 250px;
+    &.ck-editor__editable_inline {
+      @apply border border-gray-300;
+    }
+  }
   &.ck-reset_all, &.ck-reset_all * {
     @apply text-gray-800;
   }
@@ -101,6 +111,9 @@
     &:after {
       border-bottom-color: #edf2f7 !important;
     }
+    .ck-icon {
+      width: 16px;
+    }
   }
   &.ck-editor__main>.ck-editor__editable:not(.ck-focused) {
     @apply border-gray-300;
@@ -108,4 +121,92 @@
   &.ck-button:not(.ck-disabled):hover, &a.ck-button:not(.ck-disabled):hover {
     @apply bg-gray-300;
   }
+}
+
+.dark {
+  .document-editor {
+    @apply border-dark-4;
+    .document-editor__toolbar {
+      @apply border-dark-4;
+    }
+    .document-editor__toolbar .ck-toolbar {
+      @apply bg-dark-4;
+      .ck-toolbar__separator {
+        @apply bg-dark-5;
+      }
+      .ck-tooltip .ck-tooltip__text {
+        @apply text-gray-300 bg-dark-5;
+        &:after {
+          border-bottom-color: #3f4865;
+        }
+      }
+      .ck.ck-icon :not([fill]) {
+        fill: #9fa8bb;
+      }
+      .ck.ck-dropdown__panel {
+        @apply border-dark-2;
+      }
+      .ck.ck-button.ck-on, 
+      a.ck.ck-button.ck-on {
+        @apply bg-dark-2;
+      }
+    }
+    .document-editor__editable-container {
+      @apply bg-dark-1;
+    }
+    .document-editor__editable-container .ck-editor__editable {
+      @apply border-dark-4 bg-dark-2;
+    }
+  }
+
+  .ck.ck-content.ck-editor__editable_inline {
+    @apply border-dark-4 bg-dark-2;
+  }
+
+  .ck .ck {
+    .ck-content.ck-editor__editable_inline {
+      @apply border-dark-4 bg-dark-2;
+    }
+    &.ck-reset_all, &.ck-reset_all * {
+      @apply text-gray-800;
+    }
+    &.ck-toolbar,
+    &.ck-balloon-panel {
+      @apply bg-dark-4 border-dark-4;
+      &:before {
+        border-bottom-color: #1e2533 !important;
+      }
+      &:after {
+        border-bottom-color: #1e2533 !important;
+      }
+      .ck-toolbar__separator {
+        @apply bg-dark-5;
+      }
+      .ck-tooltip .ck-tooltip__text {
+        @apply text-gray-300 bg-dark-5;
+        &:after {
+          border-bottom-color: #3f4865;
+        }
+      }
+      .ck.ck-icon :not([fill]) {
+        fill: #9fa8bb;
+      }
+      .ck.ck-dropdown__panel {
+        @apply border-dark-2;
+      }
+      .ck.ck-button.ck-on, 
+      a.ck.ck-button.ck-on {
+        @apply bg-dark-2;
+      }
+    }
+    &.ck-editor__main>.ck-editor__editable {
+      @apply bg-dark-2;
+      &:not(.ck-focused) {
+        @apply border-dark-4;
+      }
+    }
+    &.ck-button:not(.ck-disabled):hover, &a.ck-button:not(.ck-disabled):hover {
+      @apply bg-dark-4;
+    }
+  }
 }