Improve readability for MFM styles code

The code to turn mdm-data-* attributes into a value for the style attribute is complex.
I wrapped it in it's own function now for better code readability.
A comment was already provided with what the code intents to do and why, this information has also been moved
to this function.

.node-version

@@ -0,0 +1 @@
+7.2.1

README.md

@@ -20,8 +20,6 @@ To use Akkoma-FE in Akkoma, use the [frontend](https://docs.akkoma.dev/stable/ad
 
 ## Build Setup
 
-Make sure you have [Node.js](https://nodejs.org/) installed. You can check `/.woodpecker.yml` for which node version the Akkoma CI currently uses.
-
 ``` bash
 # install dependencies
 corepack enable

index.html

@@ -6,7 +6,6 @@
     <title>Akkoma</title>
     <link rel="stylesheet" href="/static/font/tiresias.css">
     <link rel="stylesheet" href="/static/font/css/lato.css">
-    <link rel="stylesheet" href="/static/mfm.css">
     <link rel="stylesheet" href="/static/custom.css">
     <link rel="stylesheet" href="/static/theme-holder.css" id="theme-holder">
     <!--server-generated-meta-->

package.json

@@ -41,9 +41,9 @@
     "qrcode": "^1.5.3",
     "querystring-es3": "^0.2.1",
     "url": "^0.11.3",
-    "vue": "^3.4.38",
-    "vue-i18n": "^9.14.0",
-    "vue-router": "^4.4.3",
+    "vue": "^3.2.31",
+    "vue-i18n": "^9.2.2",
+    "vue-router": "^4.3.2",
     "vue-template-compiler": "^2.7.16",
     "vuex": "^4.1.0"
   },

src/components/emoji_input/suggestor.js

@@ -1,4 +1,4 @@
-const MFM_TAGS = ['blur', 'bounce', 'flip', 'font', 'jelly', 'jump', 'rainbow', 'rotate', 'shake', 'sparkle', 'spin', 'tada', 'twitch', 'x2', 'x3', 'x4']
+const MFM_TAGS = ['bg', 'blur', 'bounce', 'center', 'fg', 'flip', 'font', 'jelly', 'jump', 'position', 'rainbow', 'rotate', 'scale', 'shake', 'sparkle', 'spin', 'tada', 'twitch', 'x2', 'x3', 'x4']
   .map(tag => ({ displayText: tag, detailText: '$[' + tag + ' ]', replacement: '$[' + tag + ' ]', mfm: true }))
 
 /**

src/components/mfa_form/totp_form.vue

@@ -18,7 +18,6 @@
           <input
             id="code"
             v-model="code"
-            autocomplete="one-time-code"
             class="form-control"
           >
         </div>

src/components/rich_content/rich_content.jsx

@@ -121,6 +121,19 @@ export default {
       }
     }
 
+    const mfmStyleFromDataAttributes = (attributes) => {
+      // CSS selectors can check if a data-* attribute is true, but can't use other values, so we want to add them to the style attribute
+      // Here we turn e.g. `{'data-mfm-some': '1deg', 'data-mfm-thing': '5s'}` to "--mfm-some: 1deg;--mfm-thing: 5s;"
+      // Note that we only add the value to `style` when they contain only letters, numbers, dot, or minus signs
+      // At the moment of writing, this should be enough for legitimate purposes and reduces the chance of injection by using special characters
+      // There is a special case for the `color` value, who is provided without `#`, but requires this in the `style` attribute
+      return Object.keys(attributes).filter(
+        (key) => key.startsWith('data-mfm-') && attributes[key] !== true && /^[a-zA-Z0-9.\-]*$/.test(attributes[key])
+      ).map(
+        (key) => '--mfm-' + key.substr(9) + (key === 'data-mfm-color' ? ': #' : ': ') + attributes[key] + ';'
+      ).reduce((a,v) => a+v, '')
+    }
+
     // Processor to use with html_tree_converter
     const processItem = (item, index, array, what) => {
       // Handle text nodes - just add emoji
@@ -191,6 +204,15 @@ export default {
             if (this.handleLinks && attrs?.['class']?.includes?.('h-card')) {
               return ['', children.map(processItem), '']
             }
+
+            let mfm_style = mfmStyleFromDataAttributes(attrs)
+            if (mfm_style !== '') {
+              return [
+                opener.slice(0,-1) + ' style="' + mfm_style + '">',
+                children.map(processItem),
+                closer
+              ]
+            }
         }
 
         if (children !== undefined) {

src/components/settings_modal/settings_modal.js

@@ -69,7 +69,7 @@ const SettingsModal = {
       this.$store.dispatch('closeSettingsModal')
     },
     logout () {
-      this.$router.replace(this.$store.state.instance.redirectRootNoLogin || '/main/all')
+      this.$router.replace('/main/public')
       this.$store.dispatch('closeSettingsModal')
       this.$store.dispatch('logout')
     },

src/components/status_body/status_body.scss

@@ -3,6 +3,7 @@
 .StatusBody {
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 
   .translation {
     border: 1px solid var(--accent, $fallback--link);
@@ -23,24 +24,6 @@
     transition: 0.05s;
   }
 
-  ._mfm_x2_ {
-    .emoji {
-      height: 100px;
-    }
-  }
-
-  ._mfm_x3_ {
-    .emoji {
-      height: 150px;
-    }
-  }
-
-  ._mfm_x4_ {
-    .emoji {
-      height: 200px;
-    }
-  }
-
   .attachments {
     margin-top: 0.5em;
   }

src/components/status_body/status_body.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="StatusBody"
-    :class="{ '-compact': compact, 'mfm-disabled': !renderMisskeyMarkdown }"
+    :class="{ '-compact': compact }"
   >
     <div class="body">
       <div

src/components/status_content/mfm.scss

@@ -0,0 +1,423 @@
+/**
+ * "FEP-c16b: Formatting MFM functions" attributes that Akkoma supports
+ */
+
+.StatusContent:not(.mfm-disabled) {
+  /* The following are the non-animated MFM */
+  .mfm-center {
+    display: block;
+    text-align: center;
+  }
+
+  .mfm-flip {
+    display: inline-block;
+    transform: scaleX(-1);
+  }
+
+  .mfm-flip[data-mfm-v] {
+    transform: scaleY(-1);
+  }
+
+  .mfm-flip[data-mfm-v][data-mfm-h] {
+    transform: scale(-1, -1);
+  }
+
+  .mfm-font[data-mfm-serif] {
+    font-family: serif;
+  }
+
+  .mfm-font[data-mfm-monospace] {
+    font-family: monospace;
+  }
+
+  .mfm-font[data-mfm-cursive] {
+    font-family: cursive;
+  }
+
+  .mfm-font[data-mfm-fantasy] {
+    font-family: fantasy;
+  }
+
+  .mfm-font[data-mfm-emoji] {
+    font-family: emoji;
+  }
+
+  .mfm-font[data-mfm-math] {
+    font-family: math;
+  }
+
+  .mfm-blur {
+    filter: blur(6px);
+    transition: filter 0.3s;
+
+    &:hover {
+      filter: blur(0);
+    }
+  }
+
+  .mfm-rotate {
+    display: inline-block;
+    transform: rotate(calc(var(--mfm-deg, 90) * 1deg));
+    transform-origin: center center;
+  }
+
+  .mfm-x2 {
+    --mfm-zoom-size: 200%;
+  }
+
+  .mfm-x3 {
+    --mfm-zoom-size: 400%;
+  }
+
+  .mfm-x4 {
+    --mfm-zoom-size: 600%;
+  }
+
+  .mfm-x2,
+  .mfm-x3,
+  .mfm-x4,
+  .mfm-tada {
+    .emoji {
+      --emoji-size: 2em;
+    }
+    font-size: var(--mfm-zoom-size);
+
+    .mfm-x2,
+    .mfm-x3,
+    .mfm-x4,
+    .mfm-tada {
+      /* only half effective */
+      font-size: calc(var(--mfm-zoom-size) / 2 + 50%);
+
+      .mfm-x2,
+      .mfm-x3,
+      .mfm-x4,
+      .mfm-tada {
+        /* disabled */
+        font-size: 100%;
+      }
+    }
+  }
+
+  .mfm-position {
+    display: inline-block;
+    transform: translate(calc(var(--mfm-x, 0) * 1em), calc(var(--mfm-y, 0) * 1em));
+  }
+
+  .mfm-scale {
+    display: inline-block;
+    transform: scale(var(--mfm-x, 1), var(--mfm-y, 1));
+  }
+
+  .mfm-fg {
+    color: var(--mfm-color, #f00);
+  }
+
+  .mfm-bg {
+    background-color: var(--mfm-color, #0f0);
+  }
+
+  /* The following are the animated MFM */
+
+  /* .mfm-hover means that we should only play animation when hovering over the StatusContent
+   * So either StatusContent does not have this class,
+   * or it has the class and we are hovering over StatusContent
+   */
+  &:not(.mfm-hover:not(:hover)) {
+    .mfm-jelly {
+      display: inline-block;
+      animation: mfm-rubberBand var(--mfm-speed, 1s) linear infinite both;
+    }
+
+    .mfm-twitch {
+      display: inline-block;
+      animation: mfm-twitch var(--mfm-speed, 0.5s) ease infinite;
+    }
+
+    .mfm-shake {
+      display: inline-block;
+      animation: mfm-shake var(--mfm-speed, 0.5s) ease infinite;
+    }
+
+    .mfm-spin {
+      display: inline-block;
+      animation: mfm-spin var(--mfm-speed, 1.5s) linear infinite;
+    }
+
+    .mfm-spin[data-mfm-y] {
+      animation-name: mfm-spinY;
+    }
+
+    .mfm-spin[data-mfm-x] {
+      animation-name: mfm-spinX;
+    }
+
+    .mfm-spin[data-mfm-alternate] {
+      animation-direction: alternate;
+    }
+
+    .mfm-spin[data-mfm-left] {
+      animation-direction: reverse;
+    }
+
+    .mfm-jump {
+      display: inline-block;
+      animation: mfm-jump var(--mfm-speed, 0.75s) linear infinite;
+    }
+
+    .mfm-bounce {
+      display: inline-block;
+      animation: mfm-bounce var(--mfm-speed, 0.75s) linear infinite;
+      transform-origin: center bottom;
+    }
+
+    .mfm-rainbow {
+      animation: mfm-rainbow var(--mfm-speed, 1s) linear infinite;
+    }
+
+    .mfm-tada {
+      display: inline-block;
+      animation: mfm-tada var(--mfm-speed, 1s) linear infinite both;
+
+      --mfm-zoom-size: 150%;
+    }
+  }
+
+  /* animation keyframes */
+
+  @keyframes mfm-spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  @keyframes mfm-spinX {
+    0% { transform: perspective(128px) rotateX(0deg); }
+    100% { transform: perspective(128px) rotateX(360deg); }
+  }
+
+  @keyframes mfm-spinY {
+    0% { transform: perspective(128px) rotateY(0deg); }
+    100% { transform: perspective(128px) rotateY(360deg); }
+  }
+
+  @keyframes mfm-jump {
+    0% { transform: translateY(0); }
+    25% { transform: translateY(-16px); }
+    50% { transform: translateY(0); }
+    75% { transform: translateY(-8px); }
+    100% { transform: translateY(0); }
+  }
+
+  @keyframes mfm-bounce {
+    0% { transform: translateY(0) scale(1, 1); }
+    25% { transform: translateY(-16px) scale(1, 1); }
+    50% { transform: translateY(0) scale(1, 1); }
+    75% { transform: translateY(0) scale(1.5, 0.75); }
+    100% { transform: translateY(0) scale(1, 1); }
+  }
+
+  @keyframes mfm-twitch {
+    0% { transform: translate(7px, -2px); }
+    5% { transform: translate(-3px, 1px); }
+    10% { transform: translate(-7px, -1px); }
+    15% { transform: translate(0, -1px); }
+    20% { transform: translate(-8px, 6px); }
+    25% { transform: translate(-4px, -3px); }
+    30% { transform: translate(-4px, -6px); }
+    35% { transform: translate(-8px, -8px); }
+    40% { transform: translate(4px, 6px); }
+    45% { transform: translate(-3px, 1px); }
+    50% { transform: translate(2px, -10px); }
+    55% { transform: translate(-7px, 0); }
+    60% { transform: translate(-2px, 4px); }
+    65% { transform: translate(3px, -8px); }
+    70% { transform: translate(6px, 7px); }
+    75% { transform: translate(-7px, -2px); }
+    80% { transform: translate(-7px, -8px); }
+    85% { transform: translate(9px, 3px); }
+    90% { transform: translate(-3px, -2px); }
+    95% { transform: translate(-10px, 2px); }
+    100% { transform: translate(-2px, -6px); }
+  }
+
+  @keyframes mfm-shake {
+    0% { transform: translate(-3px, -1px) rotate(-8deg); }
+    5% { transform: translate(0, -1px) rotate(-10deg); }
+    10% { transform: translate(1px, -3px) rotate(0deg); }
+    15% { transform: translate(1px, 1px) rotate(11deg); }
+    20% { transform: translate(-2px, 1px) rotate(1deg); }
+    25% { transform: translate(-1px, -2px) rotate(-2deg); }
+    30% { transform: translate(-1px, 2px) rotate(-3deg); }
+    35% { transform: translate(2px, 1px) rotate(6deg); }
+    40% { transform: translate(-2px, -3px) rotate(-9deg); }
+    45% { transform: translate(0, -1px) rotate(-12deg); }
+    50% { transform: translate(1px, 2px) rotate(10deg); }
+    55% { transform: translate(0, -3px) rotate(8deg); }
+    60% { transform: translate(1px, -1px) rotate(8deg); }
+    65% { transform: translate(0, -1px) rotate(-7deg); }
+    70% { transform: translate(-1px, -3px) rotate(6deg); }
+    75% { transform: translate(0, -2px) rotate(4deg); }
+    80% { transform: translate(-2px, -1px) rotate(3deg); }
+    85% { transform: translate(1px, -3px) rotate(-10deg); }
+    90% { transform: translate(1px, 0) rotate(3deg); }
+    95% { transform: translate(-2px, 0) rotate(-3deg); }
+    100% { transform: translate(2px, 1px) rotate(2deg); }
+  }
+
+  @keyframes mfm-rubberBand {
+    0% { transform: scale3d(1, 1, 1); }
+    30% { transform: scale3d(1.25, 0.75, 1); }
+    40% { transform: scale3d(0.75, 1.25, 1); }
+    50% { transform: scale3d(1.15, 0.85, 1); }
+    65% { transform: scale3d(0.95, 1.05, 1); }
+    75% { transform: scale3d(1.05, 0.95, 1); }
+    100% { transform: scale3d(1, 1, 1); }
+  }
+
+  @keyframes mfm-rainbow {
+    0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
+    100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
+  }
+
+  @keyframes mfm-tada {
+    0%,
+    100% { transform: scale3d(1, 1, 1); }
+
+    10%,
+    20% { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
+
+    30%,
+    50%,
+    70%,
+    90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
+
+    40%,
+    60%,
+    80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
+  }
+
+  /**
+   * Legacy MFM
+   * This is for backwards compatibility with posts formatted on Akkoma before support for FEP-c16b
+   * Note that it uses the keyframes as defined above for the FEP-c16b compatible MFM representation
+   */
+
+  .mfm {
+    display: inline-block;
+  }
+
+  /* The following are the legacy non-animated MFM */
+  ._mfm_flip_[data-h][data-v] {
+    transform: scale(-1, -1);
+  }
+
+  ._mfm_flip_[data-v] {
+    transform: scaleY(-1);
+  }
+
+  ._mfm_flip_:not([data-v]) {
+    transform: scaleX(-1);
+  }
+
+  ._mfm_x2_ {
+    font-size: 200%;
+  }
+
+  ._mfm_x3_ {
+    font-size: 400%;
+  }
+
+  ._mfm_x4_ {
+    font-size: 600%;
+  }
+
+  ._mfm_x2_ {
+    .emoji {
+      height: 100px;
+    }
+  }
+
+  ._mfm_x3_ {
+    .emoji {
+      height: 150px;
+    }
+  }
+
+  ._mfm_x4_ {
+    .emoji {
+      height: 200px;
+    }
+  }
+
+  ._mfm_blur_ {
+    filter: blur(6px);
+    transition: filter 0.3s;
+  }
+
+  ._mfm_blur_:hover {
+    filter: blur(0);
+  }
+
+  ._mfm_rotate_ {
+    transform: rotate(90deg);
+    transform-origin: center center;
+  }
+
+  /* The following are the legacy animated MFM */
+
+  /* .mfm-hover means that we should only play animation when hovering over the StatusContent
+   * So either StatusContent does not have this class,
+   * or it has the class and we are hovering over StatusContent
+   */
+  &:not(.mfm-hover:not(:hover)) {
+    ._mfm_tada_ {
+      font-size: 150%;
+      animation: mfm-tada 1s linear infinite both;
+    }
+
+    ._mfm_jelly_ {
+      animation: mfm-rubberBand 1s linear infinite both;
+    }
+
+    ._mfm_twitch_ {
+      animation: mfm-twitch 0.5s ease infinite;
+    }
+
+    ._mfm_shake_ {
+      animation: mfm-shake 0.5s ease infinite;
+    }
+
+    ._mfm_spin_ {
+      animation: mfm-spin 0.5s linear infinite;
+    }
+
+    ._mfm_spin_[data-x] {
+      animation-name: mfm-spinX;
+    }
+
+    ._mfm_spin_[data-y] {
+      animation-name: mfm-spinY;
+    }
+
+    ._mfm_spin_[left] {
+      animation-direction: reverse;
+    }
+
+    ._mfm_spin_[alternate] {
+      animation-direction: alternate;
+    }
+
+    ._mfm_jump_ {
+      animation: mfm-jump 0.75s linear infinite;
+    }
+
+    ._mfm_bounce_ {
+      animation: mfm-bounce 0.75s linear infinite;
+      transform-origin: center bottom;
+    }
+
+    ._mfm_rainbow_ {
+      animation: mfm-rainbow 1s linear infinite;
+    }
+  }
+}

src/components/status_content/status_content.vue

@@ -64,6 +64,7 @@
 </template>
 
 <script src="./status_content.js"></script>
+<style lang="scss" src="./mfm.scss" />
 <style lang="scss">
 .StatusContent {
   flex: 1;
@@ -75,23 +76,6 @@
       height: 50px;
     }
   }
-
-  &.mfm-hover:not(:hover) {
-    .mfm {
-      animation: none !important;
-    }
-  }
-  &.mfm-disabled {
-    span {
-      font-size: 100% !important;
-    }
-    .mfm {
-      animation: none !important;
-    }
-    .emoji {
-      height: 32px !important;
-    }
-  }
 }
 
 .quote-inline,

src/modules/config.js

@@ -22,7 +22,7 @@ export const multiChoiceProperties = [
 
 export const defaultState = {
   profile: 'default',
-  profileVersion: 0, // internal fe copy of server-side version
+  profileVersion: 0,
   expertLevel: 0, // used to track which settings to show and hide
   colors: {},
   theme: undefined,
@@ -127,21 +127,6 @@ export const instanceDefaultProperties = Object.entries(defaultState)
   .filter(([key, value]) => value === undefined)
   .map(([key, value]) => key)
 
-function updateLocalSettings(store, settingEntries, version = null) {
-  if (version == null)
-    version = store.state.profileVersion
-
-  settingEntries.forEach(([name, value]) => {
-    if (store.state[name] !== value) {
-      store.dispatch('setOption', { name, value })
-    }
-  })
-
-  // Set this at the end to override any potentially stored profileVersion
-  store.commit('setOption', { name: 'profileVersion', value: version })
-}
-
-
 const config = {
   state: { ...defaultState },
   getters: {
@@ -213,17 +198,19 @@ const config = {
         store.dispatch('listSettingsProfiles')
       })
     },
-    loadSettings (store, data) {
+    loadSettings ({ dispatch }, data) {
       const knownKeys = new Set(Object.keys(defaultState))
+      const presentKeys = new Set(Object.keys(data))
+      const intersection = new Set()
+      for (let elem of presentKeys) {
+        if (knownKeys.has(elem)) {
+          intersection.add(elem)
+        }
+      }
 
-      // Limit to supported properties
-      const newSettingEntries =
-         Object.entries(data)
-        .filter(([key, value]) => knownKeys.has(key))
-
-      // disregard stored profileVersion; sync afterwards increases previous version
-      updateLocalSettings(store, newSettingEntries, null)
-      store.dispatch('syncSettings')
+      intersection.forEach(
+        name => dispatch('setOption', { name, value: data[name] })
+      )
     },
     setHighlight ({ commit, dispatch }, { user, color, type }) {
       commit('setHighlight', { user, color, type })
@@ -257,7 +244,12 @@ const config = {
         .then(({ settings, version }) => {
           console.log('found settings version', version)
           if (forceUpdate || (version > store.state.profileVersion)) {
-            updateLocalSettings(store, Object.entries(settings), version)
+            store.commit('setOption', { name: 'profileVersion', value: version })
+            Object.entries(settings).forEach(([name, value]) => {
+              if (store.state[name] !== value) {
+                store.dispatch('setOption', { name, value })
+              }
+            })
           } else {
             console.log('settings are up to date')
           }

src/panel.scss

@@ -18,6 +18,7 @@
     bottom: 0;
     left: 0;
     right: 0;
+    z-index: 5;
     box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
     box-shadow: var(--panelShadow);
     pointer-events: none;
@@ -59,6 +60,7 @@
   padding: 0.6em;
   height: var(--__panel-heading-height);
   line-height: var(--__panel-heading-height-inner);
+  z-index: 4;
 
   &.-flexible-height {
     --__panel-heading-height: auto;
@@ -129,7 +131,6 @@
   color: var(--panelText);
   background-color: $fallback--bg;
   background-color: var(--bg, $fallback--bg);
-  z-index: 4;
 
   &::after {
     background-color: $fallback--fg;

static/mfm.css

@@ -1,227 +0,0 @@
-.mfm {
-  display: inline-block;
-}
-
-._mfm_tada_ {
-  font-size: 150%;
-  animation: mfm-tada 1s linear infinite both;
-}
-
-._mfm_jelly_ {
-  animation: mfm-jelly 1s linear infinite both;
-}
-
-._mfm_twitch_ {
-  animation: mfm-twitch 0.5s ease infinite;
-}
-
-._mfm_shake_ {
-  animation: mfm-shake 0.5s ease infinite;
-}
-
-._mfm_spin_ {
-  animation: mfm-spin 0.5s linear infinite;
-}
-
-._mfm_spin_[data-x] {
-  animation-name: mfm-spinX;
-}
-._mfm_spin_[data-y] {
-  animation-name: mfm-spinY;
-}
-._mfm_spin_[left] {
-  animation-direction: reverse;
-}
-._mfm_spin_[alternate] {
-  animation-direction: alternate;
-}
-
-._mfm_jump_ {
-  animation: mfm-jump 0.75s linear infinite;
-}
-
-._mfm_bounce_ {
-  animation: mfm-bounce 0.75s linear infinite;
-  transform-origin: center bottom;
-}
-
-._mfm_flip_[data-h][data-v] {
-  transform: scale(-1, -1);
-}
-._mfm_flip_[data-v] {
-  transform: scaleY(-1);
-}
-._mfm_flip_:not([data-v]) {
-  transform: scaleX(-1);
-}
-
-._mfm_x2_ {
-  font-size: 200%;
-}
-
-._mfm_x3_ {
-  font-size: 400%;
-}
-
-._mfm_x4_ {
-  font-size: 600%;
-}
-
-._mfm_blur_ {
-  filter: blur(6px);
-  transition: filter 0.3s
-}
-._mfm_blur_:hover {
-  filter: blur(0px);
-}
-
-._mfm_rainbow_ {
-  animation: mfm-rainbow 1s linear infinite;
-}
-
-._mfm_rotate_ {
-  transform: rotate(90deg);
-  transform-origin: center center;
-}
-
-/* sparkle */
-
-@keyframes mfm-tada {
-  from {
-    transform: scale3d(1, 1, 1);
-  }
-
-  10%,
-  20% {
-    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
-  }
-
-  30%,
-  50%,
-  70%,
-  90% {
-    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
-  }
-
-  40%,
-  60%,
-  80% {
-    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
-  }
-
-  to {
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-@keyframes bounce {
-  0% {
-    transform: scaleX(0.9) scaleY(0.9);
-  }
-
-  19% {
-    transform: scaleX(1.1) scaleY(1.1);
-  }
-
-  48% {
-    transform: scaleX(0.95) scaleY(0.95);
-  }
-
-  100% {
-    transform: scaleX(1) scaleY(1);
-  }
-}
-
-@keyframes mfm-spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-@keyframes mfm-spinX {
-  0% { transform: perspective(128px) rotateX(0deg); }
-  100% { transform: perspective(128px) rotateX(360deg); }
-}
-
-@keyframes mfm-spinY {
-  0% { transform: perspective(128px) rotateY(0deg); }
-  100% { transform: perspective(128px) rotateY(360deg); }
-}
-
-@keyframes mfm-jump {
-  0% { transform: translateY(0); }
-  25% { transform: translateY(-16px); }
-  50% { transform: translateY(0); }
-  75% { transform: translateY(-8px); }
-  100% { transform: translateY(0); }
-}
-
-@keyframes mfm-bounce {
-  0% { transform: translateY(0) scale(1, 1); }
-  25% { transform: translateY(-16px) scale(1, 1); }
-  50% { transform: translateY(0) scale(1, 1); }
-  75% { transform: translateY(0) scale(1.5, 0.75); }
-  100% { transform: translateY(0) scale(1, 1); }
-}
-
-@keyframes mfm-twitch {
-  0% { transform: translate(7px, -2px); }
-  5% { transform: translate(-3px, 1px); }
-  10% { transform: translate(-7px, -1px); }
-  15% { transform: translate(0, -1px); }
-  20% { transform: translate(-8px, 6px); }
-  25% { transform: translate(-4px, -3px); }
-  30% { transform: translate(-4px, -6px); }
-  35% { transform: translate(-8px, -8px); }
-  40% { transform: translate(4px, 6px); }
-  45% { transform: translate(-3px, 1px); }
-  50% { transform: translate(2px, -10px); }
-  55% { transform: translate(-7px, 0); }
-  60% { transform: translate(-2px, 4px); }
-  65% { transform: translate(3px, -8px); }
-  70% { transform: translate(6px, 7px); }
-  75% { transform: translate(-7px, -2px); }
-  80% { transform: translate(-7px, -8px); }
-  85% { transform: translate(9px, 3px); }
-  90% { transform: translate(-3px, -2px); }
-  95% { transform: translate(-10px, 2px); }
-  100% { transform: translate(-2px, -6px); }
-}
-
-@keyframes mfm-shake {
-  0% { transform: translate(-3px, -1px) rotate(-8deg); }
-  5% { transform: translate(0, -1px) rotate(-10deg); }
-  10% { transform: translate(1px, -3px) rotate(0deg); }
-  15% { transform: translate(1px, 1px) rotate(11deg); }
-  20% { transform: translate(-2px, 1px) rotate(1deg); }
-  25% { transform: translate(-1px, -2px) rotate(-2deg); }
-  30% { transform: translate(-1px, 2px) rotate(-3deg); }
-  35% { transform: translate(2px, 1px) rotate(6deg); }
-  40% { transform: translate(-2px, -3px) rotate(-9deg); }
-  45% { transform: translate(0, -1px) rotate(-12deg); }
-  50% { transform: translate(1px, 2px) rotate(10deg); }
-  55% { transform: translate(0, -3px) rotate(8deg); }
-  60% { transform: translate(1px, -1px) rotate(8deg); }
-  65% { transform: translate(0, -1px) rotate(-7deg); }
-  70% { transform: translate(-1px, -3px) rotate(6deg); }
-  75% { transform: translate(0, -2px) rotate(4deg); }
-  80% { transform: translate(-2px, -1px) rotate(3deg); }
-  85% { transform: translate(1px, -3px) rotate(-10deg); }
-  90% { transform: translate(1px, 0) rotate(3deg); }
-  95% { transform: translate(-2px, 0) rotate(-3deg); }
-  100% { transform: translate(2px, 1px) rotate(2deg); }
-}
-
-@keyframes mfm-jelly {
-  from { transform: scale3d(1, 1, 1); }
-  30% { transform: scale3d(1.25, 0.75, 1); }
-  40% { transform: scale3d(0.75, 1.25, 1); }
-  50% { transform: scale3d(1.15, 0.85, 1); }
-  65% { transform: scale3d(0.95, 1.05, 1); }
-  75% { transform: scale3d(1.05, 0.95, 1); }
-  to { transform: scale3d(1, 1, 1); }
-}
-
-@keyframes mfm-rainbow {
-  0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
-  100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
-}

test/unit/specs/components/rich_content.spec.js

@@ -40,6 +40,64 @@ describe('RichContent', () => {
     expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(html))
   })
 
+  it('it adds a # to the MFM color style value', () => {
+    const html_ok = '<span class="mfm-fg" data-mfm-color="fff">this text is not white</span>'
+    const expected_ok = '<span class="mfm-fg" data-mfm-color="fff" style="--mfm-color: #fff;">this text is not white</span>'
+    const wrapper_ok = shallowMount(RichContent, {
+      global,
+      props: {
+        attentions,
+        handleLinks: true,
+        greentext: true,
+        emoji: [],
+        html: html_ok
+      }
+    })
+
+    expect(wrapper_ok.html()).to.eql(compwrap(expected_ok))
+  })
+
+  it('does not allow injection through MFM data- attributes', () => {
+    const html_ok = '<span class="mfm-spin" data-mfm-speed="-0.2s">brrr</span>'
+    const expected_ok = '<span class="mfm-spin" data-mfm-speed="-0.2s" style="--mfm-speed: -0.2s;">brrr</span>'
+    const wrapper_ok = shallowMount(RichContent, {
+      global,
+      props: {
+        attentions,
+        handleLinks: true,
+        greentext: true,
+        emoji: [],
+        html: html_ok
+      }
+    })
+    const html_nok1 = '<span class="mfm-spin" data-mfm-speed="<">brrr</span>'
+    const wrapper_nok1 = shallowMount(RichContent, {
+      global,
+      props: {
+        attentions,
+        handleLinks: true,
+        greentext: true,
+        emoji: [],
+        html: html_nok1
+      }
+    })
+    const html_nok2 = '<span class="mfm-spin" data-mfm-speed="\\">brrr</span>'
+    const wrapper_nok2 = shallowMount(RichContent, {
+      global,
+      props: {
+        attentions,
+        handleLinks: true,
+        greentext: true,
+        emoji: [],
+        html: html_nok2
+      }
+    })
+
+    expect(wrapper_ok.html()).to.eql(compwrap(expected_ok))
+    expect(wrapper_nok1.html()).to.eql(compwrap(html_nok1))
+    expect(wrapper_nok2.html()).to.eql(compwrap(html_nok2))
+  })
+
   it('unescapes everything as needed', () => {
     const html = [
       p('Testing &#39;em all'),

yarn.lock

@@ -249,21 +249,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.24.6.tgz#28583c28b15f2a3339cfafafeaad42f9a0e828df"
   integrity sha512-WdJjwMEkmBicq5T9fm/cHND3+UlFa2Yj8ALLgmoSQAJZysYbBjw+azChSGPN4DSPLXOcooGRvDwZWMcF/mLO2Q==
 
-"@babel/helper-string-parser@^7.24.8":
-  version "7.24.8"
-  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz#5b3329c9a58803d5df425e5785865881a81ca48d"
-  integrity sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==
-
 "@babel/helper-validator-identifier@^7.24.6":
   version "7.24.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.6.tgz#08bb6612b11bdec78f3feed3db196da682454a5e"
   integrity sha512-4yA7s865JHaqUdRbnaxarZREuPTHrjpDT+pXoAZ1yhyo6uFnIEpS8VMu16siFOHDpZNKYv5BObhsB//ycbICyw==
 
-"@babel/helper-validator-identifier@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz#75b889cfaf9e35c2aaf42cf0d72c8e91719251db"
-  integrity sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==
-
 "@babel/helper-validator-option@^7.24.6":
   version "7.24.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.24.6.tgz#59d8e81c40b7d9109ab7e74457393442177f460a"
@@ -301,13 +291,6 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.6.tgz#5e030f440c3c6c78d195528c3b688b101a365328"
   integrity sha512-eNZXdfU35nJC2h24RznROuOpO94h6x8sg9ju0tT9biNtLZ2vuP8SduLqqV+/8+cebSLV9SJEAN5Z3zQbJG/M+Q==
 
-"@babel/parser@^7.24.7":
-  version "7.25.3"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.3.tgz#91fb126768d944966263f0657ab222a642b82065"
-  integrity sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==
-  dependencies:
-    "@babel/types" "^7.25.2"
-
 "@babel/plugin-bugfix-firefox-class-in-computed-class-key@^7.24.6":
   version "7.24.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.24.6.tgz#283a74ef365b1e954cda6b2724c678a978215e88"
@@ -1038,15 +1021,6 @@
     "@babel/helper-validator-identifier" "^7.24.6"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.25.2":
-  version "7.25.2"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.2.tgz#55fb231f7dc958cd69ea141a4c2997e819646125"
-  integrity sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==
-  dependencies:
-    "@babel/helper-string-parser" "^7.24.8"
-    "@babel/helper-validator-identifier" "^7.24.7"
-    to-fast-properties "^2.0.0"
-
 "@chenfengyuan/vue-qrcode@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@chenfengyuan/vue-qrcode/-/vue-qrcode-2.0.0.tgz#8cd01f6fc528d471680ebe812ec47c830aea7e63"
@@ -1167,20 +1141,20 @@
     source-map "0.6.1"
     yaml-eslint-parser "^0.3.2"
 
-"@intlify/core-base@9.14.0":
-  version "9.14.0"
-  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-9.14.0.tgz#63ce687a6560c0af6a16cb567d9d8a1ea1a5a65e"
-  integrity sha512-zJn0imh9HIsZZUtt9v8T16PeVstPv6bP2YzlrYJwoF8F30gs4brZBwW2KK6EI5WYKFi3NeqX6+UU4gniz5TkGg==
+"@intlify/core-base@9.13.1":
+  version "9.13.1"
+  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-9.13.1.tgz#bd1f38e665095993ef9b67aeeb794f3cabcb515d"
+  integrity sha512-+bcQRkJO9pcX8d0gel9ZNfrzU22sZFSA0WVhfXrf5jdJOS24a+Bp8pozuS9sBI9Hk/tGz83pgKfmqcn/Ci7/8w==
   dependencies:
-    "@intlify/message-compiler" "9.14.0"
-    "@intlify/shared" "9.14.0"
+    "@intlify/message-compiler" "9.13.1"
+    "@intlify/shared" "9.13.1"
 
-"@intlify/message-compiler@9.14.0":
-  version "9.14.0"
-  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.14.0.tgz#e767141dd12862b3c1bf02ab5fc4852792812381"
-  integrity sha512-sXNsoMI0YsipSXW8SR75drmVK56tnJHoYbPXUv2Cf9lz6FzvwsosFm6JtC1oQZI/kU+n7qx0qRrEWkeYFTgETA==
+"@intlify/message-compiler@9.13.1":
+  version "9.13.1"
+  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.13.1.tgz#ff8129badf77db3fb648b8d3cceee87c8033ed0a"
+  integrity sha512-SKsVa4ajYGBVm7sHMXd5qX70O2XXjm55zdZB3VeMFCvQyvLew/dLvq3MqnaIsTMF1VkkOb9Ttr6tHcMlyPDL9w==
   dependencies:
-    "@intlify/shared" "9.14.0"
+    "@intlify/shared" "9.13.1"
     source-map-js "^1.0.2"
 
 "@intlify/message-compiler@next":
@@ -1196,12 +1170,7 @@
   resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-10.0.0-beta.1.tgz#7a72310c8fb81ee9d4ec0a534fd7782139b67c3a"
   integrity sha512-61MnYhgqS/TyAto9CXOltHlhK2WflLBcKpIkRhZCUL2IkiVvh7qKevsqZ3RYZylyC3q19ajLW6mB+iJtnbAOpg==
 
-"@intlify/shared@9.14.0":
-  version "9.14.0"
-  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.14.0.tgz#e8fb3693ad4171442cbe6cb8922a9b5a22ffb4ef"
-  integrity sha512-r+N8KRQL7LgN1TMTs1A2svfuAU0J94Wu9wWdJVJqYsoMMLIeJxrPjazihfHpmJqfgZq0ah3Y9Q4pgWV2O90Fyg==
-
-"@intlify/shared@^9.2.2":
+"@intlify/shared@9.13.1", "@intlify/shared@^9.2.2":
   version "9.13.1"
   resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.13.1.tgz#202741d11ece1a9c7480bfd3f27afcf9cb8f72e4"
   integrity sha512-u3b6BKGhE6j/JeRU6C/RL2FgyJfy6LakbtfeVF8fJXURpZZTzfh3e05J0bu0XPw447Q6/WUp3C4ajv4TMS4YsQ==
@@ -1700,17 +1669,6 @@
     estree-walker "^2.0.2"
     source-map-js "^1.2.0"
 
-"@vue/compiler-core@3.4.38":
-  version "3.4.38"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.4.38.tgz#326dfe3c92fa2b0f1dc9b39a948a231980253496"
-  integrity sha512-8IQOTCWnLFqfHzOGm9+P8OPSEDukgg3Huc92qSG49if/xI2SAwLHQO2qaPQbjCWPBcQoO1WYfXfTACUrWV3c5A==
-  dependencies:
-    "@babel/parser" "^7.24.7"
-    "@vue/shared" "3.4.38"
-    entities "^4.5.0"
-    estree-walker "^2.0.2"
-    source-map-js "^1.2.0"
-
 "@vue/compiler-dom@3.4.27":
   version "3.4.27"
   resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.4.27.tgz#d51d35f40d00ce235d7afc6ad8b09dfd92b1cc1c"
@@ -1719,30 +1677,7 @@
     "@vue/compiler-core" "3.4.27"
     "@vue/shared" "3.4.27"
 
-"@vue/compiler-dom@3.4.38":
-  version "3.4.38"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.4.38.tgz#90348fac1130e0bbd408b650635cb626b3b9df06"
-  integrity sha512-Osc/c7ABsHXTsETLgykcOwIxFktHfGSUDkb05V61rocEfsFDcjDLH/IHJSNJP+/Sv9KeN2Lx1V6McZzlSb9EhQ==
-  dependencies:
-    "@vue/compiler-core" "3.4.38"
-    "@vue/shared" "3.4.38"
-
-"@vue/compiler-sfc@3.4.38":
-  version "3.4.38"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.4.38.tgz#954c3f6777bbbcca28771ba59b795f12f76ef188"
-  integrity sha512-s5QfZ+9PzPh3T5H4hsQDJtI8x7zdJaew/dCGgqZ2630XdzaZ3AD8xGZfBqpT8oaD/p2eedd+pL8tD5vvt5ZYJQ==
-  dependencies:
-    "@babel/parser" "^7.24.7"
-    "@vue/compiler-core" "3.4.38"
-    "@vue/compiler-dom" "3.4.38"
-    "@vue/compiler-ssr" "3.4.38"
-    "@vue/shared" "3.4.38"
-    estree-walker "^2.0.2"
-    magic-string "^0.30.10"
-    postcss "^8.4.40"
-    source-map-js "^1.2.0"
-
-"@vue/compiler-sfc@^3.1.0", "@vue/compiler-sfc@^3.4.15":
+"@vue/compiler-sfc@3.4.27", "@vue/compiler-sfc@^3.1.0", "@vue/compiler-sfc@^3.4.15":
   version "3.4.27"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.4.27.tgz#399cac1b75c6737bf5440dc9cf3c385bb2959701"
   integrity sha512-nDwntUEADssW8e0rrmE0+OrONwmRlegDA1pD6QhVeXxjIytV03yDqTey9SBDiALsvAd5U4ZrEKbMyVXhX6mCGA==
@@ -1765,67 +1700,48 @@
     "@vue/compiler-dom" "3.4.27"
     "@vue/shared" "3.4.27"
 
-"@vue/compiler-ssr@3.4.38":
-  version "3.4.38"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.4.38.tgz#9ded18f6d9c8b2440039a58492cfff36fa1a7774"
-  integrity sha512-YXznKFQ8dxYpAz9zLuVvfcXhc31FSPFDcqr0kyujbOwNhlmaNvL2QfIy+RZeJgSn5Fk54CWoEUeW+NVBAogGaw==
-  dependencies:
-    "@vue/compiler-dom" "3.4.38"
-    "@vue/shared" "3.4.38"
-
-"@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.5.0":
+"@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.5.0", "@vue/devtools-api@^6.5.1":
   version "6.6.1"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.1.tgz#7c14346383751d9f6ad4bea0963245b30220ef83"
   integrity sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA==
 
-"@vue/devtools-api@^6.6.3":
-  version "6.6.3"
-  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.3.tgz#b23a588154cba8986bba82b6e1d0248bde3fd1a0"
-  integrity sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw==
-
-"@vue/reactivity@3.4.38":
-  version "3.4.38"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.4.38.tgz#ec2d549f4b831cd03d0baabf7d77e840b8536000"
-  integrity sha512-4vl4wMMVniLsSYYeldAKzbk72+D3hUnkw9z8lDeJacTxAkXeDAP1uE9xr2+aKIN0ipOL8EG2GPouVTH6yF7Gnw==
+"@vue/reactivity@3.4.27":
+  version "3.4.27"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.4.27.tgz#6ece72331bf719953f5eaa95ec60b2b8d49e3791"
+  integrity sha512-kK0g4NknW6JX2yySLpsm2jlunZJl2/RJGZ0H9ddHdfBVHcNzxmQ0sS0b09ipmBoQpY8JM2KmUw+a6sO8Zo+zIA==
   dependencies:
-    "@vue/shared" "3.4.38"
+    "@vue/shared" "3.4.27"
 
-"@vue/runtime-core@3.4.38":
-  version "3.4.38"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.4.38.tgz#bead9085e9a1c5a446e27d74ffb450f9261cf097"
-  integrity sha512-21z3wA99EABtuf+O3IhdxP0iHgkBs1vuoCAsCKLVJPEjpVqvblwBnTj42vzHRlWDCyxu9ptDm7sI2ZMcWrQqlA==
+"@vue/runtime-core@3.4.27":
+  version "3.4.27"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.4.27.tgz#1b6e1d71e4604ba7442dd25ed22e4a1fc6adbbda"
+  integrity sha512-7aYA9GEbOOdviqVvcuweTLe5Za4qBZkUY7SvET6vE8kyypxVgaT1ixHLg4urtOlrApdgcdgHoTZCUuTGap/5WA==
   dependencies:
-    "@vue/reactivity" "3.4.38"
-    "@vue/shared" "3.4.38"
+    "@vue/reactivity" "3.4.27"
+    "@vue/shared" "3.4.27"
 
-"@vue/runtime-dom@3.4.38":
-  version "3.4.38"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.4.38.tgz#52678ba0b85f94400a0a9c8dd23ddef4dd65657d"
-  integrity sha512-afZzmUreU7vKwKsV17H1NDThEEmdYI+GCAK/KY1U957Ig2NATPVjCROv61R19fjZNzMmiU03n79OMnXyJVN0UA==
+"@vue/runtime-dom@3.4.27":
+  version "3.4.27"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.4.27.tgz#fe8d1ce9bbe8921d5dd0ad5c10df0e04ef7a5ee7"
+  integrity sha512-ScOmP70/3NPM+TW9hvVAz6VWWtZJqkbdf7w6ySsws+EsqtHvkhxaWLecrTorFxsawelM5Ys9FnDEMt6BPBDS0Q==
   dependencies:
-    "@vue/reactivity" "3.4.38"
-    "@vue/runtime-core" "3.4.38"
-    "@vue/shared" "3.4.38"
+    "@vue/runtime-core" "3.4.27"
+    "@vue/shared" "3.4.27"
     csstype "^3.1.3"
 
-"@vue/server-renderer@3.4.38":
-  version "3.4.38"
-  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.4.38.tgz#457401ef2b0f969156702061e56915acecc9fe2c"
-  integrity sha512-NggOTr82FbPEkkUvBm4fTGcwUY8UuTsnWC/L2YZBmvaQ4C4Jl/Ao4HHTB+l7WnFCt5M/dN3l0XLuyjzswGYVCA==
+"@vue/server-renderer@3.4.27":
+  version "3.4.27"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.4.27.tgz#3306176f37e648ba665f97dda3ce705687be63d2"
+  integrity sha512-dlAMEuvmeA3rJsOMJ2J1kXU7o7pOxgsNHVr9K8hB3ImIkSuBrIdy0vF66h8gf8Tuinf1TK3mPAz2+2sqyf3KzA==
   dependencies:
-    "@vue/compiler-ssr" "3.4.38"
-    "@vue/shared" "3.4.38"
+    "@vue/compiler-ssr" "3.4.27"
+    "@vue/shared" "3.4.27"
 
 "@vue/shared@3.4.27":
   version "3.4.27"
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.27.tgz#f05e3cd107d157354bb4ae7a7b5fc9cf73c63b50"
   integrity sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA==
 
-"@vue/shared@3.4.38":
-  version "3.4.38"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.38.tgz#552a6770098bfd556fa3e2c686c9d3b4f4cd94c2"
-  integrity sha512-q0xCiLkuWWQLzVrecPb0RMsNWyxICOjPrcrwxTUEHb1fsnvni4dcuyG7RT/Ie7VPTvnjzIaWzRMUBsrqNj/hhw==
-
 "@vue/test-utils@^2.0.2":
   version "2.4.6"
   resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.4.6.tgz#7d534e70c4319d2a587d6a3b45a39e9695ade03c"
@@ -6590,15 +6506,6 @@ postcss@^8.2.14, postcss@^8.4.0, postcss@^8.4.19, postcss@^8.4.33, postcss@^8.4.
     picocolors "^1.0.0"
     source-map-js "^1.2.0"
 
-postcss@^8.4.40:
-  version "8.4.41"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.41.tgz#d6104d3ba272d882fe18fc07d15dc2da62fa2681"
-  integrity sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==
-  dependencies:
-    nanoid "^3.3.7"
-    picocolors "^1.0.1"
-    source-map-js "^1.2.0"
-
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -7390,7 +7297,16 @@ streamroller@^3.1.5:
     debug "^4.3.4"
     fs-extra "^8.1.0"
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -7477,7 +7393,14 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -8128,13 +8051,13 @@ vue-eslint-parser@^9.4.2:
     lodash "^4.17.21"
     semver "^7.3.6"
 
-vue-i18n@^9.14.0:
-  version "9.14.0"
-  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.14.0.tgz#d6f1b3d95bfc4f40e630ff9456c78ab5becfd933"
-  integrity sha512-LxmpRuCt2rI8gqU+kxeflRZMQn4D5+4M3oP3PWZdowW/ePJraHqhF7p4CuaME52mUxdw3Mmy2yAUKgfZYgCRjA==
+vue-i18n@^9.2.2:
+  version "9.13.1"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.13.1.tgz#a292c8021b7be604ebfca5609ae1f8fafe5c36d7"
+  integrity sha512-mh0GIxx0wPtPlcB1q4k277y0iKgo25xmDPWioVVYanjPufDBpvu5ySTjP5wOrSvlYQ2m1xI+CFhGdauv/61uQg==
   dependencies:
-    "@intlify/core-base" "9.14.0"
-    "@intlify/shared" "9.14.0"
+    "@intlify/core-base" "9.13.1"
+    "@intlify/shared" "9.13.1"
     "@vue/devtools-api" "^6.5.0"
 
 vue-loader@^17.4.2:
@@ -8146,12 +8069,12 @@ vue-loader@^17.4.2:
     hash-sum "^2.0.0"
     watchpack "^2.4.0"
 
-vue-router@^4.4.3:
-  version "4.4.3"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.4.3.tgz#58a39dc804632bfb6d26f052aa8f6718bd130299"
-  integrity sha512-sv6wmNKx2j3aqJQDMxLFzs/u/mjA9Z5LCgy6BE0f7yFWMjrPLnS/sPNn8ARY/FXw6byV18EFutn5lTO6+UsV5A==
+vue-router@^4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.3.2.tgz#08096c7765dacc6832f58e35f7a081a8b34116a7"
+  integrity sha512-hKQJ1vDAZ5LVkKEnHhmm1f9pMiWIBNGF5AwU67PdH7TyXCj/a4hTccuUuYCAMgJK6rO/NVYtQIEN3yL8CECa7Q==
   dependencies:
-    "@vue/devtools-api" "^6.6.3"
+    "@vue/devtools-api" "^6.5.1"
 
 vue-style-loader@^4.1.3:
   version "4.1.3"
@@ -8169,16 +8092,16 @@ vue-template-compiler@^2.7.16:
     de-indent "^1.0.2"
     he "^1.2.0"
 
-vue@^3.4.38:
-  version "3.4.38"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.4.38.tgz#0ccbb64ed03ef3c4ab73e540793290b18e7c4236"
-  integrity sha512-f0ZgN+mZ5KFgVv9wz0f4OgVKukoXtS3nwET4c2vLBGQR50aI8G0cqbFtLlX9Yiyg3LFGBitruPHt2PxwTduJEw==
+vue@^3.2.31:
+  version "3.4.27"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.4.27.tgz#40b7d929d3e53f427f7f5945386234d2854cc2a1"
+  integrity sha512-8s/56uK6r01r1icG/aEOHqyMVxd1bkYcSe9j8HcKtr/xTOFWvnzIVTehNW+5Yt89f+DLBe4A569pnZLS5HzAMA==
   dependencies:
-    "@vue/compiler-dom" "3.4.38"
-    "@vue/compiler-sfc" "3.4.38"
-    "@vue/runtime-dom" "3.4.38"
-    "@vue/server-renderer" "3.4.38"
-    "@vue/shared" "3.4.38"
+    "@vue/compiler-dom" "3.4.27"
+    "@vue/compiler-sfc" "3.4.27"
+    "@vue/runtime-dom" "3.4.27"
+    "@vue/server-renderer" "3.4.27"
+    "@vue/shared" "3.4.27"
 
 vuex@^4.1.0:
   version "4.1.0"
@@ -8577,8 +8500,7 @@ workerpool@6.2.1:
   resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.2.1.tgz#46fc150c17d826b86a008e5a4508656777e9c343"
   integrity sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
-  name wrap-ansi-cjs
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -8596,6 +8518,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"