import Header from '@editorjs/header'; import Image from '@editorjs/simple-image'; import * as _ from '../../../src/components/utils'; describe('Copy pasting from Editor', function () { beforeEach(function () { cy.createEditor({ tools: { header: Header, image: Image, }, }).as('editorInstance'); }); afterEach(function () { if (this.editorInstance) { this.editorInstance.destroy(); } }); context('pasting', function () { it('should paste plain text', function () { // eslint-disable-next-line cypress/no-unnecessary-waiting cy.get('[data-cy=editorjs]') .get('div.ce-block') .click() .paste({ // eslint-disable-next-line @typescript-eslint/naming-convention 'text/plain': 'Some plain text', }) .wait(0) .should('contain', 'Some plain text'); }); it('should paste inline html data', function () { cy.get('[data-cy=editorjs]') .get('div.ce-block') .click() .paste({ // eslint-disable-next-line @typescript-eslint/naming-convention 'text/html': '
Some text
', }) .should('contain.html', 'Some text'); }); it('should paste several blocks if plain text contains new lines', function () { cy.get('[data-cy=editorjs]') .get('div.ce-block') .click() .paste({ // eslint-disable-next-line @typescript-eslint/naming-convention 'text/plain': 'First block\n\nSecond block', }); cy.get('[data-cy=editorjs]') .get('div.ce-block') .then(blocks => { expect(blocks[0].textContent).to.eq('First block'); expect(blocks[1].textContent).to.eq('Second block'); }); }); it('should paste several blocks if html contains several paragraphs', function () { cy.get('[data-cy=editorjs]') .get('div.ce-block') .click() .paste({ // eslint-disable-next-line @typescript-eslint/naming-convention 'text/html': 'First block
Second block
', }); cy.get('[data-cy=editorjs]') .get('div.ce-block') .then(blocks => { expect(blocks[0].textContent).to.eq('First block'); expect(blocks[1].textContent).to.eq('Second block'); }); }); it('should paste using custom data type', function () { cy.get('[data-cy=editorjs]') .get('div.ce-block') .click() .paste({ // eslint-disable-next-line @typescript-eslint/naming-convention 'application/x-editor-js': JSON.stringify([ { tool: 'paragraph', data: { text: 'First block', }, }, { tool: 'paragraph', data: { text: 'Second block', }, }, ]), }); cy.get('[data-cy=editorjs]') .get('div.ce-block') .then(blocks => { expect(blocks[0].textContent).to.eq('First block'); expect(blocks[1].textContent).to.eq('Second block'); }); }); it('should parse block tags', function () { cy.get('[data-cy=editorjs]') .get('div.ce-block') .click() .paste({ // eslint-disable-next-line @typescript-eslint/naming-convention 'text/html': 'Second block
', }); cy.get('[data-cy=editorjs]') .get('h2.ce-header') .should('contain', 'First block'); cy.get('[data-cy=editorjs]') .get('div.ce-paragraph') .should('contain', 'Second block'); }); it('should parse pattern', function () { cy.get('[data-cy=editorjs]') .get('div.ce-block') .click() .paste({ // eslint-disable-next-line @typescript-eslint/naming-convention 'text/plain': 'https://codex.so/public/app/img/external/codex2x.png', }); cy.get('[data-cy=editorjs]') // In Edge test are performed slower, so we need to increase timeout to wait until image is loaded on the page .get('img', { timeout: 10000 }) .should('have.attr', 'src', 'https://codex.so/public/app/img/external/codex2x.png'); }); }); context('copying', function () { it('should copy inline fragment', function () { cy.get('[data-cy=editorjs]') .get('div.ce-block') .click() .type('Some text{selectall}') .copy() .then(clipboardData => { /** * As no blocks selected, clipboard data will be empty as will be handled by browser */ expect(clipboardData).to.be.empty; }); }); it('should copy several blocks', function () { cy.get('[data-cy=editorjs]') .get('div.ce-block') .click() .type('First block{enter}'); cy.get('[data-cy=editorjs') .get('div.ce-block') .next() .type('Second block') .type('{movetostart}') .trigger('keydown', { shiftKey: true, keyCode: _.keyCodes.UP, }) .copy() .then(clipboardData => { expect(clipboardData['text/html']).to.match(/First block(
)?<\/p>
Second block(
)?<\/p>/);
expect(clipboardData['text/plain']).to.eq(`First block\n\nSecond block`);
/**
* Need to wait for custom data as it is set asynchronously
*/
// eslint-disable-next-line cypress/no-unnecessary-waiting
cy.wait(0).then(function () {
expect(clipboardData['application/x-editor-js']).not.to.be.undefined;
const data = JSON.parse(clipboardData['application/x-editor-js']);
expect(data[0].tool).to.eq('paragraph');
expect(data[0].data.text).to.match(/First block(
)?/);
expect(data[1].tool).to.eq('paragraph');
expect(data[1].data.text).to.match(/Second block(
)?/);
});
});
});
});
context('cutting', function () {
it('should cut inline fragment', function () {
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.click()
.type('Some text{selectall}')
.cut()
.then(clipboardData => {
/**
* As no blocks selected, clipboard data will be empty as will be handled by browser
*/
expect(clipboardData).to.be.empty;
});
});
it('should cut several blocks', function () {
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.click()
.type('First block{enter}');
cy.get('[data-cy=editorjs')
.get('div.ce-block')
.next()
.type('Second block')
.type('{movetostart}')
.trigger('keydown', {
shiftKey: true,
keyCode: _.keyCodes.UP,
})
.cut()
.then(clipboardData => {
expect(clipboardData['text/html']).to.match(/
First block(
)?<\/p>
Second block(
)?<\/p>/);
expect(clipboardData['text/plain']).to.eq(`First block\n\nSecond block`);
/**
* Need to wait for custom data as it is set asynchronously
*/
// eslint-disable-next-line cypress/no-unnecessary-waiting
cy.wait(0).then(function () {
expect(clipboardData['application/x-editor-js']).not.to.be.undefined;
const data = JSON.parse(clipboardData['application/x-editor-js']);
expect(data[0].tool).to.eq('paragraph');
expect(data[0].data.text).to.match(/First block(
)?/);
expect(data[1].tool).to.eq('paragraph');
expect(data[1].data.text).to.match(/Second block(
)?/);
});
});
cy.get('[data-cy=editorjs]')
.should('not.contain', 'First block')
.should('not.contain', 'Second block');
});
it('should cut lots of blocks', function () {
const numberOfBlocks = 50;
for (let i = 0; i < numberOfBlocks; i++) {
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.last()
.click()
.type(`Block ${i}{enter}`);
}
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.first()
.click()
.type('{ctrl+A}')
.type('{ctrl+A}')
.cut()
.then((clipboardData) => {
/**
* Need to wait for custom data as it is set asynchronously
*/
// eslint-disable-next-line cypress/no-unnecessary-waiting
cy.wait(0).then(function () {
expect(clipboardData['application/x-editor-js']).not.to.be.undefined;
const data = JSON.parse(clipboardData['application/x-editor-js']);
expect(data.length).to.eq(numberOfBlocks + 1);
});
});
});
});
});