feat(Images): Add asset image support for wysiwyg node type

Changed img tag recognition and Url vs asset

Test commit

Revert "Test commit"

This reverts commit 084c855.

Implemented review feedback

gatsby-node.js

@@ -97,7 +97,8 @@ exports.sourceNodes = async (
       images,
       assets,
       markdowns,
-      layouts
+      layouts,
+      configOptions.baseUrl
     )
 
     collection.items.forEach(item => {
@@ -112,7 +113,8 @@ exports.sourceNodes = async (
       images,
       assets,
       markdowns,
-      layouts
+      layouts,
+      configOptions.baseUrl
     )
 
     singleton.items.forEach(item => {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fika/gatsby-source-cockpit",
-  "version": "1.1.0",
-  "description": "This is a Gatsby version 2.x.x source plugin that feeds the GraphQL tree with Cockpit Headless CMS collections and singletons data. Actually, it supports querying raw texts (and any trivial field types), Markdown, images, galleries, assets, sets, repeaters, layout(-grid)s (currently only without nested images/assets), objects, linked collections and internationalization.",
+  "version": "1.1.2",
+  "description": "This is a Gatsby version 2.x.x source plugin that feeds the GraphQL tree with Cockpit Headless CMS collections and singletons data. Actually, it supports querying raw texts (and any trivial field types), Markdown, Wysiwyg, images, galleries, assets, sets, repeaters, layout(-grid)s (currently only without nested images/assets), objects, linked collections and internationalization.",
   "main": "gatsby-node.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -46,7 +46,8 @@
     "react-styling": "^1.6.4",
     "sanitize-html": "^1.20.0",
     "slugify": "^1.3.4",
-    "string-hash": "^1.1.3"
+    "string-hash": "^1.1.3",
+    "node-html-parser": "1.1.16"
   },
   "devDependencies": {
     "husky": "^1.3.1",

readme.md

@@ -2,7 +2,7 @@
 
 This is a Gatsby version 2.\*.\* source plugin that feeds the GraphQL tree with Cockpit Headless CMS collections and singletons data.
 
-Actually, it supports querying raw texts (and any trivial field types), Markdown, images, galleries, assets, sets, repeaters, layout(-grid)s (currently only without nested images/assets), objects, linked collections and internationalization.
+Actually, it supports querying raw texts (and any trivial field types), Markdown, Wysiwyg, images, galleries, assets, sets, repeaters, layout(-grid)s (currently only without nested images/assets), objects, linked collections and internationalization.
 
 ## Installation
 
@@ -247,6 +247,10 @@ Notes:
 
 1. You can access the raw Markdown with this attribute.
 
+#### Wysiwygs
+
+Wysiwyg fields (or `What you see is what you get`) works the same way as Markdown fields, but instead of accessing an HTML equivalent through the `value → childMarkdownRemark → html` attribute, it's accessible straight through the `value` attribute.
+
 #### Sets
 
 The set field type allows to logically group a number of other fields together.

src/CockpitService.js

@@ -2,6 +2,7 @@ const mime = require('mime')
 const request = require('request-promise')
 const slugify = require('slugify')
 const hash = require('string-hash')
+const { parse } = require('node-html-parser')
 
 const {
   METHODS,
@@ -181,6 +182,7 @@ module.exports = class CockpitService {
     nodes.forEach(node => {
       node.items.forEach(item => {
         this.normalizeNodeItemImages(item, existingImages)
+        this.normalizeNodeItemWysiwygs(item, existingImages)
         this.normalizeNodeItemAssets(item, existingAssets)
         this.normalizeNodeItemMarkdowns(
           item,
@@ -241,7 +243,6 @@ module.exports = class CockpitService {
           } else if (!path.startsWith('http')) {
             path = `${this.baseUrl}/${path}`
           }
-
           galleryImageField.value = path
           existingImages[path] = null
         })
@@ -258,7 +259,6 @@ module.exports = class CockpitService {
   normalizeNodeItemAssets(item, existingAssets) {
     getFieldsOfTypes(item, ['asset']).forEach(assetField => {
       let path = assetField.value.path
-
       trimAssetField(assetField)
 
       path = `${this.baseUrl}/storage/uploads${path}`
@@ -274,6 +274,26 @@ module.exports = class CockpitService {
     }
   }
 
+  normalizeNodeItemWysiwygs(item, existingImages) {
+    getFieldsOfTypes(item, ['wysiwyg']).forEach(field => {
+      let imgTags = parse(field.value).querySelectorAll('img')
+      let path
+      for (let tag of imgTags) {
+        if (
+          existingImages[path] != null ||
+          existingImages[path] === undefined
+        ) {
+          if (tag.attributes.src.startsWith('/')) {
+            path = `${this.baseUrl}${tag.attributes.src}`
+          } else {
+            path = `${this.baseUrl}/${tag.attributes.src}`
+          }
+        }
+        existingImages[path] = null
+      }
+    })
+  }
+
   normalizeNodeItemMarkdowns(
     item,
     existingImages,

src/CollectionItemNodeFactory.js

@@ -17,13 +17,22 @@ const {
 })
 
 module.exports = class CollectionItemNodeFactory {
-  constructor(createNode, collectionName, images, assets, markdowns, layouts) {
+  constructor(
+    createNode,
+    collectionName,
+    images,
+    assets,
+    markdowns,
+    layouts,
+    baseUrl
+  ) {
     this.createNode = createNode
     this.collectionName = collectionName
     this.images = images
     this.assets = assets
     this.markdowns = markdowns
     this.layouts = layouts
+    this.baseUrl = baseUrl
 
     this.objectNodeFactory = new ObjectNodeFactory(createNode)
   }
@@ -41,7 +50,7 @@ module.exports = class CollectionItemNodeFactory {
         this.collectionName,
         node.lang === 'any' ? node.cockpitId : `${node.cockpitId}_${node.lang}`
       )
-      linkImageFieldsToImageNodes(node, this.images)
+      linkImageFieldsToImageNodes(node, this.images, this.baseUrl)
       linkAssetFieldsToAssetNodes(node, this.assets)
       linkMarkdownFieldsToMarkdownNodes(node, this.markdowns)
       linkLayoutFieldsToLayoutNodes(node, this.layouts)

src/SingletonItemNodeFactory.js

@@ -17,13 +17,22 @@ const {
 })
 
 module.exports = class SingletonItemNodeFactory {
-  constructor(createNode, singletonName, images, assets, markdowns, layouts) {
+  constructor(
+    createNode,
+    singletonName,
+    images,
+    assets,
+    markdowns,
+    layouts,
+    baseUrl
+  ) {
     this.createNode = createNode
     this.singletonName = singletonName
     this.images = images
     this.assets = assets
     this.markdowns = markdowns
     this.layouts = layouts
+    this.baseUrl = baseUrl
 
     this.objectNodeFactory = new ObjectNodeFactory(createNode)
   }
@@ -34,7 +43,7 @@ module.exports = class SingletonItemNodeFactory {
         this.singletonName,
         node.lang === 'any' ? node.cockpitId : `${node.cockpitId}_${node.lang}`
       )
-      linkImageFieldsToImageNodes(node, this.images)
+      linkImageFieldsToImageNodes(node, this.images, this.baseUrl)
       linkAssetFieldsToAssetNodes(node, this.assets)
       linkMarkdownFieldsToMarkdownNodes(node, this.markdowns)
       linkLayoutFieldsToLayoutNodes(node, this.layouts)

src/helpers.js

@@ -1,4 +1,5 @@
 const { TYPE_PREFIX_COCKPIT } = require('./constants')
+const { parse } = require('node-html-parser')
 const hash = require('string-hash')
 const { generateNodeId } = require('gatsby-node-helpers').default({
   typePrefix: TYPE_PREFIX_COCKPIT,
@@ -32,7 +33,7 @@ function getFieldsOfTypes(item, types) {
   return fieldsOfTypes
 }
 
-function linkImageFieldsToImageNodes(node, images) {
+function linkImageFieldsToImageNodes(node, images, baseUrl) {
   getFieldsOfTypes(node, ['image']).forEach(field => {
     if (images[field.value] !== null) {
       field.value___NODE = images[field.value].id
@@ -52,6 +53,25 @@ function linkImageFieldsToImageNodes(node, images) {
     }
     delete field.value
   })
+
+  getFieldsOfTypes(node, ['wysiwyg']).forEach(field => {
+    const imageSources = getImageSourcesFromHtml(field.value)
+
+    imageSources.forEach(imageSource => {
+      if (!imageSource.startsWith('http')) {
+        field.value = field.value.replace(
+          imageSource,
+          images[baseUrl + imageSource].localPath
+        )
+      }
+    })
+  })
+}
+
+function getImageSourcesFromHtml(html) {
+  return parse(html)
+    .querySelectorAll('img')
+    .map(imgTag => imgTag.attributes.src)
 }
 
 function linkAssetFieldsToAssetNodes(node, assets) {