Merge pull request #294 from contentstack/VE-3972-fix-psuedo-editable-position-updates

fix: psuedo editable re-positioning logic

Author: faraazb

.github/workflows/npm-publish.yml

@@ -1,33 +1,22 @@
-# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
-# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
-
-name: Node.js Package
-
+name: Publish Package to npmjs
 on:
     release:
         types: [created]
-
 jobs:
     build:
         runs-on: ubuntu-latest
+        permissions:
+            contents: read
+            id-token: write
         steps:
-            - uses: actions/checkout@v2
-            - uses: actions/setup-node@v2
+            - uses: actions/checkout@v4
+            # Setup .npmrc file to publish to npm
+            - uses: actions/setup-node@v4
               with:
-                  node-version: 16
+                  node-version: "18"
+                  registry-url: "https://registry.npmjs.org"
             - run: npm ci
-            - run: npm test
-
-    publish-npm:
-        needs: build
-        runs-on: ubuntu-latest
-        steps:
-            - uses: actions/checkout@v2
-            - uses: actions/setup-node@v2
-              with:
-                  node-version: 16
-                  registry-url: https://registry.npmjs.org/
-            - run: npm ci
-            - run: npm publish
+            - run: npm run build
+            - run: npm publish --provenance --access public
               env:
-                  NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+                  NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package-lock.json

@@ -24,12 +24,12 @@
     ],
     "sideEffects": false,
     "scripts": {
-        "build": "tsup",
+        "build": "NODE_OPTIONS='--max-old-space-size=16384' tsup",
         "test": "vitest",
         "test:once": "vitest run",
         "test:coverage": "vitest --coverage",
         "dev": "tsup --watch",
-        "prepare": "npm run build && husky install",
+        "prepare": "husky install",
         "lint": "eslint src",
         "lint:fix": "eslint --fix",
         "prettier": "prettier src --check",
@@ -69,6 +69,7 @@
         "prettier-eslint": "^15.0.1",
         "ssri": "^11.0.0",
         "ts-node": "^10.9.2",
+        "tsc": "^2.0.4",
         "tsup": "^8.0.1",
         "tsx": "^4.19.1",
         "typedoc": "^0.25.13",

package.json

@@ -1,8 +1,7 @@
 import classNames from "classnames";
-import getCamelCaseStyles from "../utils/getCamelCaseStyles";
-import getStyleOfAnElement from "../utils/getStyleOfAnElement";
 import React from "preact/compat";
 import { visualBuilderStyles } from "../visualBuilder.style";
+import { getPsuedoEditableElementStyles } from "../utils/getPsuedoEditableStylesElement";
 
 interface PseudoEditableFieldProps {
     editableElement: HTMLElement;
@@ -12,27 +11,14 @@ interface PseudoEditableFieldProps {
 function PseudoEditableFieldComponent(
     props: PseudoEditableFieldProps
 ): JSX.Element {
-    const styles = getCamelCaseStyles(
-        getStyleOfAnElement(props.editableElement)
-    );
-    // Get the offsetTop and offsetLeft of the editable element and set the position of the pseudo editable element
-    // The pseudo editable element is positioned absolutely at the same location as the editable element
-    const rect = props.editableElement.getBoundingClientRect();
-
-    styles.position = "absolute";
-    styles.top = `${rect.top + window.scrollY}px`;
-    styles.left = `${rect.left + window.scrollX}px`;
-    // setting height to auto so that the element can grow based on the content
-    // and the resize observer can detect the change in height
-    styles.height = "auto";
-    styles.whiteSpace = "pre-line"
-    styles.textTransform = "none"
+    const styles = getPsuedoEditableElementStyles(props.editableElement, true);
 
     return (
         <div
-            className={
-                classNames("visual-builder__pseudo-editable-element", visualBuilderStyles()["visual-builder__pseudo-editable-element"])
-            }
+            className={classNames(
+                "visual-builder__pseudo-editable-element",
+                visualBuilderStyles()["visual-builder__pseudo-editable-element"]
+            )}
             data-testid="visual-builder__pseudo-editable-element"
             style={styles}
         >

src/visualBuilder/components/pseudoEditableField.tsx

@@ -76,7 +76,6 @@ export class VisualBuilder {
             visualBuilderContainer: this.visualBuilderContainer,
             overlayWrapper: this.overlayWrapper,
             focusedToolbar: this.focusedToolbar,
-            resizeObserver: this.resizeObserver,
         });
     }
 

src/visualBuilder/index.ts

@@ -0,0 +1,26 @@
+import getCamelCaseStyles from "./getCamelCaseStyles";
+import getStyleOfAnElement from "./getStyleOfAnElement";
+
+export function getPsuedoEditableElementStyles(
+    psuedoEditableElement: HTMLElement,
+    camelCase?: boolean
+): { [key: string]: string } {
+    let styles = getStyleOfAnElement(psuedoEditableElement);
+    if (camelCase) {
+        styles = getCamelCaseStyles(styles);
+    }
+    // Get the offsetTop and offsetLeft of the editable element and set the position of the pseudo editable element
+    // The pseudo editable element is positioned absolutely at the same location as the editable element
+    const rect = psuedoEditableElement.getBoundingClientRect();
+
+    styles.position = "absolute";
+    styles.top = `${rect.top + window.scrollY}px`;
+    styles.left = `${rect.left + window.scrollX}px`;
+    // setting height to auto so that the element can grow based on the content
+    // and the resize observer can detect the change in height
+    styles.height = "auto";
+    styles.whiteSpace = "pre-line";
+    styles.textTransform = "none";
+
+    return styles;
+}

src/visualBuilder/utils/getPsuedoEditableStylesElement.ts

@@ -17,6 +17,8 @@ export default function getStyleOfAnElement(element: HTMLElement): {
         "right",
         "bottom",
         "text-overflow",
+        // allows seeing the text from CMS field as-is
+        "text-transform",
         "margin",
         "margin-block-end",
         "margin-block-start",

src/visualBuilder/utils/getStyleOfAnElement.ts

@@ -200,7 +200,6 @@ export async function handleIndividualFields(
                         editableElement: actualEditableField,
                         visualBuilderContainer,
                         overlayWrapper,
-                        resizeObserver,
                         focusedToolbar,
                     });
                 }, 200);