feat: add remove-diff listener to toggle highlight diff

.husky/pre-commit

@@ -1,6 +1,6 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-# npx ts-node --esm mustache.ts
+npx ts-node --esm mustache.ts
 git add .
 npx lint-staged

README.md

@@ -15,8 +15,19 @@ npm install @contentstack/live-preview-utils
 Alternatively, if you want to include the package directly in your website HTML code, use the following command:
 
 ```html
-<script src="https://unpkg.com/@contentstack/live-preview-utils@2.0.2/dist/legacy/index.js"></script>
+<script type='module'>
+     import ContentstackLivePreview from 'https://esm.sh/@contentstack/live-preview-utils@2.0.3';
+
+     ContentstackLivePreview.init({
+        stackDetails: {
+            apiKey: "your-stack-api-key",
+        },
+    });
+</script>
 ```
+> [!NOTE]
+> This step involves incorporating the package into your HTML code and initializing it, eliminating the need for re-initialization in the subsequent step.
+
 
 # Initializing the SDK
 
@@ -35,18 +46,6 @@ ContentstackLivePreview.init({
 });
 ```
 
-Alternatively, if you want to initialize the SDK directly inside the HTML tag, use the ContentstackLivePreview.init() method as follows:
-
-```html
-<script>
-    ContentstackLivePreview.init({
-        stackDetails: {
-            apiKey: "your-stack-api-key",
-        },
-    });
-</script>
-```
-
 
 # License
 

main.mustache

@@ -15,8 +15,19 @@ npm install @contentstack/live-preview-utils
 Alternatively, if you want to include the package directly in your website HTML code, use the following command:
 
 ```html
-<script src="https://unpkg.com/@contentstack/live-preview-utils@{{packageVersion}}/dist/index.js"></script>
+<script type='module'>
+     import ContentstackLivePreview from 'https://esm.sh/@contentstack/live-preview-utils@{{packageVersion}}';
+
+     ContentstackLivePreview.init({
+        stackDetails: {
+            apiKey: "your-stack-api-key",
+        },
+    });
+</script>
 ```
+> [!NOTE]
+> This step involves incorporating the package into your HTML code and initializing it, eliminating the need for re-initialization in the subsequent step.
+
 
 # Initializing the SDK
 
@@ -35,27 +46,6 @@ ContentstackLivePreview.init({
 });
 ```
 
-Alternatively, if you want to initialize the SDK directly inside the HTML tag, use the ContentstackLivePreview.init() method as follows:
-
-```html
-<script>
-    ContentstackLivePreview.init({
-        stackDetails: {
-            apiKey: "your-stack-api-key",
-        },
-    });
-</script>
-```
-
-# [Live Editing](https://www.contentstack.com/docs/developers/set-up-live-preview/set-up-live-preview-for-your-website/#live-editing-for-entries-optional-)
-
-Live Preview provides edit tags that allow you to edit your content in real-time. Live edit tags are identified as the data-cslp attribute within the HTML tags. The styles for the live edit tags are available in the @contentstack/live-preview-utils/dist/main.css file.
-
-To use live edit tags within your stack, you need to include them in your main index.js file as follows:
-
-```javascript
-import "@contentstack/live-preview-utils/dist/main.css";
-```
 
 # License
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@contentstack/live-preview-utils",
-    "version": "2.0.2",
+    "version": "2.0.3",
     "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.",
     "type": "module",
     "types": "dist/legacy/index.d.ts",

src/compare.ts

@@ -81,4 +81,26 @@ export function handleWebCompare() {
 
         mergeColors(`.cs-compare--${operation}`);
     });
+
+    postRobot.on("remove-diff", async () => {
+        // unwrap the cs-compare tags
+        const elements = Array.from(document.querySelectorAll("cs-compare"));
+        for (const element of elements) {
+            const parent = element.parentElement!;
+            while (element.firstChild) {
+                parent.insertBefore(element.firstChild, element);
+            }
+            parent.removeChild(element);
+        }
+        // remove classes cs-compare__void--added and cs-compare__void--removed
+        const voidElements = Array.from(
+            document.querySelectorAll(
+                ".cs-compare__void--added, .cs-compare__void--removed"
+            )
+        );
+        for (const element of voidElements) {
+            element.classList.remove("cs-compare__void--added");
+            element.classList.remove("cs-compare__void--removed");
+        }
+    });
 }