collavre 0.3.2 → 0.5.0

data/app/helpers/collavre/creatives_helper.rb

@@ -1,7 +1,3 @@
-require "base64"
-require "securerandom"
-require "nokogiri"
-
 module Collavre
   module CreativesHelper
     # Shared toggle button symbol helper
@@ -93,7 +89,7 @@ module Collavre
       !!(expanded_state_map && expanded_state_map[creative_id.to_s])
     end
 
-    def render_creative_tree_markdown(creatives, level = 1, with_progress = false)
+    def render_creative_tree_markdown(creatives, level = 1, with_progress = false, max_depth: nil)
       return "" if creatives.blank?
       md = ""
       creatives.each do |creative|
@@ -103,18 +99,18 @@ module Collavre
           desc = "#{desc} (#{pct}%)"
         end
         raw_html = desc.gsub(/<!--.*?-->/m, "").strip
-        markdown_content = html_links_to_markdown(raw_html)
+        markdown_content = MarkdownConverter.html_to_markdown(raw_html)
         cleaned_markdown = markdown_content.strip
         rendered_table_block = false
 
         table_match = cleaned_markdown.match(/^<div[^>]*>\s*<div[^>]*>\s*(\|.*?\|(?:\n\|.*?\|)*)\s*<\/div>\s*<\/div>$/m)
         if level <= 4 && table_match
           table_content = table_match[1].strip
-          if markdown_table_block?(table_content)
+          if MarkdownConverter.table_block?(table_content)
             md += "#{table_content}\n\n"
             rendered_table_block = true
           end
-        elsif level <= 4 && markdown_table_block?(cleaned_markdown)
+        elsif level <= 4 && MarkdownConverter.table_block?(cleaned_markdown)
           md += "#{cleaned_markdown}\n\n"
           rendered_table_block = true
         elsif level <= 4
@@ -134,210 +130,22 @@ module Collavre
           md += "#{indent}* #{inner}\n"
         end
         children = creative.linked_children
-        if children.present?
-          md += render_creative_tree_markdown(children, level + 1, with_progress)
+        if children.present? && (max_depth.nil? || level < max_depth)
+          md += render_creative_tree_markdown(children, level + 1, with_progress, max_depth: max_depth)
         end
         md += "\n" if level <= 4 && !rendered_table_block
       end
       md
     end
 
+    # Delegate to MarkdownConverter for backward compatibility.
+    # These methods are used in views and by MarkdownImporter via ApplicationController.helpers.
     def markdown_links_to_html(text, image_refs = {})
-      return "" if text.nil?
-      html = text.dup
-
-      html.gsub!(/^\s*\[([^\]]+)\]:\s*<\s*(data:image\/[^>]+)\s*>\s*$/) do
-        image_refs[$1] = $2.strip
-        ""
-      end
-
-      html.gsub!(/(?<!\\)!\[([^\]]*)\]\[([^\]]+)\]/) do
-        if (data_url = image_refs[$2])
-          convert_data_image_to_attachment(data_url, $1)
-        else
-          "![#{$1}][#{$2}]"
-        end
-      end
-
-      html.gsub!(/(?<!\\)!\[([^\]]*)\]\((data:image\/[^)]+)\)/) do
-        convert_data_image_to_attachment($2, $1)
-      end
-      html.gsub!(/(?<!\\)\[([^\]]+)\]\(([^)]+)\)/) do
-        "<a href=\"#{$2}\">#{$1}</a>"
-      end
-      html.gsub!(/(?<!\\)(\*\*|__)(.+?)\1/m) do
-        "<strong>#{$2}</strong>"
-      end
-      html.gsub!(/\\([\\*_\[\]()!#~+\-])/, '\\1')
-      html.gsub!(/\\\\/, "\\")
-      html.strip!
-      html
+      MarkdownConverter.markdown_to_html(text, image_refs)
     end
 
     def html_links_to_markdown(text)
-      return "" if text.nil?
-      markdown = text.dup
-      placeholders = {}
-      index = 0
-      markdown.gsub!(%r{<table\b[^>]*>.*?</table>}im) do |match|
-        token = "__TABLE#{index}__"; index += 1
-        placeholders[token] = html_table_to_markdown(match)
-        token
-      end
-      markdown.gsub!(%r{<action-text-attachment ([^>]+)>(?:</action-text-attachment>)?}) do |match|
-        attrs = Hash[$1.scan(/(\S+?)="([^"]*)"/)]
-        sgid = attrs["sgid"]
-        caption = attrs["caption"] || ""
-        if (blob = GlobalID::Locator.locate_signed(sgid, for: "attachable"))
-          data = Base64.strict_encode64(blob.download)
-          token = "__IMG#{index}__"; index += 1
-          placeholders[token] = "![#{caption}](data:#{blob.content_type};base64,#{data})"
-          token
-        else
-          ""
-        end
-      end
-      markdown.gsub!(%r{<img [^>]*src=["'](/rails/active_storage/blobs/[^"']+)["'][^>]*alt=["']([^"']*)["'][^>]*>}) do |match|
-        blob_path = $1
-        alt_text = $2
-        if blob_path =~ %r{/rails/active_storage/blobs/(?:redirect|proxy)/([^/]+)/}
-          signed_id = $1
-          begin
-            blob = ActiveStorage::Blob.find_signed(signed_id)
-            data = Base64.strict_encode64(blob.download)
-            token = "__IMG#{index}__"; index += 1
-            placeholders[token] = "![#{alt_text}](data:#{blob.content_type};base64,#{data})"
-            token
-          rescue
-            match
-          end
-        else
-          match
-        end
-      end
-      markdown.gsub!(/<img [^>]*src=['"](data:[^'"]+)['"][^>]*alt=['"]([^'"]*)['"][^>]*>/) do
-        token = "__IMG#{index}__"; index += 1
-        placeholders[token] = "![#{$2}](#{$1})"
-        token
-      end
-      markdown.gsub!(/<img [^>]*alt=['"]([^'"]*)['"][^>]*src=['"](data:[^'"]+)['"][^>]*>/) do
-        token = "__IMG#{index}__"; index += 1
-        placeholders[token] = "![#{$1}](#{$2})"
-        token
-      end
-      markdown.gsub!(/<a [^>]*href=['"]([^'"]+)['"][^>]*>(.*?)<\/a>/m) do
-        inner = ActionView::Base.full_sanitizer.sanitize($2)
-        token = "__LINK#{index}__"; index += 1
-        placeholders[token] = "[#{inner}](#{$1})"
-        token
-      end
-      markdown.gsub!(/<(strong|b)(?:\s+[^>]*)?>(.*?)<\/\1>/im) do
-        token = "__BOLD#{index}__"; index += 1
-        placeholders[token] = "**#{$2.strip}**"
-        token
-      end
-      markdown.gsub!(/([\\*\[\]()!#~+\-])/) { "\\#{$1}" }
-      placeholders.each { |k, v| markdown.gsub!(k, v) }
-      markdown.gsub!(/<[^>]+>/, "")
-      markdown
-    end
-
-    private
-
-    def markdown_table_block?(text)
-      lines = text.to_s.strip.split("\n")
-      return false if lines.length < 2
-
-      header_line = lines[0]
-      alignment_line = lines[1]
-      return false unless header_line.match?(/\A\|.*\|\z/)
-      return false unless alignment_line.match?(/\A\|[ \-:\|]+\|\z/)
-
-      true
-    end
-
-    def convert_data_image_to_attachment(data_url, alt)
-      if data_url =~ %r{\Adata:(image/[\w.+-]+);base64,(.+)\z}
-        content_type = Regexp.last_match(1)
-        data = Base64.decode64(Regexp.last_match(2))
-        ext = Mime::Type.lookup(content_type).symbol.to_s
-        filename = "import-#{SecureRandom.hex}.#{ext}"
-        blob = ActiveStorage::Blob.create_and_upload!(io: StringIO.new(data), filename: filename, content_type: content_type)
-        "<img src=\"#{Rails.application.routes.url_helpers.rails_blob_url(blob, only_path: true)}\" alt=\"#{alt}\" />"
-      else
-        "<img src=\"#{data_url}\" alt=\"#{alt}\" />"
-      end
-    end
-
-    def html_table_to_markdown(table_html)
-      fragment = Nokogiri::HTML::DocumentFragment.parse(table_html)
-      table = fragment.at_css("table")
-      return "" unless table
-
-      header_row = table.at_css("thead tr") || table.css("tr").first
-      return "" unless header_row
-
-      header_cells = header_row.css("th,td")
-      headers = header_cells.map { |cell| escape_markdown_table_cell(html_links_to_markdown(cell.inner_html).strip) }
-
-      alignments = header_cells.map { |cell| alignment_from_html_cell(cell) }
-
-      body_rows = table.css("tbody tr")
-      if body_rows.empty?
-        all_rows = table.css("tr")
-        body_rows = all_rows.drop(1)
-      end
-
-      body_lines = body_rows.map do |row|
-        cells = row.css("th,td").map { |cell| escape_markdown_table_cell(html_links_to_markdown(cell.inner_html).strip) }
-        normalized = normalize_row_cells(cells, headers.length)
-        "| #{normalized.join(' | ')} |"
-      end
-
-      alignment_cells = normalize_row_cells(alignments, headers.length).map { |align| alignment_to_markdown(align) }
-      header_line = "| #{headers.map(&:strip).join(' | ')} |"
-      alignment_line = "| #{alignment_cells.join(' | ')} |"
-
-      ([ header_line, alignment_line ] + body_lines).join("\n")
-    end
-
-    def escape_markdown_table_cell(text)
-      text.to_s.gsub(/(?<!\\)\|/, '\\|')
-    end
-
-    def alignment_from_html_cell(cell)
-      style = cell["style"].to_s
-      align = cell["align"].to_s
-      case
-      when style =~ /text-align\s*:\s*center/i || align =~ /center/i
-        :center
-      when style =~ /text-align\s*:\s*right/i || align =~ /right/i
-        :right
-      when style =~ /text-align\s*:\s*left/i || align =~ /left/i
-        :left
-      else
-        nil
-      end
-    end
-
-    def alignment_to_markdown(alignment)
-      case alignment
-      when :center
-        ":---:"
-      when :right
-        "---:"
-      when :left
-        ":---"
-      else
-        "---"
-      end
-    end
-
-    def normalize_row_cells(cells, expected_length)
-      values = cells.dup
-      values = values.first(expected_length)
-      values.fill("", values.length...expected_length)
-      values
+      MarkdownConverter.html_to_markdown(text)
     end
   end
 end

data/app/javascript/collavre.js

@@ -12,7 +12,6 @@ import "./modules/plans_menu"
 import "./modules/inbox_panel"
 import "./modules/creative_guide"
 import "./modules/share_modal"
-import "./modules/share_user_popup"
 import "./modules/creative_row_editor"
 import "./modules/slide_view"
 

data/app/javascript/components/creative_tree_row.js

@@ -1,6 +1,7 @@
 import { LitElement, html, nothing } from "lit";
 import DOMPurify from "dompurify";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { parseEmojis } from "../utils/emoji_parser";
 
 const BULLET_STARTING_LEVEL = 3;
 
@@ -303,7 +304,7 @@ class CreativeTreeRow extends LitElement {
 
       // If no children, render as div instead of heading to avoid large font size
       if (!this.hasChildren) {
-        return html`<div class=${headingClass}>${content}${indicator}</div>`;
+        return html`<div class="${headingClass} creative-childless">${content}${indicator}</div>`;
       }
 
       // We wrap content in heading tags for semantics
@@ -361,7 +362,7 @@ class CreativeTreeRow extends LitElement {
       emojiString = rootStyle.getPropertyValue('--creative-loading-emojis').replace(/"/g, '').trim();
     }
 
-    const emojis = emojiString ? emojiString.split(',').map(e => e.trim()) : ['🎨', '💡', '🚀', '✨', '🧩', '🎲'];
+    const emojis = parseEmojis(emojiString);
 
     let emojiIndex = 0;
     let frame = 0;

data/app/javascript/controllers/comment_controller.js

@@ -1,18 +1,132 @@
 import { Controller } from "@hotwired/stimulus"
 import { renderCommentMarkdown } from '../lib/utils/markdown'
+import CommonPopup from '../lib/common_popup'
+
+// Global tracker: persists streaming state across Turbo replacements
+// (each replacement creates a new controller instance, losing instance state)
+if (!window._streamingCommentIds) window._streamingCommentIds = new Set()
 
 // Connects to data-controller="comment"
 export default class extends Controller {
-  static targets = ["ownerButton", "deleteButton", "approveButton", "actionApproveControls"]
+  static targets = ["ownerButton", "deleteButton", "approveButton", "actionApproveControls", "reviewButton", "replaceButton"]
+
+  get _commentId() {
+    return this.element.dataset.commentId
+  }
+
+  get _isStreaming() {
+    return window._streamingCommentIds.has(this._commentId)
+  }
+
+  set _isStreaming(val) {
+    if (val) {
+      window._streamingCommentIds.add(this._commentId)
+    } else {
+      window._streamingCommentIds.delete(this._commentId)
+    }
+  }
+
+  // --- Streaming state helpers ---
+
+  get _isAiComment() {
+    return this.element.dataset.aiUser === 'true'
+  }
+
+  // Server explicitly marked this broadcast as streaming (true) or done (false).
+  // When no streaming local is provided the partial defaults to "false".
+  get _serverStreaming() {
+    return this.element.dataset.streaming === 'true'
+  }
+
+  // The server sent streaming: false explicitly — stream just ended.
+  get _serverStreamingDone() {
+    return this.element.dataset.streaming === 'false'
+  }
+
+  // Should we treat this comment as currently streaming?
+  // True when the server says so OR the global Set remembers it,
+  // but NOT if the server explicitly signalled completion.
+  _shouldStream(text) {
+    if (!this._isAiComment || !text.trim()) return false
+    if (this._serverStreamingDone) return false
+    return this._isStreaming || this._serverStreaming
+  }
+
+  _appendStreamingCursor(el) {
+    const cursor = document.createElement('span')
+    cursor.className = 'streaming-cursor'
+    cursor.textContent = '▍'
+    let target = el
+    while (target.lastElementChild && target.lastElementChild.tagName !== 'BR') {
+      target = target.lastElementChild
+    }
+    target.appendChild(cursor)
+  }
+
+  _resetStreamingTimeout() {
+    if (this._streamingTimeout) clearTimeout(this._streamingTimeout)
+    this._streamingTimeout = setTimeout(() => {
+      const currentEl = this.element?.querySelector('.comment-content')
+      if (currentEl) {
+        currentEl.dataset.rendering = 'true'
+        try {
+          currentEl.classList.remove('streaming')
+          const c = currentEl.querySelector('.streaming-cursor')
+          if (c) c.remove()
+        } finally {
+          requestAnimationFrame(() => { currentEl.dataset.rendering = 'false' })
+        }
+      }
+      this._isStreaming = false
+    }, 10000)
+  }
+
+  _cleanupStreaming() {
+    this._isStreaming = false
+    if (this._streamingTimeout) {
+      clearTimeout(this._streamingTimeout)
+      this._streamingTimeout = null
+    }
+  }
 
   connect() {
+    if (!this._streamingTimeout) this._streamingTimeout = null
     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'
+      contentElement.dataset.rendering = 'true'
+      try {
+        const text = contentElement.textContent || ''
+        if (this._isAiComment && text.trim() === '...') {
+          // Streaming placeholder — show animated dots
+          this._isStreaming = true
+          contentElement.innerHTML = '<span class="streaming-dots"><span>.</span><span>.</span><span>.</span></span>'
+          contentElement.classList.add('streaming')
+        } else if (this._shouldStream(text)) {
+          // Streaming content arrived — render markdown with cursor
+          this._isStreaming = true
+          contentElement.innerHTML = renderCommentMarkdown(text)
+          this._appendStreamingCursor(contentElement)
+          contentElement.classList.add('streaming')
+          this._resetStreamingTimeout()
+        } else {
+          contentElement.innerHTML = renderCommentMarkdown(text)
+          contentElement.classList.remove('streaming')
+          if (this._isStreaming) this._cleanupStreaming()
+        }
+        contentElement.dataset.rendered = 'true'
+      } finally {
+        requestAnimationFrame(() => { contentElement.dataset.rendering = 'false' })
+      }
     }
 
+    // Text selection quote support
+    this.handleMouseUp = this.handleMouseUp.bind(this)
+    this.element.addEventListener('mouseup', this.handleMouseUp)
+
+    // Bound handlers for review/replace buttons (stored for cleanup)
+    this._boundReviewClick = this._onReviewClick.bind(this)
+    this._boundReplaceClick = this._onReplaceClick.bind(this)
+
     this.currentUserId = document.body.dataset.currentUserId
     const commentAuthorId = this.element.dataset.userId
     const creativeOwnerId = this.element.dataset.creativeOwnerId
@@ -108,6 +222,197 @@ export default class extends Controller {
     }
   }
 
+  disconnect() {
+    if (this._streamingTimeout) {
+      clearTimeout(this._streamingTimeout)
+      this._streamingTimeout = null
+    }
+    this.element.removeEventListener('mouseup', this.handleMouseUp)
+    this._removeSelectionChangeListener()
+    this.hideReviewPopup()
+    if (this._reviewPopupEl) {
+      this._reviewPopupEl.remove()
+      this._reviewPopupEl = null
+      this._reviewPopup = null
+    }
+  }
+
+  handleMouseUp() {
+    // Small delay to let selection finalize
+    requestAnimationFrame(() => {
+      this.hideReviewPopup()
+
+      const selection = window.getSelection()
+      if (!selection || selection.isCollapsed) return
+
+      const selectedText = selection.toString().trim()
+      if (!selectedText) return
+
+      // Ensure selection is within this comment's content
+      const contentEl = this.element.querySelector('.comment-content')
+      if (!contentEl) return
+
+      const range = selection.getRangeAt(0)
+      if (!contentEl.contains(range.commonAncestorContainer)) return
+
+      // Show review popup below the selection using CommonPopup
+      const rect = range.getBoundingClientRect()
+      this.showReviewPopup(rect, selectedText)
+    })
+  }
+
+  showReviewPopup(anchorRect, selectedText) {
+    // Create or reuse popup element
+    if (!this._reviewPopupEl) {
+      const el = document.createElement('div')
+      el.className = 'common-popup comment-review-popup'
+      el.style.display = 'none'
+      el.style.padding = '0.3em'
+
+      const list = document.createElement('ul')
+      list.style.listStyle = 'none'
+      list.style.margin = '0'
+      list.style.padding = '0'
+      el.appendChild(list)
+
+      const commentsPopup = this.element.closest('#comments-popup')
+      if (commentsPopup) {
+        commentsPopup.appendChild(el)
+      } else {
+        document.body.appendChild(el)
+      }
+      this._reviewPopupEl = el
+    }
+
+    const reviewLabel = this.element.closest('#comments-popup')?.dataset?.reviewButtonText || 'Review'
+
+    this._reviewPopup = new CommonPopup(this._reviewPopupEl, {
+      onSelect: () => {
+        const commentId = this.element.dataset.commentId
+        const formController = this.findFormController()
+        if (formController) {
+          formController.quoteComment(commentId, selectedText)
+        }
+        window.getSelection().removeAllRanges()
+        this.hideReviewPopup()
+      },
+      renderItem: () => reviewLabel,
+    })
+
+    // Position below the selection end
+    const belowRect = {
+      left: anchorRect.left,
+      right: anchorRect.right,
+      top: anchorRect.bottom,
+      bottom: anchorRect.bottom + 4,
+      width: anchorRect.width,
+    }
+
+    this._reviewPopup.setItems([{ label: reviewLabel }])
+    this._reviewPopup.showAt(belowRect)
+  }
+
+  hideReviewPopup() {
+    if (this._reviewPopup) {
+      this._reviewPopup.hide()
+    }
+  }
+
+  findFormController() {
+    const popup = this.element.closest('#comments-popup')
+    if (!popup) return null
+    return this.application.getControllerForElementAndIdentifier(popup, 'comments--form')
+  }
+
+  reviewButtonTargetConnected(button) {
+    button.addEventListener('click', this._boundReviewClick)
+  }
+
+  reviewButtonTargetDisconnected(button) {
+    button.removeEventListener('click', this._boundReviewClick)
+  }
+
+  replaceButtonTargetConnected(button) {
+    button.addEventListener('click', this._boundReplaceClick)
+    // Only listen for selectionchange when a replace button exists
+    this._addSelectionChangeListener()
+  }
+
+  replaceButtonTargetDisconnected(button) {
+    button.removeEventListener('click', this._boundReplaceClick)
+    if (!this.hasReplaceButtonTarget) {
+      this._removeSelectionChangeListener()
+    }
+  }
+
+  _onReviewClick(event) {
+    event.preventDefault()
+    event.stopPropagation()
+    const commentId = this.element.dataset.commentId
+    const contentEl = this.element.querySelector('.comment-content')
+    const fullText = contentEl ? contentEl.textContent.trim() : ''
+    const formController = this.findFormController()
+    if (formController && fullText) {
+      formController.quoteComment(commentId, fullText)
+    }
+  }
+
+  _onReplaceClick(event) {
+    event.preventDefault()
+    event.stopPropagation()
+    const selectedText = this._getSelectedTextInContent()
+    if (!selectedText) return
+
+    const commentId = this.element.dataset.commentId
+    const formController = this.findFormController()
+    if (formController) {
+      formController.quoteComment(commentId, selectedText)
+    }
+    window.getSelection().removeAllRanges()
+    this._updateReplaceButton()
+  }
+
+  _getSelectedTextInContent() {
+    const selection = window.getSelection()
+    if (!selection || selection.isCollapsed) return null
+
+    const text = selection.toString().trim()
+    if (!text) return null
+
+    const contentEl = this.element.querySelector('.comment-content')
+    if (!contentEl) return null
+
+    const range = selection.getRangeAt(0)
+    if (!contentEl.contains(range.commonAncestorContainer)) return null
+
+    return text
+  }
+
+  _addSelectionChangeListener() {
+    if (this._selectionChangeActive) return
+    this._handleSelectionChange = this._handleSelectionChange.bind(this)
+    document.addEventListener('selectionchange', this._handleSelectionChange)
+    this._selectionChangeActive = true
+  }
+
+  _removeSelectionChangeListener() {
+    if (!this._selectionChangeActive) return
+    document.removeEventListener('selectionchange', this._handleSelectionChange)
+    this._selectionChangeActive = false
+  }
+
+  _handleSelectionChange() {
+    this._updateReplaceButton()
+  }
+
+  _updateReplaceButton() {
+    if (!this.hasReplaceButtonTarget) return
+    const hasSelection = !!this._getSelectedTextInContent()
+    this.replaceButtonTargets.forEach((btn) => {
+      btn.disabled = !hasSelection
+    })
+  }
+
   updateReactionsUI(reactionsData) {
     let reactionsContainer = this.element.querySelector('.comment-reactions')