BUGFIX: Neos.NodeTypes:Image and Neos.NodeTypes:TextWithImage prototy…

…pes are now ContentComponents

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

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

@@ -1,5 +1,4 @@
-prototype(Neos.NodeTypes:Image) < prototype(Neos.Neos:Content) {
-  templatePath = 'resource://Neos.NodeTypes/Private/Templates/NodeTypes/Image.html'
+prototype(Neos.NodeTypes:Image) < prototype(Neos.Neos:ContentComponent) {
   maximumWidth = 2560
   width = null
   maximumHeight = 2560
@@ -10,13 +9,32 @@ prototype(Neos.NodeTypes:Image) < prototype(Neos.Neos:Content) {
   image = ${q(node).property("image")}
   alternativeText = ${q(node).property("alternativeText")}
   link = ${q(node).property("link")}
-  loading = 'lazy'
   [email protected] = Neos.Neos:ConvertUris {
     forceConversion = true
   }
+  loading = 'lazy'
   title = ${q(node).property('title') ? q(node).property('title') : q(node).property('image').title}
   hasCaption = ${q(node).property("hasCaption")}
-  caption = ${String.trim(String.stripTags(q(node).property('caption'))) ? q(node).property('caption') : q(node).property('image').caption}
-  [email protected] = Neos.Neos:ConvertUris
+  caption = Neos.Neos:Editable {
+    property = 'caption'
+    renderer.editable.renderer.content = ${String.trim(String.stripTags(q(props.node).property(props.property))) ? q(props.node).property(props.property) :  q(node).property('image').caption}
+  }
   alignment = ${q(node).property("alignment")}
+
+  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:Image) {
+  #   [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}>
+      <Neos.NodeTypes:Fragment.Image {...props}/>
+    </div>
+  `
 }

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

@@ -1,5 +1,13 @@
 prototype(Neos.NodeTypes:TextWithImage) < prototype(Neos.NodeTypes:Image) {
-  templatePath = 'resource://Neos.NodeTypes/Private/Templates/NodeTypes/TextWithImage.html'
-  text = ${q(node).property("text")}
-  [email protected] = Neos.Neos:ConvertUris
+  text = Neos.Neos:Editable {
+    property = 'text'
+  }
+
+  renderer >
+  renderer = afx`
+    <div {...props.attributes}>
+      <Neos.NodeTypes:Fragment.Image {...props}/>
+      {props.text}
+    </div>
+  `
 }

Neos.NodeTypes/Resources/Private/Fusion/Fragment/Image.fusion

@@ -0,0 +1,50 @@
+prototype(Neos.NodeTypes:Fragment.Image) < prototype(Neos.Fusion:Component) {
+  imageClassName = ''
+  link = ''
+
+  image = null
+  maximumWidth = 2560
+  width = null
+  maximumHeight = 2560
+  height = null
+  allowCropping = false
+  allowUpScaling = false
+
+  alternativeText = ''
+  title = ''
+  loading = 'lazy'
+  hasCaption = false
+  caption = ''
+
+  @private {
+    imageSrc = Neos.Neos:ImageUri {
+      asset = ${props.image}
+      width = ${props.width}
+      maximumWidth = ${props.maximumWidth}
+      height = ${props.height}
+      maximumHeight = ${props.maximumHeight}
+      allowCropping = ${props.allowCropping}
+      allowUpScaling = ${props.allowUpScaling}
+    }
+  }
+
+  renderer = afx`
+    <figure class={props.imageClassName ? props.imageClassName : ''}>
+      <Neos.Fusion:Fragment @if.showImageWithLink={private.imageSrc && props.link}>
+        <a href={props.link}>
+          <img src={private.imageSrc} title={props.title} alt={props.alternativeText} loading={props.loading} />
+        </a>
+      </Neos.Fusion:Fragment>
+
+      <Neos.Fusion:Fragment @if.showImage={private.imageSrc && !props.link}>
+        <img src={private.imageSrc} title={props.title} alt={props.alternativeText} loading={props.loading} />
+      </Neos.Fusion:Fragment>
+
+      <Neos.Fusion:Fragment @if.showDummyImage={!private.imageSrc && renderingMode.isEdit}>
+        <img src={StaticResource.uri('Neos.Neos', 'Public/Images/dummy-image.svg')}
+             title="Dummy image" alt="Dummy image" class="neos-handle"/>
+      </Neos.Fusion:Fragment>
+      <figcaption @if.hasCaption={props.hasCaption && props.caption}>{props.caption}</figcaption>
+    </figure>
+  `
+}