feat: add multi-copy paste support

This commit is contained in:
Carlos Valente
2026-03-21 09:37:15 +01:00
parent 6a40c66a7b
commit e40a0eebec
19 changed files with 243 additions and 122 deletions
+14
View File
@@ -153,6 +153,20 @@ export async function postCloneEntry(
return axios.post(`${rundownPath}/${rundownId}/clone/${entryId}`, options);
}
export type PastePayload = {
entryIds: EntryId[];
sourceRundownId: string;
afterId?: EntryId;
beforeId?: EntryId;
};
/**
* HTTP request for pasting entries into the active rundown
*/
export async function postPasteEntries(rundownId: RundownId, data: PastePayload): Promise<AxiosResponse<Rundown>> {
return axios.post(`${rundownPath}/${rundownId}/paste`, data);
}
/**
* HTTP request for grouping a list of entries into a group
*/
@@ -35,11 +35,13 @@ import { useCallback, useMemo } from 'react';
import { moveDown, moveUp, orderEntries } from '../../features/rundown/rundown.utils';
import { RUNDOWN } from '../api/constants';
import {
PastePayload,
ReorderEntry,
deleteEntries,
patchReorderEntry,
postAddEntry,
postCloneEntry,
postPasteEntries,
putBatchEditEvents,
putEditEntry,
requestApplyDelay,
@@ -270,6 +272,35 @@ export const useEntryActions = () => {
[cloneEntryMutation, getCurrentRundownData],
);
/**
* Calls mutation to paste entries
* @private
*/
const { mutateAsync: pasteEntriesMutation } = useMutation({
mutationFn: ([rundownId, data]: [string, PastePayload]) => postPasteEntries(rundownId, data),
onMutate: () => queryClient.cancelQueries({ queryKey: RUNDOWN }),
onSettled: () => queryClient.invalidateQueries({ queryKey: RUNDOWN }),
});
/**
* Paste entries from copy store into the active rundown
*/
const pasteEntries = useCallback(
async (data: PastePayload) => {
try {
const rundownId = getCurrentRundownData()?.id;
if (!rundownId) {
throw new Error('Rundown not initialised');
}
await pasteEntriesMutation([rundownId, data]);
} catch (error) {
logAxiosError('Error pasting entries', error);
}
},
[pasteEntriesMutation, getCurrentRundownData],
);
/**
* Calls mutation to update existing entry
* @private
@@ -919,6 +950,7 @@ export const useEntryActions = () => {
clone,
deleteEntry,
deleteAllEntries,
pasteEntries,
ungroup,
getEntryById,
groupEntries,
@@ -935,6 +967,7 @@ export const useEntryActions = () => {
clone,
deleteEntry,
deleteAllEntries,
pasteEntries,
ungroup,
getEntryById,
groupEntries,
@@ -1,14 +1,16 @@
import { create } from 'zustand';
type EntryCopyStore = {
entryCopyId: string | null;
entryCopyMode: 'copy' | 'cut';
setEntryCopyId: (eventId: string | null, mode?: 'copy' | 'cut') => void;
entryIds: Set<string>;
sourceRundownId: string | null;
setCopyEntries: (ids: string[], rundownId: string) => void;
clearCopy: () => void;
};
export const useEntryCopy = create<EntryCopyStore>()((set) => ({
entryCopyId: null,
entryCopyMode: 'copy',
setEntryCopyId: (entryCopyId: string | null, mode: 'copy' | 'cut' = 'copy') =>
set({ entryCopyId, entryCopyMode: mode }),
entryIds: new Set(),
sourceRundownId: null,
setCopyEntries: (ids: string[], rundownId: string) =>
set({ entryIds: new Set(ids), sourceRundownId: rundownId }),
clearCopy: () => set({ entryIds: new Set(), sourceRundownId: null }),
}));
+3 -3
View File
@@ -13,7 +13,6 @@ import { TbFlagFilled } from 'react-icons/tb';
import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
import { useEntryActionsContext } from '../../common/context/EntryActionsContext';
import { useEntryCopy } from '../../common/stores/entryCopyStore';
import { RundownMetadataObject, lastMetadataKey } from '../../common/utils/rundownMetadata';
import { AppMode } from '../../ontimeConfig';
import QuickAddButtons from './entry-editor/quick-add-buttons/QuickAddButtons';
@@ -64,7 +63,7 @@ export default function Rundown({ order, flatOrder, entries, id, rundownMetadata
const { getIsCollapsed, collapseGroup, expandGroup } = useCollapsedGroups(id);
const entryActions = useEntryActionsContext();
const setEntryCopyId = useEntryCopy((state) => state.setEntryCopyId);
const selectedEvents = useEventSelection((state) => state.selectedEvents);
// cursor
const { editorMode } = useEditorFollowMode();
@@ -105,9 +104,10 @@ export default function Rundown({ order, flatOrder, entries, id, rundownMetadata
// Keyboard shortcuts
useRundownKeyboard({
cursor,
rundownId: id,
selectedEvents,
commands,
clearSelectedEvents,
setEntryCopyId,
});
// DND handlers
@@ -96,14 +96,6 @@ function EventEditorEmpty() {
<Kbd>C</Kbd>
</td>
</tr>
<tr>
<td>Cut selected entry</td>
<td>
<Kbd>{deviceMod}</Kbd>
<AuxKey>+</AuxKey>
<Kbd>X</Kbd>
</td>
</tr>
<tr>
<td>Paste above</td>
<td>
@@ -26,7 +26,7 @@ export function useRundownCommands({
selectEntry: applySelection,
handleCollapseGroup,
}: UseRundownCommandsOptions) {
const { addEntry, clone, deleteEntry, move, reorderEntry } = entryActions;
const { addEntry, clone, deleteEntry, move, pasteEntries } = entryActions;
const deleteAtCursor = useCallback(
(cursor: string | null) => {
@@ -40,52 +40,21 @@ export function useRundownCommands({
[entries, flatOrder, deleteEntry, applySelection],
);
const insertCopyAtId = useCallback(
(atId: EntryId | null, above = false) => {
// lazily get the value from the store
const { entryCopyId, entryCopyMode, setEntryCopyId } = useEntryCopy.getState();
if (entryCopyId === null || !entries[entryCopyId]) {
// we cant clone without selection
const pasteAtCursor = useCallback(
(cursor: EntryId | null, above = false) => {
const { entryIds, sourceRundownId } = useEntryCopy.getState();
if (entryIds.size === 0 || !sourceRundownId) {
return;
}
let normalisedAtId = atId;
const elementToCopy = entries[entryCopyId];
const refElement = atId ? entries[atId] : undefined;
if (refElement && 'parent' in refElement && refElement.parent && elementToCopy.type === SupportedEntry.Group) {
normalisedAtId = refElement.parent;
}
if (entryCopyMode === 'cut') {
if (!normalisedAtId) {
const firstId = flatOrder[0];
if (!firstId || firstId === entryCopyId) {
return;
}
reorderEntry(entryCopyId, firstId, 'before')
.then(() => setEntryCopyId(null))
.catch(() => {});
return;
}
if (normalisedAtId === entryCopyId) {
return;
}
const placement = above ? 'before' : 'after';
reorderEntry(entryCopyId, normalisedAtId, placement)
.then(() => setEntryCopyId(null))
.catch(() => {});
return;
}
clone(entryCopyId, {
after: above ? undefined : (normalisedAtId ?? undefined),
// if we don't have a cursor add the new event on top
before: above ? (normalisedAtId ?? undefined) : undefined,
pasteEntries({
entryIds: Array.from(entryIds),
sourceRundownId,
afterId: above ? undefined : (cursor ?? undefined),
beforeId: above ? (cursor ?? undefined) : undefined,
});
},
[entries, flatOrder, clone, reorderEntry],
[pasteEntries],
);
/**
@@ -217,7 +186,7 @@ export function useRundownCommands({
return {
cloneEntry,
deleteAtCursor,
insertCopyAtId,
pasteAtCursor,
insertAtId,
selectGroup,
selectEntry,
@@ -6,6 +6,8 @@ import { useEventSelection } from '../useEventSelection';
interface UseRundownKeyboardOptions {
cursor: EntryId | null;
rundownId: string | undefined;
selectedEvents: Set<EntryId>;
commands: {
selectEntry: (cursor: EntryId | null, direction: 'up' | 'down') => EntryId | null;
selectGroup: (cursor: EntryId | null, direction: 'up' | 'down') => EntryId | null;
@@ -15,10 +17,9 @@ interface UseRundownKeyboardOptions {
moveEntry: (cursor: EntryId | null, direction: 'up' | 'down') => void;
deleteAtCursor: (cursor: EntryId | null) => void;
insertAtId: (patch: Partial<OntimeEntry> & { type: SupportedEntry }, id: EntryId | null, above?: boolean) => void;
insertCopyAtId: (atId: EntryId | null, above?: boolean) => void;
pasteAtCursor: (cursor: EntryId | null, above?: boolean) => void;
};
clearSelectedEvents: () => void;
setEntryCopyId: (id: EntryId | null, mode?: 'copy' | 'cut') => void;
}
/**
@@ -37,9 +38,10 @@ function isEditableElement(target: EventTarget | null): boolean {
export function useRundownKeyboard({
cursor,
rundownId,
selectedEvents,
commands,
clearSelectedEvents,
setEntryCopyId,
}: UseRundownKeyboardOptions) {
const scrollToEntry = useEventSelection((state) => state.scrollToEntry);
@@ -138,7 +140,7 @@ export function useRundownKeyboard({
'Escape',
() => {
clearSelectedEvents();
setEntryCopyId(null);
useEntryCopy.getState().clearCopy();
},
{ preventDefault: true, usePhysicalKeys: true },
],
@@ -192,33 +194,25 @@ export function useRundownKeyboard({
[
'mod + C',
(event) => {
if (cursor === null || isEditableElement(event.target)) {
if (cursor === null || isEditableElement(event.target) || !rundownId) {
return;
}
event.preventDefault();
setEntryCopyId(cursor);
},
{ usePhysicalKeys: true },
],
[
'mod + X',
(event) => {
if (cursor === null || isEditableElement(event.target)) {
return;
}
event.preventDefault();
setEntryCopyId(cursor, 'cut');
// if multiple events are selected, copy all of them; otherwise copy the cursor entry
const ids = selectedEvents.size > 1 ? Array.from(selectedEvents) : [cursor];
useEntryCopy.getState().setCopyEntries(ids, rundownId);
},
{ usePhysicalKeys: true },
],
[
'mod + V',
(event) => {
if (isEditableElement(event.target) || useEntryCopy.getState().entryCopyId === null) {
if (isEditableElement(event.target) || useEntryCopy.getState().entryIds.size === 0) {
return;
}
event.preventDefault();
commands.insertCopyAtId(cursor);
commands.pasteAtCursor(cursor);
},
{ usePhysicalKeys: true },
],
@@ -226,11 +220,11 @@ export function useRundownKeyboard({
[
'mod + shift + V',
(event) => {
if (isEditableElement(event.target) || useEntryCopy.getState().entryCopyId === null) {
if (isEditableElement(event.target) || useEntryCopy.getState().entryIds.size === 0) {
return;
}
event.preventDefault();
commands.insertCopyAtId(cursor, true);
commands.pasteAtCursor(cursor, true);
},
{ usePhysicalKeys: true },
],
@@ -17,10 +17,6 @@
outline: 1px solid $block-cursor-color;
}
&.copyTarget {
outline: 1px dashed $blue-500;
outline-offset: -2px;
}
}
.drag {
@@ -6,7 +6,6 @@ import { IoCheckmarkDone, IoClose, IoReorderTwo } from 'react-icons/io5';
import Button from '../../../common/components/buttons/Button';
import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
import { useEntryCopy } from '../../../common/stores/entryCopyStore';
import { cx } from '../../../common/utils/styleUtils';
import DelayInput from './DelayInput';
@@ -22,7 +21,6 @@ export default function RundownDelay({ data, hasCursor }: RundownDelayProps) {
const { applyDelay, deleteEntry } = useEntryActionsContext();
const handleRef = useRef<null | HTMLSpanElement>(null);
const entryCopyId = useEntryCopy((state) => state.entryCopyId);
const {
attributes: dragAttributes,
@@ -61,7 +59,7 @@ export default function RundownDelay({ data, hasCursor }: RundownDelayProps) {
return (
<div
className={cx([style.delay, hasCursor && style.hasCursor, entryCopyId === data.id && style.copyTarget])}
className={cx([style.delay, hasCursor && style.hasCursor])}
ref={setNodeRef}
style={dragStyle}
data-testid='rundown-delay'
@@ -58,10 +58,6 @@ $skip-opacity: 0.2;
outline: 1px solid $block-cursor-color;
}
&.copyTarget {
outline: 2px dashed $block-cursor-color;
}
&.past:not(.skip) {
.timerNote,
.statusElements,
@@ -17,7 +17,6 @@ import { TbFlagFilled } from 'react-icons/tb';
import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
import { useContextMenu } from '../../../common/hooks/useContextMenu';
import { useEntryCopy } from '../../../common/stores/entryCopyStore';
import { deviceMod } from '../../../common/utils/deviceUtils';
import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
import { useEventIdSwapping } from '../useEventIdSwapping';
@@ -106,7 +105,6 @@ export default function RundownEvent({
const selectEntry = useEventSelection((state) => state.setSelectedEvents);
const selectedEvents = useEventSelection((state) => state.selectedEvents);
const entryCopyId = useEntryCopy((state) => state.entryCopyId);
const handleRef = useRef<null | HTMLSpanElement>(null);
@@ -248,7 +246,6 @@ export default function RundownEvent({
playback && style[playback],
isSelected && style.selected,
hasCursor && style.hasCursor,
entryCopyId === eventId && style.copyTarget,
]);
const handleFocusClick = (event: MouseEvent) => {
@@ -13,10 +13,6 @@
outline: 1px solid $block-cursor-color;
}
&.copyTarget {
outline: 2px dashed $block-cursor-color;
}
&.expanded {
margin-block: 0.5rem 0;
border-radius: $block-border-radius $block-border-radius 0 0;
@@ -16,7 +16,6 @@ import IconButton from '../../../common/components/buttons/IconButton';
import Tag from '../../../common/components/tag/Tag';
import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
import { useContextMenu } from '../../../common/hooks/useContextMenu';
import { useEntryCopy } from '../../../common/stores/entryCopyStore';
import { deviceMod } from '../../../common/utils/deviceUtils';
import { getOffsetState } from '../../../common/utils/offset';
import { cx, getAccessibleColour, timerPlaceholder } from '../../../common/utils/styleUtils';
@@ -43,7 +42,6 @@ export default function RundownGroup({ data, hasCursor, collapsed, onCollapse }:
const selectSingleEntry = useEventSelection((state) => state.setSingleEntrySelection);
const selectedEvents = useEventSelection((state) => state.selectedEvents);
const entryCopyId = useEntryCopy((state) => state.entryCopyId);
const [onContextMenu] = useContextMenu<HTMLDivElement>(() => [
{
@@ -133,7 +131,6 @@ export default function RundownGroup({ data, hasCursor, collapsed, onCollapse }:
style.group,
hasCursor && style.hasCursor,
!collapsed && style.expanded,
entryCopyId === data.id && style.copyTarget,
])}
ref={setNodeRef}
onClick={handleFocusClick}
@@ -18,9 +18,6 @@
outline: 1px solid $block-cursor-color;
}
&.copyTarget {
outline: 2px dashed $block-cursor-color;
}
}
.binder {
@@ -8,7 +8,6 @@ import Input from '../../../common/components/input/input/Input';
import useReactiveTextInput from '../../../common/components/input/text-input/useReactiveTextInput';
import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
import { useContextMenu } from '../../../common/hooks/useContextMenu';
import { useEntryCopy } from '../../../common/stores/entryCopyStore';
import { deviceMod } from '../../../common/utils/deviceUtils';
import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
import { useEventSelection } from '../useEventSelection';
@@ -31,7 +30,6 @@ export default function RundownMilestone({ colour, cue, entryId, hasCursor, titl
const selectedEvents = useEventSelection((state) => state.selectedEvents);
const selectSingleEntry = useEventSelection((state) => state.setSingleEntrySelection);
const entryCopyId = useEntryCopy((state) => state.entryCopyId);
const [onContextMenu] = useContextMenu<HTMLDivElement>(() => [
{
@@ -89,7 +87,6 @@ export default function RundownMilestone({ colour, cue, entryId, hasCursor, titl
className={cx([
style.milestone,
hasCursor ? style.hasCursor : null,
entryCopyId === entryId ? style.copyTarget : null,
])}
ref={setNodeRef}
onClick={handleFocusClick}
@@ -18,6 +18,7 @@ import {
groupEntries,
initRundown,
loadRundown,
pasteEntries,
reorderEntry,
swapEvents,
ungroupEntries,
@@ -30,6 +31,7 @@ import {
entryPutValidator,
entryReorderValidator,
entrySwapValidator,
pastePostValidator,
rundownArrayOfIds,
rundownPostValidator,
validateRundownMutation,
@@ -302,6 +304,29 @@ router.post(
},
);
/**
* Pastes entries from a source rundown into the active rundown
*/
router.post(
'/:rundownId/paste',
pastePostValidator,
validateRundownMutation,
async (req: Request, res: Response<Rundown | ErrorResponse>) => {
try {
const rundown = await pasteEntries({
entryIds: req.body.entryIds,
sourceRundownId: req.body.sourceRundownId,
afterId: req.body.afterId,
beforeId: req.body.beforeId,
});
res.status(200).send(rundown);
} catch (error) {
const message = getErrorMessage(error);
res.status(400).send({ message });
}
},
);
/**
* Creates a group out of a list of entries
*/
@@ -334,6 +334,102 @@ export async function swapEvents(fromId: EntryId, toId: EntryId): Promise<Rundow
return rundownResult;
}
/**
* Pastes a list of entries into the active rundown
* Supports cross-rundown paste within the same instance
* @throws if any entry is not found in the source rundown
*/
export async function pasteEntries(payload: {
entryIds: EntryId[];
sourceRundownId: string;
afterId?: EntryId;
beforeId?: EntryId;
}): Promise<Rundown> {
const { entryIds, sourceRundownId, afterId, beforeId } = payload;
const { rundown, commit } = createTransaction({ mutableRundown: true, mutableCustomFields: false });
// resolve source rundown
const sourceRundown =
sourceRundownId === rundown.id ? rundown : getDataProvider().getRundown(sourceRundownId);
// validate all entry IDs exist in source
for (const entryId of entryIds) {
if (!sourceRundown.entries[entryId]) {
throw new Error(`Entry with ID ${entryId} not found in source rundown`);
}
}
// resolve insertion position
let currentAfterId: EntryId | undefined;
if (afterId) {
currentAfterId = afterId;
} else if (beforeId) {
// for "before" positioning, pass it to the first clone and then chain after
currentAfterId = undefined;
}
const newEntryIds: EntryId[] = [];
// sort entry IDs by source rundown flatOrder so paste preserves rundown order
// regardless of the order they were selected (e.g. ctrl-click order)
const validIds = entryIds.filter((id) => sourceRundown.entries[id]);
const orderedIds = validIds.sort((a, b) => {
const idxA = sourceRundown.flatOrder.indexOf(a);
const idxB = sourceRundown.flatOrder.indexOf(b);
return idxA - idxB;
});
for (let i = 0; i < orderedIds.length; i++) {
const entryId = orderedIds[i];
const sourceEntry = sourceRundown.entries[entryId];
// resolve position reference for this entry
// when pasting a group and the reference is a child inside another group,
// normalise to the parent group so the pasted group lands at the top level
const options: InsertOptions = {};
if (i === 0 && beforeId && !afterId) {
options.before = normaliseGroupPosition(rundown, sourceEntry, beforeId);
} else if (currentAfterId) {
options.after = normaliseGroupPosition(rundown, sourceEntry, currentAfterId);
}
const newEntry = rundownMutation.clone(rundown, sourceEntry, options);
newEntryIds.push(newEntry.id);
// chain: each new entry becomes the afterId for the next
currentAfterId = newEntry.id;
}
const { rundown: rundownResult, rundownMetadata, revision } = commit();
// schedule the side effects
setImmediate(() => {
updateRuntimeOnChange(rundownMetadata);
notifyChanges(rundownMetadata, revision, { timer: newEntryIds, external: true });
});
return rundownResult;
}
/**
* When pasting a group, the position reference must be a top-level entry.
* If the reference is a child inside another group, resolve to the parent
* so the pasted group ends up at the correct position in rundown.order.
*/
function normaliseGroupPosition(rundown: Rundown, sourceEntry: OntimeEntry, referenceId: EntryId): EntryId {
if (!isOntimeGroup(sourceEntry)) {
return referenceId;
}
const referenceEntry = rundown.entries[referenceId];
if (referenceEntry && 'parent' in referenceEntry && referenceEntry.parent) {
return referenceEntry.parent;
}
return referenceId;
}
/**
* Clones an entry, ensuring that all dependencies are preserved
* Handles cloning children if the entry is a group
@@ -83,4 +83,14 @@ export const rundownArrayOfIds = [
requestValidationFunction,
];
export const pastePostValidator = [
body('entryIds').isArray().notEmpty(),
body('entryIds.*').isString(),
body('sourceRundownId').isString().notEmpty(),
body('afterId').optional().isString(),
body('beforeId').optional().isString(),
requestValidationFunction,
];
// #endregion operations on rundown entries =======================
@@ -31,7 +31,7 @@ test('Copy-paste', async ({ page }) => {
await expect(page.getByTestId('entry-2').getByTestId('rundown-event')).toContainText('4');
});
test('Cut-paste', async ({ page }) => {
test('Multi-event copy-paste', async ({ page }) => {
await page.goto('http://localhost:4001/rundown');
await page.getByRole('button', { name: 'Edit' }).click();
@@ -40,27 +40,39 @@ test('Cut-paste', async ({ page }) => {
await page.getByRole('menuitem', { name: 'Clear all' }).click();
await page.getByRole('button', { name: 'Delete all' }).click();
// create events
// create three events with distinct titles
await page.getByRole('button', { name: 'Create Event' }).click();
await page.getByTestId('entry-1').getByTestId('entry__title').click();
await page.getByTestId('entry-1').getByTestId('entry__title').fill('first');
await page.getByTestId('entry-1').getByTestId('entry__title').fill('alpha');
await page.getByTestId('entry-1').getByTestId('entry__title').press('Enter');
await page.getByRole('button', { name: 'Event' }).nth(4).click();
await page.getByTestId('entry-2').getByTestId('entry__title').click();
await page.getByTestId('entry-2').getByTestId('entry__title').fill('second');
await page.getByTestId('entry-2').getByTestId('entry__title').fill('beta');
await page.getByTestId('entry-2').getByTestId('entry__title').press('Enter');
// cut first event, paste below second
await page.getByTestId('entry-1').getByTestId('rundown-event').getByText('1').click();
await page.getByTestId('entry-1').getByTestId('rundown-event').filter({ hasText: '1' }).press('ControlOrMeta+x');
await page.getByTestId('entry-2').getByTestId('rundown-event').getByText('2').click();
await page.getByTestId('entry-2').getByTestId('rundown-event').filter({ hasText: '2' }).press('ControlOrMeta+v');
await page.getByRole('button', { name: 'Event', exact: true }).nth(1).click();
await page.getByTestId('entry-3').getByTestId('entry__title').click();
await page.getByTestId('entry-3').getByTestId('entry__title').fill('gamma');
await page.getByTestId('entry-3').getByTestId('entry__title').press('Enter');
// we can verify that the entries have swapped places
const events = await page.getByTestId('entry__title').all();
await expect(events[0]).toHaveValue('second');
await expect(events[1]).toHaveValue('first');
// multi-select first and third events via ctrl-click
await page.getByTestId('entry-1').getByTestId('rundown-event').click();
await page.getByTestId('entry-3').getByTestId('rundown-event').click({ modifiers: ['Control'] });
// copy and paste after the last event
await page.keyboard.press('ControlOrMeta+c');
await page.getByTestId('entry-3').getByTestId('rundown-event').click();
await page.keyboard.press('ControlOrMeta+v');
// should now have 5 events: alpha, beta, gamma, alpha-copy, gamma-copy
await expect(page.getByTestId('rundown-event')).toHaveCount(5);
const titles = await page.getByTestId('entry__title').all();
await expect(titles[0]).toHaveValue('alpha');
await expect(titles[1]).toHaveValue('beta');
await expect(titles[2]).toHaveValue('gamma');
await expect(titles[3]).toHaveValue('alpha');
await expect(titles[4]).toHaveValue('gamma');
});
test('Move', async ({ page }) => {