WIP: Add bash script to handle vendor assets

.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",
-    "jspreadsheet": "assets/jspreadsheet.js"
+    "jsuites": "assets/vendor/jsuites.js",
+    "jspreadsheet": "assets/vendor/jspreadsheet.js"
   },
   "modifiers": {
     "svg_icons": [

build.bash

@@ -0,0 +1,96 @@
+#!/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
+  # TODO: Remove anything animation related
+  # 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
+  # sed -i '' '/.fade-in {/,/}/d' $JSUITES_SCSS_FILE_LOCATION
+  # sed -i '' '/.fade-out {/,/}/d' $JSUITES_SCSS_FILE_LOCATION
+
+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
+
+
+
+# sed '/^server {/,/^    }/d' file

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/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;

javascripts/discourse/templates/components/spreadsheet-editor.hbs

@@ -63,4 +63,4 @@
       </ul>
     </DPopover>
   </div>
-</div>
+</div>

javascripts/discourse/templates/modal/insert-table-modal.hbs

@@ -4,4 +4,4 @@
   @tableId={{this.tableId}}
   @triggerModalClose={{action "closeEditModal"}}
   @toolbarEvent={{this.toolbarEvent}}
-/>
+/>

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,4 +1,5 @@
-/**
+.jexcel_container {
+  /**
  * (c) jSuites Javascript Web Components
  *
  * Website: https://jsuites.net
@@ -8,14 +9,13 @@
  *
  */
 
-:root {
-  --button-color: #298ba8;
-  --active-color: #007aff;
-  --safe-area-top: env(safe-area-inset-top);
-  --safe-area-bottom: env(safe-area-inset-bottom);
-}
+  :root {
+    --button-color: #298ba8;
+    --active-color: #007aff;
+    --safe-area-top: env(safe-area-inset-top);
+    --safe-area-bottom: env(safe-area-inset-bottom);
+  }
 
-.jexcel_container {
   [data-visible="false"] {
     display: none;
   }
@@ -162,6 +162,7 @@
     margin: 10px;
 
     display: block;
+    animation: fadeIn 0.5s;
     pointer-events: none;
   }
 
@@ -169,6 +170,24 @@
     display: none;
   }
 
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  /** Animations **/
+  .fade-in {
+    animation: fade-in 2s forwards;
+  }
+
+  .fade-out {
+    animation: fade-out 1s forwards;
+  }
+
   .slide-left-in {
     position: relative;
     animation: slide-left-in 0.4s forwards;
@@ -213,6 +232,43 @@
     animation: spin 2s infinite linear;
   }
 
+  /** Fadein and Fadeout **/
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 100;
+    }
+  }
+
+  @-webkit-keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 100;
+    }
+  }
+
+  @keyframes fade-out {
+    0% {
+      opacity: 100;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @-webkit-keyframes fade-out {
+    0% {
+      opacity: 100;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
   /** Keyframes Left to Right **/
   @keyframes slide-left-in {
     0% {