@servicetitan/dte-pdf-editor 1.16.0 → 1.18.0

package/src/styles/formula-modal.css

@@ -0,0 +1,307 @@
+/* Formula modal overlay */
+.dte-formula-modal-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--z-index-drawer);
+    background-color: rgba(0, 0, 0, 0.4);
+    padding: var(--spacing-2);
+}
+
+.dte-formula-modal {
+    background: var(--white);
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    width: 800px;
+    max-height: 85vh;
+}
+
+.dte-formula-modal-body {
+    padding: var(--spacing-2);
+    overflow: auto;
+}
+
+.dte-formula-modal-columns {
+    min-height: 280px;
+    max-height: 60vh;
+}
+
+/* Field sidebar (left) */
+.dte-formula-sidebar {
+    flex: 0 0 220px;
+    border-right: 1px solid var(--border-color);
+    padding-right: var(--spacing-2);
+    gap: var(--spacing-2);
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    overflow-y: auto;
+}
+
+.dte-formula-field-list {
+    margin: var(--spacing-0);
+    padding: var(--spacing-0);
+    list-style: none;
+}
+
+.dte-formula-field-list-item {
+    padding: var(--spacing-1) var(--spacing-2);
+    cursor: pointer;
+    border-left: 3px solid transparent;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.dte-formula-field-list-item:hover,
+.dte-formula-field-list-item.--highlight {
+    color: var(--color-neutral-100, #e8e8e8);
+}
+
+.dte-formula-field-list-item.--selected {
+    border-left-color: var(--border-color-active, #0265dc);
+}
+
+.dte-formula-editor {
+    min-height: 100px;
+    max-height: 180px;
+    overflow-y: auto;
+    padding: var(--spacing-2);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    outline: none;
+    font-size: var(--typescale-2);
+    line-height: var(--base-line-height);
+    white-space: pre-wrap;
+}
+
+.dte-formula-editor:focus {
+    border-color: var(--border-color-active);
+    box-shadow: 0 0 0 1px var(--border-color-active);
+}
+
+.dte-formula-editor-invalid {
+    border-color: var(--danger, #dc3545);
+}
+
+.dte-formula-editor:empty::before {
+    content: attr(data-placeholder);
+    color: var(--color-neutral-200);
+}
+
+.dte-formula-chip {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 6px;
+    margin: var(--spacing-0) 2px;
+    background: var(--menu-active-color, #0265dc);
+    border-radius: var(--spacing-half, 4px);
+    color: var(--white);
+    gap: var(--spacing-half);
+    margin-bottom: var(--spacing-half);
+    cursor: grab;
+    font-weight: 500;
+}
+
+.dte-formula-chip-label {
+    pointer-events: none;
+}
+
+.dte-formula-chip-remove {
+    cursor: pointer;
+    opacity: 0.9;
+    padding: var(--spacing-0) 2px;
+    line-height: 1;
+}
+
+.dte-formula-chip-remove:hover {
+    opacity: 1;
+}
+
+.dte-formula-advanced-toggle {
+    background: none;
+    border: none;
+    padding: var(--spacing-0);
+    font-size: var(--typescale-2);
+    color: var(--menu-active-color, #0265dc);
+    cursor: pointer;
+    text-decoration: none;
+}
+
+.dte-formula-advanced-toggle:hover {
+    text-decoration: underline;
+}
+
+.dte-formula-advanced {
+    margin-top: var(--spacing-2);
+    padding-top: var(--spacing-2);
+    border-top: 1px solid var(--border-color);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-2);
+}
+
+.dte-formula-advanced-row {
+    margin-bottom: var(--spacing-0);
+}
+
+.dte-formula-advanced-value {
+    color: var(--color-neutral-300);
+}
+
+.dte-formula-advanced-range {
+    width: 100%;
+    margin: var(--spacing-0);
+}
+
+.dte-formula-advanced-checkbox {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-1);
+    cursor: pointer;
+}
+
+.dte-formula-advanced-checkbox input {
+    margin: var(--spacing-0);
+}
+
+.dte-formula-advanced-input {
+    flex: 1;
+    min-width: 0;
+    max-width: 160px;
+    padding: var(--spacing-1) var(--spacing-2);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    font-size: var(--typescale-2);
+}
+
+.dte-formula-modal-header {
+    padding: var(--spacing-2);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.dte-formula-modal-footer {
+    padding: var(--spacing-2);
+    border-top: 1px solid var(--border-color);
+}
+
+/* Token input */
+.dte-formula-token-input-wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    gap: var(--spacing-2);
+}
+
+.dte-formula-token-input {
+    flex: 1;
+    padding: var(--spacing-1) var(--spacing-2);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    outline: none;
+    flex-wrap: wrap;
+    gap: 2px;
+    cursor: text;
+}
+
+.dte-formula-token-input:focus {
+    border-color: var(--border-color-active);
+    box-shadow: 0 0 0 1px var(--border-color-active);
+}
+
+.dte-formula-placeholder {
+    color: var(--color-neutral-200);
+}
+
+.dte-formula-token {
+    margin: var(--spacing-half);
+    user-select: none;
+    font-size: var(--typescale-2);
+}
+
+.dte-formula-token-field {
+    padding: 2px var(--spacing-half);
+    background: var(--menu-active-color, #0265dc);
+    border-radius: var(--spacing-half, 4px);
+    color: var(--white);
+    flex-shrink: 0;
+}
+
+.dte-formula-token-delete {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacing-0);
+    margin: var(--spacing-0);
+    margin-left: 2px;
+    border: none;
+    background: transparent;
+    color: var(--color-neutral-200);
+    cursor: pointer;
+    border-radius: 2px;
+}
+
+.dte-formula-token-delete:hover {
+    color: var(--danger, #dc3545);
+}
+
+.dte-formula-token-number {
+    font-variant-numeric: tabular-nums;
+}
+
+.dte-formula-caret {
+    width: 0;
+    height: 1em;
+    border-left: 2px solid var(--color-neutral-300);
+    margin: var(--spacing-0) 1px;
+    animation: dte-formula-caret-blink 1s step-end infinite;
+}
+
+@keyframes dte-formula-caret-blink {
+    50% {
+        opacity: 0;
+    }
+}
+
+/* Autosuggest - left side, always visible */
+.dte-formula-autosuggest {
+    margin: var(--spacing-0);
+    padding: var(--spacing-0);
+    list-style: none;
+    width: 200px;
+    min-width: 200px;
+    max-height: 200px;
+    overflow-y: auto;
+    background: var(--white);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    flex-shrink: 0;
+}
+
+.dte-formula-autosuggest-item {
+    padding: var(--spacing-1) var(--spacing-2);
+    cursor: pointer;
+}
+
+.dte-formula-autosuggest-item:hover,
+.dte-formula-autosuggest-item.--highlight {
+    color: var(--menu-active-color);
+}
+
+.dte-formula-autosuggest-item.empty {
+    cursor: default;
+    color: var(--color-neutral-200);
+}
+
+.dte-formula-box {
+    padding: var(--spacing-1) var(--spacing-2);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: var(--color-neutral-0);
+    cursor: pointer;
+    display: flex;
+    overflow-x: auto;
+    align-items: center;
+    gap: 2px;
+}
+
+.dte-formula-box:hover {
+    border-color: var(--border-color-hover);
+}

package/src/styles/index.css

@@ -6,5 +6,6 @@
 @import './pdf-editor.css';
 @import './field-type-list.css';
 @import './field-config-panel-overlay.css';
+@import './formula-modal.css';
 @import './field-type.css';
 @import './pdf-document-renderer.css';

package/src/styles/pdf-field-overlay.css

@@ -33,6 +33,7 @@
 
 .dte-pdf-field.--dragging {
     opacity: 0.5;
+    will-change: left, top;
 }
 
 .dte-pdf-field.--colored:not(.--selected) {

package/src/utils/data-model/extract-fields.utils.ts

@@ -2,17 +2,37 @@ import {
     DataModelFieldGroup,
     FieldTypeEnum,
     FieldTypeOption,
+    SchemaNode,
     SchemaObject,
+    SchemaSimpleNumber,
 } from '../../interface/types';
 
+function isSchemaSimpleNumber(node: SchemaNode): node is SchemaSimpleNumber {
+    return node.type === 'number';
+}
+
+function useInCalculatedFields(node: SchemaNode): boolean {
+    return node.options?.useInCalculatedFields === true;
+}
+
+export interface ExtractGroupedFieldsOptions {
+    /** When true, only include fields with SchemaFieldBaseOptions.useInCalculatedFields === true */
+    onlyUseInCalculatedFields?: boolean;
+}
+
 /**
  * Utility function to extract grouped fields from DataModel structure
  * Filters out array types and only processes object properties, generating correct paths for data replacement
  */
+const DEFAULT_GROUP_NAME = 'Fields';
+
 export const extractGroupedFieldsFromDataModel = (
     dataModel: SchemaObject,
+    options?: ExtractGroupedFieldsOptions,
 ): DataModelFieldGroup[] => {
+    const onlyUseInCalculatedFields = options?.onlyUseInCalculatedFields === true;
     const groups: DataModelFieldGroup[] = [];
+    const topLevelFields: FieldTypeOption[] = [];
 
     if (!dataModel?.properties) {
         return groups;
@@ -23,7 +43,13 @@ export const extractGroupedFieldsFromDataModel = (
 
         if (property.type === 'object' && property.properties) {
             const fields: FieldTypeOption[] = [];
-            extractFieldsRecursive(property.properties, key, fields, key);
+            extractFieldsRecursive(
+                property.properties,
+                key,
+                fields,
+                key,
+                onlyUseInCalculatedFields,
+            );
 
             if (fields.length > 0) {
                 groups.push({
@@ -33,18 +59,42 @@ export const extractGroupedFieldsFromDataModel = (
             }
         } else if (property.type === 'array' && property.items) {
             // Skip array types - filter them out from the data model
+        } else {
+            // First-level simple field (string, number, boolean) – add under default group
+            const rawType = (property as { type?: string }).type;
+            const isLeaf =
+                property.type === 'string' ||
+                isSchemaSimpleNumber(property as SchemaNode) ||
+                rawType === 'boolean';
+            const includeField =
+                !onlyUseInCalculatedFields || useInCalculatedFields(property as SchemaNode);
+            if (isLeaf && includeField) {
+                topLevelFields.push({
+                    label: (property as SchemaNode).title ?? key,
+                    type: FieldTypeEnum.dataModel,
+                    path: key,
+                });
+            }
         }
     });
 
+    if (topLevelFields.length > 0) {
+        groups.unshift({
+            groupName: DEFAULT_GROUP_NAME,
+            fields: topLevelFields,
+        });
+    }
+
     return groups;
 };
 
 // Recursive function to extract fields from nested structures
 const extractFieldsRecursive = (
-    properties: any,
+    properties: Record<string, SchemaNode>,
     basePath: string,
     fields: FieldTypeOption[],
     groupName: string,
+    onlyUseInCalculatedFields: boolean,
 ): void => {
     Object.keys(properties).forEach(fieldKey => {
         const fieldProperty = properties[fieldKey];
@@ -52,11 +102,13 @@ const extractFieldsRecursive = (
             ? `${basePath}.${fieldKey}`
             : `${basePath}.${fieldKey}`;
 
-        if (
+        const rawType = (fieldProperty as { type?: string }).type;
+        const isLeaf =
             fieldProperty.type === 'string' ||
-            fieldProperty.type === 'number' ||
-            fieldProperty.type === 'boolean'
-        ) {
+            isSchemaSimpleNumber(fieldProperty) ||
+            rawType === 'boolean';
+        const includeField = !onlyUseInCalculatedFields || useInCalculatedFields(fieldProperty);
+        if (isLeaf && includeField) {
             // Leaf property - add as a field
             const label = fieldProperty.title ?? fieldKey;
             fields.push({
@@ -65,7 +117,13 @@ const extractFieldsRecursive = (
                 path: currentPath,
             });
         } else if (fieldProperty.type === 'object' && fieldProperty.properties) {
-            extractFieldsRecursive(fieldProperty.properties, currentPath, fields, groupName);
+            extractFieldsRecursive(
+                fieldProperty.properties,
+                currentPath,
+                fields,
+                groupName,
+                onlyUseInCalculatedFields,
+            );
         } else if (fieldProperty.type === 'array' && fieldProperty.items) {
             // Skip array types - filter them out from the data model
         }

package/src/utils/formula/caret.utils.ts

@@ -0,0 +1,125 @@
+import { placeCaretAtEnd, readExpressionFromEditor } from './dom.utils';
+
+function getExpressionBeforeCaret(element: HTMLElement): string {
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) {
+        return readExpressionFromEditor(element);
+    }
+    const range = selection.getRangeAt(0);
+    const endContainer = range.endContainer;
+    const endOffset = range.endOffset;
+    const parts: string[] = [];
+
+    const appendNode = (node: ChildNode) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            parts.push(node.textContent ?? '');
+            return;
+        }
+        if (node instanceof HTMLElement && node.dataset.field) {
+            parts.push(node.dataset.field);
+            return;
+        }
+        parts.push(node.textContent ?? '');
+    };
+
+    const getTopLevelChild = (node: Node): ChildNode | null => {
+        let current: Node | null = node;
+        while (current && current.parentNode !== element) {
+            current = current.parentNode;
+        }
+        return current && current.parentNode === element ? (current as ChildNode) : null;
+    };
+
+    if (endContainer === element) {
+        element.childNodes.forEach((node, index) => {
+            if (index < endOffset) {
+                appendNode(node);
+            }
+        });
+        return parts.join('').replace(/\u00a0/g, ' ');
+    }
+
+    const topChild = getTopLevelChild(endContainer);
+    if (!topChild) {
+        return readExpressionFromEditor(element);
+    }
+
+    for (const node of Array.from(element.childNodes)) {
+        if (node === topChild) {
+            if (node.nodeType === Node.TEXT_NODE) {
+                parts.push((node.textContent ?? '').slice(0, endOffset));
+            } else if (node instanceof HTMLElement && node.dataset.field) {
+                if (endOffset > 0) {
+                    parts.push(node.dataset.field);
+                }
+            } else {
+                parts.push((node.textContent ?? '').slice(0, endOffset));
+            }
+            break;
+        }
+        appendNode(node);
+    }
+    return parts.join('').replace(/\u00a0/g, ' ');
+}
+
+export function getCaretExpressionIndex(element: HTMLElement): number {
+    return getExpressionBeforeCaret(element).length;
+}
+
+export function setCaretByExpressionIndex(element: HTMLElement, index: number): void {
+    const selection = window.getSelection();
+    if (!selection) {
+        return;
+    }
+    let remaining = index;
+    let targetNode: Node | null = null;
+    let targetOffset = 0;
+
+    const getNodeLength = (node: ChildNode): number => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            return node.textContent?.length ?? 0;
+        }
+        if (node instanceof HTMLElement && node.dataset.field) {
+            return node.dataset.field?.length ?? 0;
+        }
+        return node.textContent?.length ?? 0;
+    };
+
+    for (const node of Array.from(element.childNodes)) {
+        const len = getNodeLength(node);
+        if (remaining <= len) {
+            targetNode = node;
+            targetOffset = remaining;
+            break;
+        }
+        remaining -= len;
+    }
+
+    if (!targetNode) {
+        placeCaretAtEnd(element);
+        return;
+    }
+
+    const range = document.createRange();
+    if (targetNode.nodeType === Node.TEXT_NODE) {
+        range.setStart(targetNode, targetOffset);
+    } else if (targetNode instanceof HTMLElement && targetNode.dataset.field) {
+        range.setStartAfter(targetNode);
+    } else if (targetNode instanceof HTMLElement) {
+        const textNode = Array.from(targetNode.childNodes).find(
+            n => n.nodeType === Node.TEXT_NODE,
+        ) as Text | undefined;
+        if (textNode) {
+            range.setStart(textNode, Math.min(targetOffset, textNode.textContent?.length ?? 0));
+        } else if (targetOffset > 0) {
+            range.setStartAfter(targetNode);
+        } else {
+            range.setStartBefore(targetNode);
+        }
+    } else {
+        range.setStart(targetNode, targetOffset);
+    }
+    range.collapse(true);
+    selection.removeAllRanges();
+    selection.addRange(range);
+}

package/src/utils/formula/dom.utils.ts

@@ -0,0 +1,35 @@
+export const escapeHtml = (value: string): string =>
+    value
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+
+export function readExpressionFromEditor(node: HTMLElement): string {
+    const parts: string[] = [];
+    node.childNodes.forEach(child => {
+        if (child.nodeType === Node.TEXT_NODE) {
+            parts.push(child.textContent ?? '');
+            return;
+        }
+        if (child instanceof HTMLElement && child.dataset.field) {
+            parts.push(child.dataset.field);
+            return;
+        }
+        parts.push(child.textContent ?? '');
+    });
+    return parts.join('').replace(/\u00a0/g, ' ');
+}
+
+export function placeCaretAtEnd(element: HTMLElement): void {
+    const selection = window.getSelection();
+    if (!selection) {
+        return;
+    }
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    range.collapse(false);
+    selection.removeAllRanges();
+    selection.addRange(range);
+}