mirror of
https://github.com/styppo/hamstr.git
synced 2024-10-18 13:33:22 +00:00
Strip link text for YouTube embeds
This commit is contained in:
parent
5f9aea0c26
commit
9037fee305
@ -30,20 +30,22 @@ import emoji from 'markdown-it-emoji'
|
|||||||
import * as Bolt11Decoder from 'light-bolt11-decoder'
|
import * as Bolt11Decoder from 'light-bolt11-decoder'
|
||||||
import BaseInvoice from 'components/Post/Renderer/BaseInvoice.vue'
|
import BaseInvoice from 'components/Post/Renderer/BaseInvoice.vue'
|
||||||
|
|
||||||
|
const REGEX_YOUTUBE = /\bhttps:\/\/(www.|m.)?youtu(be.com|.be)\/(watch\?v=|shorts\/)?(?<v>[a-zA-Z0-9_-]{11})(&t=(?<s>[0-9]+)s)?/
|
||||||
|
|
||||||
const md = MarkdownIt({
|
const md = MarkdownIt({
|
||||||
html: false,
|
html: false,
|
||||||
breaks: true,
|
breaks: true,
|
||||||
linkify: true
|
linkify: true
|
||||||
})
|
})
|
||||||
md.disable(['link', 'image'])
|
|
||||||
.use(subscript)
|
md.use(subscript)
|
||||||
.use(superscript)
|
.use(superscript)
|
||||||
.use(deflist)
|
.use(deflist)
|
||||||
.use(emoji)
|
.use(emoji)
|
||||||
.use(md => {
|
.use(md => {
|
||||||
// pulled from https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
|
// pulled from https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
|
||||||
// Remember old renderer, if overridden, or proxy to default renderer
|
// Remember old renderer, if overridden, or proxy to default renderer
|
||||||
var defaultRender = md.renderer.rules.link_open || function(tokens, idx, options, env, self) {
|
const defaultRender = md.renderer.rules.link_open || function(tokens, idx, options, env, self) {
|
||||||
return self.renderToken(tokens, idx, options)
|
return self.renderToken(tokens, idx, options)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -64,7 +66,6 @@ md.disable(['link', 'image'])
|
|||||||
return `![](${m})`
|
return `![](${m})`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return m
|
return m
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
@ -72,7 +73,6 @@ md.disable(['link', 'image'])
|
|||||||
md.renderer.rules.image = (tokens, idx) => {
|
md.renderer.rules.image = (tokens, idx) => {
|
||||||
let src = tokens[idx].attrs[[tokens[idx].attrIndex('src')]][1]
|
let src = tokens[idx].attrs[[tokens[idx].attrIndex('src')]][1]
|
||||||
let trimmed = src.split('?')[0]
|
let trimmed = src.split('?')[0]
|
||||||
// let classIndex = token.attrIndex('class')
|
|
||||||
if (
|
if (
|
||||||
trimmed.endsWith('.gif') ||
|
trimmed.endsWith('.gif') ||
|
||||||
trimmed.endsWith('.png') ||
|
trimmed.endsWith('.png') ||
|
||||||
@ -91,27 +91,26 @@ md.disable(['link', 'image'])
|
|||||||
}
|
}
|
||||||
|
|
||||||
md.renderer.rules.link_open = function(tokens, idx, options, env, self) {
|
md.renderer.rules.link_open = function(tokens, idx, options, env, self) {
|
||||||
// If you are sure other plugins can't add `target` - drop check below
|
const token = tokens[idx]
|
||||||
var token = tokens[idx]
|
const aIndexHref = token.attrIndex('href')
|
||||||
var aIndexTarget = token.attrIndex('target')
|
|
||||||
var aIndexHref = token.attrIndex('href')
|
|
||||||
|
|
||||||
var ytRegex = /\bhttps:\/\/(www.|m.)?youtu(be.com|.be)\/(watch\?v=|shorts\/)?(?<v>[a-zA-Z0-9_-]{11})(&t=(?<s>[0-9]+)s)?/
|
const ytMatch = token.attrs[aIndexHref][1].match(REGEX_YOUTUBE)
|
||||||
let ytMatch = token.attrs[aIndexHref][1].match(ytRegex)
|
|
||||||
// console.log('ytMatch', ytMatch, token.attrs[aIndexHref][1])
|
|
||||||
if (ytMatch) {
|
if (ytMatch) {
|
||||||
|
// XXX Hack: remove link text from youtube links
|
||||||
|
const nextToken = tokens[idx + 1]
|
||||||
|
if (nextToken && nextToken.type === 'text') nextToken.content = ''
|
||||||
|
|
||||||
let src = `https://www.youtube.com/embed/${ytMatch.groups.v}`
|
let src = `https://www.youtube.com/embed/${ytMatch.groups.v}`
|
||||||
if (ytMatch.groups.s) src = src + `?start=${ytMatch.groups.s}`
|
if (ytMatch.groups.s) src = src + `?start=${ytMatch.groups.s}`
|
||||||
// src = src + `&origin=http://localhost:8080/`
|
|
||||||
// console.log('ytMatch', src)
|
|
||||||
return `<iframe anonymous async style="height: 15rem; width: 90%; object-fit: cover;" src="${src}"
|
return `<iframe anonymous async style="height: 15rem; width: 90%; object-fit: cover;" src="${src}"
|
||||||
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
|
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
|
||||||
</iframe>`
|
</iframe>`
|
||||||
}
|
}
|
||||||
|
|
||||||
var httpRegex = /^https?:\/\//
|
const httpRegex = /^https?:\/\//
|
||||||
|
|
||||||
if (httpRegex.test(token.attrs[aIndexHref][1])) {
|
if (httpRegex.test(token.attrs[aIndexHref][1])) {
|
||||||
|
// If you are sure other plugins can't add `target` - drop check below
|
||||||
|
let aIndexTarget = token.attrIndex('target')
|
||||||
if (aIndexTarget < 0) {
|
if (aIndexTarget < 0) {
|
||||||
tokens[idx].attrPush(['target', '_blank']) // add new attribute
|
tokens[idx].attrPush(['target', '_blank']) // add new attribute
|
||||||
} else {
|
} else {
|
||||||
@ -124,14 +123,12 @@ md.disable(['link', 'image'])
|
|||||||
}
|
}
|
||||||
|
|
||||||
// md.renderer.rules.code_inline = function (tokens, idx, options, env, self) {
|
// md.renderer.rules.code_inline = function (tokens, idx, options, env, self) {
|
||||||
// var token = tokens[idx]
|
// let token = tokens[idx]
|
||||||
|
|
||||||
// return `<code ${self.renderAttrs(token)}>${token.content}</code>`
|
// return `<code ${self.renderAttrs(token)}>${token.content}</code>`
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// md.renderer.rules.code_block = function (tokens, idx, options, env, self) {
|
// md.renderer.rules.code_block = function (tokens, idx, options, env, self) {
|
||||||
// var token = tokens[idx]
|
// let token = tokens[idx]
|
||||||
|
|
||||||
// return `<code ${self.renderAttrs(token)}>${token.content}</code>`
|
// return `<code ${self.renderAttrs(token)}>${token.content}</code>`
|
||||||
// }
|
// }
|
||||||
})
|
})
|
||||||
@ -143,7 +140,7 @@ md.linkify
|
|||||||
.add('http:', {
|
.add('http:', {
|
||||||
validate(text, pos, self) {
|
validate(text, pos, self) {
|
||||||
// copied from linkify defaultSchemas
|
// copied from linkify defaultSchemas
|
||||||
var tail = text.slice(pos)
|
const tail = text.slice(pos)
|
||||||
if (!self.re.http) {
|
if (!self.re.http) {
|
||||||
self.re.http = new RegExp(
|
self.re.http = new RegExp(
|
||||||
'^\\/\\/' +
|
'^\\/\\/' +
|
||||||
@ -235,7 +232,7 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
render() {
|
render() {
|
||||||
this.html = md.render(this.parsedContent) + this.$refs.append.innerHTML
|
this.html = md.render(this.parsedContent) + this.$refs.append.innerHTML
|
||||||
// md.render(this.$refs.src.innerHTML) + this.$refs.append.innerHTML
|
|
||||||
this.$refs.html.querySelectorAll('img').forEach(img => {
|
this.$refs.html.querySelectorAll('img').forEach(img => {
|
||||||
img.addEventListener('click', (e) => {
|
img.addEventListener('click', (e) => {
|
||||||
e.stopPropagation()
|
e.stopPropagation()
|
||||||
@ -286,8 +283,8 @@ export default {
|
|||||||
event.stopPropagation()
|
event.stopPropagation()
|
||||||
this.$router.push(to)
|
this.$router.push(to)
|
||||||
}
|
}
|
||||||
// stop propogation of external links
|
|
||||||
} else if (target && target.matches(".dynamic-content a[href*='://']") && target.href) {
|
} else if (target && target.matches(".dynamic-content a[href*='://']") && target.href) {
|
||||||
|
// stop propagation of external links
|
||||||
event.stopPropagation()
|
event.stopPropagation()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user