@rebasepro/cms 0.17.3 → 0.18.1

package/src/form/field_bindings/MarkdownEditorFieldBinding.tsx

@@ -1,259 +0,0 @@
-import React, { Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { FieldHelperText } from "../components/FieldHelperText";
-import { LabelWithIconAndTooltip } from "../components/LabelWithIconAndTooltip";
-import { useAuthController, useStorageSource } from "@rebasepro/app";
-import { useStorageSources } from "@rebasepro/app";
-import { resolveStorageSource } from "@rebasepro/common";
-import { getIconForProperty } from "../../util/property_utils";
-import type { FieldProps } from "../../types/fields";
-import type { ArrayProperty, StringProperty } from "@rebasepro/types";
-import {
-    cls,
-    fieldBackgroundDisabledMixin,
-    fieldBackgroundHoverMixin,
-    fieldBackgroundMixin,
-    IconButton,
-    lazyChunk,
-    Skeleton,
-    XIcon
-} from "@rebasepro/ui";
-import type { RichTextEditorProps } from "../../editor";
-import { resolveStorageFilenameString, resolveStoragePathString } from "@rebasepro/common";
-import { randomString } from "@rebasepro/utils";
-
-// Lazy-load ProseMirror editor + markdown parser/serializer (~300KB)
-// Only fetched when a markdown field is actually rendered.
-const RichTextEditor = lazyChunk(() => import("../../editor").then(m => ({ default: m.RichTextEditor })));
-const loadMarkdownUtils = () => import("../../editor/markdown");
-let _markdownUtils: Awaited<ReturnType<typeof loadMarkdownUtils>> | null = null;
-const getMarkdownUtils = async () => {
-    if (!_markdownUtils) _markdownUtils = await loadMarkdownUtils();
-    return _markdownUtils;
-};
-
-interface MarkdownEditorFieldProps {
-    highlight?: { from: number, to: number };
-    editorProps?: Partial<RichTextEditorProps>
-}
-
-/**
- * Normalize markdown for comparison purposes: collapse whitespace,
- * normalize line endings, trim lines. This is NOT for display.
- */
-function normalizeMarkdown(md: string | null | undefined): string {
-    if (!md) return "";
-    return md
-        .replace(/\r\n/g, "\n")
-        .replace(/\n{3,}/g, "\n\n")
-        .replace(/[ \t]+$/gm, "")
-        .trim();
-}
-
-/**
- * Compute the canonical form of a markdown string by doing a full
- * parse → serialize roundtrip through ProseMirror. This gives us
- * the exact output the editor will produce for a given input,
- * so we can compare against it to avoid false dirty states.
- *
- * Falls back to normalizeMarkdown if the ProseMirror module hasn't loaded yet.
- */
-function canonicalizeMarkdown(md: string | null | undefined): string {
-    if (!md) return "";
-    if (!_markdownUtils) return normalizeMarkdown(md);
-    try {
-        const doc = _markdownUtils.parser.parse(md);
-        if (!doc) return normalizeMarkdown(md);
-        return normalizeMarkdown(_markdownUtils.serializer.serialize(doc));
-    } catch {
-        return normalizeMarkdown(md);
-    }
-}
-
-export function MarkdownEditorFieldBinding({
-    property,
-    propertyKey,
-    value,
-    setValue,
-    includeDescription,
-    hideLabel,
-    showError,
-    error,
-    minimalistView,
-    disabled: disabledProp,
-    isSubmitting,
-    context,
-    customProps
-}: FieldProps<StringProperty, MarkdownEditorFieldProps>) {
-
-    const authController = useAuthController();
-    const disabled = disabledProp || isSubmitting;
-    const highlight = customProps?.highlight;
-    const editorProps = customProps?.editorProps;
-    const defaultStorageSource = useStorageSource();
-    const storage = property.storage;
-    const storageSources = useStorageSources();
-
-    // Resolve the correct storage source for this property.
-    // Mirrors the resolution in useStorageUploadController.
-    const storageSource = useMemo(() => resolveStorageSource({
-        sourceKey: storage?.storageSource,
-        sources: storageSources.sources,
-        defaultSource: defaultStorageSource
-    }), [storage?.storageSource, storageSources.sources, defaultStorageSource]);
-
-    const entityValues = context.values;
-    const entityId = context.entityId;
-    const path = context.path;
-
-    const [fieldVersion, setFieldVersion] = useState(0);
-    const internalValue = useRef<string | null>(value);
-
-    // Eagerly load ProseMirror markdown utils when the field first mounts
-    useEffect(() => {
-        getMarkdownUtils().then(() => {
-            // Update canonical ref with the proper round-tripped value now that ProseMirror is loaded
-            canonicalRef.current = canonicalizeMarkdown(value);
-        });
-    }, []);
-
-    // Compute the canonical (round-tripped) form of the initial value ONCE.
-    // This is what ProseMirror will produce after parse → serialize, so any
-    // future serialization that matches this canonical form is NOT a real change.
-    const canonicalInitialValue = useMemo(
-        () => canonicalizeMarkdown(value),
-
-        [] // intentionally only on mount
-    );
-    // Track it in a ref so the callback always has the latest
-    const canonicalRef = useRef(canonicalInitialValue);
-
-    const onContentChange = useCallback((content: string) => {
-        const normalizedContent = normalizeMarkdown(content);
-
-        // Compare against the canonical roundtripped form of the initial value.
-        // This eliminates ALL false positives from parse→serialize normalization
-        // differences (trailing nodes, bullet chars, whitespace, etc.).
-        if (normalizedContent === canonicalRef.current) {
-            return;
-        }
-        // Also compare against the current form value to avoid redundant updates
-        if (normalizedContent === normalizeMarkdown(value)) {
-            return;
-        }
-        internalValue.current = content;
-        setValue(content);
-    }, [setValue, value]);
-
-    useEffect(() => {
-        if (internalValue.current !== value) {
-            internalValue.current = value;
-            canonicalRef.current = canonicalizeMarkdown(value);
-            setFieldVersion(v => v + 1);
-        }
-    }, [value]);
-
-    const fileNameBuilder = useCallback(async (file: File) => {
-        if (storage?.fileName) {
-            const fileName = await resolveStorageFilenameString({
-                input: storage.fileName,
-                storage,
-                values: entityValues,
-                entityId,
-                path,
-                property: property,
-                file,
-                propertyKey
-            });
-            if (!fileName || fileName.length === 0) {
-                throw Error("You need to return a valid filename");
-            }
-            return fileName;
-        }
-        return randomString() + "_" + file.name;
-    }, [entityId, entityValues, path, property, propertyKey, storage]);
-
-    const storagePathBuilder = useCallback((file: File) => {
-        if (!storage) return "/";
-        return resolveStoragePathString({
-            input: storage.storagePath,
-            storage,
-            values: entityValues,
-            entityId,
-            path,
-            property,
-            file,
-            propertyKey
-        }) ?? "/";
-    }, [entityId, entityValues, path, property, propertyKey, storage]);
-
-    const editor = <Suspense fallback={<Skeleton height={200} className="w-full rounded-md"/>}>
-        <RichTextEditor
-        content={value}
-        onMarkdownContentChange={onContentChange}
-        version={context.formex.version + fieldVersion}
-        highlight={highlight}
-        disabled={disabled}
-        handleImageUpload={async (file: File) => {
-            const storagePath = storagePathBuilder(file);
-            const fileName = await fileNameBuilder(file);
-            const key = `${storagePath}/${fileName}`.replace(/^\/+/, "").replace(/\/+/g, "/");
-            const result = await storageSource.putObject({
-                file,
-                key
-            });
-            const downloadConfig = await storageSource.getSignedUrl(result.key);
-            const url = downloadConfig.url;
-            if (!url) {
-                throw new Error("Error uploading image");
-            }
-            return url;
-        }}
-        {...editorProps}
-    />
-    </Suspense>;
-
-    if (minimalistView)
-        return editor;
-
-    return (
-        <>
-            {!hideLabel && <div className="flex items-center w-full">
-                <LabelWithIconAndTooltip
-                    propertyKey={propertyKey}
-                    icon={getIconForProperty(property, "small")}
-                    required={property.validation?.required}
-                    title={property.name ?? propertyKey}
-                    className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
-            </div>}
-            {/* `relative` so Clear can float inside the box. It used to sit in
-                the label row, which meant a clearable field with its label
-                lifted out by the form still drew a row of chrome above the box
-                and started lower than the field beside it.
-                Bottom-right, not top: the editor puts its own mode toggle at
-                `top-2 right-2` and the two would sit on each other. */}
-            <div
-                className={cls("relative rounded-md", fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin)}>
-                {property.admin?.clearable && !disabled && (
-                    <IconButton
-                        size="small"
-                        className="absolute bottom-1 right-1 z-10"
-                        onClick={(e) => {
-                            e.stopPropagation();
-                            e.preventDefault();
-                            setValue(null);
-                        }}
-                    >
-                        <XIcon/>
-                    </IconButton>
-                )}
-                {editor}
-            </div>
-            <FieldHelperText includeDescription={includeDescription}
-                showError={showError}
-                error={error}
-                property={property}/>
-        </>
-
-    );
-
-}

package/src/form/field_bindings/MultiSelectFieldBinding.tsx

@@ -1,130 +0,0 @@
-import type { FieldProps } from "../../types/fields";
-import type { ArrayProperty, Property } from "@rebasepro/types";
-import React, { useCallback } from "react";
-
-;
-import { FieldHelperText } from "../components/FieldHelperText";
-import { LabelWithIconAndTooltip } from "../components/LabelWithIconAndTooltip";
-import { EnumValuesChip } from "../../preview";
-import { getIconForProperty } from "../../util/property_utils";
-import { enumToObjectEntries, getLabelOrConfigFrom } from "@rebasepro/common";
-import { iconSize, MultiSelect, MultiSelectItem, XIcon } from "@rebasepro/ui";
-import { useClearRestoreValue } from "../useClearRestoreValue";
-
-/**
- * This fields renders a dropdown with multiple selection.
- *
- * This is one of the internal components that get mapped natively inside forms
- * and tables to the specified properties.
- * @group Form fields
- */
-export function MultiSelectFieldBinding({
-    propertyKey,
-    value,
-    setValue,
-    error,
-    showError,
-    disabled,
-    property,
-    includeDescription,
-    hideLabel,
-    size = "large",
-    autoFocus
-}: FieldProps<ArrayProperty, unknown, Record<string, unknown>>) {
-
-    const of = property.of;
-    if (!of) {
-        throw Error("Using wrong component ArrayEnumSelect");
-    }
-
-    if (Array.isArray(of)) {
-        throw Error("Using array properties instead of single one in `of` in ArrayProperty");
-    }
-
-    if (of.type !== "string" && of.type !== "number") {
-        throw Error("Field misconfiguration: array field of type string or number");
-    }
-
-    const enumValues = of.enum ? enumToObjectEntries(of.enum) : undefined;
-    if (!enumValues) {
-        console.error(property);
-        throw Error("Field misconfiguration: array field of type string or number needs to have enumValues");
-    }
-
-    useClearRestoreValue({
-        property,
-        value,
-        setValue
-    });
-
-    const validValue = !!value && Array.isArray(value);
-
-    const renderValue = useCallback((enumKey: string, list: boolean) => {
-        const enumValue = enumKey !== undefined ? getLabelOrConfigFrom(enumValues, enumKey) : undefined;
-        return <EnumValuesChip
-            enumKey={enumKey}
-            enumValues={enumValues}
-            size={"medium"}
-            key={enumKey}>
-            {enumValue?.label ?? enumKey}
-            {!list && <button
-                className="ml-1 ring-offset-background rounded-full outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2"
-                onMouseDown={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                }}
-                onClick={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    setValue((value ?? []).filter((v: string | number) => v !== enumKey));
-                }}
-            >
-                <XIcon size={iconSize.smallest}/>
-            </button>}
-        </EnumValuesChip>;
-    }, [enumValues, setValue, value]);
-
-    return (
-        <>
-            <MultiSelect
-                // No top margin: `className` lands on the box itself, not on
-                // the label above it, so `mt-2` was 8px of gap between the
-                // form's label and this control and none between the label and
-                // the text field beside it. A binding renders a control, not a
-                // labelled control — the top of what it renders is the top of
-                // the box, or it will not line up with its neighbour.
-                className={"w-full"}
-                size={size}
-                value={validValue ? value.map((v) => v?.toString()) : []}
-                disabled={disabled}
-                modalPopover={true}
-                label={hideLabel ? undefined : <LabelWithIconAndTooltip
-                    propertyKey={propertyKey}
-                    icon={getIconForProperty(property, "small")}
-                    required={property.validation?.required}
-                    title={property.name ?? propertyKey}
-                    className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
-                onValueChange={(updatedValue: string[]) => {
-                    let newValue;
-                    if (of && (of as Property)?.type === "number") {
-                        newValue = updatedValue ? (updatedValue as string[]).map((e) => parseFloat(e)) : [];
-                    } else {
-                        newValue = updatedValue;
-                    }
-                    return setValue(newValue);
-                }}>
-                {enumValues.map((enumValue) => String(enumValue.id)).map((enumKey) => (
-                    <MultiSelectItem key={enumKey} value={enumKey}>
-                        {renderValue(enumKey, true)}
-                    </MultiSelectItem>))}
-            </MultiSelect>
-
-            <FieldHelperText includeDescription={includeDescription}
-                showError={showError}
-                error={error}
-                disabled={disabled}
-                property={property}/>
-
-        </>
-    );
-}

package/src/form/field_bindings/MultipleRelationFieldBinding.tsx

@@ -1,168 +0,0 @@
-import { useSelectionDialog } from "../../hooks/useSelectionDialog";
-import type { FieldProps } from "../../types/fields";
-import type { RelationProperty } from "@rebasepro/types";
-import { Entity, getCollectionDataPath, getDataSourceCapabilities } from "@rebasepro/types";
-import React, { useCallback } from "react";
-import { FieldHelperText } from "../components/FieldHelperText";
-import { LabelWithIconAndTooltip } from "../components/LabelWithIconAndTooltip";
-import { ArrayContainer, ArrayEntryParams } from "../../components/ArrayContainer";
-import { getIconForProperty } from "../../util/property_utils";
-import { getRelationFrom, resolveRelationProperty } from "@rebasepro/common";
-
-import { ErrorView, useTranslation } from "@rebasepro/app";
-import { Button, cls, ExpandablePanel, fieldBackgroundMixin, PencilIcon, Typography } from "@rebasepro/ui";
-import { RelationPreview } from "../../preview";
-
-/**
- * This field allows selecting multiple references.
- *
- * This is one of the internal components that get mapped natively inside forms
- * and tables to the specified properties.
- * @group Form fields
- */
-export function MultipleRelationFieldBinding({
-    propertyKey,
-    value: valueProp,
-    error,
-    showError,
-    disabled,
-    isSubmitting,
-    property,
-    includeDescription,
-    setValue,
-    setFieldValue,
-    context
-}: FieldProps<RelationProperty>) {
-
-    const value = Array.isArray(valueProp) ? valueProp : [];
-    const { t } = useTranslation();
-
-    if (property.type !== "relation") {
-        throw Error("RelationFieldBinding expected a property containing a relation");
-    }
-
-    const parentCollection = context.collection;
-    const capabilities = parentCollection ? getDataSourceCapabilities(parentCollection.engine) : undefined;
-    // Only two things have to hold here: there is a collection, and its engine
-    // has relations at all. Whether *this* property's relation can be resolved
-    // is `resolveRelationProperty`'s question, and it answers it across all
-    // three forms — a pre-stamped `resolvedRelation`, an inline `relation`, or
-    // a lookup by name in the collection's `relations` array — with an error
-    // naming the property and the collection when it cannot.
-    //
-    // This used to demand the `relations` array as well, which the inline form
-    // does not produce. That is the documented way to declare a relation, so
-    // every collection using it threw here and rendered the error boundary
-    // instead of the field.
-    if (!parentCollection || !capabilities?.supportsRelations) {
-        throw Error("MultipleRelationFieldBinding expected a collection whose engine supports relations");
-    }
-    const resolvedProperty = resolveRelationProperty(property, parentCollection, propertyKey)
-    const relation = resolvedProperty;
-    if (!relation)
-        throw Error(
-            "Property relation is required for MultipleRelationFieldBinding"
-        )
-
-    const selectedEntityIds = value && Array.isArray(value) ? value.map((ref) => ref.id) : [];
-    const collection = relation.target();
-
-    const onMultipleEntitiesSelected = useCallback((entities: Entity<Record<string, unknown>>[]) => {
-        setValue(entities.map(e => getRelationFrom(e)));
-    }, [setValue]);
-
-    const referenceDialogController = useSelectionDialog({
-        multiselect: true,
-        path: getCollectionDataPath(collection),
-        collection,
-        onMultipleEntitiesSelected,
-        selectedEntityIds,
-        fixedFilter: property.admin?.fixedFilter
-    }
-    );
-
-    const onEntryClick = (e: React.SyntheticEvent) => {
-        e.preventDefault();
-        referenceDialogController.open();
-    };
-
-    const buildEntry = useCallback(({
-        index,
-        internalId,
-        storedProps,
-        storeProps
-    }: ArrayEntryParams) => {
-        const entryValue = value && Array.isArray(value) && value.length > index ? value[index] : undefined;
-        if (!entryValue)
-            return <div>Internal ERROR</div>;
-        return (
-            <RelationPreview
-                key={internalId}
-                previewProperties={property.admin?.previewProperties}
-                size={"medium"}
-                onClick={onEntryClick}
-                hover={!disabled}
-                relation={entryValue}
-                includeId={property.admin?.includeId}
-                includeEntityLink={property.admin?.includeEntityLink}
-            />
-        );
-    }, [relation, property.admin?.previewProperties, value]);
-
-    const title = (<>
-        <LabelWithIconAndTooltip
-            propertyKey={propertyKey}
-            icon={getIconForProperty(property, "small")}
-            required={property.validation?.required}
-            title={property.name ?? propertyKey}
-            className={"h-8 flex grow text-text-secondary dark:text-text-secondary-dark"}/>
-        {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
-    </>);
-
-    const body = <>
-        {!collection && <ErrorView
-            error={"The specified collection does not exist. Check console"}/>}
-
-        {collection && <div className={"group"}>
-
-            <ArrayContainer droppableId={propertyKey}
-                value={value}
-                disabled={isSubmitting}
-                buildEntry={buildEntry}
-                canAddElements={false}
-                addLabel={property.name ? t("add_reference_to", { name: property.name }) : t("add_reference")}
-                newDefaultEntry={null}
-                onValueChange={(value) => setFieldValue(propertyKey, value)}
-            />
-
-            <Button
-                className="ml-3.5 my-4 justify-center text-left"
-                variant="text"
-                color="primary"
-                disabled={isSubmitting}
-                onClick={onEntryClick}>
-                <PencilIcon size={16}/>
-                {t("edit")} {property.name}
-            </Button>
-        </div>}
-    </>;
-
-    return (
-        <>
-
-            <ExpandablePanel
-                titleClassName={fieldBackgroundMixin}
-                innerClassName={cls("px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2", fieldBackgroundMixin)}
-                title={title}>
-                {body}
-            </ExpandablePanel>
-
-            <FieldHelperText includeDescription={includeDescription}
-                showError={showError}
-                error={error}
-                disabled={disabled}
-                property={property}/>
-
-        </>
-    );
-}

package/src/form/field_bindings/ReadOnlyFieldBinding.tsx

@@ -1,94 +0,0 @@
-import type { FieldProps } from "../../types/fields";
-import type { Property } from "@rebasepro/types";
-import React from "react";
-
-;
-
-import { PropertyPreview } from "../../preview";
-import { FieldHelperText } from "../components/FieldHelperText";
-import { LabelWithIconAndTooltip } from "../components/LabelWithIconAndTooltip";
-import { ErrorBoundary } from "@rebasepro/ui";
-import { getIconForProperty } from "../../util/property_utils";
-import { cls } from "@rebasepro/ui";
-
-/**
- *
- * Simply render the non-editable preview of a field
- *
- * This is one of the internal components that get mapped natively inside forms
- * and tables to the specified properties.
- * @group Form fields
- */
-export function ReadOnlyFieldBinding({
-    propertyKey,
-    value,
-    error,
-    showError,
-    minimalistView,
-    property,
-    includeDescription,
-    hideLabel,
-    context
-}: FieldProps<Property>) {
-
-    // if (!context.entityId)
-    //     throw new Error("ReadOnlyFieldBinding: Entity id is null");
-
-    const skipCardWrapper = property.type === "relation" || property.type === "reference";
-
-    return (
-
-        <>
-
-            {!minimalistView && !hideLabel && <LabelWithIconAndTooltip
-                propertyKey={propertyKey}
-                icon={getIconForProperty(property, "small")}
-                required={property.validation?.required}
-                title={property.name ?? propertyKey}
-                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3"}/>
-            }
-
-            <div
-                className={cls(
-                    "w-full overflow-x-scroll no-scrollbar flex items-center",
-                    skipCardWrapper
-                        ? ""
-                        // `min-h-12` is `TextField`'s own `large` height, which is
-                        // what every editable field in the form is. At 40px a
-                        // read-only field sat 8px short of the input beside it,
-                        // so a row holding one of each had its two boxes'
-                        // baselines and bottom edges disagree — the field looked
-                        // misaligned rather than uneditable.
-                        // `px-3` is what `TextField` gives its input, so a
-                        // read-only value starts on the same vertical line as
-                        // the text beside it. It was `px-4 md:px-6`, which in a
-                        // one-column span spent a sixth of the box on empty
-                        // margin and pushed short values towards the middle.
-                        : "rounded-lg border border-surface-200 dark:border-surface-700 px-3 min-h-12 opacity-80"
-                )}>
-
-                <ErrorBoundary>
-                    {/* The field is labelled either just above by this
-                        component, or by the `FieldBlock` that asked for
-                        `hideLabel` — never by the preview. `BooleanPreview`
-                        prints the property name beside its checkbox, so a
-                        read-only boolean read as "Procesado por LLM" over a
-                        checkbox saying "Procesado por LLM", wrapped over two
-                        lines in a one-column span. */}
-                    <PropertyPreview propertyKey={propertyKey}
-                        value={value}
-                        property={property}
-                        hideLabel={hideLabel || !minimalistView}
-                        size={"medium"}/>
-                </ErrorBoundary>
-
-            </div>
-
-            <FieldHelperText includeDescription={includeDescription}
-                showError={showError}
-                error={error}
-                property={property}/>
-
-        </>
-    );
-}