Hello world

First open source release of Campfire 🎉

app/javascript/lib/rich_text/unfurl/lib/opengraph_embed_operation.js

@@ -0,0 +1,80 @@
+import { post } from "@rails/request.js"
+import { truncateString } from "helpers/string_helpers"
+
+const UNFURLED_TWITTER_AVATAR_CSS_CLASS = "cf-twitter-avatar"
+const TWITTER_AVATAR_URL_PREFIX = "https://pbs.twimg.com/profile_images"
+
+export default class OpengraphEmbedOperation {
+  constructor(paste) {
+    this.paste = paste
+    this.editor = this.paste.editor
+    this.url = this.paste.string
+
+    this.abortController = new AbortController()
+  }
+
+  perform() {
+    return this.#createOpenGraphMetadataRequest()
+      .then(response => response.json)
+      .then(this.#insertOpengraphAttachment.bind(this))
+      .catch(() => null)
+  }
+
+  abort() {
+    this.abortController.abort()
+  }
+
+  #createOpenGraphMetadataRequest() {
+    return post("/unfurl_link", {
+      body: { url: this.url },
+      contentType: "application/json",
+      signal: this.abortController.signal
+    })
+  }
+
+  #insertOpengraphAttachment(response) {
+    if (this.#shouldInsertOpengraphPreview) {
+      const currentRange = this.editor.getSelectedRange()
+      this.editor.setSelectedRange(this.editor.getSelectedRange())
+      this.editor.recordUndoEntry("Insert Opengraph preview for Pasted URL")
+      this.editor.insertAttachment(this.#createOpengraphAttachment(response))
+      this.editor.setSelectedRange(currentRange)
+    }
+  }
+
+  get #shouldInsertOpengraphPreview() {
+    return this.editor.getDocument().toString().includes(this.url)
+  }
+
+  #createOpengraphAttachment(response) {
+    const { title, url, image, description } = response
+    const html = this.#generateOpengraphEmbedHTML({ title, url, image, description })
+
+    return new Trix.Attachment({
+      contentType: "application/vnd.actiontext.opengraph-embed",
+      content: html,
+      filename: title,
+      href: url,
+      url: image,
+      caption: description
+    })
+  }
+
+  #generateOpengraphEmbedHTML(embed) {
+    return `<actiontext-opengraph-embed class="${this.#isTwitterAvatar(embed) ? UNFURLED_TWITTER_AVATAR_CSS_CLASS : ''}">
+      <div class="og-embed">
+        <div class="og-embed__content">
+          <div class="og-embed__title">${truncateString(embed.title, 560)}</div>
+          <div class="og-embed__description">${truncateString(embed.description, 560)}</div>
+        </div>
+        <div class="og-embed__image">
+          <img src="${embed.image}" class="image" alt="" />
+        </div>
+      </div>
+    </actiontext-opengraph-embed>`
+  }
+
+  #isTwitterAvatar(embed) {
+    return embed.image.startsWith(TWITTER_AVATAR_URL_PREFIX)
+  }
+}

app/javascript/lib/rich_text/unfurl/lib/paste.js

@@ -0,0 +1,39 @@
+export default class Paste {
+  constructor(range, editor, document) {
+    this.range = range
+    this.editor = editor
+    this.document = document
+    if (this.document == null) { this.document = this.editor.getDocument() }
+    this.string = this.document.getStringAtRange(this.range)
+  }
+
+  isURL() {
+    return /^(?:[a-z0-9]+:\/\/|www\.)[^\s]+$/.test(this.string)
+  }
+
+  getPathname() {
+    const a = document.createElement("a")
+    a.href = this.string
+    return a.pathname
+  }
+
+  isLinked() {
+    const {href} = this.getCommonAttributes()
+    return (href != null) && (href !== this.string)
+  }
+
+  getCommonAttributes() {
+    return this.document.getCommonAttributesAtRange(this.range)
+  }
+
+  getSignificantPaste() {
+    return new this.constructor(this.getSignificantRange(), this.editor, this.document)
+  }
+
+  getSignificantRange() {
+    const significantString = this.string.trim()
+    const startOffset = this.range[0] + this.string.indexOf(significantString)
+    const endOffset = startOffset + significantString.length
+    return [startOffset, endOffset]
+  }
+}

app/javascript/lib/rich_text/unfurl/unfurler.js

@@ -0,0 +1,59 @@
+import OpengraphEmbedOperation from "lib/rich_text/unfurl/lib/opengraph_embed_operation"
+import Paste from "lib/rich_text/unfurl/lib/paste"
+
+const performOperation = (function() {
+  let operation = null
+  let requestId = null
+
+  return function(operationToPerform) {
+    operation?.abort()
+    cancelAnimationFrame(requestId)
+
+    requestId = requestAnimationFrame(function() {
+      operation = operationToPerform
+      operation.perform().then(() => operation = null)
+    })
+  }
+})()
+
+export default class Unfurler {
+  install() {
+    this.#addEventListeners()
+  }
+
+  #addEventListeners() {
+    addEventListener("trix-initialize", function(event) {
+      if (this.#editorElementPermitsAttribute(event.target, "href")) {
+        return event.target.addEventListener("trix-paste", this.#didPaste.bind(this))
+      }
+    }.bind(this))
+  }
+
+  #didPaste(event) {
+    const {range} = event.paste
+    const {editor} = event.target
+
+    if (range != null) {
+      const paste = new Paste(range, editor).getSignificantPaste()
+
+      if (paste.isURL()) {
+        if (this.#editorElementPermitsOpengraphAttachment(event.target)) {
+          performOperation(new OpengraphEmbedOperation(paste))
+        }
+      }
+    }
+  }
+
+  #editorElementPermitsAttribute(element, attributeName) {
+    if (element.hasAttribute("data-permitted-attributes")) {
+      return Array.from(element.getAttribute("data-permitted-attributes").split(" ")).includes(attributeName)
+    } else {
+      return true
+    }
+  }
+
+  #editorElementPermitsOpengraphAttachment(element) {
+    const permittedAttachmentTypes = element.getAttribute("data-permitted-attachment-types")
+    return permittedAttachmentTypes && permittedAttachmentTypes.includes("application/vnd.actiontext.opengraph-embed")
+  }
+}