Fix HTML in account/channel description

This commit is contained in:
Chocobozzz 2022-11-14 10:47:39 +01:00
parent d91021548e
commit 0e45e336f6
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
17 changed files with 64 additions and 26 deletions

View File

@ -105,7 +105,11 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
}) })
) )
.subscribe(async ({ videoChannel, videos, total }) => { .subscribe(async ({ videoChannel, videos, total }) => {
this.channelsDescriptionHTML[videoChannel.id] = await this.markdown.textMarkdownToHTML(videoChannel.description) this.channelsDescriptionHTML[videoChannel.id] = await this.markdown.textMarkdownToHTML({
markdown: videoChannel.description,
withEmoji: true,
withHtml: true
})
this.videoChannels.push(videoChannel) this.videoChannels.push(videoChannel)

View File

@ -142,7 +142,11 @@ export class AccountsComponent implements OnInit, OnDestroy {
} }
private async onAccount (account: Account) { private async onAccount (account: Account) {
this.accountDescriptionHTML = await this.markdown.textMarkdownToHTML(account.description) this.accountDescriptionHTML = await this.markdown.textMarkdownToHTML({
markdown: account.description,
withEmoji: true,
withHtml: true
})
// After the markdown renderer to avoid layout changes // After the markdown renderer to avoid layout changes
this.account = account this.account = account

View File

@ -127,7 +127,7 @@ export class VideoBlockListComponent extends RestTable implements OnInit {
} }
toHtml (text: string) { toHtml (text: string) {
return this.markdownRenderer.textMarkdownToHTML(text) return this.markdownRenderer.textMarkdownToHTML({ markdown: text })
} }
async unblockVideo (entry: VideoBlacklist) { async unblockVideo (entry: VideoBlacklist) {

View File

@ -115,7 +115,7 @@ export class VideoCommentListComponent extends RestTable implements OnInit {
} }
toHtml (text: string) { toHtml (text: string) {
return this.markdownRenderer.textMarkdownToHTML(text, true, true) return this.markdownRenderer.textMarkdownToHTML({ markdown: text, withHtml: true, withEmoji: true })
} }
isInSelectionMode () { isInSelectionMode () {

View File

@ -56,8 +56,17 @@ export class VideoChannelsComponent implements OnInit, OnDestroy {
])) ]))
) )
.subscribe(async videoChannel => { .subscribe(async videoChannel => {
this.channelDescriptionHTML = await this.markdown.textMarkdownToHTML(videoChannel.description) this.channelDescriptionHTML = await this.markdown.textMarkdownToHTML({
this.ownerDescriptionHTML = await this.markdown.textMarkdownToHTML(videoChannel.ownerAccount.description) markdown: videoChannel.description,
withEmoji: true,
withHtml: true
})
this.ownerDescriptionHTML = await this.markdown.textMarkdownToHTML({
markdown: videoChannel.ownerAccount.description,
withEmoji: true,
withHtml: true
})
// After the markdown renderer to avoid layout changes // After the markdown renderer to avoid layout changes
this.videoChannel = videoChannel this.videoChannel = videoChannel

View File

@ -160,7 +160,7 @@ export class VideoCommentComponent implements OnInit, OnChanges {
private async init () { private async init () {
// Before HTML rendering restore line feed for markdown list compatibility // Before HTML rendering restore line feed for markdown list compatibility
const commentText = this.comment.text.replace(/<br.?\/?>/g, '\r\n') const commentText = this.comment.text.replace(/<br.?\/?>/g, '\r\n')
const html = await this.markdownService.textMarkdownToHTML(commentText, true, true) const html = await this.markdownService.textMarkdownToHTML({ markdown: commentText, withHtml: true, withEmoji: true })
this.sanitizedCommentHTML = this.markdownService.processVideoTimestamps(this.video.shortUUID, html) this.sanitizedCommentHTML = this.markdownService.processVideoTimestamps(this.video.shortUUID, html)
this.newParentComments = this.parentComments.concat([ this.comment ]) this.newParentComments = this.parentComments.concat([ this.comment ])

View File

@ -80,7 +80,7 @@ export class VideoDescriptionComponent implements OnChanges {
} }
private async setVideoDescriptionHTML () { private async setVideoDescriptionHTML () {
const html = await this.markdownService.textMarkdownToHTML(this.video.description) const html = await this.markdownService.textMarkdownToHTML({ markdown: this.video.description })
this.videoHTMLDescription = this.markdownService.processVideoTimestamps(this.video.shortUUID, html) this.videoHTMLDescription = this.markdownService.processVideoTimestamps(this.video.shortUUID, html)
} }

View File

@ -206,7 +206,7 @@ export class AppComponent implements OnInit, AfterViewInit {
} }
this.broadcastMessage = { this.broadcastMessage = {
message: await this.markdownService.unsafeMarkdownToHTML(messageConfig.message, true), message: await this.markdownService.markdownToUnsafeHTML({ markdown: messageConfig.message }),
dismissable: messageConfig.dismissable, dismissable: messageConfig.dismissable,
class: classes[messageConfig.level] class: classes[messageConfig.level]
} }

View File

@ -259,11 +259,11 @@ export class PluginService implements ClientHook {
markdownRenderer: { markdownRenderer: {
textMarkdownToHTML: (textMarkdown: string) => { textMarkdownToHTML: (textMarkdown: string) => {
return this.markdownRenderer.textMarkdownToHTML(textMarkdown) return this.markdownRenderer.textMarkdownToHTML({ markdown: textMarkdown })
}, },
enhancedMarkdownToHTML: (enhancedMarkdown: string) => { enhancedMarkdownToHTML: (enhancedMarkdown: string) => {
return this.markdownRenderer.enhancedMarkdownToHTML(enhancedMarkdown) return this.markdownRenderer.enhancedMarkdownToHTML({ markdown: enhancedMarkdown })
} }
}, },

View File

@ -62,23 +62,40 @@ export class MarkdownService {
constructor (private htmlRenderer: HtmlRendererService) {} constructor (private htmlRenderer: HtmlRendererService) {}
textMarkdownToHTML (markdown: string, withHtml = false, withEmoji = false) { textMarkdownToHTML (options: {
markdown: string
withHtml?: boolean
withEmoji?: boolean
}) {
const { markdown, withHtml = false, withEmoji = false } = options
if (withHtml) return this.render({ name: 'textWithHTMLMarkdownIt', markdown, withEmoji }) if (withHtml) return this.render({ name: 'textWithHTMLMarkdownIt', markdown, withEmoji })
return this.render({ name: 'textMarkdownIt', markdown, withEmoji }) return this.render({ name: 'textMarkdownIt', markdown, withEmoji })
} }
enhancedMarkdownToHTML (markdown: string, withHtml = false, withEmoji = false) { enhancedMarkdownToHTML (options: {
markdown: string
withHtml?: boolean
withEmoji?: boolean
}) {
const { markdown, withHtml = false, withEmoji = false } = options
if (withHtml) return this.render({ name: 'enhancedWithHTMLMarkdownIt', markdown, withEmoji }) if (withHtml) return this.render({ name: 'enhancedWithHTMLMarkdownIt', markdown, withEmoji })
return this.render({ name: 'enhancedMarkdownIt', markdown, withEmoji }) return this.render({ name: 'enhancedMarkdownIt', markdown, withEmoji })
} }
unsafeMarkdownToHTML (markdown: string, _trustedInput: true) { markdownToUnsafeHTML (options: { markdown: string }) {
return this.render({ name: 'unsafeMarkdownIt', markdown, withEmoji: true }) return this.render({ name: 'unsafeMarkdownIt', markdown: options.markdown, withEmoji: true })
} }
customPageMarkdownToHTML (markdown: string, additionalAllowedTags: string[]) { customPageMarkdownToHTML (options: {
markdown: string
additionalAllowedTags: string[]
}) {
const { markdown, additionalAllowedTags } = options
return this.render({ name: 'customPageMarkdownIt', markdown, withEmoji: true, additionalAllowedTags }) return this.render({ name: 'customPageMarkdownIt', markdown, withEmoji: true, additionalAllowedTags })
} }

View File

@ -214,8 +214,8 @@ export class AbuseListTableComponent extends RestTable implements OnInit {
abuse.truncatedCommentHtml = abuse.commentHtml = $localize`Deleted comment` abuse.truncatedCommentHtml = abuse.commentHtml = $localize`Deleted comment`
} else { } else {
const truncated = truncate(abuse.comment.text, { length: 100 }) const truncated = truncate(abuse.comment.text, { length: 100 })
abuse.truncatedCommentHtml = await this.markdownRenderer.textMarkdownToHTML(truncated, true) abuse.truncatedCommentHtml = await this.markdownRenderer.textMarkdownToHTML({ markdown: truncated, withHtml: true })
abuse.commentHtml = await this.markdownRenderer.textMarkdownToHTML(abuse.comment.text, true) abuse.commentHtml = await this.markdownRenderer.textMarkdownToHTML({ markdown: abuse.comment.text, withHtml: true })
} }
} }
@ -451,6 +451,6 @@ export class AbuseListTableComponent extends RestTable implements OnInit {
} }
private toHtml (text: string) { private toHtml (text: string) {
return this.markdownRenderer.textMarkdownToHTML(text) return this.markdownRenderer.textMarkdownToHTML({ markdown: text })
} }
} }

View File

@ -58,7 +58,7 @@ export class CustomMarkupService {
} }
async buildElement (text: string) { async buildElement (text: string) {
const html = await this.markdown.customPageMarkdownToHTML(text, this.getSupportedTags()) const html = await this.markdown.customPageMarkdownToHTML({ markdown: text, additionalAllowedTags: this.getSupportedTags() })
const rootElement = document.createElement('div') const rootElement = document.createElement('div')
rootElement.innerHTML = html rootElement.innerHTML = html

View File

@ -42,7 +42,11 @@ export class ChannelMiniatureMarkupComponent implements CustomMarkupComponent, O
tap(channel => { tap(channel => {
this.channel = channel this.channel = channel
}), }),
switchMap(() => from(this.markdown.textMarkdownToHTML(this.channel.description))), switchMap(() => from(this.markdown.textMarkdownToHTML({
markdown: this.channel.description,
withEmoji: true,
withHtml: true
}))),
tap(html => { tap(html => {
this.descriptionHTML = html this.descriptionHTML = html
}), }),

View File

@ -144,9 +144,9 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
html = result html = result
} else if (this.markdownType === 'text') { } else if (this.markdownType === 'text') {
html = await this.markdownService.textMarkdownToHTML(text) html = await this.markdownService.textMarkdownToHTML({ markdown: text })
} else { } else {
html = await this.markdownService.enhancedMarkdownToHTML(text) html = await this.markdownService.enhancedMarkdownToHTML({ markdown: text })
} }
if (this.markdownVideo) { if (this.markdownVideo) {

View File

@ -51,7 +51,7 @@ export class InstanceService {
} }
for (const key of Object.keys(html)) { for (const key of Object.keys(html)) {
html[key] = await this.markdownService.textMarkdownToHTML(about.instance[key]) html[key] = await this.markdownService.textMarkdownToHTML({ markdown: about.instance[key] })
} }
return html return html

View File

@ -27,7 +27,7 @@ export class SupportModalComponent {
const support = this.video?.support || this.videoChannel.support const support = this.video?.support || this.videoChannel.support
this.markdownService.enhancedMarkdownToHTML(support) this.markdownService.enhancedMarkdownToHTML({ markdown: support })
.then(r => { .then(r => {
this.htmlSupport = r this.htmlSupport = r
}) })

View File

@ -32,7 +32,7 @@ export class VideoPlaylistMiniatureComponent implements OnInit {
async ngOnInit () { async ngOnInit () {
this.buildPlaylistUrl() this.buildPlaylistUrl()
if (this.displayDescription) { if (this.displayDescription) {
this.playlistDescription = await this.markdownService.textMarkdownToHTML(this.playlist.description) this.playlistDescription = await this.markdownService.textMarkdownToHTML({ markdown: this.playlist.description })
} }
} }