feat(ui) : the block can be drag n drop #2285
Conversation
|
Hi, @robonetphy. Scroll feature works only for scrolling to the top, not to the bottom: Screen.Recording.2023-04-02.at.22.25.16.mov |
There was a problem hiding this comment.
Can we extract blocks drag'n'drop feature to a separate class?
There was a problem hiding this comment.
Editor can trigger events, and that class will subscribe on them
There was a problem hiding this comment.
we can but the logic of dropZonePosition is kinda distributed will cause problem I guess.
There was a problem hiding this comment.
dropZonePosition could stay a property of a Block class, it's ok
There was a problem hiding this comment.
can you suggest me for which event we need to do this?
There was a problem hiding this comment.
I guess all the events you're using for that feature:
EditorDragStart
EditorDragEnd
EditorDragOver (if needed)
EditorDrop
The idea is to make a standalone class with blocks drag'n'drop, that wont extend a __Module, but use Editor.js API instead.
Check how the toolbar/index.ts and Toolbox.ts works. Ui.ts emits the block-hovered event and doing its own logic.
/**
* Subscribe to the 'block-hovered' event
*/
this.eventsDispatcher.on(this.Editor.UI.events.blockHovered, (data: {block: Block}) => {
/**
* Do not move toolbar if Block Settings or Toolbox opened
*/
if (this.Editor.BlockSettings.opened || this.toolboxInstance.opened) {
return;
}
this.moveAndOpen(data.block);
});The toolbar/index.ts is still a module, but it would be refactored later. The Toolbox.ts already refactored becaming organized as a standalone class.
this.toolboxInstance = new Toolbox({
api: this.Editor.API.methods,
tools: this.Editor.Tools.blockTools,
i18nLabels: {
filter: I18n.ui(I18nInternalNS.ui.popover, 'Filter'),
nothingFound: I18n.ui(I18nInternalNS.ui.popover, 'Nothing found'),
},
});It works only throught the Editor.js API.
There was a problem hiding this comment.
You can add some API methods if you need. It would be better if that methods will be abstract and usefull not only for a particular feature, but for other potential cases as well
src/components/modules/dragNDrop.ts
Outdated
| Caret.setToBlock(targetBlock, Caret.positions.END); | ||
| } | ||
| /** | ||
| * @todo -Implement to drop a block before the first block, |
There was a problem hiding this comment.
Will you do it in this PR or in a separate one?
test/cypress/tests/dragnDrop.cy.ts
Outdated
|
|
||
| const numberOfBlocks = 3; | ||
|
|
||
| for (let i = 0; i < numberOfBlocks; i++) { |
There was a problem hiding this comment.
Why don't you render the editor just with these blocks?
test/cypress/tests/dragnDrop.cy.ts
Outdated
| expect(blocks[0].textContent).to.eq('Block 1'); | ||
| expect(blocks[1].textContent).to.eq('Block 2'); | ||
| expect(blocks[2].textContent).to.eq('Block 0'); |
There was a problem hiding this comment.
Also would be great to test output data from the .save method.
resolve the problem as @ilyamore88 suggested |
Co-authored-by: Ilya Maroz <[email protected]>
Pls remove the our fixed toolbar at the bottom of the our example and then it will work |
Hi, this problem is not reproducible anymore, thanks. |
What if a user has a footer on his site? |
|
resolves #838
Also improves #2019