Preventing deep content nesting in Neos CMS

Columns.fusion

prototype(My.Site:Component.ContentCollection) < prototype(Neos.Neos:ContentComponent) {
    @cache {
        mode = 'cached'
        entryIdentifier {
            collection = ${node}
        }
        entryTags {
            1 = ${Neos.Caching.descendantOfTag(node)}
            2 = ${Neos.Caching.nodeTag(node)}
        }
        maximumLifetime = ${q(node).context({'invisibleContentShown': true}).children().cacheLifetime()}
    }

    @exceptionHandler = 'Neos\\Neos\\Fusion\\ExceptionHandlers\\NodeWrappingHandler'
}

prototype(My.Site:Helper.Styles) < prototype(Neos.Fusion:DataStructure) {
    @process {
        filter = ${Array.filter(value, (val) => val != '' && val != null)}
        map = ${Array.map(value, (val, prop) => prop + ':' + val)}
        join = ${Array.join(value, ';')}
    }
}

prototype(My.Site:Content.Columns) < prototype(My.Site:Component.ContentCollection) {
    renderer = afx`
        <div class="columns">
            <My.Site:Helper.Styles @path="attributes.style"
                display="flex"
                flex-wrap="wrap"
                margin="-.5rem"
            />
            <Neos.Neos:ContentCollectionRenderer/>
        </div>
    `
}

prototype(My.Site:Content.Column) < prototype(My.Site:Component.ContentCollection) {
    width = ${q(node).property('width')}
    columnBaseWidth = ${q(node).parent().property('columnBaseWidth')}

    renderer = afx`
        <div class="column">
            <My.Site:Helper.Styles @path="attributes.style"
                flex={props.width}
                flex-basis={'calc(' + props.width + '*' + props.columnBaseWidth + ')'}
                padding=".5rem"
            />
            <Neos.Neos:ContentCollectionRenderer/>
        </div>
    `

    @cache.entryTags.parent = ${Neos.Caching.nodeTag(q(node).parent())}
}

NodeTypes.yaml

'My.Site:Mixin.Columns':
  abstract: true
  superTypes:
    'Neos.Neos:Content': true
  ui:
    group: 'structure'
    inspector:
      groups:
        layout:
          label: 'Layout'
          icon: arrows-h
  constraints:
    nodeTypes:
      'Neos.Neos:Content': false
      'My.Site:Mixin.Column': true

'My.Site:Content.Columns':
  superTypes:
    'My.Site:Mixin.Columns': true
    'Neos.Neos:ContentCollection': true
  ui:
    icon: columns
    label: 'Columns'
  properties:
    columnBaseWidth:
      type: string
      ui:
        label: 'Column min width'
        reloadIfChanged: true
        inspector:
          group: layout
          editorOptions:
            placeholder: 'e.g. 33% or 200px'

'My.Site:Mixin.Column':
  abstract: true
  superTypes:
    'Neos.Neos:Content': true
    'Neos.Neos:ContentCollection': true
  ui:
    label: 'Column'
    icon: columns
    group: 'structure'
    inspector:
      groups:
        layout:
          label: 'Layout'
          icon: arrows-h

'My.Site:Content.Column':
  superTypes:
    'My.Site:Mixin.Column': true
  properties:
    width:
      type: integer
      defaultValue: 1
      ui:
        label: 'Width'
        reloadIfChanged: true
        inspector:
          group: layout