feat: allow floating images (figures)

components/content/figure.tsx

@@ -20,9 +20,23 @@ export function Figure(props: Readonly<FigureProps>): ReactNode {
 	const { alignment = "stretch", alt = "", children, height, src, width } = props;
 
 	return (
-		<figure className={cn("flex flex-col", alignment === "center" ? "justify-center" : undefined)}>
+		<figure
+			className={cn(
+				"flex flex-col",
+				alignment === "center" ? "justify-center" : undefined,
+				alignment === "left"
+					? "inline-block sm:float-left sm:my-0 sm:me-4"
+					: alignment === "right"
+						? "inline-block sm:float-right sm:my-0 sm:ms-4"
+						: undefined,
+			)}
+		>
 			<Image alt={alt} height={height} src={src} width={width} />
-			<figcaption>{children}</figcaption>
+			<figcaption
+				className={cn(["left", "right"].includes(alignment) ? "sm:contain-inline-size" : undefined)}
+			>
+				{children}
+			</figcaption>
 		</figure>
 	);
 }

content/en/resources/hosted/introduction-to-dictionaries/index.mdx

@@ -140,7 +140,7 @@ The oldest dictionaries that we know of — those produced in the Middle East, A
 1. that words which are assumed to be known to the user can be used to describe those that are not; and
 2. that words to be explained need to be arranged somehow in order for the user to be able to locate them.nigram
 
-<Figure src="/assets/content/assets/en/resources/hosted/introduction-to-dictionaries/h-vla9hu.jpg">
+<Figure src="/assets/content/assets/en/resources/hosted/introduction-to-dictionaries/h-vla9hu.jpg" alignment="right">
   16th tablet of the Urra=hubullu lexical series, Louvre Museum. [CC BY 2.5](https://creativecommons.org/licenses/by/2.5)
 </Figure>
 

lib/content/keystatic/components/figure/preview.tsx

@@ -19,7 +19,17 @@ export function FigurePreview(props: Readonly<FigurePreviewProps>): ReactNode {
 	const url = useObjectUrl(src);
 
 	return (
-		<figure className={cn("grid gap-y-2", alignment === "center" ? "justify-center" : undefined)}>
+		<figure
+			className={cn(
+				"grid gap-y-2",
+				alignment === "center" ? "justify-center" : undefined,
+				alignment === "left"
+					? "inline-block sm:float-left sm:my-0 sm:me-4"
+					: alignment === "right"
+						? "inline-block sm:float-right sm:my-0 sm:ms-4"
+						: undefined,
+			)}
+		>
 			<NotEditable>
 				{url != null ? (
 					// eslint-disable-next-line @next/next/no-img-element
@@ -30,7 +40,14 @@ export function FigurePreview(props: Readonly<FigurePreviewProps>): ReactNode {
 					/>
 				) : null}
 			</NotEditable>
-			<figcaption className="text-sm">{children}</figcaption>
+			<figcaption
+				className={cn(
+					"text-sm",
+					["left", "right"].includes(alignment) ? "sm:contain-inline-size" : undefined,
+				)}
+			>
+				{children}
+			</figcaption>
 		</figure>
 	);
 }

lib/content/options.ts

@@ -34,6 +34,8 @@ export type ContentType = (typeof contentTypes)[number]["value"];
 
 export const figureAlignments = [
 	{ label: "Center", value: "center" },
+	{ label: "Left", value: "left" },
+	{ label: "Right", value: "right" },
 	{ label: "Stretch", value: "stretch" },
 ] as const;