Custom inputs

In addition to the built in property inputs, you can define your own.

Use the additionalInputs property of the config for that:

import {
  Config,
  ComponentInfo,
  EditorInput,
  ElementContainer,
  InputMap,
  PageElement,
  StringProperty,
} from "@tyzo/page-editor";

export const EmailProp: EditorInput<{
  property: StringProperty;
  element: PageElement;
  elementContainer: ElementContainer;
  components: ComponentInfo[];
  inputs: InputMap;
  value: string;
  setValue: (value: string) => void;
}> = function EmailProp(props) {
  return (
    <input
      value={props.value}
      onChange={(value) => props.setValue(value)}
      type="email"
    />
  );
};

const config: Config = {
  ...
  additionalInputs: {
    email: EmailProp,
  }
}

With this input defined, you can now use email as the type of your property.