From 1eba6e93cce6d5270e10a2fd32550c8b8febfe3a Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Sat, 31 Jan 2026 19:03:26 +0000
Subject: [PATCH] WIP 3

---
 .../components/history-diff.module.css        | 25 +++----------------
 .../components/history-editor.tsx             | 11 ++++++++
 2 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/apps/client/src/features/page-history/components/history-diff.module.css b/apps/client/src/features/page-history/components/history-diff.module.css
index b79b0a60..3219853f 100644
--- a/apps/client/src/features/page-history/components/history-diff.module.css
+++ b/apps/client/src/features/page-history/components/history-diff.module.css
@@ -26,26 +26,9 @@
 }
 
 :global(.history-diff-deleted) {
-  position: relative;
-  z-index: 0;
   text-decoration: line-through;
-  opacity: 0.9;
-}
-
-:global(.history-diff-deleted)::before {
-  content: "";
-  position: absolute;
-  z-index: -1;
-  inset: 0;
-  left: rem(-12px);
-  right: 0;
-  border-top: rem(1px) dashed
-    light-dark(var(--mantine-color-red-4), var(--mantine-color-red-6));
-  border-right: rem(1px) dashed
-    light-dark(var(--mantine-color-red-4), var(--mantine-color-red-6));
-  border-bottom: rem(1px) dashed
-    light-dark(var(--mantine-color-red-4), var(--mantine-color-red-6));
-  background: light-dark(var(--mantine-color-red-0), rgba(255, 0, 0, 0.08));
-  border-radius: rem(6px);
-  pointer-events: none;
+  color: light-dark(var(--mantine-color-red-7), var(--mantine-color-red-4));
+  background: light-dark(var(--mantine-color-red-0), rgba(255, 0, 0, 0.1));
+  border-radius: rem(2px);
+  padding: 0 rem(2px);
 }
diff --git a/apps/client/src/features/page-history/components/history-editor.tsx b/apps/client/src/features/page-history/components/history-editor.tsx
index 022a8b2f..6aea8859 100644
--- a/apps/client/src/features/page-history/components/history-editor.tsx
+++ b/apps/client/src/features/page-history/components/history-editor.tsx
@@ -73,6 +73,17 @@ export function HistoryEditor({
             addedCount += 1;
           }
           if (change.toA > change.fromA) {
+            const deletedText = docOld.textBetween(change.fromA, change.toA, "");
+            if (deletedText) {
+              decorations.push(
+                Decoration.widget(change.fromB, () => {
+                  const span = document.createElement("span");
+                  span.className = "history-diff-deleted";
+                  span.textContent = deletedText;
+                  return span;
+                }),
+              );
+            }
             deletedCount += 1;
           }
         }