@vendure/dashboard 3.4.3-master-202509180227 → 3.4.3-master-202509190229

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vendure/dashboard",
     "private": false,
-    "version": "3.4.3-master-202509180227",
+    "version": "3.4.3-master-202509190229",
     "type": "module",
     "repository": {
         "type": "git",
@@ -94,14 +94,18 @@
         "@tanstack/react-table": "^8.21.2",
         "@tanstack/router-devtools": "^1.105.0",
         "@tanstack/router-plugin": "^1.105.0",
-        "@tiptap/pm": "^2.11.5",
-        "@tiptap/react": "^2.11.5",
-        "@tiptap/starter-kit": "^2.11.5",
+        "@tiptap/extension-floating-menu": "^3.4.4",
+        "@tiptap/extension-image": "^3.4.4",
+        "@tiptap/extension-table": "^3.4.4",
+        "@tiptap/extension-text-style": "^3.4.4",
+        "@tiptap/pm": "^3.4.4",
+        "@tiptap/react": "^3.4.4",
+        "@tiptap/starter-kit": "^3.4.4",
         "@types/react": "^19.0.10",
         "@types/react-dom": "^19.0.4",
         "@uidotdev/usehooks": "^2.4.1",
-        "@vendure/common": "^3.4.3-master-202509180227",
-        "@vendure/core": "^3.4.3-master-202509180227",
+        "@vendure/common": "^3.4.3-master-202509190229",
+        "@vendure/core": "^3.4.3-master-202509190229",
         "@vitejs/plugin-react": "^4.3.4",
         "acorn": "^8.11.3",
         "acorn-walk": "^8.3.2",
@@ -152,5 +156,5 @@
         "lightningcss-linux-arm64-musl": "^1.29.3",
         "lightningcss-linux-x64-musl": "^1.29.1"
     },
-    "gitHead": "abb4130cebdea8f79dcfb0823d806293bb0d2a1b"
+    "gitHead": "1a94626a2e07d33d881a751ff394f8351c3521b4"
 }

package/src/app/common/duplicate-bulk-action.tsx

@@ -1,4 +1,5 @@
 import { useMutation } from '@tanstack/react-query';
+import { ConfigurableOperationInput } from '@vendure/common/lib/generated-types';
 import { CopyIcon } from 'lucide-react';
 import { useState } from 'react';
 import { toast } from 'sonner';
@@ -8,13 +9,13 @@ import { usePaginatedList } from '@/vdb/components/shared/paginated-list-data-ta
 import { api } from '@/vdb/graphql/api.js';
 import { duplicateEntityDocument } from '@/vdb/graphql/common-operations.js';
 import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { DuplicateEntityDialog } from './duplicate-entity-dialog.js';
 
 interface DuplicateBulkActionProps {
     entityType: 'Product' | 'Collection' | 'Facet' | 'Promotion';
     duplicatorCode: string;
-    duplicatorArguments?: Array<{ name: string; value: string }>;
     requiredPermissions: string[];
-    entityName: string; // For display purposes in error messages
+    entityName: string;
     onSuccess?: () => void;
     selection: any[];
     table: any;
@@ -23,23 +24,28 @@ interface DuplicateBulkActionProps {
 export function DuplicateBulkAction({
     entityType,
     duplicatorCode,
-    duplicatorArguments = [],
     requiredPermissions,
     entityName,
     onSuccess,
     selection,
     table,
-}: DuplicateBulkActionProps) {
+}: Readonly<DuplicateBulkActionProps>) {
     const { refetchPaginatedList } = usePaginatedList();
     const { i18n } = useLingui();
     const [isDuplicating, setIsDuplicating] = useState(false);
     const [progress, setProgress] = useState({ completed: 0, total: 0 });
+    const [dialogOpen, setDialogOpen] = useState(false);
 
     const { mutateAsync } = useMutation({
         mutationFn: api.mutate(duplicateEntityDocument),
     });
 
-    const handleDuplicate = async () => {
+    const handleStartDuplication = () => {
+        if (isDuplicating) return;
+        setDialogOpen(true);
+    };
+
+    const handleConfirmDuplication = async (duplicatorInput: ConfigurableOperationInput) => {
         if (isDuplicating) return;
 
         setIsDuplicating(true);
@@ -61,10 +67,7 @@ export function DuplicateBulkAction({
                         input: {
                             entityName: entityType,
                             entityId: entity.id,
-                            duplicatorInput: {
-                                code: duplicatorCode,
-                                arguments: duplicatorArguments,
-                            },
+                            duplicatorInput,
                         },
                     });
 
@@ -116,19 +119,30 @@ export function DuplicateBulkAction({
     };
 
     return (
-        <DataTableBulkActionItem
-            requiresPermission={requiredPermissions}
-            onClick={handleDuplicate}
-            label={
-                isDuplicating ? (
-                    <Trans>
-                        Duplicating... ({progress.completed}/{progress.total})
-                    </Trans>
-                ) : (
-                    <Trans>Duplicate</Trans>
-                )
-            }
-            icon={CopyIcon}
-        />
+        <>
+            <DataTableBulkActionItem
+                requiresPermission={requiredPermissions}
+                onClick={handleStartDuplication}
+                label={
+                    isDuplicating ? (
+                        <Trans>
+                            Duplicating... ({progress.completed}/{progress.total})
+                        </Trans>
+                    ) : (
+                        <Trans>Duplicate</Trans>
+                    )
+                }
+                icon={CopyIcon}
+            />
+            <DuplicateEntityDialog
+                open={dialogOpen}
+                onOpenChange={setDialogOpen}
+                entityType={entityType}
+                entityName={entityName}
+                entities={selection}
+                duplicatorCode={duplicatorCode}
+                onConfirm={handleConfirmDuplication}
+            />
+        </>
     );
 }

package/src/app/common/duplicate-entity-dialog.tsx

@@ -0,0 +1,117 @@
+import { ConfigurableOperationInput as ConfigurableOperationInputComponent } from '@/vdb/components/shared/configurable-operation-input.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/vdb/components/ui/dialog.js';
+import { api } from '@/vdb/graphql/api.js';
+import { getEntityDuplicatorsDocument } from '@/vdb/graphql/common-operations.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { useQuery } from '@tanstack/react-query';
+import { ConfigurableOperationInput } from '@vendure/common/lib/generated-types';
+import React, { useState } from 'react';
+
+interface DuplicateEntityDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    entityType: 'Product' | 'Collection' | 'Facet' | 'Promotion';
+    entityName: string;
+    entities: Array<{ id: string; name?: string }>;
+    duplicatorCode: string;
+    onConfirm: (duplicatorInput: ConfigurableOperationInput) => void;
+}
+
+export function DuplicateEntityDialog({
+    open,
+    onOpenChange,
+    entityType,
+    entityName,
+    duplicatorCode,
+    onConfirm,
+}: Readonly<DuplicateEntityDialogProps>) {
+    const [selectedDuplicator, setSelectedDuplicator] = useState<ConfigurableOperationInput | undefined>();
+
+    const { data } = useQuery({
+        queryKey: ['entityDuplicators'],
+        queryFn: () => api.query(getEntityDuplicatorsDocument),
+        staleTime: 1000 * 60 * 60 * 5,
+    });
+
+    // Find the duplicator that matches the provided code and supports this entity type
+    const matchingDuplicator = data?.entityDuplicators?.find(
+        duplicator => duplicator.code === duplicatorCode && duplicator.forEntities.includes(entityType),
+    );
+
+    // Auto-initialize the duplicator when found
+    React.useEffect(() => {
+        if (matchingDuplicator && !selectedDuplicator) {
+            setSelectedDuplicator({
+                code: matchingDuplicator.code,
+                arguments:
+                    matchingDuplicator.args?.map(arg => ({
+                        name: arg.name,
+                        value: arg.defaultValue != null ? arg.defaultValue.toString() : '',
+                    })) || [],
+            });
+        }
+    }, [matchingDuplicator, selectedDuplicator]);
+
+    const onDuplicatorValueChange = (newVal: ConfigurableOperationInput) => {
+        setSelectedDuplicator(newVal);
+    };
+
+    const handleConfirm = () => {
+        if (!selectedDuplicator) return;
+        onConfirm(selectedDuplicator);
+        onOpenChange(false);
+        setSelectedDuplicator(undefined);
+    };
+
+    const handleCancel = () => {
+        onOpenChange(false);
+        setSelectedDuplicator(undefined);
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-lg">
+                <DialogHeader>
+                    <DialogTitle>
+                        <Trans>Duplicate {entityName.toLowerCase()}s</Trans>
+                    </DialogTitle>
+                </DialogHeader>
+
+                <div className="space-y-4">
+                    {selectedDuplicator && matchingDuplicator && (
+                        <ConfigurableOperationInputComponent
+                            operationDefinition={matchingDuplicator}
+                            value={selectedDuplicator}
+                            onChange={onDuplicatorValueChange}
+                            removable={false}
+                        />
+                    )}
+
+                    {!matchingDuplicator && (
+                        <div className="text-sm text-muted-foreground">
+                            <Trans>
+                                No duplicator found with code "{duplicatorCode}" for {entityName}s
+                            </Trans>
+                        </div>
+                    )}
+                </div>
+
+                <DialogFooter>
+                    <Button variant="outline" onClick={handleCancel}>
+                        <Trans>Cancel</Trans>
+                    </Button>
+                    <Button onClick={handleConfirm} disabled={!selectedDuplicator}>
+                        <Trans>Duplicate</Trans>
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}

package/src/lib/components/data-input/rich-text-input.tsx

@@ -1,26 +1,6 @@
 import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
 import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
-import TextStyle from '@tiptap/extension-text-style';
-import { BubbleMenu, Editor, EditorContent, useEditor } from '@tiptap/react';
-import StarterKit from '@tiptap/starter-kit';
-import { BoldIcon, ItalicIcon, StrikethroughIcon } from 'lucide-react';
-import { useLayoutEffect, useRef } from 'react';
-import { Button } from '../ui/button.js';
-
-// define your extension array
-const extensions = [
-    TextStyle.configure(),
-    StarterKit.configure({
-        bulletList: {
-            keepMarks: true,
-            keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help
-        },
-        orderedList: {
-            keepMarks: true,
-            keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help
-        },
-    }),
-];
+import { RichTextEditor } from '../shared/rich-text-editor/rich-text-editor.js';
 
 /**
  * @description
@@ -31,99 +11,6 @@ const extensions = [
  */
 export function RichTextInput({ value, onChange, fieldDef }: Readonly<DashboardFormComponentProps>) {
     const readOnly = isReadonlyField(fieldDef);
-    const isInternalUpdate = useRef(false);
-
-    const editor = useEditor({
-        parseOptions: {
-            preserveWhitespace: 'full',
-        },
-        extensions: extensions,
-        content: value,
-        editable: !readOnly,
-        onUpdate: ({ editor }) => {
-            if (!readOnly) {
-                isInternalUpdate.current = true;
-                console.log('onUpdate');
-                const newValue = editor.getHTML();
-                if (value !== newValue) {
-                    onChange(newValue);
-                }
-            }
-        },
-        editorProps: {
-            attributes: {
-                class: `border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/10 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm max-h-[500px] overflow-y-auto ${readOnly ? 'cursor-not-allowed opacity-50' : ''}`,
-            },
-        },
-    });
-
-    useLayoutEffect(() => {
-        if (editor && !isInternalUpdate.current) {
-            const currentContent = editor.getHTML();
-            if (currentContent !== value) {
-                const { from, to } = editor.state.selection;
-                editor.commands.setContent(value, false);
-                editor.commands.setTextSelection({ from, to });
-            }
-        }
-        isInternalUpdate.current = false;
-    }, [value, editor]);
-
-    // Update editor's editable state when disabled prop changes
-    useLayoutEffect(() => {
-        if (editor) {
-            editor.setEditable(!readOnly, false);
-        }
-    }, [readOnly, editor]);
-
-    if (!editor) {
-        return null;
-    }
-
-    return (
-        <>
-            <EditorContent editor={editor} />
-            <CustomBubbleMenu editor={editor} disabled={readOnly} />
-        </>
-    );
-}
 
-function CustomBubbleMenu({ editor, disabled }: { editor: Editor | null; disabled?: boolean }) {
-    if (!editor || disabled) return null;
-    return (
-        <BubbleMenu editor={editor}>
-            <div className="flex items-center gap-2 bg-background p-2 rounded-md border">
-                <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon"
-                    onClick={() => editor.chain().focus().toggleBold().run()}
-                    className={editor.isActive('bold') ? 'bg-accent' : ''}
-                    disabled={disabled}
-                >
-                    <BoldIcon className="w-4 h-4" />
-                </Button>
-                <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon"
-                    onClick={() => editor.chain().focus().toggleItalic().run()}
-                    className={editor.isActive('italic') ? 'bg-accent' : ''}
-                    disabled={disabled}
-                >
-                    <ItalicIcon className="w-4 h-4" />
-                </Button>
-                <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon"
-                    onClick={() => editor.chain().focus().toggleStrike().run()}
-                    className={editor.isActive('strike') ? 'bg-accent' : ''}
-                    disabled={disabled}
-                >
-                    <StrikethroughIcon className="w-4 h-4" />
-                </Button>
-            </div>
-        </BubbleMenu>
-    );
+    return <RichTextEditor value={value} onChange={onChange} disabled={readOnly} />;
 }

package/src/lib/components/shared/rich-text-editor/image-dialog.tsx

@@ -0,0 +1,223 @@
+import { Trans } from '@/vdb/lib/trans.js';
+import { SetImageOptions } from '@tiptap/extension-image';
+import { Editor } from '@tiptap/react';
+import { ImageIcon, PaperclipIcon } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { Button } from '../../ui/button.js';
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '../../ui/dialog.js';
+import { Input } from '../../ui/input.js';
+import { Label } from '../../ui/label.js';
+import { Asset } from '../asset/asset-gallery.js';
+import { AssetPickerDialog } from '../asset/asset-picker-dialog.js';
+
+export interface ImageDialogProps {
+    editor: Editor;
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+export function ImageDialog({ editor, isOpen, onClose }: Readonly<ImageDialogProps>) {
+    const [src, setSrc] = useState('');
+    const [alt, setAlt] = useState('');
+    const [title, setTitle] = useState('');
+    const [width, setWidth] = useState('');
+    const [height, setHeight] = useState('');
+    const [assetPickerOpen, setAssetPickerOpen] = useState(false);
+    const [previewUrl, setPreviewUrl] = useState('');
+
+    useEffect(() => {
+        if (isOpen) {
+            // Get current image attributes if editing existing image
+            const {
+                src: currentSrc,
+                alt: currentAlt,
+                title: currentTitle,
+                width: currentWidth,
+                height: currentHeight,
+            } = editor.getAttributes('image');
+
+            setSrc(currentSrc || '');
+            setAlt(currentAlt || '');
+            setTitle(currentTitle || '');
+            setWidth(currentWidth || '');
+            setHeight(currentHeight || '');
+            setPreviewUrl(currentSrc || '');
+        }
+    }, [isOpen, editor]);
+
+    const handleInsertImage = () => {
+        if (!src) {
+            return;
+        }
+
+        const attrs: SetImageOptions = {
+            src,
+            alt: alt || undefined,
+            title: title || undefined,
+        };
+
+        // Only add width/height if they are valid numbers
+        if (width && !isNaN(Number(width))) {
+            attrs.width = Number(width);
+        }
+        if (height && !isNaN(Number(height))) {
+            attrs.height = Number(height);
+        }
+
+        editor.chain().focus().setImage(attrs).run();
+
+        handleClose();
+    };
+
+    const handleClose = () => {
+        setSrc('');
+        setAlt('');
+        setTitle('');
+        setWidth('');
+        setHeight('');
+        setPreviewUrl('');
+        onClose();
+    };
+
+    const handleAssetSelect = (assets: Asset[]) => {
+        if (assets.length > 0) {
+            const asset = assets[0];
+            setSrc(asset.source);
+            setPreviewUrl(asset.preview);
+            // Set width and height from asset if available
+            if (asset.width) {
+                setWidth(asset.width.toString());
+            }
+            if (asset.height) {
+                setHeight(asset.height.toString());
+            }
+        }
+        setAssetPickerOpen(false);
+    };
+
+    const isEditing = editor.isActive('image');
+
+    return (
+        <>
+            <Dialog open={isOpen} onOpenChange={open => !open && handleClose()}>
+                <DialogContent className="sm:max-w-[525px]">
+                    <DialogHeader>
+                        <DialogTitle>
+                            {isEditing ? <Trans>Edit image</Trans> : <Trans>Insert image</Trans>}
+                        </DialogTitle>
+                    </DialogHeader>
+                    <div className="grid gap-4 py-4">
+                        <div className="flex items-center justify-center">
+                            {previewUrl ? (
+                                <img
+                                    src={previewUrl}
+                                    alt={alt || 'Preview'}
+                                    className="max-w-[200px] max-h-[200px] object-contain border rounded"
+                                />
+                            ) : (
+                                <div className="w-[200px] h-[200px] border rounded flex items-center justify-center bg-muted">
+                                    <ImageIcon className="w-16 h-16 text-muted-foreground" />
+                                </div>
+                            )}
+                        </div>
+
+                        <div className="flex items-center justify-center">
+                            <Button
+                                type="button"
+                                variant="outline"
+                                size="sm"
+                                onClick={() => setAssetPickerOpen(true)}
+                            >
+                                <PaperclipIcon className="w-4 h-4 mr-2" />
+                                <Trans>Add asset</Trans>
+                            </Button>
+                        </div>
+
+                        <div className="grid gap-2">
+                            <Label htmlFor="image-source">
+                                <Trans>Source</Trans>
+                            </Label>
+                            <Input
+                                id="image-source"
+                                value={src}
+                                onChange={e => {
+                                    setSrc(e.target.value);
+                                    setPreviewUrl(e.target.value);
+                                }}
+                                placeholder="https://example.com/image.jpg"
+                                autoFocus
+                            />
+                        </div>
+
+                        <div className="grid gap-2">
+                            <Label htmlFor="image-title">
+                                <Trans>Title</Trans>
+                            </Label>
+                            <Input
+                                id="image-title"
+                                value={title}
+                                onChange={e => setTitle(e.target.value)}
+                                placeholder=""
+                            />
+                        </div>
+
+                        <div className="grid gap-2">
+                            <Label htmlFor="image-alt">
+                                <Trans>Description (alt)</Trans>
+                            </Label>
+                            <Input
+                                id="image-alt"
+                                value={alt}
+                                onChange={e => setAlt(e.target.value)}
+                                placeholder=""
+                            />
+                        </div>
+
+                        <div className="grid grid-cols-2 gap-4">
+                            <div className="grid gap-2">
+                                <Label htmlFor="image-width">
+                                    <Trans>Width</Trans>
+                                </Label>
+                                <Input
+                                    id="image-width"
+                                    type="number"
+                                    value={width}
+                                    onChange={e => setWidth(e.target.value)}
+                                    placeholder="auto"
+                                />
+                            </div>
+                            <div className="grid gap-2">
+                                <Label htmlFor="image-height">
+                                    <Trans>Height</Trans>
+                                </Label>
+                                <Input
+                                    id="image-height"
+                                    type="number"
+                                    value={height}
+                                    onChange={e => setHeight(e.target.value)}
+                                    placeholder="auto"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                    <DialogFooter>
+                        <Button type="button" variant="outline" onClick={handleClose}>
+                            <Trans>Cancel</Trans>
+                        </Button>
+                        <Button type="button" onClick={handleInsertImage} disabled={!src}>
+                            <Trans>Insert image</Trans>
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+
+            <AssetPickerDialog
+                open={assetPickerOpen}
+                onClose={() => setAssetPickerOpen(false)}
+                onSelect={handleAssetSelect}
+                multiSelect={false}
+                title="Select asset"
+            />
+        </>
+    );
+}