From 56a59e1b557f935488e1e0c564c06a42730fe824 Mon Sep 17 00:00:00 2001
From: ilja <git@ilja.space>
Date: Mon, 5 Aug 2024 11:52:48 +0200
Subject: [PATCH] fill in data-mfm- variables

Things like `speed=0.1s` now work

I also noticed a class was set on StatusBody, but we don't use it, we use StatusContent.
Therefor I removed it now.

We do still pass the setting through StatusBody to RichContent bc it's used there to decide to not show greentext for arrows when MFM was used.
Note that while this setting still works
* You have to refresh the page to see it working (was already like this, so I didn't touch it here)
* It explicitly checks for content type. If womeone provides MFM-like HTML, then it will still show as greentext if that option is enabled
  I think it's a bit inconsistent, but otoh, the inconsistency to me seems more that we ignore the greentext option for one input type specifically

I do still notice generall bugs with MFM.
* Position doesn't seem to work, neither does scale.
* There also seems to be a regression where custom emojis don't become larger any more with e.g. `$[x2 :hehe: ]`

I don't assume the regression is made in this commit, so I add this already. The rest needs to be fixed before merging.
---
 src/components/rich_content/rich_content.jsx | 15 +++++++++++++++
 src/components/status_body/status_body.vue   |  2 +-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index 0da7f3de..0739afb3 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -191,6 +191,21 @@ export default {
             if (this.handleLinks && attrs?.['class']?.includes?.('h-card')) {
               return ['', children.map(processItem), '']
             }
+            // Turn data-mfm- attributes into a string for the `style` attribute
+            // If they have a value different than `true`, they need to be added to `style`
+            // e.g. `attrs={'data-mfm-some': '1deg', 'data-mfm-thing': '5s'}` => "--mfm-some: 1deg;--mfm-thing: 5s;"
+            let mfm_style = Object.keys(attrs).filter(
+              (key) => key.startsWith('data-mfm-') && attrs[key] !== true
+            ).map(
+              (key) => '--mfm-' + key.substr(9) + ': ' + attrs[key] + ';'
+            ).reduce((a,v) => a+v, "")
+            if (mfm_style !== "") {
+              return [
+                opener.slice(0,-1) + " style=\"" + mfm_style + "\">",
+                children.map(processItem),
+                closer
+              ]
+            }
         }
 
         if (children !== undefined) {
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index 882b38c5..3002110d 100644
--- a/src/components/status_body/status_body.vue
+++ b/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