Need request headers inside

denism7

Hi there,

I'm creating a plugin for WebP image handling. Need to check server-side if user's browser supports it.

I guess I can't access HTTP request params inside filter:parse.post.

Any ideas on exact hook to get this data and store it somehow?

PitaJ

@denism7 what are you trying to do? The <picture> element allows for this kind of fallback natively: https://usefulangle.com/post/114/webp-image-in-html-with-fallback

denism7

@pitaj since there are no hooks inside of markdown parser itself, I haven't found an easy and efficient way to replace a single img with a picture. So I just add webp copy to every uploaded image. Right before parsing I replace image link using regex, but I shouldn't do that if it's unsupported by client.

So I guess I need to store WebP-support flag somewhere when request is accessible to use it later in the parse hook. That's why I'm asking an advice.

PitaJ

@denism7 okay I understand. Why don't you replace it with a <picture> element which browsers user to support fallback of unsupported formats natively? It seems to do exactly what you want, without needing to know what browser the user is using.

denism7

@pitaj it's all about efficiency. I have two options. The first is replacing the uri before markdown parsing. The second one is working with resulting HTML when I need to replace the whole a>img subtree with a>picture>[source, source, img] keeping all its attributes, CSS-classes and so on.

Keep in mind, we are inside parse.post hook. It basically runs every time each post is rendered (leaving caching aside). I believe, building of DOM subtree will be too wasteful in terms of CPU time. Regex for HTML-code will be more complex and less reliable as well. It can be done easily with client-side script, but it's a bit undesirable to me.

Any suggestions for altering the HTML are welcome, though.

PitaJ

@denism7 post parsing is cached across users. There's no way to present a post differently for different users without transforming the output at request time.

You have a couple options:

Replace <img> with <picture> after markdown parsing
Use something like the markdown-it-picture plugin with the markdown plugin and replace the image markdown with that appropriate for what you want

Option 1 seems easiest to me. You are unlikely to introduce risks since we sanitize the output html anyways. The output of the markdown parser should be fairly well formed, so it shouldn't be hard to write a regex that does what you want. Either way you may need to tweak the sanitize config in filter:sanitize.config to allow picture elements through.

denism7

@pitaj said in Need request headers inside:

markdown-it-picture

Is it possible to use markdown plugins without building custom version of nodebb?

PitaJ

@denism7 the markdown plugin exposes a hook that I think should work?

https://github.com/julianlam/nodebb-plugin-markdown/blob/b248150a2626ccfdf90d7771a84e39613589e2fc/index.js#L420