BUGFIX: Neos.NodeTypes prototypes are now ContentComponents

Neos.NodeTypes.AssetList/Resources/Private/Fusion/Root.fusion

@@ -1,4 +1,29 @@
-prototype(Neos.NodeTypes.AssetList:AssetList) < prototype(Neos.Neos:Content) {
-  templatePath = "resource://Neos.NodeTypes.AssetList/Private/Templates/NodeTypes/AssetList.html"
+prototype(Neos.NodeTypes.AssetList:AssetList) < prototype(Neos.Neos:ContentComponent) {
   assets = ${q(node).property('assets')}
+
+  attributes = Neos.Fusion:DataStructure
+  attributes.class = ''
+  # 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.AssetList:AssetList) {
+  #   [email protected] >
+  # }
+  # in your site's Fusion if you don't need that behavior.
+  [email protected] = ${Array.push(value, String.toLowerCase(String.pregReplace(node.nodeTypeName.value, '/[[:^alnum:]]/', '-')))}
+
+  @if.render = ${this.assets || renderingMode.isEdit}
+
+  renderer = afx`
+    <ul {...props.attributes}>
+      <li @if.inEditMode={!props.assets && renderingMode.isEdit}>
+        {Translation.id('content.emptyAssetList').package('Neos.NodeTypes.AssetList').source('NodeTypes/AssetList')}
+      </li>
+      <Neos.Fusion:Loop items={props.assets} itemName="asset">
+        <li>
+          <Neos.Fusion:Link.Resource href.resource={asset.resource}>{asset.resource.filename}</Neos.Fusion:Link.Resource>
+        </li>
+      </Neos.Fusion:Loop>
+    </ul>
+  `
 }

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) {
+  #   [email protected] >
+  # }
+  # in your site's Fusion if you don't need that behavior.
+  [email protected] = ${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>
   `
 }

Neos.NodeTypes.ContentReferences/Resources/Private/Fusion/Root.fusion

@@ -1,6 +1,5 @@
 # "Insert content references" Fusion Object
-prototype(Neos.NodeTypes.ContentReferences:ContentReferences) < prototype(Neos.Neos:Content) {
-  templatePath = 'resource://Neos.NodeTypes.ContentReferences/Private/Templates/NodeTypes/ContentReferences.html'
+prototype(Neos.NodeTypes.ContentReferences:ContentReferences) < prototype(Neos.Neos:ContentComponent) {
   @context.referenceNodesArray = ${q(node).property('references')}
   referenceNodes = Neos.Fusion:Loop {
     items = ${referenceNodesArray}
@@ -16,7 +15,28 @@ prototype(Neos.NodeTypes.ContentReferences:ContentReferences) < prototype(Neos.N
       renderer.editable.condition = false
     }
   }
-  hasReferences = ${!!referenceNodesArray}
+
+  attributes = Neos.Fusion:DataStructure
+  attributes.class = ''
+  # 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.ContentReferences:ContentReferences) {
+  #   [email protected] >
+  # }
+  # in your site's Fusion if you don't need that behavior.
+  [email protected] = ${Array.push(value, String.toLowerCase(String.pregReplace(node.nodeTypeName.value, '/[[:^alnum:]]/', '-')))}
+
+  renderer = afx`
+    <div {...props.attributes}>
+      <p @if.showEditHint={!props.referenceNodes && renderingMode.isEdit}>
+        {Translation.id('content.noReferencesSelected').package('Neos.NodeTypes.ContentReferences').source('NodeTypes/ContentReferences')}
+      </p>
+      <Neos.Fusion:Fragment @if.referencesSelected={props.referenceNodes}>{props.referenceNodes}</Neos.Fusion:Fragment>
+    </div>
+
+  `
+
   @cache {
     mode = 'cached'
     entryIdentifier {

Neos.NodeTypes.Html/Resources/Private/Fusion/Html.fusion

@@ -7,7 +7,7 @@ prototype(Neos.NodeTypes.Html:Html) < prototype(Neos.Neos:ContentComponent) {
   # 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.Neos:Content) {
+  # prototype(Neos.NodeTypes.Html:Html) {
   #   [email protected] >
   # }
   # in your site's Fusion if you don't need that behavior.

Neos.NodeTypes/Resources/Private/Fusion/Content/Headline.fusion

@@ -0,0 +1,22 @@
+prototype(Neos.NodeTypes:Headline) < prototype(Neos.Neos:ContentComponent) {
+  title = Neos.Neos:Editable {
+    property = 'title'
+  }
+
+  attributes = Neos.Fusion:DataStructure
+  attributes.class = ''
+  # 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:Headline) {
+  #   [email protected] >
+  # }
+  # in your site's Fusion if you don't need that behavior.
+  [email protected] = ${Array.push(value, String.toLowerCase(String.pregReplace(node.nodeTypeName.value, '/[[:^alnum:]]/', '-')))}
+
+  renderer = afx`
+    <div {...props.attributes}>
+      {props.title}
+    </div>
+  `
+}

Neos.NodeTypes/Resources/Private/Fusion/Content/Text.fusion

@@ -0,0 +1,22 @@
+prototype(Neos.NodeTypes:Text) < prototype(Neos.Neos:ContentComponent) {
+  text = Neos.Neos:Editable {
+    property = 'text'
+  }
+
+  attributes = Neos.Fusion:DataStructure
+  attributes.class = ''
+  # 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:Text) {
+  #   [email protected] >
+  # }
+  # in your site's Fusion if you don't need that behavior.
+  [email protected] = ${Array.push(value, String.toLowerCase(String.pregReplace(node.nodeTypeName.value, '/[[:^alnum:]]/', '-')))}
+
+  renderer = afx`
+    <div {...props.attributes}>
+      {props.text}
+    </div>
+  `
+}