Define new "block-updated" event.

[krisnik]

The question.

How to differentiate Block Update (vs) Block insert / delete.

Why and how the question has come up.

When block is updated using block.update(id, BlockToolData) - EditorJS onChange api gets called twice. once with blocked-removed and later with block-added events.

block-removed and block-added events are also fired when the blocks are deleted / added to the EditorJS instance.

Hence, from the onChange response, it is not possible to differentiate if block's content is updated or a new block is added / existing block is removed.

[lijie1129]

I think this is because the update function is implemented by calling the insert function and specifying the replace parameter as true.

Therefore, there are two final actions:

• delete the old block
• insert the block holding the new data in the original location.

This is why an update causes the onChange API gets called twice.

This is the definition of the update function:

editor.js/src/components/modules/api/blocks.ts

Lines 291 to 311 in 870e265

	public update = (id: string, data: BlockToolData): void => {
	const { BlockManager } = this.Editor;
	const block = BlockManager.getBlockById(id);
	if (!block) {
	_.log('blocks.update(): Block with passed id was not found', 'warn');
	return;
	}
	const blockIndex = BlockManager.getBlockIndex(block);
	BlockManager.insert({
	id: block.id,
	tool: block.name,
	data,
	index: blockIndex,
	replace: true,
	tunes: block.tunes,
	});
	};

This is the definition of the insert function:

editor.js/src/components/modules/blockManager.ts

Lines 266 to 322 in 870e265

	public insert({
	id = undefined,
	tool = this.config.defaultBlock,
	data = {},
	index,
	needToFocus = true,
	replace = false,
	tunes = {},
	}: {
	id?: string;
	tool?: string;
	data?: BlockToolData;
	index?: number;
	needToFocus?: boolean;
	replace?: boolean;
	tunes?: {[name: string]: BlockTuneData};
	} = {}): Block {
	let newIndex = index;
	if (newIndex === undefined) {
	newIndex = this.currentBlockIndex + (replace ? 0 : 1);
	}
	const block = this.composeBlock({
	id,
	tool,
	data,
	tunes,
	});
	/**
	* In case of block replacing (Converting OR from Toolbox or Shortcut on empty block OR on-paste to empty block)
	* we need to dispatch the 'block-removing' event for the replacing block
	*/
	if (replace) {
	this.blockDidMutated(BlockMutationType.Removed, this.getBlockByIndex(newIndex), {
	index: newIndex,
	});
	}
	this._blocks.insert(newIndex, block, replace);
	/**
	* Force call of didMutated event on Block insertion
	*/
	this.blockDidMutated(BlockMutationType.Added, block, {
	index: newIndex,
	});
	if (needToFocus) {
	this.currentBlockIndex = newIndex;
	} else if (newIndex <= this.currentBlockIndex) {
	this.currentBlockIndex++;
	}
	return block;
	}

It seems that the simple way is:

1. Provide a new function in the blockManager.ts file to update the block's data according to the specified block ID. (This function locates the correct block in this._blocks by ID and directly replace it.)
2. Then, directly call the new function defined above in the update function of the api/blocks.ts file.
3. Finally, trigger the onChange API once.

[lijie1129]

Why does it need to support a single event

Recently, I tried to make a binding between the YJS and EditorJS.

This is to realize an idea. Please refer to here.

First

Since the synchronization EditorJS changes to the data model (YJS doc) is triggered by onChange.

It is necessary to minimize unnecessary events and avoid performance waste.

Second

In the scenario of multi-person collaborative editing, directly removing and replacing the DOM of the entire block will cause the collaborator to lose the input focus, which will cause experience problems.

Therefore, it is a good way to delegate the work of updating a specific block content to a specific plug-in.

[lijie1129]

Why does it need to support a single event

Recently, I tried to make a binding between the YJS and EditorJS.

This is to realize an idea. Please refer to here.

First

Since the synchronization EditorJS changes to the data model (YJS doc) is triggered by onChange.

It is necessary to minimize unnecessary events and avoid performance waste.

Second

In the scenario of multi-person collaborative editing, directly removing and replacing the DOM of the entire block will cause the collaborator to lose the input focus, which will cause experience problems.

Therefore, it is a good way to delegate the work of updating a specific block content to a specific plug-in.

Good job! @neSpecc

This issue has been resolved.

So my work can be continue.

922dfd8

[krisnik]

Thank you for the fix @neSpecc . Marking as resolved.