next.js starter: Add inline editing for block field

[fmontes]

Is your feature request related to a problem? Please describe.

As a developer, I want to be able to provide my content authors the ability to inline edit block editor field content.

Recently @hmoreras worked in add inline editing for block editor fields.

This required some special markup to be added to the HTML so dotCMS page editor can pick up that and allow the authors to use this functionality.

In the starter /application/vtl/blog/blog-detail.vtl we have the VTL code for that

<div
    class="section-blog-post-content"
    #if ($EDIT_MODE)
        data-language="${CONTENT_LANGUAGE}"
        data-inode="$URLMapContent.inode"
        data-field-name="blogContent" 
        data-content-type="Blog"
        data-block-editor-content="$esc.html($!{URLMapContent.get("blogContent").getContent()})"
    #end
>
    $!{URLMapContent.get("blogContent").toHtml('/application/vtl/blog/blocks/')}    
</div>

Describe the solution you'd like

We need to add the equivalent markup in the react components where we render the block editor, here: https://github.com/dotCMS/dotcms-nextjs-starter/blob/master/src/components/dotCMS/pages/BlogDetail.tsx#L12

Describe alternatives you've considered

N/A

Additional context

N/A

Acceptance criteria

• EMA should work as usual
• Block editor content in the block detail should be inline editable
• Any other existing inline editing should remain the same

[fmontes]

Hey team! Please add your planning poker estimate with Zenhub @hmoreras @jcastro-dotcms @jdotcms @rjvelazco

[rjvelazco]

PR: https://github.com/dotCMS/dotcms-nextjs-starter/pull/139