From 1df97301a746a60079dc6326078736fe56877785 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anke=20H=C3=A4slich?= <anke@neos.io>
Date: Mon, 6 Nov 2023 08:16:25 +0100
Subject: [PATCH] BUGFIX: Neos.NodeTypes.ColumnLayouts prototypes are now a
 ContentComponent

The NodeType fusion renderer is now pure fusion, the behavior including attributes is kept.

Relates: #4537
Relates: #4705
---
 .../Resources/Private/Fusion/Root.fusion      | 64 ++++++++++++-------
 .../Templates/NodeTypes/MultiColumn.html      |  3 -
 2 files changed, 40 insertions(+), 27 deletions(-)
 delete mode 100644 Neos.NodeTypes.ColumnLayouts/Resources/Private/Templates/NodeTypes/MultiColumn.html

diff --git a/Neos.NodeTypes.ColumnLayouts/Resources/Private/Fusion/Root.fusion b/Neos.NodeTypes.ColumnLayouts/Resources/Private/Fusion/Root.fusion
index 1753ad0c689..65a95d1191a 100644
--- a/Neos.NodeTypes.ColumnLayouts/Resources/Private/Fusion/Root.fusion
+++ b/Neos.NodeTypes.ColumnLayouts/Resources/Private/Fusion/Root.fusion
@@ -1,23 +1,39 @@
 # Basic implementation of a flexible MultiColumn element, not exposed directly but inherited by all specific MultiColumn content elements
-prototype(Neos.NodeTypes.ColumnLayouts:MultiColumn) < prototype(Neos.Neos:Content) {
-    templatePath = 'resource://Neos.NodeTypes.ColumnLayouts/Private/Templates/NodeTypes/MultiColumn.html'
-    layout = ${q(node).property('layout')}
-    attributes.class = ${'container columns-' + q(node).property('layout')}
-    columns = Neos.Fusion:Loop {
-        @context.columnLayout = ${q(node).property('layout')}
-        items = ${q(node).children('[instanceof Neos.Neos:ContentCollection]')}
-        itemRenderer = Neos.NodeTypes.ColumnLayouts:MultiColumnItem
-        itemName = 'node'
-        iterationName = 'columnIteration'
-    }
+prototype(Neos.NodeTypes.ColumnLayouts:MultiColumn) < prototype(Neos.Neos:ContentComponent) {
+  layout = ${q(node).property('layout')}
+
+  attributes = Neos.Fusion:DataStructure
+  attributes.class = ${'container columns-' + q(node).property('layout')}
+  # The following is used to automatically append a class attribute that reflects the underlying node type of a Fusion object,
+  # for example "neos-nodetypes-form", "neos-nodetypes-headline", "neos-nodetypes-html", "neos-nodetypes-image", "neos-nodetypes-menu" and "neos-nodetypes-text"
+  # You can disable the following line with:
+  # prototype(Neos.NodeTypes.ColumnLayouts:MultiColumn) {
+  #   attributes.class.@process.nodeType >
+  # }
+  # in your site's Fusion if you don't need that behavior.
+  attributes.class.@process.nodeType = ${Array.push(value, String.toLowerCase(String.pregReplace(node.nodeTypeName.value, '/[[:^alnum:]]/', '-')))}
+
+  columns = Neos.Fusion:Loop {
+    @context.columnLayout = ${q(node).property('layout')}
+    items = ${q(node).children('[instanceof Neos.Neos:ContentCollection]')}
+    itemRenderer = Neos.NodeTypes.ColumnLayouts:MultiColumnItem
+    itemName = 'node'
+    iterationName = 'columnIteration'
+  }
+
+  renderer = afx`
+    <div {...props.attributes}>
+      {props.columns}
+    </div>
+  `
 }
 
 # Abstract render definition for a single content column in a multi column element
 prototype(Neos.NodeTypes.ColumnLayouts:MultiColumnItem) < prototype(Neos.Neos:ContentCollection) {
-    nodePath = '.'
-    attributes = Neos.Fusion:DataStructure {
-        class = 'column'
-    }
+  nodePath = '.'
+  attributes = Neos.Fusion:DataStructure {
+    class = 'column'
+  }
 }
 
 # Two Column Fusion Object
@@ -27,8 +43,8 @@ prototype(Neos.NodeTypes.ColumnLayouts:TwoColumn) < prototype(Neos.NodeTypes.Col
 prototype(Neos.NodeTypes.ColumnLayouts:TwoColumn.RawContentMode) < prototype(Neos.Neos:ContentComponent) {
   renderer = afx`
     <div style="display:grid; grid-template-columns: 1fr 1fr; grid-gap: 16px;">
-      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column0').get(0)} /></div>
-      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column1').get(0)} /></div>
+      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column0').get(0)}/></div>
+      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column1').get(0)}/></div>
     </div>
   `
 }
@@ -40,9 +56,9 @@ prototype(Neos.NodeTypes.ColumnLayouts:ThreeColumn) < prototype(Neos.NodeTypes.C
 prototype(Neos.NodeTypes.ColumnLayouts:ThreeColumn.RawContentMode) < prototype(Neos.Neos:ContentComponent) {
   renderer = afx`
     <div style="display:grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 16px;">
-      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column0').get(0)} /></div>
-      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column1').get(0)} /></div>
-      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column2').get(0)} /></div>
+      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column0').get(0)}/></div>
+      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column1').get(0)}/></div>
+      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column2').get(0)}/></div>
     </div>
   `
 }
@@ -54,10 +70,10 @@ prototype(Neos.NodeTypes.ColumnLayouts:FourColumn) < prototype(Neos.NodeTypes.Co
 prototype(Neos.NodeTypes.ColumnLayouts:FourColumn.RawContentMode) < prototype(Neos.Neos:ContentComponent) {
   renderer = afx`
     <div style="display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 16px;">
-      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column0').get(0)} /></div>
-      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column1').get(0)} /></div>
-      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column2').get(0)} /></div>
-      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column3').get(0)} /></div>
+      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column0').get(0)}/></div>
+      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column1').get(0)}/></div>
+      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column2').get(0)}/></div>
+      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column3').get(0)}/></div>
     </div>
   `
 }
diff --git a/Neos.NodeTypes.ColumnLayouts/Resources/Private/Templates/NodeTypes/MultiColumn.html b/Neos.NodeTypes.ColumnLayouts/Resources/Private/Templates/NodeTypes/MultiColumn.html
deleted file mode 100644
index 973d6d92a62..00000000000
--- a/Neos.NodeTypes.ColumnLayouts/Resources/Private/Templates/NodeTypes/MultiColumn.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div{attributes -> f:format.raw()}>
-	{columns -> f:format.raw()}
-</div>