Some experiement around a better Raw Content mode

[dfeyer]

For a current project we need to have a better Raw Content mode. I create this issue to follow my experiment, currently no code online. Need to refactor the project the make an decoupled package.

Current situation

Currently Raw Content mode only works for ContentCollection, and need some love to be really usable with advanced node types.

Goals

My current plan are to make it more flexible and convention based (UI, Fusion, ...), backed by a Fusion configuration to render any node types with a huge rendering flexibility, based on what @dimaip did with the StructuredEditing to edit property that are normally only accessible in the Inspector.

The current rendering of a content collection look like:

And a more advanced node type render like this:

Todos

• More flexible Raw Content mode
• Basic convention to configure how a node type can be rendered in Raw Content mode
• A slick UI, inspired by GraphCMS and Netifly CMS
• A custom FusionPrototypeGenerator to generate a default configuration based on the Node Type configuration (maybe we need to support multiple FusionPrototypeGenerator, to make this more configurable.

[dfeyer]

Now the EditorEnveloppe is integrated, looks good

[dimaip]

@dfeyer maybe it makes sense to integrate those editors directly in the raw mode, without putting them into the dropdown?

[dfeyer]

@dfeyer maybe it makes sense to integrate those editors directly in the raw mode, without putting them into the dropdown?

To not loose the message I post on slack earlier. I think it depend for the use case and property type. In this case, maybe replace the pencil button of the EditorEnveloppe, by the action button of the image editor is the way to go. Currently I focus on the prototype of the backend rendering of the Raw Content mode. When that part is done, we can experiment a bit more with custom Editor or more smart UX choices.

I want the Raw Content mode to be fully customized in term of rendering (style, inline help, ...) and the rendering should be full fusion. So I'm a bit against the direct rendering of our Editor inline for this reason. But I full agree the the current duplicate image is awkward

[dfeyer]

Configuration of the rendering

We need a way to make the configuration of the Raw Content rendering easy. I'm currently experimenting with layout configuration in Settings.yaml. I use Ttree.Writer package as an experiment, so the configuration look like this:

Medialib.Core.Party:Document.Person:
  options:
    Ttree:Writer:
      layout:
        default:
          title:
            path: properties.title
          help:
            position: 'after title'
            path: Medialib.Core.Party:Help.Person
          biography:
            path: childNodes.biography
          image:
            path: childNodes.image
          main:
            path: childNodes.main
          birthDate:
            path: properties.birthDate
          birthPlace:
            path: properties.birthPlace
          deathDate:
            path: properties.deathDate
          deathPlace:
            path: properties.deathPlace
          nationality:
            path: properties.birthDate

Requirements

• For each block of the RawContent we can render: a property, a child node or a custom Fusion prototype
• Reuse the configuration of the property/childNode
• Maybe in the future can override this configuration in the layout
• Can support multiple layout (currently only the default one). The idea in the future is to have for a single editing mode, multiple preset (like for a Person: Contact Information, Customer Detail, Internal Note, ....)
• Support Positionnal ordering to make it easy to extend
• If a node type does not have a configured Layout, we can use a default one, like: All property, All child nodes, ....

[dfeyer]

Made some progress on the automatic layout, my current experiment are available on the dev-master branch of https://github.com/ttreeagency/Writer

This is currently only tested on a big mono-repo application, and not fully working (only string property can be edited, ...) so a lots of job needs to be done, and I need to think about the UI again, need some improvements.