FIX: conflicting class declaration with core (#4)

* DEV: Remove `fade-in` and use `jsuites.basic.css` instead

* FIX: Linting issues with jspreadsheet-theme

* WIP: Add bash script to handle vendor assets

* FIX: Ember Linting fixes

* DEV: Cleanup comments and commented code

.eslintrc

@@ -1,6 +1,6 @@
 {
   "extends": "eslint-config-discourse",
-  "ignorePatterns": ["javascripts/vendor/*"],
+  "ignorePatterns": ["javascripts/vendor/*", "assets/vendor/*"],
   "globals": {
     "settings": "readonly",
     "themePrefix": "readonly"

about.json

@@ -9,8 +9,8 @@
   "minimum_discourse_version": null,
   "maximum_discourse_version": null,
   "assets": {
-    "jsuites": "assets/jsuites.js",
+    "jsuites": "assets/vendor/jsuites.js",
-    "jspreadsheet": "assets/jspreadsheet.js"
+    "jspreadsheet": "assets/vendor/jspreadsheet.js"
   },
   "modifiers": {
     "svg_icons": [

build.bash

@@ -0,0 +1,88 @@
+#!/bin/bash
+
+# Global Variables:
+SCSS_VENDOR=scss/vendor/
+JS_VENDOR=assets/vendor/
+
+JSUITES_JS_URL="https://jsuites.net/v4/jsuites.js"
+JSPREADSHEET_JS_URL="https://bossanova.uk/jspreadsheet/v4/jexcel.js"
+
+JSUITES_CSS_URL="https://raw.githubusercontent.com/jsuites/jsuites/master/dist/jsuites.basic.css"
+JSPREADSHEET_CSS_URL="https://bossanova.uk/jspreadsheet/v4/jexcel.css"
+
+JSUITES_CSS_FILE=jsuites.basic.css
+JSUITES_SCSS_FILE=jsuites.scss
+JSUITES_SCSS_FILE_LOCATION=$SCSS_VENDOR$JSUITES_SCSS_FILE
+
+JSUITES_JS_FILE=jsuites.js
+JSUITES_NEW_JS_FILE=jsuites.js
+JSUITES_JS_FILE_LOCATION=$JS_VENDOR$JSUITES_NEW_JS_FILE
+
+JSPREADSHEET_CSS_FILE=jexcel.css
+JSPREADSHEET_SCSS_FILE=jspreadsheet.scss
+JSPREADSHEET_SCSS_FILE_LOCATION=$SCSS_VENDOR$JSPREADSHEET_SCSS_FILE
+
+JSPREADSHEET_JS_FILE=jexcel.js
+JSPREADSHEET_NEW_JS_FILE=jspreadsheet.js
+JSPREADSHEET_JS_FILE_LOCATION=$JS_VENDOR$JSPREADSHEET_NEW_JS_FILE
+
+
+
+
+# Remove all vendor related files:
+rm -r ${SCSS_VENDOR}*
+rm -r ${JS_VENDOR}
+
+# Recreate vendor directory
+mkdir $JS_VENDOR
+echo "Old vendor assets have been removed."
+
+
+# STYLESHEETS:
+# Add JSuite vendor file
+if test -f "$JSUITES_CSS_FILE"; then
+  echo "$JSUITES_CSS_FILE already exists."
+else
+  # Fetch jsuite stylesheet
+  wget $JSUITES_CSS_URL
+  echo "$JSUITES_CSS_FILE has been created in $(pwd)"
+  # Move jsuite stylesheet to vendor as a scss file
+  mv $JSUITES_CSS_FILE $JSUITES_SCSS_FILE_LOCATION
+  echo "$JSUITES_SCSS_FILE has been placed in the scss vendor directory"
+  # Scope styles to jexcel_container class
+  sed -i '' '1s/^/.jexcel_container {\n/' $JSUITES_SCSS_FILE_LOCATION
+  sed -i '' '$a\
+  }' $JSUITES_SCSS_FILE_LOCATION
+
+  # Remove conflicting animation classes
+  # TODO: Improve below code to handle nested code blocks
+fi
+
+# Add JSpreadsheet vendor file
+if test -f "$JSPREADSHEET_CSS_FILE"; then
+  echo "$JSPREADSHEET_CSS_FILE already exists."
+else
+  # Fetch jspreadsheet stylesheet
+  wget $JSPREADSHEET_CSS_URL
+  echo "$JSPREADSHEET_CSS_FILE has been created in $(pwd)"
+  # Move jspreadsheet stylesheet to vendor as a scss file
+  mv $JSPREADSHEET_CSS_FILE $JSPREADSHEET_SCSS_FILE_LOCATION
+fi
+
+# Apply prettier to vendor files
+yarn prettier --write $SCSS_VENDOR
+
+# JAVASCRIPTS:
+if test -f "$JSUITES_JS_FILE"; then
+  echo "$JSUITES_JS_FILE already exists."
+else
+  wget $JSUITES_JS_URL
+  mv $JSUITES_JS_FILE $JSUITES_JS_FILE_LOCATION
+fi
+
+if test -f "$JSPREADSHEET_JS_FILE"; then
+  echo "$JSPREADSHEET_JS_FILE already exists."
+else
+  wget $JSPREADSHEET_JS_URL
+  mv $JSPREADSHEET_JS_FILE $JSPREADSHEET_JS_FILE_LOCATION
+fi

common/common.scss

@@ -1,6 +1,5 @@
 @import "vendor/jspreadsheet";
-@import "vendor/jspreadsheet-datatables";
-@import "vendor/jspreadsheet-theme";
 @import "vendor/jsuites";
+@import "theme/jspreadsheet-theme";
 @import "post/table-edit-decorator";
 @import "modal/insert-table-modal";

javascripts/discourse/api-initializers/table-editor.js

@@ -6,6 +6,7 @@ import { iconNode } from "discourse-common/lib/icon-library";
 import { create } from "virtual-dom";
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
+
 export default apiInitializer("0.11.1", (api) => {
   const site = api.container.lookup("site:main");
   const currentUser = api.getCurrentUser();

javascripts/discourse/components/spreadsheet-editor.js

@@ -7,6 +7,7 @@ import { popupAjaxError } from "discourse/lib/ajax-error";
 import I18n from "I18n";
 import { schedule } from "@ember/runloop";
 import { tracked } from "@glimmer/tracking";
+
 export default class SpreadsheetEditor extends GlimmerComponent {
   @tracked showEditReason = false;
   spreadsheet = null;

package.json

@@ -1,9 +1,13 @@
 {
   "name": "discourse-table-builder",
+  "description": "Create and edit markdown tables using a spreadsheet editor.",
   "version": "0.0.1",
   "repository": "https://github.com/keegangeorge/discourse-table-builder",
   "author": "Keegan George",
   "license": "GPL-2.0-or-later",
+  "scripts": {
+    "build": "bash ./build.bash"
+  },
   "devDependencies": {
     "eslint-config-discourse": "latest"
   }

scss/theme/jspreadsheet-theme.scss

@@ -27,6 +27,21 @@
   background-color: transparent;
 }
 
+table.jexcel > thead > tr > td {
+  border-top: 1px solid transparent;
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent;
+  border-bottom: 1px solid #000;
+  background-color: #fff;
+  padding: 10px;
+  font-weight: bold;
+}
+table.jexcel > tbody > tr > td {
+  padding: 8px;
+  border-right: 1px solid transparent;
+  border-left: 1px solid transparent;
+}
+
 table.jexcel {
   border-bottom: 1px solid var(--jexcel_border_color);
 }

scss/vendor/jspreadsheet-datatables.scss

@@ -1,85 +0,0 @@
-table.jexcel {
-  border-right: 1px solid transparent;
-}
-
-table.jexcel > thead {
-  background-color: #fff;
-}
-
-table.jexcel > thead > tr > td {
-  border-top: 1px solid transparent;
-  border-left: 1px solid transparent;
-  border-right: 1px solid transparent;
-  border-bottom: 1px solid #000;
-  background-color: #fff;
-  padding: 10px;
-  font-weight: bold;
-}
-
-table.jexcel > thead > tr > td.selected {
-  background-color: #eee;
-}
-
-table.jexcel > tbody > tr > td {
-  padding: 8px;
-  border-right: 1px solid transparent;
-  border-left: 1px solid transparent;
-}
-
-table.jexcel > tbody > tr > td:first-child {
-  background-color: #fff;
-}
-
-table.jexcel > tbody > tr.selected > td:first-child {
-  background-color: #eee;
-}
-
-.jexcel_toolbar {
-  background-color: transparent;
-  border: 0px;
-  border-bottom: 1px solid #ccc;
-  border-top: 1px solid #ccc;
-  margin-bottom: 0px;
-}
-
-.jexcel_pagination > div > div {
-  border: 1px solid transparent;
-  background-color: #fff;
-}
-
-.jexcel_page_selected {
-  background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%);
-  border: 1px solid #979797 !important;
-  font-weight: normal;
-  color: #333 !important;
-  border-radius: 2px;
-}
-
-/*.jexcel > div > table > tbody > tr,
-.jexcel > div > table > thead
-{
-    border-left:1px solid transparent;
-}
-.jexcel > div > table > tbody > tr > td
-{
-    padding:10px;
-    border-right:1px solid transparent;
-}
-.jexcel > div > table > tbody > td.edition
-{
-    padding:0px;
-    padding-left:4px;
-}
-.jexcel > div > table > tbody > tr > td:first-child
-{
-    background-color:#fff;
-    font-weight:bold;
-}
-.jexcel > div > table > tbody > tr.selected > td:first-child
-{
-    background-color:#eee;
-}
-.jexcel > div > table > thead > tr > td.selected
-{
-    background-color:#eee;
-}*/

scss/vendor/jspreadsheet.scss

@@ -410,6 +410,7 @@
   -khtml-user-drag: none;
   -moz-user-drag: none;
   -o-user-drag: none;
+  user-drag: none;
 }
 
 .jexcel_textarea {

scss/vendor/jsuites.scss

@@ -1,3 +1,4 @@
+.jexcel_container {
   /**
  * (c) jSuites Javascript Web Components
  *
@@ -602,7 +603,7 @@ div[data-before]:before {
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
-  flex-flow: row wrap;
+
     -webkit-flex-flow: row wrap;
     justify-content: space-between;
     align-items: center;
@@ -1145,6 +1146,9 @@ div[data-before]:before {
     box-sizing: border-box;
   }
 
+  .jdropdown-content:empty {
+  }
+
   .jdropdown-item {
     white-space: nowrap;
     text-align: left;
@@ -1468,6 +1472,9 @@ div[data-before]:before {
 
   /** List render **/
 
+  .jdropdown-list {
+  }
+
   .jdropdown-list .jdropdown-container {
     display: block;
   }
@@ -1714,120 +1721,6 @@ div[data-before]:before {
     border-top-color: transparent;
   }
 
-.jmodal {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  width: 60%;
-  height: 60%;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
-  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
-  -moz-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
-  border: 1px solid #ccc;
-  background-color: #fff;
-  transform: translate(-50%, -50%);
-  box-sizing: border-box;
-  padding-top: 50px !important;
-  z-index: 9002;
-  border-radius: 4px;
-}
-
-.jmodal:before {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  content: attr(title);
-  padding: 25px;
-  padding-bottom: 20px;
-  box-sizing: border-box;
-  font-size: 1.4em;
-  background-color: #fff;
-  border-radius: 8px 8px 0px 0px;
-}
-
-.jmodal_content {
-  padding: 22px;
-  overflow-y: auto;
-  max-height: 100%;
-  box-sizing: border-box;
-  height: -webkit-fill-available;
-
-  scrollbar-width: thin;
-  scrollbar-color: #333 transparent;
-}
-
-.jmodal_content::-webkit-scrollbar {
-  height: 12px;
-}
-
-.jmodal_content::-webkit-scrollbar {
-  width: 12px;
-}
-
-.jmodal_content::-webkit-scrollbar-track {
-  border: 1px solid #fff;
-  background: #eee;
-}
-
-.jmodal_content::-webkit-scrollbar-thumb {
-  border: 1px solid #fff;
-  background: #888;
-}
-
-.jmodal.no-title {
-  padding-top: initial !important;
-}
-
-.jmodal.no-title:before {
-  display: none;
-}
-
-.jmodal:after {
-  content: "";
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
-  position: absolute;
-  top: 0;
-  right: 0;
-  margin: 25px;
-  font-size: 24px;
-  width: 24px;
-  height: 24px;
-  cursor: pointer;
-  text-shadow: 0px 0px 5px #fff;
-}
-
-.jmodal_fullscreen {
-  width: 100% !important;
-  height: 100% !important;
-  top: 0px;
-  left: 0px;
-  transform: none;
-  border: 0px;
-  border-radius: 0px;
-}
-
-.jmodal_backdrop {
-  position: fixed;
-  top: 0px;
-  left: 0px;
-  min-width: 100%;
-  min-height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  border: 0px;
-  padding: 0px;
-  z-index: 8000;
-  display: none;
-
-  -webkit-touch-callout: none; /* iOS Safari */
-  -webkit-user-select: none; /* Safari */
-  -khtml-user-select: none; /* Konqueror HTML */
-  -moz-user-select: none; /* Firefox */
-  -ms-user-select: none; /* Internet Explorer/Edge */
-  user-select: none; /* Non-prefixed version, currently
-                                  supported by Chrome and Opera */
-}
-
   .jnotification {
     position: fixed;
     z-index: 10000;
@@ -1980,8 +1873,8 @@ div[data-before]:before {
     position: absolute;
     top: 0;
     display: none;
-  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
+    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
-    0 2px 4px -1px rgba(0, 0, 0, 0.2);
+      0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
     border-radius: 4px;
     background-color: #fff;
     padding: 4px;
@@ -2033,46 +1926,6 @@ div[data-before]:before {
     flex-wrap: wrap;
   }
 
-.jprogressbar {
-  cursor: pointer;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  box-sizing: border-box;
-  background: #fff;
-  -webkit-tap-highlight-color: transparent;
-  display: inline-block;
-  box-sizing: border-box;
-  cursor: pointer;
-  border: 1px solid #ccc;
-  position: relative;
-}
-
-.jprogressbar::before {
-  content: attr(data-value);
-  position: absolute;
-  margin: 5px;
-  margin-left: 10px;
-}
-
-.jprogressbar-header::placeholder {
-  color: #000;
-}
-
-.jprogressbar::focus {
-  outline: auto 5px -webkit-focus-ring-color;
-}
-
-.jprogressbar > div {
-  background-color: #eee;
-  background-color: red;
-  box-sizing: border-box;
-  height: 31px;
-}
-
   .jrating {
     display: flex;
   }
@@ -2092,357 +1945,6 @@ div[data-before]:before {
     background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='red'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
   }
 
-.jsearch {
-  position: relative;
-  display: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.jsearch_container {
-  position: absolute;
-  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.302),
-    0 2px 6px 2px rgba(60, 64, 67, 0.149);
-  border: none;
-  -webkit-border-radius: 4px;
-  border-radius: 4px;
-  width: 280px;
-  padding: 8px 0;
-
-  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  -webkit-transition: opacity 0.218s;
-  transition: opacity 0.218s;
-  background: #fff;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  cursor: pointer;
-  margin: 0;
-  min-width: 300px;
-  outline: none;
-  width: auto;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.jsearch_container:empty:after {
-  content: attr(data-placeholder);
-}
-
-.jsearch_container > div {
-  color: #333;
-  cursor: pointer;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: flex;
-  padding: 5px 10px;
-  user-select: none;
-  -webkit-align-items: center;
-  align-items: center;
-
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.jsearch_container > div:hover {
-  background-color: #e8eaed;
-}
-
-.jsearch_container > div > img {
-  width: 32px;
-  height: 32px;
-  user-select: none;
-  border-radius: 16px;
-  margin-right: 2px;
-}
-
-.jsearch_container > div > div {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin-left: 2px;
-  max-width: 300px;
-  white-space: nowrap;
-  user-select: none;
-}
-
-.jsearch_container .selected {
-  background-color: #e8eaed;
-}
-
-.jslider {
-  outline: none;
-}
-
-.jslider-focus {
-  width: 100% !important;
-  height: 100% !important;
-}
-
-.jslider-focus img {
-  display: none;
-}
-
-.jslider img {
-  width: 100px;
-}
-
-.jslider-left::before {
-  position: fixed;
-  left: 15px;
-  top: 50%;
-  content: "arrow_back_ios";
-  color: #fff;
-  width: 30px;
-  height: 30px;
-  font-family: "Material Icons";
-  font-size: 30px;
-  /* before it was 0px 0px 0px #000 */
-  text-shadow: 0px 0px 6px rgb(56, 56, 56);
-  text-align: center;
-  cursor: pointer;
-}
-
-.jslider-right::after {
-  position: fixed;
-  right: 15px;
-  top: 50%;
-  content: "arrow_forward_ios";
-  color: #fff;
-  width: 30px;
-  height: 30px;
-  font-family: "Material Icons";
-  font-size: 30px;
-  /* before it was 0px 0px 0px #000 */
-  text-shadow: 0px 0px 6px rgb(56, 56, 56);
-  text-align: center;
-  cursor: pointer;
-}
-
-.jslider-close {
-  width: 24px;
-  height: 24px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
-  position: fixed;
-  top: 15px;
-  right: 15px;
-  cursor: pointer;
-  z-index: 3000;
-
-  display: block !important;
-}
-
-.jslider-counter {
-  height: 24px;
-  background-color: transparent;
-  position: fixed;
-  left: 50%;
-  transform: translateX(-50%);
-  bottom: 15px;
-  cursor: pointer;
-  z-index: 3000;
-
-  display: flex;
-  display: -webkit-flex;
-  -webkit-justify-content: center;
-  -webkit-align-items: center;
-  -webkit-flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  flex-direction: row;
-}
-
-.jslider-caption {
-  position: fixed;
-  max-width: 90vw;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  top: 15px;
-  left: 15px;
-  z-index: 3000;
-  color: #fff;
-  font-size: 1rem;
-
-  display: block !important;
-}
-
-.jslider-counter div {
-  width: 10px;
-  height: 10px;
-  background: #fff;
-  border-radius: 50%;
-  margin: 0px 5px;
-
-  display: block !important;
-}
-
-.jslider-counter .jslider-counter-focus {
-  background-color: cornflowerblue;
-  pointer-events: none;
-}
-
-.jslider-focus {
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  min-height: 100%;
-  max-height: 100%;
-  z-index: 2000;
-  margin: 0px;
-  box-sizing: border-box;
-
-  background-color: rgba(0, 0, 0, 0.8);
-  -webkit-transition-duration: 0.05s;
-  transition-duration: 0.05s;
-  display: flex;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-
-  align-items: center;
-}
-
-.jslider-focus img {
-  width: 50vw;
-  height: auto;
-  box-sizing: border-box;
-  margin: 0 auto;
-  vertical-align: middle;
-  display: none;
-}
-
-.jslider-focus img.jslider-vertical {
-  width: auto;
-  /* before it was 50vh */
-  height: 80vh;
-}
-
-@media only screen and (max-width: 576px) {
-  .jslider-focus img.jslider-vertical {
-    width: 99vw !important;
-    height: auto !important;
-  }
-
-  .jslider-focus img {
-    width: 100vw !important;
-    height: auto !important;
-  }
-}
-
-.jslider-grid {
-  display: -ms-grid;
-  display: grid;
-  grid-gap: 1px;
-  position: relative;
-}
-
-.jslider-grid[data-number="2"] {
-  -ms-grid-columns: 1fr 50%;
-  grid-template-columns: 1fr 50%;
-}
-
-.jslider-grid[data-number="3"] {
-  -ms-grid-columns: 1fr 33%;
-  grid-template-columns: 1fr 33%;
-}
-
-.jslider-grid[data-number="4"] {
-  -ms-grid-columns: 1fr 25%;
-  grid-template-columns: 1fr 25%;
-}
-
-.jslider-grid img {
-  display: none;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.jslider-grid[data-total]:after {
-  content: attr(data-total) "+";
-  font-size: 1.5em;
-  position: absolute;
-  color: #fff;
-  right: 15px;
-  bottom: 6px;
-}
-
-.jslider-grid img:first-child {
-  -ms-grid-column: 1;
-  -ms-grid-row: 1;
-  grid-column: 1;
-  grid-row: 1;
-  display: block;
-}
-
-.jslider-grid[data-number="2"] img:nth-child(2) {
-  -ms-grid-column: 2;
-  -ms-grid-row: 1;
-  grid-column: 2;
-  grid-row: 1;
-  display: block;
-}
-
-.jslider-grid[data-number="3"] img:first-child {
-  -ms-grid-column: 1 / 2;
-  -ms-grid-row: 1 / 4;
-  grid-column: 1 / 2;
-  grid-row: 1 / 4;
-}
-
-.jslider-grid[data-number="3"] img:nth-child(2) {
-  -ms-grid-column: 2;
-  -ms-grid-row: 1;
-  grid-column: 2;
-  grid-row: 1;
-  display: block;
-}
-
-.jslider-grid[data-number="3"] img:nth-child(3) {
-  -ms-grid-column: 2;
-  -ms-grid-row: 2;
-  grid-column: 2;
-  grid-row: 2;
-  display: block;
-}
-
-.jslider-grid[data-number="4"] img:first-child {
-  -ms-grid-column: 1 / 2;
-  -ms-grid-row: 1 / 4;
-  grid-column: 1 / 2;
-  grid-row: 1 / 4;
-}
-
-.jslider-grid[data-number="4"] img:nth-child(2) {
-  -ms-grid-column: 2;
-  -ms-grid-row: 1;
-  grid-column: 2;
-  grid-row: 1;
-  display: block;
-}
-
-.jslider-grid[data-number="4"] img:nth-child(3) {
-  -ms-grid-column: 2;
-  -ms-grid-row: 2;
-  grid-column: 2;
-  grid-row: 2;
-  display: block;
-}
-
-.jslider-grid[data-number="4"] img:nth-child(4) {
-  -ms-grid-column: 2;
-  -ms-grid-row: 3;
-  grid-column: 2;
-  grid-row: 3;
-  display: block;
-}
-
   .jtabs {
     max-width: 100vw;
     position: relative;
@@ -2584,76 +2086,11 @@ div[data-before]:before {
     background-color: rgba(194, 197, 188, 0.884);
   }
 
-.jtags {
-  display: flex;
-  flex-wrap: wrap;
-  -ms-flex-direction: row;
-  -webkit-flex-direction: row;
-  flex-direction: row;
-  -ms-flex-pack: flex-start;
-  -webkit-justify-content: space-between;
-  justify-content: flex-start;
-  padding: 2px;
-  border: 1px solid #ccc;
-}
-
-.jtags.jtags-empty:not(.jtags-focus)::before {
-  position: absolute;
-  margin: 5px;
-  color: #ccc;
-  content: attr(data-placeholder);
-}
-
-.jtags > div {
-  padding: 3px;
-  padding-left: 10px;
-  padding-right: 22px;
-  position: relative;
-  border-radius: 1px;
-  margin: 2px;
-  display: block;
-  outline: none;
-}
-
-.jtags > div:empty:before {
-  content: " ";
-  white-space: pre;
-}
-
-.jtags > div::after {
-  content: "x";
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  width: 12px;
-  height: 12px;
-  cursor: pointer;
-  font-size: 11px;
-  display: none;
-}
-
-.jtags_label {
-  background-color: #eeeeee !important;
-}
-
-.jtags_label::after {
-  display: inline-block !important;
-}
-
-.jtags_error::after {
-  color: #fff !important;
-}
-
-.jtags_error {
-  background-color: #d93025 !important;
-  color: #fff;
-}
-
   .jtoolbar-container {
     border-radius: 2px;
     margin-bottom: 5px;
-  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
+    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
-    0 2px 4px -1px rgba(0, 0, 0, 0.2);
+      0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
     display: inline-flex !important;
   }
 
@@ -2827,8 +2264,8 @@ div[data-before]:before {
   .jtoolbar-floating {
     position: absolute;
     display: none;
-  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
+    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
-    0 2px 4px -1px rgba(0, 0, 0, 0.2);
+      0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
     border-radius: 4px;
     background-color: #fff;
     padding: 4px;
@@ -2845,3 +2282,4 @@ div[data-before]:before {
     display: flex;
     flex-wrap: wrap;
   }
+}