trix_embed 0.0.2

data/app/javascript/media.js

@@ -0,0 +1,102 @@
+import { createURL } from './urls'
+
+const audioMediaTypes = {
+  mp3: 'audio/mpeg', // MP3 audio format
+  ogg: 'audio/ogg', // OGG audio format
+  wav: 'audio/wav' // WAV audio format
+}
+
+const imageMediaTypes = {
+  avif: 'image/avif', // AVIF image format
+  bmp: 'image/bmp', // BMP image format
+  gif: 'image/gif', // GIF image format
+  heic: 'image/heic', // HEIC image format
+  heif: 'image/heif', // HEIF image format
+  ico: 'image/x-icon', // ICO image format
+  jp2: 'image/jp2', // JPEG 2000 image format
+  jpeg: 'image/jpeg', // JPEG image format
+  jpg: 'image/jpeg', // JPEG image format (alternative extension)
+  jxr: 'image/vnd.ms-photo', // JPEG XR image format
+  png: 'image/png', // PNG image format
+  svg: 'image/svg+xml', // SVG image format
+  tif: 'image/tiff', // TIFF image format
+  tiff: 'image/tiff', // TIFF image format (alternative extension)
+  webp: 'image/webp' // WebP image format
+}
+
+const videoMediaTypes = {
+  mp4: 'video/mp4', // MP4 video format
+  ogv: 'video/ogg', // OGG video format
+  webm: 'video/webm' // WebM video format
+}
+
+// TODO: Expand to all media types once proper templates are implemented
+const mediaTypes = imageMediaTypes
+
+const tagsWithHrefAttribute = [
+  'animate', // SVG: Animation
+  'animateMotion', // SVG: Animation
+  'animateTransform', // SVG: Animation
+  'area', // HTML: Image map area
+  'audio', // HTML: Audio content
+  'base', // HTML: Base URL
+  'embed', // HTML: Embedded content
+  'feDisplacementMap', // SVG: Filter primitive
+  'feImage', // SVG: Filter primitive
+  'feTile', // SVG: Filter primitive
+  'filter', // SVG: Filter container
+  'font-face-uri', // SVG: Font reference
+  'iframe', // HTML: Inline frame
+  'image', // SVG: Image
+  'link', // HTML: External resources (e.g., stylesheets)
+  'object', // HTML: Embedded content (fallback for non-HTML5 browsers)
+  'script', // HTML: External scripts
+  'source', // HTML: Media source
+  'track', // HTML: Text tracks for media elements
+  'use', // SVG: Reuse shapes from other documents
+  'video' // HTML: Video content
+]
+
+const tagsWithSrcAttribute = [
+  'audio', // HTML: Audio content
+  'embed', // HTML: Embedded content
+  'iframe', // HTML: Inline frame
+  'img', // HTML: Images
+  'input', // HTML: Input elements with type="image"
+  'script', // HTML: External scripts
+  'source', // HTML: Media source
+  'track', // HTML: Text tracks for media elements
+  'video', // HTML: Video content
+  'frame', // HTML: Deprecated (use iframe instead)
+  'frameset', // HTML: Deprecated (use iframe instead)
+  'object', // HTML: Embedded content
+  'picture', // HTML: Responsive images
+  'use' // SVG: Reuse shapes from other documents
+]
+
+export const mediaTags = tagsWithHrefAttribute.concat(tagsWithSrcAttribute)
+
+export function isAudio(url) {
+  return !!Object.values(audioMediaTypes).find(t => t === getMediaType(url))
+}
+
+export function isImage(url) {
+  return !!Object.values(imageMediaTypes).find(t => t === getMediaType(url))
+}
+
+export function isVideo(url) {
+  return !!Object.values(videoMediaTypes).find(t => t === getMediaType(url))
+}
+
+export function getMediaType(value) {
+  let url
+
+  createURL(value, u => (url = u))
+  if (!url) return null
+
+  const index = url.pathname.lastIndexOf('.')
+  if (!index) return null
+
+  const extension = url.pathname.substring(index + 1)
+  return mediaTypes[extension]
+}

data/app/javascript/renderer.js

@@ -0,0 +1,127 @@
+import { createURL, extractURLHosts } from './urls'
+import { isImage, getMediaType } from './media'
+import { getTemplate } from './templates'
+
+export default class Renderer {
+  // Constructs a new Renderer instance
+  //
+  // @param {Controller} controller - a Stimulus Controller instance
+  constructor(controller) {
+    this.controller = controller
+    this.initializeTempates()
+  }
+
+  initializeTempates() {
+    const templates = ['error', 'exception', 'header', 'iframe', 'image']
+    templates.forEach(name => this.initializeTemplate(name))
+  }
+
+  initializeTemplate(name) {
+    let template
+
+    if (this.controller[`has${name.charAt(0).toUpperCase() + name.slice(1)}TemplateValue`])
+      template = document.getElementById(this.controller[`${name}TemplateValue`])
+
+    this[`${name}Template`] = template || getTemplate(name)
+  }
+
+  // Renders an embed header
+  //
+  // @param {String} html - HTML
+  // @returns {String} HTML
+  //
+  renderHeader(html) {
+    const header = this.headerTemplate.content.firstElementChild.cloneNode(true)
+    const h1 = header.tagName.match(/h1/i) ? header : header.querySelector('h1')
+    h1.innerHTML = html
+    return header.outerHTML
+  }
+
+  // TODO: Add templates for links
+  // Renders a list of URLs as a list of HTML links i.e. anchor tags <a>
+  //
+  // @param {String[]} urls - list of URLs
+  // @returns {String[]} list of individual HTML links
+  //
+  renderLinks(urls = ['https://example.com', 'https://test.com']) {
+    urls = urls
+      .filter(url => {
+        let ok = false
+        createURL(url, u => (ok = true))
+        return ok
+      })
+      .sort()
+
+    if (!urls.length) return
+    const links = urls.map(url => `<li><a href='${url}'>${url}</a></li>`)
+    return `<ul>${links.join('')}</ul><br>`
+  }
+
+  // TOOO: add support for audio and video
+  // Renders a URL as an HTML embed i.e. an iframe or media tag (img, video, audio etc.)
+  //
+  // @param {String} url - URL
+  // @returns {String} HTML
+  //
+  renderEmbed(url = 'https://example.com') {
+    let embed
+
+    if (isImage(url)) {
+      embed = this.imageTemplate.content.firstElementChild.cloneNode(true)
+      const img = embed.tagName.match(/img/i) ? embed : embed.querySelector('img')
+      img.src = url
+    } else {
+      embed = this.iframeTemplate.content.firstElementChild.cloneNode(true)
+      const iframe = embed.tagName.match(/iframe/i) ? embed : embed.querySelector('iframe')
+      iframe.src = url
+    }
+
+    return embed.outerHTML
+  }
+
+  // Renders a list of URLs as HTML embeds i.e. iframes or media tags (img, video, audio etc.)
+  //
+  // @param {String[]} urls - list of URLs
+  // @returns {String[]} list of individual HTML embeds
+  //
+  renderEmbeds(urls = ['https://example.com', 'https://test.com']) {
+    if (!urls?.length) return
+    return urls.map(url => this.renderEmbed(url))
+  }
+
+  // Renders embed errors
+  //
+  // @param {String[]} urls - list of URLs
+  // @param {String[]} allowedHosts - list of allowed hosts
+  // @returns {String} HTML
+  //
+  renderErrors(urls = ['https://example.com', 'https://test.com'], allowedHosts = []) {
+    if (!urls?.length) return
+
+    const element = this.errorTemplate.content.firstElementChild.cloneNode(true)
+    const prohibitedHostsElement = element.querySelector('[data-list="prohibited-hosts"]')
+    const allowedHostsElement = element.querySelector('[data-list="allowed-hosts"]')
+
+    if (prohibitedHostsElement) {
+      const hosts = extractURLHosts(urls).sort()
+      if (hosts.length) prohibitedHostsElement.innerHTML = hosts.map(host => `<li>${host}</li>`).join('')
+    }
+
+    if (allowedHostsElement && allowedHosts.length)
+      allowedHostsElement.innerHTML = allowedHosts.map(host => `<li>${host}</li>`).join('')
+
+    return element.outerHTML
+  }
+
+  // Renders an exception
+  //
+  // @param {String[]} ex - The exception
+  // @returns {String} HTML
+  //
+  renderException(ex) {
+    const element = this.exceptionTemplate.content.firstElementChild.cloneNode(true)
+    const code = element.querySelector('code')
+    code.innerHTML = ex.message
+    return element.outerHTML
+  }
+}

data/app/javascript/store.js

@@ -0,0 +1,35 @@
+export default class Store {
+  constructor(controller) {
+    this.controller = controller
+    this.base = this.obfuscate([location.pathname, this.controller.element.closest('[id]')?.id].join('/'))
+  }
+
+  split(list) {
+    const index = Math.ceil(list.length / 2)
+    return [list.slice(0, index), list.slice(index)]
+  }
+
+  obfuscate(value) {
+    const chars = [...value].map(char => char.charCodeAt(0))
+    const parts = this.split(chars)
+    return [parts[1]?.reverse(), chars[0]].flat().join('')
+  }
+
+  read(key) {
+    return sessionStorage.getItem(this.generateStorageKey(key))
+  }
+
+  write(key, value) {
+    return sessionStorage.setItem(this.generateStorageKey(key), value)
+  }
+
+  remove(key) {
+    return sessionStorage.removeItem(this.generateStorageKey(key))
+  }
+
+  generateStorageKey(value) {
+    const chars = [...this.obfuscate(value)]
+    const [prefix, suffix] = this.split(chars)
+    return btoa(`${prefix}/${this.base}/${suffix}`)
+  }
+}

data/app/javascript/templates.js

@@ -0,0 +1,36 @@
+const defaults = {
+  header: `<h1></h1>`,
+  iframe: `<iframe></iframe>`,
+  image: `<img></img>`,
+
+  error: `
+    <div>
+      <h1>Copy/Paste Info</h1>
+      <h3>The pasted content includes media from unsupported hosts.</h3>
+
+      <h2>Prohibited Hosts / Domains</h2>
+      <ul data-list="prohibited-hosts">
+        <li>Media is only supported from allowed hosts.</li>
+      </ul>
+
+      <h2>Allowed Hosts / Domains</h2>
+      <ul data-list="allowed-hosts">
+        <li>Allowed hosts not configured.</li>
+      </ul>
+    </div>
+  `,
+
+  exception: `
+    <div style='background-color:lightyellow; color:red; border:solid 1px red; padding:20px;'>
+      <h1>Unhandled Exception!</h1>
+      <p>Show a programmer the message below.</p>
+      <pre style="background-color:darkslategray; color:whitesmoke; padding:10px;"><code></code></pre>
+    </div>
+  `
+}
+
+export function getTemplate(name) {
+  const template = document.createElement('template')
+  template.innerHTML = defaults[name]
+  return template
+}

data/app/javascript/urls.js

@@ -0,0 +1,97 @@
+// Creates a URL object from a value and yields the result
+//
+// @param {String} value - Value to convert to a URL (coerced to a string)
+// @param {Function} callback - Function to be called with the URL object
+// @returns {URL, null} URL object
+//
+export function createURL(value, callback = url => {}) {
+  try {
+    const url = new URL(String(value).trim())
+    if (callback) callback(url)
+    return url
+  } catch (_error) {
+    console.info(`Failed to parse URL! value='${value}']`)
+  }
+  return null
+}
+
+// Creates a URL host from a value and yields the result
+//
+// @param {String} value - Value to convert to a URL host (coerced to a string)
+// @param {Function} callback - Function to be called with the URL host
+// @returns {String, null} URL host
+//
+function createURLHost(value, callback = host => {}) {
+  let host = null
+  createURL(value, url => (host = url.host))
+  if (host && callback) callback(host)
+  return host
+}
+
+function extractURLsFromTextNodes(element) {
+  const urls = []
+  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, node => {
+    const value = node.nodeValue
+    if (!value.includes('http')) return NodeFilter.FILTER_REJECT
+    return NodeFilter.FILTER_ACCEPT
+  })
+
+  let node
+  while ((node = walker.nextNode()))
+    node.nodeValue
+      .split(/\s+/)
+      .filter(val => val.startsWith('http'))
+      .forEach(match =>
+        createURL(match, url => {
+          if (!urls.includes(url.href)) urls.push(url.href)
+        })
+      )
+
+  return urls
+}
+
+function extractURLsFromElements(element) {
+  const urls = []
+
+  if (element.src) createURL(element.src, url => urls.push(url.href))
+  if (element.href)
+    createURL(element.href, url => {
+      if (!urls.includes(url.href)) urls.push(url.href)
+    })
+
+  const elements = element.querySelectorAll('[src], [href]')
+  elements.forEach(el => {
+    createURL(el.src || el.href, url => {
+      if (!urls.includes(url.href)) urls.push(url.href)
+    })
+  })
+
+  return urls
+}
+
+export function validateURL(value, allowedHosts = []) {
+  let valid = false
+  createURLHost(value, host => (valid = !!allowedHosts.find(allowedHost => host.includes(allowedHost))))
+  return valid
+}
+
+export function extractURLHosts(values) {
+  return values.reduce((hosts, value) => {
+    createURLHost(value, host => {
+      if (!hosts.includes(host)) hosts.push(host)
+    })
+    return hosts
+  }, [])
+}
+
+// Extracts all URLs from an HTML element (all inclusive i.e. elements and text nodes)
+//
+// @param {HTMLElement} element - HTML element
+// @returns {String[]} list of unique URLs
+//
+export function extractURLsFromElement(element) {
+  const elementURLs = extractURLsFromElements(element)
+  const textNodeURLs = extractURLsFromTextNodes(element)
+  const uniqueURLs = new Set([...elementURLs, ...textNodeURLs])
+  return [...uniqueURLs]
+}

data/app/models/trix_embed/attachment.rb

@@ -0,0 +1,94 @@
+# frozen_string_literal: true
+
+module TrixEmbed
+  class Attachment
+    include ActiveModel::Model
+    include GlobalID::Identification
+    include ActionText::Attachable
+
+    CONTENT_TYPE = "application/vnd.trix-embed"
+    ALLOWED_TAGS = ActionText::ContentHelper.allowed_tags + %w[iframe]
+    ALLOWED_ATTRIBUTES = ActionText::ContentHelper.allowed_attributes + %w[allow allowfullscreen allowpaymentrequest credentialless csp loading referrerpolicy sandbox srcdoc]
+
+    class << self
+      def rewrite_action_text_content(content)
+        fragment = Nokogiri::HTML.fragment(content)
+        matches = fragment.css("#{ActionText::Attachment.tag_name}[sgid][content-type='#{CONTENT_TYPE}']")
+
+        matches.each do |match|
+          attachment = ActionText::Attachment.from_node(match)
+          attachable = attachment.attachable
+
+          html = ActionText::Content.render(
+            partial: attachable.to_action_text_content_partial_path,
+            locals: {attachable: attachable}
+          )
+
+          html = ActionText::ContentHelper.sanitizer.sanitize(
+            html,
+            tags: ALLOWED_TAGS,
+            attributes: ALLOWED_ATTRIBUTES,
+            scrubber: nil
+          )
+
+          match.replace html
+        end
+
+        fragment.to_html.html_safe
+      end
+
+      def rewrite_trix_html(trix_html)
+        fragment = Nokogiri::HTML.fragment(trix_html)
+        matches = fragment.css("[data-trix-attachment][data-trix-content-type='#{CONTENT_TYPE}']")
+
+        matches.each do |match|
+          data = JSON.parse(match["data-trix-attachment"]).deep_transform_keys(&:underscore)
+
+          attachable = TrixEmbed::Attachment.new(data)
+          attachment = ActionText::Attachment.from_attachable(attachable)
+
+          match.replace ActionText::Content.render(
+            partial: attachable.to_partial_path,
+            locals: {attachment: attachment}
+          )
+        end
+
+        fragment.to_html
+      end
+
+      def find(id)
+        new JSON.parse(id)
+      end
+    end
+
+    attr_reader :attributes
+    attr_accessor :content_type, :content
+
+    def initialize(attributes = {})
+      super @attributes = attributes.with_indifferent_access.slice(:content_type, :content)
+    end
+
+    def id
+      attributes.to_json
+    end
+
+    def persisted?
+      true
+    end
+
+    # What gets saved to the database
+    def to_partial_path
+      "trix_embed/action_text_attachment"
+    end
+
+    # What gets presented in the browser (show view)
+    def to_action_text_content_partial_path
+      "trix_embed/action_text_content_show"
+    end
+
+    # What gets presented in the browser (edit view)
+    def to_trix_content_attachment_partial_path
+      "trix_embed/action_text_content_edit"
+    end
+  end
+end

data/app/views/action_text/contents/_content.html.erb

@@ -0,0 +1 @@
+<%= TrixEmbed::Attachment.rewrite_action_text_content render_action_text_content(content) %>

data/app/views/trix_embed/_action_text_attachment.html.erb

@@ -0,0 +1,3 @@
+<%= tag.send ActionText::Attachment.tag_name,
+  sgid: trix_embed_attachment(local_assigns)&.attachable_sgid,
+  content_type: trix_embed_attachment(local_assigns)&.content_type %>

data/app/views/trix_embed/_action_text_content_edit.html.erb

@@ -0,0 +1 @@
+<%= trix_embed_attachment(local_assigns)&.content&.html_safe %>

data/app/views/trix_embed/_action_text_content_show.html.erb

@@ -0,0 +1,3 @@
+<figure class="attachment attachment--preview">
+  <%= trix_embed_attachment(local_assigns)&.content&.html_safe %>
+</figure>

data/lib/trix_embed/engine.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+require "action_text"
+require "active_model"
+require "active_support/all"
+require "globalid"
+require_relative "version"
+
+module TrixEmbed
+  def self.config
+    Rails.application.config.trix_embed
+  end
+
+  class Engine < ::Rails::Engine
+    isolate_namespace TrixEmbed
+    config.trix_embed = ActiveSupport::OrderedOptions.new
+
+    initializer "trix_embed.configuration" do
+      Mime::Type.register "application/vnd.trix-embed", :trix_embed
+
+      ActiveSupport.on_load :action_controller do
+        helper TrixEmbed::ApplicationHelper
+      end
+    end
+  end
+end

data/lib/trix_embed/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module TrixEmbed
+  VERSION = "0.0.2"
+end

data/lib/trix_embed.rb

@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+
+require "trix_embed/engine"