EditorJS保存恢复块时顶部始终出现空块的原因咨询

使用EditorJS时，我在编辑区域输入文本并在内容变更时保存。例如输入一个单词，会得到一个块。后续恢复内容时，我先执行清除块操作，再逐个添加块：

myEditor.blocks.clear();
for (let block of notes.blocks) {
myEditor.blocks.insert(block.type, block.data);
}

但每次恢复后编辑区域顶部都会出现一个空行，请问这是什么原因？

原因 #

EditorJS的blocks.clear()方法执行后，编辑器会自动创建一个默认的空段落块（paragraph类型），用来保证编辑区域始终有可输入的位置。当你后续逐个插入原有块时，这个自动生成的空块就会被留在顶部，表现为一个空行。

解决方法 #

有两种实用的处理方式：

1. 清除后先移除自动生成的空块
   在执行clear()之后，检查并删除编辑器自动创建的空块，再插入原有内容：

   myEditor.blocks.clear();
   // 获取第一个块并判断是否为空（针对paragraph块）
   const firstBlock = myEditor.blocks.getBlockByIndex(0);
   if (firstBlock && !firstBlock.data.text) {
     myEditor.blocks.delete(firstBlock.id);
   }
   // 插入原有块
   for (let block of notes.blocks) {
     myEditor.blocks.insert(block.type, block.data);
   }
   

2. 直接使用render方法渲染整个内容
   替代先清除再逐个插入的逻辑，用render()方法直接覆盖现有内容，编辑器会自动处理初始化，不会生成多余空块：

   myEditor.render({
     blocks: notes.blocks
   });
   

内容的提问来源于stack exchange，提问作者user4657635