collavre 0.20.3 → 0.22.0

data/app/controllers/concerns/collavre/comments/approval_actions.rb

@@ -4,22 +4,15 @@ module Collavre
       extend ActiveSupport::Concern
 
       def approve
+        # Claude Channel permission prompts reuse the approval comment UI but the
+        # tool runs inside the remote Claude Code process — never execute it
+        # server-side. Approving relays an "allow" decision to the suspended
+        # session instead of invoking the ActionExecutor.
+        return decide_claude_channel_permission(:allow) if @comment.claude_channel_permission?
+
         status = @comment.approval_status(Current.user)
         if status != :ok
-          error_key = case status
-          when :invalid_action_format then "collavre.comments.approve_invalid_format"
-          when :missing_action then "collavre.comments.approve_missing_action"
-          when :missing_approver then "collavre.comments.approve_missing_approver"
-          when :admin_required then "collavre.comments.approve_admin_required"
-          else "collavre.comments.approve_not_allowed"
-          end
-          http_status = case status
-          when :invalid_action_format, :missing_action, :missing_approver
-                          :unprocessable_entity
-          else
-                          :forbidden
-          end
-          render json: { error: I18n.t(error_key) }, status: http_status and return
+          render_approval_status_error(status) and return
         end
 
         begin
@@ -31,6 +24,17 @@ module Collavre
         end
       end
 
+      # Reject a Claude Channel tool-permission prompt. There is no native
+      # equivalent (the native approval UI has approve-only; an un-approved
+      # action is simply left pending), so deny is exclusive to these comments.
+      def deny
+        unless @comment.claude_channel_permission?
+          render json: { error: I18n.t("collavre.comments.approve_not_allowed") }, status: :forbidden and return
+        end
+
+        decide_claude_channel_permission(:deny)
+      end
+
       def update_action
         # Initial checks outside the lock
         executed_error = false
@@ -108,6 +112,45 @@ module Collavre
       rescue ::Comments::ActionValidator::ValidationError => e
         render json: { error: e.message }, status: :unprocessable_entity
       end
+
+      private
+
+      # Resolve a Claude Channel permission prompt: gate on the approver, record
+      # the decision atomically (idempotent against double-clicks), relay it to
+      # the suspended session, and re-render the now-decided comment.
+      def decide_claude_channel_permission(behavior)
+        status = @comment.approval_status(Current.user)
+        if status != :ok
+          render_approval_status_error(status) and return
+        end
+
+        begin
+          @comment.decide_claude_channel_permission!(behavior, by: Current.user)
+        rescue Comment::ClaudeChannelPermission::AlreadyDecided
+          render json: { error: I18n.t("collavre.comments.approve_already_executed") }, status: :unprocessable_entity and return
+        end
+
+        @comment.broadcast_claude_channel_permission_decision(behavior)
+        @comment = Comment.with_attached_images.includes(:comment_reactions, :comment_versions, :selected_version).find(@comment.id)
+        render partial: "collavre/comments/comment", locals: { comment: @comment, current_topic_id: current_topic_context }
+      end
+
+      def render_approval_status_error(status)
+        error_key = case status
+        when :invalid_action_format then "collavre.comments.approve_invalid_format"
+        when :missing_action then "collavre.comments.approve_missing_action"
+        when :missing_approver then "collavre.comments.approve_missing_approver"
+        when :admin_required then "collavre.comments.approve_admin_required"
+        else "collavre.comments.approve_not_allowed"
+        end
+        http_status = case status
+        when :invalid_action_format, :missing_action, :missing_approver
+                        :unprocessable_entity
+        else
+                        :forbidden
+        end
+        render json: { error: I18n.t(error_key) }, status: http_status
+      end
     end
   end
 end

data/app/helpers/collavre/comments_helper.rb

@@ -5,5 +5,12 @@ module Collavre
     rescue JSON::ParserError, TypeError
       comment.action.to_s
     end
+
+    def comment_action_markdown(comment)
+      parsed = JSON.parse(comment.action)
+      parsed["markdown"] if parsed.is_a?(Hash) && parsed["markdown"].present?
+    rescue JSON::ParserError, TypeError
+      nil
+    end
   end
 end

data/app/helpers/collavre/public_assets_helper.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Collavre
+  module PublicAssetsHelper
+    # Returns a URL for serving an ActiveStorage blob through the public-assets
+    # proxy. When PUBLIC_ASSETS_HOST is set (e.g. CloudFront domain) the URL is
+    # absolute; otherwise relative so the browser uses the current host.
+    def public_asset_url(blob)
+      path = "/public-assets/blobs/#{blob.signed_id}/#{blob.filename.sanitized}"
+      host = Collavre::IntegrationSettings.fetch(:public_assets_host)
+      host ? "#{host.chomp('/')}#{path}" : path
+    end
+  end
+end

data/app/javascript/components/InlineLexicalEditor.jsx

@@ -27,6 +27,7 @@ import {
   $getRoot,
   $getSelection,
   $isElementNode,
+  $isLineBreakNode,
   $isRangeSelection,
   $isTextNode,
   CAN_REDO_COMMAND,
@@ -47,9 +48,12 @@ import FileUploadPlugin, {
 } from "./plugins/image_upload_plugin"
 import { ImageNode } from "../lib/lexical/image_node"
 import { AttachmentNode } from "../lib/lexical/attachment_node"
+import { VideoNode } from "../lib/lexical/video_node"
 import AttachmentCleanupPlugin from "./plugins/attachment_cleanup_plugin"
 import MarkdownShortcutsPlugin from "./plugins/markdown_shortcuts_plugin"
 import { syncLexicalStyleAttributes } from "../lib/lexical/style_attributes"
+import { lexicalHtmlConfig, normalizeColoredContainers } from "../lib/lexical/color_import"
+import { minimizeContentHtml } from "../lib/lexical/minimize_html"
 import { updateResponsiveImages } from "../lib/responsive_images"
 
 const URL_MATCHERS = [
@@ -120,43 +124,6 @@ function InitialContentPlugin({ html }) {
   const [editor] = useLexicalComposerContext()
   const lastApplied = useRef(null)
 
-  const collectDomTextStyles = useCallback((container) => {
-    const styles = []
-    if (!container) return styles
-    const ownerDocument = container.ownerDocument || document
-    const walker = ownerDocument.createTreeWalker(container, NodeFilter.SHOW_TEXT)
-    let current = walker.nextNode()
-    while (current) {
-      const parent = current.parentElement
-      let styleText = parent?.getAttribute?.("style") || ""
-      const colorAttr = parent?.dataset?.lexicalColor
-      const bgAttr = parent?.dataset?.lexicalBackgroundColor
-
-      if ((!styleText || !styleText.trim()) && (colorAttr || bgAttr)) {
-        const declarations = []
-        if (colorAttr) declarations.push(`color: ${colorAttr}`)
-        if (bgAttr) declarations.push(`background-color: ${bgAttr}`)
-        styleText = declarations.join("; ")
-      } else {
-        const lower = styleText.toLowerCase()
-        const fragments = []
-        if (colorAttr && !lower.includes("color:")) {
-          fragments.push(`color: ${colorAttr}`)
-        }
-        if (bgAttr && !lower.includes("background-color:")) {
-          fragments.push(`background-color: ${bgAttr}`)
-        }
-        if (fragments.length > 0) {
-          styleText = `${styleText}${styleText.trim().endsWith(";") || !styleText.trim() ? "" : ";"} ${fragments.join("; ")}`.trim()
-        }
-      }
-
-      styles.push(styleText || "")
-      current = walker.nextNode()
-    }
-    return styles
-  }, [])
-
   useEffect(() => {
     if (lastApplied.current === html) return
     lastApplied.current = html
@@ -170,8 +137,15 @@ function InitialContentPlugin({ html }) {
       // No more .trix-content wrapper
       const container = doc.body
 
+      // Color / background-color are bound to text nodes during import by the
+      // colorAwareSpanImport html config (see lib/lexical/color_import). We no
+      // longer re-apply styles positionally after import, which used to drift
+      // onto the wrong text node whenever Lexical split or dropped text nodes.
       syncLexicalStyleAttributes(container)
-      const collectedStyles = collectDomTextStyles(container)
+      // Push color/background-color from non-span elements onto spans so the
+      // colorAwareSpanImport config binds it (the span importer can't see it
+      // otherwise). Must run after the sync above materializes data-lexical-*.
+      normalizeColoredContainers(container)
       const nodes = $generateNodesFromDOM(editor, container)
 
       // Filter out duplicate image nodes if any
@@ -192,24 +166,35 @@ function InitialContentPlugin({ html }) {
       })
 
       const appendedNodes = []
-      uniqueNodes.forEach((node) => {
-        if ($isTextNode(node)) {
-          const paragraph = $createParagraphNode()
-          paragraph.append(node)
-          root.append(paragraph)
-          appendedNodes.push(paragraph)
-          return
+      // Text nodes and inline elements (links, etc.) cannot live directly under
+      // the root. Minimized HTML stores a single line without its <p> wrapper, so
+      // a line like "Hello <strong>World</strong>" re-imports as several
+      // top-level inline nodes — group consecutive ones back into one paragraph
+      // so the line is not split apart.
+      let pendingParagraph = null
+      const flushPending = () => {
+        if (pendingParagraph) {
+          root.append(pendingParagraph)
+          appendedNodes.push(pendingParagraph)
+          pendingParagraph = null
         }
-
-        if ($isElementNode(node) && node.getType?.() === "paragraph") {
-          root.append(node)
-          appendedNodes.push(node)
+      }
+      uniqueNodes.forEach((node) => {
+        const isInlineLeaf =
+          $isTextNode(node) ||
+          $isLineBreakNode(node) ||
+          ($isElementNode(node) && node.isInline())
+        if (isInlineLeaf) {
+          if (!pendingParagraph) pendingParagraph = $createParagraphNode()
+          pendingParagraph.append(node)
           return
         }
 
+        flushPending()
         root.append(node)
         appendedNodes.push(node)
       })
+      flushPending()
 
       if (root.getChildrenSize() === 0) {
         const paragraph = $createParagraphNode()
@@ -217,12 +202,6 @@ function InitialContentPlugin({ html }) {
         appendedNodes.push(paragraph)
       }
 
-      const textNodes = root.getAllTextNodes()
-      textNodes.forEach((textNode, index) => {
-        const style = collectedStyles[index]
-        textNode.setStyle(style || "")
-      })
-
       let lastChild = root.getLastChild()
       while (
         lastChild &&
@@ -237,7 +216,7 @@ function InitialContentPlugin({ html }) {
         root.append($createParagraphNode())
       }
     })
-  }, [collectDomTextStyles, editor, html])
+  }, [editor, html])
 
   return null
 }
@@ -942,7 +921,9 @@ function EditorInner({
                 anchor.setAttribute("target", "_blank")
                 anchor.setAttribute("rel", "noopener")
               })
-              serialized = doc.body.innerHTML
+              // Strip Lexical's verbose markup (extra <div>, white-space spans,
+              // duplicate format wrappers, single-line <p>) before persisting.
+              serialized = minimizeContentHtml(doc.body.firstElementChild)
             })
             // No Trix wrapper
             onChange(serialized)
@@ -1019,12 +1000,14 @@ export default function InlineLexicalEditor({
         LinkNode,
         AutoLinkNode,
         ImageNode,
-        AttachmentNode
+        AttachmentNode,
+        VideoNode
       ],
       onError(error) {
         throw error
       },
-      theme
+      theme,
+      html: lexicalHtmlConfig
     }),
     []
   )

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

@@ -3,6 +3,7 @@ import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext
 import { $getRoot } from "lexical"
 import { $isImageNode } from "../../lib/lexical/image_node"
 import { $isAttachmentNode } from "../../lib/lexical/attachment_node"
+import { $isVideoNode } from "../../lib/lexical/video_node"
 
 function extractSignedIdFromUrl(url) {
     if (!url) return null
@@ -27,6 +28,8 @@ function getAllAttachmentUrls(editor) {
         function traverse(node) {
             if ($isImageNode(node)) {
                 urls.add(node.getSrc())
+            } else if ($isVideoNode(node)) {
+                urls.add(node.getSrc())
             } else if ($isAttachmentNode(node)) {
                 urls.add(node.getSrc())
             }

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

@@ -15,6 +15,7 @@ import {
 
 import { $createImageNode } from "../../lib/lexical/image_node"
 import { $createAttachmentNode } from "../../lib/lexical/attachment_node"
+import { $createVideoNode } from "../../lib/lexical/video_node"
 
 export const INSERT_IMAGE_COMMAND = createCommand("INSERT_IMAGE_COMMAND")
 export const INSERT_FILE_COMMAND = createCommand("INSERT_FILE_COMMAND")
@@ -25,6 +26,12 @@ function isImageFile(file) {
     return /\.(bmp|gif|jpe?g|png|svg|webp)$/i.test(file.name || "")
 }
 
+function isVideoFile(file) {
+    if (!file) return false
+    if (file.type) return /^video\//i.test(file.type)
+    return /\.(mp4|webm|mov|m4v)$/i.test(file.name || "")
+}
+
 export default function FileUploadPlugin({
     onUploadStateChange,
     directUploadUrl,
@@ -78,6 +85,11 @@ export default function FileUploadPlugin({
                             altText: attributes.filename,
                             maxWidth: 800 // Default max width
                         })
+                    } else if (isVideoFile(file)) {
+                        node = $createVideoNode({
+                            src: url,
+                            filename: attributes.filename
+                        })
                     } else {
                         node = $createAttachmentNode({
                             src: url,