Merge pull request #2465 from daiyam/gallery

add image gallery

browser/components/MarkdownPreview.js

@@ -21,6 +21,8 @@ import yaml from 'js-yaml'
 import context from 'browser/lib/context'
 import i18n from 'browser/lib/i18n'
 import fs from 'fs'
+import { render } from 'react-dom'
+import Carousel from 'react-image-carousel'
 import ConfigManager from '../main/lib/ConfigManager'
 
 const { remote, shell } = require('electron')
@@ -40,7 +42,8 @@ const appPath = fileUrl(
 )
 const CSS_FILES = [
   `${appPath}/node_modules/katex/dist/katex.min.css`,
-  `${appPath}/node_modules/codemirror/lib/codemirror.css`
+  `${appPath}/node_modules/codemirror/lib/codemirror.css`,
+  `${appPath}/node_modules/react-image-carousel/lib/css/main.min.css`
 ]
 
 function buildStyle (
@@ -767,6 +770,34 @@ export default class MarkdownPreview extends React.Component {
         mermaidRender(el, htmlTextHelper.decodeEntities(el.innerHTML), theme)
       }
     )
+
+    _.forEach(
+      this.refs.root.contentWindow.document.querySelectorAll('.gallery'),
+      el => {
+        const images = el.innerHTML.split(/\n/g).filter(i => i.length > 0)
+        el.innerHTML = ''
+
+        const height = el.attributes.getNamedItem('data-height')
+        if (height && height.value !== 'undefined') {
+          el.style.height = height.value + 'vh'
+        }
+
+        let autoplay = el.attributes.getNamedItem('data-autoplay')
+        if (autoplay && autoplay.value !== 'undefined') {
+          autoplay = parseInt(autoplay.value, 10) || 0
+        } else {
+          autoplay = 0
+        }
+
+        render(
+          <Carousel
+            images={images}
+            autoplay={autoplay}
+          />,
+          el
+        )
+      }
+    )
   }
 
   focus () {

browser/components/markdown.styl

@@ -421,6 +421,26 @@ pre.fence
     canvas, svg
       max-width 100% !important
 
+  .gallery
+    width 100%
+    height 50vh
+
+    .carousel
+      .carousel-main img
+        min-width auto
+        max-width 100%
+        min-height auto
+        max-height 100%
+
+      .carousel-footer::-webkit-scrollbar-corner
+        background-color transparent
+
+      .carousel-main, .carousel-footer
+        background-color $ui-noteDetail-backgroundColor
+      .prev, .next
+        color $ui-text-color
+        background-color $ui-tag-backgroundColor
+
 themeDarkBackground = darken(#21252B, 10%)
 themeDarkText = #f9f9f9
 themeDarkBorder = lighten(themeDarkBackground, 20%)
@@ -480,6 +500,14 @@ body[data-theme="dark"]
     border-color themeDarkBorder
     background-color themeDarkPreview
 
+  pre.fence
+    .gallery
+      .carousel-main, .carousel-footer
+        background-color $ui-dark-noteDetail-backgroundColor
+      .prev, .next
+        color $ui-dark-text-color
+        background-color $ui-dark-tag-backgroundColor
+
 themeSolarizedDarkTableOdd = $ui-solarized-dark-noteDetail-backgroundColor
 themeSolarizedDarkTableEven = darken($ui-solarized-dark-noteDetail-backgroundColor, 10%)
 themeSolarizedDarkTableHead = themeSolarizedDarkTableEven
@@ -515,6 +543,14 @@ body[data-theme="solarized-dark"]
     border-color themeDarkBorder
     background-color $ui-solarized-dark-noteDetail-backgroundColor
 
+  pre.fence
+    .gallery
+      .carousel-main, .carousel-footer
+        background-color $ui-solarized-dark-noteDetail-backgroundColor
+      .prev, .next
+        color $ui-solarized-dark-button--active-color
+        background-color $ui-solarized-dark-button-backgroundColor
+
 themeMonokaiTableOdd = $ui-monokai-noteDetail-backgroundColor
 themeMonokaiTableEven = darken($ui-monokai-noteDetail-backgroundColor, 10%)
 themeMonokaiTableHead = themeMonokaiTableEven
@@ -543,6 +579,7 @@ body[data-theme="monokai"]
           border-right solid 1px themeMonokaiTableBorder
   kbd
     background-color themeDarkBackground
+
   dl
     border-color themeDarkBorder
     background-color themeMonokaiTableHead
@@ -552,6 +589,14 @@ body[data-theme="monokai"]
     border-color themeDarkBorder
     background-color $ui-monokai-noteDetail-backgroundColor
 
+  pre.fence
+    .gallery
+      .carousel-main, .carousel-footer
+        background-color $ui-monokai-noteDetail-backgroundColor
+      .prev, .next
+        color $ui-monokai-button--active-color
+        background-color $ui-monokai-button-backgroundColor
+
 themeDraculaTableOdd = $ui-dracula-noteDetail-backgroundColor
 themeDraculaTableEven = darken($ui-dracula-noteDetail-backgroundColor, 10%)
 themeDraculaTableHead = themeDraculaTableEven
@@ -580,6 +625,7 @@ body[data-theme="dracula"]
           border-right solid 1px themeDraculaTableBorder
   kbd
     background-color themeDarkBackground
+
   dl
     border-color themeDarkBorder
     background-color themeDraculaTableHead
@@ -588,3 +634,11 @@ body[data-theme="dracula"]
   dd
     border-color themeDarkBorder
     background-color $ui-dracula-noteDetail-backgroundColor
+
+  pre.fence
+    .gallery
+      .carousel-main, .carousel-footer
+        background-color $ui-dracula-noteDetail-backgroundColor
+      .prev, .next
+        color $ui-dracula-button--active-color
+        background-color $ui-dracula-button-backgroundColor