import { ComponentPropsWithoutRef } from "react" import { FestaMoment } from "../renderers/datetime" import { FestaMarkdownRenderer } from "../renderers/markdown" import { EditingModeBranch } from "./base" type TextInputProps = ComponentPropsWithoutRef<"input"> & { value: string } type FileInputProps = ComponentPropsWithoutRef<"input"> & { value?: undefined } type TextAreaProps = ComponentPropsWithoutRef<"textarea"> & { value: string } /** * Controlled input component which displays an `input[type="text"]` in edit mode, and a `span` displaying the input in view mode. */ export const EditableText = (props: TextInputProps) => { return ( } view={
{props.value}
} /> ) } /** * Controlled input component which displays an `input[type="file"]` in edit mode, and is invisible in view mode. * * Has no value due to how file inputs function in JS and React. */ export const EditableFilePicker = (props: FileInputProps) => { return ( } view={ <> } /> ) } /** * Controlled input component which displays a `textarea` in edit mode, and renders the input in Markdown using {@link FestaMarkdownRenderer} in view mode. */ export const EditableMarkdown = (props: TextAreaProps) => { return ( } view={ } /> ) } /** * Controlled input component which displays a `input[type="datetime-local"]` in edit mode, and renders the selected datetime using {@link FestaMoment} in view mode. */ export const EditableDateTimeLocal = (props: TextInputProps) => { return ( } view={
} /> ) }