nextjs-cms 0.9.42 → 0.10.1

package/dist/core/fields/richText.js

@@ -1,39 +1,93 @@
-import { Field, baseFieldConfigSchema } from './field.js';
-import { entityKind } from '../helpers/index.js';
-import * as z from 'zod';
+import fs from 'fs';
+import path from 'path';
+import { and, eq, sql } from 'drizzle-orm';
 import { customAlphabet } from 'nanoid';
 import sharp from 'sharp';
-import path from 'path';
+import * as z from 'zod';
 import { db } from '../../db/client.js';
 import { EditorPhotosTable } from '../../db/schema.js';
-import fs from 'fs';
-import { and, eq, sql } from 'drizzle-orm';
+import getString from '../../translations/index.js';
+import { base64ByteLength, humanReadableFileSize, maxFileSizeToBytes } from '../../utils/index.js';
 import { getCMSConfig } from '../config/index.js';
+import { backgroundSchema, entityKind } from '../helpers/index.js';
+import { DEFAULT_INLINE_IMAGE_SIZE, DEFAULT_MAX_FILE_SIZE, inlineImageResizeOptions } from '../helpers/inline-image.js';
 import { sanitizeRichText } from '../security/dom.js';
+import { baseFieldConfigSchema, Field } from './field.js';
 const positiveInt = z.number().int().positive();
 const nonNegativeInt = z.number().int().nonnegative();
+/**
+ * Bounds each inline image is fitted into, discriminated on `fit` so `background` only exists
+ * where it means something. Mirrors the `fit` vocabulary of the photo field, using sharp's own
+ * names so the behaviour is not renamed in translation.
+ */
+const inlineImageSizeSchema = z.discriminatedUnion('fit', [
+    z.strictObject({
+        width: positiveInt,
+        height: positiveInt,
+        fit: z.literal('inside').describe('Scale down to fit within the box, keeping aspect ratio (sharp fit: inside)'),
+    }),
+    z.strictObject({
+        width: positiveInt,
+        height: positiveInt,
+        fit: z.literal('cover').describe('Crop to fill dimensions (sharp fit: cover)'),
+    }),
+    z.strictObject({
+        width: positiveInt,
+        height: positiveInt,
+        fit: z.literal('contain').describe('Pad with background to fill dimensions (sharp fit: contain)'),
+        /**
+         * Falls back to `media.images.background` from the CMS config, which is transparent by
+         * default. Transparency needs an alpha-capable `format` (webp or png) — jpeg flattens it
+         * to black, so set an opaque colour when writing jpeg.
+         */
+        background: backgroundSchema.optional().describe('Background color for padding'),
+    }),
+]);
+/**
+ * Matches the `{name}` placeholder (whitespace tolerated: `{ name }`).
+ *
+ * Built on demand rather than shared as a single global regex: a `/g` regex is stateful via
+ * `lastIndex`, so reusing one instance across `test()` calls silently alternates its result.
+ */
+const NAME_PLACEHOLDER = String.raw `\{\s*name\s*\}`;
+const hasNamePlaceholder = (value) => new RegExp(NAME_PLACEHOLDER).test(value);
+const resolvePublicURL = (template, name) => template.replace(new RegExp(NAME_PLACEHOLDER, 'g'), name);
 const allowImageUploadsSchema = z.strictObject({
     /**
-     * The public URL prefix for inline photos.
+     * The public URL template for inline photos.
      * This url should be handled by the website app, not the NextJS-CMS app
      * This is the URL that will be used to access the photos publicly on the website
-     * The name of the photo will be appended to this URL
+     *
+     * `{name}` marks where the generated filename goes, so it can sit anywhere in the URL —
+     * a path segment (`https://site.com/photos/{name}`) or a query parameter
+     * (`https://site.com/api/photo?folder=posts&name={name}`).
      */
-    publicURLPrefix: z.url().describe('The public URL prefix for inline photos'),
-    size: z
-        .strictObject({
-        width: positiveInt,
-        height: positiveInt,
-        crop: z.boolean().default(false),
+    publicURL: z
+        .url()
+        .refine(hasNamePlaceholder, {
+        message: 'publicURL must contain the {name} placeholder, e.g. https://site.com/photos/{name}',
     })
-        .optional(),
+        .describe('The public URL template for inline photos; {name} is replaced with the generated filename'),
+    /**
+     * Bounds applied to each inline image before it is written to disk.
+     * Defaults to {@link DEFAULT_INLINE_IMAGE_SIZE}.
+     *
+     * `fit: 'inside'` scales the image down to fit within the box, keeping its aspect ratio and
+     * never enlarging a smaller image. `fit: 'cover'` fills the box exactly, cropping the overflow.
+     * `fit: 'contain'` pads the image out to the full box with `background`.
+     */
+    size: inlineImageSizeSchema.optional(),
+    /**
+     * Largest accepted inline image, measured on the decoded image rather than the base64 text.
+     * Rejected during submission, before the item is saved. Defaults to {@link DEFAULT_MAX_FILE_SIZE}.
+     */
     maxFileSize: z
         .strictObject({
         size: positiveInt,
         unit: z.enum(['kb', 'mb']),
     })
         .optional(),
-    handleMethod: z.enum(['base64', 'tempSave']).optional(),
+    // handleMethod: z.enum(['base64', 'tempSave']).optional(),
     /**
      * Omit the extension of the image when saving it to disk
      */
@@ -96,13 +150,13 @@ export class RichTextField extends Field {
         this.placeholder = config.placeholder;
         this.sanitize = config.sanitize ?? true;
         this.rtl = config.rtl;
-        if (config.allowMedia && config.allowImageUploads?.publicURLPrefix) {
+        if (config.allowMedia && config.allowImageUploads?.publicURL) {
             this.allowMedia = true;
             this.allowImageUploads = {
-                publicURLPrefix: config.allowImageUploads.publicURLPrefix,
-                size: config.allowImageUploads.size ?? { width: 400, height: 400, crop: false },
-                maxFileSize: config.allowImageUploads.maxFileSize ?? { size: 1, unit: 'mb' },
-                handleMethod: config.allowImageUploads.handleMethod ?? 'base64',
+                // handleMethod: config.allowImageUploads.handleMethod ?? 'base64',
+                publicURL: config.allowImageUploads.publicURL,
+                size: config.allowImageUploads.size ?? DEFAULT_INLINE_IMAGE_SIZE,
+                maxFileSize: config.allowImageUploads.maxFileSize ?? DEFAULT_MAX_FILE_SIZE,
                 omitExtension: config.allowImageUploads.omitExtension ?? true,
                 format: config.allowImageUploads.format ?? 'webp',
             };
@@ -164,9 +218,24 @@ export class RichTextField extends Field {
             return;
         const regex = /<img.*?src="(data:image\/.*?;base64,.*?)".*?>/g;
         const matches = this.value.matchAll(regex);
+        const maxFileSize = this.allowImageUploads.maxFileSize ?? DEFAULT_MAX_FILE_SIZE;
+        const maxBytes = maxFileSizeToBytes(maxFileSize);
         for (const match of matches) {
             const base64String = match[1];
             const extension = base64String.split(';')[0].split('/')[1];
+            /**
+             * Reject oversized images here rather than in `writeInlineImages`: extraction runs
+             * during submission, so throwing prevents the item from being saved at all, whereas
+             * the write step runs afterwards and the row would already exist.
+             */
+            const byteLength = base64ByteLength(base64String.split(',')[1] ?? '');
+            if (byteLength > maxBytes) {
+                throw new Error(getString('fileSizeExceedsMax', this.language, {
+                    field: this.getLocalizedLabel(),
+                    actual: humanReadableFileSize(byteLength),
+                    max: `${maxFileSize.size} ${maxFileSize.unit}`,
+                }));
+            }
             const randomString = customAlphabet('1234567890abcdef', 21)();
             const name = `${randomString}${this.allowImageUploads.omitExtension ? '' : `.${extension}`}`;
             this._inlinePhotos.push({
@@ -175,9 +244,9 @@ export class RichTextField extends Field {
                 name: name,
             });
             /**
-             * Replace the inline image src with the name of the image
+             * Replace the inline image src with the public URL of the image
              */
-            this.value = this.value.replace(base64String, `${this.allowImageUploads?.publicURLPrefix}/${name}`);
+            this.value = this.value.replace(base64String, resolvePublicURL(this.allowImageUploads.publicURL, name));
         }
     }
     async writeInlineImages(sectionName, itemId, locale) {
@@ -203,7 +272,9 @@ export class RichTextField extends Field {
             sharp.cache({ files: 0 });
             sharp.cache(false);
             const image = sharp(buffer);
+            const size = this.allowImageUploads.size ?? DEFAULT_INLINE_IMAGE_SIZE;
             await image
+                .resize(inlineImageResizeOptions(size, cmsConfig.media.images.background))
                 .toFormat(this.allowImageUploads.format ?? 'webp')
                 .toFile(path.join(uploadsFolder, '.photos', sectionName, photo.name));
             /**
@@ -237,7 +308,7 @@ export class RichTextField extends Field {
         /**
          * Sanitize the value
          */
-        this.sanitizeValue();
+        await this.sanitizeValue();
         if (!this.value)
             return;
         /**
@@ -291,19 +362,17 @@ export class RichTextField extends Field {
         if (tablePhotos.length === 0)
             return;
         /**
-         * Extract the photos from the value (only photos that has the publicURLPrefix)
-         */
-        const regex = new RegExp(`${this.allowImageUploads.publicURLPrefix}/(.*?)`, 'g');
-        const matches = this.value.matchAll(regex);
-        const photosInValue = [];
-        for (const match of matches) {
-            photosInValue.push(match[1]);
-        }
-        /**
-         * Check if the photos in the database are still present in the value
+         * Check if the photos in the database are still present in the value.
+         *
+         * Matched on the generated filename rather than the full public URL: the name is a unique
+         * random token, while the URL is presentation. It can be re-encoded by the sanitizer
+         * (`&` -> `&amp;`), or change wholesale when `publicURL` or the site's domain changes —
+         * none of which mean the admin removed the image. A stale match here deletes a file that
+         * is still in use, so the check errs towards keeping (an orphan file is recoverable, a
+         * deleted one is not).
          */
         for (const tablePhoto of tablePhotos) {
-            if (!photosInValue.includes(tablePhoto.name)) {
+            if (!this.value.includes(tablePhoto.name)) {
                 /**
                  * Delete the photo from the database
                  */

package/dist/core/fields/select.d.ts

@@ -379,8 +379,8 @@ declare const selectFieldConfigSchema: z.ZodIntersection<z.ZodUnion<readonly [z.
 }, z.core.$strict>]>, z.ZodObject<{
     type: z.ZodLiteral<"select">;
     optionsType: z.ZodEnum<{
-        db: "db";
         section: "section";
+        db: "db";
         static: "static";
     }>;
     build: z.ZodFunction<z.core.$ZodFunctionArgs, z.ZodCustom<SelectField, SelectField>>;

package/dist/core/helpers/background.d.ts

@@ -0,0 +1,18 @@
+import * as z from 'zod';
+/**
+ * Padding colour schema — shared by every field that resizes images, so the shape stays
+ * identical across them. Only meaningful alongside `fit: 'contain'`, where the image is padded
+ * out to the full box; fields fall back to `media.images.background` from the CMS config when
+ * it is omitted.
+ *
+ * `alpha: 0` only survives in formats with an alpha channel (webp, png). Encoding transparent
+ * padding to jpeg flattens it to black, so pick an opaque colour for jpeg output.
+ */
+export declare const backgroundSchema: z.ZodObject<{
+    r: z.ZodNumber;
+    g: z.ZodNumber;
+    b: z.ZodNumber;
+    alpha: z.ZodNumber;
+}, z.core.$strict>;
+export type Background = z.infer<typeof backgroundSchema>;
+//# sourceMappingURL=background.d.ts.map

package/dist/core/helpers/background.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"background.d.ts","sourceRoot":"","sources":["../../../src/core/helpers/background.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,CAAC,MAAM,KAAK,CAAA;AAExB;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB;;;;;kBAO+C,CAAA;AAE5E,MAAM,MAAM,UAAU,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,gBAAgB,CAAC,CAAA"}

package/dist/core/helpers/background.js

@@ -0,0 +1,18 @@
+import * as z from 'zod';
+/**
+ * Padding colour schema — shared by every field that resizes images, so the shape stays
+ * identical across them. Only meaningful alongside `fit: 'contain'`, where the image is padded
+ * out to the full box; fields fall back to `media.images.background` from the CMS config when
+ * it is omitted.
+ *
+ * `alpha: 0` only survives in formats with an alpha channel (webp, png). Encoding transparent
+ * padding to jpeg flattens it to black, so pick an opaque colour for jpeg output.
+ */
+export const backgroundSchema = z
+    .strictObject({
+    r: z.number().min(0).max(255).describe('Red channel (0-255)'),
+    g: z.number().min(0).max(255).describe('Green channel (0-255)'),
+    b: z.number().min(0).max(255).describe('Blue channel (0-255)'),
+    alpha: z.number().min(0).max(1).describe('Alpha channel (0-1)'),
+})
+    .describe('Background color for image padding (used with fit: contain)');

package/dist/core/helpers/index.d.ts

@@ -2,7 +2,11 @@ export { is } from './entity.js';
 export { entityKind } from './entity.js';
 export type { LZEntity } from './entity.js';
 export { hasOwnEntityKind } from './entity.js';
-export { evaluateConditionalRule, evaluateConditionalRuleGroup, normalizeConditionalRules } from './conditional-rules.js';
+export { evaluateConditionalRule, evaluateConditionalRuleGroup, normalizeConditionalRules, } from './conditional-rules.js';
+export { backgroundSchema } from './background.js';
+export { inlineImageResizeOptions, DEFAULT_INLINE_IMAGE_SIZE, DEFAULT_MAX_FILE_SIZE, INLINE_IMAGE_REGEX, } from './inline-image.js';
+export type { InlineImageSize, InlineImageMaxFileSize } from './inline-image.js';
+export type { Background } from './background.js';
 export { watermarkPositionEnum, watermarkObjectSchema, watermarkConfigSchema, WATERMARK_DEFAULTS, resolveWatermark, } from './watermark.js';
 export type { WatermarkPosition, WatermarkObject, WatermarkConfig, ResolvedWatermark } from './watermark.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/core/helpers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/helpers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAA;AAChC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,YAAY,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAI9C,OAAO,EAAE,uBAAuB,EAAE,4BAA4B,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAA;AACzH,OAAO,EACH,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,kBAAkB,EAClB,gBAAgB,GACnB,MAAM,gBAAgB,CAAA;AACvB,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/helpers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAA;AAChC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,YAAY,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAI9C,OAAO,EACH,uBAAuB,EACvB,4BAA4B,EAC5B,yBAAyB,GAC5B,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,EACH,wBAAwB,EACxB,yBAAyB,EACzB,qBAAqB,EACrB,kBAAkB,GACrB,MAAM,mBAAmB,CAAA;AAC1B,YAAY,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAA;AAChF,YAAY,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EACH,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,kBAAkB,EAClB,gBAAgB,GACnB,MAAM,gBAAgB,CAAA;AACvB,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/core/helpers/index.js

@@ -4,5 +4,7 @@ export { hasOwnEntityKind } from './entity.js';
 // Note: the `and` / `or` authoring wrappers are re-exported from `core/fields` (alongside the field
 // factories that section configs use), so they are intentionally not re-exported here to avoid a
 // duplicate export when `core/index` merges both barrels.
-export { evaluateConditionalRule, evaluateConditionalRuleGroup, normalizeConditionalRules } from './conditional-rules.js';
+export { evaluateConditionalRule, evaluateConditionalRuleGroup, normalizeConditionalRules, } from './conditional-rules.js';
+export { backgroundSchema } from './background.js';
+export { inlineImageResizeOptions, DEFAULT_INLINE_IMAGE_SIZE, DEFAULT_MAX_FILE_SIZE, INLINE_IMAGE_REGEX, } from './inline-image.js';
 export { watermarkPositionEnum, watermarkObjectSchema, watermarkConfigSchema, WATERMARK_DEFAULTS, resolveWatermark, } from './watermark.js';

package/dist/core/helpers/inline-image.d.ts

@@ -0,0 +1,46 @@
+import type sharp from 'sharp';
+import type { Background } from './background.js';
+/**
+ * Inline-image sizing shared by the rich-text field, the editor upload route, and the client-side
+ * validator.
+ *
+ * Deliberately a leaf module with type-only imports. The validators are environment-neutral —
+ * the admin form calls them in the browser, and a consumer may call them server-side — so reaching
+ * these through a barrel that pulls the database client, sharp, or fs would break the client build.
+ * Import this file directly rather than via `core/helpers/index.js` for the same reason.
+ */
+export type InlineImageSize = {
+    width: number;
+    height: number;
+    fit: 'inside';
+} | {
+    width: number;
+    height: number;
+    fit: 'cover';
+} | {
+    width: number;
+    height: number;
+    fit: 'contain';
+    background?: Background;
+};
+export type InlineImageMaxFileSize = {
+    size: number;
+    unit: 'kb' | 'mb';
+};
+/**
+ * Bounds every inline image is fitted into unless the field overrides `size`.
+ * 1200x675 is 16:9 at a width that covers typical article body content, scaled down to fit so a
+ * body image is never cropped or padded unless the field asks for it.
+ */
+export declare const DEFAULT_INLINE_IMAGE_SIZE: InlineImageSize;
+/** Largest accepted inline image unless the field overrides `maxFileSize`. */
+export declare const DEFAULT_MAX_FILE_SIZE: InlineImageMaxFileSize;
+/** Same shape `extractInlineImages` looks for, so every side agrees on what an inline image is. */
+export declare const INLINE_IMAGE_REGEX: RegExp;
+/**
+ * Sharp resize options for an inline image, so every place that writes one — the field on save and
+ * the editor upload route — sizes it identically. `background` is the CMS-config fallback, used
+ * only when the field asks for `contain` without naming its own.
+ */
+export declare function inlineImageResizeOptions(size: InlineImageSize, background: Background): sharp.ResizeOptions;
+//# sourceMappingURL=inline-image.d.ts.map

package/dist/core/helpers/inline-image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-image.d.ts","sourceRoot":"","sources":["../../../src/core/helpers/inline-image.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAEjD;;;;;;;;GAQG;AAEH,MAAM,MAAM,eAAe,GACrB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,QAAQ,CAAA;CAAE,GAChD;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,OAAO,CAAA;CAAE,GAC/C;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,SAAS,CAAC;IAAC,UAAU,CAAC,EAAE,UAAU,CAAA;CAAE,CAAA;AAEhF,MAAM,MAAM,sBAAsB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAAA;CAAE,CAAA;AAExE;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,EAAE,eAIvC,CAAA;AAED,8EAA8E;AAC9E,eAAO,MAAM,qBAAqB,EAAE,sBAAgD,CAAA;AAEpF,mGAAmG;AACnG,eAAO,MAAM,kBAAkB,QAAmD,CAAA;AAElF;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,eAAe,EAAE,UAAU,EAAE,UAAU,GAAG,KAAK,CAAC,aAAa,CAU3G"}

package/dist/core/helpers/inline-image.js

@@ -0,0 +1,30 @@
+/**
+ * Bounds every inline image is fitted into unless the field overrides `size`.
+ * 1200x675 is 16:9 at a width that covers typical article body content, scaled down to fit so a
+ * body image is never cropped or padded unless the field asks for it.
+ */
+export const DEFAULT_INLINE_IMAGE_SIZE = {
+    width: 1200,
+    height: 675,
+    fit: 'inside',
+};
+/** Largest accepted inline image unless the field overrides `maxFileSize`. */
+export const DEFAULT_MAX_FILE_SIZE = { size: 1, unit: 'mb' };
+/** Same shape `extractInlineImages` looks for, so every side agrees on what an inline image is. */
+export const INLINE_IMAGE_REGEX = /<img.*?src="(data:image\/.*?;base64,.*?)".*?>/g;
+/**
+ * Sharp resize options for an inline image, so every place that writes one — the field on save and
+ * the editor upload route — sizes it identically. `background` is the CMS-config fallback, used
+ * only when the field asks for `contain` without naming its own.
+ */
+export function inlineImageResizeOptions(size, background) {
+    return {
+        width: size.width,
+        height: size.height,
+        fit: size.fit,
+        // `inside` only ever scales down — enlarging a smaller image to fill the box would cost
+        // quality for nothing. `cover` and `contain` produce the exact box, so they may enlarge.
+        withoutEnlargement: size.fit === 'inside',
+        ...(size.fit === 'contain' ? { background: size.background ?? background } : {}),
+    };
+}