% if type(form.default_value)==dict:
<%
    form.default_value='{}'
%>
% endif

<p>
<div id="${form.name_field_id}_editor" style="background: #454545; color: #fbfbfb;">
    
</div>
<input type="hidden" name="${form.name}" id="${form.name_field_id}" />
</p>
<script>
    
const editor = new EditorJS( {holder : '${form.name_field_id}_editor', data: ${form.default_value|n} ,

tools: {
    
    image: {
      class: ImageTool,
      config: {
        endpoints: {
          byFile: "${url_for('pages2_app.pages2_upload_image')}", // Your backend file uploader endpoint
          //byUrl: "${url_for('pages2_app.pages2_upload_image')}", // Your endpoint that provides uploading by Url
        }
      }
    }
  }
}
);

$('form').submit(function (e) {

    editor.save().then((outputData) => {
      console.log('Article data: ', outputData)
      
      $('#${form.name_field_id}').val(JSON.stringify(outputData));
      
    }).catch((error) => {
      console.log('Saving failed: ', error)
    });

});

</script>
${add_js('editorjs.umd.js', 'pages2')}
${add_js('image.umd.js', 'pages2')}