feat(cms): implement image preview

modules/builtin/src/content-types/image.js

@@ -1,7 +1,5 @@
 const base = require('./_base')
-const path = require('path')
 const url = require('url')
-const { tail } = _
 
 function render(data) {
   const events = []
@@ -164,13 +162,7 @@ module.exports = {
       return
     }
 
-    let fileName = path.basename(formData.image)
-    if (fileName.includes('-')) {
-      fileName = tail(fileName.split('-')).join('-')
-    }
-
-    const title = formData.title ? ' | ' + formData.title : ''
-    return `Image (${fileName}) ${title}`
+    return `[![${formData.title}](${formData.image})](${formData.image})`
   },
 
   renderElement: renderElement

src/bp/ui-studio/src/web/components/Layout/DocumentationModal.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { connect } from 'react-redux'
 import _ from 'lodash'
 import { Modal, Button } from 'react-bootstrap'
-import ReactMarkdown from 'react-markdown'
+import Markdown from 'react-markdown'
 import classnames from 'classnames'
 
 import { updateDocumentationModal } from '~/actions'
@@ -25,7 +25,7 @@ class DocumentationModal extends React.Component {
     const transformImg = url => 'assets/ui-studio/public/external/docs/' + url.replace(/^assets\//i, '')
 
     return (
-      <ReactMarkdown
+      <Markdown
         source={this.removeFileHeader(src)}
         linkTarget="_blank"
         disallowedTypes={['link', 'linkReference']}

src/bp/ui-studio/src/web/views/Content/List.tsx

@@ -3,14 +3,14 @@ import classnames from 'classnames'
 import _ from 'lodash'
 import moment from 'moment'
 import React, { Component } from 'react'
+import Markdown from 'react-markdown'
 import ReactTable from 'react-table'
 import 'react-table/react-table.css'
-import { LeftToolbarButtons, RightToolbarButtons, Toolbar } from '~/components/Shared/Interface'
+import { LeftToolbarButtons, Toolbar } from '~/components/Shared/Interface'
 import { Downloader } from '~/components/Shared/Utils'
 import withLanguage from '~/components/Util/withLanguage'
 
 import style from './style.scss'
-import { ImportModal } from './ImportModal'
 
 class ListView extends Component<Props, State> {
   private debouncedHandleSearch
@@ -213,7 +213,19 @@ class ListView extends Component<Props, State> {
           const className = classnames({ [style.missingTranslation]: preview.startsWith('(missing translation) ') })
           return (
             <React.Fragment>
-              <span className={className}>{preview}</span>
+              <span className={className}>
+                <Markdown
+                  source={preview}
+                  renderers={{
+                    image: props => <img {...props} className={style.imagePreview} />,
+                    link: props => (
+                      <a href={props.href} target="_blank">
+                        {props.children}
+                      </a>
+                    )
+                  }}
+                />
+              </span>
             </React.Fragment>
           )
         }

src/bp/ui-studio/src/web/views/Content/style.scss

@@ -28,3 +28,7 @@
     }
   }
 }
+
+.imagePreview {
+  height: 16px;
+}

src/bp/ui-studio/src/web/views/Content/style.scss.d.ts

@@ -3,6 +3,7 @@
 interface CssExports {
   'cancel': string;
   'content': string;
+  'imagePreview': string;
   'missingTranslation': string;
   'modal': string;
 }

src/bp/ui-studio/src/web/views/FlowBuilder/nodeProps/ActionModalForm.jsx

@@ -1,7 +1,6 @@
 import React, { Component } from 'react'
 import { Modal, Button, Radio, OverlayTrigger, Tooltip } from 'react-bootstrap'
 import Markdown from 'react-markdown'
-import axios from 'axios'
 import _ from 'lodash'
 
 import { LinkDocumentationProvider } from '~/components/Util/DocumentationProvider'