Search code examples
apostrophe-cms

Apostrophe cms - inline editing of singleton/area in custom widgets (html) not working


Similar to this: Apostrophe cms - inline editing of rich text in custom widgets? but the answers there did not help.

Inline editing of text/images on a custom widget, ie singletons and areas in the html template, are not saving. I checked the network tab and noticed for the exact same areas outside of the custom widgets save-area is hit; not so inside the custom one! I upgraded everything, and am at "apostrophe": "^2.44.0",

Any ideas?

I am using workflow by the way.

I did some investigation and noticed the widgets that do not save are missing the attr data-autosave and tracked it down to this: {% if not data.options.virtual %} data-autosave{% endif %}

Disabling that causes errors: You were unable to take control of the document .

After a bit more digging, I think it is because the area/singleton within the widget has not had its ID committed to db yet, so the call to lock at /modules/apostrophe-docs/lock fails and returns {"status":"notfound"} (this is done before save and save cannot progress therefore). This works fine for "in-page" singletons/areas, just not the ones in widgets which I assume as "virtual" as noted above in the template conditional.


Solution

  • "Spontaneous areas" - areas that do not appear in any schema - are only permitted at the top level of a doc (page or piece). Any area that is a sub-property of a widget or schema array item must be present in the schema of that widget. And as long as it is, it works as expected.

    You can achieve what you're aiming to achieve by making separate widgets for "one-column," "two-column," etc. which do define the areas they need in their schemas. And this makes for a pretty nice user experience too.