2018-11-15 06:24:04 +00:00
|
|
|
import React from 'react'
|
|
|
|
import PropTypes from 'prop-types'
|
|
|
|
import { Editor } from 'draft-js'
|
|
|
|
|
|
|
|
import { EditModeTopBar } from '../components/contentTopBar'
|
|
|
|
import { EditModeBottomBar } from '../components/contentBottomBar'
|
2018-11-23 21:23:08 +00:00
|
|
|
import TagColorPicker from '../components/tagColorPicker'
|
2018-11-15 06:24:04 +00:00
|
|
|
import actions from '../actions'
|
|
|
|
import DocumentTitle from '../components/documentTitle'
|
|
|
|
import LoadingSpinner from '../components/loadingSpinner'
|
|
|
|
|
|
|
|
const EditorEditMode = ({
|
|
|
|
currentDocument,
|
|
|
|
editorState,
|
|
|
|
docType,
|
2018-11-30 07:37:36 +00:00
|
|
|
toggles,
|
2018-11-15 06:24:04 +00:00
|
|
|
handleKeyCommand,
|
|
|
|
onChangeEditorState,
|
|
|
|
onToolButtonClick,
|
|
|
|
setMode,
|
|
|
|
cancelEdit,
|
|
|
|
onSubmitClick,
|
2018-11-30 07:37:36 +00:00
|
|
|
inputs,
|
2018-11-23 21:23:08 +00:00
|
|
|
onDocumentTitleChange,
|
|
|
|
onColorPickerInputChange,
|
|
|
|
onColorSwatchClick,
|
|
|
|
userErrors,
|
2018-11-15 06:24:04 +00:00
|
|
|
}) =>
|
|
|
|
<div>
|
|
|
|
<div id='editor_metadata'>
|
2018-11-30 07:37:36 +00:00
|
|
|
{toggles.loading === true &&
|
2018-11-15 06:24:04 +00:00
|
|
|
<LoadingSpinner />
|
|
|
|
}
|
2018-12-04 05:27:16 +00:00
|
|
|
<input type='text' value={inputs.documentTitle} placeholder='Document Title' onChange={onDocumentTitleChange}/>
|
2018-11-15 06:24:04 +00:00
|
|
|
</div>
|
|
|
|
<div id='editor_topbar'>
|
|
|
|
<EditModeTopBar
|
|
|
|
editorState={editorState}
|
|
|
|
onToolButtonClick={onToolButtonClick}
|
|
|
|
disabled={!currentDocument.id ? true : false}
|
|
|
|
/>
|
|
|
|
</div>
|
2018-12-03 06:31:44 +00:00
|
|
|
<div id='editor_content' className={'edit_mode ' + docType}>
|
2018-11-15 06:24:04 +00:00
|
|
|
<Editor
|
|
|
|
editorState={editorState}
|
2018-11-23 21:23:08 +00:00
|
|
|
handleKeyCommand={handleKeyCommand}
|
2018-11-15 06:24:04 +00:00
|
|
|
onChange={onChangeEditorState}
|
|
|
|
/>
|
|
|
|
</div>
|
2018-12-03 06:31:44 +00:00
|
|
|
<div id='editor_attributes' className={'edit_mode ' + docType}>
|
2018-11-23 21:23:08 +00:00
|
|
|
{docType === 'tags' &&
|
2018-11-30 07:37:36 +00:00
|
|
|
<TagColorPicker input={inputs.colorPicker} onChange={onColorPickerInputChange} onColorSwatchClick={onColorSwatchClick}/>
|
2018-11-23 21:23:08 +00:00
|
|
|
}
|
|
|
|
</div>
|
2018-11-15 06:24:04 +00:00
|
|
|
<div id='editor_bottombar'>
|
|
|
|
<EditModeBottomBar cancelEdit={cancelEdit} onSubmitClick={onSubmitClick} />
|
|
|
|
</div>
|
2018-11-23 21:23:08 +00:00
|
|
|
<div id='user_errors'>
|
|
|
|
{userErrors.map(error =>
|
|
|
|
<div key={error} className='user_error_message'>{error}</div>
|
|
|
|
)}
|
|
|
|
</div>
|
2018-11-15 06:24:04 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
export default EditorEditMode
|