Does the jsxPlugin not actually render the components it inserts?

[kazi-kavish]

Having read the docs, looked at the examples and tested a simple component - it looks like the plugin just inserts the component as "jsx" (<comp prop1='whatever-user-selected-in-editor'/>) and adds an import statement for it at the top (if source was provided in the descriptor). It allows for various ways to edit the component's props but that's all it does. It doesn't actually render the component in the MDX-Editor. That is left for any other MDX reader to do.

Is my understanding correct?

Will I have to use this modified version of GenericJsxEditor to actually render components with the prop values chosen by users?

[kazi-kavish]

Or the other "trick" - which is to return the component from the "Editor" property in the descriptor?

For example, is this the only way I can make MDXEditor render a component?

(For a better example where the entire component is defined in the descriptor see this issue)

// Define component
export const Greet = ({greeting, person, children}) => {
	return (
		<div>
			<div style={{border: '1px solid red', padding: 8, margin: 8, display: 'inline-block'}}>{greeting}</div>
			<div style={{border: '1px solid red', padding: 8, margin: 8, display: 'inline-block'}}>{person}</div>
		</div>
	)
}

// Return it from descriptor, after reading prop values specified in button below
const jsxComponentDescriptors = [
	{
		name: 'Greet',
		kind: 'text',
		props: [
                      { name: 'greeting', type: 'string' },
                      { name: 'person', type: 'string' }
		],
		hasChildren: true,
		Editor: ({descriptor, mdastNode}) => {
                        const props = {
                             [mdastNode.attributes[0].name]: mdastNode.attributes[0].value,
                             [mdastNode.attributes[1].name]: mdastNode.attributes[1].value
                         }
                         return (
                              <Greet {...props} />
                         )
                }
	}
]

// Add toolbar button that inserts component with fixed values for props
const InsertGreetings = () => {
	const insertJsx = usePublisher(insertJsx$)
	return (
		<>
			<Button
				onClick={() => {
					insertJsx({
						name: 'Greet',
						kind: 'text',
						props: { greeting: 'Hello', person: 'Gandalf' }
					})
			}}> Greet Someone </Button>
		</>
	)
}