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.