Function CodeEditor

frontend/src/components/CodeEditor.tsx:104–273

({
	code,
	framework
}: {
	code: string
	framework: Framework
})

}

export default function CodeEditor({
	code,
	framework
}: {
	code: string
	framework: Framework
}) {
	const tabWidth = 2
	const printWidth = 200
	const params = useParams()
	const id = params.id ?? 'new'
	const uiContext = useContext(CurrentUiContext)
	const [readOnly, setReadOnly] = useState(framework !== 'html')
	const editor = useRef<editor.IStandaloneCodeEditor>()

	const [checkResumePos, setCheckResumePos] = useState<Position | undefined>()
	const [formattedCode, setFormattedCode] = useState<string>('')
	const [bufferedCode, setBufferedCode] = useState<string>('')
	const bufferTimer = useRef<NodeJS.Timeout>()
	const [editing, setEditing] = useState(false)
	const throttledCode = useThrottle(code)

	const saveHistory = useSaveHistory()
	const [rawItem, setRawItem] = useAtom(historyAtomFamily({ id }))
	const uiState = useAtomValue(uiStateAtom)
	const item = useMemo(
		() => new ItemWrapper(rawItem, setRawItem, saveHistory),
		[rawItem, setRawItem, saveHistory]
	)
	const [versionIdx, setVersionIdx] = useVersion(item)

	useEffect(() => {
		if (checkResumePos) {
			const curVersion = item.version(versionIdx)
			if (!curVersion.includes('.')) {
				const newVersionIdx = item.editChapter(formattedCode, versionIdx)
				setVersionIdx(newVersionIdx)
				// TODO: the cursor advances funky after one edit :(
				setTimeout(() => {
					editor.current?.setPosition(checkResumePos)
				}, 100)
			}
			setCheckResumePos(undefined)
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [checkResumePos, setCheckResumePos, versionIdx, setVersionIdx])

	const handleEditorDidMount = (e: editor.IStandaloneCodeEditor, m: Monaco) => {
		m.editor.setTheme('openui')
		editor.current = e
		// This ensures we create a new version and maintain cursor position when
		// Editing a non-point version
		let position: Position | undefined
		let fixPosition = false
		e.onDidChangeModelContent(() => {
			if (position) {
				// E.setPosition(position)
				position = undefined