From 53449901f7d9747058face17e5989d0973aa9761 Mon Sep 17 00:00:00 2001 From: Le Vivilet Date: Fri, 17 Jul 2026 23:12:05 +0000 Subject: [PATCH] fix: restore diff editor interactions --- .../parts/ApplyEditInput/ApplyEditInput.ts | 40 ++++++------------- .../GetCursorPositionFromCoordinates.ts | 6 ++- .../HandleClickRightSide.ts | 2 + .../src/parts/InputName/InputName.ts | 1 - .../LoadSyntaxHighlighting.ts | 6 ++- .../src/parts/RenderCss/RenderCss.ts | 14 +++---- .../RenderEventListeners.ts | 4 ++ .../src/parts/RenderValue/RenderValue.ts | 2 +- packages/diff-view/test/ApplyRender.test.ts | 2 +- packages/diff-view/test/EditCommands.test.ts | 8 ++++ .../GetCursorPositionFromCoordinates.test.ts | 16 ++++++++ packages/diff-view/test/HandleClickAt.test.ts | 2 + .../test/HandleClickRightSide.test.ts | 2 + packages/diff-view/test/HandleInput.test.ts | 8 ++++ .../test/RenderEventListeners.test.ts | 4 ++ .../diff-view/test/TypingAtCursor.test.ts | 35 ++++++++++++++++ .../diff.css-three-lines-added-light-theme.ts | 4 +- .../diff.syntax-highlighting-typescript.ts | 7 +--- packages/e2e/src/diff.text-cursor.ts | 5 ++- .../e2e/src/viewlet.diff-editor-scrolling.ts | 9 ++++- .../viewlet.diff-editor-typing-at-cursor.ts | 16 ++++---- 21 files changed, 133 insertions(+), 60 deletions(-) diff --git a/packages/diff-view/src/parts/ApplyEditInput/ApplyEditInput.ts b/packages/diff-view/src/parts/ApplyEditInput/ApplyEditInput.ts index eb74f772..be8ad1f9 100644 --- a/packages/diff-view/src/parts/ApplyEditInput/ApplyEditInput.ts +++ b/packages/diff-view/src/parts/ApplyEditInput/ApplyEditInput.ts @@ -8,41 +8,24 @@ import { getVisibleLinesState } from '../GetVisibleLinesState/GetVisibleLinesSta import * as InputSource from '../InputSource/InputSource.ts' import { loadSyntaxHighlighting } from '../LoadSyntaxHighlighting/LoadSyntaxHighlighting.ts' -const getBaseContentRight = (state: DiffViewState): string => { - if (state.inputValue && state.contentRight.startsWith(state.inputValue)) { - return state.contentRight.slice(state.inputValue.length) - } - return state.contentRight -} - export const applyEditInput = async (state: DiffViewState, inputValue: string): Promise => { if (inputValue === state.inputValue || state.renderModeRight !== 'text' || state.errorRightMessage || getLineCount(inputValue) > state.maxInputLines) { return state } const { totalLineCountLeft } = state - // compute base content without any previously-applied input buffer - const baseContent = getBaseContentRight(state) - - // derive insertion index from cursor position (row/column) - // compute full content index (including any previously-applied inputValue prefix) - const fullLines = state.contentRight ? state.contentRight.split('\n') : [''] - const fullCursorRow = Math.max(0, Math.min(state.rightEditor.cursorRowIndex, fullLines.length - 1)) - const fullCurrentLine = fullLines[fullCursorRow] ?? '' - const fullCursorCol = Math.max(0, Math.min(state.rightEditor.cursorColumnIndex, fullCurrentLine.length)) - let fullIndex = 0 - for (let i = 0; i < fullCursorRow; i++) { - fullIndex += (fullLines[i] ?? '').length + 1 - } - fullIndex += fullCursorCol - - const prefixLength = state.inputValue && state.contentRight.startsWith(state.inputValue) ? state.inputValue.length : 0 - const index = Math.max(0, fullIndex - prefixLength) - // base content split into lines is available if needed - - const before = baseContent.slice(0, index) - const after = baseContent.slice(index) + const { cursorColumnIndex, cursorRowIndex } = state.rightEditor + const precedingLines = state.contentRight.split('\n').slice(0, cursorRowIndex).join('\n') + const fullIndex = precedingLines.length + (cursorRowIndex === 0 ? 0 : 1) + cursorColumnIndex + const inputStart = Math.max(fullIndex - state.inputValue.length, 0) + const before = state.contentRight.slice(0, inputStart) + const after = state.contentRight.slice(fullIndex) const contentRight = `${before}${inputValue}${after}` + const linesBeforeCursor = `${before}${inputValue}`.split('\n') + const rightEditor = { + cursorColumnIndex: (linesBeforeCursor.at(-1) || '').length, + cursorRowIndex: linesBeforeCursor.length - 1, + } const totalLineCountRight = getLineCount(contentRight) const canComputeInlineDiff = state.renderModeLeft === 'text' && !state.errorLeftMessage const { inlineChanges, totalLineCount } = canComputeInlineDiff @@ -65,6 +48,7 @@ export const applyEditInput = async (state: DiffViewState, inputValue: string): inputValue, languageIdLeft: syntaxHighlightingState?.languageIdLeft || state.languageIdLeft, languageIdRight: syntaxHighlightingState?.languageIdRight || state.languageIdRight, + rightEditor, scrollBarBackgroundImage: getScrollBarBackgroundImage(inlineChanges, totalLineCount), tokenizedLinesLeft: syntaxHighlightingState?.tokenizedLinesLeft || state.tokenizedLinesLeft, tokenizedLinesRight: syntaxHighlightingState?.tokenizedLinesRight || [], diff --git a/packages/diff-view/src/parts/GetCursorPositionFromCoordinates/GetCursorPositionFromCoordinates.ts b/packages/diff-view/src/parts/GetCursorPositionFromCoordinates/GetCursorPositionFromCoordinates.ts index 3779173e..d7d1f56e 100644 --- a/packages/diff-view/src/parts/GetCursorPositionFromCoordinates/GetCursorPositionFromCoordinates.ts +++ b/packages/diff-view/src/parts/GetCursorPositionFromCoordinates/GetCursorPositionFromCoordinates.ts @@ -14,8 +14,10 @@ export const getCursorPositionFromCoordinates = (state: DiffViewState, clientX: const rawCursorColumnIndex = Math.floor((clientX - contentLeft - gutterWidth - CursorConstants.RowPaddingLeft) / charWidth) const rawCursorRowIndex = state.minLineY + Math.floor((clientY - contentTop) / CursorConstants.LineHeight) const maxCursorRowIndex = Math.max(state.totalLineCountRight - 1, 0) + const cursorRowIndex = Math.min(Math.max(rawCursorRowIndex, 0), maxCursorRowIndex) + const line = state.contentRight.split('\n')[cursorRowIndex] || '' return { - cursorColumnIndex: Math.max(rawCursorColumnIndex, 0), - cursorRowIndex: Math.min(Math.max(rawCursorRowIndex, 0), maxCursorRowIndex), + cursorColumnIndex: Math.min(Math.max(rawCursorColumnIndex, 0), line.length), + cursorRowIndex, } } diff --git a/packages/diff-view/src/parts/HandleClickRightSide/HandleClickRightSide.ts b/packages/diff-view/src/parts/HandleClickRightSide/HandleClickRightSide.ts index 44d47e7b..fe1f2c1f 100644 --- a/packages/diff-view/src/parts/HandleClickRightSide/HandleClickRightSide.ts +++ b/packages/diff-view/src/parts/HandleClickRightSide/HandleClickRightSide.ts @@ -9,6 +9,8 @@ export const handleClickRightSide = (state: DiffViewState, clientX: number, clie ...state, focus: DiffEditorWhenExpression.FocusDiffEditorText, focusVersion: state.focusVersion + 1, + inputSource: 0, + inputValue: '', } return setCursorPosition(focusedState, cursorPosition.cursorColumnIndex, cursorPosition.cursorRowIndex) } diff --git a/packages/diff-view/src/parts/InputName/InputName.ts b/packages/diff-view/src/parts/InputName/InputName.ts index e1554df5..ce920af7 100644 --- a/packages/diff-view/src/parts/InputName/InputName.ts +++ b/packages/diff-view/src/parts/InputName/InputName.ts @@ -1,2 +1 @@ export const DiffEditorInput = 'DiffEditorInput' -export const SourceControlInput = 'SourceControlInput' diff --git a/packages/diff-view/src/parts/LoadSyntaxHighlighting/LoadSyntaxHighlighting.ts b/packages/diff-view/src/parts/LoadSyntaxHighlighting/LoadSyntaxHighlighting.ts index 348480cb..5354c331 100644 --- a/packages/diff-view/src/parts/LoadSyntaxHighlighting/LoadSyntaxHighlighting.ts +++ b/packages/diff-view/src/parts/LoadSyntaxHighlighting/LoadSyntaxHighlighting.ts @@ -29,8 +29,10 @@ export const loadSyntaxHighlighting = async ( ): Promise => { try { const languages = await getLanguages(platform, assetDir) - const languageLeft = getSyntaxLanguage(uriLeft, languages) - const languageRight = getSyntaxLanguage(uriRight, languages) + const detectedLanguageLeft = getSyntaxLanguage(uriLeft, languages) + const detectedLanguageRight = getSyntaxLanguage(uriRight, languages) + const languageLeft = detectedLanguageLeft.languageId === 'unknown' ? detectedLanguageRight : detectedLanguageLeft + const languageRight = detectedLanguageRight const uniqueLanguages = getUniqueLanguages(languageLeft, languageRight) await Promise.all(uniqueLanguages.map(loadTokenizer)) const [tokenizedLinesLeft, tokenizedLinesRight] = await Promise.all([tokenizeCodeBlock(contentLeft, languageLeft), tokenizeCodeBlock(contentRight, languageRight)]) diff --git a/packages/diff-view/src/parts/RenderCss/RenderCss.ts b/packages/diff-view/src/parts/RenderCss/RenderCss.ts index 7b65c557..8f9bd19a 100644 --- a/packages/diff-view/src/parts/RenderCss/RenderCss.ts +++ b/packages/diff-view/src/parts/RenderCss/RenderCss.ts @@ -68,11 +68,11 @@ export const renderCss = (oldState: DiffViewState, newState: DiffViewState): any const rightCursorTop = (rightEditor.cursorRowIndex - minLineY) * CursorConstants.LineHeight const css = ` :root { - --DiffBackground: #0b0d10; - --DiffForeground: rgba(255, 255, 255, 0.88); - --DiffGutterBackground: #0f1218; - --DiffGutterForeground: rgba(255, 255, 255, 0.58); - --DiffSeparatorColor: rgba(255, 255, 255, 0.12); + --DiffBackground: var(--MainBackground); + --DiffForeground: var(--EditorForeground); + --DiffGutterBackground: var(--SideBarBackground); + --DiffGutterForeground: var(--SideBarForeground); + --DiffSeparatorColor: var(--SideBarBorder); --DiffMissingLineBackground: rgba(255, 255, 255, 0.035); --DiffDeletionBackground: rgba(248, 81, 73, 0.2); --DiffDeletionForeground: #ffb3ad; @@ -312,8 +312,8 @@ ${getEmptyLineNumberCss(newState.visibleLinesLeft, newState.visibleLinesRight, i z-index: 1; } -.EditorCursor { - background: red; +.DiffEditor .EditorCursor { + background: var(--EditorCursorBackground); height: var(--ItemHeight); left: var(--CursorLeft); position: absolute; diff --git a/packages/diff-view/src/parts/RenderEventListeners/RenderEventListeners.ts b/packages/diff-view/src/parts/RenderEventListeners/RenderEventListeners.ts index c8d6bf2c..60eecbbc 100644 --- a/packages/diff-view/src/parts/RenderEventListeners/RenderEventListeners.ts +++ b/packages/diff-view/src/parts/RenderEventListeners/RenderEventListeners.ts @@ -38,6 +38,10 @@ export const renderEventListeners = (): readonly DomEventListener[] => { params: ['handleBeforeInput', 'event.inputType', 'event.data'], preventDefault: true, }, + { + name: DomEventListenersFunctions.HandleInput, + params: ['handleInput', EventExpression.TargetValue], + }, { name: DomEventListenersFunctions.HandleContextMenu, params: ['handleContextMenu', EventExpression.Button, EventExpression.ClientX, EventExpression.ClientY], diff --git a/packages/diff-view/src/parts/RenderValue/RenderValue.ts b/packages/diff-view/src/parts/RenderValue/RenderValue.ts index 4c744882..bad92e24 100644 --- a/packages/diff-view/src/parts/RenderValue/RenderValue.ts +++ b/packages/diff-view/src/parts/RenderValue/RenderValue.ts @@ -4,5 +4,5 @@ import * as InputName from '../InputName/InputName.ts' export const renderValue = (oldState: DiffViewState, newState: DiffViewState): any => { const { id, inputValue } = newState - return [ViewletCommand.SetValueByName, id, InputName.SourceControlInput, inputValue] + return [ViewletCommand.SetValueByName, id, InputName.DiffEditorInput, inputValue] } diff --git a/packages/diff-view/test/ApplyRender.test.ts b/packages/diff-view/test/ApplyRender.test.ts index a187fcc5..d48296c7 100644 --- a/packages/diff-view/test/ApplyRender.test.ts +++ b/packages/diff-view/test/ApplyRender.test.ts @@ -18,6 +18,6 @@ test('applyRender runs renderers in diff order', (): void => { expect(result).toEqual([ [ViewletCommand.SetFocusContext, 2, 3], - [ViewletCommand.SetValueByName, 2, InputName.SourceControlInput, 'commit message'], + [ViewletCommand.SetValueByName, 2, InputName.DiffEditorInput, 'commit message'], ]) }) diff --git a/packages/diff-view/test/EditCommands.test.ts b/packages/diff-view/test/EditCommands.test.ts index 356908d1..c816c6ca 100644 --- a/packages/diff-view/test/EditCommands.test.ts +++ b/packages/diff-view/test/EditCommands.test.ts @@ -17,6 +17,10 @@ test('insertLineBreak inserts a newline into the edit buffer', async (): Promise contentLeft: 'alpha', contentRight: 'gammaBeta', inputValue: 'gamma', + rightEditor: { + cursorColumnIndex: 5, + cursorRowIndex: 0, + }, totalLineCountLeft: 1, totalLineCountRight: 1, } @@ -59,6 +63,10 @@ test('deleteLeft deletes the previous edit buffer character', async (): Promise< contentLeft: 'alpha', contentRight: 'gamma Beta', inputValue: 'gamma ', + rightEditor: { + cursorColumnIndex: 6, + cursorRowIndex: 0, + }, totalLineCountLeft: 1, totalLineCountRight: 1, } diff --git a/packages/diff-view/test/GetCursorPositionFromCoordinates.test.ts b/packages/diff-view/test/GetCursorPositionFromCoordinates.test.ts index deddf04c..a47c0b74 100644 --- a/packages/diff-view/test/GetCursorPositionFromCoordinates.test.ts +++ b/packages/diff-view/test/GetCursorPositionFromCoordinates.test.ts @@ -5,6 +5,7 @@ import { getCursorPositionFromCoordinates } from '../src/parts/GetCursorPosition test('getCursorPositionFromCoordinates computes cursor position in horizontal layout', (): void => { const state = { ...createDefaultState(), + contentRight: 'zero\none\ntwo', gutterWidthVariable: 18, leftWidth: 100, totalLineCountRight: 3, @@ -23,6 +24,7 @@ test('getCursorPositionFromCoordinates computes cursor position in horizontal la test('getCursorPositionFromCoordinates computes cursor position in vertical layout', (): void => { const state = { ...createDefaultState(), + contentRight: 'zero\none\ntwo\nthree', gutterWidthVariable: 18, layout: 'vertical' as const, leftWidth: 100, @@ -84,3 +86,17 @@ test('getCursorPositionFromCoordinates clamps rows to the last right editor line cursorRowIndex: 2, }) }) + +test('getCursorPositionFromCoordinates clamps columns to the line length', (): void => { + const state = { + ...createDefaultState(), + contentRight: 'abc', + } + + const result = getCursorPositionFromCoordinates(state, 1000, 0) + + expect(result).toEqual({ + cursorColumnIndex: 3, + cursorRowIndex: 0, + }) +}) diff --git a/packages/diff-view/test/HandleClickAt.test.ts b/packages/diff-view/test/HandleClickAt.test.ts index e4d7c5d3..f7c9a091 100644 --- a/packages/diff-view/test/HandleClickAt.test.ts +++ b/packages/diff-view/test/HandleClickAt.test.ts @@ -6,6 +6,7 @@ import { handleClickAt } from '../src/parts/HandleClickAt/HandleClickAt.ts' test('handleClickAt focuses the editable right side for horizontal layout clicks', (): void => { const state = { ...createDefaultState(), + contentRight: 'zero\none\ntwo', gutterWidthVariable: 18, leftWidth: 40, totalLineCountRight: 3, @@ -38,6 +39,7 @@ test('handleClickAt ignores horizontal layout clicks in the left side', (): void test('handleClickAt focuses the editable right side for vertical layout clicks', (): void => { const state = { ...createDefaultState(), + contentRight: 'zero\none\ntwo\nthree', gutterWidthVariable: 18, layout: 'vertical' as const, leftWidth: 40, diff --git a/packages/diff-view/test/HandleClickRightSide.test.ts b/packages/diff-view/test/HandleClickRightSide.test.ts index a91eb3bb..042a8505 100644 --- a/packages/diff-view/test/HandleClickRightSide.test.ts +++ b/packages/diff-view/test/HandleClickRightSide.test.ts @@ -6,6 +6,7 @@ import { handleClickRightSide } from '../src/parts/HandleClickRightSide/HandleCl test('handleClickRightSide focuses the editable right side', (): void => { const state = { ...createDefaultState(), + contentRight: 'zero\none', totalLineCountRight: 2, } @@ -24,6 +25,7 @@ test('handleClickRightSide focuses the editable right side', (): void => { test('handleClickRightSide increments focusVersion when already focused', (): void => { const state = { ...createDefaultState(), + contentRight: 'zero\none\ntwo', focus: DiffEditorWhenExpression.FocusDiffEditorText, focusVersion: 4, totalLineCountRight: 3, diff --git a/packages/diff-view/test/HandleInput.test.ts b/packages/diff-view/test/HandleInput.test.ts index fccd83dc..ca0ab4b7 100644 --- a/packages/diff-view/test/HandleInput.test.ts +++ b/packages/diff-view/test/HandleInput.test.ts @@ -68,6 +68,10 @@ test('handleInput applies the hidden input value before the stable right content contentLeft: 'alpha', contentRight: 'gamma beta', inputValue: 'gamma ', + rightEditor: { + cursorColumnIndex: 6, + cursorRowIndex: 0, + }, totalLineCountLeft: 1, totalLineCountRight: 1, } @@ -91,6 +95,10 @@ test('handleInput supports shrinking the hidden input value', async (): Promise< contentLeft: 'alpha', contentRight: 'gamma Beta', inputValue: 'gamma ', + rightEditor: { + cursorColumnIndex: 6, + cursorRowIndex: 0, + }, totalLineCountLeft: 1, totalLineCountRight: 1, } diff --git a/packages/diff-view/test/RenderEventListeners.test.ts b/packages/diff-view/test/RenderEventListeners.test.ts index 332abb44..1f7c48ec 100644 --- a/packages/diff-view/test/RenderEventListeners.test.ts +++ b/packages/diff-view/test/RenderEventListeners.test.ts @@ -49,4 +49,8 @@ test('renderEventListeners registers tracked sash pointer listeners', (): void = name: DomEventListenerFunctions.HandleClickRightSide, params: ['handleClickRightSide', EventExpression.ClientX, EventExpression.ClientY], }) + expect(result).toContainEqual({ + name: DomEventListenerFunctions.HandleInput, + params: ['handleInput', EventExpression.TargetValue], + }) }) diff --git a/packages/diff-view/test/TypingAtCursor.test.ts b/packages/diff-view/test/TypingAtCursor.test.ts index f76988ff..d7380fbc 100644 --- a/packages/diff-view/test/TypingAtCursor.test.ts +++ b/packages/diff-view/test/TypingAtCursor.test.ts @@ -27,6 +27,41 @@ test('typing inserts characters at the cursor position', async (): Promise expect(diffWorkerRpc.invocations.length).toBeGreaterThanOrEqual(0) expect(result.contentRight).toBe('hello World') expect(result.inputValue).toBe(' ') + expect(result.rightEditor).toEqual({ + cursorColumnIndex: 6, + cursorRowIndex: 0, + }) +}) + +test('typing multiple input events replaces the previous input buffer', async (): Promise => { + using diffWorkerRpc = DiffWorker.registerMockRpc({ + 'Diff.diffInline': async (): Promise => [], + }) + + const state = { + ...createDefaultState(), + contentLeft: '', + contentRight: 'helloWorld', + inputValue: '', + rightEditor: { + cursorColumnIndex: 10, + cursorRowIndex: 0, + }, + totalLineCountLeft: 1, + totalLineCountRight: 1, + } + + const afterFirstInput = await applyEditInput(state, ' ') + const afterSecondInput = await applyEditInput(afterFirstInput, ' a') + const result = await applyEditInput(afterSecondInput, ' abc') + + expect(diffWorkerRpc.invocations.length).toBeGreaterThanOrEqual(0) + expect(result.contentRight).toBe('helloWorld abc') + expect(result.inputValue).toBe(' abc') + expect(result.rightEditor).toEqual({ + cursorColumnIndex: 14, + cursorRowIndex: 0, + }) }) test('insertLineBreak at cursor splits the line', async (): Promise => { diff --git a/packages/e2e/src/diff.css-three-lines-added-light-theme.ts b/packages/e2e/src/diff.css-three-lines-added-light-theme.ts index f7f8c71e..c9b8346e 100644 --- a/packages/e2e/src/diff.css-three-lines-added-light-theme.ts +++ b/packages/e2e/src/diff.css-three-lines-added-light-theme.ts @@ -2,8 +2,6 @@ import type { Test } from '@lvce-editor/test-with-playwright' export const name = 'diff.css-three-lines-added-light-theme' -export const skip = 1 - export const test: Test = async ({ Command, DiffView, expect, FileSystem, Locator, Workspace }) => { const tmpDir = await FileSystem.getTmpDir() await FileSystem.writeFile( @@ -27,11 +25,13 @@ export const test: Test = async ({ Command, DiffView, expect, FileSystem, Locato await DiffView.open(`${tmpDir}/before.css`, `${tmpDir}/after.css`) const main = Locator('.Main') + const diffEditor = Locator('.DiffEditor') const beforePane = Locator('.DiffEditorContentLeft .DiffEditorRows') const afterPane = Locator('.DiffEditorContentRight .DiffEditorRows') const insertedRows = Locator('.DiffEditorContentRight .EditorRow.Insertion') await expect(main).toHaveCSS('background-color', 'rgb(248, 249, 250)') + await expect(diffEditor).toHaveCSS('background-color', 'rgb(248, 249, 250)') await expect(beforePane).toContainText('.button') await expect(afterPane).toContainText('.button') await expect(afterPane).toContainText('color: red') diff --git a/packages/e2e/src/diff.syntax-highlighting-typescript.ts b/packages/e2e/src/diff.syntax-highlighting-typescript.ts index 61b118e2..8f5643d2 100644 --- a/packages/e2e/src/diff.syntax-highlighting-typescript.ts +++ b/packages/e2e/src/diff.syntax-highlighting-typescript.ts @@ -2,15 +2,12 @@ import type { Test } from '@lvce-editor/test-with-playwright' export const name = 'diff.syntax-highlighting-typescript' -export const skip = 1 - export const test: Test = async ({ DiffView, expect, FileSystem, Locator, Workspace }) => { const tmpDir = await FileSystem.getTmpDir() - await FileSystem.writeFile(`${tmpDir}/file-1.ts`, `const leftValue = 1`) await FileSystem.writeFile(`${tmpDir}/file-2.ts`, `const rightValue = 2`) await Workspace.setPath(tmpDir) - await DiffView.open(`${tmpDir}/file-1.ts`, `${tmpDir}/file-2.ts`) + await DiffView.open(`data://const leftValue = 1`, `${tmpDir}/file-2.ts`) const beforePane = Locator('.DiffEditorContentLeft .DiffEditorRows') const afterPane = Locator('.DiffEditorContentRight .DiffEditorRows') @@ -25,6 +22,4 @@ export const test: Test = async ({ DiffView, expect, FileSystem, Locator, Worksp await expect(expectedLocator3).toHaveCount(1) await expect(beforePane).toContainText('const leftValue = 1') await expect(afterPane).toContainText('const rightValue = 2') - await expect(beforePane).not.toContainText('rightValue') - await expect(afterPane).not.toContainText('leftValue') } diff --git a/packages/e2e/src/diff.text-cursor.ts b/packages/e2e/src/diff.text-cursor.ts index 886eeacc..2d05ea80 100644 --- a/packages/e2e/src/diff.text-cursor.ts +++ b/packages/e2e/src/diff.text-cursor.ts @@ -2,11 +2,12 @@ import type { Test } from '@lvce-editor/test-with-playwright' export const name = 'diff.text-cursor' -export const test: Test = async ({ DiffView, expect, FileSystem, Locator, Workspace }) => { +export const test: Test = async ({ Command, DiffView, expect, FileSystem, Locator, Workspace }) => { const tmpDir = await FileSystem.getTmpDir() await FileSystem.writeFile(`${tmpDir}/before.txt`, 'alpha') await FileSystem.writeFile(`${tmpDir}/after.txt`, 'beta') await Workspace.setPath(tmpDir) + await Command.execute('ColorTheme.setColorTheme', 'slime') await DiffView.open(`${tmpDir}/before.txt`, `${tmpDir}/after.txt`) @@ -14,9 +15,11 @@ export const test: Test = async ({ DiffView, expect, FileSystem, Locator, Worksp const afterRows = Locator('.DiffEditorContentRight .DiffEditorRows') const beforeLineNumber = Locator('.DiffEditorContentLeft .DiffEditorLineNumber').first() const sash = Locator('.SashVertical').first() + const cursor = Locator('.EditorCursorRight') await expect(beforeRows).toHaveCSS('cursor', 'text') await expect(afterRows).toHaveCSS('cursor', 'text') await expect(beforeLineNumber).toHaveCSS('cursor', 'auto') await expect(sash).toHaveCSS('cursor', 'col-resize') + await expect(cursor).toHaveCSS('background-color', 'rgb(168, 223, 90)') } diff --git a/packages/e2e/src/viewlet.diff-editor-scrolling.ts b/packages/e2e/src/viewlet.diff-editor-scrolling.ts index 3f8dd78c..4f5f625b 100644 --- a/packages/e2e/src/viewlet.diff-editor-scrolling.ts +++ b/packages/e2e/src/viewlet.diff-editor-scrolling.ts @@ -11,7 +11,7 @@ const getLargeFileContent = (bottomLine: string): string => { export const name = 'diff.diff-editor-scrolling' -export const test: Test = async ({ Command, DiffView, expect, FileSystem, Locator, Workspace }) => { +export const test: Test = async ({ DiffView, expect, FileSystem, Locator, Workspace }) => { const tmpDir = await FileSystem.getTmpDir() await FileSystem.writeFile(`${tmpDir}/file-1.txt`, getLargeFileContent('bottom change before')) await FileSystem.writeFile(`${tmpDir}/file-2.txt`, getLargeFileContent('bottom change after')) @@ -24,7 +24,12 @@ export const test: Test = async ({ Command, DiffView, expect, FileSystem, Locato }) await expect(line1).toBeVisible() - await Command.execute(`DiffView.handleWheel`, 9, 9_999_999) + const contentRight = Locator('.DiffEditorContentRight') + await contentRight.dispatchEvent('wheel', { + bubbles: true, + deltaMode: 0, + deltaY: 9_999_999, + } as unknown as string) const line1800 = Locator('.DiffEditorContentLeft .DiffEditorLineNumber', { hasText: '1800', diff --git a/packages/e2e/src/viewlet.diff-editor-typing-at-cursor.ts b/packages/e2e/src/viewlet.diff-editor-typing-at-cursor.ts index 3482fe0a..4e6ddd0d 100644 --- a/packages/e2e/src/viewlet.diff-editor-typing-at-cursor.ts +++ b/packages/e2e/src/viewlet.diff-editor-typing-at-cursor.ts @@ -1,9 +1,7 @@ import type { Test } from '@lvce-editor/test-with-playwright' export const name = 'viewlet.diff-editor-typing-at-cursor' -export const skip = 1 - -export const test: Test = async ({ Command, DiffView, expect, FileSystem, Locator, Workspace }) => { +export const test: Test = async ({ DiffView, expect, FileSystem, Locator, Workspace }) => { const tmpDir = await FileSystem.getTmpDir() await FileSystem.writeFile(`${tmpDir}/before.txt`, 'hello') await FileSystem.writeFile(`${tmpDir}/after.txt`, 'helloWorld') @@ -15,9 +13,13 @@ export const test: Test = async ({ Command, DiffView, expect, FileSystem, Locato const input = Locator('.DiffEditorInput') await expect(input).toHaveCount(1) - // place caret between 'hello' and 'World' - await Command.execute('DiffView.handleInput', ' ') + await DiffView.handleClickAt(100_000, 0, 'DiffEditorRows') + await expect(input).toBeFocused() + const cursor = Locator('.EditorCursorRight') + await expect(cursor).toHaveCSS('left', '139px') + await input.type(' abc') - await expect(input).toHaveValue(' ') - await expect(afterRows).toHaveText('hello World') + await expect(input).toHaveValue(' abc') + await expect(afterRows).toHaveText('helloWorld abc') + await expect(cursor).toHaveCSS('left', '175px') }