How to shadown the existing field in an Editor field extension

📦 Plugins
#1

I’m creating a plugin in which I’d like to place additional UI next to an existing string field. If I do this as an editor plugin, the field is replaced by my UI, so my question is essentially how to create a new TextField that shadows the original one.

I know I can create an addon extension, but this puts the added UI below the existing field which is less than ideal for my use-case. Any ideas? I’m doing this in React and so can use the datocms-react-ui package

#2

Hello @lunelson

From what i understood you want to create a field addon but not bellow the field, but on its sides.
In that case, you’ll need to in fact replace the field in its entirety instead of using a field addon, this way you can specify inside your component both the input element and the additional content you wish to append besides it, and dispose them however you like inside the component, with a flex-box, a grid, on any disposition you’d like

#3

We can also think this as a feature request: being able to put a field addon in different positions than “below the field” :slight_smile:

#4

Thanks @m.finamor yes that’s what I’m trying to do, and I’m aware of the difference between editor and addon extensions; my further question then is this:

If I replace the existing TextField input with my own, what pattern do I need to use so that:

  1. it updates the field value correctly, and
  2. the validations that have been set for this field still work?

Is this possible? My use-case involves a single-line string field.

Oh and @s.verna yes please it would be great to have other positioning options for addon plugins

#5

@lunelson

A good way to think of this is that your component is “Shadowing” the actual field, it is still there, but visually hidden from the editor. So on your custom input field, you could add a change handler like:

 const handleChange = (newValue) => {
    ctx.setFieldValue(ctx.fieldPath, newValue); //where ctx.fieldPath is the original field
  };

This way, when it updates on the custom “Shadowing” input field, it will also update on the original “Shadowed” field.

When it comes to validation, as it is a single line string, you shouldn’t need any field specific validations, but if you need some validation for your specific application, you can make a function that filters the user input before updating the value of the actual field with ctx.setFieldValue, and display a visual warning if the user inputs something invalid, and don’t update the original field.

1 Like