update deps + fix Editor background on scroll

assets/style.css

@@ -57,11 +57,11 @@ li {
   padding: 15px;
 }
 
-.editor .content {
+.editor .ProseMirror {
   background-color: #f7f7f7;
 }
 
-.theme--dark .editor .content {
+.theme--dark .editor .ProseMirror {
   background-color: #292929;
 }
 

components/Editor.vue

@@ -182,10 +182,6 @@ export default {
   margin-top: 4px;
   padding-top: 12px;
   padding-bottom: 22px;
-  overflow-y: auto;
-  scrollbar-width: thin;
-  scrollbar-color: #FF4500 transparent;
-  scroll-behavior: smooth;
   font-family: sans-serif;
   font-size: 1.1em;
 
@@ -231,38 +227,19 @@ export default {
     // position: absolute;
   }
 
-  .focused .ProseMirror::after {
-    width: 100%;
-  }
-  .ProseMirror {
-    padding: 15px;
-    outline: 0;
-    &::before {
-      bottom: 0px;
-      content: "";
-      left: 0;
-      position: absolute;
-      transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-      width: 100%;
-      border-width: thin 0 0 0;
-      border-style: solid;
-      height: 0px;
-      border-color: rgba(255, 255, 255, 0.7);
-    }
+  // .focused .::after {
+  //   width: 100%;
+  // }
 
-    &::after {
-      bottom: 0px;
-      content: "";
-      left: 0;
-      position: absolute;
-      height: 0px;
-      transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-      width: 100%;
-      border-width: 2px 0 0 0;
-      border-style: solid;
-      border-color: #FF4500;
-      transform: scaleX(0);
-    }
+  .ProseMirror {
+    padding: 5px 15px 0px 15px;
+    outline: 0;
+    min-height: 100px;
+    max-height: 350px;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: #FF4500 transparent;
+    overflow-y: auto;
   }
 }
 

nuxt.config.js

@@ -30,7 +30,7 @@ module.exports = {
   /*
    ** Customize the progress-bar component
    */
-  loading:  '~/components/Loading.vue',
+  loading: '~/components/Loading.vue',
   /*
    ** Plugins to load before mounting the App
    */
@@ -66,7 +66,7 @@ module.exports = {
       if (config.status === 'READY') {
         try {
           const Event = require('./server/api/models/event')
-          const events = await Event.findAll({where: { is_visible: true }})
+          const events = await Event.findAll({ where: { is_visible: true } })
           return events.map(e => `/event/${e.slug}`)
         } catch (e) {
           return []
@@ -134,6 +134,18 @@ module.exports = {
     defaultAssets: false
   },
   build: {
+    extend(config, { isDev, isClient }) {
+      // ..
+      config.module.rules.push({
+        test: /\.mjs$/,
+        include: /node_modules/,
+        type: "javascript/auto"
+      })
+      // Sets webpack's mode to development if `isDev` is true.
+      if (isDev) {
+        config.mode = 'development'
+      }
+    },
     corejs: 3,
     cache: true,
     hardSource: !isDev,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gancio",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "A shared agenda for local communities",
   "author": "lesion",
   "scripts": {
@@ -45,7 +45,7 @@
     "cors": "^2.8.5",
     "dayjs": "^1.11.5",
     "dompurify": "^2.3.10",
-    "email-templates": "^8.0.9",
+    "email-templates": "^10.0.1",
     "express": "^4.18.1",
     "express-oauth-server": "lesion/express-oauth-server#master",
     "http-signature": "^1.3.6",
@@ -64,8 +64,8 @@
     "multer": "^1.4.5-lts.1",
     "mysql2": "^2.3.3",
     "nuxt-edge": "2.16.0-27616340.013f051b",
-    "pg": "^8.6.0",
-    "sequelize": "^6.21.3",
+    "pg": "^8.8.0",
+    "sequelize": "^6.21.4",
     "sequelize-slugify": "^1.6.1",
     "sharp": "^0.27.2",
     "sqlite3": "^5.0.11",
@@ -73,9 +73,7 @@
     "tiptap-extensions": "^1.35.0",
     "umzug": "^2.3.0",
     "v-calendar": "^2.4.1",
-    "vue": "2.7.8",
     "vue-i18n": "^8.26.7",
-    "vue-template-compiler": "2.7.8",
     "vuetify": "2.6.9",
     "winston": "^3.8.1",
     "winston-daily-rotate-file": "^4.7.1",
@@ -83,7 +81,7 @@
   },
   "devDependencies": {
     "@nuxtjs/vuetify": "^1.12.3",
-    "jest": "^28.1.3",
+    "jest": "^29.0.0",
     "prettier": "^2.7.1",
     "pug": "^3.0.2",
     "pug-plain-loader": "^1.1.0",

pages/place/_place.vue

@@ -1,11 +1,13 @@
 <template>
   <v-container class='px-0' fluid>
-    <h1 class='d-block text-h4 font-weight-black text-center text-uppercase mt-10 mx-auto w-100 text-underline'><u>{{place.name}}</u></h1>
-    <span class="d-block text-subtitle text-center w-100 mb-14">{{place.address}}</span>
+    <h1 class='d-block text-h4 font-weight-black text-center text-uppercase mt-10 mx-auto w-100 text-underline'>
+      <u>{{ place.name }}</u>
+    </h1>
+    <span class="d-block text-subtitle text-center w-100 mb-14">{{ place.address }}</span>
 
     <!-- Events -->
     <div class="mb-2 mt-1 pl-1 pl-sm-2" id="events">
-      <Event :event='event' v-for='(event, idx) in events' :lazy='idx>2' :key='event.id'></Event>
+      <Event :event='event' v-for='(event, idx) in events' :lazy='idx > 2' :key='event.id'></Event>
     </div>
   </v-container>
 </template>
@@ -17,7 +19,7 @@ import Event from '@/components/Event'
 export default {
   name: 'Place',
   components: { Event },
-  head () {
+  head() {
     const title = `${this.settings.title} - ${this.place.name}`
     return {
       title,
@@ -28,7 +30,7 @@ export default {
     }
   },
   computed: mapState(['settings']),
-  asyncData ({ $axios, params, error }) {
+  asyncData({ $axios, params, error }) {
     try {
       const place = params.place
       return $axios.$get(`/place/${place}`)