collavre 0.1.0

data/app/javascript/components/plugins/attachment_cleanup_plugin.jsx

@@ -0,0 +1,95 @@
+import { useEffect, useRef } from "react"
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import { $getRoot } from "lexical"
+import { $isImageNode } from "../../lib/lexical/image_node"
+import { $isAttachmentNode } from "../../lib/lexical/attachment_node"
+
+function extractSignedIdFromUrl(url) {
+    if (!url) return null
+
+    // URL format: /rails/active_storage/blobs/redirect/:signed_id/:filename
+    // or: /rails/active_storage/blobs/proxy/:signed_id/:filename
+    // or: /rails/active_storage/blobs/:signed_id/:filename
+    const redirectMatch = url.match(/\/rails\/active_storage\/blobs\/(?:redirect|proxy)\/([^\/?#]+)(?=[\/?#]|$)/)
+    if (redirectMatch) return redirectMatch[1]
+
+    // Fallback for direct blob URLs without redirect/proxy
+    const directMatch = url.match(/\/rails\/active_storage\/blobs\/([^\/?#]+)(?=[\/?#]|$)/)
+    return directMatch ? directMatch[1] : null
+}
+
+function getAllAttachmentUrls(editor) {
+    const urls = new Set()
+
+    editor.getEditorState().read(() => {
+        const root = $getRoot()
+
+        function traverse(node) {
+            if ($isImageNode(node)) {
+                urls.add(node.getSrc())
+            } else if ($isAttachmentNode(node)) {
+                urls.add(node.getSrc())
+            }
+
+            const children = node.getChildren ? node.getChildren() : []
+            children.forEach(traverse)
+        }
+
+        traverse(root)
+    })
+
+    return urls
+}
+
+export default function AttachmentCleanupPlugin({ deletedAttachmentsRef }) {
+    const [editor] = useLexicalComposerContext()
+    const allSeenUrlsRef = useRef(new Set())
+    const removedSignedIdsRef = useRef(new Set())
+
+    useEffect(() => {
+        // Initialize with current URLs
+        const initialUrls = getAllAttachmentUrls(editor)
+        initialUrls.forEach(url => allSeenUrlsRef.current.add(url))
+
+        const unregister = editor.registerUpdateListener(({ editorState }) => {
+            editorState.read(() => {
+                const currentUrls = getAllAttachmentUrls(editor)
+                const currentSignedIds = new Set(
+                    Array.from(currentUrls)
+                        .map(url => extractSignedIdFromUrl(url))
+                        .filter(Boolean)
+                )
+
+                // Add any new URLs to allSeenUrls
+                currentUrls.forEach(url => allSeenUrlsRef.current.add(url))
+
+                // Calculate removed URLs (seen but not currently present)
+                const removedUrls = Array.from(allSeenUrlsRef.current).filter(url => !currentUrls.has(url))
+
+                const removedSignedIds = removedUrls
+                    .map(url => extractSignedIdFromUrl(url))
+                    .filter(Boolean)
+
+                // If an attachment was previously removed but has been reinserted,
+                // drop it from the removal set to avoid purging restored blobs.
+                currentSignedIds.forEach(id => removedSignedIdsRef.current.delete(id))
+
+                removedSignedIds.forEach(id => removedSignedIdsRef.current.add(id))
+
+                if (deletedAttachmentsRef) {
+                    deletedAttachmentsRef.current = Array.from(removedSignedIdsRef.current)
+                }
+            })
+        })
+
+        return () => {
+            unregister()
+            removedSignedIdsRef.current.clear()
+            if (deletedAttachmentsRef) {
+                deletedAttachmentsRef.current = []
+            }
+        }
+    }, [editor, deletedAttachmentsRef])
+
+    return null
+}

data/app/javascript/components/plugins/image_upload_plugin.jsx

@@ -0,0 +1,162 @@
+import { useEffect, useCallback } from "react"
+import { DirectUpload as ModuleDirectUpload } from "@rails/activestorage"
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import { mergeRegister } from "@lexical/utils"
+import {
+    $createParagraphNode,
+    $getSelection,
+    $isRangeSelection,
+    $getRoot,
+    COMMAND_PRIORITY_EDITOR,
+    DROP_COMMAND,
+    PASTE_COMMAND,
+    createCommand
+} from "lexical"
+
+import { $createImageNode } from "../../lib/lexical/image_node"
+import { $createAttachmentNode } from "../../lib/lexical/attachment_node"
+
+export const INSERT_IMAGE_COMMAND = createCommand("INSERT_IMAGE_COMMAND")
+export const INSERT_FILE_COMMAND = createCommand("INSERT_FILE_COMMAND")
+
+function isImageFile(file) {
+    if (!file) return false
+    if (file.type) return /^image\//i.test(file.type)
+    return /\.(bmp|gif|jpe?g|png|svg|webp)$/i.test(file.name || "")
+}
+
+export default function FileUploadPlugin({
+    onUploadStateChange,
+    directUploadUrl,
+    blobUrlTemplate
+}) {
+    const [editor] = useLexicalComposerContext()
+
+    const startDirectUpload = useCallback(
+        (file) => {
+            if (!file) return
+
+            const isImage = isImageFile(file)
+
+            // Notify start
+            if (onUploadStateChange) onUploadStateChange(true)
+
+            const rootElement = editor.getRootElement()
+            const uploadContainer = rootElement?.closest("[data-direct-upload-url]")
+            const resolvedDirectUploadUrl = directUploadUrl || uploadContainer?.dataset.directUploadUrl
+            const resolvedBlobUrlTemplate = blobUrlTemplate || uploadContainer?.dataset.blobUrlTemplate
+
+            const UploadConstructor =
+                (typeof window !== "undefined" && window.ActiveStorage?.DirectUpload) ||
+                ModuleDirectUpload
+
+            if (!resolvedDirectUploadUrl || !resolvedBlobUrlTemplate || !UploadConstructor) {
+                console.error("Direct upload configuration missing")
+                if (onUploadStateChange) onUploadStateChange(false)
+                return
+            }
+
+            const upload = new UploadConstructor(file, resolvedDirectUploadUrl)
+
+            upload.create((error, attributes) => {
+                if (onUploadStateChange) onUploadStateChange(false)
+
+                if (error) {
+                    console.error("Upload failed", error)
+                    return
+                }
+
+                const url = resolvedBlobUrlTemplate
+                    .replace(":signed_id", attributes.signed_id)
+                    .replace(":filename", encodeURIComponent(attributes.filename))
+
+                editor.update(() => {
+                    let node
+
+                    if (isImage) {
+                        node = $createImageNode({
+                            src: url,
+                            altText: attributes.filename,
+                            maxWidth: 800 // Default max width
+                        })
+                    } else {
+                        node = $createAttachmentNode({
+                            src: url,
+                            filename: attributes.filename,
+                            filesize: file.size
+                        })
+                    }
+
+                    const selection = $getSelection()
+                    if ($isRangeSelection(selection)) {
+                        selection.insertNodes([node])
+                        // Insert a paragraph after so user can continue typing
+                        const paragraph = $createParagraphNode()
+                        node.insertAfter(paragraph)
+                        paragraph.selectStart()
+                    } else {
+                        const root = $getRoot()
+                        root.append(node)
+                        const paragraph = $createParagraphNode()
+                        root.append(paragraph)
+                        paragraph.selectStart()
+                    }
+                })
+            })
+        },
+        [blobUrlTemplate, directUploadUrl, editor, onUploadStateChange]
+    )
+
+    useEffect(() => {
+        return mergeRegister(
+            editor.registerCommand(
+                INSERT_IMAGE_COMMAND,
+                (payload) => {
+                    if (!payload || !payload.file) return false
+                    startDirectUpload(payload.file)
+                    return true
+                },
+                COMMAND_PRIORITY_EDITOR
+            ),
+            editor.registerCommand(
+                INSERT_FILE_COMMAND,
+                (payload) => {
+                    if (!payload || !payload.file) return false
+                    startDirectUpload(payload.file)
+                    return true
+                },
+                COMMAND_PRIORITY_EDITOR
+            ),
+            editor.registerCommand(
+                PASTE_COMMAND,
+                (event) => {
+                    const files = event.clipboardData?.files
+                    if (!files || files.length === 0) return false
+
+                    event.preventDefault()
+                    Array.from(files).forEach((file) => {
+                        startDirectUpload(file)
+                    })
+                    return true
+                },
+                COMMAND_PRIORITY_EDITOR
+            ),
+            editor.registerCommand(
+                DROP_COMMAND,
+                (event) => {
+                    const files = event.dataTransfer?.files
+                    if (!files || files.length === 0) return false
+
+                    event.preventDefault()
+                    Array.from(files).forEach((file) => {
+                        startDirectUpload(file)
+                    })
+                    return true
+                },
+                COMMAND_PRIORITY_EDITOR
+            )
+        )
+    }, [editor, startDirectUpload])
+
+    return null
+}

data/app/javascript/controllers/click_target_controller.js

@@ -0,0 +1,13 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static values = { id: String }
+
+  trigger(event) {
+    event.preventDefault()
+    const targetId = this.idValue
+    if (!targetId) return
+    const target = document.getElementById(targetId)
+    target?.click()
+  }
+}

data/app/javascript/controllers/comment_controller.js

@@ -0,0 +1,162 @@
+import { Controller } from "@hotwired/stimulus"
+import { renderCommentMarkdown } from '../lib/utils/markdown'
+
+// Connects to data-controller="comment"
+export default class extends Controller {
+  static targets = ["ownerButton"]
+
+  connect() {
+    const contentElement = this.element.querySelector('.comment-content')
+    if (contentElement && contentElement.dataset.rendered !== 'true') {
+      const text = contentElement.textContent || ''
+      contentElement.innerHTML = renderCommentMarkdown(text)
+      contentElement.dataset.rendered = 'true'
+    }
+
+    this.currentUserId = document.body.dataset.currentUserId
+    const commentAuthorId = this.element.dataset.userId
+
+    if (this.currentUserId && commentAuthorId && this.currentUserId === commentAuthorId) {
+      this.ownerButtonTargets.forEach((button) => {
+        button.classList.remove('comment-owner-only')
+      })
+    }
+  }
+
+  triggerReactionPicker(event) {
+    event.preventDefault()
+    event.stopPropagation()
+
+    // Dispatch event for global picker
+    const customEvent = new CustomEvent('reaction-picker:open', {
+      detail: {
+        controller: this,
+        target: event.currentTarget
+      },
+      bubbles: true
+    })
+    window.dispatchEvent(customEvent)
+  }
+
+  toggleReaction(event) {
+    event.preventDefault()
+    const button = event.currentTarget
+    const emoji = button.dataset.emoji
+    if (!emoji) return
+
+    const reacted = button.dataset.reacted === 'true'
+    this.submitReaction(emoji, reacted)
+  }
+
+  async submitReaction(emoji, reacted) {
+    const creativeId = this.element.dataset.creativeId
+    const commentId = this.element.dataset.commentId
+    if (!creativeId || !commentId) return
+
+    const url = new URL(`/creatives/${creativeId}/comments/${commentId}/reactions`, window.location.origin)
+    const method = reacted ? 'DELETE' : 'POST'
+    const headers = {
+      'X-CSRF-Token': document.querySelector('meta[name=csrf-token]')?.content || '',
+      'Accept': 'application/json'
+    }
+    const options = { method, headers }
+
+    if (method === 'POST') {
+      options.headers['Content-Type'] = 'application/json'
+      options.body = JSON.stringify({ emoji })
+    } else {
+      url.searchParams.set('emoji', emoji)
+    }
+
+    try {
+      const response = await fetch(url.toString(), options)
+      if (!response.ok) {
+        throw new Error('Failed to update reaction')
+      }
+
+      const data = await response.json()
+      this.updateReactionsUI(data)
+    } catch (error) {
+      alert(error?.message || 'Failed to update reaction')
+    }
+  }
+
+  updateReactionsUI(reactionsData) {
+    let reactionsContainer = this.element.querySelector('.comment-reactions')
+
+    // 1. If no reactions, remove container and return
+    if (!reactionsData || reactionsData.length === 0) {
+      if (reactionsContainer) {
+        reactionsContainer.remove()
+      }
+      return
+    }
+
+    // 2. If reactions exist but container doesn't, create it
+    let reactionsList
+    if (!reactionsContainer) {
+      reactionsContainer = document.createElement('div')
+      reactionsContainer.className = 'comment-reactions'
+
+      reactionsList = document.createElement('div')
+      reactionsList.className = 'comment-reaction-list'
+      reactionsContainer.appendChild(reactionsList)
+
+      // Insert after attachments if present, otherwise after content
+      const attachmentsElement = this.element.querySelector('.comment-attachments')
+      const contentElement = this.element.querySelector('.comment-content')
+
+      if (attachmentsElement) {
+        attachmentsElement.insertAdjacentElement('afterend', reactionsContainer)
+      } else if (contentElement) {
+        contentElement.insertAdjacentElement('afterend', reactionsContainer)
+      } else {
+        this.element.appendChild(reactionsContainer)
+      }
+    } else {
+      reactionsList = reactionsContainer.querySelector('.comment-reaction-list')
+      if (!reactionsList) {
+        reactionsList = document.createElement('div')
+        reactionsList.className = 'comment-reaction-list'
+        reactionsContainer.appendChild(reactionsList)
+      }
+    }
+
+    // 3. Clear existing list (Add button is elsewhere now, safe to clear)
+    reactionsList.innerHTML = ''
+
+    // 4. Append new reaction buttons
+    reactionsData.forEach(reaction => {
+      const { emoji, count, user_ids } = reaction
+
+      const button = document.createElement('button')
+      button.className = 'comment-reaction'
+      button.type = 'button'
+      button.dataset.action = 'click->comment#toggleReaction'
+      button.dataset.emoji = emoji
+
+      const reacted = this.currentUserId && user_ids.map(String).includes(String(this.currentUserId))
+      if (reacted) {
+        button.classList.add('reacted')
+        button.dataset.reacted = 'true'
+      } else {
+        button.dataset.reacted = 'false'
+      }
+
+      const emojiSpan = document.createElement('span')
+      emojiSpan.className = 'comment-reaction-emoji'
+      emojiSpan.textContent = emoji
+      button.appendChild(emojiSpan)
+
+      const countSpan = document.createElement('span')
+      countSpan.className = 'comment-reaction-count'
+      if (count > 1) {
+        countSpan.classList.add('is-visible')
+      }
+      countSpan.textContent = count
+      button.appendChild(countSpan)
+
+      reactionsList.appendChild(button)
+    })
+  }
+}

data/app/javascript/controllers/comments/__tests__/popup_controller.test.js

@@ -0,0 +1,68 @@
+
+/**
+ * @jest-environment jsdom
+ */
+
+import { Application, Controller } from '@hotwired/stimulus'
+import CommentsPopupController from '../popup_controller'
+
+describe('CommentsPopupController', () => {
+    let application
+    let container
+    let controller
+
+    beforeEach(() => {
+        container = document.createElement('div')
+        container.innerHTML = `
+      <div id="comments-popup" data-controller="comments--popup" style="width: 300px; height: 400px; position: absolute;">
+        <h3 data-comments--popup-target="title">Title</h3>
+        <div data-comments--popup-target="list">List</div>
+        <button data-comments--popup-target="closeButton">Close</button>
+        <div data-comments--popup-target="leftHandle"></div>
+        <div data-comments--popup-target="rightHandle"></div>
+      </div>
+      <button id="trigger-btn" data-creative-id="123" data-can-comment="true">Open</button>
+    `
+        document.body.appendChild(container)
+
+        application = Application.start()
+        application.register('comments--popup', CommentsPopupController)
+
+        // Manual controller access for testing internals if needed, 
+        // though usually better to test via DOM/events.
+        // Waiting for connection:
+        return new Promise(resolve => setTimeout(resolve, 0)).then(() => {
+            const element = document.getElementById('comments-popup')
+            controller = application.getControllerForElementAndIdentifier(element, 'comments--popup')
+        })
+    })
+
+    afterEach(() => {
+        document.body.innerHTML = ''
+        application.stop()
+    })
+
+    test('clears resized dataset attribute on close', () => {
+        const triggerBtn = document.getElementById('trigger-btn')
+        const popup = document.getElementById('comments-popup')
+
+        // Open popup
+        controller.open(triggerBtn)
+        expect(popup.style.display).not.toBe('none')
+
+        // Simulate resize start
+        const leftHandle = popup.querySelector('[data-comments--popup-target="leftHandle"]')
+        leftHandle.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, clientX: 100, clientY: 100 }))
+
+        // Moving mouse to resize
+        window.dispatchEvent(new MouseEvent('mousemove', { bubbles: true, clientX: 90, clientY: 100 }))
+
+        expect(popup.dataset.resized).toBe('true')
+
+        // Close popup
+        controller.close()
+
+        expect(popup.style.display).toBe('none')
+        expect(popup.dataset.resized).toBeUndefined()
+    })
+})