collavre 0.1.0

data/app/javascript/lib/lexical/attachment_payload.js

@@ -0,0 +1,293 @@
+const DEFAULT_STATUS = "ready"
+
+function coerceNumber(value) {
+  if (value === null || value === undefined) return null
+  const parsed = Number(value)
+  if (!Number.isFinite(parsed)) return null
+  return parsed
+}
+
+function isImageContentType(contentType) {
+  return typeof contentType === "string" && /^image\//i.test(contentType)
+}
+
+export function parseDimension(value) {
+  if (value === null || value === undefined) return null
+  if (typeof value === "number" && Number.isFinite(value)) return value
+  const match = String(value).trim().match(/([0-9]+(?:\.[0-9]+)?)/)
+  if (!match) return null
+  const parsed = parseFloat(match[1])
+  return Number.isFinite(parsed) ? parsed : null
+}
+
+export function formatFileSize(bytes) {
+  const value = coerceNumber(bytes)
+  if (!Number.isFinite(value) || value <= 0) return ""
+  const units = ["B", "KB", "MB", "GB", "TB"]
+  let size = value
+  let unitIndex = 0
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024
+    unitIndex += 1
+  }
+  return `${size % 1 === 0 ? size : size.toFixed(1)} ${units[unitIndex]}`
+}
+
+export function normalizeAttachmentCaption(rawCaption, {filename, filesize}) {
+  if (!rawCaption) return ""
+  const normalized = rawCaption.replace(/•/g, " ").replace(/\s+/g, " ").trim()
+  if (!normalized) return ""
+  const defaults = new Set()
+  if (filename) {
+    defaults.add(filename.toLowerCase())
+  }
+  if (filename && Number.isFinite(filesize)) {
+    defaults.add(`${filename} ${formatFileSize(filesize)}`.toLowerCase())
+  }
+  return defaults.has(normalized.toLowerCase()) ? "" : normalized
+}
+
+export function sanitizeAttachmentPayload(raw = {}) {
+  const sanitized = {
+    sgid: raw.sgid || null,
+    url: raw.url || null,
+    filename: (raw.filename || "").trim(),
+    contentType: raw.contentType || raw["content-type"] || null,
+    filesize: coerceNumber(raw.filesize),
+    caption: raw.caption || "",
+    previewable:
+      raw.previewable !== undefined && raw.previewable !== null
+        ? Boolean(raw.previewable)
+        : false,
+    width: parseDimension(raw.width ?? raw.dataWidth ?? raw["data-width"]),
+    height: parseDimension(raw.height ?? raw.dataHeight ?? raw["data-height"]),
+    status: raw.status || DEFAULT_STATUS,
+    progress: Number.isFinite(raw.progress) ? raw.progress : raw.status === "ready" ? 100 : 0,
+    localUrl: raw.localUrl || null,
+    error: raw.error || null
+  }
+
+  if (!sanitized.previewable) {
+    if (isImageContentType(sanitized.contentType)) {
+      sanitized.previewable = true
+    } else if (typeof sanitized.url === "string") {
+      const urlPath = sanitized.url.split("?")[0].toLowerCase()
+      const imageExtensions = [".png", ".jpg", ".jpeg", ".gif", ".webp", ".svg"]
+      sanitized.previewable = imageExtensions.some((ext) => urlPath.endsWith(ext))
+    }
+  }
+
+  sanitized.caption = normalizeAttachmentCaption((raw.caption || "").trim(), sanitized)
+
+  return sanitized
+}
+
+export function attachmentPayloadFromAttachmentElement(element) {
+  if (!(element instanceof Element)) return null
+  const payload = sanitizeAttachmentPayload({
+    sgid: element.getAttribute("sgid"),
+    url: element.getAttribute("url"),
+    filename: element.getAttribute("filename"),
+    contentType: element.getAttribute("content-type"),
+    filesize: element.getAttribute("filesize"),
+    caption: element.getAttribute("caption"),
+    previewable: element.getAttribute("previewable") === "true",
+    width: element.getAttribute("data-width"),
+    height: element.getAttribute("data-height")
+  })
+  return payload
+}
+
+export function attachmentPayloadFromFigure(figure) {
+  if (!(figure instanceof Element)) return null
+  if (!figure.classList.contains("attachment")) return null
+  if (figure.closest("action-text-attachment")) return null
+  let data = null
+  const dataset = figure.getAttribute("data-trix-attachment")
+  if (dataset) {
+    try {
+      data = JSON.parse(dataset)
+    } catch (_error) {
+      data = null
+    }
+  }
+
+  const payload = sanitizeAttachmentPayload({
+    sgid: data?.sgid || data?.attachable_sgid || null,
+    url: data?.url || data?.href || null,
+    filename: data?.filename || data?.name || figure.querySelector(".attachment__name")?.textContent || "",
+    contentType: data?.contentType || data?.content_type || figure.getAttribute("data-trix-content-type"),
+    filesize: data?.filesize ?? data?.file_size ?? data?.size ?? null,
+    previewable: data?.previewable ?? figure.classList.contains("attachment--preview"),
+    width: data?.width ?? data?.presentation?.width ?? figure.getAttribute("data-width"),
+    height: data?.height ?? data?.presentation?.height ?? figure.getAttribute("data-height"),
+    caption: data?.caption || figure.querySelector("figcaption")?.textContent || ""
+  })
+
+  if (!payload.url) {
+    const img = figure.querySelector("img")
+    if (img) {
+      payload.url = img.getAttribute("src") || null
+      payload.previewable = true
+      payload.width = payload.width || parseDimension(img.getAttribute("data-width") || img.getAttribute("width") || img.style.width)
+      payload.height = payload.height || parseDimension(img.getAttribute("data-height") || img.getAttribute("height") || img.style.height)
+      if (!payload.caption) {
+        payload.caption = normalizeAttachmentCaption(img.getAttribute("alt"), payload)
+      }
+    }
+  }
+
+  return payload
+}
+
+function buildDataTrixAttachment(payload) {
+  return JSON.stringify({
+    sgid: payload.sgid,
+    contentType: payload.contentType,
+    filename: payload.filename,
+    name: payload.filename,
+    filesize: payload.filesize,
+    size: payload.filesize,
+    url: payload.url,
+    href: payload.url,
+    previewable: payload.previewable,
+    caption: payload.caption,
+    presentation: {
+      width: payload.width || undefined,
+      height: payload.height || undefined
+    }
+  })
+}
+
+export function attachmentPayloadToHTMLElement(payload, options = {}) {
+  const {includeFigure = true} = options
+  const sanitized = sanitizeAttachmentPayload(payload)
+  const element = document.createElement("action-text-attachment")
+  if (sanitized.sgid) element.setAttribute("sgid", sanitized.sgid)
+  if (sanitized.contentType) element.setAttribute("content-type", sanitized.contentType)
+  if (sanitized.url) element.setAttribute("url", sanitized.url)
+  if (sanitized.filename) element.setAttribute("filename", sanitized.filename)
+  if (Number.isFinite(sanitized.filesize)) element.setAttribute("filesize", String(sanitized.filesize))
+  if (sanitized.caption) element.setAttribute("caption", sanitized.caption)
+  if (sanitized.previewable) element.setAttribute("previewable", "true")
+  if (Number.isFinite(sanitized.width)) element.setAttribute("data-width", String(Math.round(sanitized.width)))
+  if (Number.isFinite(sanitized.height)) element.setAttribute("data-height", String(Math.round(sanitized.height)))
+
+  if (includeFigure) {
+    const figure = document.createElement("figure")
+    figure.className = `attachment ${sanitized.previewable ? "attachment--preview" : "attachment--file"}`
+    if (sanitized.contentType) {
+      figure.classList.add(`attachment--${sanitized.contentType.split("/")[1] || sanitized.contentType}`)
+      figure.setAttribute("data-trix-content-type", sanitized.contentType)
+    }
+    figure.setAttribute("data-trix-attachment", buildDataTrixAttachment(sanitized))
+
+    if (sanitized.previewable && sanitized.url) {
+      const img = document.createElement("img")
+      img.src = sanitized.url
+      img.alt = sanitized.caption || sanitized.filename || ""
+      img.style.maxWidth = "100%"
+      img.style.height = "auto"
+      if (Number.isFinite(sanitized.width)) {
+        img.setAttribute("data-width", String(Math.round(sanitized.width)))
+        img.style.width = `${Math.round(sanitized.width)}px`
+      }
+      if (Number.isFinite(sanitized.height)) {
+        img.setAttribute("data-height", String(Math.round(sanitized.height)))
+      }
+      figure.appendChild(img)
+    } else {
+      const wrapper = document.createElement("div")
+      wrapper.className = "attachment__file"
+
+      const link = document.createElement("a")
+      link.href = sanitized.url || "#"
+      link.className = "attachment__download"
+      if (sanitized.filename) link.setAttribute("download", sanitized.filename)
+      link.textContent = sanitized.filename || "Attachment"
+      wrapper.appendChild(link)
+
+      const info = document.createElement("div")
+      info.className = "attachment__file-info"
+      const nameSpan = document.createElement("span")
+      nameSpan.className = "attachment__name"
+      nameSpan.textContent = sanitized.filename || "Attachment"
+      info.appendChild(nameSpan)
+      if (Number.isFinite(sanitized.filesize)) {
+        const sizeSpan = document.createElement("span")
+        sizeSpan.className = "attachment__size"
+        sizeSpan.textContent = formatFileSize(sanitized.filesize)
+        info.appendChild(sizeSpan)
+      }
+      wrapper.appendChild(info)
+      figure.appendChild(wrapper)
+    }
+
+    const figcaption = document.createElement("figcaption")
+    figcaption.className = "attachment__caption"
+    const captionName = document.createElement("span")
+    captionName.className = "attachment__name"
+    captionName.textContent = sanitized.caption || sanitized.filename || "Attachment"
+    figcaption.appendChild(captionName)
+    if (Number.isFinite(sanitized.filesize)) {
+      const captionSize = document.createElement("span")
+      captionSize.className = "attachment__size"
+      captionSize.textContent = formatFileSize(sanitized.filesize)
+      figcaption.appendChild(captionSize)
+    }
+    figure.appendChild(figcaption)
+
+    element.appendChild(figure)
+  }
+  return {element, payload: sanitized}
+}
+
+export function ensureSgid(payload) {
+  if (payload.sgid) return payload
+  const id = typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2)
+  return {...payload, sgid: `temp-${id}`}
+}
+
+function attachmentIdentity(payload) {
+  if (payload.sgid) return `sgid:${payload.sgid}`
+  const parts = [payload.url || "", payload.filename || ""]
+  const size = Number.isFinite(payload.filesize) ? String(payload.filesize) : ""
+  parts.push(size)
+  return `meta:${parts.join("|")}`
+}
+
+export function canonicalizeAttachmentElements(root, options = {}) {
+  const {includeFigure = false} = options
+  if (!root || typeof root.querySelectorAll !== "function") return
+  const nodes = Array.from(
+    root.querySelectorAll("action-text-attachment, figure.attachment")
+  )
+  let lastKeptKey = null
+
+  nodes.forEach((node) => {
+    if (node.tagName === "FIGURE" && node.closest("action-text-attachment")) {
+      return
+    }
+
+    const payload =
+      node.tagName === "ACTION-TEXT-ATTACHMENT"
+        ? attachmentPayloadFromAttachmentElement(node)
+        : attachmentPayloadFromFigure(node)
+
+    if (!payload) {
+      node.remove()
+      lastKeptKey = null
+      return
+    }
+
+    const key = attachmentIdentity(payload)
+    if (lastKeptKey && key === lastKeptKey) {
+      node.remove()
+      return
+    }
+
+    const {element} = attachmentPayloadToHTMLElement(payload, {includeFigure})
+    node.replaceWith(element)
+    lastKeptKey = key
+  })
+}

data/app/javascript/lib/lexical/dom_attachment_utils.js

@@ -0,0 +1,66 @@
+import {
+  sanitizeAttachmentPayload,
+  attachmentPayloadFromAttachmentElement,
+  attachmentPayloadFromFigure,
+  attachmentPayloadToHTMLElement
+} from "./attachment_payload"
+
+export function extractAttachmentPayloadFromDOM(element) {
+  if (!(element instanceof Element)) return null
+  if (element.tagName === "ACTION-TEXT-ATTACHMENT") {
+    return attachmentPayloadFromAttachmentElement(element)
+  }
+  if (element.tagName === "FIGURE") {
+    return attachmentPayloadFromFigure(element)
+  }
+  return null
+}
+
+export function ensureAttachmentWrapper(element) {
+  if (!(element instanceof Element)) return null
+  const payload = attachmentPayloadFromAttachmentElement(element)
+  if (payload) return {element, payload}
+
+  const figure = element.tagName === "FIGURE" ? element : element.querySelector("figure.attachment")
+  if (!figure) return null
+  const figurePayload = attachmentPayloadFromFigure(figure)
+  if (!figurePayload) return null
+  const {element: wrapper, payload: sanitized} = attachmentPayloadToHTMLElement(figurePayload)
+  figure.replaceWith(wrapper)
+  return {element: wrapper, payload: sanitized}
+}
+
+export function serializeAttachmentPayloadToHTML(payload) {
+  const {element} = attachmentPayloadToHTMLElement(payload)
+  return element.outerHTML
+}
+
+export function normalizeAttachmentPair(container) {
+  if (!(container instanceof Element)) return
+  const attachments = Array.from(container.querySelectorAll("action-text-attachment"))
+  const seen = new Set()
+
+  attachments.forEach((attachment) => {
+    const payload = attachmentPayloadFromAttachmentElement(attachment)
+    if (!payload) return
+    const key = `${payload.sgid || payload.filename}-${payload.url || ""}`
+    if (seen.has(key)) {
+      attachment.remove()
+      return
+    }
+    seen.add(key)
+
+    const figure = attachment.querySelector("figure.attachment")
+    if (figure) {
+      attachmentPayloadToHTMLElement(payload) // ensures figure JSON is in-sync
+    }
+  })
+
+  container.querySelectorAll("figure.attachment").forEach((figure) => {
+    if (figure.closest("action-text-attachment")) return
+    const payload = attachmentPayloadFromFigure(figure)
+    if (!payload) return
+    const {element} = attachmentPayloadToHTMLElement(payload)
+    figure.replaceWith(element)
+  })
+}

data/app/javascript/lib/lexical/image_node.jsx

@@ -0,0 +1,159 @@
+import {
+    $applyNodeReplacement,
+    createEditor,
+    DecoratorNode,
+} from "lexical"
+
+export class ImageNode extends DecoratorNode {
+    __src
+    __altText
+    __width
+    __height
+    __maxWidth
+
+    static getType() {
+        return "image"
+    }
+
+    static clone(node) {
+        return new ImageNode(
+            node.__src,
+            node.__altText,
+            node.__maxWidth,
+            node.__width,
+            node.__height,
+            node.__key
+        )
+    }
+
+    static importJSON(serializedNode) {
+        const { altText, height, width, maxWidth, src } = serializedNode
+        const node = $createImageNode({
+            altText,
+            height,
+            maxWidth,
+            src,
+            width,
+        })
+        return node
+    }
+
+    exportDOM() {
+        const element = document.createElement("img")
+        element.setAttribute("src", this.__src)
+        element.setAttribute("alt", this.__altText)
+        if (this.__width) {
+            element.setAttribute("width", this.__width.toString())
+        }
+        if (this.__height) {
+            element.setAttribute("height", this.__height.toString())
+        }
+        return { element }
+    }
+
+    static importDOM() {
+        return {
+            img: (node) => ({
+                conversion: convertImageElement,
+                priority: 0,
+            }),
+        }
+    }
+
+    constructor(src, altText, maxWidth, width, height, key) {
+        super(key)
+        this.__src = src
+        this.__altText = altText
+        this.__maxWidth = maxWidth
+        this.__width = width || "inherit"
+        this.__height = height || "inherit"
+    }
+
+    exportJSON() {
+        return {
+            altText: this.getAltText(),
+            height: this.__height === "inherit" ? 0 : this.__height,
+            maxWidth: this.__maxWidth,
+            src: this.getSrc(),
+            type: "image",
+            version: 1,
+            width: this.__width === "inherit" ? 0 : this.__width,
+        }
+    }
+
+    setWidthAndHeight(width, height) {
+        const writable = this.getWritable()
+        writable.__width = width
+        writable.__height = height
+    }
+
+    createDOM(config) {
+        const span = document.createElement("span")
+        const theme = config.theme
+        const className = theme.image
+        if (className !== undefined) {
+            span.className = className
+        }
+        return span
+    }
+
+    updateDOM() {
+        return false
+    }
+
+    getSrc() {
+        return this.__src
+    }
+
+    getAltText() {
+        return this.__altText
+    }
+
+    decorate() {
+        const handleClick = (e) => {
+            // Stop propagation to prevent creative-row navigation
+            // and prevent default to stop parent link navigation
+            e.stopPropagation()
+            e.preventDefault()
+        }
+
+        return (
+            <img
+                src={this.__src}
+                alt={this.__altText}
+                onClick={handleClick}
+                style={{
+                    width: this.__width === "inherit" ? "auto" : this.__width,
+                    height: this.__height === "inherit" ? "auto" : this.__height,
+                    maxWidth: "100%",
+                    cursor: "default",
+                }}
+            />
+        )
+    }
+}
+
+function convertImageElement(domNode) {
+    if (domNode instanceof HTMLImageElement) {
+        const { alt: altText, src, width, height } = domNode
+        const node = $createImageNode({ altText, height, src, width })
+        return { node }
+    }
+    return null
+}
+
+export function $createImageNode({
+    altText,
+    height,
+    maxWidth = 500,
+    src,
+    width,
+}) {
+    return $applyNodeReplacement(
+        new ImageNode(src, altText, maxWidth, width, height)
+    )
+}
+
+export function $isImageNode(node) {
+    return node instanceof ImageNode
+}

data/app/javascript/lib/lexical/style_attributes.js

@@ -0,0 +1,40 @@
+export function syncLexicalStyleAttributes(root) {
+  if (!root || typeof root.querySelectorAll !== "function") return
+
+  const elements = root.querySelectorAll(
+    "[style], [data-lexical-color], [data-lexical-background-color]"
+  )
+
+  elements.forEach((element) => {
+    const {style, dataset} = element
+
+    if (style) {
+      const color = style.color && style.color.trim()
+      const backgroundColor = style.backgroundColor && style.backgroundColor.trim()
+
+      if (color) {
+        dataset.lexicalColor = color
+      } else if (dataset.lexicalColor) {
+        style.color = dataset.lexicalColor
+      }
+
+      if (backgroundColor) {
+        dataset.lexicalBackgroundColor = backgroundColor
+      } else if (dataset.lexicalBackgroundColor) {
+        style.backgroundColor = dataset.lexicalBackgroundColor
+      }
+    } else {
+      if (dataset.lexicalColor) {
+        element.setAttribute(
+          "style",
+          `color: ${dataset.lexicalColor};${dataset.lexicalBackgroundColor ? ` background-color: ${dataset.lexicalBackgroundColor};` : ""}`
+        )
+        return
+      }
+
+      if (dataset.lexicalBackgroundColor) {
+        element.setAttribute("style", `background-color: ${dataset.lexicalBackgroundColor};`)
+      }
+    }
+  })
+}

data/app/javascript/lib/responsive_images.js

@@ -0,0 +1,54 @@
+export function updateResponsiveImages(container, targetWidth) {
+    if (!container) return
+
+    const images = container.querySelectorAll("img")
+    const containerWidth = typeof targetWidth === "number" ? targetWidth : container.clientWidth
+
+    if (!containerWidth || Number.isNaN(containerWidth) || containerWidth <= 0) return
+
+    images.forEach((img) => {
+        const src = img.getAttribute("src")
+        if (!src) return
+
+        // Skip if not an internal image or already processed (optional check)
+        // For now, we assume we want to update all images that look like they might support resizing
+        // or just append params if the server supports it.
+        // Assuming ActiveStorage variants or similar can be requested via params,
+        // but standard ActiveStorage URLs are signed and immutable.
+        // If we are using a proxy or a service that supports resizing via query params (like Cloudinary or a custom proxy), this works.
+        // If using standard ActiveStorage, we might need to request a variant URL from the server.
+        // However, the user request said: "dynamically append width/height parameters based on the currently requested size"
+        // This implies the image server supports it.
+
+        try {
+            const url = new URL(src, window.location.origin)
+            // Only update if width changed significantly to avoid thrashing
+            const currentW = url.searchParams.get("w")
+            const targetW = Math.round(containerWidth)
+
+            if (currentW && Math.abs(Number(currentW) - targetW) < 50) return
+
+            url.searchParams.set("w", targetW)
+            // url.searchParams.set("h", ...) // Height is usually auto based on aspect ratio
+
+            // Update src only if changed
+            if (url.toString() !== src) {
+                img.src = url.toString()
+            }
+        } catch (e) {
+            // Ignore invalid URLs
+        }
+    })
+}
+
+// Observer to watch for resizing
+export function observeResponsiveImages(container) {
+    if (!container) return null
+
+    const observer = new ResizeObserver(() => {
+        updateResponsiveImages(container)
+    })
+
+    observer.observe(container)
+    return observer
+}

data/app/javascript/lib/turbo_stream_actions.js

@@ -0,0 +1,33 @@
+import { Turbo } from "@hotwired/turbo-rails"
+
+Turbo.StreamActions.update_reactions = function () {
+    const targetId = this.getAttribute("target")
+    const dataJSON = this.getAttribute("data")
+
+    console.log("[Turbo] update_reactions action received", { targetId, dataJSON })
+
+    if (!targetId || !dataJSON) {
+        console.warn("[Turbo] update_reactions missing target or data")
+        return
+    }
+
+    try {
+        const data = JSON.parse(dataJSON)
+        const element = document.getElementById(targetId)
+
+        if (element) {
+            // Find the stimulus controller instance using the global Stimulus application
+            const controller = window.Stimulus?.getControllerForElementAndIdentifier(element, "comment")
+            if (controller && typeof controller.updateReactionsUI === 'function') {
+                console.log("[Turbo] calling updateReactionsUI", data)
+                controller.updateReactionsUI(data)
+            } else {
+                console.warn("[Turbo] comment controller not found", { element, controller })
+            }
+        } else {
+            console.warn("[Turbo] target element not found", targetId)
+        }
+    } catch (e) {
+        console.error("Failed to process update_reactions stream action", e)
+    }
+}

data/app/javascript/lib/utils/markdown.js

@@ -0,0 +1,23 @@
+import { marked } from 'marked'
+
+export function renderMarkdown(html) {
+  return marked.parse(html)
+}
+
+export function renderMarkdownInline(html) {
+  return marked.parseInline(html)
+}
+
+export function renderCommentMarkdown(text) {
+  const content = text || ''
+  const html = content.includes('\n') ? marked.parse(content) : marked.parseInline(content)
+  return html.trim()
+}
+
+export function renderMarkdownInContainer(container) {
+  container.querySelectorAll('.comment-content').forEach((element) => {
+    if (element.dataset.rendered === 'true') return
+    element.innerHTML = renderCommentMarkdown(element.textContent)
+    element.dataset.rendered = 'true'
+  })
+}