136 lines
3.6 KiB
TypeScript
136 lines
3.6 KiB
TypeScript
import { TinaMarkdownContent } from "tinacms/dist/rich-text";
|
|
import { RichTextTemplate } from "@tinacms/schema-tools";
|
|
import { tinaField } from "tinacms/dist/react";
|
|
|
|
enum imageSize {
|
|
extraSmall = "extra-small",
|
|
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,
|
|
inline: boolean,
|
|
alt: string
|
|
}
|
|
|
|
|
|
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.extraSmall:
|
|
return "xs-size";
|
|
case imageSize.small:
|
|
return "sm-size";
|
|
case imageSize.medium:
|
|
return "md-size";
|
|
case imageSize.large:
|
|
return "lg-size";
|
|
default:
|
|
return undefined;
|
|
}
|
|
};
|
|
|
|
const getPositionTypeClass = (): string | undefined => {
|
|
switch (props.position) {
|
|
case imagePosition.left:
|
|
return (props.inline) ? "float-left mr-2" : "flex justify-start";
|
|
case imagePosition.middle:
|
|
return "flex justify-center";
|
|
case imagePosition.right:
|
|
return (props.inline) ? "float-right ml-2" : "flex justify-end";
|
|
default:
|
|
return undefined;
|
|
}
|
|
};
|
|
|
|
const getClassNameWithSpace = (className: string): string => `${ className ? ` ${ className }` : "" }`;
|
|
|
|
const decorationTypeClass = getDecorationTypeClass();
|
|
|
|
const sizeTypeClass = getSizeTypeClass();
|
|
|
|
const positionTypeClass = getPositionTypeClass();
|
|
|
|
return (<div className={ `not-prose inline-image${ getClassNameWithSpace(positionTypeClass) }` }>
|
|
<img className={ `${ decorationTypeClass ? `${ decorationTypeClass }` : "" }${ getClassNameWithSpace(sizeTypeClass) }` }
|
|
data-tina-field={ tinaField(props, "imageUrl") }
|
|
alt={ props.alt }
|
|
src={ props.imageUrl }/>
|
|
</div>);
|
|
};
|
|
|
|
export const imageSchema: RichTextTemplate = {
|
|
name: "Image",
|
|
label: "Advanced Image",
|
|
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: "inline",
|
|
label: "Inline",
|
|
type: "boolean"
|
|
},
|
|
{
|
|
name: "decorations",
|
|
label: "Decorations",
|
|
type: "string",
|
|
options: Object.values(imageDecorations)
|
|
},
|
|
{
|
|
name: "alt",
|
|
label: "Alt",
|
|
type: "string"
|
|
}
|
|
] };
|
|
|
|
export default Image;
|