@rebasepro/admin 0.0.1-canary.09e5ec5

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -0,0 +1,162 @@
+import type { Properties } from "@rebasepro/types";
+import type { FieldProps, PropertyFieldBindingProps } from "../../types/fields";
+import type { MapProperty } from "@rebasepro/types";
+import React from "react";
+;
+import { useTranslation } from "@rebasepro/core";
+
+import { ErrorBoundary } from "@rebasepro/ui";
+import { getIconForProperty } from "../../util/property_utils";
+import { isHidden, isReadOnly } from "@rebasepro/common";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { PropertyFieldBinding } from "../PropertyFieldBinding";
+import { cls, ExpandablePanel, InputLabel, Select, SelectItem } from "@rebasepro/ui";
+import { pick } from "@rebasepro/utils";
+
+/**
+ * Field that renders the children property fields
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function MapFieldBinding({
+    propertyKey,
+    value,
+    showError,
+    error,
+    disabled,
+    property,
+    partOfArray,
+    minimalistView: minimalistViewProp,
+    includeDescription,
+    autoFocus,
+    context,
+    onPropertyChange
+}: FieldProps<MapProperty>) {
+
+    const pickOnlySomeKeys = property.pickOnlySomeKeys || false;
+    const expanded = property.expanded === undefined ? true : property.expanded;
+    const minimalistView = minimalistViewProp || property.minimalistView;
+    const { t } = useTranslation();
+
+    if (!property.properties) {
+        throw Error(`You need to specify a 'properties' prop (or specify a custom field) in your map property ${propertyKey}`);
+    }
+
+    let mapProperties: Properties;
+    if (pickOnlySomeKeys) {
+        if (value) {
+            mapProperties = pick(property.properties,
+                ...Object.keys(value)
+                    .filter(key => key in property.properties!)
+            ) as Properties;
+        } else {
+            mapProperties = {};
+        }
+    } else {
+        mapProperties = property.properties;
+    }
+
+    const mapFormView = <>
+        <div
+            className={cls("py-1 flex flex-col space-y-2", minimalistView && property.widthPercentage !== undefined ? "mt-8" : undefined)}>
+            {Object.entries(mapProperties)
+                .filter(([_, property]) => !isHidden(property))
+                .map(([entryKey, childProperty], index) => {
+                    const thisDisabled = isReadOnly(childProperty) || Boolean(childProperty.disabled);
+                    const fieldBindingProps: PropertyFieldBindingProps<any> = {
+                        propertyKey: `${propertyKey}.${entryKey}`,
+                        disabled: disabled || thisDisabled,
+                        property: childProperty,
+                        includeDescription,
+                        context,
+                        partOfArray: false,
+                        minimalistView: false,
+                        autoFocus: autoFocus && index === 0,
+                        onPropertyChange: function (updatedProperty) {
+                            onPropertyChange?.({
+                                properties: {
+                                    [entryKey]: updatedProperty
+                                }
+                            } as Partial<MapProperty>);
+                        }
+                    };
+
+                    return (
+                        <div key={`map-${propertyKey}-${index}`} className={"relative"}>
+                            <ErrorBoundary>
+                                <PropertyFieldBinding
+                                    {...fieldBindingProps}/>
+                            </ErrorBoundary>
+                        </div>
+                    );
+                }
+                )
+            }
+        </div>
+
+        {/*{pickOnlySomeKeys && buildPickKeysSelect(disabled, property.properties, setValue, value)}*/}
+
+    </>
+        ;
+
+    return (
+        <ErrorBoundary>
+
+            {!minimalistView && <ExpandablePanel initiallyExpanded={expanded}
+                onExpandedChange={(expanded) => {
+                    onPropertyChange?.({
+                        expanded
+                    });
+                }}
+                className={property.widthPercentage !== undefined ? "mt-8" : undefined}
+                innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-white dark:bg-surface-900"}
+                title={<LabelWithIconAndTooltip
+                    propertyKey={propertyKey}
+                    icon={getIconForProperty(property, "small")}
+                    required={property.validation?.required}
+                    title={property.name ?? propertyKey}
+                    className={"text-text-secondary dark:text-text-secondary-dark"}/>}>
+                {mapFormView}
+            </ExpandablePanel>}
+
+            {minimalistView && mapFormView}
+
+            <FieldHelperText includeDescription={includeDescription}
+                showError={showError ?? false}
+                error={error && !partOfArray ? error as any : undefined}
+                disabled={disabled}
+                property={property}/>
+
+        </ErrorBoundary>
+    );
+}
+
+const buildPickKeysSelect = (disabled: boolean, properties: Properties, setValue: (value: any) => void, value: any) => {
+
+    const keys = Object.keys(properties)
+        .filter((key) => !value || !(key in value));
+
+    const handleAddProperty = (updatedValue: string | string[]) => {
+        setValue({
+            ...value,
+            [updatedValue as string]: null
+        });
+    };
+
+    if (!keys.length) return <></>;
+
+    return <div className={"m-4"}>
+        <InputLabel>Add property</InputLabel>
+        <Select
+            value={""}
+            fullWidth={true}
+            disabled={disabled}
+            onValueChange={handleAddProperty}
+            renderValue={(key) => (properties as Properties)[key].name || key}>
+            {keys.map((key) => <SelectItem key={key}
+                value={key}>{(properties as Properties)[key].name || key}</SelectItem>)}
+        </Select>
+    </div>;
+};

package/src/form/field_bindings/MarkdownEditorFieldBinding.tsx

@@ -0,0 +1,232 @@
+import React, { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { useAuthController, useStorageSource } from "@rebasepro/core";
+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, Skeleton } from "@rebasepro/ui";
+import { XIcon } from "lucide-react";
+import type { RebaseEditorProps } 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 RebaseEditor = lazy(() => import("../../editor").then(m => ({ default: m.RebaseEditor })));
+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<RebaseEditorProps>
+}
+
+/**
+ * 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,
+    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 storageSource = useStorageSource();
+    const storage = property.storage;
+
+    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);
+        });
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    // 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"/>}>
+        <RebaseEditor
+        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 (
+        <>
+            <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 className="flex-grow"/>
+                {property.clearable && !disabled && (
+                    <IconButton
+                        size="small"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            setValue(null);
+                        }}
+                    >
+                        <XIcon/>
+                    </IconButton>
+                )}
+            </div>
+            <div
+                className={cls("rounded-md", fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin)}>
+                {editor}
+            </div>
+            <FieldHelperText includeDescription={includeDescription}
+                showError={showError}
+                error={error}
+                property={property}/>
+        </>
+
+    );
+
+}

package/src/form/field_bindings/MultiSelectFieldBinding.tsx

@@ -0,0 +1,123 @@
+import type { FieldProps } from "../../types/fields";
+import type { ArrayProperty, Property } from "@rebasepro/types";
+import React, { useCallback } from "react";
+
+;
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { EnumValuesChip } from "../../preview";
+import { getIconForProperty } from "../../util/property_utils";
+import { enumToObjectEntries, getLabelOrConfigFrom } from "@rebasepro/common";
+import { MultiSelect, MultiSelectItem , iconSize } from "@rebasepro/ui";
+import { XIcon } from "lucide-react";
+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,
+    size = "large",
+    autoFocus
+}: FieldProps<ArrayProperty, any, any>) {
+
+    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: any) => v !== enumKey));
+                }}
+            >
+                <XIcon size={iconSize.smallest}/>
+            </button>}
+        </EnumValuesChip>;
+    }, [enumValues, setValue, value]);
+
+    return (
+        <>
+            <MultiSelect
+                className={"w-full mt-2"}
+                size={size}
+                value={validValue ? value.map((v) => v?.toString()) : []}
+                disabled={disabled}
+                modalPopover={true}
+                label={<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

@@ -0,0 +1,157 @@
+import { useEntitySelectionDialog } from "../../hooks/useEntitySelectionDialog";
+import type { FieldProps } from "../../types/fields";
+import type { RelationProperty } from "@rebasepro/types";
+import React, { useCallback } from "react";
+import { Entity, getDataSourceCapabilities } from "@rebasepro/types";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { ArrayContainer, ArrayEntryParams } from "../../components/ArrayContainer";
+import { getIconForProperty } from "../../util/property_utils";
+import { getRelationFrom, resolveRelationProperty } from "@rebasepro/common";
+
+import { useTranslation, ErrorView } from "@rebasepro/core";
+import { Button, cls, ExpandablePanel, fieldBackgroundMixin, Typography } from "@rebasepro/ui";
+import { PencilIcon } from "lucide-react";
+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.driver) : undefined;
+    if (!parentCollection || !capabilities?.supportsRelations || !("relations" in parentCollection) || !parentCollection.relations) {
+        throw Error("RelationFieldBinding expected a collection with relations support");
+    }
+    const resolvedProperty = resolveRelationProperty(property, parentCollection.relations, propertyKey)
+    const relation = resolvedProperty.relation;
+    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<any>[]) => {
+        setValue(entities.map(e => getRelationFrom(e)));
+    }, [setValue]);
+
+    const referenceDialogController = useEntitySelectionDialog({
+        multiselect: true,
+        path: collection.slug,
+        collection,
+        onMultipleEntitiesSelected,
+        selectedEntityIds,
+        forceFilter: property.forceFilter
+    }
+    );
+
+    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.previewProperties}
+                size={"medium"}
+                onClick={onEntryClick}
+                hover={!disabled}
+                relation={entryValue}
+                includeId={property.includeId}
+                includeEntityLink={property.includeEntityLink}
+            />
+        );
+    }, [relation, property.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}/>
+
+        </>
+    );
+}