fix: convert page - handle tabsets

Author: NGPixel

package.json

@@ -56,7 +56,7 @@
     "bluebird": "3.7.2",
     "body-parser": "1.19.0",
     "chalk": "4.1.0",
-    "cheerio": "1.0.0-rc.3",
+    "cheerio": "1.0.0-rc.5",
     "chokidar": "3.4.3",
     "chromium-pickle-js": "0.2.0",
     "clean-css": "4.2.3",
@@ -70,12 +70,12 @@
     "dependency-graph": "0.9.0",
     "diff": "4.0.2",
     "diff2html": "3.1.14",
-    "dompurify": "2.2.0",
+    "dompurify": "2.2.7",
     "dotize": "0.3.0",
     "elasticsearch6": "npm:@elastic/elasticsearch@6",
     "elasticsearch7": "npm:@elastic/elasticsearch@7",
-    "emoji-regex": "9.2.0",
-    "eventemitter2": "6.4.3",
+    "emoji-regex": "9.2.2",
+    "eventemitter2": "6.4.4",
     "express": "4.17.1",
     "express-brute": "1.0.1",
     "express-session": "1.17.1",
@@ -102,7 +102,7 @@
     "katex": "0.12.0",
     "klaw": "3.0.0",
     "knex": "0.21.7",
-    "lodash": "4.17.20",
+    "lodash": "4.17.21",
     "luxon": "1.25.0",
     "markdown-it": "11.0.1",
     "markdown-it-abbr": "1.0.4",
@@ -112,22 +112,22 @@
     "markdown-it-external-links": "0.0.6",
     "markdown-it-footnote": "3.0.2",
     "markdown-it-imsize": "2.0.1",
-    "markdown-it-mark": "3.0.0",
+    "markdown-it-mark": "3.0.1",
     "markdown-it-mathjax": "2.0.0",
     "markdown-it-multimd-table": "4.0.3",
     "markdown-it-sub": "1.0.0",
     "markdown-it-sup": "1.0.0",
     "markdown-it-task-lists": "2.1.1",
     "mathjax": "3.1.2",
-    "mime-types": "2.1.27",
+    "mime-types": "2.1.30",
     "moment": "2.29.1",
     "moment-timezone": "0.5.31",
-    "mongodb": "3.6.2",
-    "ms": "2.1.2",
+    "mongodb": "3.6.5",
+    "ms": "2.1.3",
     "mssql": "6.2.3",
     "multer": "1.4.2",
     "mysql2": "2.2.5",
-    "nanoid": "3.1.15",
+    "nanoid": "3.1.22",
     "node-2fa": "1.1.2",
     "node-cache": "5.1.2",
     "nodemailer": "6.4.14",
@@ -157,7 +157,7 @@
     "pg-pubsub": "0.5.0",
     "pg-query-stream": "3.3.1",
     "pg-tsquery": "8.1.0",
-    "pug": "3.0.0",
+    "pug": "3.0.2",
     "punycode": "2.1.1",
     "qr-image": "3.2.0",
     "raven": "2.6.4",
@@ -167,20 +167,20 @@
     "safe-regex": "2.1.1",
     "sanitize-filename": "1.6.3",
     "scim-query-filter-parser": "2.0.4",
-    "semver": "7.3.2",
+    "semver": "7.3.5",
     "serve-favicon": "2.5.0",
     "simple-git": "2.21.0",
     "solr-node": "1.2.1",
-    "sqlite3": "5.0.0",
+    "sqlite3": "5.0.2",
     "ssh2": "0.8.9",
     "ssh2-promise": "0.1.7",
     "striptags": "3.1.1",
     "subscriptions-transport-ws": "0.9.18",
-    "tar-fs": "2.1.0",
+    "tar-fs": "2.1.1",
     "turndown": "7.0.0",
-    "twemoji": "13.0.1",
+    "twemoji": "13.0.2",
     "uslug": "1.0.4",
-    "uuid": "8.3.1",
+    "uuid": "8.3.2",
     "validate.js": "0.13.1",
     "winston": "3.3.3",
     "xss": "1.0.8",
@@ -228,7 +228,7 @@
     "cash-dom": "8.1.0",
     "chart.js": "2.9.4",
     "clean-webpack-plugin": "3.0.0",
-    "clipboard": "2.0.6",
+    "clipboard": "2.0.8",
     "codemirror": "5.58.2",
     "copy-webpack-plugin": "6.2.1",
     "core-js": "3.6.5",
@@ -262,7 +262,7 @@
     "i18next-xhr-backend": "3.2.2",
     "ignore-loader": "0.1.2",
     "jest": "26.6.1",
-    "js-beautify": "1.13.0",
+    "js-beautify": "1.13.5",
     "js-cookie": "2.2.1",
     "mermaid": "8.8.2",
     "mini-css-extract-plugin": "0.11.3",
@@ -301,7 +301,7 @@
     "vue-clipboards": "1.3.0",
     "vue-filepond": "6.0.3",
     "vue-hot-reload-api": "2.3.4",
-    "vue-loader": "15.9.3",
+    "vue-loader": "15.9.6",
     "vue-moment": "4.1.0",
     "vue-router": "3.4.7",
     "vue-status-indicator": "1.2.1",
@@ -312,7 +312,7 @@
     "vuetify": "2.3.15",
     "vuetify-loader": "1.6.0",
     "vuex": "3.5.1",
-    "vuex-pathify": "1.4.1",
+    "vuex-pathify": "1.4.5",
     "vuex-persistedstate": "3.1.0",
     "webpack": "4.44.2",
     "webpack-bundle-analyzer": "3.9.0",

server/models/pages.js

@@ -520,8 +520,35 @@ module.exports = class Page extends Model {
         })
 
         if ($.root().children().length > 0) {
+          // Remove header anchors
           $('.toc-anchor').remove()
 
+          // Attempt to convert tabsets
+          $('tabset').each((tabI, tabElm) => {
+            const tabHeaders = []
+            // -> Extract templates
+            $(tabElm).children('template').each((tmplI, tmplElm) => {
+              if ($(tmplElm).attr('v-slot:tabs') === '') {
+                $(tabElm).before('<ul class="tabset-headers">' + $(tmplElm).html() + '</ul>')
+              } else {
+                $(tabElm).after('<div class="markdown-tabset">' + $(tmplElm).html() + '</div>')
+              }
+            })
+            // -> Parse tab headers
+            $(tabElm).prev('.tabset-headers').children((i, elm) => {
+              tabHeaders.push($(elm).html())
+            })
+            $(tabElm).prev('.tabset-headers').remove()
+            // -> Inject tab headers
+            $(tabElm).next('.markdown-tabset').children((i, elm) => {
+              if (tabHeaders.length > i) {
+                $(elm).prepend(`<h2>${tabHeaders[i]}</h2>`)
+              }
+            })
+            $(tabElm).next('.markdown-tabset').prepend('<h1>Tabset</h1>')
+            $(tabElm).remove()
+          })
+
           convertedContent = $.html('body').replace('<body>', '').replace('</body>', '').replace(/&#x([0-9a-f]{1,6});/ig, (entity, code) => {
             code = parseInt(code, 16)