Migrate to Vue3 (#6587)
* Update reaction.vue * fix bug * wip * wip * wjio * wip * Revert "wip" This reverts commit e427f2160adf4e8a4147006e25a89854edab0033. * wip * wip * wip * Update init.ts * Update drive-window.vue * wip * wip * Use PascalCase for components * Use PascalCase for components * update dep * wip * wip * wip * Update init.ts * wip * Update paging.ts * Update test.vue * watch deep * wip * lint * wip * wip * wip * wip * wiop * wip * Update webpack.config.ts * alllow null poll * wip * wip * wip * wiop * UI redesign & refactor (#6714) * wip * wip * wip * wip * wip * Update drive.vue * Update word-mute.vue * wip * wip * wip * clean up * wip * Update default.vue * wip * Update notes.vue * Update mfm.ts * Update index.home.vue * Update post-form.vue * Update post-form-attaches.vue * wip * Update post-form.vue * Update sidebar.vue * wip * wip * Update index.vue * wip * Update default.vue * Update index.vue * Update index.vue * wip * Update post-form-attaches.vue * Update note.vue * wip * clean up * Update notes.vue * wip * wip * Update ja-JP.yml * wip * wip * Update index.vue * wip * wip * wip * wip * wip * wip * wip * wip * Update default.vue * wip * Update _dark.json5 * wip * wip * wip * clean up * wip * wip * Update index.vue * Update test.vue * wip * wip * fix * wip * wip * wip * wip * clena yop * wip * wip * Update store.ts * Update messaging-room.vue * Update default.widgets.vue * fix * wip * wip * Update modal.vue * wip * Update os.ts * Update os.ts * Update deck.vue * Update init.ts * wip * Update ja-JP.yml * v-sizeは単にwindowのresizeを監視するだけで良いかもしれない * Update modal.vue * wip * Update tooltip.ts * wip * wip * wip * wip * wip * Update image-viewer.vue * wip * wip * Update style.scss * Update style.scss * Update visitor.vue * wip * Update init.ts * Update init.ts * wip * wip * Update visitor.vue * Update visitor.vue * Update visitor.vue * Update visitor.vue * wip * wip * Update modal.vue * Update header.vue * Update menu.vue * Update about.vue * Update about-misskey.vue * wip * wip * Update visitor.vue * Update tooltip.ts * wip * Update drive.vue * wip * Update style.scss * Update header.vue * wip * wip * Update users.user.vue * Update announcements.vue * wip * wip * wip * Update emojis.vue * wip * Update emojis.vue * Update style.scss * Update users.vue * wip * Update style.scss * wip * Update welcome.entrance.vue * Update radio.vue * Update size.ts * Update emoji-edit-dialog.vue * wip * Update emojis.vue * wip * Update emojis.vue * Update emojis.vue * Update emojis.vue * wip * wip * wip * wip * Update file-dialog.vue * wip * wip * Update token-generate-window.vue * Update notification-setting-window.vue * wip * wip * Update _error_.vue * Update ja-JP.yml * wip * wip * Update store.ts * Update emojis.vue * Update emojis.vue * Update emojis.vue * Update announcements.vue * Update store.ts * wip * Update page-editor.vue * wip * wip * Update modal.vue * wip * Update select-file.ts * Update timeline.vue * Update emojis.vue * Update os.ts * wip * Update user-select.vue * Update mfm.ts * Update get-file-info.ts * Update drive.vue * Update init.ts * Update mfm.ts * wip * wip * Update window.vue * Update note.vue * wip * wip * Update user-info.vue * wip * wip * wip * wip * wip * Update header.vue * Update header.vue * wip * Update explore.vue * wip * wip * wip * Update webpack.config.ts * wip * wip * wip * wip * wip * wip * Update autocomplete.ts * wip * wip * wip * Update toast.vue * wip * Update post-form-dialog.vue * wip * wip * wip * wip * wip * Update users.vue * wip * Update explore.vue * wip * wip * wip * Update package.json * wip * Update icon-dialog.vue * wip * wip * Update user-preview.ts * wip * wip * wip * wip * wip * Update instance.vue * Update user-name.vue * Update federation.vue * Update instance.vue * wip * wip * Update tag.vue * wip * wip * wip * wip * wip * Update instance.vue * wip * Update os.ts * Update os.ts * wip * wip * wip * Update router.ts * wip * Update init.ts * Update note.vue * Update messages.vue * wip * wip * wip * wip * wip * google * wip * wip * wip * wip * Update theme-editor.vue * wip * wip * Update room.vue * Update channel-editor.vue * wip * Update window.vue * Update window.vue * wip * Update window.vue * Update window.vue * wip * Update menu.vue * wip * wip * wip * wip * Update messaging-room.vue * wip * Update post-form.vue * Update default.widgets.vue * Update window.vue * wip
This commit is contained in:
syuilo
GitHub
parent
a40f38b2b5
commit
7199e6f4e0
357 changed files with 15053 additions and 12496 deletions
|
|
@ -1,16 +1,18 @@
|
|||
import Vue, { VNode } from 'vue';
|
||||
import { VNode, defineComponent, h } from 'vue';
|
||||
import { MfmForest } from '../../mfm/prelude';
|
||||
import { parse, parsePlain } from '../../mfm/parse';
|
||||
import MkUrl from './url.vue';
|
||||
import MkLink from './link.vue';
|
||||
import MkMention from './mention.vue';
|
||||
import MkEmoji from './emoji.vue';
|
||||
import { concat } from '../../prelude/array';
|
||||
import MkFormula from './formula.vue';
|
||||
import MkCode from './code.vue';
|
||||
import MkGoogle from './google.vue';
|
||||
import { host } from '../config';
|
||||
import { host } from '@/config';
|
||||
import { RouterLink } from 'vue-router';
|
||||
|
||||
export default Vue.component('misskey-flavored-markdown', {
|
||||
export default defineComponent({
|
||||
props: {
|
||||
text: {
|
||||
type: String,
|
||||
|
|
@ -41,7 +43,7 @@ export default Vue.component('misskey-flavored-markdown', {
|
|||
},
|
||||
},
|
||||
|
||||
render(createElement) {
|
||||
render() {
|
||||
if (this.text == null || this.text == '') return;
|
||||
|
||||
const ast = (this.plain ? parsePlain : parse)(this.text);
|
||||
|
|
@ -53,67 +55,49 @@ export default Vue.component('misskey-flavored-markdown', {
|
|||
|
||||
if (!this.plain) {
|
||||
const x = text.split('\n')
|
||||
.map(t => t == '' ? [createElement('br')] : [this._v(t), createElement('br')]); // NOTE: this._vはHACK SEE: https://github.com/syuilo/misskey/pull/6399#issuecomment-632820283
|
||||
.map(t => t == '' ? [h('br')] : [t, h('br')]);
|
||||
x[x.length - 1].pop();
|
||||
return x;
|
||||
} else {
|
||||
return [this._v(text.replace(/\n/g, ' '))];
|
||||
return [text.replace(/\n/g, ' ')];
|
||||
}
|
||||
}
|
||||
|
||||
case 'bold': {
|
||||
return [createElement('b', genEl(token.children))];
|
||||
return [h('b', genEl(token.children))];
|
||||
}
|
||||
|
||||
case 'strike': {
|
||||
return [createElement('del', genEl(token.children))];
|
||||
return [h('del', genEl(token.children))];
|
||||
}
|
||||
|
||||
case 'italic': {
|
||||
return (createElement as any)('i', {
|
||||
attrs: {
|
||||
style: 'font-style: oblique;'
|
||||
},
|
||||
return h('i', {
|
||||
style: 'font-style: oblique;'
|
||||
}, genEl(token.children));
|
||||
}
|
||||
|
||||
case 'big': {
|
||||
return (createElement as any)('strong', {
|
||||
attrs: {
|
||||
style: `display: inline-block; font-size: 150%;`
|
||||
},
|
||||
directives: [this.$store.state.device.animatedMfm ? {
|
||||
name: 'animate-css',
|
||||
value: { classes: 'tada', iteration: 'infinite' }
|
||||
}: {}]
|
||||
return h('strong', {
|
||||
style: `display: inline-block; font-size: 150%;` + (this.$store.state.device.animatedMfm ? 'animation: anime-tada 1s linear infinite both;' : ''),
|
||||
}, genEl(token.children));
|
||||
}
|
||||
|
||||
case 'small': {
|
||||
return [createElement('small', {
|
||||
attrs: {
|
||||
style: 'opacity: 0.7;'
|
||||
},
|
||||
return [h('small', {
|
||||
style: 'opacity: 0.7;'
|
||||
}, genEl(token.children))];
|
||||
}
|
||||
|
||||
case 'center': {
|
||||
return [createElement('div', {
|
||||
attrs: {
|
||||
style: 'text-align:center;'
|
||||
}
|
||||
return [h('div', {
|
||||
style: 'text-align:center;'
|
||||
}, genEl(token.children))];
|
||||
}
|
||||
|
||||
case 'motion': {
|
||||
return (createElement as any)('span', {
|
||||
attrs: {
|
||||
style: 'display: inline-block;'
|
||||
},
|
||||
directives: [this.$store.state.device.animatedMfm ? {
|
||||
name: 'animate-css',
|
||||
value: { classes: 'rubberBand', iteration: 'infinite' }
|
||||
} : {}]
|
||||
return h('span', {
|
||||
style: 'display: inline-block;' + (this.$store.state.device.animatedMfm ? 'animation: anime-rubberBand 1s linear infinite both;' : ''),
|
||||
}, genEl(token.children));
|
||||
}
|
||||
|
||||
|
|
@ -123,163 +107,126 @@ export default Vue.component('misskey-flavored-markdown', {
|
|||
token.node.props.attr == 'alternate' ? 'alternate' :
|
||||
'normal';
|
||||
const style = this.$store.state.device.animatedMfm
|
||||
? `animation: spin 1.5s linear infinite; animation-direction: ${direction};` : '';
|
||||
return (createElement as any)('span', {
|
||||
attrs: {
|
||||
style: 'display: inline-block;' + style
|
||||
},
|
||||
? `animation: anime-spin 1.5s linear infinite; animation-direction: ${direction};` : '';
|
||||
return h('span', {
|
||||
style: 'display: inline-block;' + style
|
||||
}, genEl(token.children));
|
||||
}
|
||||
|
||||
case 'jump': {
|
||||
return (createElement as any)('span', {
|
||||
attrs: {
|
||||
style: this.$store.state.device.animatedMfm ? 'display: inline-block; animation: jump 0.75s linear infinite;' : 'display: inline-block;'
|
||||
},
|
||||
return h('span', {
|
||||
style: this.$store.state.device.animatedMfm ? 'display: inline-block; animation: anime-jump 0.75s linear infinite;' : 'display: inline-block;'
|
||||
}, genEl(token.children));
|
||||
}
|
||||
|
||||
case 'flip': {
|
||||
return (createElement as any)('span', {
|
||||
attrs: {
|
||||
style: 'display: inline-block; transform: scaleX(-1);'
|
||||
},
|
||||
return h('span', {
|
||||
style: 'display: inline-block; transform: scaleX(-1);'
|
||||
}, genEl(token.children));
|
||||
}
|
||||
|
||||
case 'url': {
|
||||
return [createElement(MkUrl, {
|
||||
return [h(MkUrl, {
|
||||
key: Math.random(),
|
||||
props: {
|
||||
url: token.node.props.url,
|
||||
rel: 'nofollow noopener',
|
||||
},
|
||||
url: token.node.props.url,
|
||||
rel: 'nofollow noopener',
|
||||
})];
|
||||
}
|
||||
|
||||
case 'link': {
|
||||
return [createElement(MkLink, {
|
||||
return [h(MkLink, {
|
||||
key: Math.random(),
|
||||
props: {
|
||||
url: token.node.props.url,
|
||||
rel: 'nofollow noopener',
|
||||
},
|
||||
url: token.node.props.url,
|
||||
rel: 'nofollow noopener',
|
||||
}, genEl(token.children))];
|
||||
}
|
||||
|
||||
case 'mention': {
|
||||
return [createElement(MkMention, {
|
||||
return [h(MkMention, {
|
||||
key: Math.random(),
|
||||
props: {
|
||||
host: (token.node.props.host == null && this.author && this.author.host != null ? this.author.host : token.node.props.host) || host,
|
||||
username: token.node.props.username
|
||||
}
|
||||
host: (token.node.props.host == null && this.author && this.author.host != null ? this.author.host : token.node.props.host) || host,
|
||||
username: token.node.props.username
|
||||
})];
|
||||
}
|
||||
|
||||
case 'hashtag': {
|
||||
return [createElement('router-link', {
|
||||
return [h(RouterLink, {
|
||||
key: Math.random(),
|
||||
attrs: {
|
||||
to: this.isNote ? `/tags/${encodeURIComponent(token.node.props.hashtag)}` : `/explore/tags/${encodeURIComponent(token.node.props.hashtag)}`,
|
||||
style: 'color:var(--hashtag);'
|
||||
}
|
||||
to: this.isNote ? `/tags/${encodeURIComponent(token.node.props.hashtag)}` : `/explore/tags/${encodeURIComponent(token.node.props.hashtag)}`,
|
||||
style: 'color:var(--hashtag);'
|
||||
}, `#${token.node.props.hashtag}`)];
|
||||
}
|
||||
|
||||
case 'blockCode': {
|
||||
return [createElement(MkCode, {
|
||||
return [h(MkCode, {
|
||||
key: Math.random(),
|
||||
props: {
|
||||
code: token.node.props.code,
|
||||
lang: token.node.props.lang,
|
||||
}
|
||||
code: token.node.props.code,
|
||||
lang: token.node.props.lang,
|
||||
})];
|
||||
}
|
||||
|
||||
case 'inlineCode': {
|
||||
return [createElement(MkCode, {
|
||||
return [h(MkCode, {
|
||||
key: Math.random(),
|
||||
props: {
|
||||
code: token.node.props.code,
|
||||
lang: token.node.props.lang,
|
||||
inline: true
|
||||
}
|
||||
code: token.node.props.code,
|
||||
lang: token.node.props.lang,
|
||||
inline: true
|
||||
})];
|
||||
}
|
||||
|
||||
case 'quote': {
|
||||
if (this.shouldBreak) {
|
||||
return [createElement('div', {
|
||||
attrs: {
|
||||
class: 'quote'
|
||||
}
|
||||
if (!this.nowrap) {
|
||||
return [h('div', {
|
||||
class: 'quote'
|
||||
}, genEl(token.children))];
|
||||
} else {
|
||||
return [createElement('span', {
|
||||
attrs: {
|
||||
class: 'quote'
|
||||
}
|
||||
return [h('span', {
|
||||
class: 'quote'
|
||||
}, genEl(token.children))];
|
||||
}
|
||||
}
|
||||
|
||||
case 'title': {
|
||||
return [createElement('div', {
|
||||
attrs: {
|
||||
class: 'title'
|
||||
}
|
||||
return [h('div', {
|
||||
class: 'title'
|
||||
}, genEl(token.children))];
|
||||
}
|
||||
|
||||
case 'emoji': {
|
||||
return [createElement('mk-emoji', {
|
||||
return [h(MkEmoji, {
|
||||
key: Math.random(),
|
||||
attrs: {
|
||||
emoji: token.node.props.emoji,
|
||||
name: token.node.props.name
|
||||
},
|
||||
props: {
|
||||
customEmojis: this.customEmojis,
|
||||
normal: this.plain
|
||||
}
|
||||
emoji: token.node.props.emoji,
|
||||
name: token.node.props.name,
|
||||
customEmojis: this.customEmojis,
|
||||
normal: this.plain
|
||||
})];
|
||||
}
|
||||
|
||||
case 'mathInline': {
|
||||
//const MkFormula = () => import('./formula.vue').then(m => m.default);
|
||||
return [createElement(MkFormula, {
|
||||
return [h(MkFormula, {
|
||||
key: Math.random(),
|
||||
props: {
|
||||
formula: token.node.props.formula,
|
||||
block: false
|
||||
}
|
||||
formula: token.node.props.formula,
|
||||
block: false
|
||||
})];
|
||||
}
|
||||
|
||||
case 'mathBlock': {
|
||||
//const MkFormula = () => import('./formula.vue').then(m => m.default);
|
||||
return [createElement(MkFormula, {
|
||||
return [h(MkFormula, {
|
||||
key: Math.random(),
|
||||
props: {
|
||||
formula: token.node.props.formula,
|
||||
block: true
|
||||
}
|
||||
formula: token.node.props.formula,
|
||||
block: true
|
||||
})];
|
||||
}
|
||||
|
||||
case 'search': {
|
||||
//const MkGoogle = () => import('./google.vue').then(m => m.default);
|
||||
return [createElement(MkGoogle, {
|
||||
return [h(MkGoogle, {
|
||||
key: Math.random(),
|
||||
props: {
|
||||
q: token.node.props.query
|
||||
}
|
||||
q: token.node.props.query
|
||||
})];
|
||||
}
|
||||
|
||||
default: {
|
||||
console.log('unrecognized ast type:', token.node.type);
|
||||
console.error('unrecognized ast type:', token.node.type);
|
||||
|
||||
return [];
|
||||
}
|
||||
|
|
@ -287,6 +234,6 @@ export default Vue.component('misskey-flavored-markdown', {
|
|||
}));
|
||||
|
||||
// Parse ast to DOM
|
||||
return createElement('span', genEl(ast));
|
||||
return h('span', genEl(ast));
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue