feat(messages): word diff of the last edit on "(edited)" hover (#144)
CI / Build & Quality Checks (push) Successful in 1m40s
CI / Docker image build & smoke test (push) Skipped
CI / Secret scan (gitleaks) (push) Successful in 8s
CI / Trigger Desktop Build (push) Successful in 7s
CI / Playwright smoke (e2e) (push) Canceled after 1m37s

Hovering or focusing "(edited)" shows a tooltip with only the most recent
edit as a word diff — removed words struck, added words bold — plus a
+N/−N summary. Clicking still opens the full history viewer. On touch, a
long-press on the label shows the same diff as a popout (a plain tap opens
the viewer; the message's own long-press action sheet is not triggered).

utils/wordDiff.ts is a unit-tested LCS over words that ignores whitespace-
only changes and gives up past 400 words. Only plain-text bodies are
diffed; formatted edits fall back to the viewer.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA
This commit is contained in:
2026-09-19 23:34:38 -04:00
co-authored by Claude Opus 5
parent 4fe9c87010
commit 2bdb2eb4cb
7 changed files with 353 additions and 22 deletions
+13 -2
View File
@@ -26,6 +26,8 @@ import {
VerificationRequestContent,
VideoContent,
} from './message';
import { DiffToken } from '../utils/wordDiff';
import { EditDiffContext } from './message/content/EditDiffContext';
import { UrlPreviewCard, UrlPreviewHolder } from './url-preview';
import { Image, MediaControl, Video } from './media';
import { ImageViewer } from './image-viewer';
@@ -74,8 +76,17 @@ type RenderMessageContentProps = {
onOpenImageViewer?: () => void;
/** [Gitea #159] The event, for the undecryptable placeholder's reason + retry. */
mEvent?: MatrixEvent;
/** [Gitea #144] Word diff of the last edit, shown on "(edited)" hover. */
editDiff?: DiffToken[];
};
export function RenderMessageContent({
export function RenderMessageContent({ editDiff, ...props }: RenderMessageContentProps) {
return (
<EditDiffContext.Provider value={editDiff}>
<RenderMessageContentBody {...props} />
</EditDiffContext.Provider>
);
}
function RenderMessageContentBody({
displayName,
msgType,
ts,
@@ -91,7 +102,7 @@ export function RenderMessageContent({
eventId,
onOpenImageViewer,
mEvent,
}: RenderMessageContentProps) {
}: Omit<RenderMessageContentProps, 'editDiff'>) {
const renderUrlsPreview = (urls: string[]) => {
// Cap previews per message so a link-dump doesn't spawn dozens of preview
// fetches + iframes at once. De-dupe first: a message linking the same URL