deblan-mirror/editor.js
deblan-mirror/editor.js
1
0
Fork 0
mirror of https://github.com/codex-team/editor.js synced 2024-06-29 02:40:23 +02:00
Code Issues Projects Releases Wiki Activity

lint removed

Browse source
This commit is contained in:
robonetphy 2023-03-28 21:43:04 +05:30
parent d7c0cf8ddf
commit 62d07892e5
5 changed files with 291 additions and 298 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/modules/blockEvents.ts
View file

@ -145,11 +145,10 @@ export default class BlockEvents extends Module {
/**
* All drag enter on block
* - use to clear previous drop target zone style.
*
*
* @param {DragEvent} event - drag over event
*/
public dragEnter(event: DragEvent): void {
const { BlockManager } = this.Editor;
const block = BlockManager.getBlockByChildNode(event.target as Node);
@ -157,7 +156,7 @@ export default class BlockEvents extends Module {
* Scroll to make element inside the viewport.
*/
_.scrollToView(block.holder);
/**
* Clear previous drop target zone for every block.
*/

5
src/components/modules/dragNDrop.ts
View file

@ -199,7 +199,7 @@ export default class DragNDrop extends Module {
* @param dragStartEvent - drag start event
*/
private processDragStart(dragStartEvent: DragEvent): void {
const { BlockManager, BlockSelection } = this.Editor;
const { BlockSelection } = this.Editor;
/**
* If we are dragging a block, set the flag to true.
@ -221,7 +221,7 @@ export default class DragNDrop extends Module {
}
/**
* Create drag image for drag-n-drop and add to Editor holder.
* Create drag image for drag-n-drop and add to Editor holder.
*
* @param blocks {Block[]} - blocks to create drag image for.
* @returns {HTMLElement} - drag image.
@ -248,6 +248,7 @@ export default class DragNDrop extends Module {
dragImage.style.top = '-1000px';
const clones = blocks.map(block => block.holder.querySelector(`.${Block.CSS.content}`).cloneNode(true));
dragImage.append(...clones);
UI.nodes.holder.appendChild(dragImage);

2
src/components/modules/toolbar/index.ts
View file

@ -467,7 +467,7 @@ export default class Toolbar extends Module<ToolbarNodes> {
*/
this.readOnlyMutableListeners.on(this.nodes.settingsToggler, 'dragstart', () => {
const { BlockManager, BlockSettings, BlockSelection } = this.Editor;
/** Close components */
this.tooltip.hide(true);
this.blockActions.hide();

8
src/components/utils.ts
View file

@ -376,8 +376,8 @@ export function delay(method: (...args: any[]) => any, timeout: number) {
return function (): void {
// eslint-disable-next-line @typescript-eslint/no-this-alias
const context = this,
// eslint-disable-next-line prefer-rest-params
args = arguments;
// eslint-disable-next-line prefer-rest-params
args = arguments;
window.setTimeout(() => method.apply(context, args), timeout);
};
@ -794,7 +794,7 @@ export function equals(var1: unknown, var2: unknown): boolean {
*
* @param {HTMLElement} elem - The element to scroll to.
*/
export function scrollToView(elem: HTMLElement) {
export function scrollToView(elem: HTMLElement):void {
// Get the target element and its bounding rectangle
const targetRect = elem.getBoundingClientRect();
@ -815,7 +815,7 @@ export function scrollToView(elem: HTMLElement) {
window.scrollTo({
top: targetRect.top,
left: targetRect.left,
behavior: 'smooth'
behavior: 'smooth',
});
}
}

569
test/cypress/tests/dragnDrop.spec.ts
View file

@ -1,320 +1,313 @@
import Header from "@editorjs/header";
import Image from "@editorjs/simple-image";
import * as _ from "../../../src/components/utils";
import Header from '@editorjs/header';
import Image from '@editorjs/simple-image';
import * as _ from '../../../src/components/utils';
import 'cypress-file-upload';
describe("Drag and drop the block of Editor", function () {
beforeEach(function () {
cy.createEditor({
tools: {
header: Header,
image: Image,
},
}).as("editorInstance");
describe('Drag and drop the block of Editor', function () {
beforeEach(function () {
cy.createEditor({
tools: {
header: Header,
image: Image,
},
}).as('editorInstance');
const numberOfBlocks = 3;
for (let i = 0; i < numberOfBlocks; i++) {
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.last()
.click()
.type(`Block ${i}{enter}`);
}
});
const numberOfBlocks = 3;
for (let i = 0; i < numberOfBlocks; i++) {
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.last()
.click()
.type(`Block ${i}{enter}`);
}
});
afterEach(function () {
if (this.editorInstance) {
this.editorInstance.destroy();
}
});
afterEach(function () {
if (this.editorInstance) {
this.editorInstance.destroy();
}
});
/**
* @todo check with dropping file other than the image.
*/
it("should drop file", function () {
// Read file locally
cy.readFile('example/assets/codex2x.png', 'base64').then((base64) => {
// Create URI
const uri = 'data:image/png;base64,' + base64;
// Test by dropping the image.
cy.get("[data-cy=editorjs]")
.get('div.ce-block')
.last()
// drop the file from the given path
// use cypress-file-upload command attached.
.attachFile('../../../example/assets/codex2x.png', { subjectType: 'drag-n-drop' })
.wait(10);
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', uri);
/**
* @todo check with dropping file other than the image.
*/
it('should drop file', function () {
// Read file locally
cy.readFile('example/assets/codex2x.png', 'base64').then((base64) => {
// Create URI
const uri = 'data:image/png;base64,' + base64;
// Test by dropping the image.
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.last()
// drop the file from the given path
// use cypress-file-upload command attached.
.attachFile('../../../example/assets/codex2x.png', {
subjectType: 'drag-n-drop',
})
.wait(10);
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', uri);
});
});
it("should have block dragover style on the top of target block", function () {
it('should have block dragover style on the top of target block', function () {
cy.get('[data-cy=editorjs]').get('div.ce-block').first().click();
const dataTransfer = new DataTransfer();
cy.get('.ce-toolbar__settings-btn').trigger('dragstart', { dataTransfer });
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.eq(2)
.trigger('dragenter')
.then((blocks) => {
// Get the target block rect.
const targetBlockRect = blocks[0].getBoundingClientRect();
const yShiftFromMiddleLine = -20;
// Dragover on target block little bit above the middle line.
const dragOverYCoord =
targetBlockRect.y +
(targetBlockRect.height / 2 + yShiftFromMiddleLine);
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.first()
.click();
.get('div.ce-block')
.eq(2)
.trigger('dragover', {
clientX: targetBlockRect.x,
clientY: dragOverYCoord,
})
.then(($element) => {
// check for dragover top style on target element.
const classes = $element.attr('class').split(' ');
expect(classes).to.include('ce-block--drop-target');
expect(classes).to.include('ce-block--drop-target-top');
});
});
});
const dataTransfer = new DataTransfer();
it('should have block dragover style on the bottom of target block', function () {
cy.get('[data-cy=editorjs]').get('div.ce-block').first().click();
cy.get('.ce-toolbar__settings-btn')
.trigger("dragstart", { dataTransfer });
const dataTransfer = new DataTransfer();
cy.get('.ce-toolbar__settings-btn').trigger('dragstart', { dataTransfer });
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.eq(2)
.trigger('dragenter')
.then((blocks) => {
// Get the target block rect.
const targetBlockRect = blocks[0].getBoundingClientRect();
const yShiftFromMiddleLine = 20;
// Dragover on target block little bit below the middle line.
const dragOverYCoord =
targetBlockRect.y +
(targetBlockRect.height / 2 + yShiftFromMiddleLine);
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.eq(2)
.trigger("dragenter").then((blocks) => {
// Get the target block rect.
const targetBlockRect = blocks[0].getBoundingClientRect();
const yShiftFromMiddleLine = -20;
// Dragover on target block little bit above the middle line.
const dragOverYCoord = (targetBlockRect.y + (targetBlockRect.height / 2 + yShiftFromMiddleLine));
.get('div.ce-block')
.eq(2)
.trigger('dragover', {
clientX: targetBlockRect.x,
clientY: dragOverYCoord,
})
.then(($element) => {
// check for dragover top style on target element.
const classes = $element.attr('class').split(' ');
expect(classes).to.include('ce-block--drop-target');
expect(classes).to.include('ce-block--drop-target-bottom');
});
});
});
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.eq(2)
.trigger("dragover", {
clientX: targetBlockRect.x,
clientY: dragOverYCoord
})
.then($element => {
// check for dragover top style on target element.
const classes = $element.attr('class').split(' ');
expect(classes).to.include('ce-block--drop-target');
expect(classes).to.include('ce-block--drop-target-top');
});
})
});
it('should drag the first block and drop after the last block.', function () {
cy.get('[data-cy=editorjs]').get('div.ce-block').first().click();
it("should have block dragover style on the bottom of target block", function () {
const dataTransfer = new DataTransfer();
cy.get('.ce-toolbar__settings-btn').trigger('dragstart', { dataTransfer });
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.eq(2)
.trigger('dragenter')
.then((blocks) => {
// Get the target block rect.
const targetBlockRect = blocks[0].getBoundingClientRect();
const yShiftFromMiddleLine = 20;
// Dragover on target block little bit below the middle line.
const dragOverYCoord =
targetBlockRect.y +
(targetBlockRect.height / 2 + yShiftFromMiddleLine);
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.first()
.click();
.get('div.ce-block')
.eq(2)
.trigger('dragover', {
clientX: targetBlockRect.x,
clientY: dragOverYCoord,
})
.trigger('drop', { dataTransfer });
});
const dataTransfer = new DataTransfer();
cy.get('.ce-toolbar__settings-btn').trigger('dragend', { dataTransfer });
cy.get('.ce-toolbar__settings-btn')
.trigger("dragstart", { dataTransfer });
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.then((blocks) => {
expect(blocks[0].textContent).to.eq('Block 1');
expect(blocks[1].textContent).to.eq('Block 2');
expect(blocks[2].textContent).to.eq('Block 0');
});
});
it('should drag the last block and drop before the first block.', function () {
cy.get('[data-cy=editorjs]').get('div.ce-block').eq(2).click();
const dataTransfer = new DataTransfer();
cy.get('.ce-toolbar__settings-btn').trigger('dragstart', { dataTransfer });
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.eq(0)
.trigger('dragenter')
.then((blocks) => {
// Get the target block rect.
const targetBlockRect = blocks[0].getBoundingClientRect();
const yShiftFromMiddleLine = -20;
// Dragover on target block little bit below the middle line.
const dragOverYCoord =
targetBlockRect.y +
(targetBlockRect.height / 2 + yShiftFromMiddleLine);
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.eq(2)
.trigger("dragenter").then((blocks) => {
// Get the target block rect.
const targetBlockRect = blocks[0].getBoundingClientRect();
const yShiftFromMiddleLine = 20;
// Dragover on target block little bit below the middle line.
const dragOverYCoord = (targetBlockRect.y + (targetBlockRect.height / 2 + yShiftFromMiddleLine));
.get('div.ce-block')
.eq(0)
.trigger('dragover', {
clientX: targetBlockRect.x,
clientY: dragOverYCoord,
})
.trigger('drop', { dataTransfer });
});
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.eq(2)
.trigger("dragover", {
clientX: targetBlockRect.x,
clientY: dragOverYCoord
})
.then($element => {
// check for dragover top style on target element.
const classes = $element.attr('class').split(' ');
expect(classes).to.include('ce-block--drop-target');
expect(classes).to.include('ce-block--drop-target-bottom');
});
})
});
cy.get('.ce-toolbar__settings-btn').trigger('dragend', { dataTransfer });
it("should drag the first block and drop after the last block.", function () {
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.then((blocks) => {
expect(blocks[0].textContent).to.eq('Block 2');
expect(blocks[1].textContent).to.eq('Block 0');
expect(blocks[2].textContent).to.eq('Block 1');
});
});
it('should drag the first two block and drop after the last block.', function () {
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.eq(0)
.type('{movetoend}')
.trigger('keydown', {
shiftKey: true,
keyCode: _.keyCodes.UP,
})
.trigger('keydown', {
shiftKey: true,
keyCode: _.keyCodes.DOWN,
})
.click();
const dataTransfer = new DataTransfer();
cy.get('.ce-toolbar__settings-btn').trigger('dragstart', { dataTransfer });
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.eq(2)
.trigger('dragenter')
.then((blocks) => {
// Get the target block rect.
const targetBlockRect = blocks[0].getBoundingClientRect();
const yShiftFromMiddleLine = 20;
// Dragover on target block little bit below the middle line.
const dragOverYCoord =
targetBlockRect.y +
(targetBlockRect.height / 2 + yShiftFromMiddleLine);
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.first()
.click();
.get('div.ce-block')
.eq(2)
.trigger('dragover', {
clientX: targetBlockRect.x,
clientY: dragOverYCoord,
})
.trigger('drop', { dataTransfer });
});
const dataTransfer = new DataTransfer();
cy.get('.ce-toolbar__settings-btn')
.trigger("dragstart", { dataTransfer });
cy.get('.ce-toolbar__settings-btn').trigger('dragend', { dataTransfer });
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.then((blocks) => {
expect(blocks[0].textContent).to.eq('Block 2');
expect(blocks[1].textContent).to.eq('Block 0');
expect(blocks[2].textContent).to.eq('Block 1');
});
});
it('should drag the last two block and drop before the first block.', function () {
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.eq(1)
.type('{movetoend}')
.trigger('keydown', {
shiftKey: true,
keyCode: _.keyCodes.UP,
})
.trigger('keydown', {
shiftKey: true,
keyCode: _.keyCodes.DOWN,
})
.click();
const dataTransfer = new DataTransfer();
cy.get('.ce-toolbar__settings-btn').trigger('dragstart', { dataTransfer });
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.eq(0)
.trigger('dragenter')
.then((blocks) => {
// Get the target block rect.
const targetBlockRect = blocks[0].getBoundingClientRect();
const yShiftFromMiddleLine = -20;
// Dragover on target block little bit below the middle line.
const dragOverYCoord =
targetBlockRect.y +
(targetBlockRect.height / 2 + yShiftFromMiddleLine);
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.eq(2)
.trigger("dragenter").then((blocks) => {
// Get the target block rect.
const targetBlockRect = blocks[0].getBoundingClientRect();
const yShiftFromMiddleLine = 20;
// Dragover on target block little bit below the middle line.
const dragOverYCoord = (targetBlockRect.y + (targetBlockRect.height / 2 + yShiftFromMiddleLine));
.get('div.ce-block')
.eq(0)
.trigger('dragover', {
clientX: targetBlockRect.x,
clientY: dragOverYCoord,
})
.trigger('drop', { dataTransfer });
});
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.eq(2)
.trigger("dragover", {
clientX: targetBlockRect.x,
clientY: dragOverYCoord
})
.trigger("drop", { dataTransfer });
})
cy.get('.ce-toolbar__settings-btn')
.trigger("dragend", { dataTransfer });
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.then(blocks => {
expect(blocks[0].textContent).to.eq('Block 1');
expect(blocks[1].textContent).to.eq('Block 2');
expect(blocks[2].textContent).to.eq('Block 0');
});
});
it("should drag the last block and drop before the first block.", function () {
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.eq(2)
.click();
const dataTransfer = new DataTransfer();
cy.get('.ce-toolbar__settings-btn')
.trigger("dragstart", { dataTransfer });
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.eq(0)
.trigger("dragenter").then((blocks) => {
// Get the target block rect.
const targetBlockRect = blocks[0].getBoundingClientRect();
const yShiftFromMiddleLine = -20;
// Dragover on target block little bit below the middle line.
const dragOverYCoord = (targetBlockRect.y + (targetBlockRect.height / 2 + yShiftFromMiddleLine));
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.eq(0)
.trigger("dragover", {
clientX: targetBlockRect.x,
clientY: dragOverYCoord
})
.trigger("drop", { dataTransfer });
})
cy.get('.ce-toolbar__settings-btn')
.trigger("dragend", { dataTransfer });
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.then(blocks => {
expect(blocks[0].textContent).to.eq('Block 2');
expect(blocks[1].textContent).to.eq('Block 0');
expect(blocks[2].textContent).to.eq('Block 1');
});
});
it("should drag the first two block and drop after the last block.", function () {
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.eq(0)
.type('{movetoend}')
.trigger('keydown', {
shiftKey: true,
keyCode: _.keyCodes.UP,
})
.trigger('keydown', {
shiftKey: true,
keyCode: _.keyCodes.DOWN,
}).click();
const dataTransfer = new DataTransfer();
cy.get('.ce-toolbar__settings-btn')
.trigger("dragstart", { dataTransfer });
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.eq(2)
.trigger("dragenter").then((blocks) => {
// Get the target block rect.
const targetBlockRect = blocks[0].getBoundingClientRect();
const yShiftFromMiddleLine = 20;
// Dragover on target block little bit below the middle line.
const dragOverYCoord = (targetBlockRect.y + (targetBlockRect.height / 2 + yShiftFromMiddleLine));
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.eq(2)
.trigger("dragover", {
clientX: targetBlockRect.x,
clientY: dragOverYCoord
})
.trigger("drop", { dataTransfer });
})
cy.get('.ce-toolbar__settings-btn')
.trigger("dragend", { dataTransfer });
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.then(blocks => {
expect(blocks[0].textContent).to.eq('Block 2');
expect(blocks[1].textContent).to.eq('Block 0');
expect(blocks[2].textContent).to.eq('Block 1');
});
});
it("should drag the last two block and drop before the first block.", function () {
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.eq(1)
.type('{movetoend}')
.trigger('keydown', {
shiftKey: true,
keyCode: _.keyCodes.UP,
})
.trigger('keydown', {
shiftKey: true,
keyCode: _.keyCodes.DOWN,
}).click();
const dataTransfer = new DataTransfer();
cy.get('.ce-toolbar__settings-btn')
.trigger("dragstart", { dataTransfer });
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.eq(0)
.trigger("dragenter").then((blocks) => {
// Get the target block rect.
const targetBlockRect = blocks[0].getBoundingClientRect();
const yShiftFromMiddleLine = -20;
// Dragover on target block little bit below the middle line.
const dragOverYCoord = (targetBlockRect.y + (targetBlockRect.height / 2 + yShiftFromMiddleLine));
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.eq(0)
.trigger("dragover", {
clientX: targetBlockRect.x,
clientY: dragOverYCoord
})
.trigger("drop", { dataTransfer });
})
cy.get('.ce-toolbar__settings-btn')
.trigger("dragend", { dataTransfer });
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.then(blocks => {
expect(blocks[0].textContent).to.eq('Block 1');
expect(blocks[1].textContent).to.eq('Block 2');
expect(blocks[2].textContent).to.eq('Block 0');
});
});
cy.get('.ce-toolbar__settings-btn').trigger('dragend', { dataTransfer });
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.then((blocks) => {
expect(blocks[0].textContent).to.eq('Block 1');
expect(blocks[1].textContent).to.eq('Block 2');
expect(blocks[2].textContent).to.eq('Block 0');
});
});
});