How to update some blocks, not all.

[hughfenghen]

Hi, i know editor.render() can update all blocks, Is there any way to update only a certain block?

I see from the source that BlockMananger may be able to do it, but it is not a public API.

If editor.js can get or update specific blocks, it may be beneficial for collaborative editing and performance.

[gohabereg]

Hi @hughfenghen
We gonna export some Block API soon

[hughfenghen]

@gohabereg Good, thanks~

[gohabereg]

Hi @hughfenghen

I've opened a #1075 PR with Block API.

However, at the moment we can't provide a method to update a certain block, as data passed to the Tool constructor. So to update it, we need to construct the new Block with updated data and replace the old one. I don't think this approach is the best one, so we need to design a block update flow and describe it with APIs and docs.

[taurenshaman]

I tried to refactor some code from render method. But when I click Edit from settings part, the edit UI show and hide immediately and show the rendered result. Maybe I should wait for the new feature?

scenario: a textarea to edit KaTeX.

here is the js file: https://gist.github.com/taurenshaman/3cd1dc489defe2999c27fdcc1140ceea

demo: https://taurenshaman.github.io/demo/editor@codexteam+katex.html?v=3

[romanKrds]

Hi @hughfenghen

I've opened a #1075 PR with Block API.

However, at the moment we can't provide a method to update a certain block, as data passed to the Tool constructor. So to update it, we need to construct the new Block with updated data and replace the old one. I don't think this approach is the best one, so we need to design a block update flow and describe it with APIs and docs.

Hi @gohabereg. Thanks a lot for the PR! That's exactly what I need. Only one question, how can I use it? I tried to call updated insert method with new arguments, but get an error: "Cannot read property 'config' of undefined". Could you take a look at the stackblits example? Thanks in advance!

https://stackblitz.com/edit/angular-editorjs-insert?file=src%2Fapp%2Fapp.component.ts

[gaona233]

Hi @hughfenghen

I've opened a #1075 PR with Block API.

However, at the moment we can't provide a method to update a certain block, as data passed to the Tool constructor. So to update it, we need to construct the new Block with updated data and replace the old one. I don't think this approach is the best one, so we need to design a block update flow and describe it with APIs and docs.

is there any way to solve this problem

[milu2003]

i need it too

[hata6502]

👀

[milu2003]

2021-03-20.11.49.39.mov

If you update all the blocks, the page will jump, so the user experience is very bad

let block_data = await this.editor.save();
block_data = _.cloneDeep(block_data);
let find_index = _.findIndex(block_data.blocks, x => {
  return x.data.meta_data._id == a.data.meta_data._id;
});
let old_info = block_data.blocks[find_index];
let new_data = _.cloneDeep(old_info);
new_data.data = _.cloneDeep(a.data);
block_data.blocks[find_index] = new_data;
this.editor.blocks.render(block_data);

Is there any way to execute a plug-in function from the outside? For example, a function of the plug-in is responsible for local updates, rather than re rendering the entire component

@gohabereg

[hata6502]

I think this is a good feature request!
It also related to editorjs-undo: #518

I approach to use the diff library: https://github.com/kpdecker/jsdiff