cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-17 05:13:32 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

feat: Integrate Lexical editor for custom fields in cuesheet

Browse Source 
- Added lexical and @lexical/react dependencies.
- Created LexicalEditorCell component to provide an on-click editable rich text field.
- Modified MakeCustomField in cuesheetColsFactory to use LexicalEditorCell for string-type custom fields.
- Added Playwright tests for the new Lexical editor functionality in the cuesheet.

Note: Playwright tests could not be fully run due to persistent webServer timeouts, but test code is included.
This commit is contained in:
google-labs-jules[bot]
2025-07-11 13:18:40 +00:00
parent e963e183db
commit 67ebd12a94
6 changed files with 404 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
e2e/tests/features/202-cuesheet.spec.ts
+37
View File
@@ -13,3 +13,40 @@ test('cuesheet displays events', async ({ page }) => {
const rowCount = await page.locator('#cuesheet tbody tr').count();
expect(rowCount).toBe(16);
});
test('cuesheet custom field with Lexical editor', async ({ page }) => {
await page.goto('http://localhost:4001/cuesheet');
// Locate a custom field cell. Assuming 'Custom Col 1' is the header for a string custom field.
// And assuming the first data row is a suitable target.
// Adjust selectors based on actual table structure and data.
const customFieldCell = page.locator('#cuesheet tbody tr:first-child td[data-column-id="customCol1"]');
// 1. Verify initial display (non-editable text)
// This requires knowing the initial text or checking it's not an input/editor
await expect(customFieldCell.locator('div[contenteditable="true"]')).not.toBeVisible();
const initialText = await customFieldCell.innerText();
// 2. Click to activate editor
await customFieldCell.click();
const lexicalEditor = customFieldCell.locator('div[contenteditable="true"]');
await expect(lexicalEditor).toBeVisible();
await expect(lexicalEditor).toBeFocused();
// 3. Edit text
const newText = 'Updated text via Playwright';
await lexicalEditor.fill(newText);
await expect(lexicalEditor).toHaveText(newText);
// 4. Click outside (or blur) to save
// Clicking another element to cause blur. A more robust way might be needed depending on implementation.
await page.getByText('Eurovision Song Contest').click(); // Click title or header
await expect(lexicalEditor).not.toBeVisible(); // Editor should be gone
await expect(customFieldCell).toHaveText(newText); // Cell should display new text
// 5. Verify other cell types are unaffected (optional, good for regression)
// This would involve locating other cell types and ensuring they didn't change.
// For example, check a 'Title' cell:
const titleCell = page.locator('#cuesheet tbody tr:first-child td[data-column-id="title"]');
await expect(titleCell.locator('div[contenteditable="true"]')).not.toBeVisible(); // Assuming title is not lexical
});