I am trying to create a plugin for a custom InputType called ‘ComplexLink’. I have the plugin working to handle a single text field but my goal is to be able to capture a more complex input form that could be captured in the form of an object. Much like what you get back from the cloudinaryImageEditor plugin. My problem is that I can’t figure out how to manage the object state. I have tried defining an interface so I can have props.value.input1 and props.value.input2 but that is not working and I am either getting an error or the fields get set to the same value. Can someone look at this code and provide some pointers:
// contents of plugin.jsx
/** @jsx jsx */
import { jsx } from '@emotion/core';
import { Builder } from '@builder.io/react';
import ComplexLink from './complexlink';
Builder.registerEditor({
name: 'ComplexLink',
component: ComplexLink,
});
//contents of complexlink.tsx
import React from 'react';
// TODO: Add a link component that can be used in the CMS
interface ComplexLinkProps {
value: {
input1: string;
input2: string;
};
onChange: (value: { input1: string; input2: string }) => void;
}
const ComplexLink = (props: ComplexLinkProps) => {
return (
<div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: '8px', alignItems: 'center' }}>
<label style={{ gridColumn: '1 / 2' }}>
Input 1:
</label>
<input style={{ gridColumn: '2 / 3' }} type="text" value={props.value.input1} onChange={e => props.onChange({ ...props.value, input1: e.target.value })} />
<label style={{ gridColumn: '1 / 2' }}>
Input 2:
</label>
<input style={{ gridColumn: '2 / 3' }} type="text" value={props.value.input2} onChange={e => props.onChange({ ...props.value, input2: e.target.value })} />
</div>
);
};
export default ComplexLink;
To test this in the cms, I have just created a structured data model called plugin-poc and then added a filed called links referencing this new input type.
The full code can be found here:
Thanks in advance for your help!