How to make 1 million € in 10 daysSkip to content (Opens in a new window)

0 high-fives

00 comments

Explore (Opens in a new window) Pull requests (Opens in a new window) Issues (Opens in a new window)Marketplace (Opens in a new window)

(Opens in a new window)

steady-media (Opens in a new window) / main_app (Opens in a new window) Private

main_app (Opens in a new window)/assets (Opens in a new window)/js (Opens in a new window)/components (Opens in a new window)/multimedia_text_editor (Opens in a new window)/editor_form.jsx /

jiegillet (Opens in a new window) [STE-1709] Remove lodash dependency ( (Opens in a new window)#6023 (Opens in a new window)) (Opens in a new window)

Latest commit 00a3890 (Opens in a new window) on 30 Aug (Opens in a new window)

History (Opens in a new window)

6 contributors (Opens in a new window) (Opens in a new window) (Opens in a new window) (Opens in a new window) (Opens in a new window) (Opens in a new window)

140 lines (119 sloc) 4.77 KB

import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react' import { convertToRaw } from 'draft-js' import { convertToHtml } from './html_export.jsx' import { isPostNew, stripUploadingEntities } from './helpers' import { debounce } from '../../util/function' import { paywallSettingKeysToCamelCase } from './api' import { PostContext } from './post_context.jsx' import Editor from './editor.jsx' import { AUTOSAVE_STATES } from './constants' import AutoSaveStatus from './autosave_status.jsx' import { CaretRight } from './icons.jsx' const DEFAULT_AUTOSAVE_TIMEOUT = 2000 export default function EditorForm ({ autosave, autosaveTimeout, revert, rawOutputSelector, htmlOutputSelector, referenceHtmlOutput, submitButtonText }) { const postContext = React.useContext(PostContext) const [saveState, setSaveState] = useState(AUTOSAVE_STATES.NO_CHANGES) const rawOutputField = useRef(document.querySelector(rawOutputSelector)) const htmlOutputField = useRef(document.querySelector(htmlOutputSelector)) const getShowRevert = () => { const paywallSettingsKeyPairs = [ ['image', 'draftImage'], ['pitch', 'draftPitch'], ['ctaText', 'draftCtaText'] ] return htmlOutputField.current.value !== referenceHtmlOutput || paywallSettingsKeyPairs.some(keyPair => postContext.paywallSettings[keyPair[0]] !== postContext.paywallSettings[keyPair[1]] ) } const [showRevert, setShowRevert] = useState(getShowRevert()) const initialValue = rawOutputField.current.value // We keep the editorState also in a ref to avoid having to re-attach the event handler // on every render, which would be needed to keep editorState up-to-date // https://reactjs.org/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often (Opens in a new window) const latestEditorState = useRef(null) const persistEditorStateToForm = useCallback(() => { pushEditURLToHistory() const contentState = stripUploadingEntities(latestEditorState.current).getCurrentContent() rawOutputField.current.value = JSON.stringify(convertToRaw(contentState)) htmlOutputField.current.value = convertToHtml(contentState) setShowRevert(getShowRevert()) }, []) // eslint-disable-line react-hooks/exhaustive-deps const handleSubmit = persistEditorStateToForm const handleChange = (editorState, { force } = {}) => { const stateHasChanged = latestEditorState.current && (latestEditorState.current.getCurrentContent() !== editorState.getCurrentContent()) latestEditorState.current = editorState if ((force || stateHasChanged) && editorState.getCurrentContent().hasText()) { setSaveState(AUTOSAVE_STATES.UNSAVED) debouncedAutosave() } } const pushEditURLToHistory = () => { if (isPostNew()) { const newLocation = window.location.href.replace(/\/posts\/new$/, `/posts/${postContext.id}/edit`) up.history.replace(newLocation) } } const immediateAutosave = async () => { persistEditorStateToForm() setSaveState(AUTOSAVE_STATES.SAVING) try { const payload = await autosave() if (payload.paywall_settings) { postContext.setPaywallSettings(paywallSettingKeysToCamelCase(payload.paywall_settings)) } pushEditURLToHistory() setSaveState(AUTOSAVE_STATES.SAVED) } catch { setSaveState(AUTOSAVE_STATES.ERROR) } } const debouncedAutosave = useMemo(() => debounce(immediateAutosave, autosaveTimeout || DEFAULT_AUTOSAVE_TIMEOUT), [autosaveTimeout, autosave, persistEditorStateToForm, postContext] // eslint-disable-line react-hooks/exhaustive-deps ) useEffect(() => { htmlOutputField.current.form.addEventListener('submit', handleSubmit) const form = htmlOutputField.current.form return () => { form.removeEventListener('submit', handleSubmit) } }, [handleSubmit]) useEffect(() => { // update revert button visibility when paywall settings change setShowRevert(getShowRevert()) }, [postContext, getShowRevert]) const renderedAutoSaveStatus = <AutoSaveStatus saveState={saveState}> <button type="submit" className="editor_controls__submit_button"> {submitButtonText} <CaretRight /> </button> </AutoSaveStatus> const onRevert = async () => { const { body, rawBody, paywallSettings } = await revert(postContext.id) rawOutputField.current.value = rawBody htmlOutputField.current.value = body setShowRevert(false) postContext.setPaywallSettings(paywallSettingKeysToCamelCase(paywallSettings)) return { body, rawBody } } return <Editor onRevert={onRevert} showRevert={showRevert} initialValue={initialValue} onChange={handleChange} immediateAutosave={immediateAutosave} autoSaveStatus={renderedAutoSaveStatus} submitButtonText={submitButtonText} />

}