mdedit preview

This commit is contained in:
devezhao 2021-01-14 11:53:09 +08:00
parent d983d3a0b5
commit 1538bda353
6 changed files with 47 additions and 20 deletions

View file

@ -3799,3 +3799,17 @@ a.select-lang:hover {
.CodeMirror .CodeMirror-code {
line-height: 1.6;
}
.editor-preview p {
line-height: 1.6;
}
.mdedit-content p {
margin-bottom: 1em;
line-height: 1.6;
}
.mdedit-content p:last-child,
.editor-preview p:last-child {
margin-bottom: 0;
}

View file

@ -90,6 +90,10 @@ body {
position: relative;
}
.rbview-form .type-NTEXT .form-control-plaintext.mdedit-content {
max-height: 134px;
}
.rbview-form .type-NTEXT .form-control-plaintext > p {
margin: 0;
line-height: 1.428571;

View file

@ -8,7 +8,6 @@ See LICENSE and COMMERCIAL in the project root for license information.
const wpc = window.__PageConfig
$(document).ready(() => {
console.log(JSON.stringify(wpc.content))
renderRbcomp(<PreviewTable data={wpc.content} />, 'preview-table')
})
@ -111,6 +110,11 @@ class PreviewTable extends React.Component {
</div>
)
} else if (item.type === 'NTEXT') {
if (item.useMdedit) {
// eslint-disable-next-line no-undef
const md2html = SimpleMDE.prototype.markdown(item.value)
return <div className="mdedit-content" dangerouslySetInnerHTML={{ __html: md2html }} />
} else {
return (
<React.Fragment>
{item.value.split('\n').map((line, idx) => {
@ -118,6 +122,7 @@ class PreviewTable extends React.Component {
})}
</React.Fragment>
)
}
} else if (item.type === 'BOOL') {
return $L(item.value === 'T' ? 'True' : 'False')
} else if (item.type === 'MULTISELECT') {

View file

@ -744,7 +744,6 @@ class RbFormNumber extends RbFormText {
for (let key in this.calcFormula__values) {
formula = formula.replace(new RegExp(`{${key}}`, 'ig'), this.calcFormula__values[key] || 0)
}
console.log('formula : ', formula)
if (formula.includes('{')) return
try {
@ -798,6 +797,10 @@ class RbFormTextarea extends RbFormElement {
renderViewElement() {
if (!this.state.value) return super.renderViewElement()
if (this.props.useMdedit) {
const md2html = SimpleMDE.prototype.markdown(this.state.value)
return <div className="form-control-plaintext mdedit-content" ref={(c) => (this._textarea = c)} dangerouslySetInnerHTML={{ __html: md2html }} />
} else {
return (
<div className="form-control-plaintext" ref={(c) => (this._textarea = c)}>
{this.state.value.split('\n').map((line, idx) => {
@ -806,6 +809,7 @@ class RbFormTextarea extends RbFormElement {
</div>
)
}
}
componentDidMount() {
super.componentDidMount()
@ -884,13 +888,13 @@ class RbFormTextarea extends RbFormElement {
{
name: 'preview',
action: SimpleMDE.togglePreview,
className: 'zmdi zmdi-eye',
className: 'zmdi zmdi-eye no-disable',
title: $L('MdeditTogglePreview'),
},
{
name: 'guide',
action: () => window.open('https://getrebuild.com/docs/markdown-guide'),
className: 'zmdi zmdi-help-outline',
className: 'zmdi zmdi-help-outline no-disable',
title: $L('MdeditGuide'),
},
],

View file

@ -732,7 +732,7 @@ var $expired = function (date, offset) {
var _$unthy = function (text) {
if (!text) return null
text = text.replace(/&quot;/g, '"')
text = text.replace(/\n/g, ' ')
text = text.replace(/\n/g, '\\n')
var s = $.parseJSON(text)
if (rb.env === 'dev') console.log(s)
return s

View file

@ -46,7 +46,7 @@
</head>
<body>
<div class="preview-tools d-print-none">
<button class="btn btn-space btn-secondary" onclick="window.print()"><i class="icon zmdi zmdi-print"></i> [[${bundle.L('Print')}]]</button>
<button class="btn btn-space btn-primary" onclick="window.print()"><i class="icon zmdi zmdi-print"></i> [[${bundle.L('Print')}]]</button>
<button class="btn btn-space btn-secondary" onclick="window.close()">[[${bundle.L('Close')}]]</button>
</div>
<div class="preview-content">