Apply image lightbox only in document image

Signed-off-by: Yukai Huang <[email protected]>

Author: Yukaii

public/js/extra.js

@@ -1167,6 +1167,7 @@ md.use(markdownitContainer, 'spoiler', {
 const defaultImageRender = md.renderer.rules.image
 md.renderer.rules.image = function (tokens, idx, options, env, self) {
   tokens[idx].attrJoin('class', 'raw')
+  tokens[idx].attrJoin('class', 'md-image')
   return defaultImageRender(...arguments)
 }
 md.renderer.rules.list_item_open = function (tokens, idx, options, env, self) {

public/js/lib/renderer/lightbox/index.js

@@ -77,7 +77,7 @@ function onClickImage (img) {
 }
 
 function updateLightboxImages () {
-  images = [...document.querySelectorAll('.markdown-body img:not(.emoji)')]
+  images = [...document.querySelectorAll('.markdown-body img.md-image')]
 
   if (currentImage) {
     currentIndexIndex = images.findIndex(image => image === currentImage)
@@ -91,7 +91,7 @@ const init = () => {
   }
 
   markdownBody.addEventListener('click', function (e) {
-    if (e.target.nodeName === 'IMG' && !e.target.classList.contains('emoji')) {
+    if (e.target.nodeName === 'IMG' && e.target.classList.contains('md-image')) {
       onClickImage(e.target)
       e.stopPropagation()
     }

public/js/lib/renderer/lightbox/lightbox.css

@@ -59,6 +59,6 @@
   max-width: 100%;
 }
 
-.markdown-body img:not(.emoji) {
+.markdown-body img.md-image {
   cursor: zoom-in;
 }

public/js/lib/syncscroll.js

@@ -27,6 +27,11 @@ md.renderer.rules.table_open = function (tokens, idx, options, env, self) {
   addPart(tokens, idx)
   return self.renderToken(...arguments)
 }
+const defaultImageRender = md.renderer.rules.image
+md.renderer.rules.image = function (tokens, idx, options, env, self) {
+  tokens[idx].attrJoin('class', 'md-image')
+  return defaultImageRender(...arguments)
+}
 md.renderer.rules.bullet_list_open = function (tokens, idx, options, env, self) {
   addPart(tokens, idx)
   return self.renderToken(...arguments)