I would like to add a custom field to strapi but the plugin does not seem to work, and I am out of ideas as to why.
Here is my server/index.ts:
export default ({ strapi }: { strapi: Strapi }) => {
strapi.customFields.register({
name: 'link',
plugin: 'fields',
type: 'string'
});
};
The admin/src/index.ts:
register(app: any) {
const plugin = {
id: pluginId,
initializer: Initializer,
isReady: false,
name,
};
app.registerPlugin(plugin);
app.customFields.register({
name: 'link',
plugin: 'fields',
type: 'string',
intlLabel: {
id: "fields.link.label",
defaultMessage: "Link",
},
intlDescription: {
id: "fields.link.description",
defaultMessage: "Paste any link",
},
components: {
Input: async () => import("./components/LinkInput"),
},
});
},
Any finally the .components/LinkInput:
import React from "react";
import { useIntl } from "react-intl";
interface LinkInputProps {
attribute: { type: string; [key: string]: unknown };
disabled?: boolean;
intlLabel: any; // Replace 'any' with the actual type for intlLabel
name: string;
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
required?: boolean;
value?: string;
}
export const LinkInput: React.ForwardRefRenderFunction<HTMLInputElement, LinkInputProps> = (props, ref) => {
const { attribute, disabled, intlLabel, name, onChange, required, value } = props;
const { formatMessage } = useIntl();
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
onChange({
target: { name, type: attribute.type, value: e.currentTarget.value },
} as React.ChangeEvent<HTMLInputElement>);
};
return (
<label>
{formatMessage(intlLabel)}
<input
ref={ref}
name={name}
disabled={disabled}
value={value}
required={required}
onChange={handleChange}
/>
</label>
);
};
I was following the documentation Strapi provides, but in some cases I had to do things differently, because it was not even compiling.
Edit: The plugin does not even show up in the admin panel, only in the plugin list. (it is enabled, I have an other plugin that works perfectly fine)
