@servicetitan/dte-pdf-editor 1.17.0 → 1.18.0

package/src/components/field-sidebar/field-sidebar.tsx

@@ -1,14 +1,14 @@
-import { Button, Flex, Icon, SearchField, Text } from '@servicetitan/anvil2';
-import IconBorderColor from '@servicetitan/anvil2/assets/icons/material/round/border_color.svg';
+import { Button, Flex, Icon, Text } from '@servicetitan/anvil2';
 import IconMenuOpen from '@servicetitan/anvil2/assets/icons/material/round/menu_open.svg';
-import IconPhotoSizeSelectSmall from '@servicetitan/anvil2/assets/icons/material/round/photo_size_select_small.svg';
-import IconEstimate from '@servicetitan/anvil2/assets/icons/st/estimate.svg';
 
 import { FC, useState } from 'react';
+import { menuGroups } from '../../constants/menu-group';
 import { useToggle } from '../../hooks';
 import { DataModelFieldGroup, FieldTypeEnum, FieldTypeOption } from '../../interface/types';
+import { CalculatedFieldTypeList } from './calculated-field-type-list';
 import { DataModelFieldTypeList } from './data-model-field-type-list';
 import { ESignFieldTypeList } from './e-sign-field-type-list';
+import { FieldMenuGroup } from './field-menu-group';
 import { FillableFieldTypeList } from './fillable-field-type-list';
 
 interface FieldSidebarProps {
@@ -17,23 +17,12 @@ interface FieldSidebarProps {
     onDragStart(fieldOption: FieldTypeOption): void;
 }
 
-const menuGroups: { svgIcon: any; label: string; key: FieldTypeEnum }[] = [
-    { svgIcon: IconEstimate, label: 'Merge Tags', key: FieldTypeEnum.dataModel },
-    { svgIcon: IconBorderColor, label: 'E-Sign', key: FieldTypeEnum.eSign },
-    {
-        svgIcon: IconPhotoSizeSelectSmall,
-        label: 'Fillable Fields',
-        key: FieldTypeEnum.fillable,
-    },
-];
-
 export const FieldSidebar: FC<FieldSidebarProps> = ({
     dataModelGroups = [],
     onDragEnd,
     onDragStart,
 }) => {
     const [activeFieldType, setActiveFieldType] = useState<FieldTypeEnum>(FieldTypeEnum.dataModel);
-    const [searchText, setSearchText] = useState('');
     const { isOpen, open, toggle } = useToggle(true);
 
     const handleActiveFieldTypeChange = (activeFieldType: FieldTypeEnum) => {
@@ -43,31 +32,11 @@ export const FieldSidebar: FC<FieldSidebarProps> = ({
 
     return (
         <Flex className="dte-field-sidebar-container skeleton-item">
-            <Flex className="dte-field-sidebar-menu" shrink={0} direction="column" gap="3">
-                {menuGroups.map(({ key, label, svgIcon }) => (
-                    <Flex
-                        key={key}
-                        alignItems="center"
-                        justifyContent="center"
-                        direction="column"
-                        className={`dte-field-sidebar-menu-item cursor-pointer ${key === activeFieldType ? '--active' : ''}`}
-                        onClick={() => handleActiveFieldTypeChange(key)}
-                    >
-                        <Icon
-                            svg={svgIcon}
-                            size="large"
-                            className="dte-field-sidebar-menu-item-icon"
-                        />
-                        <Text
-                            variant="body"
-                            size="small"
-                            className="dte-field-sidebar-menu-item-text"
-                        >
-                            {label}
-                        </Text>
-                    </Flex>
-                ))}
-            </Flex>
+            <FieldMenuGroup
+                menuGroups={menuGroups}
+                onClickMenu={handleActiveFieldTypeChange}
+                activeFieldKey={activeFieldType}
+            />
 
             <Flex
                 className={`dte-field-sidebar-content skeleton-item ${isOpen ? '--open' : ''}`}
@@ -75,35 +44,25 @@ export const FieldSidebar: FC<FieldSidebarProps> = ({
             >
                 <Flex className="dte-field-sidebar-content-inner">
                     <Text variant="headline" el="h1" size="medium">
-                        {menuGroups.find(group => group.key === activeFieldType)!.label}
+                        {menuGroups.find(group => group.key === activeFieldType)?.label}
                     </Text>
 
-                    {activeFieldType !== FieldTypeEnum.eSign && (
-                        <SearchField
-                            placeholder="Search"
-                            size="small"
-                            className="dte-field-sidebar-search"
-                            onChange={e => setSearchText(e.target.value ?? '')}
-                        />
-                    )}
                     {activeFieldType === FieldTypeEnum.fillable && (
-                        <FillableFieldTypeList
-                            searchText={searchText}
-                            onDragStart={onDragStart}
-                            onDragEnd={onDragEnd}
-                        />
+                        <FillableFieldTypeList onDragStart={onDragStart} onDragEnd={onDragEnd} />
                     )}
                     {activeFieldType === FieldTypeEnum.eSign && (
                         <ESignFieldTypeList onDragEnd={onDragEnd} onDragStart={onDragStart} />
                     )}
                     {activeFieldType === FieldTypeEnum.dataModel && (
                         <DataModelFieldTypeList
-                            searchText={searchText}
                             dataModelGroups={dataModelGroups}
                             onDragStart={onDragStart}
                             onDragEnd={onDragEnd}
                         />
                     )}
+                    {activeFieldType === FieldTypeEnum.calculated && (
+                        <CalculatedFieldTypeList onDragStart={onDragStart} onDragEnd={onDragEnd} />
+                    )}
                 </Flex>
             </Flex>
             <Button

package/src/components/field-sidebar/fillable-field-type-list.tsx

@@ -1,10 +1,10 @@
-import { FC, Fragment, useMemo } from 'react';
+import { SearchField } from '@servicetitan/anvil2';
+import { FC, Fragment, useMemo, useState } from 'react';
 import { FILLABLE_FIELD_TYPES } from '../../constants';
 import { FieldTypeOption } from '../../interface/types';
 import { FieldType } from './field-type';
 
 interface FillableFieldTypeListProps {
-    searchText?: string;
     onDragStart(fieldOption: FieldTypeOption): void;
     onDragEnd(): void;
 }
@@ -12,8 +12,9 @@ interface FillableFieldTypeListProps {
 export const FillableFieldTypeList: FC<FillableFieldTypeListProps> = ({
     onDragEnd,
     onDragStart,
-    searchText,
 }) => {
+    const [searchText, setSearchText] = useState('');
+
     const searchedFieldTypes = useMemo(() => {
         if (!searchText) {
             return FILLABLE_FIELD_TYPES;
@@ -27,18 +28,19 @@ export const FillableFieldTypeList: FC<FillableFieldTypeListProps> = ({
 
     return (
         <Fragment>
+            <SearchField
+                placeholder="Search"
+                size="small"
+                className="dte-field-sidebar-search"
+                onChange={e => setSearchText(e.target.value ?? '')}
+            />
             {searchedFieldTypes.map(fieldOption => {
                 return (
                     <FieldType
                         key={fieldOption.subType}
                         label={fieldOption.label}
                         onDragEnd={onDragEnd}
-                        onDragStart={() =>
-                            onDragStart({
-                                ...fieldOption,
-                                label: '',
-                            })
-                        }
+                        onDragStart={() => onDragStart(fieldOption)}
                     />
                 );
             })}

package/src/components/pdf-editor/pdf-editor.tsx

@@ -69,6 +69,8 @@ export const PdfEditor: FC<PdfEditorProps> = ({
         <Flex flex={1} className={`dte-pdf-editor ${loading ? 'skeleton' : ''}`}>
             {selectedField && (
                 <FieldConfigPanelOverlay
+                    dataModel={dataModel}
+                    documentFields={fields}
                     selectedField={selectedField}
                     onFieldConfigChange={updateField}
                     onDeleteField={deleteSelectedField}

package/src/components/pdf-fields-overlay/pdf-overlay-field-calculated.tsx

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { PdfField } from '../../interface/types';
+
+interface PdfOverlayFieldCalculatedProps {
+    field: PdfField;
+}
+
+export const PdfOverlayFieldCalculated: FC<PdfOverlayFieldCalculatedProps> = ({ field }) => {
+    return (
+        <span>
+            {field.label ? field.label : field.path}
+            {field.required ? '*' : ''}
+        </span>
+    );
+};

package/src/components/pdf-fields-overlay/pdf-overlay-field.tsx

@@ -2,6 +2,7 @@ import { FC, MouseEvent, RefObject } from 'react';
 import { useFieldDrag, useFieldResize } from '../../hooks';
 import { FieldTypeEnum, PdfField } from '../../interface/types';
 import { getFieldBackgroundColor, getPagePosition } from '../../utils';
+import { PdfOverlayFieldCalculated } from './pdf-overlay-field-calculated';
 import { PdfOverlayFieldDataModel } from './pdf-overlay-field-data-model';
 import { PdfOverlayFieldESign } from './pdf-overlay-field-e-sign';
 import { PdfOverlayFieldFillable } from './pdf-overlay-field-fillable';
@@ -65,6 +66,7 @@ export const PdfOverlayField: FC<PdfOverlayFieldProps> = ({
             className={`dte-pdf-field ${isSelected ? '--selected' : '--unselected'} ${isDragging ? '--dragging' : ''} ${isSameGroup ? '--colored' : ''}`}
             style={style}
         >
+            {field.type === FieldTypeEnum.calculated && <PdfOverlayFieldCalculated field={field} />}
             {field.type === FieldTypeEnum.eSign && <PdfOverlayFieldESign field={field} />}
             {field.type === FieldTypeEnum.dataModel && <PdfOverlayFieldDataModel field={field} />}
             {field.type === FieldTypeEnum.fillable && (

package/src/components/pdf-view/pdf-view-calculated.tsx

@@ -0,0 +1,23 @@
+import { FC, useMemo } from 'react';
+import { DataModelValues, PdfField } from '../../interface/types';
+import { evaluateFormula, formatCalculatedResult, resolvePdfDataValues } from '../../utils';
+
+interface PdfViewCalculatedProps {
+    field: PdfField;
+    data?: DataModelValues;
+}
+
+export const PdfViewCalculated: FC<PdfViewCalculatedProps> = ({ data, field }) => {
+    const displayValue = useMemo(() => {
+        if (field.formula?.tokens?.length) {
+            const value = evaluateFormula(field.formula, data);
+            return formatCalculatedResult(value, field.formulaFormat);
+        }
+        if (field.path) {
+            return resolvePdfDataValues(data, field.path) ?? '';
+        }
+        return field.label ?? '';
+    }, [data, field.formula, field.formulaFormat, field.label, field.path]);
+
+    return <div className="dte-pdf-field-value">{displayValue}</div>;
+};

package/src/components/pdf-view/pdf-view.tsx

@@ -11,6 +11,7 @@ import {
 } from '../../interface/types';
 import { mapColorsToRecipients } from '../../utils';
 import { PdfDocumentRenderer } from '../pdf-canvas/pdf-document-renderer';
+import { PdfViewCalculated } from './pdf-view-calculated';
 import { PdfViewDataModel } from './pdf-view-data-model';
 import { PdfViewESign } from './pdf-view-e-sign';
 import { PdfViewFieldContainer } from './pdf-view-field-container';
@@ -94,6 +95,9 @@ export const PdfView: FC<PdfViewProps> = ({
                                 {field.type === FieldTypeEnum.dataModel && (
                                     <PdfViewDataModel field={field} data={data} />
                                 )}
+                                {field.type === FieldTypeEnum.calculated && (
+                                    <PdfViewCalculated field={field} data={data} />
+                                )}
                                 {field.type === FieldTypeEnum.eSign && (
                                     <PdfViewESign field={field} />
                                 )}

package/src/constants/field.constants.ts

@@ -2,7 +2,7 @@ import {
     ESignFieldType,
     FieldTypeEnum,
     FieldTypeOption,
-    FillableFieldType,
+    PdfFieldSubType,
 } from '../interface/types';
 
 export const FIELD_CONSTANTS = {
@@ -19,7 +19,7 @@ export const FILLABLE_FIELD_DEFAULT_SIZES = {
     date: { width: 200, height: 25 },
     radio: { width: 20, height: 20 },
     checkbox: { width: 20, height: 20 },
-} as Record<FillableFieldType | ESignFieldType, { width: number; height: number }>;
+} as Record<PdfFieldSubType, { width: number; height: number }>;
 
 export const E_SIGN_FIELD_TYPE_OPTIONS: { name: string; id: ESignFieldType }[] = [
     { name: 'Signature', id: ESignFieldType.signature },
@@ -43,3 +43,10 @@ export const E_SIGN_FIELD_TYPES: FieldTypeOption[] = [
         subType: ESignFieldType.signature,
     },
 ];
+
+export const CALCULATED_FIELD_TYPES: FieldTypeOption[] = [
+    {
+        label: 'Calculated Field',
+        type: FieldTypeEnum.calculated,
+    },
+];

package/src/constants/menu-group.ts

@@ -0,0 +1,26 @@
+import IconBorderColor from '@servicetitan/anvil2/assets/icons/material/round/border_color.svg';
+import IconCalculate from '@servicetitan/anvil2/assets/icons/material/round/calculate.svg';
+import IconPhotoSizeSelectSmall from '@servicetitan/anvil2/assets/icons/material/round/photo_size_select_small.svg';
+import IconEstimate from '@servicetitan/anvil2/assets/icons/st/estimate.svg';
+import { FieldTypeEnum } from '../interface/types';
+
+export interface MenuGroupModel {
+    svgIcon: any;
+    label: string;
+    key: FieldTypeEnum;
+}
+
+export const menuGroups: MenuGroupModel[] = [
+    { svgIcon: IconEstimate, label: 'Merge Tags', key: FieldTypeEnum.dataModel },
+    { svgIcon: IconBorderColor, label: 'E-Sign', key: FieldTypeEnum.eSign },
+    {
+        svgIcon: IconPhotoSizeSelectSmall,
+        label: 'Fillable Fields',
+        key: FieldTypeEnum.fillable,
+    },
+    {
+        svgIcon: IconCalculate,
+        label: 'Calculated Fields',
+        key: FieldTypeEnum.calculated,
+    },
+];

package/src/hooks/index.ts

@@ -1,5 +1,6 @@
 export * from './useFieldDrag';
 export * from './useFieldResize';
+export * from './useFormulaEditor';
 export * from './usePdfDocumentRenderer';
 export * from './usePdfFieldDnD';
 export * from './usePdfFieldSelection';

package/src/hooks/useFormulaEditor.ts

@@ -0,0 +1,336 @@
+import {
+    KeyboardEvent as ReactKeyboardEvent,
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
+import {
+    getCaretExpressionIndex,
+    placeCaretAtEnd,
+    readExpressionFromEditor,
+    renderFormulaHtml,
+    setCaretByExpressionIndex,
+    tokenizeExpression,
+} from '../utils';
+
+export const useFormulaEditor = (params: {
+    currentExpression: string;
+    opened: boolean;
+    pathToLabel: Map<string, string>;
+}) => {
+    const { currentExpression, opened, pathToLabel } = params;
+    const [draftExpression, setDraftExpression] = useState(currentExpression);
+    const [history, setHistory] = useState<string[]>([currentExpression]);
+    const [historyIndex, setHistoryIndex] = useState(0);
+    const [isDirty, setIsDirty] = useState(false);
+    const editorRef = useRef<HTMLDivElement | null>(null);
+    const updateSourceRef = useRef<'editor' | 'state' | null>(null);
+    const pendingCaretRef = useRef<number | null>(null);
+    const lastCaretRef = useRef(0);
+    const historyIndexRef = useRef(0);
+    const historyRef = useRef<string[]>([currentExpression]);
+
+    useEffect(() => {
+        if (opened) {
+            setDraftExpression(currentExpression);
+            setIsDirty(false);
+            setHistory([currentExpression]);
+            setHistoryIndex(0);
+            historyIndexRef.current = 0;
+            historyRef.current = [currentExpression];
+            const editor = editorRef.current;
+            if (editor) {
+                editor.innerHTML = renderFormulaHtml(currentExpression, pathToLabel);
+                placeCaretAtEnd(editor);
+            }
+        }
+    }, [opened, currentExpression, pathToLabel]);
+
+    useEffect(() => {
+        const editor = editorRef.current;
+        if (!editor) {
+            return;
+        }
+        if (updateSourceRef.current === 'editor') {
+            updateSourceRef.current = null;
+            return;
+        }
+        editor.innerHTML = renderFormulaHtml(draftExpression, pathToLabel);
+        if (pendingCaretRef.current !== null) {
+            setCaretByExpressionIndex(editor, pendingCaretRef.current);
+            pendingCaretRef.current = null;
+        } else {
+            placeCaretAtEnd(editor);
+        }
+    }, [draftExpression, pathToLabel]);
+
+    useEffect(() => {
+        historyIndexRef.current = historyIndex;
+        historyRef.current = history;
+    }, [historyIndex, history]);
+
+    const handleEditorInput = useCallback(() => {
+        const editor = editorRef.current;
+        if (!editor) {
+            return;
+        }
+        const nextValue = readExpressionFromEditor(editor);
+        const caretIndex = getCaretExpressionIndex(editor);
+        pendingCaretRef.current = caretIndex;
+        lastCaretRef.current = caretIndex;
+        updateSourceRef.current = 'editor';
+        setDraftExpression(nextValue);
+        setIsDirty(true);
+        const cur = historyIndexRef.current;
+        const hist = historyRef.current;
+        const base = hist.slice(0, cur + 1);
+        if (base[base.length - 1] !== nextValue) {
+            setHistory([...base, nextValue]);
+            setHistoryIndex(base.length);
+        }
+    }, []);
+
+    const getCaretIndexForInsert = useCallback((): number => {
+        const editor = editorRef.current;
+        if (!editor) {
+            return draftExpression.length;
+        }
+        const sel = window.getSelection();
+        if (sel?.rangeCount && editor.contains(sel.getRangeAt(0).startContainer)) {
+            const idx = getCaretExpressionIndex(editor);
+            lastCaretRef.current = idx;
+            return idx;
+        }
+        return lastCaretRef.current;
+    }, [draftExpression.length]);
+
+    const pushHistory = useCallback((nextValue: string, nextCaret: number) => {
+        pendingCaretRef.current = nextCaret;
+        lastCaretRef.current = nextCaret;
+        setDraftExpression(nextValue);
+        setIsDirty(true);
+        const cur = historyIndexRef.current;
+        const hist = historyRef.current;
+        const base = hist.slice(0, cur + 1);
+        if (base[base.length - 1] !== nextValue) {
+            setHistory([...base, nextValue]);
+            setHistoryIndex(base.length);
+        }
+        requestAnimationFrame(() => editorRef.current?.focus());
+    }, []);
+
+    const insertField = useCallback(
+        (path: string) => {
+            const editor = editorRef.current;
+            if (!editor) {
+                return;
+            }
+            const inserted = `${path} `;
+            const caretIndex = getCaretIndexForInsert();
+            const before = draftExpression.slice(0, caretIndex);
+            const after = draftExpression.slice(caretIndex);
+            const nextValue = `${before}${inserted}${after}`;
+            updateSourceRef.current = 'state';
+            pushHistory(nextValue, caretIndex + inserted.length);
+        },
+        [draftExpression, getCaretIndexForInsert, pushHistory],
+    );
+
+    const insertOperator = useCallback(
+        (op: string) => {
+            const editor = editorRef.current;
+            if (!editor) {
+                return;
+            }
+            const caretIndex = getCaretIndexForInsert();
+            const before = draftExpression.slice(0, caretIndex);
+            const after = draftExpression.slice(caretIndex);
+            const inserted = ` ${op} `;
+            const nextValue = `${before}${inserted}${after}`;
+            updateSourceRef.current = 'state';
+            pushHistory(nextValue, caretIndex + inserted.length);
+        },
+        [draftExpression, getCaretIndexForInsert, pushHistory],
+    );
+
+    const removeFieldAtIndex = useCallback(
+        (fieldIndex: number) => {
+            const parts = tokenizeExpression(draftExpression);
+            let currentFieldIndex = -1;
+            let index = 0;
+            let removed = false;
+            const nextValue = parts
+                .map(part => {
+                    if (part.type === 'field') {
+                        currentFieldIndex += 1;
+                        if (currentFieldIndex === fieldIndex) {
+                            removed = true;
+                            index += part.value.length;
+                            return '';
+                        }
+                    }
+                    index += part.value.length;
+                    return part.value;
+                })
+                .join('');
+            if (!removed) {
+                return;
+            }
+            updateSourceRef.current = 'state';
+            const nextCaret = Math.min(index, nextValue.length);
+            pendingCaretRef.current = nextCaret;
+            lastCaretRef.current = nextCaret;
+            setDraftExpression(nextValue);
+            setIsDirty(true);
+            const cur = historyIndexRef.current;
+            const hist = historyRef.current;
+            const base = hist.slice(0, cur + 1);
+            if (base[base.length - 1] !== nextValue) {
+                setHistory([...base, nextValue]);
+                setHistoryIndex(base.length);
+            }
+            requestAnimationFrame(() => editorRef.current?.focus());
+        },
+        [draftExpression],
+    );
+
+    const handleKeyDown = useCallback((e: ReactKeyboardEvent<HTMLDivElement>) => {
+        if (e.ctrlKey || e.metaKey) {
+            const key = e.key.toLowerCase();
+            if (key === 'z') {
+                e.preventDefault();
+                if (historyIndexRef.current > 0) {
+                    const next = historyRef.current[historyIndexRef.current - 1];
+                    updateSourceRef.current = 'state';
+                    pendingCaretRef.current = next.length;
+                    setDraftExpression(next);
+                    setHistoryIndex(historyIndexRef.current - 1);
+                    setIsDirty(true);
+                }
+                return;
+            }
+            if (key === 'y' || (e.shiftKey && key === 'z')) {
+                e.preventDefault();
+                const cur = historyIndexRef.current;
+                const hist = historyRef.current;
+                if (cur < hist.length - 1) {
+                    const next = hist[cur + 1];
+                    updateSourceRef.current = 'state';
+                    pendingCaretRef.current = next.length;
+                    setDraftExpression(next);
+                    setHistoryIndex(cur + 1);
+                    setIsDirty(true);
+                }
+                return;
+            }
+        }
+        const allowed = new Set([
+            '+',
+            '-',
+            '*',
+            '/',
+            '(',
+            ')',
+            '0',
+            '1',
+            '2',
+            '3',
+            '4',
+            '5',
+            '6',
+            '7',
+            '8',
+            '9',
+            '.',
+            'Backspace',
+            'Delete',
+            'ArrowLeft',
+            'ArrowRight',
+            'ArrowUp',
+            'ArrowDown',
+            'Home',
+            'End',
+            'Tab',
+            ' ',
+        ]);
+        if (!allowed.has(e.key)) {
+            e.preventDefault();
+        }
+    }, []);
+
+    const handlePaste = useCallback(
+        (text: string) => {
+            if (!text?.trim()) {
+                return;
+            }
+            const parts = tokenizeExpression(text).filter(
+                p => p.type !== 'text' || p.value.trim() !== '',
+            );
+            const sanitized = parts.map(p => p.value).join('');
+            if (!sanitized) {
+                return;
+            }
+            const editor = editorRef.current;
+            if (!editor) {
+                return;
+            }
+            const caretIndex = getCaretIndexForInsert();
+            const before = draftExpression.slice(0, caretIndex);
+            const after = draftExpression.slice(caretIndex);
+            const nextValue = `${before}${sanitized}${after}`;
+            updateSourceRef.current = 'state';
+            pushHistory(nextValue, caretIndex + sanitized.length);
+        },
+        [draftExpression, getCaretIndexForInsert, pushHistory],
+    );
+
+    const undo = useCallback(() => {
+        if (historyIndexRef.current > 0) {
+            const next = historyRef.current[historyIndexRef.current - 1];
+            updateSourceRef.current = 'state';
+            pendingCaretRef.current = next.length;
+            setDraftExpression(next);
+            setHistoryIndex(historyIndexRef.current - 1);
+            setIsDirty(true);
+            requestAnimationFrame(() => editorRef.current?.focus());
+        }
+    }, []);
+
+    const redo = useCallback(() => {
+        const cur = historyIndexRef.current;
+        const hist = historyRef.current;
+        if (cur < hist.length - 1) {
+            const next = hist[cur + 1];
+            updateSourceRef.current = 'state';
+            pendingCaretRef.current = next.length;
+            setDraftExpression(next);
+            setHistoryIndex(cur + 1);
+            setIsDirty(true);
+            requestAnimationFrame(() => editorRef.current?.focus());
+        }
+    }, []);
+
+    const selectedFieldPaths = useMemo(() => {
+        const parts = tokenizeExpression(draftExpression);
+        return new Set(parts.filter(p => p.type === 'field').map(p => p.value));
+    }, [draftExpression]);
+
+    return {
+        draftExpression,
+        editorRef,
+        isDirty,
+        canUndo: historyIndex > 0,
+        canRedo: historyIndex < history.length - 1,
+        undo,
+        redo,
+        handleEditorInput,
+        handleKeyDown,
+        handlePaste,
+        insertField,
+        insertOperator,
+        removeFieldAtIndex,
+        selectedFieldPaths,
+    };
+};

package/src/hooks/usePdfFieldDnD.ts

@@ -122,6 +122,10 @@ export const usePdfFieldDnD = ({
             }
         }
 
+        if (newField.type === FieldTypeEnum.calculated) {
+            newField.path = newField.id;
+        }
+
         onFieldsChange([...fields, newField]);
         onSelectField(newField.id);
         setDraggedFieldOption(null);