Custom Editor Field

Under the hood, Burdy uses react-hook-form for our Headless editor.

Out of the box we offer a variety of content type fields. 12 Core fields (text, number, richtext, assets, images, relations, checkbox, dropdown, choice group, color picker, date picker and custom component) and 4 Layout fields (group, repeatable, dynamic zone and tab).

In some scenarios, there will be a need to add a custom field type that we do not have, such as Google Maps, for the author to select location or Markdown editor to write a document.

In these scenarios adding a custom Editor Field will be as easy as using any other hook. We will need to add 2 hooks, 1 backend filter, and 1 admin sync filter.

Backend filter contentType/fields will add a new field type to the configuration:

Hooks.addFilter('contentType/fields', async (fields) => {
return [
...fields,
{
type: 'markdown', // this is field type
name: 'Markdown',
iconProps: { iconName: 'MarkDownLanguage' }, // FluentUI Web Icons
group: 'Core',
},
];
});

Admin syncFilter admin/field/<field_type> and example of the custom field component

import {Controller} from 'react-hook-form';
import {useExtendedFormContext} from 'burdy/src/admin/config-fields/dynamic-form';

const MarkdownEditor = ({field, name}) => {
const formContext = useExtendedFormContext(); // based on useFormContext from rhf
return <Controller // React Hook Form Controller
name={name}
control={formContext.control}
rules={field.rules}
render={({
field: {onChange, onBlur, name: fieldName, value},
fieldState: {error},
}) => (
<Editor // Some markdown editor or google maps location selector
onChange={onChange}
value={value}
errorMessage={error && error.message}
/>
)}
/>
}

Hooks.addSyncFilter('admin/field/markdown', () => {
return MarkdownEditor;
});

Coming soon, multiple examples of custom fields!

Copyright © Burdy Technologies. All rights reserved.