Improve BlockManager.update method

[AricZhu]

The question

When calling update method, the original block will be deleted and a new block will be created. This will cause the editor to flicker. The problem will be more obvious during continuous updates. The code of the recurrence problem is as follows:

const str = 'when interval update this text, it will cause the editor to flicker.';
await intervalInvoke(
  async (curInvokeIndex) => {
    editor.blocks.update('your-block-id', {
      text: str.slice(0, curInvokeIndex),
    });
  },
  100,
  50
);

async function delay(ms) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(0);
    }, ms);
  });
}

async function intervalInvoke(
  fn,
  intervalTimeMs,
  invokeTimes
) {
  return new Promise((resolve) => {
    let count = 0;
    const invoke = async () => {
      const ret = await fn(count);
      if (ret === false) {
        return resolve(0);
      }
      count++;
      if (count >= invokeTimes) {
        return resolve(0);
      }
      await delay(intervalTimeMs);
      invoke();
    };

    invoke();
  });
}

Solution

To address the issues above, we can add support for the block.update method to avoid re creation. Of course, if ToolInstance does not provide an update method, it can still be downgraded to the original creation method to achieve updates.

So, I push a PR, please help review it.