@contentstack/live-preview-utils/dist/modern/visualBuilder/generators/generatePseudoEditableField.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/generators/generatePseudoEditableField.tsx"],"sourcesContent":["import { render } from \"preact\";\nimport PseudoEditableFieldComponent from \"../components/pseudoEditableField\";\n\n/**\n * Checks if the content of an element is truncated with ellipsis.\n *\n * @param element The HTML element to check.\n * @returns A boolean indicating whether the content is truncated with ellipsis.\n */\nexport function isEllipsisActive(element: HTMLElement): boolean {\n    return element.offsetWidth < element.scrollWidth;\n}\n\n/**\n * Generates a pseudo editable element based on the provided parameters.\n * The pseudo editable element is created as a <div> element with the provided text content,\n * positioned absolutely at the same location as the editable element.\n * The original editable element is hidden while the pseudo editable element is displayed.\n * It is used to edit the text content if the original editable element is not completely\n * visible.\n *\n * @param elements - An object containing the editable element.\n * @param elements.editableElement - The HTML element to be replaced with the pseudo editable element.\n * @param config - An object containing the configuration for the pseudo editable element.\n * @param config.textContent - The text content to be displayed in the pseudo editable element.\n *\n * @returns The generated pseudo editable element as an HTMLDivElement.\n */\nexport function generatePseudoEditableElement(\n    elements: {\n        editableElement: HTMLElement;\n    },\n    config: { textContent: string }\n): HTMLDivElement {\n    const { editableElement } = elements;\n\n    const visualBuilderContainer = document.querySelector(\n        \".visual-builder__container\"\n    );\n    const wrapper = document.createDocumentFragment();\n    render(\n        <PseudoEditableFieldComponent\n            editableElement={editableElement}\n            config={config}\n        />,\n        wrapper\n    );\n\n    visualBuilderContainer?.appendChild(wrapper);\n\n    const pseudoEditableElement = document.querySelector(\n        \".visual-builder__pseudo-editable-element\"\n    ) as HTMLDivElement;\n\n    // TODO: set up a observer for UI shift.\n    return pseudoEditableElement;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAuB;AACvB,iCAAyC;AAwCjC;AAhCD,SAAS,iBAAiB,SAA+B;AAC5D,SAAO,QAAQ,cAAc,QAAQ;AACzC;AAiBO,SAAS,8BACZ,UAGA,QACc;AACd,QAAM,EAAE,gBAAgB,IAAI;AAE5B,QAAM,yBAAyB,SAAS;AAAA,IACpC;AAAA,EACJ;AACA,QAAM,UAAU,SAAS,uBAAuB;AAChD;AAAA,IACI;AAAA,MAAC,2BAAAA;AAAA,MAAA;AAAA,QACG;AAAA,QACA;AAAA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,0BAAwB,YAAY,OAAO;AAE3C,QAAM,wBAAwB,SAAS;AAAA,IACnC;AAAA,EACJ;AAGA,SAAO;AACX;","names":["PseudoEditableFieldComponent"]}