editable content in react or handlebars component

There is not any good OOB way to do that.

I had experimented with creating a Handlebars editor in React, and it is a bit complicated depending on how fancy you want to get. 

I used the @monaco-editor/react package for the editor (monaco being the underlying editor used for VS Code). However, this isn't currently supported by the SDK (not an approved dependency), so this wouldn't work in production code for now. 

Then there's a couple GraphQL queries/mutations you can use to get and save the components.

query GetComponents {
	components(markupLanguages: [HANDLEBARS], grouping: [CUSTOM]){
		id
		template{
			id
			style
			content
			defaults {
				config {
					applicablePages
					description
				}
				props {
					id
				}
			}
			components{
				id
			}
		}
	}
}

mutation SaveComponent($id: String!, $componentId: String!, $content: String!, $applicablePages: [ComponentPageScope!]!, $description: String!) {
	createOrUpdateComponentTemplate(templateInput:{
		id: $id
		markupLanguage: HANDLEBARS
		content: $content
		defaults: {
			config:{
				applicablePages: $applicablePages
				description: $description
			}
			props:[]
		}
		components:{
			id: $componentId
		}
		grouping: CUSTOM
	}) {
		result {
			id
			content
		}
		errors {

			__typename
			... on NoComponentsError {
			message
			fields
			}
			... on InvalidComponentTemplateIdError {
			message
			fields
			}
			... on NoDefaultComponentError {
			message
			fields
			}
			... on ComponentTemplateContentCannotBeSavedError {
			message
			fields
			}
			... on CreateOrUpdateComponentTemplateFailedError {
			message
			fields
			templateId
			}
			... on ValidationError {
			message
			fields
			key
			}
			... on Error {
			fields
			message
			}
			... on ErrorWithArgs {
			fields
			message
			}
		}
		
	}
}