d29bdfc10f
This replaces our JSON-based richtext diffing with HTML-based richtext diffing for lexical. It uses [this HTML diff library](https://github.com/Arman19941113/html-diff) that I then modified to handle diffing more complex elements like links, uploads and relationships. This makes it way easier to spot changes, replacing the lengthy Lexical JSON with a clean visual diff that shows exactly what's different. ## Before  ## After  
91 lines
2.0 KiB
SCSS
91 lines
2.0 KiB
SCSS
@import '../../../scss/styles.scss';
|
|
@import '../colors.scss';
|
|
|
|
@layer payload-default {
|
|
.lexical-diff__diff-container {
|
|
font-family: var(--font-serif);
|
|
font-size: base(0.8);
|
|
letter-spacing: 0.02em;
|
|
|
|
// Apply background color to parents that have children with diffs
|
|
p,
|
|
li,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
blockquote,
|
|
h6 {
|
|
&:has([data-match-type='create']) {
|
|
background-color: var(--diff-create-parent-bg);
|
|
color: var(--diff-create-parent-color);
|
|
}
|
|
|
|
&:has([data-match-type='delete']) {
|
|
background-color: var(--diff-delete-parent-bg);
|
|
color: var(--diff-delete-parent-color);
|
|
}
|
|
}
|
|
|
|
li::marker {
|
|
color: var(--theme-text);
|
|
}
|
|
|
|
[data-match-type='delete'] {
|
|
color: var(--diff-delete-pill-color);
|
|
text-decoration-color: var(--diff-delete-pill-color);
|
|
text-decoration-line: line-through;
|
|
background-color: var(--diff-delete-pill-bg);
|
|
border-radius: 4px;
|
|
text-decoration-thickness: 1px;
|
|
}
|
|
|
|
a[data-match-type='delete'] {
|
|
color: var(--diff-delete-link-color);
|
|
}
|
|
|
|
a[data-match-type='create']:not(img) {
|
|
// :not(img) required to increase specificity
|
|
color: var(--diff-create-link-color);
|
|
}
|
|
|
|
[data-match-type='create']:not(img) {
|
|
background-color: var(--diff-create-pill-bg);
|
|
color: var(--diff-create-pill-color);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.html-diff {
|
|
&-create-inline-wrapper,
|
|
&-delete-inline-wrapper {
|
|
display: inline-flex;
|
|
}
|
|
|
|
&-create-block-wrapper,
|
|
&-delete-block-wrapper {
|
|
display: flex;
|
|
}
|
|
|
|
&-create-inline-wrapper,
|
|
&-delete-inline-wrapper,
|
|
&-create-block-wrapper,
|
|
&-delete-block-wrapper {
|
|
position: relative;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
|
|
&::after {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
content: '';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|