92 lines
2.4 KiB
React
92 lines
2.4 KiB
React
|
// @flow
|
||
|
|
import fs from 'fs';
|
||
|
|
import React, { useEffect } from 'react';
|
||
|
|
import { SIMPLE_SITE } from 'config';
|
||
|
|
import { FF_MAX_CHARS_IN_DESCRIPTION } from 'constants/form-field';
|
||
|
|
import { FormField } from 'component/common/form';
|
||
|
|
import usePersistedState from 'effects/use-persisted-state';
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
uri: ?string,
|
||
|
|
label: ?string,
|
||
|
|
disabled: ?boolean,
|
||
|
|
fileInfo: FileListItem,
|
||
|
|
filePath: string | WebFile,
|
||
|
|
fileText: ?string,
|
||
|
|
isStillEditing: boolean,
|
||
|
|
setPrevFileText: string => void,
|
||
|
|
updatePublishForm: ({}) => void,
|
||
|
|
};
|
||
|
|
|
||
|
|
function StoryEditor(props: Props) {
|
||
|
|
const {
|
||
|
|
uri,
|
||
|
|
label,
|
||
|
|
disabled,
|
||
|
|
fileInfo,
|
||
|
|
filePath,
|
||
|
|
fileText,
|
||
|
|
isStillEditing,
|
||
|
|
setPrevFileText,
|
||
|
|
updatePublishForm,
|
||
|
|
} = props;
|
||
|
|
|
||
|
|
const [advancedEditor, setAdvancedEditor] = usePersistedState('publish-form-story-mode', false);
|
||
|
|
|
||
|
|
function toggleMarkdown() {
|
||
|
|
setAdvancedEditor(!advancedEditor);
|
||
|
|
}
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
// @if TARGET='app'
|
||
|
|
function readFile(path) {
|
||
|
|
return new Promise((resolve, reject) => {
|
||
|
|
fs.readFile(path, 'utf8', (error, data) => {
|
||
|
|
error ? reject(error) : resolve(data);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
async function updateEditorText(path) {
|
||
|
|
const text = await readFile(path);
|
||
|
|
if (text) {
|
||
|
|
// Store original content
|
||
|
|
setPrevFileText(text);
|
||
|
|
// Update text editor form
|
||
|
|
updatePublishForm({ fileText: text });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const isEditingFile = isStillEditing && uri && fileInfo;
|
||
|
|
|
||
|
|
if (isEditingFile) {
|
||
|
|
const { mime_type: mimeType, download_path: downloadPath } = fileInfo;
|
||
|
|
|
||
|
|
// Editing same file (previously published)
|
||
|
|
// User can use a different file to replace the content
|
||
|
|
if (!filePath && mimeType === 'text/markdown') {
|
||
|
|
updateEditorText(downloadPath);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// @endif
|
||
|
|
}, [uri, isStillEditing, filePath, fileInfo, setPrevFileText, updatePublishForm]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<FormField
|
||
|
|
type={!SIMPLE_SITE && advancedEditor ? 'markdown' : 'textarea'}
|
||
|
|
name="content_story"
|
||
|
|
label={label}
|
||
|
|
placeholder={__('My content for this story...')}
|
||
|
|
value={fileText}
|
||
|
|
disabled={disabled}
|
||
|
|
onChange={value => updatePublishForm({ fileText: advancedEditor ? value : value.target.value })}
|
||
|
|
quickActionLabel={advancedEditor ? __('Simple Editor') : __('Advanced Editor')}
|
||
|
|
quickActionHandler={toggleMarkdown}
|
||
|
|
textAreaMaxLength={FF_MAX_CHARS_IN_DESCRIPTION}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default StoryEditor;
|