Skip to content

Commit a4bb83e

Browse files
srinad007srinad007
authored
Merge pull request #296 from contentstack/VC-115/live-editor-support
feat: v3.0.1
2 parents 57d4c43 + 372b865 commit a4bb83e

14 files changed

Lines changed: 244 additions & 113 deletions

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ Alternatively, if you want to include the package directly in your website HTML
1616

1717
```html
1818
<script type='module' integrity='sha384-9M4o9H23Ax5ZTzsMRLgdlFBYk2hy+ub6XDiZhHWJjfebQ+MZ9iZw+GNep9ac0uFV' crossorigin="anonymous">
19-
import ContentstackLivePreview from 'https://esm.sh/@contentstack/live-preview-utils@3.0.0';
19+
import ContentstackLivePreview from 'https://esm.sh/@contentstack/live-preview-utils@3.0.1';
2020
2121
ContentstackLivePreview.init({
2222
stackDetails: {

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@contentstack/live-preview-utils",
3-
"version": "3.0.0",
3+
"version": "3.0.1",
44
"description": "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.",
55
"type": "module",
66
"types": "dist/legacy/index.d.ts",

‎src/livePreview/editButton/editButton.style.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ export function cslpTagStyles() {
44
return {
55
"cslp-edit-mode": css`
66
outline: 1px dashed #6c5ce7 !important;
7-
position: relative !important;
87
`,
98
"cslp-tooltip": css`
109
padding: 0;

‎src/visualBuilder/components/FieldToolbar.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ const TOOLTIP_TOP_EDGE_BUFFER = 96;
4646

4747
interface MultipleFieldToolbarProps {
4848
eventDetails: VisualBuilderCslpEventDetails;
49+
hideOverlay: () => void;
4950
};
5051

5152
function handleReplaceAsset(fieldMetadata: CslpData) {
@@ -309,6 +310,14 @@ function FieldToolbarComponent(
309310
fetchFieldSchema();
310311
}, [fieldMetadata]);
311312

313+
useEffect(() => {
314+
visualBuilderPostMessage?.on(VisualBuilderPostMessageEvents.DELETE_INSTANCE, (args: { data: { path: string } }) => {
315+
if(args.data?.path === fieldMetadata.instance.fieldPathWithIndex){
316+
props.hideOverlay()
317+
}
318+
})
319+
}, [])
320+
312321
const multipleFieldToolbarButtonClasses = classNames(
313322
"visual-builder__button visual-builder__button--secondary",
314323
visualBuilderStyles()["visual-builder__button"],

‎src/visualBuilder/components/pseudoEditableField.tsx‎

Lines changed: 6 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import classNames from "classnames";
2-
import getCamelCaseStyles from "../utils/getCamelCaseStyles";
3-
import getStyleOfAnElement from "../utils/getStyleOfAnElement";
42
import React from "preact/compat";
53
import { visualBuilderStyles } from "../visualBuilder.style";
4+
import { getPsuedoEditableElementStyles } from "../utils/getPsuedoEditableStylesElement";
65

76
interface PseudoEditableFieldProps {
87
editableElement: HTMLElement;
@@ -12,27 +11,14 @@ interface PseudoEditableFieldProps {
1211
function PseudoEditableFieldComponent(
1312
props: PseudoEditableFieldProps
1413
): JSX.Element {
15-
const styles = getCamelCaseStyles(
16-
getStyleOfAnElement(props.editableElement)
17-
);
18-
// Get the offsetTop and offsetLeft of the editable element and set the position of the pseudo editable element
19-
// The pseudo editable element is positioned absolutely at the same location as the editable element
20-
const rect = props.editableElement.getBoundingClientRect();
21-
22-
styles.position = "absolute";
23-
styles.top = `${rect.top + window.scrollY}px`;
24-
styles.left = `${rect.left + window.scrollX}px`;
25-
// setting height to auto so that the element can grow based on the content
26-
// and the resize observer can detect the change in height
27-
styles.height = "auto";
28-
styles.whiteSpace = "pre-line"
29-
styles.textTransform = "none"
14+
const styles = getPsuedoEditableElementStyles(props.editableElement, true);
3015

3116
return (
3217
<div
33-
className={
34-
classNames("visual-builder__pseudo-editable-element", visualBuilderStyles()["visual-builder__pseudo-editable-element"])
35-
}
18+
className={classNames(
19+
"visual-builder__pseudo-editable-element",
20+
visualBuilderStyles()["visual-builder__pseudo-editable-element"]
21+
)}
3622
data-testid="visual-builder__pseudo-editable-element"
3723
style={styles}
3824
>

‎src/visualBuilder/eventManager/useVariantsPostMessageEvent.ts‎

Lines changed: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,11 @@ interface VariantFieldsEvent {
1111
};
1212
};
1313
}
14+
interface RemoveVariantFieldsEvent {
15+
data: {
16+
onlyHighlighted?: boolean;
17+
};
18+
}
1419

1520
interface AudienceEvent {
1621
data: {
@@ -51,18 +56,29 @@ function addVariantFieldClass(
5156
});
5257
}
5358

54-
function removeVariantFieldClass(): void {
55-
const variantAndBaseFieldElements = document.querySelectorAll(
56-
".visual-builder__disabled-variant-field, .visual-builder__variant-field, .visual-builder__base-field"
57-
);
58-
variantAndBaseFieldElements.forEach((element) => {
59-
element.classList.remove(
60-
"visual-builder__disabled-variant-field",
61-
"visual-builder__variant-field",
62-
visualBuilderStyles()["visual-builder__variant-field"],
63-
"visual-builder__base-field"
59+
function removeVariantFieldClass(onlyHighlighted: boolean = false): void {
60+
if (onlyHighlighted) {
61+
const variantElements = document.querySelectorAll(
62+
`.${visualBuilderStyles()["visual-builder__variant-field"]}`
6463
);
65-
});
64+
variantElements.forEach((element) => {
65+
element.classList.remove(
66+
visualBuilderStyles()["visual-builder__variant-field"]
67+
);
68+
});
69+
} else {
70+
const variantAndBaseFieldElements = document.querySelectorAll(
71+
".visual-builder__disabled-variant-field, .visual-builder__variant-field, .visual-builder__base-field"
72+
);
73+
variantAndBaseFieldElements.forEach((element) => {
74+
element.classList.remove(
75+
"visual-builder__disabled-variant-field",
76+
"visual-builder__variant-field",
77+
visualBuilderStyles()["visual-builder__variant-field"],
78+
"visual-builder__base-field"
79+
);
80+
});
81+
}
6682
}
6783

6884
function setAudienceMode(mode: boolean): void {
@@ -106,8 +122,8 @@ export function useVariantFieldsPostMessageEvent(): void {
106122
);
107123
visualBuilderPostMessage?.on(
108124
VisualBuilderPostMessageEvents.REMOVE_VARIANT_FIELDS,
109-
() => {
110-
removeVariantFieldClass();
125+
(event: RemoveVariantFieldsEvent) => {
126+
removeVariantFieldClass(event?.data?.onlyHighlighted);
111127
}
112128
);
113129
}

‎src/visualBuilder/generators/generateToolbar.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,17 @@ import FieldLabelWrapperComponent from "../components/fieldLabelWrapper";
1515

1616
export function appendFocusedToolbar(
1717
eventDetails: VisualBuilderCslpEventDetails,
18-
focusedToolbarElement: HTMLDivElement
18+
focusedToolbarElement: HTMLDivElement,
19+
hideOverlay: () => void
1920
): void {
2021
appendFieldPathDropdown(eventDetails, focusedToolbarElement);
21-
appendFieldToolbar(eventDetails, focusedToolbarElement);
22+
appendFieldToolbar(eventDetails, focusedToolbarElement, hideOverlay);
2223
}
2324

2425
export function appendFieldToolbar(
2526
eventDetails: VisualBuilderCslpEventDetails,
26-
focusedToolbarElement: HTMLDivElement
27+
focusedToolbarElement: HTMLDivElement,
28+
hideOverlay: () => void
2729
): void {
2830
if (
2931
focusedToolbarElement.querySelector(
@@ -35,6 +37,7 @@ export function appendFieldToolbar(
3537
render(
3638
<FieldToolbarComponent
3739
eventDetails={eventDetails}
40+
hideOverlay={hideOverlay}
3841
/>,
3942
wrapper
4043
);

‎src/visualBuilder/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,8 @@ export class VisualBuilder {
179179
updateFocussedStateOnMutation(
180180
this.overlayWrapper,
181181
this.focusedToolbar,
182-
this.visualBuilderContainer
182+
this.visualBuilderContainer,
183+
this.resizeObserver
183184
);
184185
const emptyBlockParents = Array.from(
185186
document.querySelectorAll(

‎src/visualBuilder/listeners/mouseClick.ts‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ type AddFocusOverlayParams = Pick<
3535
type AddFocusedToolbarParams = Pick<
3636
EventListenerHandlerParams,
3737
"eventDetails" | "focusedToolbar"
38-
>;
38+
> & { hideOverlay: () => void };
3939

4040
function addOverlay(params: AddFocusOverlayParams) {
4141
if (!params.overlayWrapper || !params.editableElement) return;
@@ -53,7 +53,7 @@ export function addFocusedToolbar(params: AddFocusedToolbarParams): void {
5353

5454
if (!editableElement || !params.focusedToolbar) return;
5555

56-
appendFocusedToolbar(params.eventDetails, params.focusedToolbar);
56+
appendFocusedToolbar(params.eventDetails, params.focusedToolbar, params.hideOverlay);
5757
}
5858

5959
async function handleBuilderInteraction(
@@ -143,6 +143,14 @@ async function handleBuilderInteraction(
143143
addFocusedToolbar({
144144
eventDetails: eventDetails,
145145
focusedToolbar: params.focusedToolbar,
146+
hideOverlay: () => {
147+
hideOverlay({
148+
visualBuilderContainer: params.visualBuilderContainer,
149+
visualBuilderOverlayWrapper: params.overlayWrapper,
150+
focusedToolbar: params.focusedToolbar,
151+
resizeObserver: params.resizeObserver,
152+
});
153+
}
146154
});
147155

148156
const { content_type_uid, fieldPath, cslpValue } = fieldMetadata;

0 commit comments

Comments
 (0)