mirror of
https://github.com/codex-team/editor.js
synced 2024-06-26 09:20:07 +02:00
* Move all modules to ts * It works * Update README.md Co-Authored-By: gohabereg <gohabereg@users.noreply.github.com> * Interfaces * Interfaces * Move depending interfaces to external types * Update README.md * update tools * add some docs * Add some fixes * Add desctiprion for Block declaration and Core properties * Fixes due comments : * Remove Block from external types * Bump version * Update src/components/modules/tools.ts Co-Authored-By: gohabereg <gohabereg@users.noreply.github.com> * Update src/components/core.ts Co-Authored-By: gohabereg <gohabereg@users.noreply.github.com> * Rename gteBlockHTMLByIndex to getBlockByIndex * Remove unnecessary constructors * Clean up bindEvents method * Add InlineToolConstructable interface * Delete legacy notifications class * Fix zero-configuration bugs * Update inline tools and block tunes constructors
79 lines
2 KiB
TypeScript
79 lines
2 KiB
TypeScript
import SelectionUtils from '../selection';
|
|
|
|
import Module from '../__module';
|
|
import Caret from './caret';
|
|
|
|
export default class DragNDrop extends Module {
|
|
|
|
/**
|
|
* If drag has been started at editor, we save it
|
|
*
|
|
* @type Boolean
|
|
* @private
|
|
*/
|
|
private isStartedAtEditor = false;
|
|
|
|
/**
|
|
* Bind events
|
|
*
|
|
* @private
|
|
*/
|
|
public prepare(): void {
|
|
this.bindEvents();
|
|
}
|
|
|
|
/**
|
|
* Add drag events listeners to editor zone
|
|
* @private
|
|
*/
|
|
private bindEvents(): void {
|
|
this.Editor.Listeners.on(this.Editor.UI.nodes.holder, 'drop', this.processDrop, true);
|
|
|
|
this.Editor.Listeners.on(this.Editor.UI.nodes.holder, 'dragstart', (dragEvent: DragEvent) => {
|
|
|
|
if (SelectionUtils.isAtEditor && !SelectionUtils.isCollapsed) {
|
|
this.isStartedAtEditor = true;
|
|
}
|
|
|
|
this.Editor.InlineToolbar.close();
|
|
});
|
|
|
|
/* Prevent default browser behavior to allow drop on non-contenteditable elements */
|
|
this.Editor.Listeners.on(this.Editor.UI.nodes.holder, 'dragover', (e) => e.preventDefault(), true);
|
|
}
|
|
|
|
/**
|
|
* Handle drop event
|
|
*
|
|
* @param {DragEvent} dropEvent
|
|
*/
|
|
private processDrop = async (dropEvent: DragEvent): Promise<void> => {
|
|
const {
|
|
BlockManager,
|
|
Paste,
|
|
} = this.Editor;
|
|
|
|
dropEvent.preventDefault();
|
|
|
|
BlockManager.blocks.forEach((block) => block.dropTarget = false);
|
|
|
|
if (SelectionUtils.isAtEditor && !SelectionUtils.isCollapsed && this.isStartedAtEditor) {
|
|
document.execCommand('delete');
|
|
}
|
|
|
|
this.isStartedAtEditor = false;
|
|
|
|
/**
|
|
* Try to set current block by drop target.
|
|
* If drop target (error will be thrown) is not part of the Block, set last Block as current.
|
|
*/
|
|
try {
|
|
BlockManager.setCurrentBlockByChildNode(dropEvent.target as Node, Caret.positions.END);
|
|
} catch (e) {
|
|
BlockManager.setCurrentBlockByChildNode(BlockManager.lastBlock.holder, Caret.positions.END);
|
|
}
|
|
|
|
Paste.processDataTransfer(dropEvent.dataTransfer, true);
|
|
}
|
|
}
|