🎨 Enhanced Visual Diff System for Card Description Changes (Resolves #7201)

[LexioJ]

🎯 Overview

This PR introduces a comprehensive visual diff system that transforms how card description changes are displayed in the activity feed, making it easier for users to understand what exactly changed in their content.

Resolves #7201

✨ Features

🔍 Smart Change Detection

• Intelligent Move Detection (🚚): Identifies when lines are relocated without modification
• Word-Level Modifications (✏️): Highlights specific word changes within lines using combined <del>/<ins> HTML tags for cleaner output
• Clean Additions/Deletions (✨/🗑️): Clear indicators for new or removed content
• Checkbox State Tracking: Special handling for task list changes with visual emoji transitions
• Quote Line Handling: Properly formats blockquotes with ❞ emoji (fixes > display issues)
• Callout Block Transitions: Shows emoji transitions for callout type changes (ℹ️→❗, ✅→⚠️, etc.)
• Code Block Indicators: Displays code block markers with ‹› symbol

🎭 Professional Visual Indicators

• 🚚 Move operations: "🚚5 Line content (from 2)"
• ✏️ Modifications with combined tags: "✏️3 Old contentNew content"
• ✨ Additions: "✨2 New content"
• 🗑️ Deletions: "🗑️4 Removed content"
• Special Line Types:
  • Checkboxes: "☑️→🔲" or "🔲→☑️"
  • Callouts: "ℹ️→❗" (info to error)
  • Quotes: "→❞ Quoted text"
  • Code blocks: "→‹›"

🧠 Intelligent Filtering & Optimization

• Filters out unchanged content to reduce noise
• Ignores empty line operations that don't add value
• Combines consecutive <ins> and <del> tags to reduce visual clutter
• Merges whitespace between tags for cleaner output (e.g., <del>text 1 text 2</del> instead of <del>text 1</del> <del>text 2</del>)
• Provides line number context for better orientation
• Activity feed compatible: Uses plain text formatting that displays correctly without HTML escaping issues

🛠 Technical Implementation

Core Components

1. DiffService: Service implementing LCS-based diff algorithm with multi-pass detection
2. Enhanced DeckProvider: Updated activity provider with dependency injection for DiffService
3. Smart Algorithm Flow:
   • Pass 1: Content analysis and operation extraction
   • Pass 2: Move detection (exact matches at different positions)
   • Pass 3: Modification detection with special line handling:
     • Checkbox state changes
     • Callout block type changes
     • Quote line changes (prevents > issues)
   • Pass 4: Word-level diff with combined HTML tags
   • Pass 5: Remaining operations (pure adds/deletes)

Algorithm Highlights

• Longest Common Subsequence (LCS) for optimal diff detection
• Similarity scoring system for intelligent operation pairing
• Multi-pass processing ensures accurate classification
• Tag combination logic merges consecutive <ins>/<del> tags and whitespace-only keep operations
• HTML-safe output compatible with Nextcloud's activity feed constraints

Activity Feed Compatibility Fixes

• Removed reliance on HTML rendering in activity feed
• Special handling for > character to prevent > display issues
• Quote lines detected and formatted with emoji before HTML escaping
• All special patterns handled with plain text + emoji approach

📸 Visual Examples

Word-Level Changes

Before: John Doe changed the description After: ✏️2 Update <del>deadline</del><ins>timeline</ins>

Checkbox Changes

Before: John Doe changed the description After: ✏️1 🔲→☑️ Task completed

Callout Block Changes

Before: John Doe changed the description After: ✏️5 ℹ️→❗

Quote Changes

Before: John Doe changed the description (displayed as > text) After: ✏️3 →❞ Important note

Combined Tags (Cleaner Output)

Before: ✏️5 <del>```</del><ins>-</ins><ins> </ins><ins>[x]</ins><ins> </ins><ins>ToDo</ins><ins> </ins><ins>1</ins> After: ✏️5 <del>```</del><ins>- [x] ToDo 1</ins>

🧪 Testing

Extensively tested with various scenarios:

• ✅ Simple line moves and modifications
• ✅ Complex multi-operation changes
• ✅ Checkbox state transitions
• ✅ Callout block type changes (info, success, warn, error)
• ✅ Quote line handling and > fix
• ✅ Code block markers
• ✅ Empty content and edge cases
• ✅ Large content blocks and performance
• ✅ HTML tag combination and whitespace merging
• ✅ Activity feed compatibility (no more escaped HTML)

🚀 Benefits

For Users

• Clear Understanding: See exactly what changed in card descriptions
• Reduced Cognitive Load: Filter out noise, focus on meaningful changes
• Better Context: Line numbers and move tracking provide better orientation
• Professional Presentation: Clean, modern emoji-based indicators
• Proper Quote Display: No more > characters in activity feed
• Cleaner Diff Output: Combined HTML tags reduce visual clutter

For Developers

• Maintainable Code: Clean service architecture with separation of concerns
• Dependency Injection: Proper DI container registration for DiffService
• Extensible Design: Easy to extend for other content types
• Performance Optimized: Efficient algorithms with minimal overhead
• Backward Compatible: Existing functionality remains unchanged
• Activity Feed Safe: Handles all HTML escaping edge cases

🔧 Configuration

No configuration required - the feature works out of the box with existing Deck installations.

📋 Changelog

Latest Updates

• Quote Line Handling: Fixed > display issues in activity feed for quote lines
• Combined HTML Tags: Reduced visual clutter by merging consecutive <ins>/<del> tags
• Whitespace Merging: Improved tag combination to include whitespace between add/remove operations
• Updated Emojis:
  • Error callout: 🔴 → ❗ (better matches UI)
  • Quote blocks: 💬 → ❞ (quotation mark)
  • Code blocks: 📝 → ‹› (guillemets)
• Dependency Injection: Proper DI registration for DiffService

Code Review Feedback Addressed

• [x] Copyright year updated to 2025
• [x] Checkbox pattern extracted as class constant
• [x] Unused parameters removed
• [x] DiffService properly registered in DI container
• [x] Consistent line numbering (shows actual line numbers from content)
• [x] Activity feed compatibility verified and fixed

🤝 Contributing

This implementation focuses on card description changes but the DiffService architecture is designed to be extensible for other content types in the future.

---

This PR represents a significant enhancement to user experience by providing clear, actionable insights into content changes while maintaining the professional quality expected from Nextcloud applications.

[putt1ck]

Looks interesting. Does it also address https://github.com/nextcloud/deck/issues/7058?

[LexioJ]

Looks interesting. Does it also address #7058?

Hard to tell as issue #7058 seems to discuss the overall appearance within the activity app and a wrong description notification when only comments were made.

This PR indeed addresses the need to reduce bloating the activity log, but only within the activity tab of the corresponding card. It focuses on the deck app itself.

[github-actions[bot]]

Hello there, Thank you so much for taking the time and effort to create a pull request to our Nextcloud project.

We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process.

Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6

Thank you for contributing to Nextcloud and we hope to hear from you soon!

(If you believe you should not receive this message, you can add yourself to the blocklist.)

[luka-nextcloud]

@LexioJ Let me know if this PR is ready for review.

[LexioJ]

@LexioJ Let me know if this PR is ready for review.

Actually it is, I addressed all your remarks, improved the code & style further and being excited if this proposal will find its way to Deck for imho everyone’s benefit

[LexioJ]

Hey @LexioJ, thank you for your contribution! Would it be possible to show insertions and additions with strikethrough and highlighted style respectively?

A bit like:

In this reference from notion, "cleaning" was deleted and the "shower" was added

It was my origin intent. But then I realized the limitations given by the activity app (which is responsible for rendering). I am using ins and del tags which underline or strikes-out on most common browsers.

[marcoambrosini]

@nickvergessen would there be a way to achieve something like this or to add support for it?

[nickvergessen]

It would need implementing/support in all mobile apps and desktop clients that show activity entries.

Could either use highlight https://github.com/nextcloud/server/blob/master/lib/public/RichObjectStrings/Definitions.php#L430

Or you add a new one, which has only the new text as name (which is shown when clients don't know the type) and has a diff parameter using ins and del. Then here in the deck app rendering we can show fancy html, and in generic clients we save the space and only show the new description?

[marcoambrosini]

Sounds like a good compromise to me! Or all other places could actually just link to the deck activity tab without detailing the exact changes. What do you think @LexioJ ?