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