Reload saved data in editor.js using Vapor 3 backend and Leaf page

I am using a editor.js in a leaf page to allow my users to create a text document. When the user hits save editor.js ouputs what they have created as JSON and I save this to the database with the Vapor back end. This all works fine. I now want the user to be able to go back into the page and edit the content they have been creating, adding more blocks or changing exiting ones. The editor.js docs say that you simply add in the JSON to a data field when you create the editor.

This is how I am doing this. Firstly I bring the data down from the database and encode it to JSON. Then pass it to the leaf page. (Variable Name blockData)

return temCol.findOne(["_id":try ObjectId(tempId)], as: EditData.self).flatMap{ temp in
      let blockData = try JSONEncoder().encode(temp)
      return try req.view().render("docEditor", RenderDocEditor(orgId: orgId, logoUrl: wall?.logoUrl, blockData: blockData))
                }

It is slightly complicated as I am using a leaf tag to bring in the JSON data, and as tags don’t work inside a I first put in a div which will be hidden on the page, once i get it working.

<div id="blockData" >
      #(blockData)
</div>

As it is currently not hidden I can see the data on the page. I then use the following script to load the editor.js.

<script>
    let data = document.getElementById('blockData').innerHTML
    let jd = JSON.parse(data)
    
    const editor = new EditorJS({
      autofocus: true,
      tools: {
          paragraph: {
            class: Paragraph,
            inlineToolbar: true,
             
          },
          header: {
              class: Header,
              config: {
                  placeholder: "Start Writing here",
              }
          },
          list: {
            class: List,
            inlineToolbar: true,
          },
      }
      data: {
             jd
          }
    });
   const saveButton = document.getElementById('save-button');
   const output = document.getElementById('output');

   saveButton.addEventListener('click', () => {
     editor.save().then( savedData => {
        var formData = JSON.stringify(savedData, null, 4);
       output.innerHTML = formData
       docData.value = formData
       theform.submit()
       
     })
   })
</script>

The problem I am having is that the editor is not loading the saved data. Any ideas?

Answer

I guess it works if you change

data: {
  jd
}

To:

data: jd

Advertisement

Answer