New block lifecycle hook and BlockToolAPI: "moved"

[natterstefan]

Related Issue

resolves #1005, which describes an example use-case for this feature in more details.

How to test

cd example/tools/header
code src/index.js

add the following code at the bottom (near line 464)

  moved(event) {
    console.log('>> I WAS MOVED', event);
  }

and run yarn build.

Finally, open the example page with open example/example-dev.html and swap the header tool.

Notes

This is my very first contribution to https://github.com/codex-team/editor.js, and I need to get used to your plans about lifecycles and callbacks. So please, be gentle ;)

Additionally, it might be helpful when there's a "How to develop" section in the README. After, checking the package.json's scripts section I had an idea how to start though. ==> https://editorjs.io/core-development

Example

https://d.pr/i/SUOMHq/9TjBiEy2mF

[natterstefan]

@neSpecc @khaydarov @gohabereg Could you please review this feature? Our customers and apps definitely need this one. Thanks for your help and time! Highly appreciated.

[gohabereg]

Hi @natterstefan
PR is OK. However, we discussed with the team and decided that swap operation is logically incorrect. Hook should be triggered only for block user moves. So operation should be move(block, index) (as well as hook should be MOVED) and should use insertAdjacentElement and splice methods for DOM and blocks array respectively.

Could you implement these changes yourself?

[natterstefan]

Hi @gohabereg, as discussed I deprecated swap and added move instead. Let me know what you think, please.

[natterstefan]

FTR: I am not entirely happy with the wording MoveEvent but MoveResult seemed wrong as well ==> https://github.com/codex-team/editor.js/pull/1007/files#diff-c1c1acd51e3a8ab70e7639423cb0f08fR480. Maybe you have a better idea and wording for that.

[gohabereg]

FTR: I am not entirely happy with the wording MoveEvent but MoveResult seemed wrong as well ==> https://github.com/codex-team/editor.js/pull/1007/files#diff-c1c1acd51e3a8ab70e7639423cb0f08fR480. Maybe you have a better idea and wording for that.

Well, it's not actually an event. However, I think it's ok

[Infonautica]

I wait for this feature so much!
Suggestions for MoveEvent naming:
Result, indexes, changes, info, details, updates

[gohabereg]

I've created release/2.17 branch, can switch the PR's base please

[natterstefan]

Hello @gohabereg, hello @neSpecc.

I've updated the PR, according to your review and changed the MoveEvent. It represents now more the shape of an event. See ae07a65#diff-0e4c6bcb0a2e8a6a478c9c39ba9531fe, please.

[neSpecc]

Everything is ok

[neSpecc]

I don't quite understand, why we need this detail wrapper?

[gohabereg]

This is common Event structure

[Infonautica]

Not simple Event i suppose, but CustomEvent structure:
https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent

So, maybe better way is
export interface MoveEvent extends CustomEvent<MoveEventDetail> {}

[neSpecc]

@Infonautica yes, that is what I'm talking about.
@natterstefan if you want to create an event-like structure, it's better to use CustomEvent.

[neSpecc]

Waiting for improving CustomEvent implementation

[neSpecc]

@natterstefan hi, what about this request? It requires little improvements.

[natterstefan]

Hi, I'm sorry Peter. It's definitely on my todo list and I know what you mean and what’s left. :) Ok?

[neSpecc]

@natterstefan sure, thanks.

[khaydarov]

@natterstefan thank you, merged it. Checkout release2.17

[natterstefan]

@natterstefan thank you, merged it. Checkout release2.17

thanks for completing the feature and branch! Awesome, can't wait to use this new feature. 🤘🏻