mirror of
https://github.com/haiwen/seahub.git
synced 2025-07-22 10:52:47 +00:00
77 lines
2.1 KiB
JavaScript
77 lines
2.1 KiB
JavaScript
|
import React from 'react';
|
||
|
import PropTypes from 'prop-types';
|
||
|
import { Modal, ModalHeader, ModalBody } from 'reactstrap';
|
||
|
import getPreviewContent from '../../utils/markdown-utils';
|
||
|
import { SimpleEditor } from '@seafile/seafile-editor';
|
||
|
import { gettext } from '../../utils/constants';
|
||
|
|
||
|
const propTypes = {
|
||
|
title: PropTypes.string,
|
||
|
content: PropTypes.object,
|
||
|
onCommit: PropTypes.func.isRequired,
|
||
|
onCloseEditorDialog: PropTypes.func.isRequired,
|
||
|
};
|
||
|
|
||
|
class TermsEditorDialog extends React.Component {
|
||
|
|
||
|
static defaultProps = {
|
||
|
title: gettext('Terms'),
|
||
|
content: {text: '', preview: ''}
|
||
|
}
|
||
|
|
||
|
onKeyDown = (event) => {
|
||
|
event.stopPropagation();
|
||
|
}
|
||
|
|
||
|
toggle = () => {
|
||
|
if (this.isContentChanged()) {
|
||
|
let currentContent = this.getCurrentContent();
|
||
|
this.props.onCommit(currentContent);
|
||
|
}
|
||
|
this.props.onCloseEditorDialog();
|
||
|
}
|
||
|
|
||
|
isContentChanged = () => {
|
||
|
return this.simpleEditor.hasContentChange();
|
||
|
}
|
||
|
|
||
|
getCurrentContent = () => {
|
||
|
let markdownContent = this.simpleEditor.getMarkdown();
|
||
|
let { previewText , images, links } = getPreviewContent(markdownContent);
|
||
|
let content = Object.assign({}, this.value, { text: markdownContent, preview: previewText, images: images, links: links });
|
||
|
return content;
|
||
|
}
|
||
|
|
||
|
setSimpleEditorRef = (editor) => {
|
||
|
this.simpleEditor = editor;
|
||
|
}
|
||
|
|
||
|
render() {
|
||
|
let { content, title } = this.props;
|
||
|
return (
|
||
|
<Modal
|
||
|
isOpen={true}
|
||
|
toggle={this.toggle}
|
||
|
onKeyDown={this.onKeyDown}
|
||
|
wrapClassName={'conditions-editor-dialog-wrapper'}
|
||
|
className={'conditions-editor-dialog'}
|
||
|
contentClassName={'conditions-editor-dialog-content'}
|
||
|
size={'lg'}
|
||
|
style={{width: 770}}
|
||
|
>
|
||
|
<ModalHeader className="conditions-editor-dialog-title" toggle={this.toggle}>{title}</ModalHeader>
|
||
|
<ModalBody className={'conditions-editor-dialog-main'}>
|
||
|
<SimpleEditor
|
||
|
onRef={this.setSimpleEditorRef.bind(this)}
|
||
|
value={content.text || ''}
|
||
|
/>
|
||
|
</ModalBody>
|
||
|
</Modal>
|
||
|
);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
TermsEditorDialog.propTypes = propTypes;
|
||
|
|
||
|
export default TermsEditorDialog;
|