fix: build init error + update deps + markdown editor user settings (wip)

server/graph/resolvers/user.mjs

@@ -89,6 +89,18 @@ export default {
       return WIKI.config.userDefaults
     },
 
+    async userEditorSettings (obj, args, context) {
+      if (!context.req.user || context.req.user.id === WIKI.auth.guest.id) {
+        throw new WIKI.Error.AuthRequired()
+      }
+
+      const config = await WIKI.db.knex('userEditorSettings').first('config').where({
+        id: context.req.user.id,
+        editor: args.editor
+      })
+      return config ?? {}
+    },
+
     async lastLogins (obj, args, context, info) {
       if (!WIKI.auth.checkAccess(context.req.user, ['read:dashboard', 'read:users', 'write:users', 'manage:users'])) {
         throw new Error('ERR_FORBIDDEN')

server/graph/schemas/user.graphql

@@ -18,6 +18,10 @@ extend type Query {
 
   userDefaults: UserDefaults
 
+  userEditorSettings(
+    editor: String!
+  ): JSON
+
   lastLogins: [UserLastLogin]
 
   userPermissions: [String]

server/locales/en.json

@@ -1624,6 +1624,11 @@
   "editor.select.customView": "or create a custom view?",
   "editor.select.title": "Which editor do you want to use for this page?",
   "editor.settings": "Editor Settings",
+  "editor.settings.markdown": "Markdown Editor Settings",
+  "editor.settings.markdownFontSize": "Editor Font Size",
+  "editor.settings.markdownFontSizeHint": "The font size to use in the editor.",
+  "editor.settings.markdownPreviewShown": "Display Render Preview",
+  "editor.settings.markdownPreviewShownHint": "Whether to display a preview of the rendered content.",
   "editor.tableEditor.title": "Table Editor",
   "editor.togglePreviewPane": "Toggle Preview Pane",
   "editor.toggleScrollSync": "Toggle Scroll Sync",

server/package.json

@@ -36,22 +36,22 @@
     "node": ">=18.0"
   },
   "dependencies": {
-    "@apollo/server": "4.9.4",
-    "@azure/storage-blob": "12.16.0",
+    "@apollo/server": "4.9.5",
+    "@azure/storage-blob": "12.17.0",
     "@exlinc/keycloak-passport": "1.0.2",
     "@graphql-tools/schema": "10.0.0",
-    "@graphql-tools/utils": "10.0.7",
+    "@graphql-tools/utils": "10.0.8",
     "@hexagon/base64": "1.1.28",
-    "@joplin/turndown-plugin-gfm": "1.0.50",
+    "@joplin/turndown-plugin-gfm": "1.0.53",
     "@node-saml/passport-saml": "4.0.4",
     "@root/csr": "0.8.1",
     "@root/keypairs": "0.10.3",
     "@root/pem": "1.0.4",
-    "@simplewebauthn/server": "8.3.2",
-    "@vue-email/compiler": "0.8.0-beta.4",
+    "@simplewebauthn/server": "8.3.5",
+    "@vue-email/compiler": "0.8.0-beta.5",
     "acme": "3.0.3",
     "akismet-api": "6.0.0",
-    "aws-sdk": "2.1478.0",
+    "aws-sdk": "2.1499.0",
     "bcryptjs": "2.4.3",
     "chalk": "5.3.0",
     "cheerio": "1.0.0-rc.12",
@@ -60,7 +60,7 @@
     "clean-css": "5.3.2",
     "command-exists": "1.2.9",
     "compression": "1.7.4",
-    "connect-session-knex": "3.0.1",
+    "connect-session-knex": "4.0.0",
     "cookie-parser": "1.4.6",
     "cors": "2.8.5",
     "cron-parser": "4.9.0",
@@ -76,7 +76,7 @@
     "express": "4.18.2",
     "express-brute": "1.0.1",
     "express-session": "1.17.3",
-    "file-type": "18.5.0",
+    "file-type": "18.7.0",
     "filesize": "10.1.0",
     "fs-extra": "11.1.1",
     "getos": "3.2.1",
@@ -98,7 +98,7 @@
     "knex": "3.0.1",
     "lodash": "4.17.21",
     "lodash-es": "4.17.21",
-    "luxon": "3.4.3",
+    "luxon": "3.4.4",
     "markdown-it": "13.0.2",
     "markdown-it-abbr": "1.0.4",
     "markdown-it-attrs": "4.1.6",
@@ -117,14 +117,14 @@
     "mime-types": "2.1.35",
     "ms": "2.1.3",
     "multer": "1.4.5-lts.1",
-    "nanoid": "5.0.2",
+    "nanoid": "5.0.3",
     "node-2fa": "2.0.3",
     "node-cache": "5.1.2",
     "nodemailer": "6.9.7",
     "objection": "3.1.2",
-    "octokit": "3.1.1",
+    "octokit": "3.1.2",
     "passport": "0.6.0",
-    "passport-auth0": "1.4.3",
+    "passport-auth0": "1.4.4",
     "passport-azure-ad": "4.3.5",
     "passport-cas": "0.1.1",
     "passport-discord": "0.1.4",
@@ -148,10 +148,10 @@
     "pg-pubsub": "0.8.1",
     "pg-query-stream": "4.5.3",
     "pg-tsquery": "8.4.1",
-    "poolifier": "2.7.5",
+    "poolifier": "3.0.5",
     "prom-client": "15.0.0",
-    "punycode": "2.3.0",
-    "puppeteer-core": "21.4.0",
+    "punycode": "2.3.1",
+    "puppeteer-core": "21.5.2",
     "qr-image": "3.2.0",
     "remove-markdown": "0.5.0",
     "safe-regex": "2.1.1",
@@ -166,19 +166,19 @@
     "tar-fs": "3.0.4",
     "turndown": "7.1.2",
     "twemoji": "14.0.2",
-    "ufo": "1.3.1",
+    "ufo": "1.3.2",
     "uslug": "1.0.4",
     "uuid": "9.0.1",
     "validate.js": "0.13.1",
-    "vue": "3.3.7",
+    "vue": "3.3.8",
     "xss": "1.0.14",
     "yargs": "17.7.2"
   },
   "devDependencies": {
-    "eslint": "8.52.0",
+    "eslint": "8.54.0",
     "eslint-config-requarks": "1.0.7",
     "eslint-config-standard": "17.1.0",
-    "eslint-plugin-import": "2.28.1",
+    "eslint-plugin-import": "2.29.0",
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-promise": "6.1.1",
     "nodemon": "3.0.1"

ux/package.json

@@ -7,17 +7,14 @@
   "private": true,
   "scripts": {
     "dev": "quasar dev",
-    "build": "quasar build",
-    "lint": "eslint --ext .js,.vue ./",
-    "ncu": "ncu -i -x codemirror,codemirror-asciidoc",
-    "ncu-u": "ncu -u -x codemirror,codemirror-asciidoc"
+    "build": "NODE_OPTIONS=--max-old-space-size=8192 quasar build"
   },
   "dependencies": {
-    "@apollo/client": "3.8.6",
-    "@lezer/common": "1.1.0",
+    "@apollo/client": "3.8.7",
+    "@lezer/common": "1.1.1",
     "@mdi/font": "7.3.67",
-    "@quasar/extras": "1.16.7",
-    "@simplewebauthn/browser": "8.3.1",
+    "@quasar/extras": "1.16.8",
+    "@simplewebauthn/browser": "8.3.4",
     "@tiptap/core": "2.1.12",
     "@tiptap/extension-code-block": "2.1.12",
     "@tiptap/extension-code-block-lowlight": "2.1.12",
@@ -43,8 +40,8 @@
     "@tiptap/pm": "2.1.12",
     "@tiptap/starter-kit": "2.1.12",
     "@tiptap/vue-3": "2.1.12",
-    "@vue/repl": "2.6.1",
-    "apollo-upload-client": "17.0.0",
+    "@vue/repl": "2.8.0",
+    "apollo-upload-client": "18.0.1",
     "browser-fs-access": "0.35.0",
     "clipboard": "2.0.11",
     "codemirror": "5.65.11",
@@ -52,16 +49,16 @@
     "dependency-graph": "0.11.0",
     "filesize": "10.1.0",
     "filesize-parser": "1.5.0",
-    "fuse.js": "6.6.2",
+    "fuse.js": "7.0.0",
     "graphql": "16.6.0",
     "graphql-tag": "2.12.6",
     "highlight.js": "11.9.0",
     "js-cookie": "3.0.5",
-    "jwt-decode": "3.1.2",
+    "jwt-decode": "4.0.0",
     "katex": "0.16.9",
     "lodash-es": "4.17.21",
     "lowlight": "3.1.0",
-    "luxon": "3.4.3",
+    "luxon": "3.4.4",
     "markdown-it": "13.0.2",
     "markdown-it-abbr": "1.0.4",
     "markdown-it-attrs": "4.1.6",
@@ -87,20 +84,21 @@
     "prosemirror-schema-list": "1.3.0",
     "prosemirror-state": "1.4.3",
     "prosemirror-transform": "1.8.0",
-    "prosemirror-view": "1.32.1",
+    "prosemirror-view": "1.32.4",
     "pug": "3.0.2",
-    "quasar": "2.13.0",
+    "quasar": "2.14.0",
     "slugify": "1.6.6",
     "socket.io-client": "4.7.2",
-    "sortablejs-vue3": "1.2.9",
+    "sortablejs": "1.15.0",
+    "sortablejs-vue3": "1.2.11",
     "tabulator-tables": "5.5.2",
     "tippy.js": "6.3.7",
     "twemoji": "14.0.2",
-    "typescript": "5.2.2",
+    "typescript": "5.3.2",
     "uuid": "9.0.1",
-    "v-network-graph": "0.9.10",
-    "vue": "3.3.6",
-    "vue-i18n": "9.5.0",
+    "v-network-graph": "0.9.13",
+    "vue": "3.3.8",
+    "vue-i18n": "9.7.1",
     "vue-router": "4.2.5",
     "vue3-otp-input": "0.4.1",
     "vuedraggable": "4.1.0",
@@ -108,18 +106,18 @@
     "zxcvbn": "4.4.2"
   },
   "devDependencies": {
-    "@intlify/unplugin-vue-i18n": "1.4.0",
-    "@quasar/app-vite": "1.6.2",
-    "@types/lodash": "4.14.200",
-    "@vue/language-plugin-pug": "1.8.19",
+    "@intlify/unplugin-vue-i18n": "1.5.0",
+    "@quasar/app-vite": "1.7.0",
+    "@types/lodash": "4.14.202",
+    "@vue/language-plugin-pug": "1.8.22",
     "autoprefixer": "10.4.16",
     "browserlist": "latest",
-    "eslint": "8.52.0",
+    "eslint": "8.54.0",
     "eslint-config-standard": "17.1.0",
-    "eslint-plugin-import": "2.28.1",
-    "eslint-plugin-n": "16.2.0",
+    "eslint-plugin-import": "2.29.0",
+    "eslint-plugin-n": "16.3.1",
     "eslint-plugin-promise": "6.1.1",
-    "eslint-plugin-vue": "9.17.0"
+    "eslint-plugin-vue": "9.18.1"
   },
   "engines": {
     "node": ">= 18.0",

ux/quasar.config.js

@@ -98,8 +98,8 @@ module.exports = configure(function (ctx) {
               manualChunks (id) {
                 if (id.includes('lodash')) {
                   return 'lodash'
-                } else if (id.includes('quasar')) {
-                  return 'quasar'
+                // } else if (id.includes('quasar')) {
+                //   return 'quasar'
                 } else if (id.includes('pages/Admin')) {
                   return 'admin'
                 } else if (id.includes('pages/Profile')) {
@@ -132,6 +132,7 @@ module.exports = configure(function (ctx) {
           include: path.resolve(__dirname, './src/i18n/locales/**')
         }]
       ]
+      // sourcemap: true
     },
 
     // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer

ux/src/boot/apollo.js

@@ -2,7 +2,7 @@ import { boot } from 'quasar/wrappers'
 import { ApolloClient, HttpLink, InMemoryCache, from, split } from '@apollo/client/core'
 import { setContext } from '@apollo/client/link/context'
 import { BatchHttpLink } from '@apollo/client/link/batch-http'
-import { createUploadLink } from 'apollo-upload-client'
+import createUploadLink from 'apollo-upload-client/createUploadLink.mjs'
 
 import { useUserStore } from 'src/stores/user'
 

ux/src/components/EditorMarkdown.vue

@@ -9,6 +9,7 @@
         icon='mdi-link-variant-plus'
         padding='sm sm'
         flat
+        @click='notImplemented'
         )
         q-tooltip(anchor='center right' self='center left') {{ t('editor.markup.insertLink') }}
       q-btn(
@@ -37,6 +38,8 @@
                 q-item-label From Clipboard...
             q-item(
               clickable
+              @click='notImplemented'
+              v-close-popup
               )
               q-item-section(side)
                 q-icon(name='las la-cloud-download-alt', color='blue')
@@ -47,6 +50,7 @@
         icon='mdi-code-json'
         padding='sm sm'
         flat
+        @click='notImplemented'
         )
         q-tooltip(anchor='center right' self='center left') {{ t('editor.markup.insertCodeBlock') }}
       q-btn(
@@ -60,29 +64,34 @@
         icon='mdi-tab-plus'
         padding='sm sm'
         flat
+        @click='notImplemented'
         )
         q-tooltip(anchor='center right' self='center left') {{ t('editor.markup.insertTabset') }}
       q-btn(
         icon='mdi-toy-brick-plus'
         padding='sm sm'
         flat
+        @click='notImplemented'
         )
         q-tooltip(anchor='center right' self='center left') {{ t('editor.markup.insertBlock') }}
       q-btn(
         icon='mdi-chart-multiline'
         padding='sm sm'
         flat
+        @click='notImplemented'
         )
         q-tooltip(anchor='center right' self='center left') {{ t('editor.markup.insertDiagram') }}
       q-btn(
         icon='mdi-book-plus'
         padding='sm sm'
         flat
+        @click='notImplemented'
         )
         q-tooltip(anchor='center right' self='center left') {{ t('editor.markup.insertFootnote') }}
       q-btn(
         icon='mdi-cookie-plus'
         padding='sm sm'
+        @click='notImplemented'
         flat
         )
         q-tooltip(anchor='center right' self='center left') {{ t('editor.markup.insertEmoji') }}
@@ -741,6 +750,13 @@ onBeforeUnmount(() => {
     editor.dispose()
   }
 })
+
+function notImplemented () {
+  $q.notify({
+    type: 'negative',
+    message: 'Not implemented'
+  })
+}
 </script>
 
 <style lang="scss">

ux/src/components/EditorMarkdownUserSettingsOverlay.vue

@@ -50,22 +50,22 @@ q-layout(view='hHh lpR fFf', container)
         q-item(tag='label')
           blueprint-icon(icon='enter-key')
           q-item-section
-            q-item-label {{t(`editor.settings.previewShown`)}}
-            q-item-label(caption) {{t(`editor.settings.previewShownHint`)}}
+            q-item-label {{t(`editor.settings.markdownPreviewShown`)}}
+            q-item-label(caption) {{t(`editor.settings.markdownPreviewShownHint`)}}
           q-item-section(avatar)
             q-toggle(
               v-model='state.config.previewShown'
               color='primary'
               checked-icon='las la-check'
               unchecked-icon='las la-times'
-              :aria-label='t(`editor.settings.previewShown`)'
+              :aria-label='t(`editor.settings.markdownPreviewShown`)'
               )
         q-separator.q-my-sm(inset)
         q-item
           blueprint-icon(icon='width')
           q-item-section
-            q-item-label {{t(`editor.settings.fontSize`)}}
-            q-item-label(caption) {{t(`editor.settings.fontSizeHint`)}}
+            q-item-label {{t(`editor.settings.markdownFontSize`)}}
+            q-item-label(caption) {{t(`editor.settings.markdownFontSizeHint`)}}
           q-item-section(side)
             q-input(
               type='number'
@@ -75,7 +75,7 @@ q-layout(view='hHh lpR fFf', container)
               outlined
               v-model='state.config.fontSize'
               dense
-              :aria-label='t(`editor.settings.fontSize`)'
+              :aria-label='t(`editor.settings.markdownFontSize`)'
               )
 
       q-inner-loading(:showing='state.loading > 0')
@@ -129,14 +129,15 @@ async function load () {
   try {
     const resp = await APOLLO_CLIENT.query({
       query: gql`
-        query loadEditorUserSettings (
-          $editor: String!
-        ) {
-        editorUserSettings (editor: "markdown")
-      }`,
+        query loadEditorUserSettings {
+          userEditorSettings (editor: "markdown")
+        }
+      `,
       fetchPolicy: 'network-only'
     })
-    state.config = cloneDeep(resp?.data?.editorUserSettings)
+    const respConf = cloneDeep(resp?.data?.userEditorSettings)
+    state.config.previewShown = respConf.previewShown ?? true
+    state.config.fontSize = respConf.fontSize ?? 16
   } catch (err) {
     $q.notify({
       type: 'negative',
@@ -155,7 +156,7 @@ async function save () {
         mutation saveEditorUserSettings (
           $config: JSON!
           ) {
-          saveEditorUserSettings (
+          saveUserEditorSettings (
             editor: "markdown"
             config: $config
             ) {
@@ -171,14 +172,14 @@ async function save () {
         config: state.config
       }
     })
-    if (respRaw?.data?.saveEditorUserSettings?.operation?.succeeded) {
+    if (respRaw?.data?.saveUserEditorSettings?.operation?.succeeded) {
       $q.notify({
         type: 'positive',
         message: t('admin.editors.markdown.saveSuccess')
       })
       close()
     } else {
-      throw new Error(respRaw?.data?.saveEditorUserSettings?.operation?.message || 'An unexpected error occured.')
+      throw new Error(respRaw?.data?.saveUserEditorSettings?.operation?.message || 'An unexpected error occured.')
     }
   } catch (err) {
     $q.notify({

ux/src/components/FileManager.vue

@@ -327,7 +327,7 @@ import { DateTime } from 'luxon'
 import { cloneDeep, dropRight, find, findKey, initial, last, nth } from 'lodash-es'
 import { useRoute, useRouter } from 'vue-router'
 import gql from 'graphql-tag'
-import Fuse from 'fuse.js/dist/fuse.basic.esm'
+import Fuse from 'fuse.js/basic'
 
 import NewMenu from './PageNewMenu.vue'
 import Tree from './TreeNav.vue'

ux/src/components/PageNewMenu.vue

@@ -8,7 +8,7 @@ q-menu.translucent-menu(
     q-item(
       clickable
       @click='create(`wysiwyg`)'
-      v-if='siteStore.editors.wysiwyg'
+      v-if='siteStore.editors.wysiwyg && flagsStore.experimental'
       )
       blueprint-icon(icon='google-presentation')
       q-item-section.q-pr-sm New Page

ux/src/stores/user.js

 import { defineStore } from 'pinia'
-import jwtDecode from 'jwt-decode'
+import { jwtDecode } from 'jwt-decode'
 import Cookies from 'js-cookie'
 import gql from 'graphql-tag'
 import { DateTime } from 'luxon'