@contentstack/live-preview-utils/dist/modern/visualBuilder/utils/enableInlineEditing.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/enableInlineEditing.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { VisualBuilder } from \"../index\";\nimport {\n    isEllipsisActive,\n    generatePseudoEditableElement,\n} from \"../generators/generatePseudoEditableField\";\nimport { VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY } from \"./constants\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\nimport { handleFieldInput, handleFieldKeyDown } from \"./handleFieldMouseDown\";\nimport { FieldDataType, VisualBuilderEditContext } from \"./types/index.types\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { pasteAsPlainText } from \"./pasteAsPlainText\";\n\nexport function enableInlineEditing({\n    expectedFieldData,\n    editableElement,\n    fieldType,\n    elements,\n}: {\n    expectedFieldData: any;\n    editableElement: HTMLElement;\n    fieldType: FieldDataType;\n    elements: VisualBuilderEditContext;\n}) {\n    const { visualBuilderContainer, resizeObserver } = elements;\n    let actualEditableField = editableElement as HTMLElement;\n\n    VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue =\n        actualEditableField?.innerText;\n\n    const elementComputedDisplay =\n        window.getComputedStyle(actualEditableField).display;\n\n    let textContent =\n        (editableElement as HTMLElement).innerText ||\n        editableElement.textContent ||\n        \"\";\n\n    if (fieldType === FieldDataType.MULTILINE) {\n        textContent = getMultilinePlaintext(actualEditableField);\n        actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n    }\n    const expectedTextContent = expectedFieldData;\n    if (\n        (expectedTextContent && textContent !== expectedTextContent) ||\n        isEllipsisActive(editableElement as HTMLElement)\n    ) {\n        // TODO: Testing will be done in the E2E.\n        const pseudoEditableField = generatePseudoEditableElement(\n            { editableElement: editableElement as HTMLElement },\n            { textContent: expectedFieldData }\n        );\n\n        (editableElement as HTMLElement).style.visibility = \"hidden\";\n\n        // set field type attribute to the pseudo editable field\n        // ensures proper keydown handling similar to the actual editable field\n        pseudoEditableField.setAttribute(\n            VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n            fieldType\n        );\n        visualBuilderContainer.appendChild(pseudoEditableField);\n        actualEditableField = pseudoEditableField;\n\n        if (fieldType === FieldDataType.MULTILINE)\n            actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n\n        // we will unobserve this in hideOverlay\n        elements.resizeObserver.observe(pseudoEditableField);\n    } else if (elementComputedDisplay === \"inline\") {\n        // if the editable field is inline\n        const onInlineElementInput = throttle(() => {\n            const overlayWrapper = visualBuilderContainer.querySelector(\n                \".visual-builder__overlay__wrapper\"\n            ) as HTMLDivElement;\n            const focusedToolbar = visualBuilderContainer.querySelector(\n                \".visual-builder__focused-toolbar\"\n            ) as HTMLDivElement;\n            updateFocussedState({\n                editableElement: actualEditableField,\n                visualBuilderContainer,\n                overlayWrapper,\n                focusedToolbar,\n                resizeObserver,\n            });\n        }, 200);\n        actualEditableField.addEventListener(\"input\", onInlineElementInput);\n    }\n\n    actualEditableField.setAttribute(\"contenteditable\", \"true\");\n    actualEditableField.addEventListener(\"input\", handleFieldInput);\n    actualEditableField.addEventListener(\"keydown\", handleFieldKeyDown);\n    // focus on the contenteditable element to start accepting input\n    actualEditableField.focus();\n\n    return;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyB;AACzB,eAA8B;AAC9B,yCAGO;AACP,uBAAwD;AACxD,mCAAsC;AACtC,kCAAqD;AACrD,mBAAwD;AACxD,iCAAoC;AACpC,8BAAiC;AAE1B,SAAS,oBAAoB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAKG;AACC,QAAM,EAAE,wBAAwB,eAAe,IAAI;AACnD,MAAI,sBAAsB;AAE1B,yBAAc,yBAAyB,MAAM,kBACzC,qBAAqB;AAEzB,QAAM,yBACF,OAAO,iBAAiB,mBAAmB,EAAE;AAEjD,MAAI,cACC,gBAAgC,aACjC,gBAAgB,eAChB;AAEJ,MAAI,cAAc,2BAAc,WAAW;AACvC,sBAAc,oDAAsB,mBAAmB;AACvD,wBAAoB,iBAAiB,SAAS,wCAAgB;AAAA,EAClE;AACA,QAAM,sBAAsB;AAC5B,MACK,uBAAuB,gBAAgB,2BACxC,qDAAiB,eAA8B,GACjD;AAEE,UAAM,0BAAsB;AAAA,MACxB,EAAE,gBAAgD;AAAA,MAClD,EAAE,aAAa,kBAAkB;AAAA,IACrC;AAEA,IAAC,gBAAgC,MAAM,aAAa;AAIpD,wBAAoB;AAAA,MAChB;AAAA,MACA;AAAA,IACJ;AACA,2BAAuB,YAAY,mBAAmB;AACtD,0BAAsB;AAEtB,QAAI,cAAc,2BAAc;AAC5B,0BAAoB,iBAAiB,SAAS,wCAAgB;AAGlE,aAAS,eAAe,QAAQ,mBAAmB;AAAA,EACvD,WAAW,2BAA2B,UAAU;AAE5C,UAAM,2BAAuB,2BAAS,MAAM;AACxC,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,YAAM,iBAAiB,uBAAuB;AAAA,QAC1C;AAAA,MACJ;AACA,0DAAoB;AAAA,QAChB,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACJ,CAAC;AAAA,IACL,GAAG,GAAG;AACN,wBAAoB,iBAAiB,SAAS,oBAAoB;AAAA,EACtE;AAEA,sBAAoB,aAAa,mBAAmB,MAAM;AAC1D,sBAAoB,iBAAiB,SAAS,4CAAgB;AAC9D,sBAAoB,iBAAiB,WAAW,8CAAkB;AAElE,sBAAoB,MAAM;AAE1B;AACJ;","names":[]}