merge: style: automatically detect RTL on all MFM content (!482)

View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/482

Closes #356

Approved-by: dakkar <dakkar@thenautilus.net>

packages/frontend/src/components/MkNotes.vue

@@ -55,8 +55,6 @@ import { i18n } from '@/i18n.js';
 import { infoImageUrl } from '@/instance.js';
 import { defaultStore } from '@/store.js';
 
-console.log(defaultStore.state.noteDesign, defaultStore.state.noteDesign === 'sharkey');
-
 const props = defineProps<{
 	pagination: Paging;
 	noGap?: boolean;

packages/frontend/src/components/MkPostForm.vue

@@ -68,7 +68,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<input v-show="useCw" ref="cwInputEl" v-model="cw" :class="$style.cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
 	<div :class="[$style.textOuter, { [$style.withCw]: useCw }]">
 		<div v-if="channel" :class="$style.colorBar" :style="{ background: channel.color }"></div>
-		<textarea ref="textareaEl" v-model="text" :class="[$style.text]" :disabled="posting || posted" :readonly="textAreaReadOnly" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
+		<textarea ref="textareaEl" v-model="text" :class="[$style.text]" :disabled="posting || posted" :readonly="textAreaReadOnly" :placeholder="placeholder" data-cy-post-form-text dir="auto" @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
 		<div v-if="maxTextLength - textLength < 100" :class="['_acrylic', $style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</div>
 	</div>
 	<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" :class="$style.hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">

packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts

@@ -473,6 +473,7 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
 	}).flat(Infinity) as (VNode | string)[];
 
 	return h('span', {
+		dir: 'auto',
 		// https://codeday.me/jp/qa/20190424/690106.html
 		style: props.nowrap ? 'white-space: pre; word-wrap: normal; overflow: hidden; text-overflow: ellipsis;' : 'white-space: pre-wrap;',
 	}, genEl(rootAst, props.rootScale ?? 1));

packages/frontend/src/pages/favorites.vue

@@ -16,9 +16,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</template>
 
 			<template #default="{ items }">
-				<MkDateSeparatedList v-slot="{ item }" :items="items" :direction="'down'" :noGap="false" :ad="false">
+				<MkDateSeparatedList v-if="defaultStore.state.noteDesign === 'misskey'"
+					v-slot="{ item }" :items="items" :direction="'down'" :noGap="false" :ad="false">
 					<MkNote :key="item.id" :note="item.note" :class="$style.note"/>
 				</MkDateSeparatedList>
+				<MkDateSeparatedList v-if="defaultStore.state.noteDesign === 'sharkey'"
+					v-slot="{ item }" :items="items" :direction="'down'" :noGap="false" :ad="false">
+					<SkNote :key="item.id" :note="item.note" :class="$style.note"/>
+				</MkDateSeparatedList>
 			</template>
 		</MkPagination>
 	</MkSpacer>
@@ -28,10 +33,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import MkPagination from '@/components/MkPagination.vue';
 import MkNote from '@/components/MkNote.vue';
+import SkNote from '@/components/SkNote.vue';
 import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { infoImageUrl } from '@/instance.js';
+import { defaultStore } from '@/store.js';
 
 const pagination = {
 	endpoint: 'i/favorites' as const,