trix_embed 0.0.2

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 38ead3fd6cca0b10aca5f45b5602da75b8674b3c71a22ac5d9140c23ce7ceabe
+  data.tar.gz: 95691446e65997da2a828c6bf48e714c958fc0819f81e039ea7301f717f9b342
+SHA512:
+  metadata.gz: 2d33ed333f7125d7cd932781b28b7c740859ea271d3dc00e2b5006ac12f9818408873518aa5d3c17b9be431f3c29b3103c32fb71275cf67b34af6961c2419236
+  data.tar.gz: a86192046fc34ba9b3b69f8851de2723307a3c9d2e43856ba20eb8a4c06a5efed24f07eaeb493eb6abf8a83dcc0d63c913635f4bae1ee9d7581e48552a8b301d

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2023 Nate Hopkins (hopsoft)
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,94 @@
+# Trix Embed
+
+A Stimulus controller to safely embed external media in the Trix editor.
+
+## Setup
+
+```sh
+yarn add @hotwired/stimulus trix trix-embed
+```
+
+```js
+import 'trix'
+import { Application, Controller } from '@hotwired/stimulus'
+import TrixEmbed from 'trix-embed'
+
+const application = Application.start()
+TrixEmbed.initialize({ application, Controller, Trix })
+```
+
+## Usage
+
+```html
+<form>
+  <input id="content" name="content" type="hidden">
+  <trix-editor id="editor" input="content"
+    data-controller="trix-embed"
+    data-action="trix-paste->trix-embed#paste"
+    data-trix-embed-hosts-value='["example.com", "test.com"]'>
+  </trix-editor>
+</form>
+```
+
+## Sponsors
+
+<p align="center">
+  <em>Proudly sponsored by</em>
+</p>
+<p align="center">
+  <a href="https://www.clickfunnels.com?utm_source=hopsoft&utm_medium=open-source&utm_campaign=trix_embed">
+    <img src="https://images.clickfunnel.com/uploads/digital_asset/file/176632/clickfunnels-dark-logo.svg" width="575" />
+  </a>
+</p>
+
+## Developing
+
+```sh
+git clone https://github.com/hopsoft/trix_embed.git
+cd trix_embed
+yarn
+yarn build
+yarn dev
+```
+### Docker
+
+This project supports a fully Dockerized development experience.
+
+1. Simply run the following commands to get started.
+
+   ```sh
+   git clone -o github https://github.com/hopsoft/trix_embed.git
+   cd trix_embed
+   ```
+
+   ```sh
+   docker compose up -d # start the envionment (will take a few minutes on 1st run)
+   open http://localhost:3000 # in a browser
+   ```
+
+   And, if you're using the [containers gem (WIP)](https://github.com/hopsoft/containers).
+
+   ```sh
+   containers up # start the envionment (will take a few minutes on 1st run)
+   open http://localhost:3000 # in a browser
+   ```
+
+1. Edit files using your preferred tools on the host machine.
+
+1. That's it!
+
+## Releasing
+
+1. Run `yarn` and `bundle` to pick up the latest
+1. Bump version number at `lib/trix_embed/version.rb`. Pre-release versions use `.preN`
+1. Run `yarn build`
+1. Commit and push changes to GitHub
+1. Run `rake release`
+1. Run `yarn publish --no-git-tag-version --access public`
+1. Yarn will prompt you for the new version. Pre-release versions use `-preN`
+1. Commit and push changes to GitHub
+1. Create a new release on GitHub ([here](https://github.com/hopsoft/trix_embed/releases)) and generate the changelog for the stable release for it
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/app/assets/builds/trix-embed.js

@@ -0,0 +1,22 @@
+var G=Object.defineProperty,X=Object.defineProperties;var Q=Object.getOwnPropertyDescriptors;var P=Object.getOwnPropertySymbols;var Y=Object.prototype.hasOwnProperty,Z=Object.prototype.propertyIsEnumerable;var M=(n,e,t)=>e in n?G(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t,U=(n,e)=>{for(var t in e||(e={}))Y.call(e,t)&&M(n,t,e[t]);if(P)for(var t of P(e))Z.call(e,t)&&M(n,t,e[t]);return n},N=(n,e)=>X(n,Q(e));var S=(n,e,t)=>(M(n,typeof e!="symbol"?e+"":e,t),t);var A={name:"AES-GCM",length:256},ee=!0,te=["encrypt","decrypt"];async function re(){let e=["encrypt","decrypt"];return await crypto.subtle.generateKey(A,!0,e)}async function ie(n){let e=await crypto.subtle.exportKey("jwk",n);return JSON.stringify(e)}async function O(n){let e=JSON.parse(n);return await crypto.subtle.importKey("jwk",e,A,ee,te)}async function ne(n,e){let t=new TextEncoder().encode(String(n)),i=crypto.getRandomValues(new Uint8Array(12)),r=await crypto.subtle.encrypt(N(U({},A),{iv:i}),e,t),o={ciphertext:btoa(String.fromCharCode(...new Uint8Array(r))),iv:btoa(String.fromCharCode(...i))};return btoa(JSON.stringify(o))}async function oe(n,e){let t=JSON.parse(atob(n)),i=new Uint8Array(atob(t.ciphertext).split("").map(s=>s.charCodeAt(0))),r=new Uint8Array(atob(t.iv).split("").map(s=>s.charCodeAt(0))),o=await crypto.subtle.decrypt(N(U({},A),{iv:r}),e,i);return new TextDecoder().decode(o)}async function v(){let n=await re(),e=await ie(n);return btoa(e)}async function b(n,e=[]){let t=await O(atob(n));return Promise.all(e.map(i=>ne(i,t)))}async function K(n,e=[]){let t=await O(atob(n));return Promise.all(e.map(i=>oe(i,t)))}async function $(n=[]){let e=await v(),t=await b(e,n);return console.log(`data-trix-embed-key-value="${e}"`),console.log(`data-trix-embed-hosts-value='${JSON.stringify(t)}'`),{key:e,encryptedValues:t}}function h(n,e=t=>{}){try{let t=new URL(String(n).trim());return e&&e(t),t}catch(t){console.info(`Failed to parse URL! value='${n}']`)}return null}function V(n,e=t=>{}){let t=null;return h(n,i=>t=i.host),t&&e&&e(t),t}function se(n){let e=[],t=document.createTreeWalker(n,NodeFilter.SHOW_TEXT,r=>r.nodeValue.includes("http")?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_REJECT),i;for(;i=t.nextNode();)i.nodeValue.split(/\s+/).filter(r=>r.startsWith("http")).forEach(r=>h(r,o=>{e.includes(o.href)||e.push(o.href)}));return e}function ae(n){let e=[];return n.src&&h(n.src,i=>e.push(i.href)),n.href&&h(n.href,i=>{e.includes(i.href)||e.push(i.href)}),n.querySelectorAll("[src], [href]").forEach(i=>{h(i.src||i.href,r=>{e.includes(r.href)||e.push(r.href)})}),e}function R(n,e=[]){let t=!1;return V(n,i=>t=!!e.find(r=>i.includes(r))),t}function I(n){return n.reduce((e,t)=>(V(t,i=>{e.includes(i)||e.push(i)}),e),[])}function q(n){let e=ae(n),t=se(n);return[...new Set([...e,...t])]}var D={avif:"image/avif",bmp:"image/bmp",gif:"image/gif",heic:"image/heic",heif:"image/heif",ico:"image/x-icon",jp2:"image/jp2",jpeg:"image/jpeg",jpg:"image/jpeg",jxr:"image/vnd.ms-photo",png:"image/png",svg:"image/svg+xml",tif:"image/tiff",tiff:"image/tiff",webp:"image/webp"};var ce=D,le=["animate","animateMotion","animateTransform","area","audio","base","embed","feDisplacementMap","feImage","feTile","filter","font-face-uri","iframe","image","link","object","script","source","track","use","video"],de=["audio","embed","iframe","img","input","script","source","track","video","frame","frameset","object","picture","use"],F=le.concat(de);function J(n){return!!Object.values(D).find(e=>e===H(n))}function H(n){let e;if(h(n,r=>e=r),!e)return null;let t=e.pathname.lastIndexOf(".");if(!t)return null;let i=e.pathname.substring(t+1);return ce[i]}var T=class{constructor(e){S(this,"protectSubmit",e=>{let t=this.controller.formElement,i=e.target.closest("form");i&&i.action===t.action&&i.method===t.method&&i!==t&&e.preventDefault()});this.controller=e,e.element.addEventListener("trix-file-accept",t=>t.preventDefault())}protect(){if(!this.controller.formElement)return;let e=this.controller.formElement,t=this.controller.inputElement,i=`${e.method}${e.action}`;document.removeEventListener("submit",handlers[i],!0),handlers[i]=this.protectSubmit.bind(this),document.addEventListener("submit",handlers[i],!0),new MutationObserver((o,s)=>{o.forEach(a=>{var x;let{addedNodes:u,target:d,type:p}=a;switch(p){case"attributes":((x=d.closest("form"))==null?void 0:x.action)===e.action&&(d.id===t.id||d.name===t.name)&&d.remove();break;case"childList":u.forEach(l=>{var y;l.nodeType===Node.ELEMENT_NODE&&(l.tagName.match(/^form$/i)&&l.action===e.action&&l.remove(),((y=d.closest("form"))==null?void 0:y.action)===e.action&&(l.id===t.id||l.name===t.name)&&l.remove())});break}})}).observe(document.body,{attributeFilter:["id","name"],attributes:!0,childList:!0,subtree:!0})}cleanup(){let e=this.controller.element,t=this.controller.inputElement,i=this.controller.toolbarElement;t==null||t.remove(),i==null||i.remove(),e==null||e.remove()}};var E=class{constructor(e){var t;this.controller=e,this.base=this.obfuscate([location.pathname,(t=this.controller.element.closest("[id]"))==null?void 0:t.id].join("/"))}split(e){let t=Math.ceil(e.length/2);return[e.slice(0,t),e.slice(t)]}obfuscate(e){var r;let t=[...e].map(o=>o.charCodeAt(0));return[(r=this.split(t)[1])==null?void 0:r.reverse(),t[0]].flat().join("")}read(e){return sessionStorage.getItem(this.generateStorageKey(e))}write(e,t){return sessionStorage.setItem(this.generateStorageKey(e),t)}remove(e){return sessionStorage.removeItem(this.generateStorageKey(e))}generateStorageKey(e){let t=[...this.obfuscate(e)],[i,r]=this.split(t);return btoa(`${i}/${this.base}/${r}`)}};var me={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>
+  `};function z(n){let e=document.createElement("template");return e.innerHTML=me[n],e}var w=class{constructor(e){this.controller=e,this.initializeTempates()}initializeTempates(){["error","exception","header","iframe","image"].forEach(t=>this.initializeTemplate(t))}initializeTemplate(e){let t;this.controller[`has${e.charAt(0).toUpperCase()+e.slice(1)}TemplateValue`]&&(t=document.getElementById(this.controller[`${e}TemplateValue`])),this[`${e}Template`]=t||z(e)}renderHeader(e){let t=this.headerTemplate.content.firstElementChild.cloneNode(!0),i=t.tagName.match(/h1/i)?t:t.querySelector("h1");return i.innerHTML=e,t.outerHTML}renderLinks(e=["https://example.com","https://test.com"]){return e=e.filter(i=>{let r=!1;return h(i,o=>r=!0),r}).sort(),e.length?`<ul>${e.map(i=>`<li><a href='${i}'>${i}</a></li>`).join("")}</ul><br>`:void 0}renderEmbed(e="https://example.com"){let t;if(J(e)){t=this.imageTemplate.content.firstElementChild.cloneNode(!0);let i=t.tagName.match(/img/i)?t:t.querySelector("img");i.src=e}else{t=this.iframeTemplate.content.firstElementChild.cloneNode(!0);let i=t.tagName.match(/iframe/i)?t:t.querySelector("iframe");i.src=e}return t.outerHTML}renderEmbeds(e=["https://example.com","https://test.com"]){if(e!=null&&e.length)return e.map(t=>this.renderEmbed(t))}renderErrors(e=["https://example.com","https://test.com"],t=[]){if(!(e!=null&&e.length))return;let i=this.errorTemplate.content.firstElementChild.cloneNode(!0),r=i.querySelector('[data-list="prohibited-hosts"]'),o=i.querySelector('[data-list="allowed-hosts"]');if(r){let s=I(e).sort();s.length&&(r.innerHTML=s.map(a=>`<li>${a}</li>`).join(""))}return o&&t.length&&(o.innerHTML=t.map(s=>`<li>${s}</li>`).join("")),i.outerHTML}renderException(e){let t=this.exceptionTemplate.content.firstElementChild.cloneNode(!0),i=t.querySelector("code");return i.innerHTML=e.message,t.outerHTML}};var ue={Controller:null,Trix:null};function B(n=ue){var i;let{Controller:e,Trix:t}=n;return i=class extends e{async connect(){var r;this.store=new E(this),this.guard=new T(this),await this.rememberConfig(),this.paranoid&&this.guard.protect(),(r=this.toolbarElement.querySelector('[data-trix-button-group="file-tools"]'))==null||r.remove(),window.addEventListener("beforeunload",()=>this.disconnect())}disconnect(){this.paranoid&&this.guard.cleanup(),this.forgetConfig()}async paste(r){let{html:o,string:s,range:a}=r.paste,u=o||s||"",d=this.buildPastedTemplate(u),p=d.content.firstElementChild,l=this.sanitizePastedElement(p).innerHTML.trim(),y=q(p);if(!y.length)return;r.preventDefault(),this.editor.setSelectedRange(a);let C=await this.hosts,f=new w(this);try{let g=y.filter(c=>H(c));Array.from(d.content.firstElementChild.querySelectorAll("iframe")).forEach(c=>{g.includes(c.src)||g.push(c.src)});let k=g.filter(c=>R(c,C)),W=g.filter(c=>!k.includes(c)),j=y.filter(c=>!g.includes(c)),L=j.filter(c=>R(c,C)),_=j.filter(c=>!L.includes(c)),m;if(m=W,m.length&&await this.insert(f.renderErrors(m,C.sort())),m=_,m.length&&(await this.insert(f.renderHeader("Pasted URLs")),await this.insert(f.renderLinks(m),{disposition:"inline"})),m=k,m.length&&(m.length>1&&await this.insert(f.renderHeader("Embedded Media")),await this.insert(f.renderEmbeds(m))),m=L,m.length&&await this.insert(f.renderEmbeds(L)),k[0]===l||L[0]===l)return this.editor.insertLineBreak();l.length&&(await this.insert(f.renderHeader("Pasted Content",l)),this.editor.insertLineBreak(),this.insert(l,{disposition:"inline"}))}catch(g){this.insert(f.renderException(g))}}buildPastedTemplate(r){let o=document.createElement("template");return o.innerHTML=`<div>${r.trim()}</div>`,o}sanitizePastedElement(r){r=r.cloneNode(!0),r.querySelectorAll(F.join(", ")).forEach(a=>a.remove());let o=r.querySelectorAll("*"),s=r.innerHTML.match(/\r\n|\n|\r/g)||[];return(s.length?o.length/s.length:0)<=.1&&(r.innerHTML=r.innerHTML.replaceAll(/\r\n|\n|\r/g,"<br>")),r}insertAttachment(r,o={delay:0}){let{delay:s}=o;return new Promise(a=>{setTimeout(()=>{let u=new t.Attachment({content:r,contentType:"application/vnd.trix-embed"});this.editor.insertAttachment(u),a()},s)})}insertHTML(r,o={delay:0}){let{delay:s}=o;return new Promise(a=>{setTimeout(()=>{this.editor.insertHTML(r),this.editor.moveCursorInDirection("forward"),this.editor.insertLineBreak(),this.editor.moveCursorInDirection("backward"),a()},s)})}insert(r,o={delay:0,disposition:"attachment"}){let{delay:s,disposition:a}=o;return r!=null&&r.length?new Promise(u=>{setTimeout(()=>{if(typeof r=="string")return a==="inline"?this.insertHTML(r,{delay:s}).then(u):this.insertAttachment(r,{delay:s}).then(u);if(Array.isArray(r))return a==="inline"?r.reduce((d,p,x)=>d.then(this.insertHTML(p,{delay:s})),Promise.resolve()).then(u):r.reduce((d,p,x)=>d.then(this.insertAttachment(p,{delay:s})),Promise.resolve()).then(u);u()})}):Promise.resolve()}get editor(){return this.element.editor}get toolbarElement(){let r=this.element.previousElementSibling;return r!=null&&r.tagName.match(/trix-toolbar/i)?r:null}get inputElement(){return document.getElementById(this.element.getAttribute("input"))}get formElement(){return this.element.closest("form")}get paranoid(){return!!this.store.read("paranoid")}get key(){try{return JSON.parse(this.store.read("key"))[2]}catch(r){}}get hosts(){try{return K(this.key,JSON.parse(this.store.read("hosts")))}catch(r){return[]}}get reservedDomains(){return["example.com","test.com","invalid.com","example.cat","nic.example","example.co.uk"]}async rememberConfig(){let r=await v(),o=await b(r,this.reservedDomains),s=await b(r,this.hostsValue);this.store.write("key",JSON.stringify([o[0],o[1],r,o[2]])),this.element.removeAttribute("data-trix-embed-key-value"),this.store.write("hosts",JSON.stringify(s)),this.element.removeAttribute("data-trix-embed-hosts-value"),this.paranoidValue!==!1&&(this.store.write("paranoid",JSON.stringify(o.slice(3))),this.element.removeAttribute("data-trix-embed-paranoid"))}forgetConfig(){this.store.remove("key"),this.store.remove("hosts"),this.store.remove("paranoid")}},S(i,"values",{validTemplate:String,errorTemplate:String,headerTemplate:String,iframeTemplate:String,imageTemplate:String,hosts:Array,paranoid:{type:Boolean,default:!0}}),i}var he={application:null,Controller:null,Trix:null};function pe(n=he){let{application:e,Controller:t,Trix:i}=n;e.register("trix-embed",B({Controller:t,Trix:i}))}self.TrixEmbed={initialize:pe,generateKey:v,encryptValues:b,generateKeyAndEncryptValues:$};var qe=self.TrixEmbed;export{qe as default};

data/app/assets/builds/trix-embed.metafile.json

@@ -0,0 +1 @@
+{"inputs":{"app/javascript/encryption.js":{"bytes":4095,"imports":[{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"app/javascript/urls.js":{"bytes":2818,"imports":[],"format":"esm"},"app/javascript/media.js":{"bytes":3331,"imports":[{"path":"app/javascript/urls.js","kind":"import-statement","original":"./urls"}],"format":"esm"},"app/javascript/guard.js":{"bytes":2028,"imports":[{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"app/javascript/store.js":{"bytes":952,"imports":[],"format":"esm"},"app/javascript/templates.js":{"bytes":997,"imports":[],"format":"esm"},"app/javascript/renderer.js":{"bytes":4072,"imports":[{"path":"app/javascript/urls.js","kind":"import-statement","original":"./urls"},{"path":"app/javascript/media.js","kind":"import-statement","original":"./media"},{"path":"app/javascript/templates.js","kind":"import-statement","original":"./templates"}],"format":"esm"},"app/javascript/controller.js":{"bytes":9317,"imports":[{"path":"app/javascript/encryption.js","kind":"import-statement","original":"./encryption"},{"path":"app/javascript/urls.js","kind":"import-statement","original":"./urls"},{"path":"app/javascript/media.js","kind":"import-statement","original":"./media"},{"path":"app/javascript/guard.js","kind":"import-statement","original":"./guard"},{"path":"app/javascript/store.js","kind":"import-statement","original":"./store"},{"path":"app/javascript/renderer.js","kind":"import-statement","original":"./renderer"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"app/javascript/index.js":{"bytes":548,"imports":[{"path":"app/javascript/encryption.js","kind":"import-statement","original":"./encryption"},{"path":"app/javascript/controller.js","kind":"import-statement","original":"./controller"}],"format":"esm"}},"outputs":{"app/assets/builds/trix-embed.js":{"imports":[],"exports":["default"],"entryPoint":"app/javascript/index.js","inputs":{"app/javascript/encryption.js":{"bytesInOutput":1346},"app/javascript/urls.js":{"bytesInOutput":973},"app/javascript/media.js":{"bytesInOutput":846},"app/javascript/guard.js":{"bytesInOutput":1285},"app/javascript/store.js":{"bytesInOutput":688},"app/javascript/templates.js":{"bytesInOutput":897},"app/javascript/renderer.js":{"bytesInOutput":1780},"app/javascript/controller.js":{"bytesInOutput":4300},"app/javascript/index.js":{"bytesInOutput":274}},"bytes":12893}}}

data/app/helpers/trix_embed/application_helper.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module TrixEmbed
+  module ApplicationHelper
+    def trix_embed_attachment(local_assigns = {})
+      return local_assigns[:attachable] if local_assigns[:attachable].is_a?(TrixEmbed::Attachment)
+      return local_assigns[:attachment].attachable if local_assigns[:attachment]&.attachable.is_a?(TrixEmbed::Attachment)
+      nil
+    end
+  end
+end

data/app/javascript/controller.js

@@ -0,0 +1,254 @@
+import { generateKey, encryptValues, decryptValues } from './encryption'
+import { extractURLsFromElement, validateURL } from './urls'
+import { getMediaType, mediaTags } from './media'
+import Guard from './guard'
+import Store from './store'
+import Renderer from './renderer'
+
+const defaultOptions = {
+  Controller: null,
+  Trix: null
+}
+
+export function getTrixEmbedControllerClass(options = defaultOptions) {
+  const { Controller, Trix } = options
+  return class extends Controller {
+    static values = {
+      // templates
+      validTemplate: String, // dom id of template to use for valid embeds
+      errorTemplate: String, // dom id of template to use for invalid embeds
+      headerTemplate: String, // dom id of template to use for embed headers
+      iframeTemplate: String, // dom id of template to use for iframe embeds
+      imageTemplate: String, // dom id of template to use for image embeds
+
+      // security related values
+      hosts: Array, // list of hosts/domains that embeds are allowed from
+      paranoid: { type: Boolean, default: true } // guard against attacks
+    }
+
+    async connect() {
+      this.store = new Store(this)
+      this.guard = new Guard(this)
+      await this.rememberConfig()
+      if (this.paranoid) this.guard.protect()
+      this.toolbarElement.querySelector('[data-trix-button-group="file-tools"]')?.remove()
+      window.addEventListener('beforeunload', () => this.disconnect()) // TODO: this may not be necessary
+    }
+
+    disconnect() {
+      if (this.paranoid) this.guard.cleanup()
+      this.forgetConfig()
+    }
+
+    async paste(event) {
+      const { html, string, range } = event.paste
+      let content = html || string || ''
+      const pastedTemplate = this.buildPastedTemplate(content)
+      const pastedElement = pastedTemplate.content.firstElementChild
+      const sanitizedPastedElement = this.sanitizePastedElement(pastedElement)
+      const sanitizedPastedContent = sanitizedPastedElement.innerHTML.trim()
+      const pastedURLs = extractURLsFromElement(pastedElement)
+
+      // no URLs were pasted, let Trix handle it ...............................................................
+      if (!pastedURLs.length) return
+
+      event.preventDefault()
+      this.editor.setSelectedRange(range)
+      const hosts = await this.hosts
+      const renderer = new Renderer(this)
+
+      try {
+        // Media URLs (images, videos, audio etc.)
+        const mediaURLs = pastedURLs.filter(url => getMediaType(url))
+        Array.from(pastedTemplate.content.firstElementChild.querySelectorAll('iframe')).forEach(frame => {
+          if (!mediaURLs.includes(frame.src)) mediaURLs.push(frame.src)
+        })
+        const validMediaURLs = mediaURLs.filter(url => validateURL(url, hosts))
+        const invalidMediaURLs = mediaURLs.filter(url => !validMediaURLs.includes(url))
+
+        // Standard URLs (non-media resources i.e. web pages etc.)
+        const standardURLs = pastedURLs.filter(url => !mediaURLs.includes(url))
+        const validStandardURLs = standardURLs.filter(url => validateURL(url, hosts))
+        const invalidStandardURLs = standardURLs.filter(url => !validStandardURLs.includes(url))
+
+        let urls
+
+        // 1. render invalid media urls ..........................................................................
+        urls = invalidMediaURLs
+        if (urls.length) await this.insert(renderer.renderErrors(urls, hosts.sort()))
+
+        // 2. render invalid standard urls .......................................................................
+        urls = invalidStandardURLs
+        if (urls.length) {
+          await this.insert(renderer.renderHeader('Pasted URLs'))
+          await this.insert(renderer.renderLinks(urls), { disposition: 'inline' })
+        }
+
+        // 3. render valid media urls ............................................................................
+        urls = validMediaURLs
+        if (urls.length) {
+          if (urls.length > 1) await this.insert(renderer.renderHeader('Embedded Media'))
+          await this.insert(renderer.renderEmbeds(urls))
+        }
+
+        // 4. render valid standard urls .........................................................................
+        urls = validStandardURLs
+        if (urls.length) await this.insert(renderer.renderEmbeds(validStandardURLs))
+
+        // exit early if there is only one valid URL and it is the same as the pasted content
+        if (validMediaURLs[0] === sanitizedPastedContent || validStandardURLs[0] === sanitizedPastedContent)
+          return this.editor.insertLineBreak()
+
+        // 5. render the pasted content as sanitized HTML ........................................................
+        if (sanitizedPastedContent.length) {
+          await this.insert(renderer.renderHeader('Pasted Content', sanitizedPastedContent))
+          this.editor.insertLineBreak()
+          this.insert(sanitizedPastedContent, { disposition: 'inline' })
+        }
+      } catch (ex) {
+        this.insert(renderer.renderException(ex))
+      }
+    }
+
+    buildPastedTemplate(content) {
+      const template = document.createElement('template')
+      template.innerHTML = `<div>${content.trim()}</div>`
+      return template
+    }
+
+    sanitizePastedElement(element) {
+      element = element.cloneNode(true)
+      element.querySelectorAll(mediaTags.join(', ')).forEach(tag => tag.remove())
+
+      const tags = element.querySelectorAll('*')
+      const newlines = element.innerHTML.match(/\r\n|\n|\r/g) || []
+
+      // replace newlines with <br> if there are <= 10% tags to newlines
+      if ((newlines.length ? tags.length / newlines.length : 0) <= 0.1)
+        element.innerHTML = element.innerHTML.replaceAll(/\r\n|\n|\r/g, '<br>')
+
+      return element
+    }
+
+    insertAttachment(content, options = { delay: 0 }) {
+      const { delay } = options
+      return new Promise(resolve => {
+        setTimeout(() => {
+          const attachment = new Trix.Attachment({ content, contentType: 'application/vnd.trix-embed' })
+          this.editor.insertAttachment(attachment)
+          resolve()
+        }, delay)
+      })
+    }
+
+    insertHTML(content, options = { delay: 0 }) {
+      const { delay } = options
+      return new Promise(resolve => {
+        setTimeout(() => {
+          this.editor.insertHTML(content)
+          // shenanigans to ensure that Trix considers this block of content closed
+          this.editor.moveCursorInDirection('forward')
+          this.editor.insertLineBreak()
+          this.editor.moveCursorInDirection('backward')
+          resolve()
+        }, delay)
+      })
+    }
+
+    insert(content, options = { delay: 0, disposition: 'attachment' }) {
+      const { delay, disposition } = options
+
+      if (content?.length) {
+        return new Promise(resolve => {
+          setTimeout(() => {
+            if (typeof content === 'string') {
+              if (disposition === 'inline') return this.insertHTML(content, { delay }).then(resolve)
+              else return this.insertAttachment(content, { delay }).then(resolve)
+            }
+
+            if (Array.isArray(content)) {
+              if (disposition === 'inline')
+                return content
+                  .reduce((p, c, i) => p.then(this.insertHTML(c, { delay })), Promise.resolve())
+                  .then(resolve)
+              else
+                return content
+                  .reduce((p, c, i) => p.then(this.insertAttachment(c, { delay })), Promise.resolve())
+                  .then(resolve)
+            }
+
+            resolve()
+          })
+        })
+      }
+
+      return Promise.resolve()
+    }
+
+    // Returns the Trix editor
+    //
+    // @returns {TrixEditor}
+    //
+    get editor() {
+      return this.element.editor
+    }
+
+    get toolbarElement() {
+      const sibling = this.element.previousElementSibling
+      return sibling?.tagName.match(/trix-toolbar/i) ? sibling : null
+    }
+
+    get inputElement() {
+      return document.getElementById(this.element.getAttribute('input'))
+    }
+
+    get formElement() {
+      return this.element.closest('form')
+    }
+
+    get paranoid() {
+      return !!this.store.read('paranoid')
+    }
+
+    get key() {
+      try {
+        return JSON.parse(this.store.read('key'))[2]
+      } catch {}
+    }
+
+    get hosts() {
+      try {
+        return decryptValues(this.key, JSON.parse(this.store.read('hosts')))
+      } catch {
+        return []
+      }
+    }
+
+    get reservedDomains() {
+      return ['example.com', 'test.com', 'invalid.com', 'example.cat', 'nic.example', 'example.co.uk']
+    }
+
+    async rememberConfig() {
+      const key = await generateKey()
+      const fakes = await encryptValues(key, this.reservedDomains)
+      const hosts = await encryptValues(key, this.hostsValue)
+
+      this.store.write('key', JSON.stringify([fakes[0], fakes[1], key, fakes[2]]))
+      this.element.removeAttribute('data-trix-embed-key-value')
+
+      this.store.write('hosts', JSON.stringify(hosts))
+      this.element.removeAttribute('data-trix-embed-hosts-value')
+
+      if (this.paranoidValue !== false) {
+        this.store.write('paranoid', JSON.stringify(fakes.slice(3)))
+        this.element.removeAttribute('data-trix-embed-paranoid')
+      }
+    }
+
+    forgetConfig() {
+      this.store.remove('key')
+      this.store.remove('hosts')
+      this.store.remove('paranoid')
+    }
+  }
+}

data/app/javascript/encryption.js

@@ -0,0 +1,119 @@
+const options = { name: 'AES-GCM', length: 256 } // encryption options
+const extractable = true // makes it possible to export the key
+const purposes = ['encrypt', 'decrypt']
+
+// Generates a key for use with a symmetric encryption algorithm
+//
+// @returns {Promise<CryptoKey>} - The generated key
+//
+async function generateEncryptionKey() {
+  const extractable = true // makes it possible to export the key later
+  const purposes = ['encrypt', 'decrypt']
+  return await crypto.subtle.generateKey(options, extractable, purposes)
+}
+
+// Exports an encryption key
+//
+// @param {CryptoKey} key - The key to export
+// @returns {Promise<String>} - The exported key as a JSON string
+//
+async function exportKey(key) {
+  const exported = await crypto.subtle.exportKey('jwk', key)
+  return JSON.stringify(exported)
+}
+
+// Imports an encryption key
+//
+// @param {String} key - The key to import as a string
+// @returns {Promise<CryptoKey>} - The imported key
+//
+async function importKey(key) {
+  const parsed = JSON.parse(key)
+  return await crypto.subtle.importKey('jwk', parsed, options, extractable, purposes)
+}
+
+// Encrypts a value using a symmetric encryption algorithm
+//
+// @param {String} value - The value to encrypt
+// @param {CryptoKey} key - The key to use for encryption
+// @returns {Promise<String>} - Base64 encoded representation of the encrypted value
+//
+async function encrypt(value, key) {
+  const encoded = new TextEncoder().encode(String(value))
+  const iv = crypto.getRandomValues(new Uint8Array(12)) // initialization vector
+  const buffer = await crypto.subtle.encrypt({ ...options, iv }, key, encoded) // ciphertext as an ArrayBuffer
+  const data = {
+    ciphertext: btoa(String.fromCharCode(...new Uint8Array(buffer))),
+    iv: btoa(String.fromCharCode(...iv))
+  }
+  return btoa(JSON.stringify(data))
+}
+
+// Decrypts a value using a symmetric encryption algorithm
+//
+// @param {String} encrypted - The Base64 encoded encrypted value
+// @param {CryptoKey} key - The key to use for decryption
+// @returns {Promise<String>} - The decrypted value
+//
+async function decrypt(encrypted, key) {
+  const data = JSON.parse(atob(encrypted))
+  const ciphertextArray = new Uint8Array(
+    atob(data.ciphertext)
+      .split('')
+      .map(char => char.charCodeAt(0))
+  )
+  const iv = new Uint8Array(
+    atob(data.iv)
+      .split('')
+      .map(char => char.charCodeAt(0))
+  )
+
+  const buffer = await crypto.subtle.decrypt({ ...options, iv }, key, ciphertextArray)
+  return new TextDecoder().decode(buffer)
+}
+
+// Generates a new encryption key
+//
+// @returns {Promise<String>} - The base64 encoded key
+//
+export async function generateKey() {
+  const key = await generateEncryptionKey()
+  const jsonKey = await exportKey(key)
+  const base64Key = btoa(jsonKey)
+  return base64Key
+}
+
+// Encrypts a list of values
+//
+// @param {String} base64Key - The encryption key to use
+// @param {String[]} values - The values to encrypt
+// @returns {Promise<String>[]} - The encrypted values
+//
+export async function encryptValues(base64Key, values = []) {
+  const key = await importKey(atob(base64Key))
+  return Promise.all(values.map(value => encrypt(value, key)))
+}
+
+// Decrypts and logs a list of values
+//
+// @param {String} base64Key - The encryption key to use
+// @param {String[]} values - The values to decrypt
+// @returns {Promise<String>[]} - The decrypted values
+//
+export async function decryptValues(base64Key, encryptedValues = []) {
+  const key = await importKey(atob(base64Key))
+  return Promise.all(encryptedValues.map(encryptedValue => decrypt(encryptedValue, key)))
+}
+
+// Generates a new encryption key and encrypts a list of values
+//
+// @param {Array} values - The values to encrypt
+// @returns {Promise<Object>} - The encryption key and encrypted values
+//
+export async function generateKeyAndEncryptValues(values = []) {
+  const key = await generateKey()
+  const encryptedValues = await encryptValues(key, values)
+  console.log(`data-trix-embed-key-value="${key}"`)
+  console.log(`data-trix-embed-hosts-value='${JSON.stringify(encryptedValues)}'`)
+  return { key, encryptedValues }
+}

data/app/javascript/guard.js

@@ -0,0 +1,64 @@
+const submitGuards = {}
+
+export default class Guard {
+  constructor(controller) {
+    this.controller = controller
+    controller.element.addEventListener('trix-file-accept', event => event.preventDefault())
+  }
+
+  protectSubmit = event => {
+    const form = this.controller.formElement
+    const f = event.target.closest('form')
+    if (f && f.action === form.action && f.method === form.method && f !== form) event.preventDefault()
+  }
+
+  protect() {
+    if (!this.controller.formElement) return
+    const form = this.controller.formElement
+    const input = this.controller.inputElement
+    const key = `${form.method}${form.action}`
+
+    document.removeEventListener('submit', handlers[key], true)
+    handlers[key] = this.protectSubmit.bind(this)
+    document.addEventListener('submit', handlers[key], true)
+
+    const observer = new MutationObserver((mutations, observer) => {
+      mutations.forEach(mutation => {
+        const { addedNodes, target, type } = mutation
+
+        switch (type) {
+          case 'attributes':
+            if (target.closest('form')?.action === form.action)
+              if (target.id === input.id || target.name === input.name) target.remove()
+            break
+          case 'childList':
+            addedNodes.forEach(node => {
+              if (node.nodeType === Node.ELEMENT_NODE) {
+                if (node.tagName.match(/^form$/i) && node.action === form.action) node.remove()
+                if (target.closest('form')?.action === form.action)
+                  if (node.id === input.id || node.name === input.name) node.remove()
+              }
+            })
+            break
+        }
+      })
+    })
+
+    observer.observe(document.body, {
+      attributeFilter: ['id', 'name'],
+      attributes: true,
+      childList: true,
+      subtree: true
+    })
+  }
+
+  cleanup() {
+    const trix = this.controller.element
+    const input = this.controller.inputElement
+    const toolbar = this.controller.toolbarElement
+
+    input?.remove()
+    toolbar?.remove()
+    trix?.remove()
+  }
+}

data/app/javascript/index.js

@@ -0,0 +1,22 @@
+import { generateKey, encryptValues, generateKeyAndEncryptValues } from './encryption'
+import { getTrixEmbedControllerClass } from './controller'
+
+const defaultOptions = {
+  application: null,
+  Controller: null,
+  Trix: null
+}
+
+function initialize(options = defaultOptions) {
+  const { application, Controller, Trix } = options
+  application.register('trix-embed', getTrixEmbedControllerClass({ Controller, Trix }))
+}
+
+self.TrixEmbed = {
+  initialize,
+  generateKey,
+  encryptValues,
+  generateKeyAndEncryptValues
+}
+
+export default self.TrixEmbed