102 lines
2.5 KiB
TypeScript
102 lines
2.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) => {
|
|
const getDecorationTypeClass = (): string | undefined => {
|
|
switch (props.decorations) {
|
|
case imageDecorations.default:
|
|
return "default-border";
|
|
case imageDecorations.noStyle:
|
|
return undefined;
|
|
default:
|
|
return undefined;
|
|
}
|
|
};
|
|
|
|
const getSizeTypeClass = (): string | undefined => {
|
|
switch (props.size) {
|
|
case imageSize.small:
|
|
return "sm-size";
|
|
case imageSize.medium:
|
|
return "md-size";
|
|
case imageSize.large:
|
|
return "lg-size";
|
|
default:
|
|
return undefined;
|
|
}
|
|
};
|
|
|
|
const decorationTypeClass = getDecorationTypeClass();
|
|
|
|
const sizeTypeClass = getSizeTypeClass();
|
|
|
|
return (<div className={ "inline-image" }>
|
|
<img className={ `${ decorationTypeClass ? `${ decorationTypeClass }` : "" }${ sizeTypeClass ? ` ${ sizeTypeClass }` : "" }` }
|
|
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;
|