Gatsby-source-wordpress-experimental: Feature Request: An option to strip comments from HTML content

[SilencerWeb]

We use Figma as a designing tool and when we copy from it text using CMD + C, it copies the text which also contains tons of commented data for Figma. And when we paste it to Wysiwyg Editor, these comments are being passed too so in the end, we have commented code on our frontend.

Would be so awesome to have an option that automatically stripes all the comments from HTML content so there won't be any unnecessary stuff in production.

[19h47]

Maybe it's more a WordPress feature, like a hook when you save the post, no?

[TylerBarnes]

+1 to @19h47 . Or you could write a Gatsby transformer plugin that accomplishes this as well.

Additionally there's a plugin option you could take advantage of here to achieve this. The following code is untested but gives you an idea of how to achieve this. beforeChangeNode runs on node data before a node is changed (created, updated, or deleted) so you can modify the node and return your modified node.

{
  resolve: "gatsby-plugin-wordpress-experimental",
  options: {
    type: {
      Post: {
        beforeChangeNode: ({ remoteNode, actionType }) => {
           if (actionType !== `DELETE`) {
             const nodeWithCommentsStripped = JSON.parse(
               stripComments(JSON.stringify(remoteNode))
             )

             return { remoteNode: nodeWithCommentsStripped }
           }
        }
      }
    }
  }
}

Unfortunately this is outside the scope of this plugin, but I appreciate you taking the time to open this request and I hope this helped!

[TylerBarnes]

https://www.npmjs.com/package/strip-comments

[SilencerWeb]

@TylerBarnes nope, it doesn't work :(

No errors, just no effect

[TylerBarnes]

@SilencerWeb , the code is example code I wrote into the comment box here. You'll have to do some debugging to see what's going on. The remoteNode property returned in this API is what is used to create Gatsby nodes.

[SilencerWeb]

Hi @TylerBarnes again!

I'm trying to dig dipper into this case and here is where I stuck:

Here are acf fields after stripping comments (it is console.log inside beforeChangeNode function):

Here is what I get on the page:

As you can see, for some reason, the comments stay even after they were stripped. I tried to clean the cache a million times but it didn't help.

My code is pretty much the same as in your example, I just wrote custom function for stripping HTML comments:

function stripHTMLComments(string) {
  return string.replace(/<!--[\s\S]*?-->/gm, '');
}

function stripHTMLCommentsInACF({ actionType, remoteNode }) {
  if (actionType !== 'DELETE') {
    return {
      remoteNode: JSON.parse(
        stripHTMLComments(JSON.stringify(remoteNode)),
      ),
    };
  }
}

{
  resolve: 'gatsby-source-wordpress-experimental',
  options: {
    type: {
      Page: {
        beforeChangeNode: stripHTMLCommentsInACF,
      },
      Post: {
        beforeChangeNode: stripHTMLCommentsInACF,
      },
    },
  },
},

The version of the plugin is 1.4.6

[TylerBarnes]

@SilencerWeb if you can provide a reproduction I don't mind taking a look. I copy pasted your code and it's working for me