Make spellchecker work for multi line quotes

e2e/client/playwright/editor3.spec.ts

@@ -0,0 +1,208 @@
+import {test, expect} from '@playwright/test';
+import {Monitoring} from './page-object-models/monitoring';
+import {restoreDatabaseSnapshot, s} from './utils';
+import {getEditor3Paragraphs} from './utils/editor3';
+
+test('accepting a spelling suggestion', async ({page}) => {
+    await restoreDatabaseSnapshot({snapshotName: 'spellchecker'});
+
+    await page.goto('/#/workspace/monitoring');
+
+    await page.locator(
+        s('monitoring-group=Sports / Working Stage', 'article-item=spellchecker test'),
+    ).dblclick();
+
+    await expect(page.locator(s('authoring', 'authoring-field=body_html', 'spellchecker-warning'))).toHaveCount(2);
+
+    expect(await getEditor3Paragraphs(page.locator(s('authoring', 'authoring-field=body_html'))))
+        .toStrictEqual(['ghello world', 'ghello world']);
+
+    await page.locator(s('authoring', 'authoring-field=body_html', 'spellchecker-warning'))
+        .first()
+        .click({button: 'right'});
+
+    await page.locator(s('spellchecker-menu')).getByRole('button', {name: 'hello'}).click();
+
+    await expect(
+        (await page.locator(s('authoring', 'authoring-field=body_html', 'spellchecker-warning')).all()).length,
+    ).toBe(1);
+
+    expect(await getEditor3Paragraphs(page.locator(s('authoring', 'authoring-field=body_html'))))
+        .toStrictEqual(['hello world', 'ghello world']);
+});
+
+test('adding word marked as a spellchecker issue to dictionary', async ({page}) => {
+    await restoreDatabaseSnapshot({snapshotName: 'spellchecker'});
+
+    await page.goto('/#/workspace/monitoring');
+
+    await page.locator(
+        s('monitoring-group=Sports / Working Stage', 'article-item=spellchecker test'),
+    ).dblclick();
+
+    await expect(page.locator(s('authoring', 'authoring-field=body_html', 'spellchecker-warning'))).toHaveCount(2);
+
+    expect(await getEditor3Paragraphs(page.locator(s('authoring', 'authoring-field=body_html'))))
+        .toStrictEqual(['ghello world', 'ghello world']);
+
+    await page.locator(s('authoring', 'authoring-field=body_html', 'spellchecker-warning'))
+        .first()
+        .click({button: 'right'});
+
+    await page.locator(s('spellchecker-menu')).getByRole('button', {name: 'Add to dictionary'}).click();
+
+    /**
+     * it expects zero, because when a word is added to dictionary
+     * it should remove warnings for all instances of that word
+     * including nested editors (e.g. multi-line-quote)
+     */
+    await expect(
+        page.locator(s('authoring', 'authoring-field=body_html', 'spellchecker-warning')),
+    ).toHaveCount(0);
+
+    expect(await getEditor3Paragraphs(page.locator(s('authoring', 'authoring-field=body_html'))))
+        .toStrictEqual(['ghello world', 'ghello world']);
+});
+
+/**
+ * FYI undo/redo isn't working the same as in the main editor outside tables
+ * and it's not great that it's character based.
+ */
+test('tables maintaining cursor position at the start when executing "undo" action', async ({page}) => {
+    const monitoring = new Monitoring(page);
+
+    await restoreDatabaseSnapshot({snapshotName: 'editor3-tables'});
+
+    await page.goto('/#/workspace/monitoring');
+
+    await monitoring.selectDeskOrWorkspace('Sports');
+
+    await page.locator(
+        s('monitoring-group=Sports / Working Stage', 'article-item=test sports story'),
+    ).dblclick();
+
+    await page.locator(
+        s('authoring', 'authoring-field=body_html', 'toolbar'),
+    ).getByRole('button', {name: 'table'}).click();
+
+    await page.locator(s('authoring', 'authoring-field=body_html', 'table-block'))
+        .locator('[contenteditable]').first().pressSequentially('foo', {delay: 100});
+
+    await page.keyboard.press('ArrowLeft');
+    await page.keyboard.press('ArrowLeft');
+    await page.keyboard.press('ArrowLeft');
+    await page.keyboard.press('Control+z');
+
+    await page.locator(s('authoring', 'authoring-field=body_html', 'table-block'))
+        .locator('[contenteditable]').first().pressSequentially('bar', {delay: 100});
+
+    await expect(
+        page.locator(s('authoring', 'authoring-field=body_html', 'table-block')).locator('[contenteditable]').first(),
+    ).toHaveText('barfo');
+});
+
+/**
+ * FYI undo/redo isn't working the same as in the main editor outside tables
+ * and it's not great that it's character based.
+ */
+test('tables maintaining cursor position in the middle when executing "undo" action', async ({page}) => {
+    const monitoring = new Monitoring(page);
+
+    await restoreDatabaseSnapshot({snapshotName: 'editor3-tables'});
+
+    await page.goto('/#/workspace/monitoring');
+
+    await monitoring.selectDeskOrWorkspace('Sports');
+
+    await page.locator(
+        s('monitoring-group=Sports / Working Stage', 'article-item=test sports story'),
+    ).dblclick();
+
+    await page.locator(
+        s('authoring', 'authoring-field=body_html', 'toolbar'),
+    ).getByRole('button', {name: 'table'}).click();
+
+    await page.locator(s('authoring', 'authoring-field=body_html', 'table-block'))
+        .locator('[contenteditable]').first().pressSequentially('foo', {delay: 100});
+
+    await page.keyboard.press('ArrowLeft');
+    await page.keyboard.press('ArrowLeft');
+    await page.keyboard.press('Control+z');
+    await page.keyboard.press('Control+z');
+
+    await page.locator(s('authoring', 'authoring-field=body_html', 'table-block'))
+        .locator('[contenteditable]').first().pressSequentially('bar', {delay: 100});
+
+    await expect(
+        page.locator(s('authoring', 'authoring-field=body_html', 'table-block')).locator('[contenteditable]').first(),
+    ).toHaveText('fbar');
+});
+
+/**
+ * FYI undo/redo isn't working the same as in the main editor outside tables
+ * and it's not great that it's character based.
+ */
+test('tables maintaining cursor position at the end when executing "undo" action', async ({page}) => {
+    const monitoring = new Monitoring(page);
+
+    await restoreDatabaseSnapshot({snapshotName: 'editor3-tables'});
+
+    await page.goto('/#/workspace/monitoring');
+
+    await monitoring.selectDeskOrWorkspace('Sports');
+
+    await page.locator(
+        s('monitoring-group=Sports / Working Stage', 'article-item=test sports story'),
+    ).dblclick();
+
+    await page.locator(
+        s('authoring', 'authoring-field=body_html', 'toolbar'),
+    ).getByRole('button', {name: 'table'}).click();
+
+    await page.locator(s('authoring', 'authoring-field=body_html', 'table-block'))
+        .locator('[contenteditable]').first().pressSequentially('foo', {delay: 100});
+
+    await page.keyboard.press('Control+z'); // undo last character
+
+    await page.locator(s('authoring', 'authoring-field=body_html', 'table-block'))
+        .locator('[contenteditable]').first().pressSequentially('bar', {delay: 100});
+
+    await expect(
+        page.locator(s('authoring', 'authoring-field=body_html', 'table-block')).locator('[contenteditable]').first(),
+    ).toHaveText('fobar');
+});
+
+/**
+ * FYI undo/redo isn't working the same as in the main editor outside tables
+ * and it's not great that it's character based.
+ */
+test('tables maintaining cursor position when executing "redo" action', async ({page}) => {
+    const monitoring = new Monitoring(page);
+
+    await restoreDatabaseSnapshot({snapshotName: 'editor3-tables'});
+
+    await page.goto('/#/workspace/monitoring');
+
+    await monitoring.selectDeskOrWorkspace('Sports');
+
+    await page.locator(
+        s('monitoring-group=Sports / Working Stage', 'article-item=test sports story'),
+    ).dblclick();
+
+    await page.locator(
+        s('authoring', 'authoring-field=body_html', 'toolbar'),
+    ).getByRole('button', {name: 'table'}).click();
+
+    await page.locator(s('authoring', 'authoring-field=body_html', 'table-block'))
+        .locator('[contenteditable]').first().pressSequentially('foo', {delay: 100});
+
+    await page.keyboard.press('Control+z');
+    await page.keyboard.press('Control+y');
+
+    await page.locator(s('authoring', 'authoring-field=body_html', 'table-block'))
+        .locator('[contenteditable]').first().pressSequentially('bar', {delay: 100});
+
+    await expect(
+        page.locator(s('authoring', 'authoring-field=body_html', 'table-block')).locator('[contenteditable]').first(),
+    ).toHaveText('fobaro');
+});

e2e/client/playwright/utils/editor3.tsx

@@ -0,0 +1,11 @@
+import {Locator} from '@playwright/test';
+
+export function getEditor3Paragraphs(field: Locator): Promise<Array<string>> {
+    return field.locator('.DraftEditor-root')
+        .first() // there might be multiple roots when working with nested blocks e.g. multi-line-quote
+        .locator('[data-contents="true"]')
+        .first() // there might be multiple [data-contents] when working with nested blocks e.g. multi-line-quote
+        .locator('> *')
+        .allInnerTexts()
+        .then((items) => items.filter((text) => text.trim().length > 0));
+}

e2e/client/specs/editor3_spec.ts

@@ -57,7 +57,6 @@ describe('editor3', () => {
     const bodyEditor = new Editor3(editors.get(1));
     const headlineEditor = new Editor3(editors.get(0));
     const selectAll = protractor.Key.chord(protractor.Key.SHIFT, protractor.Key.UP);
-    const tableEl = editors.get(1).element(by.className('table-block'));
 
     beforeEach(() => {
         monitoring.openMonitoring();
@@ -89,76 +88,6 @@ describe('editor3', () => {
         expect(body.element(by.tagName('a')).getAttribute('href')).toBe('https://example.com/');
     });
 
-    it('can add tables', () => {
-        const tableEditor = new Editor3(tableEl);
-
-        bodyEditor.toolbar.table();
-        tableEditor.sendKeys('foo');
-
-        const body = getPreviewBody();
-
-        expect(body.element(by.tagName('table')).getText()).toBe('foo');
-    });
-
-    it('ctrl+z on tables mantains cursor position at the end', () => {
-        const tableEditor = new Editor3(tableEl);
-
-        bodyEditor.toolbar.table();
-        tableEditor.sendKeys('foo');
-        tableEditor.sendKeys(protractor.Key.CONTROL, 'z');
-        tableEditor.sendKeys('bar');
-
-        const body = getPreviewBody();
-
-        expect(body.element(by.tagName('table')).getText()).toBe('fobar');
-    });
-
-    it('ctrl+z on tables mantains cursor position at the beginning', () => {
-        const tableEditor = new Editor3(editors.get(1).element(by.className('table-block')));
-
-        bodyEditor.toolbar.table();
-        tableEditor.sendKeys('foo');
-        tableEditor.sendKeys(protractor.Key.ARROW_LEFT);
-        tableEditor.sendKeys(protractor.Key.ARROW_LEFT);
-        tableEditor.sendKeys(protractor.Key.ARROW_LEFT);
-        tableEditor.sendKeys(protractor.Key.CONTROL, 'z');
-        tableEditor.sendKeys('bar');
-
-        const body = getPreviewBody();
-
-        expect(body.element(by.tagName('table')).getText()).toBe('barfo');
-    });
-
-    it('ctrl+z on tables mantains cursor position in the middle', () => {
-        const tableEditor = new Editor3(editors.get(1).element(by.className('table-block')));
-
-        bodyEditor.toolbar.table();
-        tableEditor.sendKeys('foo');
-        tableEditor.sendKeys(protractor.Key.ARROW_LEFT);
-        tableEditor.sendKeys(protractor.Key.ARROW_LEFT);
-        tableEditor.sendKeys(protractor.Key.CONTROL, 'z');
-        tableEditor.sendKeys(protractor.Key.CONTROL, 'z');
-        tableEditor.sendKeys('bar');
-
-        const body = getPreviewBody();
-
-        expect(body.element(by.tagName('table')).getText()).toBe('fbar');
-    });
-
-    it('ctrl+y on tables mantains cursor position', () => {
-        const tableEditor = new Editor3(editors.get(1).element(by.className('table-block')));
-
-        bodyEditor.toolbar.table();
-        tableEditor.sendKeys('foo');
-        tableEditor.sendKeys(protractor.Key.CONTROL, 'z');
-        tableEditor.sendKeys(protractor.Key.CONTROL, 'y');
-        tableEditor.sendKeys('bar');
-
-        const body = getPreviewBody();
-
-        expect(body.element(by.tagName('table')).getText()).toBe('fobaro');
-    });
-
     function getPreviewBody() {
         authoring.save();
         assertToastMsg('success', 'Item updated.');

e2e/server/dump/records/README.md

@@ -0,0 +1 @@
+editor3-tables only adds tables formatting option to story content profile. It can be merged to main. The only reason it was added as a separate record is to avoid merge conflicts on open PRs.

karma.conf.js

@@ -2,7 +2,9 @@ var path = require('path');
 var grunt = require('grunt');
 var makeConfig = require('./webpack.config.js');
 
-process.env.TZ = "Europe/Prague";
+require('karma-spec-reporter');
+
+process.env.TZ = 'Europe/Prague';
 
 module.exports = function(config) {
     var webpackConfig = makeConfig(grunt);
@@ -54,7 +56,7 @@ module.exports = function(config) {
         },
 
         // test results reporter to use
-        reporters: ['dots'],
+        reporters: ['spec'],
 
         // web server port
         port: 8080,

package.json

@@ -145,6 +145,7 @@
     "karma-jasmine": "^1.1.1",
     "karma-ng-html2js-preprocessor": "^1.0.0",
     "karma-sourcemap-loader": "^0.3.7",
+    "karma-spec-reporter": "0.0.36",
     "karma-webpack": "^2.0.13",
     "react-addons-test-utils": "^15.6.0",
     "react-test-renderer": "^16.13.1",