How to make 1 million € in 10 daysSkip to content (S'ouvre dans une nouvelle fenêtre)

0 high-five

00 commentaire

Explore (S'ouvre dans une nouvelle fenêtre) Pull requests (S'ouvre dans une nouvelle fenêtre) Issues (S'ouvre dans une nouvelle fenêtre)Marketplace (S'ouvre dans une nouvelle fenêtre)

(S'ouvre dans une nouvelle fenêtre)

steady-media (S'ouvre dans une nouvelle fenêtre) / main_app (S'ouvre dans une nouvelle fenêtre) Private

main_app (S'ouvre dans une nouvelle fenêtre)/assets (S'ouvre dans une nouvelle fenêtre)/js (S'ouvre dans une nouvelle fenêtre)/components (S'ouvre dans une nouvelle fenêtre)/multimedia_text_editor (S'ouvre dans une nouvelle fenêtre)/editor_form.jsx /

jiegillet (S'ouvre dans une nouvelle fenêtre) [STE-1709] Remove lodash dependency ( (S'ouvre dans une nouvelle fenêtre)#6023 (S'ouvre dans une nouvelle fenêtre)) (S'ouvre dans une nouvelle fenêtre)

Latest commit 00a3890 (S'ouvre dans une nouvelle fenêtre) on 30 Aug (S'ouvre dans une nouvelle fenêtre)

History (S'ouvre dans une nouvelle fenêtre)

6 contributors (S'ouvre dans une nouvelle fenêtre) (S'ouvre dans une nouvelle fenêtre) (S'ouvre dans une nouvelle fenêtre) (S'ouvre dans une nouvelle fenêtre) (S'ouvre dans une nouvelle fenêtre) (S'ouvre dans une nouvelle fenêtre)

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 (S'ouvre dans une nouvelle fenêtre) 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} />

}