polygerrit-ui/app/elements/diff/gr-diff-markdown-viewer/gr-diff-markdown-viewer.ts - gerrit

/**

* @license

* SPDX-License-Identifier: Apache-2.0

*/

import {css, html, LitElement, nothing, PropertyValues} from 'lit';

import {customElement, property, query, state} from 'lit/decorators.js';

import {classMap} from 'lit/directives/class-map.js';

import {ifDefined} from 'lit/directives/if-defined.js';

import {when} from 'lit/directives/when.js';

import '../../shared/gr-button/gr-button';

import '../../shared/gr-icon/gr-icon';

import '../../shared/gr-comment-thread/gr-comment-thread';

import type {GrCommentThread} from '../../shared/gr-comment-thread/gr-comment-thread';

import {DiffInfo} from '../../../types/diff';

import {CommentSide, DiffViewMode, Side} from '../../../constants/constants';

import {

CommentThread,

DraftInfo,

EDIT,

PARENT,

PatchRange,

PatchSetNum,

RevisionPatchSetNum,

} from '../../../types/common';

import {sanitizeHtmlToFragment} from '../../../utils/inner-html-util';

import {resolve} from '../../../models/dependency';

import {browserModelToken} from '../../../models/browser/browser-model';

import {commentsModelToken} from '../../../models/comments/comments-model';

import {userModelToken} from '../../../models/user/user-model';

import {ChangeComments} from '../gr-comment-api/gr-comment-api';

import {subscribe} from '../../lit/subscription-controller';

import {createNew} from '../../../utils/comment-util';

import {

getParentIndex,

isAParent,

isMergeParent,

} from '../../../utils/patch-set-util';

import {assertIsDefined} from '../../../utils/common-util';

import {fire, fireAlert} from '../../../utils/event-util';

import {

AlignedDiffRow,

AlignedDiffRowWithThreads,

alignMarkdownTokens,

attachThreadsToRows,

getThreadDiffSide,

parseMarkdownBlocks,

reconstructFileContent,

} from './markdown-diff-util';

@customElement('gr-diff-markdown-viewer')

export class GrDiffMarkdownViewer extends LitElement {

@property({type: Object}) diff?: DiffInfo;

@property({type: String}) path?: string;

@property({type: Object}) patchRange?: PatchRange;

@property({type: Array}) threads?: CommentThread[];

@property({type: String}) viewMode: DiffViewMode = DiffViewMode.SIDE_BY_SIDE;

@state() alignedRows: AlignedDiffRow[] = [];

@state() private internalThreads: CommentThread[] = [];

@state() private changeComments?: ChangeComments;

@property({type: Boolean}) loggedIn = false;

@query('.selection-action-box')

private selectionActionBox?: HTMLElement;

private selectionActionBoxVisible = false;

private selectionBoxPositionBelow = false;

private selectionBoxTop = 0;

private selectionBoxLeft = 0;

private selectedSide?: Side;

private selectedLine?: number;

private hoveredSide?: Side;

private hoveredLine?: number;

private readonly getBrowserModel = resolve(this, browserModelToken);

private readonly getCommentsModel = resolve(this, commentsModelToken);

private readonly getUserModel = resolve(this, userModelToken);

constructor() {

super();

subscribe(

this,

() => this.getBrowserModel().diffViewMode$,

mode => {

if (mode) this.viewMode = mode;

}

);

subscribe(

this,

() => this.getCommentsModel().changeComments$,

changeComments => {

this.changeComments = changeComments;

this.updateInternalThreads();

}

);

subscribe(

this,

() => this.getUserModel().loggedIn$,

loggedIn => {

this.loggedIn = loggedIn;

}

);

}

override connectedCallback() {

super.connectedCallback();

document.addEventListener('selectionchange', this.handleSelectionChange);

window.addEventListener('keydown', this.handleKeyDown);

}

override disconnectedCallback() {

super.disconnectedCallback();

document.removeEventListener('selectionchange', this.handleSelectionChange);

window.removeEventListener('keydown', this.handleKeyDown);

}

get effectiveThreads(): CommentThread[] {

return this.threads ?? this.internalThreads;

}

get filePath(): string | undefined {

return this.path ?? this.diff?.meta_b?.name ?? this.diff?.meta_a?.name;

}

private updateInternalThreads() {

if (!this.changeComments || !this.patchRange || !this.filePath) return;

this.internalThreads = this.changeComments.getThreadsBySideForFile(

{path: this.filePath},

this.patchRange

);

}

static override get styles() {

return [

css`

:host {

display: block;

position: relative;

background-color: var(--view-background-color, #ffffff);

color: var(--primary-text-color, #202124);

font-family: var(--font-family, Roboto, sans-serif);

font-size: var(--font-size-normal, 14px);

line-height: var(--line-height-normal, 1.5);

}

.file-level-threads {

padding: var(--spacing-m, 12px) var(--spacing-l, 16px);

background-color: var(--background-color-secondary, #f8f9fa);

border-bottom: 1px solid var(--border-color, #e0e0e0);

display: flex;

flex-direction: column;

gap: var(--spacing-s, 8px);

}

.file-level-title {

font-size: var(--font-size-small, 12px);

font-weight: var(--font-weight-bold, 600);

color: var(--deemphasized-text-color, #5f6368);

text-transform: uppercase;

}

.column-headers {

display: grid;

grid-template-columns: 1fr 1fr;

column-gap: var(--spacing-l, 16px);

padding: var(--spacing-xs, 4px) var(--spacing-m, 12px);

border-bottom: 1px solid var(--border-color, #e0e0e0);

background-color: var(--background-color-secondary, #f8f9fa);

color: var(--deemphasized-text-color, #5f6368);

font-size: var(--font-size-small, 12px);

font-weight: var(--font-weight-bold, 600);

text-transform: uppercase;

letter-spacing: 0.5px;

}

.diff-grid {

display: grid;

grid-template-columns: 1fr 1fr;

column-gap: var(--spacing-l, 16px);

row-gap: var(--spacing-m, 12px);

padding: var(--spacing-m, 12px);

}

.diff-cell {

position: relative;

min-width: 0;

overflow-wrap: break-word;

padding: var(--spacing-xxs, 2px) var(--spacing-s, 8px);

padding-right: 90px;

border-left: 3px solid transparent;

box-sizing: border-box;

display: flex;

flex-direction: column;

}

.diff-cell.empty {

background-color: var(--diff-blank-background-color, transparent);

min-height: 24px;

}

.diff-cell.added,

.diff-cell.modified-right {

border-left-color: var(--positive-green-text-color, #2da44e);

background-color: var(--light-add-highlight-color, #d8fed8);

border-radius: 0 4px 4px 0;

}

.diff-cell.deleted,

.diff-cell.modified-left {

border-left-color: var(--negative-red-text-color, #cf222e);

background-color: var(--light-remove-highlight-color, #ffebee);

border-radius: 0 4px 4px 0;

}

.unified-container {

box-sizing: border-box;

max-width: 100%;

padding: var(--spacing-m, 12px) var(--spacing-l, 16px);

}

.unified-block {

position: relative;

border-left: 3px solid transparent;

box-sizing: border-box;

margin-bottom: var(--spacing-s, 8px);

overflow-wrap: break-word;

padding: var(--spacing-xxs, 2px) var(--spacing-s, 8px);

padding-right: 90px;

display: flex;

flex-direction: column;

}

.unified-block.added {

border-left-color: var(--positive-green-text-color, #2da44e);

background-color: var(--light-add-highlight-color, #d8fed8);

border-radius: 0 4px 4px 0;

}

.unified-block.deleted {

border-left-color: var(--negative-red-text-color, #cf222e);

background-color: var(--light-remove-highlight-color, #ffebee);

border-radius: 0 4px 4px 0;

}

.unified-block.unchanged {

border-left-color: transparent;

}

.cell-action-bar {

position: absolute;

top: 4px;

right: 8px;

z-index: 10;

pointer-events: none;

}

.add-comment-btn {

pointer-events: auto;

opacity: 0;

visibility: hidden;

transition: opacity 0.15s ease-in-out, background-color 0.15s;

background-color: var(--background-color-primary, #ffffff);

color: var(--primary-text-color, #202124);

border: 1px solid var(--border-color, #dadce0);

border-radius: 16px;

padding: 2px 8px;

font-size: var(--font-size-small, 12px);

font-weight: var(--font-weight-medium, 500);

box-shadow: var(--elevation-level-1, 0 1px 3px rgba(60, 64, 67, 0.3));

display: inline-flex;

align-items: center;

gap: 4px;

cursor: pointer;

user-select: none;

line-height: 18px;

}

.add-comment-btn gr-icon {

--gr-icon-size: 16px;

color: var(--primary-text-color, #202124);

}

.diff-cell:hover .add-comment-btn,

.unified-block:hover .add-comment-btn {

opacity: 1;

visibility: visible;

}

.add-comment-btn:hover {

background: linear-gradient(

var(--hover-background-color, rgba(161, 194, 250, 0.2)),

var(--hover-background-color, rgba(161, 194, 250, 0.2))

),

var(--background-color-primary, #ffffff);

box-shadow: var(--elevation-level-2, 0 2px 6px rgba(60, 64, 67, 0.3));

}

.add-comment-btn:active {

background: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)),

var(--background-color-primary, #ffffff);

}

.selection-action-box {

position: absolute;

z-index: 500;

transform: translate(-50%, -100%);

margin-top: -6px;

}

.selection-action-box.below {

transform: translate(-50%, 0);

margin-top: 6px;

}

.selection-comment-btn {

background-color: var(--background-color-primary, #ffffff);

color: var(--primary-text-color, #202124);

border: 1px solid var(--border-color, #dadce0);

border-radius: 16px;

padding: 4px 12px;

font-size: var(--font-size-small, 12px);

font-weight: var(--font-weight-medium, 500);

box-shadow: var(--elevation-level-2, 0 2px 6px rgba(60, 64, 67, 0.3));

display: inline-flex;

align-items: center;

gap: 6px;

cursor: pointer;

white-space: nowrap;

user-select: none;

}

.selection-comment-btn:hover {

background: linear-gradient(

var(--hover-background-color, rgba(161, 194, 250, 0.2)),

var(--hover-background-color, rgba(161, 194, 250, 0.2))

),

var(--background-color-primary, #ffffff);

box-shadow: var(--elevation-level-3, 0 4px 8px rgba(60, 64, 67, 0.3));

}

.selection-comment-btn:active {

background: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)),

var(--background-color-primary, #ffffff);

}

.selection-comment-btn gr-icon {

--gr-icon-size: 16px;

color: var(--primary-text-color, #202124);

}

.comment-thread {

display: block;

max-width: 100%;

}

.cell-content {

min-width: 0;

}

.threads-container {

margin-top: var(--spacing-s, 8px);

padding-top: var(--spacing-xs, 4px);

display: flex;

flex-direction: column;

gap: var(--spacing-s, 8px);

}

.diff-highlight-add,

ins {

background-color: var(--dark-add-highlight-color, #aaf2aa);

text-decoration: none;

border-radius: 2px;

padding: 1px 2px;

}

.diff-highlight-del,

del {

background-color: var(--dark-remove-highlight-color, #ffcdd2);

text-decoration: line-through;

border-radius: 2px;

padding: 1px 2px;

}

.diff-cell.deleted code,

.diff-cell.modified-left code,

.unified-block.deleted code,

del code {

background-color: rgba(0, 0, 0, 0.05);

}

.diff-cell.added code,

.diff-cell.modified-right code,

.unified-block.added code,

ins code {

background-color: rgba(0, 0, 0, 0.05);

}

.diff-cell.deleted pre,

.diff-cell.modified-left pre,

.unified-block.deleted pre {

background-color: rgba(0, 0, 0, 0.03);

border-color: rgba(207, 34, 46, 0.2);

}

.diff-cell.added pre,

.diff-cell.modified-right pre,

.unified-block.added pre {

background-color: rgba(0, 0, 0, 0.03);

border-color: rgba(46, 160, 67, 0.2);

}

pre .diff-highlight-del {

display: inline-block;

width: 100%;

box-sizing: border-box;

}

pre .diff-highlight-add {

display: inline-block;

width: 100%;

box-sizing: border-box;

}

.diff-cell.deleted th,

.diff-cell.modified-left th,

.unified-block.deleted th {

background-color: rgba(0, 0, 0, 0.04);

}

h1,

h2,

h3,

h4,

h5,

h6 {

margin-top: 0;

margin-bottom: var(--spacing-xs, 4px);

color: var(--primary-text-color, #202124);

}

h1 {

font-size: 1.6em;

border-bottom: 1px solid var(--border-color, #e0e0e0);

padding-bottom: 4px;

}

h2 {

font-size: 1.3em;

border-bottom: 1px solid var(--border-color, #e0e0e0);

padding-bottom: 4px;

}

h3 {

font-size: 1.15em;

}

p {

margin-top: 0;

margin-bottom: var(--spacing-xs, 4px);

}

code {

font-family: var(--monospace-font-family, 'Roboto Mono', monospace);

font-size: var(--font-size-code, 12px);

background-color: var(--background-color-secondary, #f1f3f4);

padding: 2px 4px;

border-radius: 3px;

}

pre {

background-color: var(--background-color-secondary, #f8f9fa);

border: 1px solid var(--border-color, #e0e0e0);

border-radius: 4px;

padding: var(--spacing-s, 8px);

overflow-x: auto;

margin: 0;

}

pre code {

background-color: transparent;

padding: 0;

font-size: var(--font-size-code, 12px);

display: block;

white-space: pre;

}

blockquote {

border-left: 4px solid var(--border-color, #d0d7de);

margin: 0 0 var(--spacing-s, 8px) 0;

padding: 0 var(--spacing-m, 12px);

color: var(--deemphasized-text-color, #5f6368);

}

ul,

ol {

margin-top: 0;

margin-bottom: var(--spacing-xs, 4px);

padding-left: var(--spacing-xl, 24px);

}

table {

border-collapse: collapse;

width: 100%;

margin-bottom: var(--spacing-s, 8px);

}

th,

td {

border: 1px solid var(--border-color, #e0e0e0);

padding: 6px 12px;

text-align: left;

}

th {

background-color: var(--background-color-secondary, #f8f9fa);

font-weight: var(--font-weight-bold, 600);

}

`,

];

}

override willUpdate(changedProperties: PropertyValues) {

if (changedProperties.has('diff')) {

this.recomputeAlignedRows();

}

if (

changedProperties.has('changeComments') ||

changedProperties.has('patchRange') ||

changedProperties.has('path')

) {

this.updateInternalThreads();

}

private recomputeAlignedRows() {

if (!this.diff) {

this.alignedRows = [];

return;

}

const textA = reconstructFileContent(this.diff, Side.LEFT);

const textB = reconstructFileContent(this.diff, Side.RIGHT);

const tokensA = parseMarkdownBlocks(textA);

const tokensB = parseMarkdownBlocks(textB);

this.alignedRows = alignMarkdownTokens(tokensA, tokensB);

}

private canCommentOnPatchSetNum(patchNum: PatchSetNum) {

if (!this.loggedIn) {

fire(this, 'show-auth-required', {});

return false;

}

if (!this.patchRange) {

fireAlert(this, 'Cannot create comment. patchRange undefined.');

return false;

}

const isEdit = patchNum === EDIT;

const isEditBase = patchNum === PARENT && this.patchRange.patchNum === EDIT;

if (isEdit) {

fireAlert(this, 'You cannot comment on an edit.');

return false;

}

if (isEditBase) {

fireAlert(this, 'You cannot comment on the base patchset of an edit.');

return false;

}

return true;

}

private computeParentIndex() {

if (!this.patchRange) return null;

return isMergeParent(this.patchRange.basePatchNum)

? getParentIndex(this.patchRange.basePatchNum)

: null;

}

createComment(side: Side, lineNum?: number) {

if (!this.patchRange) {

fireAlert(this, 'Cannot create comment. patchRange undefined.');

return;

}

const patchNum =

side === Side.LEFT && !isAParent(this.patchRange.basePatchNum)

? this.patchRange.basePatchNum

: this.patchRange.patchNum;

const commentSide =

side === Side.LEFT && isAParent(this.patchRange.basePatchNum)

? CommentSide.PARENT

: CommentSide.REVISION;

if (!this.canCommentOnPatchSetNum(patchNum)) return;

const path = this.filePath;

assertIsDefined(path, 'path');

const basePath = this.diff?.meta_a?.name;

const effectivePath =

basePath && side === Side.LEFT && commentSide === CommentSide.REVISION

? basePath

: path;

let effectiveLine = lineNum;

if (effectiveLine === undefined) {

const fallbackRow = this.alignedRows.find(r =>

side === Side.LEFT

? r.leftStartLine !== undefined

: r.rightStartLine !== undefined

);

effectiveLine =

side === Side.LEFT

? fallbackRow?.leftStartLine

: fallbackRow?.rightStartLine ?? 1;

}

const parentIndex = this.computeParentIndex();

const draft: DraftInfo = {

...createNew('', true),

patch_set: patchNum as RevisionPatchSetNum,

side: commentSide,

parent: parentIndex ?? undefined,

path: effectivePath,

line: typeof effectiveLine === 'number' ? effectiveLine : undefined,

};

this.getCommentsModel().addNewDraft(draft);

}

private handleCellMouseEnter(side: Side, lineNum?: number) {

this.hoveredSide = side;

this.hoveredLine = lineNum;

}

private handleCellMouseLeave() {

this.hoveredSide = undefined;

this.hoveredLine = undefined;

}

private clearSelection() {

(this.renderRoot as ShadowRoot)?.getSelection?.()?.removeAllRanges();

window.getSelection()?.removeAllRanges();

this.selectedSide = undefined;

this.selectedLine = undefined;

}

hasActiveSelection(): boolean {

const selection = this.getActiveSelection();

if (!selection || selection.isCollapsed || !selection.rangeCount) {

return false;

}

const range = selection.getRangeAt(0);

const container = range.commonAncestorContainer;

const elementNode =

container.nodeType === Node.TEXT_NODE

? container.parentElement

: (container as Element);

return !!(

elementNode &&

this.renderRoot.contains(elementNode) &&

elementNode.closest('.diff-cell, .unified-block')

);

}

private getActiveSelection(): Selection | null {

const shadowSelection = (this.renderRoot as ShadowRoot)?.getSelection?.();

if (

shadowSelection &&

!shadowSelection.isCollapsed &&

shadowSelection.rangeCount > 0

) {

return shadowSelection;

}

const docSelection = window.getSelection();

if (

docSelection &&

!docSelection.isCollapsed &&

docSelection.rangeCount > 0

) {

return docSelection;

}

return null;

}

private handleSelectionChange = () => {

const selection = this.getActiveSelection();

if (!selection || selection.isCollapsed || !selection.rangeCount) {

if (this.selectionActionBoxVisible) {

this.selectionActionBoxVisible = false;

if (this.selectionActionBox) {

this.selectionActionBox.style.display = 'none';

}

return;

}

const range = selection.getRangeAt(0);

const container = range.commonAncestorContainer;

const elementNode =

container.nodeType === Node.TEXT_NODE

? container.parentElement

: (container as Element);

if (!elementNode || !this.renderRoot.contains(elementNode)) {

if (this.selectionActionBoxVisible) {

this.selectionActionBoxVisible = false;

if (this.selectionActionBox) {

this.selectionActionBox.style.display = 'none';

}

return;

}

const cell = elementNode.closest('.diff-cell, .unified-block');

if (!cell) {

if (this.selectionActionBoxVisible) {

this.selectionActionBoxVisible = false;

if (this.selectionActionBox) {

this.selectionActionBox.style.display = 'none';

}

return;

}

const rangeRect = range.getBoundingClientRect();

const hostRect = this.getBoundingClientRect();

const spaceAbove = rangeRect.top - hostRect.top;

if (spaceAbove < 40) {

this.selectionBoxTop = rangeRect.bottom - hostRect.top + this.scrollTop;

this.selectionBoxPositionBelow = true;

} else {

this.selectionBoxTop = rangeRect.top - hostRect.top + this.scrollTop;

this.selectionBoxPositionBelow = false;

}

this.selectionBoxLeft =

rangeRect.left - hostRect.left + rangeRect.width / 2 + this.scrollLeft;

const sideStr = cell.getAttribute('data-side');

this.selectedSide = sideStr === 'left' ? Side.LEFT : Side.RIGHT;

const lineStr = cell.getAttribute('data-line');

this.selectedLine = lineStr ? Number(lineStr) : undefined;

this.selectionActionBoxVisible = true;

if (this.selectionActionBox) {

this.selectionActionBox.style.display = 'block';

this.selectionActionBox.style.top = `${this.selectionBoxTop}px`;

this.selectionActionBox.style.left = `${this.selectionBoxLeft}px`;

this.selectionActionBox.classList.toggle(

'below',

this.selectionBoxPositionBelow

);

}

};

private handleSelectionCommentClick(e: Event) {

e.stopPropagation();

if (this.selectedSide !== undefined) {

this.createComment(this.selectedSide, this.selectedLine);

this.selectionActionBoxVisible = false;

if (this.selectionActionBox) {

this.selectionActionBox.style.display = 'none';

}

this.clearSelection();

}

private handleKeyDown = (e: KeyboardEvent) => {

if (e.key === 'c' || e.key === 'C') {

if (e.ctrlKey || e.metaKey || e.altKey) {

return;

}

const target = e.composedPath()[0] as HTMLElement;

if (

target?.tagName === 'INPUT' ||

target?.tagName === 'TEXTAREA' ||

target?.tagName === 'GR-TEXTAREA' ||

target?.isContentEditable

) {

return;

}

if (this.hasActiveSelection() || this.hoveredSide !== undefined) {

e.preventDefault();

e.stopPropagation();

this.createCommentFromSelectionOrHover();

}

};

createCommentFromSelectionOrHover() {

const selection = this.getActiveSelection();

if (selection && !selection.isCollapsed && selection.rangeCount > 0) {

const range = selection.getRangeAt(0);

const container = range.commonAncestorContainer;

const elementNode =

container.nodeType === Node.TEXT_NODE

? container.parentElement

: (container as Element);

if (elementNode && this.renderRoot.contains(elementNode)) {

const cell = elementNode.closest('.diff-cell, .unified-block');

if (cell) {

const sideStr = cell.getAttribute('data-side');

const side = sideStr === 'left' ? Side.LEFT : Side.RIGHT;

const lineStr = cell.getAttribute('data-line');

const line = lineStr ? Number(lineStr) : undefined;

this.createComment(side, line);

this.selectionActionBoxVisible = false;

if (this.selectionActionBox) {

this.selectionActionBox.style.display = 'none';

}

this.clearSelection();

return;

}

if (this.selectedSide !== undefined) {

this.createComment(this.selectedSide, this.selectedLine);

this.selectionActionBoxVisible = false;

if (this.selectionActionBox) {

this.selectionActionBox.style.display = 'none';

}

this.clearSelection();

return;

}

if (this.hoveredSide !== undefined) {

this.createComment(this.hoveredSide, this.hoveredLine);

return;

}

const firstRow = this.alignedRows.find(r => r.rightStartLine !== undefined);

if (firstRow) {

this.createComment(Side.RIGHT, firstRow.rightStartLine);

} else {

this.createComment(Side.RIGHT, 1);

}

async autoSaveDrafts(): Promise<void> {

const threadElements = Array.from(

this.shadowRoot?.querySelectorAll<GrCommentThread>('gr-comment-thread') ??

[]

);

await Promise.all(threadElements.map(thread => thread.autoSave()));

}

override render() {

if (this.viewMode === DiffViewMode.UNIFIED) {

return this.renderUnifiedView();

}

return this.renderSideBySideView();

}

private renderThread(thread: CommentThread, side?: Side) {

const diffSide = side ?? getThreadDiffSide(thread, this.patchRange);

return html`

<gr-comment-thread

class="comment-thread"

.rootId=${thread.rootId}

.thread=${thread}

.showPatchset=${false}

.showPortedComment=${!!thread.ported}

diff-side=${diffSide}

line-num=${thread.line ?? 'FILE'}

>

</gr-comment-thread>

`;

}

private renderCommentButton(side: Side, lineNum?: number) {

if (lineNum === undefined) return nothing;

return html`

<button

type="button"

class="add-comment-btn"

title="Add comment (line ${lineNum})"

aria-label="Add comment (line ${lineNum})"

@click=${(e: Event) => {

e.stopPropagation();

this.createComment(side, lineNum);

}}

>

<gr-icon icon="add_comment" filled></gr-icon>

<span>Comment</span>

</button>

</div>

`;

}

private renderSelectionActionBox() {

return html`

<div

class="selection-action-box ${this.selectionBoxPositionBelow

? 'below'

: ''}"

style="display: ${this.selectionActionBoxVisible

? 'block'

: 'none'}; top: ${this.selectionBoxTop}px; left: ${this

.selectionBoxLeft}px;"

>

<button

type="button"

class="selection-comment-btn"

@mousedown=${(e: MouseEvent) => {

e.preventDefault();

}}

@click=${this.handleSelectionCommentClick}

>

<gr-icon icon="add_comment" filled></gr-icon>

<span>Comment (c)</span>

</button>

</div>

`;

}

private renderSideBySideView() {

const {rowsWithThreads, fileLevelThreads} = attachThreadsToRows(

this.alignedRows,

this.effectiveThreads,

this.patchRange

);

return html`

${when(

fileLevelThreads.length > 0,

() => html`

<div class="file-level-title">File Comments</div>

${fileLevelThreads.map(t => this.renderThread(t))}

</div>

`

)}

<div class="column-header right">Revision</div>

</div>

${rowsWithThreads.map(row => this.renderRow(row))}

</div>

${this.renderSelectionActionBox()}

`;

}

private renderUnifiedView() {

const {rowsWithThreads, fileLevelThreads} = attachThreadsToRows(

this.alignedRows,

this.effectiveThreads,

this.patchRange

);

return html`

${when(

fileLevelThreads.length > 0,

() => html`

<div class="file-level-title">File Comments</div>

${fileLevelThreads.map(t => this.renderThread(t))}

</div>

`

)}

<div

class="unified-container"

role="region"

aria-label="Rich Markdown Diff"

>

${rowsWithThreads.map(row => this.renderUnifiedRow(row))}

</div>

${this.renderSelectionActionBox()}

`;

}

private renderUnifiedRow(row: AlignedDiffRowWithThreads) {

if (row.status === 'unchanged') {

const allThreads = [...row.leftThreads, ...row.rightThreads];

return html`

<div

class="unified-block unchanged"

data-side="right"

data-line=${ifDefined(row.rightStartLine)}

@mouseenter=${() =>

this.handleCellMouseEnter(Side.RIGHT, row.rightStartLine)}

@mouseleave=${() => this.handleCellMouseLeave()}

>

${this.renderCommentButton(Side.RIGHT, row.rightStartLine)}

${sanitizeHtmlToFragment(row.leftHtml ?? row.rightHtml ?? '')}

</div>

${when(

allThreads.length > 0,

() => html`

${allThreads.map(t => this.renderThread(t))}

</div>

`

)}

</div>

`;

}

if (row.status === 'deleted') {

return html`

<div

class="unified-block deleted"

data-side="left"

data-line=${ifDefined(row.leftStartLine)}

@mouseenter=${() =>

this.handleCellMouseEnter(Side.LEFT, row.leftStartLine)}

@mouseleave=${() => this.handleCellMouseLeave()}

>

${this.renderCommentButton(Side.LEFT, row.leftStartLine)}

${sanitizeHtmlToFragment(row.leftHtml!)}

</div>

${when(

row.leftThreads.length > 0,

() => html`

${row.leftThreads.map(t => this.renderThread(t, Side.LEFT))}

</div>

`

)}

</div>

`;

}

if (row.status === 'added') {

return html`

<div

class="unified-block added"

data-side="right"

data-line=${ifDefined(row.rightStartLine)}

@mouseenter=${() =>

this.handleCellMouseEnter(Side.RIGHT, row.rightStartLine)}

@mouseleave=${() => this.handleCellMouseLeave()}

>

${this.renderCommentButton(Side.RIGHT, row.rightStartLine)}

${sanitizeHtmlToFragment(row.rightHtml!)}

</div>

${when(

row.rightThreads.length > 0,

() => html`

${row.rightThreads.map(t => this.renderThread(t, Side.RIGHT))}

</div>

`

)}

</div>

`;

}

// modified: render deleted (base) then added (revision)

return html`

<div

class="unified-block deleted"

data-side="left"

data-line=${ifDefined(row.leftStartLine)}

@mouseenter=${() =>

this.handleCellMouseEnter(Side.LEFT, row.leftStartLine)}

@mouseleave=${() => this.handleCellMouseLeave()}

>

${this.renderCommentButton(Side.LEFT, row.leftStartLine)}

<div class="cell-content">${sanitizeHtmlToFragment(row.leftHtml!)}</div>

${when(

row.leftThreads.length > 0,

() => html`

${row.leftThreads.map(t => this.renderThread(t, Side.LEFT))}

</div>

`

)}

</div>

<div

class="unified-block added"

data-side="right"

data-line=${ifDefined(row.rightStartLine)}

@mouseenter=${() =>

this.handleCellMouseEnter(Side.RIGHT, row.rightStartLine)}

@mouseleave=${() => this.handleCellMouseLeave()}

>

${this.renderCommentButton(Side.RIGHT, row.rightStartLine)}

${sanitizeHtmlToFragment(row.rightHtml!)}

</div>

${when(

row.rightThreads.length > 0,

() => html`

${row.rightThreads.map(t => this.renderThread(t, Side.RIGHT))}

</div>

`

)}

</div>

`;

}

private renderRow(row: AlignedDiffRowWithThreads) {

return html` ${this.renderLeftCell(row)} ${this.renderRightCell(row)} `;

}

private renderLeftCell(row: AlignedDiffRowWithThreads) {

const isDeleted = row.status === 'deleted';

const isModified = row.status === 'modified';

const isEmpty = row.status === 'added' || !row.leftHtml;

const classes = {

'diff-cell': true,

left: true,

deleted: isDeleted,

'modified-left': isModified,

empty: isEmpty,

};

return html`

<div

class=${classMap(classes)}

data-side="left"

data-line=${ifDefined(row.leftStartLine)}

@mouseenter=${() =>

!isEmpty && this.handleCellMouseEnter(Side.LEFT, row.leftStartLine)}

@mouseleave=${() => this.handleCellMouseLeave()}

>

${when(!isEmpty, () =>

this.renderCommentButton(Side.LEFT, row.leftStartLine)

)}

${when(!isEmpty, () => sanitizeHtmlToFragment(row.leftHtml!))}

</div>

${when(

row.leftThreads.length > 0,

() => html`

${row.leftThreads.map(t => this.renderThread(t, Side.LEFT))}

</div>

`

)}

</div>

`;

}

private renderRightCell(row: AlignedDiffRowWithThreads) {

const isAdded = row.status === 'added';

const isModified = row.status === 'modified';

const isEmpty = row.status === 'deleted' || !row.rightHtml;

const classes = {

'diff-cell': true,

right: true,

added: isAdded,

'modified-right': isModified,

empty: isEmpty,

};

return html`

<div

class=${classMap(classes)}

data-side="right"

data-line=${ifDefined(row.rightStartLine)}

@mouseenter=${() =>

!isEmpty && this.handleCellMouseEnter(Side.RIGHT, row.rightStartLine)}

@mouseleave=${() => this.handleCellMouseLeave()}

>

${when(!isEmpty, () =>

this.renderCommentButton(Side.RIGHT, row.rightStartLine)

)}

${when(!isEmpty, () => sanitizeHtmlToFragment(row.rightHtml!))}

</div>

${when(

row.rightThreads.length > 0,

() => html`

${row.rightThreads.map(t => this.renderThread(t, Side.RIGHT))}

</div>

`

)}

</div>

`;

}

declare global {

interface HTMLElementTagNameMap {

'gr-diff-markdown-viewer': GrDiffMarkdownViewer;

}