Strip link text for YouTube embeds

src/components/Post/Renderer/BaseMarkdown.vue

@@ -30,20 +30,22 @@ import emoji from 'markdown-it-emoji'
 import * as Bolt11Decoder from 'light-bolt11-decoder'
 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({
   html: false,
   breaks: true,
   linkify: true
 })
-md.disable(['link', 'image'])
+
-  .use(subscript)
+md.use(subscript)
   .use(superscript)
   .use(deflist)
   .use(emoji)
   .use(md => {
     // 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
-    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)
     }
 
@@ -64,7 +66,6 @@ md.disable(['link', 'image'])
             return `![](${m})`
           }
         }
-
         return m
       })
     })
@@ -72,7 +73,6 @@ md.disable(['link', 'image'])
     md.renderer.rules.image = (tokens, idx) => {
       let src = tokens[idx].attrs[[tokens[idx].attrIndex('src')]][1]
       let trimmed = src.split('?')[0]
-      // let classIndex = token.attrIndex('class')
       if (
         trimmed.endsWith('.gif') ||
         trimmed.endsWith('.png') ||
@@ -90,28 +90,27 @@ 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) {
+        // 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}`
         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}"
           title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
           </iframe>`
       }
 
-      var httpRegex = /^https?:\/\//
+      const httpRegex = /^https?:\/\//
-
       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) {
           tokens[idx].attrPush(['target', '_blank']) // add new attribute
         } else {
@@ -124,14 +123,12 @@ md.disable(['link', 'image'])
     }
 
     // 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>`
     // }
 
     // 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>`
     // }
   })
@@ -143,7 +140,7 @@ md.linkify
   .add('http:', {
     validate(text, pos, self) {
       // copied from linkify defaultSchemas
-      var tail = text.slice(pos)
+      const tail = text.slice(pos)
       if (!self.re.http) {
         self.re.http = new RegExp(
           '^\\/\\/' +
@@ -235,7 +232,7 @@ export default {
   methods: {
     render() {
       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 => {
         img.addEventListener('click', (e) => {
           e.stopPropagation()
@@ -286,8 +283,8 @@ export default {
           event.stopPropagation()
           this.$router.push(to)
         }
-      // stop propogation of external links
       } else if (target && target.matches(".dynamic-content a[href*='://']") && target.href) {
+        // stop propagation of external links
         event.stopPropagation()
       }
     },