feature: move buttons to contentright

packages/diff-view/src/parts/GetContentRightDom/GetContentRightDom.ts

@@ -1,4 +1,5 @@
 import { VirtualDomElements, type VirtualDomNode } from '@lvce-editor/virtual-dom-worker'
+import type { DiffMode } from '../DiffViewState/DiffViewState.ts'
 import type { InlineDiffChange } from '../InlineDiffChange/InlineDiffChange.ts'
 import type { TokenizedLine } from '../TokenizedLine/TokenizedLine.ts'
 import type { VisibleLine } from '../VisibleLine/VisibleLine.ts'
@@ -7,11 +8,13 @@ import * as ClassNames from '../ClassNames/ClassNames.ts'
 import * as DomEventListenerFunctions from '../DomEventListenerFunctions/DomEventListenerFunctions.ts'
 import { getContentDom } from '../GetContentDom/GetContentDom.ts'
 import { getCursorDom } from '../GetCursorDom/GetCursorDom.ts'
+import { getDiffEditorButtonsDom } from '../GetDiffEditorButtonsDom/GetDiffEditorButtonsDom.ts'
 import * as InputName from '../InputName/InputName.ts'
 
 interface GetContentRightDomOptions {
   readonly allowedLinkSchemes?: readonly string[]
   readonly contentRight: string
+  readonly diffMode?: DiffMode
   readonly editable?: boolean
   readonly errorCodeFrame?: string
   readonly errorMessage?: string
@@ -22,6 +25,7 @@ interface GetContentRightDomOptions {
   readonly lineNumbers?: boolean
   readonly maxLineY?: number
   readonly minLineY?: number
+  readonly showWhitespace?: boolean
   readonly tokenizedLines?: readonly TokenizedLine[]
   readonly totalLineCount?: number
   readonly visibleLines?: readonly VisibleLine[]
@@ -46,6 +50,7 @@ const getInputWrapperDom = (inputValue: string): readonly VirtualDomNode[] => [
 export const getContentRightDom = ({
   allowedLinkSchemes = defaultAllowedLinkSchemes,
   contentRight,
+  diffMode = 'side-by-side',
   editable = false,
   errorCodeFrame = '',
   errorMessage = '',
@@ -56,6 +61,7 @@ export const getContentRightDom = ({
   lineNumbers = true,
   maxLineY,
   minLineY = 0,
+  showWhitespace = false,
   tokenizedLines = [],
   totalLineCount,
   visibleLines = [],
@@ -80,26 +86,30 @@ export const getContentRightDom = ({
     visibleLines,
     itemHeight,
   )
+  const buttonsDom = getDiffEditorButtonsDom(diffMode, showWhitespace)
   if (!editable || errorMessage) {
     const [content, ...rest] = contentDom
     return [
       {
         ...content,
+        childCount: content.childCount + 1,
         onClick: DomEventListenerFunctions.HandleClickRightSide,
       },
       ...rest,
+      ...buttonsDom,
     ]
   }
   const [content, ...rest] = contentDom
   const cursorDom = getCursorDom()
   return [
     {
       ...content,
-      childCount: content.childCount + 2,
+      childCount: content.childCount + 3,
       onClick: DomEventListenerFunctions.HandleClickRightSide,
     },
     ...rest,
     ...cursorDom,
     ...getInputWrapperDom(inputValue),
+    ...buttonsDom,
   ]
 }

packages/diff-view/src/parts/GetDiffEditorVirtualDom/GetDiffEditorVirtualDom.ts

@@ -5,7 +5,6 @@ import * as ClassNames from '../ClassNames/ClassNames.ts'
 import * as DomEventListenerFunctions from '../DomEventListenerFunctions/DomEventListenerFunctions.ts'
 import { getContentLeftDom } from '../GetContentLeftDom/GetContentLeftDom.ts'
 import { getContentRightDom } from '../GetContentRightDom/GetContentRightDom.ts'
-import { getDiffEditorButtonsDom } from '../GetDiffEditorButtonsDom/GetDiffEditorButtonsDom.ts'
 import { getDiffSearchHeaderDom } from '../GetDiffSearchHeaderDom/GetDiffSearchHeaderDom.ts'
 import { getImageLeftDom } from '../GetImageLeftDom/GetImageLeftDom.ts'
 import { getImageRightDom } from '../GetImageRightDom/GetImageRightDom.ts'
@@ -36,18 +35,16 @@ const getDiffEditorWithSearchDom = (
   sashLayoutClass: string,
   leftDom: readonly VirtualDomNode[],
   rightDom: readonly VirtualDomNode[],
-  buttonsDom: readonly VirtualDomNode[],
   scrollBarDom: readonly VirtualDomNode[],
   scrollBarActive: boolean,
 ): readonly VirtualDomNode[] => {
   return [
-    getRootDom(scrollBarActive ? 4 : 3, `${ClassNames.Viewlet} ${ClassNames.DiffEditor} ${diffEditorLayoutClass} ${ClassNames.DiffEditorWithSearch}`),
+    getRootDom(scrollBarActive ? 3 : 2, `${ClassNames.Viewlet} ${ClassNames.DiffEditor} ${diffEditorLayoutClass} ${ClassNames.DiffEditorWithSearch}`),
     ...getDiffSearchHeaderDom(),
     getEditorBodyDom(diffEditorLayoutClass),
     ...leftDom,
     getSashDom(sashLayoutClass),
     ...rightDom,
-    ...buttonsDom,
     ...scrollBarDom,
   ]
 }
@@ -57,16 +54,14 @@ const getDiffEditorWithoutSearchDom = (
   sashLayoutClass: string,
   leftDom: readonly VirtualDomNode[],
   rightDom: readonly VirtualDomNode[],
-  buttonsDom: readonly VirtualDomNode[],
   scrollBarDom: readonly VirtualDomNode[],
   scrollBarActive: boolean,
 ): readonly VirtualDomNode[] => {
   return [
-    getRootDom(scrollBarActive ? 5 : 4, `${ClassNames.Viewlet} ${ClassNames.DiffEditor} ${diffEditorLayoutClass}`),
+    getRootDom(scrollBarActive ? 4 : 3, `${ClassNames.Viewlet} ${ClassNames.DiffEditor} ${diffEditorLayoutClass}`),
     ...leftDom,
     getSashDom(sashLayoutClass),
     ...rightDom,
-    ...buttonsDom,
     ...scrollBarDom,
   ]
 }
@@ -134,10 +129,11 @@ export const getDiffEditorVirtualDom = (state: DiffViewState): readonly VirtualD
         })
   const rightDom =
     renderModeRight === 'image' && !errorRightMessage
-      ? getImageRightDom(uriRight, imageSrcRight)
+      ? getImageRightDom(uriRight, imageSrcRight, diffMode, showWhitespace)
       : getContentRightDom({
           allowedLinkSchemes,
           contentRight,
+          diffMode,
           editable: true,
           errorCodeFrame: errorRightCodeFrame,
           errorMessage: errorRightMessage,
@@ -148,14 +144,14 @@ export const getDiffEditorVirtualDom = (state: DiffViewState): readonly VirtualD
           lineNumbers: showLineNumbers,
           maxLineY,
           minLineY,
+          showWhitespace,
           tokenizedLines: tokenizedLinesRight,
           totalLineCount: totalLineCountRight,
           visibleLines: visibleLinesRight,
         })
   const scrollBarDom = scrollBarActive ? getScrollBarDom() : []
-  const buttonsDom = getDiffEditorButtonsDom(diffMode, showWhitespace)
   if (searchVisible) {
-    return getDiffEditorWithSearchDom(diffEditorLayoutClass, sashLayoutClass, leftDom, rightDom, buttonsDom, scrollBarDom, scrollBarActive)
+    return getDiffEditorWithSearchDom(diffEditorLayoutClass, sashLayoutClass, leftDom, rightDom, scrollBarDom, scrollBarActive)
   }
-  return getDiffEditorWithoutSearchDom(diffEditorLayoutClass, sashLayoutClass, leftDom, rightDom, buttonsDom, scrollBarDom, scrollBarActive)
+  return getDiffEditorWithoutSearchDom(diffEditorLayoutClass, sashLayoutClass, leftDom, rightDom, scrollBarDom, scrollBarActive)
 }

packages/diff-view/src/parts/GetImageRightDom/GetImageRightDom.ts

@@ -1,12 +1,14 @@
 import type { VirtualDomNode } from '@lvce-editor/virtual-dom-worker'
 import { VirtualDomElements } from '@lvce-editor/virtual-dom-worker'
+import type { DiffMode } from '../DiffViewState/DiffViewState.ts'
 import * as ClassNames from '../ClassNames/ClassNames.ts'
 import * as DomEventListenerFunctions from '../DomEventListenerFunctions/DomEventListenerFunctions.ts'
+import { getDiffEditorButtonsDom } from '../GetDiffEditorButtonsDom/GetDiffEditorButtonsDom.ts'
 
-export const getImageRightDom = (uriRight: string, imageSrc: string): readonly VirtualDomNode[] => {
+export const getImageRightDom = (uriRight: string, imageSrc: string, diffMode: DiffMode, showWhitespace: boolean): readonly VirtualDomNode[] => {
   return [
     {
-      childCount: 1,
+      childCount: 2,
       className: `${ClassNames.DiffEditorContent} ${ClassNames.DiffEditorContentRight}`,
       onClick: DomEventListenerFunctions.HandleClickRightSide,
       type: VirtualDomElements.Div,
@@ -23,5 +25,6 @@ export const getImageRightDom = (uriRight: string, imageSrc: string): readonly V
       src: imageSrc,
       type: VirtualDomElements.Img,
     },
+    ...getDiffEditorButtonsDom(diffMode, showWhitespace),
   ]
 }

packages/diff-view/src/parts/RenderEventListeners/RenderEventListeners.ts

@@ -20,6 +20,7 @@ export const renderEventListeners = (): readonly DomEventListener[] => {
     {
       name: DomEventListenersFunctions.HandleClickRightSide,
       params: ['handleClickRightSide', EventExpression.ClientX, EventExpression.ClientY],
+      preventDefault: true,
     },
     {
       name: DomEventListenersFunctions.HandleMouseOverAt,

packages/diff-view/test/GetContentRightDom.test.ts

@@ -4,10 +4,11 @@
 import * as ClassNames from '../src/parts/ClassNames/ClassNames.ts'
 import * as DomEventListenerFunctions from '../src/parts/DomEventListenerFunctions/DomEventListenerFunctions.ts'
 import { getContentRightDom } from '../src/parts/GetContentRightDom/GetContentRightDom.ts'
+import { getDiffEditorButtonsDom } from '../src/parts/GetDiffEditorButtonsDom/GetDiffEditorButtonsDom.ts'
 import * as InputName from '../src/parts/InputName/InputName.ts'
 import { VisibleLineType } from '../src/parts/VisibleLine/VisibleLine.ts'
 
 test.skip('getContentRightDom renders each right line inside an EditorRow', (): void => {
   const result = getContentRightDom({
     allowedLinkSchemes: defaultAllowedLinkSchemes,
     contentRight: 'after-content\nsecond-line',
@@ -19,7 +20,7 @@
 
   expect(result).toEqual([
     {
-      childCount: 2,
+      childCount: 3,
       className: `${ClassNames.DiffEditorContent} ${ClassNames.DiffEditorContentRight}`,
       onClick: DomEventListenerFunctions.HandleClickRightSide,
       type: VirtualDomElements.Div,
@@ -58,10 +59,11 @@
       type: VirtualDomElements.Div,
     },
     text('second-line'),
+    ...getDiffEditorButtonsDom('side-by-side', false),
   ])
 })
 
-test.skip('getContentRightDom renders cursor for editable right content', (): void => {
+test('getContentRightDom renders cursor for editable right content', (): void => {
   const result = getContentRightDom({
     allowedLinkSchemes: defaultAllowedLinkSchemes,
     contentRight: 'after-content',
@@ -81,7 +83,7 @@
 
   expect(result).toEqual([
     {
-      childCount: 4,
+      childCount: 5,
       className: `${ClassNames.DiffEditorContent} ${ClassNames.DiffEditorContentRight}`,
       onClick: DomEventListenerFunctions.HandleClickRightSide,
       type: VirtualDomElements.Div,
@@ -128,21 +130,21 @@
       className: ClassNames.DiffEditorInput,
       name: InputName.DiffEditorInput,
       onInput: DomEventListenerFunctions.HandleInput,
-      type: VirtualDomElements.Input,
+      type: VirtualDomElements.TextArea,
       value: '',
     },
+    ...getDiffEditorButtonsDom('side-by-side', false),
   ])
 })
-
-test.skip('getContentRightDom renders load errors when available', (): void => {
+test('getContentRightDom renders load errors when available', (): void => {
   const result = getContentRightDom({
     contentRight: '',
     errorMessage: 'permission denied',
   })
 
   expect(result).toEqual([
     {
-      childCount: 1,
+      childCount: 2,
       className: `${ClassNames.DiffEditorContent} ${ClassNames.DiffEditorContentRight} ${ClassNames.DiffEditorError}`,
       onClick: DomEventListenerFunctions.HandleClickRightSide,
       type: VirtualDomElements.Div,
@@ -153,10 +155,11 @@
       type: VirtualDomElements.Div,
     },
     text('permission denied'),
+    ...getDiffEditorButtonsDom('side-by-side', false),
   ])
 })
 
 test.skip('getContentRightDom renders paired deletion and insertion on the same row', (): void => {
   const result = getContentRightDom({
     allowedLinkSchemes: defaultAllowedLinkSchemes,
     contentRight: 'shared-line\nadded-line',
@@ -173,7 +176,7 @@
 
   expect(result).toEqual([
     {
-      childCount: 2,
+      childCount: 3,
       className: `${ClassNames.DiffEditorContent} ${ClassNames.DiffEditorContentRight}`,
       onClick: DomEventListenerFunctions.HandleClickRightSide,
       type: VirtualDomElements.Div,
@@ -212,10 +215,11 @@
       type: VirtualDomElements.Div,
     },
     text('added-line'),
+    ...getDiffEditorButtonsDom('side-by-side', false),
   ])
 })
 
 test.skip('getContentRightDom renders syntax-highlighted token spans', (): void => {
   const result = getContentRightDom({
     allowedLinkSchemes: defaultAllowedLinkSchemes,
     contentRight: 'const answer = 1',
@@ -229,7 +233,7 @@
 
   expect(result).toEqual([
     {
-      childCount: 2,
+      childCount: 3,
       className: `${ClassNames.DiffEditorContent} ${ClassNames.DiffEditorContentRight}`,
       onClick: DomEventListenerFunctions.HandleClickRightSide,
       type: VirtualDomElements.Div,
@@ -267,5 +271,6 @@
       type: VirtualDomElements.Span,
     },
     text(' answer = 1'),
+    ...getDiffEditorButtonsDom('side-by-side', false),
   ])
 })