Plugin for custom InputType for an object

Technical Questions
1

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!

2

Hello @jhs129,

Could you confirm what is the error you are getting?

Sometimes, the problem might be with the handling of props . Make sure the onChange function passed to the component correctly handles updating the full object. For example:

const handleOnChange = (newValue) => {
  setState(prev => ({
    ...prev,
    someField: newValue.someField,
    anotherField: newValue.anotherField
  }));
}

Could you also add console logs to see what props.value looks like each time onChange is triggered. This can help you verify that the workflow is as expected.

Thanks,

3

Hi-

I am getting the following error, which as you can see is not very helpful in troubleshooting:

image
image2522×632 58.9 KB

I also am link to my github repo of my project here so you can try and run this locally.

Thanks,
John