diff --git a/client/src/components/markdown.ts b/client/src/components/markdown.ts index a60f3d42..6ea5bd17 100644 --- a/client/src/components/markdown.ts +++ b/client/src/components/markdown.ts @@ -71,7 +71,7 @@ function htmlTag( let attributeString = '' for (const attr in attributes) { if (Object.prototype.hasOwnProperty.call(attributes, attr) && attributes[attr]) { - attributeString += ` ${md.sanitizeText(attr)}="${md.sanitizeText(attributes[attr])}"` + attributeString += ` ${attr}="${attributes[attr]}"` // md.sanitizeText(attr) } } @@ -221,7 +221,16 @@ const rules: MarkdownRules = { } }, html(node, output, state) { - return htmlTag('span', '', { class: `emoji`, 'data-emoji': node.id }, state) + return htmlTag( + 'span', + '', + { + class: `emoji`, + 'data-emoji': node.id, + 'v-tooltip.top-center': `{ content:':${node.id}:', offset: 2, delay: { show: 1000, hide: 100 } }`, + }, + state, + ) }, }, emoticon: { @@ -246,7 +255,7 @@ const rules: MarkdownRules = { } }, html(node, output, state) { - return htmlTag('span', htmlTag('span', output(node.content, state), {}, state), { class: 'spoiler' }, state) //htmlTag('span', , { }, state) + return htmlTag('span', htmlTag('span', output(node.content, state), {}, state), { class: 'spoiler' }, state) }, }, } @@ -258,37 +267,16 @@ const htmlOutput = md.outputFor(rules, 'html') name: 'neko-markdown', }) export default class extends Vue { - html = '' - @Prop({ required: true }) source!: string - @Watch('source') - onSourceChanged(source: string) { + render(h: any) { const state: MarkdownState = { inline: true, inQuote: false, escapeHTML: true, cssModuleNames: null, } - - this.html = htmlOutput(parser(source, state), state) - } - - render(createElement: any) { - const state: MarkdownState = { - inline: true, - inQuote: false, - escapeHTML: true, - cssModuleNames: null, - } - - this.html = htmlOutput(parser(this.source, state), state) - - return createElement('div', { - domProps: { - innerHTML: this.html, - }, - }) + return h({ template: `
${htmlOutput(parser(this.source, state), state)}
` }) } } diff --git a/client/vue.config.js b/client/vue.config.js index 0844eaa9..3a0748ba 100644 --- a/client/vue.config.js +++ b/client/vue.config.js @@ -13,6 +13,7 @@ module.exports = { configureWebpack: { resolve: { alias: { + vue$: 'vue/dist/vue.esm.js', '~': path.resolve(__dirname, 'src/'), }, },