From 048cd549ddca42627a8efb34b30d5e1dcc3469b3 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Sun, 29 Jan 2023 15:36:07 +0100
Subject: [PATCH 01/20] client: add Markdown component

---
 packages/client/package.json                |  4 +++
 packages/client/src/components/markdown.vue | 31 +++++++++++++++++++++
 packages/client/src/pages/page.vue          |  3 +-
 3 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 packages/client/src/components/markdown.vue

diff --git a/packages/client/package.json b/packages/client/package.json
index 545c58c9f..aee0b1f2b 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -33,12 +33,14 @@
 		"insert-text-at-cursor": "0.3.0",
 		"json5": "2.2.1",
 		"katex": "0.16.0",
+		"marked": "4.0.8",
 		"matter-js": "0.18.0",
 		"mfm-js": "0.23.3",
 		"photoswipe": "5.2.8",
 		"prismjs": "1.28.0",
 		"punycode": "2.1.1",
 		"sass": "1.53.0",
+		"sanitize-html": "2.8.0",
 		"stringz": "2.1.0",
 		"syuilo-password-strength": "0.0.1",
 		"talisman": "^1.1.4",
@@ -57,8 +59,10 @@
 	},
 	"devDependencies": {
 		"@types/katex": "0.14.0",
+		"@types/marked": "4.0.8",
 		"@types/matter-js": "0.17.7",
 		"@types/punycode": "2.1.0",
+		"@types/sanitize-html": "2.8.0",
 		"@types/throttle-debounce": "5.0.0",
 		"@types/tinycolor2": "1.4.3",
 		"@types/uuid": "8.3.4",
diff --git a/packages/client/src/components/markdown.vue b/packages/client/src/components/markdown.vue
new file mode 100644
index 000000000..258a0e52b
--- /dev/null
+++ b/packages/client/src/components/markdown.vue
@@ -0,0 +1,31 @@
+<template>
+<!-- eslint-disable-next-line vue/no-v-html -->
+<span v-html="rendered"></span>
+</template>
+
+<script lang="ts" setup>
+import { marked } from 'marked'
+import sanitizeHtml from 'sanitize-html';
+import * as foundkey from 'foundkey-js';
+
+const props = defineProps<{
+	text: string;
+	author?: foundkey.entities.User;
+	customEmojis?: foundkey.entities.CustomEmoji[];
+	isNote?: boolean;
+}>();
+
+// TODO use extensions
+// marked.use(...);
+
+const rendered = sanitizeHtml(marked(props.text), {
+	allowedTags: sanitizeHtml.defaults.allowedTags.concat([ 'img' ]),
+	allowedAttributes: {
+		a: [ 'href', 'name', 'target' ],
+		img: [ 'src', 'srcset', 'alt', 'title', 'width', 'height', 'loading' ],
+		span: [ 'class', 'data-*' ],
+	},
+	allowedSchemes: sanitizeHtml.defaults.allowedSchemes.concat([ 'gopher', 'gemini' ]),
+	disallowedTagsMode: 'escape',
+});
+</script>
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index ebbd930f6..ca36e0e01 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -9,7 +9,7 @@
 						<img v-if="page.eyeCatchingImageId" :src="page.eyeCatchingImage.url"/>
 					</div>
 					<div class="content" :class="{ center: page.alignCenter, serif: page.font === 'serif' }">
-						<Mfm :text="page.text" :is-note="false"/>
+						<Markdown :text="page.text" :is-note="false"/>
 					</div>
 					<div class="actions">
 						<div class="like">
@@ -65,6 +65,7 @@ import MkFollowButton from '@/components/follow-button.vue';
 import MkContainer from '@/components/ui/container.vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import MkPagePreview from '@/components/page-preview.vue';
+import Markdown from '@/components/markdown.vue';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 
-- 
2.34.1


From f5c2fc5f14f3277ccf65775f2e6636930c96ba26 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Sun, 5 Feb 2023 23:34:10 +0100
Subject: [PATCH 02/20] client: hint at markdown support

---
 .../client/src/components/form/textarea.vue   | 44 ++++++++++++++-----
 packages/client/src/pages/page-editor.vue     |  2 +-
 2 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/packages/client/src/components/form/textarea.vue b/packages/client/src/components/form/textarea.vue
index b41ddf9e0..ceb0d50fe 100644
--- a/packages/client/src/components/form/textarea.vue
+++ b/packages/client/src/components/form/textarea.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="adhpbeos">
 	<div class="label" @click="focus"><slot name="label"></slot></div>
-	<div class="input" :class="{ disabled, focused, tall, pre }">
+	<div class="input" :class="{ disabled, focused, tall, pre, markdown }">
 		<textarea
 			ref="inputEl"
 			v-model="v"
@@ -20,6 +20,10 @@
 			@keydown="onKeydown($event)"
 			@input="onInput"
 		></textarea>
+		<a v-if="markdown" href="/mfm-cheat-sheet" class="md-hint">
+			<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 208 128"><path d="M193 128H15a15 15 0 0 1-15-15V15A15 15 0 0 1 15 0h178a15 15 0 0 1 15 15v98a15 15 0 0 1-15 15zM50 98V59l20 25 20-25v39h20V30H90L70 55 50 30H30v68zm134-34h-20V30h-20v34h-20l30 35z"/></svg>
+			Markdown supported
+		</a>
 	</div>
 	<div class="caption"><slot name="caption"></slot></div>
 
@@ -56,6 +60,7 @@ const props = withDefaults(defineProps<{
 	debounce?: boolean;
 	manualSave?: boolean;
 	max?: number;
+	markdown?: boolean;
 }>(), {
 	pattern: undefined,
 	placeholder: '',
@@ -63,6 +68,7 @@ const props = withDefaults(defineProps<{
 	tall: false,
 	pre: false,
 	manualSave: false,
+	markdown: false,
 });
 
 const { modelValue } = toRefs(props);
@@ -166,10 +172,8 @@ onMounted(() => {
 			}
 		}
 
-		&.focused {
-			> textarea {
-				border-color: var(--accent) !important;
-			}
+		&.focused > textarea {
+			border-color: var(--accent) !important;
 		}
 
 		&.disabled {
@@ -180,15 +184,33 @@ onMounted(() => {
 			}
 		}
 
-		&.tall {
-			> textarea {
-				min-height: 200px;
-			}
+		&.tall > textarea {
+			min-height: 200px;
 		}
 
-		&.pre {
+		&.pre > textarea {
+			white-space: pre;
+		}
+
+		&.markdown {
 			> textarea {
-				white-space: pre;
+				border-bottom-right-radius: 0;
+				border-bottom-left-radius: 0;
+				border-bottom-color: var(--fg);
+			}
+
+			> .md-hint {
+				background-color: var(--panel);
+				border-bottom-right-radius: 6px;
+				border-bottom-left-radius: 6px;
+				padding: .3em;
+				display: block;
+
+				> svg {
+					height: .7em;
+					fill: var(--fg);
+					padding: 0 .3em;
+				}
 			}
 		}
 	}
diff --git a/packages/client/src/pages/page-editor.vue b/packages/client/src/pages/page-editor.vue
index 9763e6466..370b929ad 100644
--- a/packages/client/src/pages/page-editor.vue
+++ b/packages/client/src/pages/page-editor.vue
@@ -45,7 +45,7 @@
 		</div>
 
 		<div v-else-if="tab === 'contents'">
-			<MkTextarea v-model="text" :readonly="readonly"/>
+			<MkTextarea v-model="text" :readonly="readonly" markdown/>
 		</div>
 	</MkSpacer>
 </MkStickyContainer>
-- 
2.34.1


From ae8946378fc0aa74a20b180a62512aba1ef9b302 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Sun, 12 Feb 2023 13:30:36 +0100
Subject: [PATCH 03/20] chore: update package manager files

---
 packages/client/package.json |  2 +-
 yarn.lock                    | 95 +++++++++++++++++++++++++++++++++++-
 2 files changed, 95 insertions(+), 2 deletions(-)

diff --git a/packages/client/package.json b/packages/client/package.json
index aee0b1f2b..9ee93b00e 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -39,8 +39,8 @@
 		"photoswipe": "5.2.8",
 		"prismjs": "1.28.0",
 		"punycode": "2.1.1",
-		"sass": "1.53.0",
 		"sanitize-html": "2.8.0",
+		"sass": "1.53.0",
 		"stringz": "2.1.0",
 		"syuilo-password-strength": "0.0.1",
 		"talisman": "^1.1.4",
diff --git a/yarn.lock b/yarn.lock
index e4e95a074..f42aa300f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2146,6 +2146,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/marked@npm:4.0.8":
+  version: 4.0.8
+  resolution: "@types/marked@npm:4.0.8"
+  checksum: 68278fa7acaa5d920cdc239d675b5daf842e0ad4779e4848cd617d9baf2ac1afccb5a264c331e37d80031d647e1640cb983cd31e73d45b28552670b4853fad8e
+  languageName: node
+  linkType: hard
+
 "@types/matter-js@npm:0.17.7":
   version: 0.17.7
   resolution: "@types/matter-js@npm:0.17.7"
@@ -2364,6 +2371,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/sanitize-html@npm:2.8.0":
+  version: 2.8.0
+  resolution: "@types/sanitize-html@npm:2.8.0"
+  dependencies:
+    htmlparser2: ^8.0.0
+  checksum: 6e583cac673832536fac8da53890073f753baf2c49826fd0c2831e615cb5527692d03b2b5ba9eb8caf8694de4bfb1c31fd12398d2b68331725590a6ceb8f82fe
+  languageName: node
+  linkType: hard
+
 "@types/semver@npm:7.3.12":
   version: 7.3.12
   resolution: "@types/semver@npm:7.3.12"
@@ -4688,8 +4704,10 @@ __metadata:
     "@rollup/pluginutils": ^4.2.1
     "@syuilo/aiscript": 0.11.1
     "@types/katex": 0.14.0
+    "@types/marked": 4.0.8
     "@types/matter-js": 0.17.7
     "@types/punycode": 2.1.0
+    "@types/sanitize-html": 2.8.0
     "@types/throttle-debounce": 5.0.0
     "@types/tinycolor2": 1.4.3
     "@types/uuid": 8.3.4
@@ -4719,11 +4737,13 @@ __metadata:
     insert-text-at-cursor: 0.3.0
     json5: 2.2.1
     katex: 0.16.0
+    marked: 4.0.8
     matter-js: 0.18.0
     mfm-js: 0.23.3
     photoswipe: 5.2.8
     prismjs: 1.28.0
     punycode: 2.1.1
+    sanitize-html: 2.8.0
     sass: 1.53.0
     stringz: 2.1.0
     syuilo-password-strength: 0.0.1
@@ -5982,6 +6002,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dom-serializer@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "dom-serializer@npm:2.0.0"
+  dependencies:
+    domelementtype: ^2.3.0
+    domhandler: ^5.0.2
+    entities: ^4.2.0
+  checksum: cd1810544fd8cdfbd51fa2c0c1128ec3a13ba92f14e61b7650b5de421b88205fd2e3f0cc6ace82f13334114addb90ed1c2f23074a51770a8e9c1273acbc7f3e6
+  languageName: node
+  linkType: hard
+
 "dom-serializer@npm:~0.1.0":
   version: 0.1.1
   resolution: "dom-serializer@npm:0.1.1"
@@ -5999,7 +6030,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"domelementtype@npm:^2.0.1, domelementtype@npm:^2.2.0":
+"domelementtype@npm:^2.0.1, domelementtype@npm:^2.2.0, domelementtype@npm:^2.3.0":
   version: 2.3.0
   resolution: "domelementtype@npm:2.3.0"
   checksum: ee837a318ff702622f383409d1f5b25dd1024b692ef64d3096ff702e26339f8e345820f29a68bcdcea8cfee3531776b3382651232fbeae95612d6f0a75efb4f6
@@ -6042,6 +6073,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"domhandler@npm:^5.0.1, domhandler@npm:^5.0.2":
+  version: 5.0.3
+  resolution: "domhandler@npm:5.0.3"
+  dependencies:
+    domelementtype: ^2.3.0
+  checksum: 0f58f4a6af63e6f3a4320aa446d28b5790a009018707bce2859dcb1d21144c7876482b5188395a188dfa974238c019e0a1e610d2fc269a12b2c192ea2b0b131c
+  languageName: node
+  linkType: hard
+
 "domutils@npm:1.5.1":
   version: 1.5.1
   resolution: "domutils@npm:1.5.1"
@@ -6073,6 +6113,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"domutils@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "domutils@npm:3.0.1"
+  dependencies:
+    dom-serializer: ^2.0.0
+    domelementtype: ^2.3.0
+    domhandler: ^5.0.1
+  checksum: 23aa7a840572d395220e173cb6263b0d028596e3950100520870a125af33ff819e6f609e1606d6f7d73bd9e7feb03bb404286e57a39063b5384c62b724d987b3
+  languageName: node
+  linkType: hard
+
 "dotenv@npm:^16.0.0":
   version: 16.0.1
   resolution: "dotenv@npm:16.0.1"
@@ -6269,6 +6320,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"entities@npm:^4.2.0":
+  version: 4.4.0
+  resolution: "entities@npm:4.4.0"
+  checksum: 84d250329f4b56b40fa93ed067b194db21e8815e4eb9b59f43a086f0ecd342814f6bc483de8a77da5d64e0f626033192b1b4f1792232a7ea6b970ebe0f3187c2
+  languageName: node
+  linkType: hard
+
 "entities@npm:^4.3.0":
   version: 4.3.1
   resolution: "entities@npm:4.3.1"
@@ -8770,6 +8828,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"htmlparser2@npm:^8.0.0":
+  version: 8.0.1
+  resolution: "htmlparser2@npm:8.0.1"
+  dependencies:
+    domelementtype: ^2.3.0
+    domhandler: ^5.0.2
+    domutils: ^3.0.1
+    entities: ^4.3.0
+  checksum: 06d5c71e8313597722bc429ae2a7a8333d77bd3ab07ccb916628384b37332027b047f8619448d8f4a3312b6609c6ea3302a4e77435d859e9e686999e6699ca39
+  languageName: node
+  linkType: hard
+
 "http-assert@npm:^1.3.0":
   version: 1.5.0
   resolution: "http-assert@npm:1.5.0"
@@ -11597,6 +11667,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"marked@npm:4.0.8":
+  version: 4.0.8
+  resolution: "marked@npm:4.0.8"
+  bin:
+    marked: bin/marked.js
+  checksum: b2dba00757640724a3ba93d3ceeffbd5d5ef91f03d826da66375cb07510e7396a4d0d86e216dc9d9da5e84a5368864ab9f37cfc559fb2ca492f65603db85cc34
+  languageName: node
+  linkType: hard
+
 "matchdep@npm:^2.0.0":
   version: 2.0.0
   resolution: "matchdep@npm:2.0.0"
@@ -15053,6 +15132,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sanitize-html@npm:2.8.0":
+  version: 2.8.0
+  resolution: "sanitize-html@npm:2.8.0"
+  dependencies:
+    deepmerge: ^4.2.2
+    escape-string-regexp: ^4.0.0
+    htmlparser2: ^8.0.0
+    is-plain-object: ^5.0.0
+    parse-srcset: ^1.0.2
+    postcss: ^8.3.11
+  checksum: 3617dc6a99e87c5875e3dfd80df77ca273ab0729f825ddbffcf40a7dd353208ccfe7b0bb01ac48d03e18c2dd88f7bb934f689b6e4393d7564ee8a4ec039bc840
+  languageName: node
+  linkType: hard
+
 "sass@npm:1.53.0":
   version: 1.53.0
   resolution: "sass@npm:1.53.0"
-- 
2.34.1


From f6387323c2af73da2d8d6aedf1181ba3c745edcf Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Sun, 12 Feb 2023 13:44:16 +0100
Subject: [PATCH 04/20] separate markdown parsing and rendering

---
 packages/client/src/components/markdown.ts  |  58 +++++++
 packages/client/src/components/markdown.vue |  31 ----
 packages/client/src/pages/page.vue          |   2 +-
 packages/client/src/scripts/markdown.ts     | 180 ++++++++++++++++++++
 4 files changed, 239 insertions(+), 32 deletions(-)
 create mode 100644 packages/client/src/components/markdown.ts
 delete mode 100644 packages/client/src/components/markdown.vue
 create mode 100644 packages/client/src/scripts/markdown.ts

diff --git a/packages/client/src/components/markdown.ts b/packages/client/src/components/markdown.ts
new file mode 100644
index 000000000..ea244c5a5
--- /dev/null
+++ b/packages/client/src/components/markdown.ts
@@ -0,0 +1,58 @@
+import { VNode, defineComponent, h } from 'vue';
+import * as foundkey from 'foundkey-js';
+import { markdownToDom } from '@/scripts/markdown';
+import { host } from '@/config';
+import MkMention from '@/components/mention.vue';
+import MkSparkle from '@/components/sparkle.vue';
+import MkEmoji from '@/components/global/emoji.vue';
+
+export const Markdown = defineComponent({
+	props: {
+		text: {
+			type: String,
+			required: true,
+		},
+		author: Object, // foundkey.entities.User
+		customEmojis: Array, // foundkey.entities.CustomEmoji[]
+		isNote: Boolean,
+	},
+
+	render() {
+		if (!this.text) return;
+		const dom = markdownToDom(this.text);
+
+		const mapNodes = (nodes: NodeList): (VNode | string)[] => Array.from(nodes).map(mapNode);
+
+		const mapNode = (node: Node): VNode | string => {
+			switch (node.nodeName) {
+				case '#text':
+					return node.textContent;
+				case 'SPAN':
+					if (node.classList.contains('mfm-sparkle')) {
+						return h(MkSparkle, {}, mapNodes(node.childNodes));
+					} else if (node.classList.contains('mfm-mention')) {
+						return h(MkMention, {
+							username: node.querySelector('.mfm-user').textContent,
+							host: node.querySelector('.mfm-host')?.textContent ?? this.author?.host ?? host,
+						});
+					} else if (node.classList.contains('mfm-emoji')) {
+						return h(MkEmoji, { emoji: node.textContent, customEmojis: this.customEmojis });
+					}
+					// fallthrough, just handle like ordinary nodes
+				default:
+					const attrs = Array.from(node.attributes)
+						.reduce((acc, {name, value}) => {
+							acc[name] = value;
+							return acc;
+						}, {});
+					return h(node.nodeName, attrs, mapNodes(node.childNodes));
+			}
+		};
+
+		return h(
+			'span',
+			{ class: 'markdown-container' },
+			mapNodes(dom.childNodes)
+		);
+	},
+});
diff --git a/packages/client/src/components/markdown.vue b/packages/client/src/components/markdown.vue
deleted file mode 100644
index 258a0e52b..000000000
--- a/packages/client/src/components/markdown.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-<!-- eslint-disable-next-line vue/no-v-html -->
-<span v-html="rendered"></span>
-</template>
-
-<script lang="ts" setup>
-import { marked } from 'marked'
-import sanitizeHtml from 'sanitize-html';
-import * as foundkey from 'foundkey-js';
-
-const props = defineProps<{
-	text: string;
-	author?: foundkey.entities.User;
-	customEmojis?: foundkey.entities.CustomEmoji[];
-	isNote?: boolean;
-}>();
-
-// TODO use extensions
-// marked.use(...);
-
-const rendered = sanitizeHtml(marked(props.text), {
-	allowedTags: sanitizeHtml.defaults.allowedTags.concat([ 'img' ]),
-	allowedAttributes: {
-		a: [ 'href', 'name', 'target' ],
-		img: [ 'src', 'srcset', 'alt', 'title', 'width', 'height', 'loading' ],
-		span: [ 'class', 'data-*' ],
-	},
-	allowedSchemes: sanitizeHtml.defaults.allowedSchemes.concat([ 'gopher', 'gemini' ]),
-	disallowedTagsMode: 'escape',
-});
-</script>
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index ca36e0e01..ac13dd894 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -65,7 +65,7 @@ import MkFollowButton from '@/components/follow-button.vue';
 import MkContainer from '@/components/ui/container.vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import MkPagePreview from '@/components/page-preview.vue';
-import Markdown from '@/components/markdown.vue';
+import { Markdown } from '@/components/markdown.ts';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 
diff --git a/packages/client/src/scripts/markdown.ts b/packages/client/src/scripts/markdown.ts
new file mode 100644
index 000000000..81d035863
--- /dev/null
+++ b/packages/client/src/scripts/markdown.ts
@@ -0,0 +1,180 @@
+import { marked } from 'marked';
+import sanitizeHtml from 'sanitize-html';
+import * as foundkey from 'foundkey-js';
+import { MFM_TAGS } from '@/scripts/mfm-tags';
+
+const sanitizerOptions = {
+	allowedTags: ["h1", "h2", "h3", "h4", "h5", "h6", "blockquote", "dd", "dl", "dt", "hr", "li", "ol", "p", "pre", "ul", "a", "b", "br", "code", "em", "i", "kbd", "mark", "q", "rp", "rt", "ruby", "s", "small", "span", "strong", "sub", "sup", "u", "wbr", "caption", "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", "img"],
+	allowedAttributes: {
+		a: [ 'href', 'name', 'target' ],
+		img: [ 'src', 'srcset', 'alt', 'title', 'width', 'height', 'loading' ],
+		span: [ 'class', 'style', 'data-mfm-*' ],
+	},
+	allowedClasses: {
+		span: [ /^mfm-/ ],
+	},
+	allowedStyles: {
+		span: {
+			'--mfm-speed': [/^\d*\.?\d+m?s$/],
+			'--mfm-deg': [/^\d*\.?\d+$/],
+		},
+	},
+	allowedSchemes: sanitizeHtml.defaults.allowedSchemes.concat([ 'gopher', 'gemini' ]),
+	disallowedTagsMode: 'escape',
+};
+
+const inputSanitizerOptions = {
+	// disallow <span>s in the input and thus try to make sure people
+	// don't sneak spoofed MFM spans in, which could upset the later processing
+	allowedTags: sanitizerOptions.allowedTags.filter(x => x != 'span'),
+	allowedSchemes: sanitizerOptions.allowedSchemes,
+	disallowedTagsMode: 'discard',
+};
+
+marked.setOptions({
+	gfm: true,
+	breaks: true,
+	xhtml: true,
+	// sanitizes the *input* HTML that is already in the markdown before
+	sanitizer: (html) => sanitizeHtml(html, inputSanitizerOptions),
+});
+marked.use({
+	extensions: [
+		{
+			name: 'center-tag',
+			level: 'block',
+			start(src) { return src.match(/^<center>/i)?.index; },
+			tokenizer(src) {
+				const match = src.match(/^<center>[\r\n]*(.*)[\r\n]*<\/center>/i);
+				if (match) return {
+					type: 'center-tag',
+					raw: match[0],
+					tokens: this.lexer.blockTokens(match[1]),
+				};
+			},
+			renderer(token) {
+				return '<span class="mfm-center">' + this.parser.parse(token.tokens) + '</span>';
+			},
+		},
+		{
+			name: 'mention',
+			level: 'inline',
+			start(src) { return src.match(/(^|\s)@/)?.index; },
+			tokenizer(src) {
+				const match = src.match(/^@([-_a-z0-9]+)(?:@(\p{L}+(?:[-.]*\p{L}+)*))?/iu);
+				if (!match) return;
+				
+				return {
+					type: 'mention',
+					raw: match[0],
+					user: match[1],
+					host: match.length < 2 ? null : match[2],
+				};
+			},
+			renderer(token) {
+				if (token.host) {
+					return `<span class="mfm-mention">@<span class="mfm-user">${token.user}</span>@<span class="mfm-host">${token.host}</span></span>`;
+				} else {
+					return `<span class="mfm-mention">@<span class="mfm-user">${token.user}</span></span>`;
+				}
+			},
+		},
+		{
+			name: 'custom-emoji',
+			level: 'inline',
+			start(src) { return src.match(/:[-a-z0-9_+]+:/i)?.index; },
+			tokenizer(src) {
+				const match = src.match(/^:([-a-z0-9_+]+):/i);
+				if (!match) return;
+
+				return {
+					type: 'custom-emoji',
+					raw: match[0],
+				};
+			},
+			renderer(token) {
+				return `<span class="mfm-emoji">${token.raw}</span>`;
+			},
+		},
+		{
+			name: 'mfm-function',
+			level: 'inline',
+			start(src) { return src.indexOf('$['); },
+			tokenizer(src) {
+				/* ABNF of the regex below, the regex matches the <mfm-fn> rule
+				name     = 1*(ALPHA / DIGIT / "_")                  ; one or more "word" characters, Ecmascripts \w
+
+				argument = <name> ["=" <name>]                      ; arguments are key = value pairs
+
+				mfm-fn   = "$[" <name>                              ; start of the function
+				           ["." <argument> *("," <argument>)]       ; optionally with parameters
+				            ; note that multiple arguments are separated with commas not dots
+				           SP <content> "]"                         ; end of the function
+				*/
+				const match = src.match(/^\$\[(\w+)(\.\w+(?:=\w+)?(?:,\w+(?:=\w+)?)*)? (.+)\]/);
+				if (!match || !MFM_TAGS.includes(match[1])) return;
+
+				let args = {};
+				if (match[2]) {
+					// parse args
+					match[2]
+						// slice off the initial dot
+						.slice(1)
+						// split arguments by comma
+						.split(',')
+						// split argument name and value
+						.map((arg) => {
+							console.log("mfm arg", arg);
+							if (arg.includes('=')) {
+								// split once at first equal sign
+								const equalsIdx = arg.indexOf('=');
+								return [arg.slice(0, equalsIdx), arg.slice(equalsIdx + 1)];
+							} else {
+								return [arg, null];
+							}
+						})
+						// save arguments
+						.forEach(([key, val]) => args[key] = val);
+				}
+
+				const token = {
+					type: 'mfm-function',
+					raw: match[0],
+					fn: match[1],
+					args,
+					tokens: [],
+				};
+				this.lexer.inline(match[3], token.tokens);
+				return token;
+			},
+			renderer(token) {
+				// arguments are mapped to `data-mfm-...` attributes for CSS selectors
+				const argsAttrs = Object.entries(token.args)
+					.reduce((acc, [key, value]) => {
+						if (value == null) {
+							return acc + ` data-mfm-${key}`;
+						} else {
+							return acc + ` data-mfm-${key}="${value}"`;
+						}
+					}, '');
+				// ... and also to CSS variables so the values can be accessed in CSS
+				const argsCss = Object.entries(token.args)
+					.reduce((acc, [key, value]) => {
+						if (value == null) {
+							return acc + ` --mfm-${key}: 1;`;
+						} else {
+							return acc + ` --mfm-${key}: ${value};`;
+						}
+					}, '');
+
+				return `<span class="mfm-${token.fn}" style="${argsCss}"${argsAttrs}>${this.parser.parseInline(token.tokens)}</span>`;
+			},
+		},
+	],
+});
+
+export function markdownToDom(text) {
+	const elem = document.createElement('span');
+	elem.innerHTML = sanitizeHtml(marked(text), sanitizerOptions);
+	return elem;
+}
-- 
2.34.1


From b22e627089e589b720f42a6b99e671f1bab8c643 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Sun, 12 Feb 2023 13:46:58 +0100
Subject: [PATCH 05/20] add MFM style sheet

---
 packages/client/src/init.ts  |   1 +
 packages/client/src/mfm.scss | 224 +++++++++++++++++++++++++++++++++++
 2 files changed, 225 insertions(+)
 create mode 100644 packages/client/src/mfm.scss

diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index eae153878..b2d573d43 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -3,6 +3,7 @@
  */
 
 import '@/style.scss';
+import '@/mfm.scss';
 
 //#region account indexedDB migration
 import { set } from '@/scripts/idb-proxy';
diff --git a/packages/client/src/mfm.scss b/packages/client/src/mfm.scss
new file mode 100644
index 000000000..2198b1438
--- /dev/null
+++ b/packages/client/src/mfm.scss
@@ -0,0 +1,224 @@
+.mfm-center {
+	display: block;
+	text-align: center;
+}
+
+.mfm-jelly {
+	animation: mfm-rubberBand var(--mfm-speed, 1s) linear infinte both;	
+}
+
+.mfm-twitch {
+	animation: mfm-twitch var(--mfm-speed, .5s) ease infinite;
+}
+
+.mfm-shake {
+	animation: mfm-shake var(--mfm-speed, .5s) ease infinite;
+}
+
+.mfm-spin {
+	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 {
+	animation: mfm-jump var(--mfm-speed, .75s) linear infinite;
+}
+
+.mfm-bounce {
+	animation: mfm-bounce var(--mfm-speed, .75s) linear infinite;
+	transform-origin: center bottom;
+}
+
+.mfm-flip {
+	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-rainbow {
+	animation: mfm-rainbow var(--mfm-speed, 1s) linear infinite;
+}
+
+.mfm-rotate {
+	transform: rotate(calc(var(--mfm-deg, 90) * 1deg));
+	transform-origin: center center;
+}
+
+.mfm-blur {
+	filter: blur(6px);
+	transition: filter 0.3s;
+
+	&:hover {
+		filter: blur(0px);
+	}
+}
+
+.mfm-tada {
+	animation: mfm-tada var(--mfm-speed, 1s) linear infinite both;
+	--mfm-zoom-size: 150%;
+}
+.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 {
+	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%;
+		}
+	}
+}
+
+/* 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); }
+}
+
+// const val = () => `translate(${Math.floor(Math.random() * 20) - 10}px, ${Math.floor(Math.random() * 20) - 10}px)`;
+// let css = '';
+// for (let i = 0; i <= 100; i += 5) { css += `${i}% { transform: ${val()} }\n`; }
+@keyframes mfm-twitch {
+	0% { transform: translate(7px, -2px) }
+	5% { transform: translate(-3px, 1px) }
+	10% { transform: translate(-7px, -1px) }
+	15% { transform: translate(0px, -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, 0px) }
+	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) }
+}
+
+// const val = () => `translate(${Math.floor(Math.random() * 6) - 3}px, ${Math.floor(Math.random() * 6) - 3}px) rotate(${Math.floor(Math.random() * 24) - 12}deg)`;
+// let css = '';
+// for (let i = 0; i <= 100; i += 5) { css += `${i}% { transform: ${val()} }\n`; }
+@keyframes mfm-shake {
+	0% { transform: translate(-3px, -1px) rotate(-8deg) }
+	5% { transform: translate(0px, -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(0px, -1px) rotate(-12deg) }
+	50% { transform: translate(1px, 2px) rotate(10deg) }
+	55% { transform: translate(0px, -3px) rotate(8deg) }
+	60% { transform: translate(1px, -1px) rotate(8deg) }
+	65% { transform: translate(0px, -1px) rotate(-7deg) }
+	70% { transform: translate(-1px, -3px) rotate(6deg) }
+	75% { transform: translate(0px, -2px) rotate(4deg) }
+	80% { transform: translate(-2px, -1px) rotate(3deg) }
+	85% { transform: translate(1px, -3px) rotate(-10deg) }
+	90% { transform: translate(1px, 0px) rotate(3deg) }
+	95% { transform: translate(-2px, 0px) rotate(-3deg) }
+	100% { transform: translate(2px, 1px) rotate(2deg) }
+}
+
+@keyframes mfm-rubberBand {
+	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%); }
+}
+
+@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); }
+}
-- 
2.34.1


From 636ac82bcc54b3179857ffbc03310d37971f1d95 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Sun, 12 Feb 2023 16:30:01 +0100
Subject: [PATCH 06/20] separate animated mfm

---
 packages/client/src/mfm.scss | 101 ++++++++++++++++++-----------------
 1 file changed, 52 insertions(+), 49 deletions(-)

diff --git a/packages/client/src/mfm.scss b/packages/client/src/mfm.scss
index 2198b1438..9013de6a5 100644
--- a/packages/client/src/mfm.scss
+++ b/packages/client/src/mfm.scss
@@ -3,43 +3,6 @@
 	text-align: center;
 }
 
-.mfm-jelly {
-	animation: mfm-rubberBand var(--mfm-speed, 1s) linear infinte both;	
-}
-
-.mfm-twitch {
-	animation: mfm-twitch var(--mfm-speed, .5s) ease infinite;
-}
-
-.mfm-shake {
-	animation: mfm-shake var(--mfm-speed, .5s) ease infinite;
-}
-
-.mfm-spin {
-	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 {
-	animation: mfm-jump var(--mfm-speed, .75s) linear infinite;
-}
-
-.mfm-bounce {
-	animation: mfm-bounce var(--mfm-speed, .75s) linear infinite;
-	transform-origin: center bottom;
-}
-
 .mfm-flip {
 	transform: scaleX(-1);
 }
@@ -69,15 +32,6 @@
 	font-family: math;
 }
 
-.mfm-rainbow {
-	animation: mfm-rainbow var(--mfm-speed, 1s) linear infinite;
-}
-
-.mfm-rotate {
-	transform: rotate(calc(var(--mfm-deg, 90) * 1deg));
-	transform-origin: center center;
-}
-
 .mfm-blur {
 	filter: blur(6px);
 	transition: filter 0.3s;
@@ -87,10 +41,11 @@
 	}
 }
 
-.mfm-tada {
-	animation: mfm-tada var(--mfm-speed, 1s) linear infinite both;
-	--mfm-zoom-size: 150%;
+.mfm-rotate {
+	transform: rotate(calc(var(--mfm-deg, 90) * 1deg));
+	transform-origin: center center;
 }
+
 .mfm-x2 {
 	--mfm-zoom-size: 200%;
 }
@@ -114,6 +69,54 @@
 	}
 }
 
+.animated-mfm {
+	.mfm-jelly {
+		animation: mfm-rubberBand var(--mfm-speed, 1s) linear infinte both;
+	}
+
+	.mfm-twitch {
+		animation: mfm-twitch var(--mfm-speed, .5s) ease infinite;
+	}
+
+	.mfm-shake {
+		animation: mfm-shake var(--mfm-speed, .5s) ease infinite;
+	}
+
+	.mfm-spin {
+		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 {
+		animation: mfm-jump var(--mfm-speed, .75s) linear infinite;
+	}
+
+	.mfm-bounce {
+		animation: mfm-bounce var(--mfm-speed, .75s) linear infinite;
+		transform-origin: center bottom;
+	}
+
+	.mfm-rainbow {
+		animation: mfm-rainbow var(--mfm-speed, 1s) linear infinite;
+	}
+
+	.mfm-tada {
+		animation: mfm-tada var(--mfm-speed, 1s) linear infinite both;
+		--mfm-zoom-size: 150%;
+	}
+}
+
 /* animation keyframes */
 
 @keyframes mfm-spin {
-- 
2.34.1


From 4ca3f4d8f25f6549e242dc425bcd93741fe46f77 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Sun, 12 Feb 2023 16:33:06 +0100
Subject: [PATCH 07/20] use MFM style sheet in MFM component too

This allows the MFM component to be simplified and use fewer inline styles.
---
 packages/client/src/components/mfm.ts | 146 ++++++--------------------
 packages/client/src/mfm.scss          |   9 +-
 2 files changed, 43 insertions(+), 112 deletions(-)

diff --git a/packages/client/src/components/mfm.ts b/packages/client/src/components/mfm.ts
index 2d04a9731..f2cee18e3 100644
--- a/packages/client/src/components/mfm.ts
+++ b/packages/client/src/components/mfm.ts
@@ -45,8 +45,7 @@ export default defineComponent({
 
 		const validTime = (t: string | true) => {
 			if (typeof t !== 'string') return null;
-
-			return t.match(/^[0-9.]+s$/) ? t : null;
+			return t.match(/^[0-9.]+m?s$/) ? t : null;
 		};
 
 		const genEl = (ast: mfm.MfmNode[]) => ast.map((token): VNode | VNode[] => {
@@ -82,140 +81,63 @@ export default defineComponent({
 				}
 
 				case 'fn': {
-					// TODO: CSSを文字列で組み立てていくと token.props.args.~~~ 経由でCSSインジェクションできるのでよしなにやる
-					let style;
+					const attributes = Object.keys(token.props.args).reduce((acc, x) => {
+						if (!['deg', 'speed', 'color'].includes(x)) acc['data-mfm-' + x] = true;
+						return acc;
+					}, {});
 					switch (token.props.name) {
-						case 'tada': {
-							const speed = validTime(token.props.args.speed) || '1s';
-							style = 'font-size: 150%;' + (this.$store.state.animatedMfm ? `animation: mfm-tada ${speed} linear infinite both;` : '');
-							break;
-						}
-						case 'jelly': {
-							const speed = validTime(token.props.args.speed) || '1s';
-							style = (this.$store.state.animatedMfm ? `animation: mfm-rubberBand ${speed} linear infinite both;` : '');
-							break;
-						}
-						case 'twitch': {
-							const speed = validTime(token.props.args.speed) || '0.5s';
-							style = this.$store.state.animatedMfm ? `animation: mfm-twitch ${speed} ease infinite;` : '';
-							break;
-						}
-						case 'shake': {
-							const speed = validTime(token.props.args.speed) || '0.5s';
-							style = this.$store.state.animatedMfm ? `animation: mfm-shake ${speed} ease infinite;` : '';
-							break;
-						}
-						case 'spin': {
-							const direction =
-								token.props.args.left ? 'reverse' :
-								token.props.args.alternate ? 'alternate' :
-								'normal';
-							const anime =
-								token.props.args.x ? 'mfm-spinX' :
-								token.props.args.y ? 'mfm-spinY' :
-								'mfm-spin';
-							const speed = validTime(token.props.args.speed) || '1.5s';
-							style = this.$store.state.animatedMfm ? `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};` : '';
-							break;
-						}
-						case 'jump': {
-							const speed = validTime(token.props.args.speed) || '0.75s';
-							style = this.$store.state.animatedMfm ? `animation: mfm-jump ${speed} linear infinite;` : '';
-							break;
-						}
-						case 'bounce': {
-							const speed = validTime(token.props.args.speed) || '0.75s';
-							style = this.$store.state.animatedMfm ? `animation: mfm-bounce ${speed} linear infinite; transform-origin: center bottom;` : '';
-							break;
-						}
-						case 'flip': {
-							const transform =
-								(token.props.args.h && token.props.args.v) ? 'scale(-1, -1)' :
-								token.props.args.v ? 'scaleY(-1)' :
-								'scaleX(-1)';
-							style = `transform: ${transform};`;
-							break;
-						}
-						case 'x2': {
-							return h('span', {
-								class: 'mfm-x2'
-							}, genEl(token.children));
-						}
-						case 'x3': {
-							return h('span', {
-								class: 'mfm-x3'
-							}, genEl(token.children));
-						}
-						case 'x4': {
-							return h('span', {
-								class: 'mfm-x4'
-							}, genEl(token.children));
-						}
-						case 'font': {
-							const family =
-								token.props.args.serif ? 'serif' :
-								token.props.args.monospace ? 'monospace' :
-								token.props.args.cursive ? 'cursive' :
-								token.props.args.fantasy ? 'fantasy' :
-								token.props.args.emoji ? 'emoji' :
-								token.props.args.math ? 'math' :
-								null;
-							if (family) style = `font-family: ${family};`;
-							break;
-						}
-						case 'blur': {
-							return h('span', {
-								class: '_mfm_blur_',
-							}, genEl(token.children));
-						}
-						case 'rainbow': {
-							const speed = validTime(token.props.args.speed) || '1s';
-							style = this.$store.state.animatedMfm ? `animation: mfm-rainbow ${speed} linear infinite;` : '';
-							break;
-						}
 						case 'sparkle': {
 							if (!this.$store.state.animatedMfm) {
 								return genEl(token.children);
 							}
 							return h(MkSparkle, {}, genEl(token.children));
 						}
-						case 'rotate': {
-							const degrees = (typeof token.props.args.deg === 'string' ? parseInt(token.props.args.deg) : null) || '90';
-							style = `transform: rotate(${degrees}deg); transform-origin: center center;`;
-							break;
-						}
 						case 'position': {
 							const x = parseFloat(token.props.args.x ?? '0');
 							const y = parseFloat(token.props.args.y ?? '0');
-							style = `transform: translate(${x}em, ${y}em);`;
+							attributes.style = `transform: translate(${x}em, ${y}em);`;
 							break;
 						}
 						case 'scale': {
 							const x = Math.min(parseFloat(token.props.args.x ?? '1'), 5);
 							const y = Math.min(parseFloat(token.props.args.y ?? '1'), 5);
-							style = `transform: scale(${x}, ${y});`;
+							attributes.style = `transform: scale(${x}, ${y});`;
 							break;
 						}
 						case 'fg': {
 							let color = token.props.args.color ?? 'f00';
 							if (!/^([0-9a-f]{3}){1,2}$/i.test(color)) color = 'f00';
-							style = `color: #${color};`;
+							attributes.style = `color: #${color};`;
 							break;
 						}
 						case 'bg': {
 							let color = token.props.args.color ?? '0f0';
 							if (!/^([0-9a-f]{3}){1,2}$/i.test(color)) color = '0f0';
-							style = `background-color: #${color};`;
+							attributes.style = `background-color: #${color};`;
 							break;
 						}
+						case 'bounce':
+						case 'jelly':
+						case 'jump':
+						case 'rainbow':
+						case 'shake':
+						case 'spin':
+						case 'tada':
+						case 'twitch':
+							if (token.props.args.speed) {
+								attributes.style = '--mfm-speed: ' + validTime(token.props.args.speed);
+							}
+							break;
+						case 'rotate':
+							if (!isNaN(parseInt(token.props.args.deg))) {
+								attributes.style = '--mfm-deg: ' + parseInt(token.props.args.deg);
+							}
+							break;
 					}
-					if (style == null) {
-						return h('span', {}, ['$[', token.props.name, ' ', ...genEl(token.children), ']']);
-					} else {
-						return h('span', {
-							style: 'display: inline-block;' + style,
-						}, genEl(token.children));
-					}
+					return h('span', {
+						class: 'mfm-' + token.props.name,
+						...attributes,
+					}, genEl(token.children));
 				}
 
 				case 'small': {
@@ -225,8 +147,8 @@ export default defineComponent({
 				}
 
 				case 'center': {
-					return h('div', {
-						style: 'text-align:center;',
+					return h('span', {
+						class: 'mfm-center',
 					}, genEl(token.children));
 				}
 
@@ -334,6 +256,8 @@ export default defineComponent({
 		}).flat();
 
 		// Parse ast to DOM
-		return h('span', genEl(ast));
+		return h('span', {
+			class: this.$store.state.animatedMfm ? 'animated-mfm' : '',
+		}, genEl(ast));
 	},
 });
diff --git a/packages/client/src/mfm.scss b/packages/client/src/mfm.scss
index 9013de6a5..02fabe94a 100644
--- a/packages/client/src/mfm.scss
+++ b/packages/client/src/mfm.scss
@@ -71,18 +71,22 @@
 
 .animated-mfm {
 	.mfm-jelly {
-		animation: mfm-rubberBand var(--mfm-speed, 1s) linear infinte both;
+		display: inline-block;
+		animation: mfm-rubberBand var(--mfm-speed, 1s) linear infinite both;
 	}
 
 	.mfm-twitch {
+		display: inline-block;
 		animation: mfm-twitch var(--mfm-speed, .5s) ease infinite;
 	}
 
 	.mfm-shake {
+		display: inline-block;
 		animation: mfm-shake var(--mfm-speed, .5s) ease infinite;
 	}
 
 	.mfm-spin {
+		display: inline-block;
 		animation: mfm-spin var(--mfm-speed, 1.5s) linear infinite;
 	}
 	.mfm-spin[data-mfm-y] {
@@ -99,10 +103,12 @@
 	}
 
 	.mfm-jump {
+		display: inline-block;
 		animation: mfm-jump var(--mfm-speed, .75s) linear infinite;
 	}
 
 	.mfm-bounce {
+		display: inline-block;
 		animation: mfm-bounce var(--mfm-speed, .75s) linear infinite;
 		transform-origin: center bottom;
 	}
@@ -112,6 +118,7 @@
 	}
 
 	.mfm-tada {
+		display: inline-block;
 		animation: mfm-tada var(--mfm-speed, 1s) linear infinite both;
 		--mfm-zoom-size: 150%;
 	}
-- 
2.34.1


From 5fe51d063c87341fdbe178249fd9820f96b5e572 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Sun, 12 Feb 2023 16:33:49 +0100
Subject: [PATCH 08/20] respect animated mfm switch for markdown too

---
 packages/client/src/components/markdown.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/markdown.ts b/packages/client/src/components/markdown.ts
index ea244c5a5..39e5b1948 100644
--- a/packages/client/src/components/markdown.ts
+++ b/packages/client/src/components/markdown.ts
@@ -51,7 +51,9 @@ export const Markdown = defineComponent({
 
 		return h(
 			'span',
-			{ class: 'markdown-container' },
+			{
+				class: 'markdown-container ' + (this.$store.state.animatedMfm ? 'animated-mfm' : ''),
+			},
 			mapNodes(dom.childNodes)
 		);
 	},
-- 
2.34.1


From 95aa73c61421d1d850705edcba855beb83c4dcca Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Sun, 12 Feb 2023 16:34:07 +0100
Subject: [PATCH 09/20] clean up markdown parsing

---
 packages/client/src/scripts/markdown.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/scripts/markdown.ts b/packages/client/src/scripts/markdown.ts
index 81d035863..bf86da903 100644
--- a/packages/client/src/scripts/markdown.ts
+++ b/packages/client/src/scripts/markdown.ts
@@ -101,7 +101,10 @@ marked.use({
 			level: 'inline',
 			start(src) { return src.indexOf('$['); },
 			tokenizer(src) {
-				/* ABNF of the regex below, the regex matches the <mfm-fn> rule
+				/*
+				 * ABNF of the regex below, the regex matches the <mfm-fn> rule
+				 * SECURITY: neither argument key nor value must contain any "HTML dangerous" characters
+
 				name     = 1*(ALPHA / DIGIT / "_")                  ; one or more "word" characters, Ecmascripts \w
 
 				argument = <name> ["=" <name>]                      ; arguments are key = value pairs
@@ -124,7 +127,6 @@ marked.use({
 						.split(',')
 						// split argument name and value
 						.map((arg) => {
-							console.log("mfm arg", arg);
 							if (arg.includes('=')) {
 								// split once at first equal sign
 								const equalsIdx = arg.indexOf('=');
@@ -152,8 +154,10 @@ marked.use({
 				const argsAttrs = Object.entries(token.args)
 					.reduce((acc, [key, value]) => {
 						if (value == null) {
+							// SECURITY: key does not need to be escaped because only "word" characters will be matched in the tokenizer
 							return acc + ` data-mfm-${key}`;
 						} else {
+							// SECURITY: key and value do not need to be escaped because only "word" characters will be matched in the tokenizer
 							return acc + ` data-mfm-${key}="${value}"`;
 						}
 					}, '');
-- 
2.34.1


From cc78d3fc5f8f65454576f6df308b99c865ee9372 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Sat, 18 Feb 2023 12:35:02 +0100
Subject: [PATCH 10/20] add more MFM features & specialties

---
 packages/client/src/components/markdown.ts |  20 +++
 packages/client/src/mfm.scss               |  22 +++
 packages/client/src/scripts/markdown.ts    | 149 ++++++++++++++++++++-
 3 files changed, 189 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/markdown.ts b/packages/client/src/components/markdown.ts
index 39e5b1948..dacbebd82 100644
--- a/packages/client/src/components/markdown.ts
+++ b/packages/client/src/components/markdown.ts
@@ -5,6 +5,9 @@ import { host } from '@/config';
 import MkMention from '@/components/mention.vue';
 import MkSparkle from '@/components/sparkle.vue';
 import MkEmoji from '@/components/global/emoji.vue';
+import MkLink from '@/components/link.vue';
+import MkCode from '@/components/code.vue';
+import MkFormula from '@/components/formula.vue';
 
 export const Markdown = defineComponent({
 	props: {
@@ -27,6 +30,12 @@ export const Markdown = defineComponent({
 			switch (node.nodeName) {
 				case '#text':
 					return node.textContent;
+				case 'A':
+					return h(MkLink, {
+						url: node.getAttribute('href'),
+						rel: 'nofollow noopener',
+					}, node.textContent);
+					break;
 				case 'SPAN':
 					if (node.classList.contains('mfm-sparkle')) {
 						return h(MkSparkle, {}, mapNodes(node.childNodes));
@@ -37,6 +46,17 @@ export const Markdown = defineComponent({
 						});
 					} else if (node.classList.contains('mfm-emoji')) {
 						return h(MkEmoji, { emoji: node.textContent, customEmojis: this.customEmojis });
+					} else if (node.classList.contains('mfm-codeblock') || node.classList.contains('mfm-inline-code')) {
+						return h(MkCode, {
+							code: node.innerText,
+							lang: node.getAttribute("data-mfm-language") ?? undefined,
+							inline: node.classList.contains('mfm-inline-code'),
+						}, node.innerText);
+					} else if (node.classList.contains('mfm-katex')) {
+						return h(MkFormula, {
+							formula: node.innerText,
+							block: !node.hasAttribute('data-mfm-inline'),
+						});
 					}
 					// fallthrough, just handle like ordinary nodes
 				default:
diff --git a/packages/client/src/mfm.scss b/packages/client/src/mfm.scss
index 02fabe94a..3418417a4 100644
--- a/packages/client/src/mfm.scss
+++ b/packages/client/src/mfm.scss
@@ -69,6 +69,28 @@
 	}
 }
 
+.markdown-container {
+	blockquote {
+		display: block;
+		margin: 8px;
+		padding: 6px 0 6px 12px;
+		color: var(--fg);
+		border-left: solid 3px var(--fg);
+		opacity: 0.7;
+	}
+
+	blockquote blockquote blockquote {
+		opacity: 1;
+	}
+
+	blockquote > p:first-child {
+		margin-top: 0;
+	}
+	blockquote > p:last-child {
+		margin-bottom: 0;
+	}
+}
+
 .animated-mfm {
 	.mfm-jelly {
 		display: inline-block;
diff --git a/packages/client/src/scripts/markdown.ts b/packages/client/src/scripts/markdown.ts
index bf86da903..b2a6e29d6 100644
--- a/packages/client/src/scripts/markdown.ts
+++ b/packages/client/src/scripts/markdown.ts
@@ -4,7 +4,7 @@ import * as foundkey from 'foundkey-js';
 import { MFM_TAGS } from '@/scripts/mfm-tags';
 
 const sanitizerOptions = {
-	allowedTags: ["h1", "h2", "h3", "h4", "h5", "h6", "blockquote", "dd", "dl", "dt", "hr", "li", "ol", "p", "pre", "ul", "a", "b", "br", "code", "em", "i", "kbd", "mark", "q", "rp", "rt", "ruby", "s", "small", "span", "strong", "sub", "sup", "u", "wbr", "caption", "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", "img"],
+	allowedTags: ["h1", "h2", "h3", "h4", "h5", "h6", "blockquote", "dd", "dl", "dt", "hr", "li", "ol", "p", "pre", "ul", "a", "b", "br", "code", "em", "i", "kbd", "mark", "q", "rp", "rt", "ruby", "s", "small", "span", "strong", "sub", "sup", "u", "wbr", "caption", "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", "img", "del"],
 	allowedAttributes: {
 		a: [ 'href', 'name', 'target' ],
 		img: [ 'src', 'srcset', 'alt', 'title', 'width', 'height', 'loading' ],
@@ -39,6 +39,50 @@ marked.setOptions({
 	sanitizer: (html) => sanitizeHtml(html, inputSanitizerOptions),
 });
 marked.use({
+	tokenizer: {
+		blockquote(src) {
+			// custom behaviour: don't continue blockquotes onto lines that do not start with a `>`
+			// but allow a single empty line to continue the quote
+			const match = src.match(/^(?: {0,3}>.*(?:\r\n|\n|$){1,2})+/);
+			if (!match) return;
+
+			const lines = match[0].replaceAll('\r\n', '\n')
+				.split('\n')
+				.map(line => {
+					if (line === '') { return line; }
+
+					const initial = line.match(/^ {0,3}>[ \t]?/);
+					return line.replace(initial[0], '');
+				})
+				.join('\n');
+
+			const tokens = [];
+			this.lexer.blockTokens(lines, tokens);
+
+			return {
+				type: 'blockquote',
+				raw: match[0],
+				text: lines,
+				tokens,
+			};
+		},
+	},
+	renderer: {
+		code(code, infostring, _escaped) {
+			// TODO what does escaped mean here?
+			const elem = document.createElement("span");
+			elem.classList.add('mfm-codeblock');
+			elem.setAttribute("data-mfm-language", infostring);
+			elem.innerText = code;
+			return elem.outerHTML;
+		},
+		codespan(code) {
+			const elem = document.createElement("span");
+			elem.classList.add('mfm-inline-code');
+			elem.innerText = code;
+			return elem.outerHTML;
+		},
+	},
 	extensions: [
 		{
 			name: 'center-tag',
@@ -59,7 +103,7 @@ marked.use({
 		{
 			name: 'mention',
 			level: 'inline',
-			start(src) { return src.match(/(^|\s)@/)?.index; },
+			start(src) { return src.match(/(?<=^|\s)@/)?.index; },
 			tokenizer(src) {
 				const match = src.match(/^@([-_a-z0-9]+)(?:@(\p{L}+(?:[-.]*\p{L}+)*))?/iu);
 				if (!match) return;
@@ -96,6 +140,107 @@ marked.use({
 				return `<span class="mfm-emoji">${token.raw}</span>`;
 			},
 		},
+		{
+			name: 'katex-block',
+			level: 'block',
+			start(src) { return src.match(/^\\\[/)?.index; },
+			tokenizer(src) {
+				const match = src.match(/^\\\[[\r\n]*(.+?)[\r\n]*\\\]/s);
+				if (!match) return;
+
+				return {
+					type: 'katex-block',
+					raw: match[0],
+					katex: match[1],
+				};
+			},
+			renderer(token) {
+				const elem = document.createElement('span');
+				elem.classList.add('mfm-katex');
+				elem.innerText = token.katex;
+				return elem.outerHTML;
+			},
+		},
+		{
+			name: 'katex-inline',
+			level: 'inline',
+			start(src) { return src.match(/^\\\(/)?.index; },
+			tokenizer(src) {
+				const match = src.match(/^\\\((.+?)\\\)/);
+				if (!match) return;
+
+				return {
+					type: 'katex-inline',
+					raw: match[0],
+					katex: match[1],
+				};
+			},
+			renderer(token) {
+				const elem = document.createElement('span');
+				elem.classList.add('mfm-katex');
+				elem.setAttribute('data-mfm-inline', '1');
+				elem.innerText = token.katex;
+				return elem.outerHTML;
+			},
+		},
+		{
+			name: 'hashtag',
+			level: 'inline',
+			start(src) { return src.match(/(?<=^|\p{P}|\s)#/)?.index; },
+			tokenizer(src) {
+				if (!src.startsWith("#")) return;
+
+				function recognizeHashtag(src) {
+					// SECURITY: these regexes must not allow any "HTML dangerous" characters.
+					const ordinaries = src.match(/^[-\p{L}\p{N}\p{M}\p{Sk}\p{Pc}]*/u);
+					const open = src.slice(ordinaries[0].length).match(/^[\[({「]*/);
+
+					if (ordinaries[0].length === 0 && open[0].length === 0) {
+						// end of text or hashtag
+						return '';
+					}
+
+					const close = open[0].split("").map(char => {
+						return {
+							'[': '\\]',
+							'(': '\\)',
+							'{': '\\}',
+							'「': '」',
+						}[char];
+					}).join("");
+					const sub = src.slice(ordinaries[0].length).match(new RegExp(
+						open[0].replaceAll(/([\[({])/g, '\\$1') // escape open brackets/parens
+						+ '(.*)'
+						+ close,
+					'u'));
+					if (!sub || sub[1] !== recognizeHashtag(sub[1])) return ordinaries[0];
+
+					const recognized = ordinaries[0] + sub[0];
+					const remainder = recognizeHashtag(src.slice(recognized.length));
+
+					if (sub[1] === '' && remainder === '') {
+						// don't recognize parens with nothing in them at the end
+						return ordinaries[0];
+					} else {
+						return recognized + remainder;
+					}
+				}
+
+				let hashtag = recognizeHashtag(src.slice(1));
+				// all numeric strings cannot be hashtags
+				if (hashtag.match(/^\p{N}+$/u)) return;
+
+				return {
+					type: 'hashtag',
+					raw: '#' + hashtag,
+					tag: hashtag.normalize('NFKC'),
+				};
+			},
+			renderer(token) {
+				// SECURITY: token.raw cannot contain "HTML dangerous" characters
+				return `<a href="/explore/tags/${encodeURIComponent(token.tag)}" class="mfm-hashtag">${token.raw}</a>`;
+			},
+		},
 		{
 			name: 'mfm-function',
 			level: 'inline',
-- 
2.34.1


From 10f07029f6d2d5e90794540f1ed5ce5d1d0842b1 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Thu, 23 Feb 2023 22:18:17 +0100
Subject: [PATCH 11/20] fix newlines in code blocks

---
 packages/client/src/components/markdown.ts | 17 +++++++++++++++--
 packages/client/src/scripts/markdown.ts    | 16 ----------------
 2 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/packages/client/src/components/markdown.ts b/packages/client/src/components/markdown.ts
index dacbebd82..91de88b2f 100644
--- a/packages/client/src/components/markdown.ts
+++ b/packages/client/src/components/markdown.ts
@@ -35,7 +35,20 @@ export const Markdown = defineComponent({
 						url: node.getAttribute('href'),
 						rel: 'nofollow noopener',
 					}, node.textContent);
-					break;
+				case 'CODE':
+					return h(MkCode, {
+						code: node.innerText,
+						inline: true,
+					});
+				case 'PRE':
+					if (node.childNodes.length === 1 && node.childNodes[0].tagName === 'CODE') {
+						return h(MkCode, {
+							code: node.childNodes[0].textContent,
+							// TODO: lang attribute for language highlighting
+							inline: true,
+						});
+					}
+					// fallthrough
 				case 'SPAN':
 					if (node.classList.contains('mfm-sparkle')) {
 						return h(MkSparkle, {}, mapNodes(node.childNodes));
@@ -48,7 +61,7 @@ export const Markdown = defineComponent({
 						return h(MkEmoji, { emoji: node.textContent, customEmojis: this.customEmojis });
 					} else if (node.classList.contains('mfm-codeblock') || node.classList.contains('mfm-inline-code')) {
 						return h(MkCode, {
-							code: node.innerText,
+							code: node.textContent,
 							lang: node.getAttribute("data-mfm-language") ?? undefined,
 							inline: node.classList.contains('mfm-inline-code'),
 						}, node.innerText);
diff --git a/packages/client/src/scripts/markdown.ts b/packages/client/src/scripts/markdown.ts
index b2a6e29d6..972edec42 100644
--- a/packages/client/src/scripts/markdown.ts
+++ b/packages/client/src/scripts/markdown.ts
@@ -67,22 +67,6 @@ marked.use({
 			};
 		},
 	},
-	renderer: {
-		code(code, infostring, _escaped) {
-			// TODO what does escaped mean here?
-			const elem = document.createElement("span");
-			elem.classList.add('mfm-codeblock');
-			elem.setAttribute("data-mfm-language", infostring);
-			elem.innerText = code;
-			return elem.outerHTML;
-		},
-		codespan(code) {
-			const elem = document.createElement("span");
-			elem.classList.add('mfm-inline-code');
-			elem.innerText = code;
-			return elem.outerHTML;
-		},
-	},
 	extensions: [
 		{
 			name: 'center-tag',
-- 
2.34.1


From d34d0161b622495900a361c0b26dd8b60b851e8e Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Fri, 24 Feb 2023 18:30:06 +0100
Subject: [PATCH 12/20] fix line breaks again

---
 packages/client/src/components/markdown.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/markdown.ts b/packages/client/src/components/markdown.ts
index 91de88b2f..ab24b1ff8 100644
--- a/packages/client/src/components/markdown.ts
+++ b/packages/client/src/components/markdown.ts
@@ -45,7 +45,7 @@ export const Markdown = defineComponent({
 						return h(MkCode, {
 							code: node.childNodes[0].textContent,
 							// TODO: lang attribute for language highlighting
-							inline: true,
+							inline: false,
 						});
 					}
 					// fallthrough
-- 
2.34.1


From 1766ae1e0f3e4f5baf50e3a6fcefb47186da3467 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Fri, 24 Feb 2023 18:30:47 +0100
Subject: [PATCH 13/20] remove unused code

---
 packages/client/src/components/markdown.ts | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/client/src/components/markdown.ts b/packages/client/src/components/markdown.ts
index ab24b1ff8..b07b88987 100644
--- a/packages/client/src/components/markdown.ts
+++ b/packages/client/src/components/markdown.ts
@@ -59,12 +59,6 @@ export const Markdown = defineComponent({
 						});
 					} else if (node.classList.contains('mfm-emoji')) {
 						return h(MkEmoji, { emoji: node.textContent, customEmojis: this.customEmojis });
-					} else if (node.classList.contains('mfm-codeblock') || node.classList.contains('mfm-inline-code')) {
-						return h(MkCode, {
-							code: node.textContent,
-							lang: node.getAttribute("data-mfm-language") ?? undefined,
-							inline: node.classList.contains('mfm-inline-code'),
-						}, node.innerText);
 					} else if (node.classList.contains('mfm-katex')) {
 						return h(MkFormula, {
 							formula: node.innerText,
-- 
2.34.1


From ada0a7fa5a86930a7fb531f7659db8159523b704 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Fri, 24 Feb 2023 19:02:52 +0100
Subject: [PATCH 14/20] make sure markdown is rendered only once

---
 packages/client/src/pages/page.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index ac13dd894..672b618f1 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -9,7 +9,7 @@
 						<img v-if="page.eyeCatchingImageId" :src="page.eyeCatchingImage.url"/>
 					</div>
 					<div class="content" :class="{ center: page.alignCenter, serif: page.font === 'serif' }">
-						<Markdown :text="page.text" :is-note="false"/>
+						<Markdown v-once :text="page.text" :is-note="false"/>
 					</div>
 					<div class="actions">
 						<div class="like">
-- 
2.34.1


From 424a9ce7d1f6f703d2d1b5b30d673f9037a7967e Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Sun, 5 Mar 2023 00:10:42 +0100
Subject: [PATCH 15/20] fix some MFM effects not working sometimes

---
 packages/client/src/mfm.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/client/src/mfm.scss b/packages/client/src/mfm.scss
index 3418417a4..6b03b4cba 100644
--- a/packages/client/src/mfm.scss
+++ b/packages/client/src/mfm.scss
@@ -4,6 +4,7 @@
 }
 
 .mfm-flip {
+	display: inline-block;
 	transform: scaleX(-1);
 }
 .mfm-flip[data-mfm-v] {
@@ -42,6 +43,7 @@
 }
 
 .mfm-rotate {
+	display: inline-block;
 	transform: rotate(calc(var(--mfm-deg, 90) * 1deg));
 	transform-origin: center center;
 }
-- 
2.34.1


From 51b95e272c1ea2f1c9a64b6c4a9176154811624b Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Fri, 24 Mar 2023 21:18:26 +0100
Subject: [PATCH 16/20] fix link label rendering

---
 packages/client/src/components/markdown.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/markdown.ts b/packages/client/src/components/markdown.ts
index b07b88987..e3808c429 100644
--- a/packages/client/src/components/markdown.ts
+++ b/packages/client/src/components/markdown.ts
@@ -34,7 +34,7 @@ export const Markdown = defineComponent({
 					return h(MkLink, {
 						url: node.getAttribute('href'),
 						rel: 'nofollow noopener',
-					}, node.textContent);
+					}, mapNodes(node.childNodes));
 				case 'CODE':
 					return h(MkCode, {
 						code: node.innerText,
-- 
2.34.1


From 59c880b909611a7cf6405efdc0a59d98766b657a Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Sat, 27 May 2023 15:11:49 +0200
Subject: [PATCH 17/20] add position, scale, fg and bg MFM functions

---
 packages/client/src/mfm.scss            | 16 ++++++++++++++++
 packages/client/src/scripts/markdown.ts | 13 ++++++++++++-
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/mfm.scss b/packages/client/src/mfm.scss
index 6b03b4cba..6932b98ad 100644
--- a/packages/client/src/mfm.scss
+++ b/packages/client/src/mfm.scss
@@ -71,6 +71,22 @@
 	}
 }
 
+.mfm-position {
+	transform: translate(calc(var(--mfm-x, 0) * 1em), calc(var(--mfm-y, 0) * 1em));
+}
+
+.mfm-scale {
+	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);
+}
+
 .markdown-container {
 	blockquote {
 		display: block;
diff --git a/packages/client/src/scripts/markdown.ts b/packages/client/src/scripts/markdown.ts
index 972edec42..290f0c0e3 100644
--- a/packages/client/src/scripts/markdown.ts
+++ b/packages/client/src/scripts/markdown.ts
@@ -17,6 +17,9 @@ const sanitizerOptions = {
 		span: {
 			'--mfm-speed': [/^\d*\.?\d+m?s$/],
 			'--mfm-deg': [/^\d*\.?\d+$/],
+			'--mfm-x': [/^\d*\.?\d+$/],
+			'--mfm-y': [/^\d*\.?\d+$/],
+			'--mfm-color': [/^#([0-9a-f]{3}){1,2}$/i],
 		},
 	},
 	allowedSchemes: sanitizeHtml.defaults.allowedSchemes.concat([ 'gopher', 'gemini' ]),
@@ -259,7 +262,15 @@ marked.use({
 							if (arg.includes('=')) {
 								// split once at first equal sign
 								const equalsIdx = arg.indexOf('=');
-								return [arg.slice(0, equalsIdx), arg.slice(equalsIdx + 1)];
+								const key = arg.slice(0, equalsIdx);
+								let value = arg.slice(equalsIdx + 1);
+
+								// add initial octothorpe to hex color code if necessary
+								if (key === 'color' && !value.startsWith('#')) {
+									value = '#' + value;
+								}
+
+								return [key, value];
 							} else {
 								return [arg, null];
 							}
-- 
2.34.1


From cab80c49c01ba11a7ff4cf884bd87314394b637b Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Sat, 27 May 2023 15:18:02 +0200
Subject: [PATCH 18/20] add comments for regex's

---
 packages/client/src/scripts/markdown.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/scripts/markdown.ts b/packages/client/src/scripts/markdown.ts
index 290f0c0e3..0a746b66d 100644
--- a/packages/client/src/scripts/markdown.ts
+++ b/packages/client/src/scripts/markdown.ts
@@ -15,11 +15,11 @@ const sanitizerOptions = {
 	},
 	allowedStyles: {
 		span: {
-			'--mfm-speed': [/^\d*\.?\d+m?s$/],
-			'--mfm-deg': [/^\d*\.?\d+$/],
-			'--mfm-x': [/^\d*\.?\d+$/],
-			'--mfm-y': [/^\d*\.?\d+$/],
-			'--mfm-color': [/^#([0-9a-f]{3}){1,2}$/i],
+			'--mfm-speed': [/^\d*\.?\d+m?s$/], // decimal number (e.g. 1 or 1.0 or .1) followed by "ms" or "s"
+			'--mfm-deg': [/^\d*\.?\d+$/], // decimal number
+			'--mfm-x': [/^\d*\.?\d+$/], // decimal number
+			'--mfm-y': [/^\d*\.?\d+$/], // decimal number
+			'--mfm-color': [/^#([0-9a-f]{3}){1,2}$/i], // CSS hex color code without alpha
 		},
 	},
 	allowedSchemes: sanitizeHtml.defaults.allowedSchemes.concat([ 'gopher', 'gemini' ]),
@@ -94,7 +94,7 @@ marked.use({
 			tokenizer(src) {
 				const match = src.match(/^@([-_a-z0-9]+)(?:@(\p{L}+(?:[-.]*\p{L}+)*))?/iu);
 				if (!match) return;
-				
+
 				return {
 					type: 'mention',
 					raw: match[0],
-- 
2.34.1


From 020a5bc5b899390bd2965c6b27567dbed9c79664 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Sat, 27 May 2023 17:38:07 +0200
Subject: [PATCH 19/20] remove unused resoectSilentFlag parameter

---
 packages/client/src/scripts/extract-url-from-mfm.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/scripts/extract-url-from-mfm.ts b/packages/client/src/scripts/extract-url-from-mfm.ts
index 34e3eb6c1..3496464ae 100644
--- a/packages/client/src/scripts/extract-url-from-mfm.ts
+++ b/packages/client/src/scripts/extract-url-from-mfm.ts
@@ -5,9 +5,9 @@ import { unique } from '@/scripts/array';
 // [ http://a/#1, http://a/#2, http://b/#3 ] => [ http://a/#1, http://b/#3 ]
 const removeHash = (x: string) => x.replace(/#[^#]*$/, '');
 
-export function extractUrlFromMfm(nodes: mfm.MfmNode[], respectSilentFlag = true): string[] {
+export function extractUrlFromMfm(nodes: mfm.MfmNode[]): string[] {
 	const urlNodes = mfm.extract(nodes, (node) => {
-		return (node.type === 'url') || (node.type === 'link' && (!respectSilentFlag || !node.props.silent));
+		return (node.type === 'url') || (node.type === 'link' && !node.props.silent);
 	});
 	const urls: string[] = unique(urlNodes.map(x => x.props.url));
 
-- 
2.34.1


From ebfdc0ffe39eb1538b626c582fdbd763669ab9c2 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Sat, 27 May 2023 17:41:22 +0200
Subject: [PATCH 20/20] add link without preview

---
 packages/client/src/scripts/markdown.ts | 34 +++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/packages/client/src/scripts/markdown.ts b/packages/client/src/scripts/markdown.ts
index 0a746b66d..4a54baddd 100644
--- a/packages/client/src/scripts/markdown.ts
+++ b/packages/client/src/scripts/markdown.ts
@@ -314,6 +314,40 @@ marked.use({
 				return `<span class="mfm-${token.fn}" style="${argsCss}"${argsAttrs}>${this.parser.parseInline(token.tokens)}</span>`;
 			},
 		},
+		{
+			name: 'silent-link',
+			level: 'inline',
+			start(src) { return src.startsWith('?['),
+			tokenizer(src) {
+				// a markdown [title](link) with prepended question mark to signify
+				// that no link preview should be shown for this link
+
+				// regular expression abridged from marked.js internals
+				const match = src.match(/^\?\[((?:\\.|[^\[\]\\])*)\]\(\s*(?:<((?:\\.|[^\n<>\\])+)>|([^\s\x00-\x1f]*))\s*\)/);
+				if (!match) return;
+
+				try {
+					// match group 2 when enclosed in <> and match group 3 otherwise
+					const href = new URL(match[2] ?? match[3]).href;
+				} catch {
+					// invalid URL
+					return;
+				}
+
+				const token = {
+					type: 'silent-link',
+					raw: match[0],
+					tokens: [],
+					href,
+				};
+				this.lexer.inline(match[1], token.tokens);
+				return token;
+			},
+			renderer(token) {
+				const secureUrl = encodeURI(token.href).replaceAll("%25", "%");
+				return `<a href="${secureUrl}" rel="nofollow">${this.parser.parseInline(token.tokens)}</a>`;
+			},
+		},
 	],
 });
 
-- 
2.34.1