editable content in react or handlebars component

You can add properties to a component to allow simple configuration. 

For example, the following component json:

{
  "id" : "Announcement",
  "markupLanguage" : "HANDLEBARS",
  "defaults" : {
    "config" : {
      "applicablePages" : [ ],
      "description" : "",
      "fetchedContent" : null
    },
    "props" : [ {
      "id" : "announcement_text",
      "dataType" : "STRING",
      "list" : false,
      "label" : "Announcement Text",
      "description" : "Announcement text to display",
      "control" : "INPUT"
    } ]
  },
  "components" : [ {
    "id" : "custom.widget.Announcement"
  } ],
  "grouping" : "CUSTOM",
  "scriptGroups" : null,
  "aboutThis" : null
}

Adds a simple input box to the component settings in designer where an Admin can add announcement text.

I handlebars, I access the text with {{component.props.announcement_text}}

This is handy for adding titles or some small information used in layout and stuff.

But what about real HTML content with multiple lines to add lists, links and stuff?

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
			}
		}
		
	}
}