Contextual editing of Pieces related to other pieces

Question

I've been looking for a solution of this and the only thing that I've seen this issue On-page, in-context editing of areas nested in array elements does not save. I've updated apostrophe but I've seen that it doesn't fix my issue.

In my piece-page where I show the fields result of a join with another piece with apos.area o apos.singleton, and it implies that you can edit the fields but when you reload the page or you go to the modal to see if the content of the second piece has change, you see that it doesn't. But if you change the content of the piece that corresponds to the piece-page, this one does change, of course.

Is there anyway, to show the content of that field but without giving the user the possibility of thinking that it is editable, because actually it doesn't maintain the change when the page is refreshed.

Edit

I have this code in mi indix.js

module.exports = {
extend: 'apostrophe-pieces',
name: 'newsletter',
label: 'Newsletter',
pluralLabel: 'Newsletters',
addFields: [
  Other fields... ,
  {
    name: 'body',
    label: 'Newsletter Text',
    type: 'area',
    options: {
      widgets: {
        'apostrophe-rich-text': {
          toolbar: [ 'Styles', 'Bold', 'Italic', 'Link', 'Unlink', 'Anchor', 'Table',
           'BulletedList', 'Blockquote', 'Strike', 'Subscript', 'Superscript', 'Split'],
          styles:[
            { name: 'Title', element: 'h3' },
            { name: 'Meta', element: 'h5' }
          ]
        },
        'apostrophe-images': {}
      }
    }
  },
  {
    name: '_articles',
    label: 'Articles',
    type: 'joinByArray',
    withType: 'article',
  },
 ],
};

And int the show.html of newsletters page I have this

{{ apos.singleton(article, 'body', 'locked-widget', {
     edit: false
  })
}}

Answer 1

As Alexbea commeted on my question, the best way to make this text non-edittable is

{{ apos.areas.richText(article.body) }}

as same as for the images, it work for me.

apos.attachments.url(...)