Empty block not being added to blocks[]

When you hit Enter, a new and empty paragraph block is added on page. However, this does not get added to the blocks[] array.

The problem with this is that the getCurrentBlockIndex() API method queries elements from the DOM, so it’s now de-synced from the actual data - you can’t use it as a source of truth anymore. In a Vue.js context, where data is your source of truth, this is problematic.

In my case, this happens:

1. I have a paragraph block on page - this would be at index 0 if queried for
2. hit Enter, new paragraph block created on page, at index 1 (but not in data)
3. insert a new block at the end with the API (triggered with click on a button). This block is at index 2 when queried for, but at index 1 in my blocks[] data, because nothing was added at step 2…

Any ideas on how to overcome this?

[ngmiduc]

Hi @cossssmin ,

Empty blocks are not added to saved data because of validation provided by Tools. Default Editor.js paragraph doesn’t validate empty strings. You can fork it, change validate method, and provide at tools object of configuration.

Thanks for the solution. If someone wants to a React Overwrite. I paste it here, if maybe someone looks for that.

const NewParagraphTool = (function (original) {
  function Paragraph() {
    original.apply(this, arguments) 
    this.validate = function (savedData) {
      // if (savedData.text.trim() === "" && !this._preserveBlank) {
      //   return false
      // }

      return true
    }
  }
  Paragraph.prototype = original.prototype 
  Paragraph.prototype.constructor = Paragraph 
  return Paragraph
})(Paragraph)

[cossssmin]

Thanks @gohabereg, but I don’t want to have to maintain a fork - all I’d want is for the getCurrentBlockIndex() to work reliably 😃