# code-snippets/4.0.0-beta.1/js/components/EditMenu/SnippetForm/WithSnippetFormContext.tsx

Code Snippets, version 4.0.0-beta.1. 75 lines.

- Page: https://pluginprobe.com/plugins/code-snippets/4.0.0-beta.1/code/js/components/EditMenu/SnippetForm/WithSnippetFormContext.tsx
- Raw: https://pluginprobe.com/plugins/code-snippets/4.0.0-beta.1/raw/js/components/EditMenu/SnippetForm/WithSnippetFormContext.tsx
- Modified: 2026-06-19T15:56:12+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/code-snippets/4.0.0-beta.1/code/js/components/EditMenu/SnippetForm/WithSnippetFormContext.tsx#L10-L20`.

```tsx
import { isAxiosError } from 'axios'
import React, { useCallback, useMemo, useState } from 'react'
import { createContextHook } from '../../../utils/bootstrap'
import { isLicensed } from '../../../utils/screen'
import { isProSnippet } from '../../../utils/snippets/snippets'
import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'
import type { ScreenNotice } from '../../../types/ScreenNotice'
import type { Snippet } from '../../../types/Snippet'
import type { CodeEditorInstance } from '../../../types/WordPressCodeEditor'

export interface SnippetFormContext {
	snippet: Snippet
	isWorking: boolean
	isReadOnly: boolean
	setSnippet: Dispatch<SetStateAction<Snippet>>
	updateSnippet: Dispatch<SetStateAction<Snippet>>
	setIsWorking: Dispatch<SetStateAction<boolean>>
	currentNotice: ScreenNotice | undefined
	setCurrentNotice: Dispatch<SetStateAction<ScreenNotice | undefined>>
	codeEditorInstance: CodeEditorInstance | undefined
	handleRequestError: (error: unknown, message?: string) => void
	setCodeEditorInstance: Dispatch<SetStateAction<CodeEditorInstance | undefined>>
}

const [Context, useSnippetForm] = createContextHook<SnippetFormContext>('useSnippetForm')

export interface WithSnippetFormContextProps extends PropsWithChildren {
	initialSnippet: () => Snippet
}

export const WithSnippetFormContext: React.FC<WithSnippetFormContextProps> = ({ children, initialSnippet }) => {
	const [snippet, setSnippet] = useState<Snippet>(initialSnippet)
	const [isWorking, setIsWorking] = useState(false)
	const [currentNotice, setCurrentNotice] = useState<ScreenNotice>()
	const [codeEditorInstance, setCodeEditorInstance] = useState<CodeEditorInstance>()

	const isReadOnly = useMemo(
		() => snippet.locked || !isLicensed() && isProSnippet({ scope: snippet.scope }),
		[snippet.locked, snippet.scope]
	)

	const handleRequestError = useCallback((error: unknown, message?: string) => {
		console.error('Request failed', error)
		setIsWorking(false)
		setCurrentNotice(['error', [message, isAxiosError(error) ? error.message : ''].filter(Boolean).join(' ')])
	}, [setIsWorking, setCurrentNotice])

	const updateSnippet: Dispatch<SetStateAction<Snippet>> = useCallback((value: SetStateAction<Snippet>) => {
		setSnippet(previous => {
			const updated = 'object' === typeof value ? value : value(previous)
			codeEditorInstance?.codemirror.setValue(updated.code)
			window.tinymce?.activeEditor.setContent(updated.desc)
			return updated
		})
	}, [codeEditorInstance?.codemirror])

	const value: SnippetFormContext = {
		snippet,
		isWorking,
		isReadOnly,
		setSnippet,
		setIsWorking,
		updateSnippet,
		currentNotice,
		setCurrentNotice,
		codeEditorInstance,
		handleRequestError,
		setCodeEditorInstance
	}

	return <Context.Provider value={value}>{children}</Context.Provider>
}

export { useSnippetForm }

```