feat: Shows Youtube and Vimeo links as embeds [cw-1393] (#7330)

This change will render the youbtube, vimeo and .mp4 urls as embedded in the article page in the help centre.

Fixes: https://linear.app/chatwoot/issue/CW-1393/help-center-support-video-upload-in-articles

Co-authored-by: Sojan <sojan@pepalo.com>

lib/chatwoot_markdown_renderer.rb

@@ -9,9 +9,9 @@ class ChatwootMarkdownRenderer
   end
 
   def render_article
-    superscript_renderer = SuperscriptRenderer.new
+    markdown_renderer = CustomMarkdownRenderer.new
     doc = CommonMarker.render_doc(@content, :DEFAULT)
-    html = superscript_renderer.render(doc)
+    html = markdown_renderer.render(doc)
 
     render_as_html_safe(html)
   end

lib/custom_markdown_renderer.rb

@@ -0,0 +1,93 @@
+class CustomMarkdownRenderer < CommonMarker::HtmlRenderer
+  YOUTUBE_REGEX = %r{https?://(?:www\.)?(?:youtube\.com/watch\?v=|youtu\.be/)([^&/]+)}
+  VIMEO_REGEX = %r{https?://(?:www\.)?vimeo\.com/(\d+)}
+  MP4_REGEX = %r{https?://(?:www\.)?.+\.(mp4)}
+
+  def text(node)
+    content = node.string_content
+
+    if content.include?('^')
+      split_content = parse_sup(content)
+      out(split_content.join)
+    else
+      out(escape_html(content))
+    end
+  end
+
+  def link(node)
+    render_embedded_content(node) || super
+  end
+
+  private
+
+  def render_embedded_content(node)
+    link_url = node.url
+
+    youtube_match = link_url.match(YOUTUBE_REGEX)
+    if youtube_match
+      out(make_youtube_embed(youtube_match))
+      return true
+    end
+
+    vimeo_match = link_url.match(VIMEO_REGEX)
+    if vimeo_match
+      out(make_vimeo_embed(vimeo_match))
+      return true
+    end
+
+    mp4_match = link_url.match(MP4_REGEX)
+    if mp4_match
+      out(make_video_embed(link_url))
+      return true
+    end
+
+    false
+  end
+
+  def parse_sup(content)
+    content.split(/(\^[^\^]+\^)/).map do |segment|
+      if segment.start_with?('^') && segment.end_with?('^')
+        "<sup>#{escape_html(segment[1..-2])}</sup>"
+      else
+        escape_html(segment)
+      end
+    end
+  end
+
+  def make_youtube_embed(youtube_match)
+    video_id = youtube_match[1]
+    %(
+      <iframe
+        width="560"
+        height="315"
+        src="https://www.youtube.com/embed/#{video_id}"
+        frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowfullscreen
+      ></iframe>
+    )
+  end
+
+  def make_vimeo_embed(vimeo_match)
+    video_id = vimeo_match[1]
+    %(
+      <iframe
+        src="https://player.vimeo.com/video/#{video_id}"
+        width="640"
+        height="360"
+        frameborder="0"
+        allow="autoplay; fullscreen; picture-in-picture"
+        allowfullscreen
+      ></iframe>
+    )
+  end
+
+  def make_video_embed(link_url)
+    %(
+      <video width="640" height="360" controls>
+        <source src="#{link_url}" type="video/mp4">
+        Your browser does not support the video tag.
+      </video>
+    )
+  end
+end

lib/superscript_renderer.rb

@@ -1,28 +0,0 @@
-class SuperscriptRenderer < CommonMarker::HtmlRenderer
-  def text(node)
-    content = node.string_content
-
-    # Check for presence of '^' in the content
-    if content.include?('^')
-      # Split the text and insert <sup> tags where necessary
-      split_content = parse_sup(content)
-      # Output the transformed content
-      out(split_content.join)
-    else
-      # Output the original content
-      out(escape_html(content))
-    end
-  end
-
-  private
-
-  def parse_sup(content)
-    content.split(/(\^[^\^]+\^)/).map do |segment|
-      if segment.start_with?('^') && segment.end_with?('^')
-        "<sup>#{escape_html(segment[1..-2])}</sup>"
-      else
-        escape_html(segment)
-      end
-    end
-  end
-end

spec/lib/chatwoot_markdown_renderer_spec.rb

@@ -4,13 +4,13 @@ RSpec.describe ChatwootMarkdownRenderer do
   let(:markdown_content) { 'This is a *test* content with ^markdown^' }
   let(:doc) { instance_double(CommonMarker::Node) }
   let(:renderer) { described_class.new(markdown_content) }
-  let(:superscript_renderer) { instance_double(SuperscriptRenderer) }
+  let(:markdown_renderer) { instance_double(CustomMarkdownRenderer) }
   let(:html_content) { '<p>This is a <em>test</em> content with <sup>markdown</sup></p>' }
 
   before do
     allow(CommonMarker).to receive(:render_doc).with(markdown_content, :DEFAULT).and_return(doc)
-    allow(SuperscriptRenderer).to receive(:new).and_return(superscript_renderer)
+    allow(CustomMarkdownRenderer).to receive(:new).and_return(markdown_renderer)
-    allow(superscript_renderer).to receive(:render).with(doc).and_return(html_content)
+    allow(markdown_renderer).to receive(:render).with(doc).and_return(html_content)
   end
 
   describe '#render_article' do

spec/lib/custom_markdown_renderer_spec.rb

@@ -0,0 +1,117 @@
+require 'rails_helper'
+
+describe CustomMarkdownRenderer do
+  let(:renderer) { described_class.new }
+
+  def render_markdown(markdown)
+    doc = CommonMarker.render_doc(markdown, :DEFAULT)
+    renderer.render(doc)
+  end
+
+  describe '#text' do
+    it 'converts text wrapped in ^ to superscript' do
+      markdown = 'This is an example of a superscript: ^superscript^.'
+      expect(render_markdown(markdown)).to include('<sup>superscript</sup>')
+    end
+
+    it 'does not convert text not wrapped in ^' do
+      markdown = 'This is an example without superscript.'
+      expect(render_markdown(markdown)).not_to include('<sup>')
+    end
+
+    it 'converts multiple superscripts in the same text' do
+      markdown = 'This is an example with ^multiple^ ^superscripts^.'
+      rendered_html = render_markdown(markdown)
+      expect(rendered_html.scan('<sup>').length).to eq(2)
+      expect(rendered_html).to include('<sup>multiple</sup>')
+      expect(rendered_html).to include('<sup>superscripts</sup>')
+    end
+  end
+
+  describe 'broken ^ usage' do
+    it 'does not convert text that only starts with ^' do
+      markdown = 'This is an example with ^broken superscript.'
+      expected_output = '<p>This is an example with ^broken superscript.</p>'
+      expect(render_markdown(markdown)).to include(expected_output)
+    end
+
+    it 'does not convert text that only ends with ^' do
+      markdown = 'This is an example with broken^ superscript.'
+      expected_output = '<p>This is an example with broken^ superscript.</p>'
+      expect(render_markdown(markdown)).to include(expected_output)
+    end
+
+    it 'does not convert text with uneven numbers of ^' do
+      markdown = 'This is an example with ^broken^ superscript^.'
+      expected_output = '<p>This is an example with <sup>broken</sup> superscript^.</p>'
+      expect(render_markdown(markdown)).to include(expected_output)
+    end
+  end
+
+  describe '#link' do
+    def render_markdown_link(link)
+      doc = CommonMarker.render_doc("[link](#{link})", :DEFAULT)
+      renderer.render(doc)
+    end
+
+    context 'when link is a YouTube URL' do
+      let(:youtube_url) { 'https://www.youtube.com/watch?v=VIDEO_ID' }
+
+      it 'renders an iframe with YouTube embed code' do
+        output = render_markdown_link(youtube_url)
+        expect(output).to include(`
+          <iframe
+            width="560"
+            height="315"
+            src="https://www.youtube.com/embed/VIDEO_ID"
+        `)
+      end
+    end
+
+    context 'when link is a Vimeo URL' do
+      let(:vimeo_url) { 'https://vimeo.com/1234567' }
+
+      it 'renders an iframe with Vimeo embed code' do
+        output = render_markdown_link(vimeo_url)
+        expect(output).to include(`
+          <iframe
+            src="https://player.vimeo.com/video/1234567"
+        `)
+      end
+    end
+
+    context 'when link is an MP4 URL' do
+      let(:mp4_url) { 'https://example.com/video.mp4' }
+
+      it 'renders a video element with the MP4 source' do
+        output = render_markdown_link(mp4_url)
+        expect(output).to match(`
+          <video width="640" height="360" controls >
+            <source src="https://example.com/video.mp4" type="video/mp4">
+            Your browser does not support the video tag.
+          </video>
+        `)
+      end
+    end
+
+    context 'when link is a normal URL' do
+      let(:normal_url) { 'https://example.com' }
+
+      it 'renders a normal link' do
+        output = render_markdown_link(normal_url)
+        expect(output).to include('<a href="https://example.com">')
+      end
+    end
+
+    context 'when multiple links are present' do
+      it 'renders all links' do
+        markdown = '[youtube](https://www.youtube.com/watch?v=VIDEO_ID) [vimeo](https://vimeo.com/1234567) ^ hello ^ [normal](https://example.com)'
+        output = render_markdown(markdown)
+        expect(output).to include('src="https://www.youtube.com/embed/VIDEO_ID"')
+        expect(output).to include('src="https://player.vimeo.com/video/1234567"')
+        expect(output).to include('<a href="https://example.com">')
+        expect(output).to include('<sup> hello </sup>')
+      end
+    end
+  end
+end

spec/lib/superscript_renderer_spec.rb

@@ -1,50 +0,0 @@
-require 'rails_helper'
-
-describe SuperscriptRenderer do
-  let(:renderer) { described_class.new }
-
-  def render_markdown(markdown)
-    doc = CommonMarker.render_doc(markdown, :DEFAULT)
-    renderer.render(doc)
-  end
-
-  describe '#text' do
-    it 'converts text wrapped in ^ to superscript' do
-      markdown = 'This is an example of a superscript: ^superscript^.'
-      expect(render_markdown(markdown)).to include('<sup>superscript</sup>')
-    end
-
-    it 'does not convert text not wrapped in ^' do
-      markdown = 'This is an example without superscript.'
-      expect(render_markdown(markdown)).not_to include('<sup>')
-    end
-
-    it 'converts multiple superscripts in the same text' do
-      markdown = 'This is an example with ^multiple^ ^superscripts^.'
-      rendered_html = render_markdown(markdown)
-      expect(rendered_html.scan('<sup>').length).to eq(2)
-      expect(rendered_html).to include('<sup>multiple</sup>')
-      expect(rendered_html).to include('<sup>superscripts</sup>')
-    end
-  end
-
-  describe 'broken ^ usage' do
-    it 'does not convert text that only starts with ^' do
-      markdown = 'This is an example with ^broken superscript.'
-      expected_output = '<p>This is an example with ^broken superscript.</p>'
-      expect(render_markdown(markdown)).to include(expected_output)
-    end
-
-    it 'does not convert text that only ends with ^' do
-      markdown = 'This is an example with broken^ superscript.'
-      expected_output = '<p>This is an example with broken^ superscript.</p>'
-      expect(render_markdown(markdown)).to include(expected_output)
-    end
-
-    it 'does not convert text with uneven numbers of ^' do
-      markdown = 'This is an example with ^broken^ superscript^.'
-      expected_output = '<p>This is an example with <sup>broken</sup> superscript^.</p>'
-      expect(render_markdown(markdown)).to include(expected_output)
-    end
-  end
-end