diff --git a/playwright/e2e/create-table-api.spec.ts b/playwright/e2e/create-table-api.spec.ts index cf6620ccbbe..87641bf7965 100644 --- a/playwright/e2e/create-table-api.spec.ts +++ b/playwright/e2e/create-table-api.spec.ts @@ -3,15 +3,45 @@ * SPDX-License-Identifier: AGPL-3.0-or-later */ -import { expect, mergeTests } from '@playwright/test' -import { test as randomUserTest } from '../support/fixtures/random-user' -import { test as uploadFileTest } from '../support/fixtures/upload-file' - -const test = mergeTests(uploadFileTest, randomUserTest) +import type { Page } from '@playwright/test' +import { expect } from '@playwright/test' +import { test } from '../support/fixtures/random-user' test.describe('createTable API', () => { - test.beforeEach(async ({ open, page }) => { - await open() + const containerId = 'test-table' + + const createTable = async ( + page: Page, + options: { content: string; readOnly: boolean }, + ) => { + await page.evaluate( + async ({ containerId, content, readOnly }) => { + const container = document.createElement('div') + container.id = containerId + container.style.position = 'fixed' + container.style.top = '0' + container.style.left = '0' + container.style.width = '100%' + container.style.height = '100%' + container.style.padding = '50px' + container.style.zIndex = '10000' + container.style.background = 'white' + document.body.appendChild(container) + + // @ts-expect-error - OCA.Text is a global + await window.OCA.Text.createTable({ + el: container, + content, + readOnly, + }) + }, + { containerId, ...options }, + ) + } + + test.beforeEach(async ({ page }) => { + // Open the files app so we're somewhere with `window.OCA.Text` available + await page.goto('/apps/files') // Load the editor API bundle await page.addScriptTag({ @@ -21,44 +51,23 @@ test.describe('createTable API', () => { }) test('renders table editor', async ({ page }) => { - await page.evaluate(async () => { - const container = document.createElement('div') - container.id = 'test-table' - document.body.appendChild(container) - - // @ts-expect-error - OCA.Text is a global - await window.OCA.Text.createTable({ - el: container, - content: '| A | B |\n|---|---|\n| 1 | 2 |', - readOnly: false, - }) + await createTable(page, { + content: '| A | B |\n|---|---|\n| 1 | 2 |', + readOnly: false, }) - await expect(page.locator('#test-table table')).toBeVisible() - await expect(page.locator('#test-table th').first()).toContainText('A') - await expect(page.locator('#test-table td').first()).toContainText('1') + await expect(page.locator(`#${containerId} table`)).toBeVisible() + await expect(page.locator(`#${containerId} th`).first()).toContainText('A') + await expect(page.locator(`#${containerId} td`).first()).toContainText('1') }) test('allows editing when not readonly', async ({ page }) => { - await page.evaluate(async () => { - const container = document.createElement('div') - container.id = 'test-editable' - container.style.position = 'fixed' - container.style.top = '10px' - container.style.left = '10px' - container.style.zIndex = '10000' - container.style.background = 'white' - document.body.appendChild(container) - - // @ts-expect-error - OCA.Text is a global - await window.OCA.Text.createTable({ - el: container, - content: '| A |\n|---|\n| x |', - readOnly: false, - }) + await createTable(page, { + content: '| A |\n|---|\n| x |', + readOnly: false, }) - const cell = page.locator('#test-editable .ProseMirror td').first() + const cell = page.locator(`#${containerId} .ProseMirror td`).first() await cell.click({ force: true }) await page.waitForTimeout(100) await cell.selectText() @@ -68,20 +77,12 @@ test.describe('createTable API', () => { }) test('prevents editing when readonly', async ({ page }) => { - await page.evaluate(async () => { - const container = document.createElement('div') - container.id = 'test-readonly' - document.body.appendChild(container) - - // @ts-expect-error - OCA.Text is a global - await window.OCA.Text.createTable({ - el: container, - content: '| A |\n|---|---|\n| 1 |', - readOnly: true, - }) + await createTable(page, { + content: '| A |\n|---|---|\n| 1 |', + readOnly: true, }) - const editable = page.locator('#test-readonly [contenteditable]').first() + const editable = page.locator(`#${containerId} [contenteditable]`).first() await expect(editable).toHaveAttribute('contenteditable', 'false') }) }) diff --git a/src/extensions/PlainTable.js b/src/extensions/PlainTable.js index 4240dae36bf..3a436ddf576 100644 --- a/src/extensions/PlainTable.js +++ b/src/extensions/PlainTable.js @@ -6,6 +6,7 @@ import { Extension } from '@tiptap/core' import EditableTable from './../nodes/EditableTable.js' +import Paragraph from './../nodes/Paragraph.js' import PlainTableDocument from './../nodes/PlainTableDocument.js' import Keymap from './Keymap.js' import Markdown from './Markdown.js' @@ -16,6 +17,6 @@ export default Extension.create({ name: 'PlainTable', addExtensions() { - return [Markdown, PlainTableDocument, EditableTable, Keymap, Text] + return [Markdown, Paragraph, PlainTableDocument, EditableTable, Keymap, Text] }, })