Zum Hauptinhalt springen

How to make 1 million € in 10 daysSkip to content (Öffnet in neuem Fenster)

   (Öffnet in neuem Fenster)

   (Öffnet in neuem Fenster)

Explore (Öffnet in neuem Fenster)      Pull requests (Öffnet in neuem Fenster) Issues (Öffnet in neuem Fenster)Marketplace (Öffnet in neuem Fenster)

     (Öffnet in neuem Fenster)

   (Öffnet in neuem Fenster)

steady-media (Öffnet in neuem Fenster)  /  main_app (Öffnet in neuem Fenster)  Private

More

main_app (Öffnet in neuem Fenster)/assets (Öffnet in neuem Fenster)/js (Öffnet in neuem Fenster)/components (Öffnet in neuem Fenster)/multimedia_text_editor (Öffnet in neuem Fenster)/editor_form.jsx /

jiegillet (Öffnet in neuem Fenster)  [STE-1709] Remove lodash dependency ( (Öffnet in neuem Fenster)#6023 (Öffnet in neuem Fenster)) (Öffnet in neuem Fenster)

Latest commit 00a3890 (Öffnet in neuem Fenster) on 30 Aug     (Öffnet in neuem Fenster)

   History   (Öffnet in neuem Fenster)

6                 contributors            (Öffnet in neuem Fenster)    (Öffnet in neuem Fenster)    (Öffnet in neuem Fenster)    (Öffnet in neuem Fenster)    (Öffnet in neuem Fenster)    (Öffnet in neuem Fenster)

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 (Öffnet in neuem Fenster)    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}    />

}

Footer

   (Öffnet in neuem Fenster)

   (Öffnet in neuem Fenster)         © 2022 GitHub, Inc.

Footer navigation

I don't know. Do you know? Please tell me.

0 Kommentare

Möchtest du den ersten Kommentar schreiben?
Werde Mitglied von Angelika's Cow World 🐄 und starte die Unterhaltung.
Mitglied werden