@contentstack/live-preview-utils/dist/modern/visualBuilder/utils/handleFieldMouseDown.cjs.map

Contentstack provides the Live Preview SDK to establish a communication channel between the various Contentstack SDKs and your website, transmitting live changes to the preview pane.

{"version":3,"sources":["../../../../src/visualBuilder/utils/handleFieldMouseDown.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { sendFieldEvent } from \"../generators/generateOverlay\";\nimport {\n    ALLOWED_INLINE_EDITABLE_FIELD,\n    VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n    numericInputRegex,\n} from \"./constants\";\nimport { FieldDataType } from \"./types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport { insertSpaceAtCursor } from \"./insertSpaceAtCursor\";\nimport { VisualBuilder } from \"..\";\n\nexport function handleFieldInput(e: Event): void {\n    const event = e as InputEvent;\n    const targetElement = event.target as HTMLElement;\n    const fieldType = targetElement.getAttribute(\n        VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n    ) as FieldDataType | null;\n\n    const previousLastEditedElement = document.querySelector(\"[data-cs-last-edited]\");\n    if (previousLastEditedElement !== targetElement) {\n        previousLastEditedElement?.removeAttribute(\"data-cs-last-edited\");\n        targetElement.setAttribute(\"data-cs-last-edited\", \"true\");\n    }\n    if (\n        event.type === \"input\" &&\n        ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType as FieldDataType)\n    ) {\n        if (\n            !VisualBuilder.VisualBuilderGlobalState.value\n                .focusFieldReceivedInput\n        ) {\n            VisualBuilder.VisualBuilderGlobalState.value.focusFieldReceivedInput =\n                true;\n        }\n        throttledFieldSync();\n    }\n}\nconst throttledFieldSync = throttle(() => {\n    try {\n        const visualBuilderContainer = document.querySelector(\n            \".visual-builder__container\"\n        ) as HTMLElement;\n        if (!visualBuilderContainer) return;\n        sendFieldEvent({\n            visualBuilderContainer,\n            eventType: VisualBuilderPostMessageEvents.SYNC_FIELD,\n        });\n    } catch (error) {\n        console.error(\"Error in throttledFieldSync\", error);\n    }\n}, 300);\n\nexport function handleFieldKeyDown(e: Event): void {\n    const event = e as KeyboardEvent;\n    const targetElement = event.target as HTMLElement;\n    const fieldType = targetElement.getAttribute(\n        VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n    ) as FieldDataType | null;\n\n    if (\n        event\n            .composedPath()\n            .some(\n                (element) =>\n                    element instanceof Element && element.tagName === \"BUTTON\"\n            )\n    ) {\n        // custom space handling when a button is involved\n        handleKeyDownOnButton(event);\n    }\n    if (fieldType === FieldDataType.NUMBER) {\n        handleNumericFieldKeyDown(event);\n    } else if (fieldType === FieldDataType.SINGLELINE) {\n        handleSingleLineFieldKeyDown(event);\n    }\n}\n\n// spaces do not work inside a button content-editable\n// this adds a space and moves the cursor ahead, the\n// button press event is also prevented, finally syncs the field\nfunction handleKeyDownOnButton(e: KeyboardEvent) {\n    if (e.code === \"Space\" && e.target) {\n        e.preventDefault();\n        insertSpaceAtCursor(e.target as HTMLElement);\n        throttledFieldSync();\n    }\n}\n\nfunction handleSingleLineFieldKeyDown(e: KeyboardEvent) {\n    if (e.code === \"Enter\") {\n        e.preventDefault();\n    }\n}\n\nfunction handleNumericFieldKeyDown(event: KeyboardEvent): void {\n    const targetElement = event.target as HTMLElement;\n\n    const allowedKeys = [\n        \"Backspace\",\n        \"Tab\",\n        \"Enter\",\n        \"End\",\n        \"Home\",\n        \"ArrowLeft\",\n        \"ArrowRight\",\n        \"Delete\",\n    ];\n\n    if (\n        event.ctrlKey ||\n        event.metaKey ||\n        event.altKey ||\n        allowedKeys.includes(event.code)\n    ) {\n        // Allow Ctrl, Cmd, Alt, and special keys\n        return;\n    }\n\n    if (event.code.includes(\"Digit\")) {\n        return;\n    }\n\n    const nonNumericAllowedCharacters = [\"-\", \".\", \"e\", \"E\"];\n\n    if (!nonNumericAllowedCharacters.includes(event.key)) {\n        event.preventDefault();\n        return;\n    }\n\n    const selection = {\n        startOffset: window.getSelection()?.getRangeAt(0).startOffset || 0,\n        endOffset: window.getSelection()?.getRangeAt(0).endOffset || 0,\n    };\n\n    const existingInput = targetElement.textContent || \"\";\n    const currentOutputArr = existingInput.split(\"\");\n    currentOutputArr.splice(\n        selection.startOffset,\n        selection.endOffset - selection.startOffset,\n        event.key\n    );\n    const currentInput = currentOutputArr.join(\"\");\n\n    if (!numericInputRegex.test(currentInput)) {\n        event.preventDefault();\n    }\n}\n"],"mappings":"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","names":[]}