Merge branch 'develop' into math-block

src/client/app/common/scripts/note-subscriber.ts

@@ -133,6 +133,7 @@ export default prop => ({
 
 				case 'deleted': {
 					Vue.set(this.$_ns_target, 'deletedAt', body.deletedAt);
+					Vue.set(this.$_ns_target, 'renote', null);
 					this.$_ns_target.text = null;
 					this.$_ns_target.tags = [];
 					this.$_ns_target.fileIds = [];

src/client/app/common/views/components/code-core.vue

@@ -0,0 +1,30 @@
+<template>
+<prism :inline="inline" :language="lang">{{ code }}</prism>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import 'prismjs';
+import 'prismjs/themes/prism.css';
+import Prism from 'vue-prism-component';
+
+export default Vue.extend({
+	components: {
+		Prism
+	},
+	props: {
+		code: {
+			type: String,
+			required: true
+		},
+		lang: {
+			type: String,
+			required: false
+		},
+		inline: {
+			type: Boolean,
+			required: false
+		}
+	}
+});
+</script>

src/client/app/common/views/components/code.vue

@@ -0,0 +1,28 @@
+<template>
+<x-code :code="code" :lang="lang" :inline="inline"/>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	components: {
+		XCode: () => import('./code-core.vue').then(m => m.default)
+	},
+
+	props: {
+		code: {
+			type: String,
+			required: true
+		},
+		lang: {
+			type: String,
+			required: false
+		},
+		inline: {
+			type: Boolean,
+			required: false
+		}
+	}
+});
+</script>

src/client/app/common/views/components/media-image.vue

@@ -0,0 +1,89 @@
+<template>
+<div class="qjewsnkgzzxlxtzncydssfbgjibiehcy" v-if="image.isSensitive && hide && !$store.state.device.alwaysShowNsfw" @click="hide = false">
+	<div>
+		<b><fa icon="exclamation-triangle"/> {{ $t('sensitive') }}</b>
+		<span>{{ $t('click-to-show') }}</span>
+	</div>
+</div>
+<a class="gqnyydlzavusgskkfvwvjiattxdzsqlf" v-else
+	:href="image.url"
+	:style="style"
+	:title="image.name"
+	@click.prevent="onClick"
+></a>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import ImageViewer from './image-viewer.vue';
+
+export default Vue.extend({
+	i18n: i18n('common/views/components/media-image.vue'),
+	props: {
+		image: {
+			type: Object,
+			required: true
+		},
+		raw: {
+			default: false
+		}
+	},
+	data() {
+		return {
+			hide: true
+		};
+	}
+	computed: {
+		style(): any {
+			let url = `url(${this.image.thumbnailUrl})`;
+
+			if (this.$store.state.device.loadRemoteMedia || this.$store.state.device.lightmode) {
+				url = null;
+			} else if (this.raw || this.$store.state.device.loadRawImages) {
+				url = `url(${this.image.url})`;
+			}
+
+			return {
+				'background-color': this.image.properties.avgColor && this.image.properties.avgColor.length == 3 ? `rgb(${this.image.properties.avgColor.join(',')})` : 'transparent',
+				'background-image': url
+			};
+		}
+	},
+	methods: {
+		onClick() {
+			this.$root.new(ImageViewer, {
+				image: this.image
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.gqnyydlzavusgskkfvwvjiattxdzsqlf
+	display block
+	cursor zoom-in
+	overflow hidden
+	width 100%
+	height 100%
+	background-position center
+	background-size contain
+	background-repeat no-repeat
+
+.qjewsnkgzzxlxtzncydssfbgjibiehcy
+	display flex
+	justify-content center
+	align-items center
+	background #111
+	color #fff
+
+	> div
+		display table-cell
+		text-align center
+		font-size 12px
+
+		> *
+			display block
+
+</style>

src/client/app/common/views/components/media-list.vue

@@ -7,7 +7,7 @@
 		<div :data-count="mediaList.filter(media => previewable(media)).length" ref="grid">
 			<template v-for="media in mediaList">
 				<mk-media-video :video="media" :key="media.id" v-if="media.type.startsWith('video')"/>
-				<mk-media-image :image="media" :key="media.id" v-else-if="media.type.startsWith('image')" :raw="raw"/>
+				<x-image :image="media" :key="media.id" v-else-if="media.type.startsWith('image')" :raw="raw"/>
 			</template>
 		</div>
 	</div>
@@ -17,10 +17,12 @@
 <script lang="ts">
 import Vue from 'vue';
 import XBanner from './media-banner.vue';
+import XImage from './media-image.vue';
 
 export default Vue.extend({
 	components: {
-		XBanner
+		XBanner,
+		XImage
 	},
 	props: {
 		mediaList: {

src/client/app/common/views/components/mfm.ts

@@ -6,8 +6,8 @@ import MkUrl from './url.vue';
 import MkMention from './mention.vue';
 import { concat, sum } from '../../../../../prelude/array';
 import MkFormula from './formula.vue';
+import MkCode from './code.vue';
 import MkGoogle from './google.vue';
-import syntaxHighlight from '../../../../../mfm/syntax-highlight';
 import { host } from '../../../config';
 import { preorderF, countNodesF } from '../../../../../prelude/tree';
 
@@ -124,6 +124,25 @@ export default Vue.component('misskey-flavored-markdown', {
 					}, genEl(token.children));
 				}
 
+				case 'spin': {
+					motionCount++;
+					const isLong = sumTextsLength(token.children) > 5 || countNodesF(token.children) > 3;
+					const isMany = motionCount > 3;
+					return (createElement as any)('span', {
+						attrs: {
+							style: (this.$store.state.settings.disableAnimatedMfm || isLong || isMany) ? 'display: inline-block;' : 'display: inline-block; animation: spin 1.5s linear infinite;'
+						},
+					}, genEl(token.children));
+				}
+
+				case 'flip': {
+					return (createElement as any)('span', {
+						attrs: {
+							style: 'display: inline-block; transform: scaleX(-1);'
+						},
+					}, genEl(token.children));
+				}
+
 				case 'url': {
 					return [createElement(MkUrl, {
 						key: Math.random(),
@@ -170,21 +189,22 @@ export default Vue.component('misskey-flavored-markdown', {
 				}
 
 				case 'blockCode': {
-					return [createElement('pre', {
-						class: 'code'
-					}, [
-						createElement('code', {
-							domProps: {
-								innerHTML: syntaxHighlight(token.node.props.code)
-							}
-						})
-					])];
+					return [createElement(MkCode, {
+						key: Math.random(),
+						props: {
+							code: token.node.props.code,
+							lang: token.node.props.lang,
+						}
+					})];
 				}
 
 				case 'inlineCode': {
-					return [createElement('code', {
-						domProps: {
-							innerHTML: syntaxHighlight(token.node.props.code)
+					return [createElement(MkCode, {
+						key: Math.random(),
+						props: {
+							code: token.node.props.code,
+							lang: token.node.props.lang,
+							inline: true
 						}
 					})];
 				}

src/client/app/common/views/components/misskey-flavored-markdown.vue

@@ -24,34 +24,10 @@ export default Vue.extend({
 		background var(--mfmTitleBg)
 		border-radius 4px
 
-	>>> .code
-		margin 8px 0
-
 	>>> .quote
 		margin 8px
 		padding 6px 0 6px 12px
 		color var(--mfmQuote)
 		border-left solid 3px var(--mfmQuoteLine)
 
-	>>> code
-		padding 4px 8px
-		margin 0 0.5em
-		font-size 80%
-		color #525252
-		background rgba(0, 0, 0, 0.05)
-		border-radius 2px
-
-	>>> pre > code
-		padding 16px
-		margin 0
-
-	>>> [data-is-me]:after
-		content "you"
-		padding 0 4px
-		margin-left 4px
-		font-size 80%
-		color var(--primaryForeground)
-		background var(--primary)
-		border-radius 4px
-
 </style>