Contentful logo

Contentful Community

Using Contentful field editors

Ecosystem App Framework & UI Extensions
#1

Has anyone tried using/integrating the Contentful field editors?

I am trying to create my own custom entry editor and trying to use some field editors from the above.
However, I am not able to find proper documentation or examples on the different props required for each.

eg. I tried using the SingleLineEditor, but the documentation says it needs just 4 props,
field, locales, isInitiallyDisabled

But field prop is an object and expects function definitions from us like these:
getValue
onSchemaErrorsChanged
onIsDisabledChanged
onValueChanged
setValue

I am not able to find what needs to be passed from use for these and first of all why… Any pointers around these will be really helpful.
Thank you!

1 Like
#2

Hi @vrunda Im trying to achieve the same. Trying to keep it simple seems like the SDK is the important prop here, since isInitiallyDisabled and withCharValidation you can set up them with a default boolean value.
Regarding the sdk this prop you want to pick it from the init function of the contentful ui extension package as follows:

    import { init, EditorExtensionSDK } from "contentful-ui-extensions-sdk";
    init((sdk) => {
        render(
            <MyComponent sdk={sdk as EditorExtensionSDK} />,`
            document.getElementById("root")
        );
      });

Given that seems like this SDK can take several different objects,

  • If you are developing a whole editor you will have values inside the SDK oriented to develop full editors
  • If you are doing a Field extension you will have properties oriented to develop field extension… etc

So as far as I understand the Contentful Field Editors expect to have a SDK with Field and Locale properties ( Which I guess is present on the FieldExtensionSDK but not in the EditorExtensionSDK or SidebarExtensionSDK… )

In conclusion I am stucked in the same point, I tryed to fake pass some field and locale into the props but im getting inside-component errors.

So any help following this is really appreciated, if i missed or mistaken something please feel free to point me out.

Thanks!