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

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

@@ -0,0 +1,338 @@
+import { FloatingMenu } from '@tiptap/extension-floating-menu';
+import Image from '@tiptap/extension-image';
+import { TableKit } from '@tiptap/extension-table';
+import { TextStyle } from '@tiptap/extension-text-style';
+import { EditorContent, useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { useLayoutEffect, useRef } from 'react';
+import { ResponsiveToolbar } from './responsive-toolbar.js';
+import { TableDeleteMenu } from './table-delete-menu.js';
+import { TableEditIcons } from './table-edit-icons.js';
+
+const extensions = [
+    TextStyle.configure(),
+    StarterKit.configure({
+        bulletList: {
+            keepMarks: true,
+            keepAttributes: false,
+        },
+        orderedList: {
+            keepMarks: true,
+            keepAttributes: false,
+        },
+        link: {
+            openOnClick: false,
+            HTMLAttributes: {
+                class: 'text-primary underline underline-offset-2 cursor-pointer hover:text-primary/80',
+            },
+            validate: href => /^https?:\/\//.test(href),
+        },
+    }),
+    Image.configure({
+        inline: true,
+        allowBase64: true,
+        HTMLAttributes: {
+            class: 'rich-text-image',
+        },
+    }),
+    TableKit.configure({
+        tableCell: {
+            HTMLAttributes: {
+                class: 'rich-text-table-cell',
+            },
+        },
+        tableHeader: {
+            HTMLAttributes: {
+                class: 'rich-text-table-header',
+            },
+        },
+    }),
+    FloatingMenu.configure({
+        shouldShow: null, // Let individual floating menus control when they show
+    }),
+];
+
+export interface RichTextEditorProps {
+    value: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+}
+
+export function RichTextEditor({ value, onChange, disabled = false }: Readonly<RichTextEditorProps>) {
+    const isInternalUpdate = useRef(false);
+
+    const editor = useEditor({
+        parseOptions: {
+            preserveWhitespace: 'full',
+        },
+        extensions: extensions,
+        content: value,
+        editable: !disabled,
+        onUpdate: ({ editor }) => {
+            if (!disabled) {
+                isInternalUpdate.current = true;
+                const newValue = editor.getHTML();
+                if (value !== newValue) {
+                    onChange(newValue);
+                }
+            }
+        },
+        editorProps: {
+            attributes: {
+                class: `rich-text-editor 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 bg-transparent px-3 py-2 text-base transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm max-h-[500px] overflow-y-auto ${disabled ? '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, { emitUpdate: false });
+                editor.commands.setTextSelection({ from, to });
+            }
+        }
+        isInternalUpdate.current = false;
+    }, [value, editor]);
+
+    useLayoutEffect(() => {
+        if (editor) {
+            editor.setEditable(!disabled, false);
+        }
+    }, [disabled, editor]);
+
+    if (!editor) {
+        return null;
+    }
+
+    return (
+        <div className="border rounded-md overflow-hidden">
+            <ResponsiveToolbar editor={editor} disabled={disabled} />
+            <EditorContent editor={editor} />
+            <TableEditIcons editor={editor} disabled={disabled} />
+            <TableDeleteMenu editor={editor} disabled={disabled} />
+            <style>{`
+                .rich-text-editor h1 {
+                    font-size: 2em;
+                    font-weight: 700;
+                    margin-top: 0.67em;
+                    margin-bottom: 0.67em;
+                    line-height: 1.2;
+                }
+                .rich-text-editor h2 {
+                    font-size: 1.5em;
+                    font-weight: 600;
+                    margin-top: 0.83em;
+                    margin-bottom: 0.83em;
+                    line-height: 1.3;
+                }
+                .rich-text-editor h3 {
+                    font-size: 1.17em;
+                    font-weight: 600;
+                    margin-top: 1em;
+                    margin-bottom: 1em;
+                    line-height: 1.4;
+                }
+                .rich-text-editor h4 {
+                    font-size: 1em;
+                    font-weight: 600;
+                    margin-top: 1.33em;
+                    margin-bottom: 1.33em;
+                    line-height: 1.4;
+                }
+                .rich-text-editor h5 {
+                    font-size: 0.83em;
+                    font-weight: 600;
+                    margin-top: 1.67em;
+                    margin-bottom: 1.67em;
+                    line-height: 1.5;
+                }
+                .rich-text-editor h6 {
+                    font-size: 0.67em;
+                    font-weight: 600;
+                    margin-top: 2.33em;
+                    margin-bottom: 2.33em;
+                    line-height: 1.6;
+                }
+                .rich-text-editor p {
+                    margin-top: 0;
+                    margin-bottom: 1em;
+                    line-height: 1.6;
+                }
+                .rich-text-editor strong,
+                .rich-text-editor b {
+                    font-weight: 700;
+                }
+                .rich-text-editor em,
+                .rich-text-editor i {
+                    font-style: italic;
+                }
+                .rich-text-editor s,
+                .rich-text-editor del,
+                .rich-text-editor strike {
+                    text-decoration: line-through;
+                }
+                .rich-text-editor ul {
+                    list-style-type: disc;
+                    margin-top: 0;
+                    margin-bottom: 1em;
+                    padding-left: 2em;
+                }
+                .rich-text-editor ul ul {
+                    list-style-type: circle;
+                }
+                .rich-text-editor ul ul ul {
+                    list-style-type: square;
+                }
+                .rich-text-editor ol {
+                    list-style-type: decimal;
+                    margin-top: 0;
+                    margin-bottom: 1em;
+                    padding-left: 2em;
+                }
+                .rich-text-editor li {
+                    margin-bottom: 0.25em;
+                    line-height: 1.6;
+                }
+                .rich-text-editor li > p {
+                    margin-bottom: 0.25em;
+                }
+                .rich-text-editor li:last-child {
+                    margin-bottom: 0;
+                }
+                .rich-text-editor blockquote {
+                    border-left: 4px solid hsl(var(--border));
+                    margin: 1em 0;
+                    padding-left: 1em;
+                    font-style: italic;
+                    color: hsl(var(--muted-foreground));
+                }
+                .rich-text-editor blockquote p {
+                    margin-bottom: 0.5em;
+                }
+                .rich-text-editor blockquote p:last-child {
+                    margin-bottom: 0;
+                }
+                .rich-text-editor a {
+                    color: hsl(var(--primary));
+                    text-decoration: underline;
+                    text-underline-offset: 2px;
+                    cursor: pointer;
+                }
+                .rich-text-editor a:hover {
+                    opacity: 0.8;
+                }
+                .rich-text-editor img,
+                .rich-text-editor .rich-text-image {
+                    max-width: 100%;
+                    height: auto;
+                    display: inline-block;
+                    margin: 0.5em 0;
+                    border-radius: 4px;
+                }
+                .rich-text-editor img.ProseMirror-selectednode,
+                .rich-text-editor .rich-text-image.ProseMirror-selectednode {
+                    outline: 2px solid hsl(var(--primary));
+                    outline-offset: 2px;
+                }
+                .rich-text-editor table {
+                    border-collapse: separate;
+                    border-spacing: 0;
+                    table-layout: auto;
+                    width: 100%;
+                    margin: 1em 0;
+                    overflow: hidden;
+                    border: 2px solid var(--color-muted);
+                    border-radius: 6px;
+                }
+                .rich-text-editor table colgroup,
+                .rich-text-editor table col {
+                    display: none;
+                }
+                .rich-text-editor table td,
+                .rich-text-editor table th,
+                .rich-text-editor .rich-text-table-cell,
+                .rich-text-editor .rich-text-table-header {
+                    min-width: 1em;
+                    border-right: 1px solid var(--color-muted);
+                    border-bottom: 1px solid var(--color-muted);
+                    padding: 8px 12px;
+                    vertical-align: top;
+                    box-sizing: border-box;
+                    position: relative;
+                    background-color: hsl(var(--background));
+                }
+                .rich-text-editor table td:last-child,
+                .rich-text-editor table th:last-child {
+                    border-right: none;
+                }
+                .rich-text-editor table tr:last-child td,
+                .rich-text-editor table tr:last-child th {
+                    border-bottom: none;
+                }
+                .rich-text-editor table th,
+                .rich-text-editor .rich-text-table-header {
+                    font-weight: 600;
+                    text-align: left;
+                    background-color: hsl(var(--muted));
+                }
+                .rich-text-editor table .selectedCell {
+                    background-color: hsl(var(--accent));
+                }
+                .rich-text-editor table .column-resize-handle {
+                    position: absolute;
+                    right: -2px;
+                    top: 0;
+                    bottom: 0;
+                    width: 4px;
+                    background-color: hsl(var(--primary));
+                    pointer-events: none;
+                }
+                .rich-text-editor table p {
+                    margin: 0;
+                }
+                .rich-text-editor .tableWrapper {
+                    overflow-x: auto;
+                }
+                .rich-text-editor .resize-cursor {
+                    cursor: ew-resize;
+                    cursor: col-resize;
+                }
+                .rich-text-editor code {
+                    background-color: hsl(var(--muted));
+                    border-radius: 3px;
+                    font-family: 'Courier New', Courier, monospace;
+                    padding: 0.2em 0.4em;
+                    font-size: 0.9em;
+                }
+                .rich-text-editor pre {
+                    background-color: hsl(var(--muted));
+                    border-radius: 6px;
+                    padding: 1em;
+                    overflow-x: auto;
+                    margin: 1em 0;
+                }
+                .rich-text-editor pre code {
+                    background-color: transparent;
+                    padding: 0;
+                    font-size: 0.9em;
+                }
+                .rich-text-editor hr {
+                    border: none;
+                    border-top: 1px solid hsl(var(--border));
+                    margin: 2em 0;
+                }
+                .rich-text-editor:focus {
+                    outline: none;
+                }
+                .rich-text-editor > *:first-child {
+                    margin-top: 0;
+                }
+                .rich-text-editor > *:last-child {
+                    margin-bottom: 0;
+                }
+            `}</style>
+        </div>
+    );
+}

package/src/lib/components/shared/rich-text-editor/table-delete-menu.tsx

@@ -0,0 +1,104 @@
+import { Editor } from '@tiptap/react';
+import { Trash2Icon } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { Button } from '../../ui/button.js';
+
+export interface TableDeleteMenuProps {
+    editor: Editor | null;
+    disabled?: boolean;
+}
+
+export function TableDeleteMenu({ editor, disabled }: Readonly<TableDeleteMenuProps>) {
+    const [tableRect, setTableRect] = useState<DOMRect | null>(null);
+
+    useEffect(() => {
+        if (!editor) return;
+
+        const updateTablePosition = () => {
+            if (!editor.isActive('table')) {
+                setTableRect(null);
+                return;
+            }
+
+            try {
+                const { selection } = editor.state;
+                const { $from } = selection;
+
+                // Find the table cell node
+                let cellPos = null;
+
+                for (let depth = $from.depth; depth >= 0; depth--) {
+                    const node = $from.node(depth);
+                    if (node.type.name === 'tableCell' || node.type.name === 'tableHeader') {
+                        cellPos = $from.before(depth);
+                        break;
+                    }
+                }
+
+                if (cellPos === null) {
+                    setTableRect(null);
+                    return;
+                }
+
+                // Get DOM elements
+                const cellDOMNode = editor.view.nodeDOM(cellPos) as HTMLElement;
+                const tableDOMNode = cellDOMNode?.closest('table');
+
+                if (!tableDOMNode) {
+                    setTableRect(null);
+                    return;
+                }
+
+                setTableRect(tableDOMNode.getBoundingClientRect());
+            } catch (error) {
+                console.warn('Error calculating table position:', error);
+                setTableRect(null);
+            }
+        };
+
+        // Update on selection change
+        const handleSelectionUpdate = () => {
+            updateTablePosition();
+        };
+
+        editor.on('selectionUpdate', handleSelectionUpdate);
+        editor.on('transaction', handleSelectionUpdate);
+
+        // Initial update
+        updateTablePosition();
+
+        return () => {
+            editor.off('selectionUpdate', handleSelectionUpdate);
+            editor.off('transaction', handleSelectionUpdate);
+        };
+    }, [editor]);
+
+    if (!tableRect || disabled || !editor) return null;
+
+    // Position at bottom right of table
+    const iconTop = tableRect.bottom - 30;
+    const iconLeft = tableRect.right - 30;
+
+    return (
+        <div
+            style={{
+                position: 'fixed',
+                top: iconTop,
+                left: iconLeft,
+                zIndex: 1000,
+            }}
+        >
+            <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={() => editor.chain().focus().deleteTable().run()}
+                disabled={disabled || !editor.can().deleteTable()}
+                className="h-6 w-6 p-0 bg-background shadow-md hover:bg-destructive/10 text-destructive hover:text-destructive"
+                title="Delete Table"
+            >
+                <Trash2Icon className="h-3 w-3" />
+            </Button>
+        </div>
+    );
+}

package/src/lib/components/shared/rich-text-editor/table-edit-icons.tsx

@@ -0,0 +1,225 @@
+import { Trans } from '@/vdb/lib/trans.js';
+import { Editor } from '@tiptap/react';
+import { MoreHorizontalIcon, MoreVerticalIcon } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { Button } from '../../ui/button.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from '../../ui/dropdown-menu.js';
+
+export interface TableEditIconsProps {
+    editor: Editor | null;
+    disabled?: boolean;
+}
+
+interface TableCellPosition {
+    columnIndex: number;
+    rowIndex: number;
+    cellRect: DOMRect | null;
+    tableRect: DOMRect | null;
+}
+
+export function TableEditIcons({ editor, disabled }: Readonly<TableEditIconsProps>) {
+    const [cellPosition, setCellPosition] = useState<TableCellPosition | null>(null);
+
+    useEffect(() => {
+        if (!editor) return;
+
+        const updateCellPosition = () => {
+            if (!editor.isActive('table')) {
+                setCellPosition(null);
+                return;
+            }
+
+            try {
+                const { selection } = editor.state;
+                const { $from } = selection;
+
+                // Find the table cell node
+                let cellNode = null;
+                let cellPos = null;
+
+                for (let depth = $from.depth; depth >= 0; depth--) {
+                    const node = $from.node(depth);
+                    if (node.type.name === 'tableCell' || node.type.name === 'tableHeader') {
+                        cellNode = node;
+                        cellPos = $from.before(depth);
+                        break;
+                    }
+                }
+
+                if (!cellNode || cellPos === null) {
+                    setCellPosition(null);
+                    return;
+                }
+
+                // Get DOM elements
+                const cellDOMNode = editor.view.nodeDOM(cellPos) as HTMLElement;
+                const tableDOMNode = cellDOMNode?.closest('table');
+
+                if (!cellDOMNode || !tableDOMNode) {
+                    setCellPosition(null);
+                    return;
+                }
+
+                // Calculate column and row indices
+                const row = cellDOMNode.closest('tr');
+                const columnIndex = Array.from(row?.children || []).indexOf(cellDOMNode);
+                const rowIndex = Array.from(tableDOMNode.querySelectorAll('tr')).indexOf(row!);
+
+                setCellPosition({
+                    columnIndex,
+                    rowIndex,
+                    cellRect: cellDOMNode.getBoundingClientRect(),
+                    tableRect: tableDOMNode.getBoundingClientRect(),
+                });
+            } catch (error) {
+                console.warn('Error calculating table cell position:', error);
+                setCellPosition(null);
+            }
+        };
+
+        // Update on selection change
+        const handleSelectionUpdate = () => {
+            updateCellPosition();
+        };
+
+        editor.on('selectionUpdate', handleSelectionUpdate);
+        editor.on('transaction', handleSelectionUpdate);
+
+        // Initial update
+        updateCellPosition();
+
+        return () => {
+            editor.off('selectionUpdate', handleSelectionUpdate);
+            editor.off('transaction', handleSelectionUpdate);
+        };
+    }, [editor]);
+
+    if (!cellPosition || disabled) return null;
+
+    if (!editor) return null;
+
+    const { cellRect, tableRect } = cellPosition;
+
+    if (!cellRect || !tableRect) return null;
+
+    // Calculate positions for edit icons
+    const columnIconTop = tableRect.top - 30;
+    const columnIconLeft = cellRect.left + cellRect.width / 2 - 12;
+
+    const rowIconTop = cellRect.top + cellRect.height / 2 - 12;
+    const rowIconLeft = tableRect.left - 30;
+
+    return (
+        <>
+            {/* Column edit icon */}
+            <div
+                style={{
+                    position: 'fixed',
+                    top: columnIconTop,
+                    left: columnIconLeft,
+                    zIndex: 1000,
+                }}
+            >
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="h-6 w-6 p-0 bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground border-0 shadow-sm"
+                        >
+                            <MoreHorizontalIcon className="h-3 w-3" />
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="center">
+                        <DropdownMenuItem
+                            onClick={() => editor.chain().focus().addColumnBefore().run()}
+                            disabled={!editor.can().addColumnBefore()}
+                        >
+                            <Trans>Add column before</Trans>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                            onClick={() => editor.chain().focus().addColumnAfter().run()}
+                            disabled={!editor.can().addColumnAfter()}
+                        >
+                            <Trans>Add column after</Trans>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem
+                            onClick={() => editor.chain().focus().toggleHeaderColumn().run()}
+                            disabled={!editor.can().toggleHeaderColumn()}
+                        >
+                            <Trans>Toggle header column</Trans>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem
+                            onClick={() => editor.chain().focus().deleteColumn().run()}
+                            disabled={!editor.can().deleteColumn()}
+                            className="text-destructive focus:text-destructive"
+                        >
+                            <Trans>Delete column</Trans>
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </div>
+
+            {/* Row edit icon */}
+            <div
+                style={{
+                    position: 'fixed',
+                    top: rowIconTop,
+                    left: rowIconLeft,
+                    zIndex: 1000,
+                }}
+            >
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="h-6 w-6 p-0 bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground border-0 shadow-sm"
+                        >
+                            <MoreVerticalIcon className="h-3 w-3" />
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="center">
+                        <DropdownMenuItem
+                            onClick={() => editor.chain().focus().addRowBefore().run()}
+                            disabled={!editor.can().addRowBefore()}
+                        >
+                            <Trans>Add row before</Trans>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                            onClick={() => editor.chain().focus().addRowAfter().run()}
+                            disabled={!editor.can().addRowAfter()}
+                        >
+                            <Trans>Add row after</Trans>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem
+                            onClick={() => editor.chain().focus().toggleHeaderRow().run()}
+                            disabled={!editor.can().toggleHeaderRow()}
+                        >
+                            <Trans>Toggle header row</Trans>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem
+                            onClick={() => editor.chain().focus().deleteRow().run()}
+                            disabled={!editor.can().deleteRow()}
+                            className="text-destructive focus:text-destructive"
+                        >
+                            <Trans>Delete row</Trans>
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </div>
+        </>
+    );
+}

package/src/lib/components/shared/vendure-image.tsx

@@ -25,7 +25,7 @@ export interface AssetLike {
  * @docsPage VendureImage
  * @since 3.4.0
  */
-export type ImagePreset = 'tiny' | 'thumb' | 'small' | 'medium' | 'large' | null;
+export type ImagePreset = 'tiny' | 'thumb' | 'small' | 'medium' | 'large' | 'full' | null;
 
 /**
  * @description
@@ -219,6 +219,10 @@ function getMinDimensions(preset?: ImagePreset, width?: number, height?: number)
                 return { width: 300, height: 300 };
             case 'medium':
                 return { width: 500, height: 500 };
+            case 'large':
+                return { width: 800, height: 800 };
+            case 'full':
+                return { width: undefined, height: undefined };
         }
     }
 
@@ -258,6 +262,10 @@ export function PlaceholderImage({
                 width = 800;
                 height = 800;
                 break;
+            case 'full':
+                width = 1200;
+                height = 1200;
+                break;
             default:
                 break;
         }