mirror of
https://github.com/codex-team/editor.js
synced 2024-06-08 17:02:23 +02:00
23858e0025
* fix caret loosing after caret * Refactor convert method to return Promise in Blocks API * changelog upd * Fix missing semicolon in blocks.cy.ts and BlockTunes.cy.ts * add test for inline toolbar conversion * Fix missing semicolon in InlineToolbar.cy.ts * add test for toolbox shortcut * api caret.setToBlock now can accept block api or index or id * eslint fix * Refactor test descriptions in caret.cy.ts * rm tsconfig change * lint * lint * Update CHANGELOG.md
131 lines
3.5 KiB
TypeScript
131 lines
3.5 KiB
TypeScript
import Header from '@editorjs/header';
|
|
|
|
describe('Inline Toolbar', () => {
|
|
it('should appear aligned with left coord of selection rect', () => {
|
|
cy.createEditor({
|
|
data: {
|
|
blocks: [
|
|
{
|
|
type: 'paragraph',
|
|
data: {
|
|
text: 'First block text',
|
|
},
|
|
},
|
|
],
|
|
},
|
|
});
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.find('.ce-paragraph')
|
|
.selectText('block');
|
|
|
|
cy.get('[data-cy="inline-toolbar"]')
|
|
.should('be.visible')
|
|
.then(($toolbar) => {
|
|
const editorWindow = $toolbar.get(0).ownerDocument.defaultView;
|
|
const selection = editorWindow.getSelection();
|
|
|
|
const range = selection.getRangeAt(0);
|
|
const rect = range.getBoundingClientRect();
|
|
|
|
expect($toolbar.offset().left).to.closeTo(rect.left, 1);
|
|
});
|
|
});
|
|
|
|
it('should appear aligned with right side of text column when toolbar\'s width is not fit at right', () => {
|
|
cy.createEditor({
|
|
data: {
|
|
blocks: [
|
|
{
|
|
type: 'paragraph',
|
|
data: {
|
|
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor.',
|
|
},
|
|
},
|
|
],
|
|
},
|
|
});
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.find('.ce-paragraph')
|
|
.as('blockWrapper')
|
|
.getLineWrapPositions()
|
|
.then((lineWrapIndexes) => {
|
|
const firstLineWrapIndex = lineWrapIndexes[0];
|
|
|
|
/**
|
|
* Select last 5 chars of the first line
|
|
*/
|
|
cy.get('[data-cy=editorjs]')
|
|
.find('.ce-paragraph')
|
|
.selectTextByOffset([firstLineWrapIndex - 5, firstLineWrapIndex - 1]);
|
|
});
|
|
|
|
cy.get('[data-cy="inline-toolbar"]')
|
|
.should('be.visible')
|
|
.then(($toolbar) => {
|
|
cy.get('@blockWrapper')
|
|
.then(($blockWrapper) => {
|
|
const blockWrapperRect = $blockWrapper.get(0).getBoundingClientRect();
|
|
|
|
/**
|
|
* Toolbar should be aligned with right side of text column
|
|
*/
|
|
expect($toolbar.offset().left + $toolbar.width()).to.closeTo(blockWrapperRect.right, 3);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('Conversion toolbar', () => {
|
|
it('should restore caret after converting of a block', () => {
|
|
cy.createEditor({
|
|
tools: {
|
|
header: {
|
|
class: Header,
|
|
},
|
|
},
|
|
data: {
|
|
blocks: [
|
|
{
|
|
type: 'paragraph',
|
|
data: {
|
|
text: 'Some text',
|
|
},
|
|
},
|
|
],
|
|
},
|
|
});
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.find('.ce-paragraph')
|
|
.selectText('Some text');
|
|
|
|
cy.get('[data-cy=conversion-toggler]')
|
|
.click();
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.find('.ce-conversion-tool[data-tool=header]')
|
|
.click();
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.find('.ce-header')
|
|
.should('have.text', 'Some text');
|
|
|
|
cy.window()
|
|
.then((window) => {
|
|
const selection = window.getSelection();
|
|
|
|
expect(selection.rangeCount).to.be.equal(1);
|
|
|
|
const range = selection.getRangeAt(0);
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.find('.ce-header')
|
|
.should(($block) => {
|
|
expect($block[0].contains(range.startContainer)).to.be.true;
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|