71 lines
1.5 KiB
TypeScript
71 lines
1.5 KiB
TypeScript
import { TinaMarkdownContent } from "tinacms/dist/rich-text";
|
|
import { RichTextTemplate } from "@tinacms/schema-tools";
|
|
|
|
enum imageSize {
|
|
small = "small",
|
|
medium = "medium",
|
|
large = "large"
|
|
}
|
|
|
|
enum imageDecorations {
|
|
default = "default",
|
|
noStyle = "no-style"
|
|
}
|
|
|
|
enum imagePosition {
|
|
left = "left",
|
|
middle = "middle",
|
|
right = "right"
|
|
}
|
|
|
|
export interface ImageProps {
|
|
children: TinaMarkdownContent;
|
|
size: imageSize;
|
|
imageUrl: string,
|
|
decorations: imageDecorations,
|
|
position: imagePosition
|
|
}
|
|
|
|
const Image = (props: ImageProps) => (
|
|
<div>
|
|
<img src={ props.imageUrl }/>
|
|
</div>);
|
|
|
|
export const imageSchema: RichTextTemplate = {
|
|
name: "Image",
|
|
label: "Image",
|
|
inline: true,
|
|
ui: {
|
|
defaultItem: {
|
|
size: Object.values(imageSize)[0],
|
|
decorations: Object.values(imageDecorations)[0]
|
|
}
|
|
},
|
|
fields: [
|
|
{
|
|
name: "size",
|
|
label: "Size",
|
|
type: "string",
|
|
options: Object.values(imageSize)
|
|
},
|
|
{
|
|
name: "position",
|
|
label: "Position",
|
|
type: "string",
|
|
options: Object.values(imagePosition)
|
|
},
|
|
{
|
|
name: "imageUrl",
|
|
label: "Image",
|
|
type: "image"
|
|
},
|
|
{
|
|
name: "decorations",
|
|
label: "Decorations",
|
|
type: "string",
|
|
options: Object.values(imageDecorations)
|
|
}
|
|
] };
|
|
|
|
export default Image;
|