Rich text img (#863)

* feat: Md2Html 图片预览

Author: getrebuild

src/main/resources/web/assets/css/rb-page.css

@@ -4378,6 +4378,7 @@ h3.modal-title > .rbv {
 .editor-preview img {
   max-width: 100% !important;
   max-height: 100% !important;
+  cursor: zoom-in;
 }
 
 .mdedit-content th,

src/main/resources/web/assets/css/task-view.css

@@ -21,6 +21,7 @@ See LICENSE and COMMERCIAL in the project root for license information.
   bottom: 0;
   left: 0;
   width: 100%;
+  z-index: 1;
 }
 
 .task-form .form-group.row {

src/main/resources/web/assets/js/charts/charts.js

@@ -376,12 +376,14 @@ const ECHART_AXIS_LABEL = {
   },
 }
 
-const ECHART_MARK_LINE = {
-  data: [{ type: 'average', name: $L('均线') }],
-  symbol: 'none',
-  silent: true,
-  emphasis: { disabled: true },
-  label: { show: false },
+const ECHART_MARK_LINE2 = function (showLabel = false) {
+  return {
+    data: [{ type: 'average', name: $L('均线') }],
+    symbol: 'none',
+    silent: true,
+    emphasis: { disabled: true },
+    label: { show: showLabel },
+  }
 }
 
 const ECHART_VALUE_LABEL2 = function (dataFlags = []) {
@@ -541,7 +543,7 @@ class ChartLine extends BaseChart {
         if (showAreaColor) yAxis.areaStyle = { opacity: 0.2 }
         if (showNumerical) yAxis.label = ECHART_VALUE_LABEL2(dataFlags)
         yAxis.cursor = 'default'
-        if (showMarkLine) yAxis.markLine = { ...$clone(ECHART_MARK_LINE) }
+        if (showMarkLine) yAxis.markLine = ECHART_MARK_LINE2(showNumerical)
         data.yyyAxis[i] = yAxis
       }
 
@@ -614,7 +616,7 @@ class ChartBar extends BaseChart {
           yAxis.smooth = true
           yAxis.lineStyle = { width: 3 }
         }
-        if (showMarkLine) yAxis.markLine = { ...$clone(ECHART_MARK_LINE) }
+        if (showMarkLine) yAxis.markLine = ECHART_MARK_LINE2(showNumerical)
         data.yyyAxis[i] = yAxis
       }
 

src/main/resources/web/assets/js/general/rb-forms.js

@@ -1498,7 +1498,7 @@ class RbFormNText extends RbFormElement {
       $createUploader(this._fieldValue__upload, null, (res) => {
         const pos = mde.codemirror.getCursor()
         mde.codemirror.setSelection(pos, pos)
-        mde.codemirror.replaceSelection(`![${$L('图片')}](${rb.baseUrl}/filex/img/${res.key})`)
+        mde.codemirror.replaceSelection(`![](${rb.baseUrl}/filex/img/${res.key})`)
         _mdeFocus()
       })
       if (this.props.onView) _mdeFocus()
@@ -1807,6 +1807,7 @@ class RbFormImage extends RbFormElement {
       }
     }
   }
+
   removeItem(item, e) {
     e && $stopEvent(e, true)
     const paths = this.state.value || []

src/main/resources/web/assets/js/project/task-view.js

@@ -413,7 +413,7 @@ class ValueDescription extends ValueComp {
       return (
         <div className="form-control-plaintext" ref={(c) => (this._$mde = c)}>
           <textarea defaultValue={this.state.description || ''} ref={(c) => (this._$editor = c)} />
-          <input type="file" className="hide" accept="image/*" ref={(c) => (this._fieldValue__upload = c)} />
+          <input type="file" className="hide" accept="image/*" data-noname="true" ref={(c) => (this._fieldValue__upload = c)} />
           <div className="mt-2 text-right">
             <button onClick={() => this._handleEditMode(false)} className="btn btn-sm btn-link mr-1">
               {$L('取消')}
@@ -496,6 +496,16 @@ class ValueDescription extends ValueComp {
         })
         mde.codemirror.focus()
         mde.codemirror.setCursor(mde.codemirror.lineCount(), 0) // cursor at end
+
+        // v4.0
+        mde.codemirror.on('paste', (_mde, e) => {
+          const data = e.clipboardData || window.clipboardData
+          if (data && data.items && data.files && data.files.length > 0) {
+            $stopEvent(e, true)
+            this._fieldValue__upload.files = data.files
+            $(this._fieldValue__upload).trigger('change')
+          }
+        })
       }
     })
   }

src/main/resources/web/assets/js/rb-components.js

@@ -1135,7 +1135,22 @@ class Md2Html extends React.Component {
             $stopEvent(e, false)
           })
         })
-      // TODO 图片预览
+
+      // 图片预览
+      let imgs = []
+      $(this._$md2html)
+        .find('img[src]')
+        .each(function () {
+          const $img = $(this)
+          let isrc = $img.attr('src')
+          isrc = isrc.split('/filex/img/')[1].split(/[?&]imageView2/)[0]
+          imgs.push(isrc)
+          $img.on('click', (e) => {
+            $stopEvent(e, true)
+            const p = parent || window
+            p.RbPreview.create(imgs, imgs.indexOf(isrc) || 0)
+          })
+        })
     })
   }
 }