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
This commit is contained in:
Marie 2024-04-07 15:38:12 +00:00
commit eaface372b
3 changed files with 27 additions and 25 deletions

View file

@ -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"> <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 :class="[$style.textOuter, { [$style.withCw]: useCw }]">
<div v-if="channel" :class="$style.colorBar" :style="{ background: channel.color }"></div> <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 v-if="maxTextLength - textLength < 100" :class="['_acrylic', $style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</div>
</div> </div>
<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" :class="$style.hashtags" :placeholder="i18n.ts.hashtags" list="hashtags"> <input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" :class="$style.hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">

View file

@ -335,67 +335,67 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
} }
case 'center': { case 'center': {
return [h('div', { return [h('bdi',h('div', {
style: 'text-align:center;', style: 'text-align:center;',
}, genEl(token.children, scale))]; }, genEl(token.children, scale)))];
} }
case 'url': { case 'url': {
return [h(MkUrl, { return [h('bdi',h(MkUrl, {
key: Math.random(), key: Math.random(),
url: token.props.url, url: token.props.url,
rel: 'nofollow noopener', rel: 'nofollow noopener',
})]; }))];
} }
case 'link': { case 'link': {
return [h(MkLink, { return [h('bdi',h(MkLink, {
key: Math.random(), key: Math.random(),
url: token.props.url, url: token.props.url,
rel: 'nofollow noopener', rel: 'nofollow noopener',
}, genEl(token.children, scale, true))]; }, genEl(token.children, scale, true)))];
} }
case 'mention': { case 'mention': {
return [h(MkMention, { return [h('bdi',h(MkMention, {
key: Math.random(), key: Math.random(),
host: (token.props.host == null && props.author && props.author.host != null ? props.author.host : token.props.host) ?? host, host: (token.props.host == null && props.author && props.author.host != null ? props.author.host : token.props.host) ?? host,
username: token.props.username, username: token.props.username,
})]; }))];
} }
case 'hashtag': { case 'hashtag': {
return [h(MkA, { return [h('bdi',h(MkA, {
key: Math.random(), key: Math.random(),
to: isNote ? `/tags/${encodeURIComponent(token.props.hashtag)}` : `/user-tags/${encodeURIComponent(token.props.hashtag)}`, to: isNote ? `/tags/${encodeURIComponent(token.props.hashtag)}` : `/user-tags/${encodeURIComponent(token.props.hashtag)}`,
style: 'color:var(--hashtag);', style: 'color:var(--hashtag);',
}, `#${token.props.hashtag}`)]; }, `#${token.props.hashtag}`))];
} }
case 'blockCode': { case 'blockCode': {
return [h(MkCode, { return [h('bdi',h(MkCode, {
key: Math.random(), key: Math.random(),
code: token.props.code, code: token.props.code,
lang: token.props.lang ?? undefined, lang: token.props.lang ?? undefined,
})]; }))];
} }
case 'inlineCode': { case 'inlineCode': {
return [h(MkCodeInline, { return [h('bdi',h(MkCodeInline, {
key: Math.random(), key: Math.random(),
code: token.props.code, code: token.props.code,
})]; }))];
} }
case 'quote': { case 'quote': {
if (!props.nowrap) { if (!props.nowrap) {
return [h('div', { return [h('bdi',h('div', {
style: QUOTE_STYLE, style: QUOTE_STYLE,
}, genEl(token.children, scale, true))]; }, genEl(token.children, scale, true)))];
} else { } else {
return [h('span', { return [h('bdi',h('span', {
style: QUOTE_STYLE, style: QUOTE_STYLE,
}, genEl(token.children, scale, true))]; }, genEl(token.children, scale, true)))];
} }
} }
@ -439,17 +439,17 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
} }
case 'mathInline': { case 'mathInline': {
return [h(MkFormula, { return [h('bdi',h(MkFormula, {
formula: token.props.formula, formula: token.props.formula,
block: false, block: false,
})]; }))];
} }
case 'mathBlock': { case 'mathBlock': {
return [h(MkFormula, { return [h('bdi',h(MkFormula, {
formula: token.props.formula, formula: token.props.formula,
block: true, block: true,
})]; }))];
} }
case 'search': { case 'search': {
@ -472,8 +472,8 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
} }
}).flat(Infinity) as (VNode | string)[]; }).flat(Infinity) as (VNode | string)[];
return h('span', { return h('bdi', h('span', {
// https://codeday.me/jp/qa/20190424/690106.html // 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;', style: props.nowrap ? 'white-space: pre; word-wrap: normal; overflow: hidden; text-overflow: ellipsis;' : 'white-space: pre-wrap;',
}, genEl(rootAst, props.rootScale ?? 1)); }, genEl(rootAst, props.rootScale ?? 1)));
} }

View file

@ -557,6 +557,8 @@ rt {
// MFM ----------------------------- // MFM -----------------------------
div > bdi, p > bdi { display: block }
._mfm_blur_ { ._mfm_blur_ {
filter: blur(6px); filter: blur(6px);
transition: filter 0.3s; transition: filter 0.3s;