Integrated latest changes at 11-07-2024 4:30:29 PM

SyncfusionBuild · SyncfusionBuild · commit a162ec8989e0 · 2024-11-07T17:10:10.000+05:30
diff --git a/ej2-react-toc.html b/ej2-react-toc.html
@@ -3092,7 +3092,7 @@ <h1>Summary of Predefined Dialogs component</h1>
 </ul>
 </li> <li>Release Notes
                 <ul>
-				<li>2024 Volume 3 - 27.*<ul><li>Weekly Release<ul><li><a href="/ej2-react/release-notes/27.1.58">27.1.58</a></li><li><a href="/ej2-react/release-notes/27.1.57">27.1.57</a></li><li><a href="/ej2-react/release-notes/27.1.56">27.1.56</a></li><li><a href="/ej2-react/release-notes/27.1.55">27.1.55</a></li><li><a href="/ej2-react/release-notes/27.1.53">27.1.53</a></li><li><a href="/ej2-react/release-notes/27.1.52">27.1.52</a></li><li><a href="/ej2-react/release-notes/27.1.51">27.1.51</a></li><li><a href="/ej2-react/release-notes/27.1.50">27.1.50</a></li></ul></li><li><a href="/ej2-react/release-notes/27.1.48">27.1.48 Main Release</a></li></ul></li><li>2024 Volume 2 - 26.*<ul><li>Weekly Release<ul><li><a href="/ej2-react/release-notes/26.2.14">26.2.14</a></li><li><a href="/ej2-react/release-notes/26.2.13">26.2.13</a></li><li><a href="/ej2-react/release-notes/26.2.12">26.2.12</a></li><li><a href="/ej2-react/release-notes/26.2.11">26.2.11</a></li><li><a href="/ej2-react/release-notes/26.2.10">26.2.10</a></li><li><a href="/ej2-react/release-notes/26.2.9">26.2.9</a></li><li><a href="/ej2-react/release-notes/26.2.8">26.2.8</a></li><li><a href="/ej2-react/release-notes/26.2.7">26.2.7</a></li><li><a href="/ej2-react/release-notes/26.2.5">26.2.5</a></li><li><a href="/ej2-react/release-notes/26.1.42">26.1.42</a></li><li><a href="/ej2-react/release-notes/26.1.41">26.1.41</a></li><li><a href="/ej2-react/release-notes/26.1.40">26.1.40</a></li><li><a href="/ej2-react/release-notes/26.1.39">26.1.39</a></li><li><a href="/ej2-react/release-notes/26.1.38">26.1.38</a></li></ul></li><li><a href="/ej2-react/release-notes/26.2.4">26.2.4 Service Pack Release</a></li><li><a href="/ej2-react/release-notes/26.1.35">26.1.35 Main Release</a></li></ul></li><li>2024 Volume 1 - 25.*<ul><li>Weekly Release<ul><li><a href="/ej2-react/release-notes/25.2.7">25.2.7</a></li><li><a href="/ej2-react/release-notes/25.2.6">25.2.6</a></li><li><a href="/ej2-react/release-notes/25.2.5">25.2.5</a></li><li><a href="/ej2-react/release-notes/25.2.4">25.2.4</a></li><li><a href="/ej2-react/release-notes/25.1.42">25.1.42</a></li><li><a href="/ej2-react/release-notes/25.1.41">25.1.41</a></li><li><a href="/ej2-react/release-notes/25.1.40">25.1.40</a></li><li><a href="/ej2-react/release-notes/25.1.39">25.1.39</a></li><li><a href="/ej2-react/release-notes/25.1.38">25.1.38</a></li><li><a href="/ej2-react/release-notes/25.1.37">25.1.37</a></li></ul></li><li><a href="/ej2-react/release-notes/25.2.3">25.2.3 Service Pack Release</a></li><li><a href="/ej2-react/release-notes/25.1.35">25.1.35 Main Release</a></li></ul></li>
+				<li>2024 Volume 3 - 27.*<ul><li>Weekly Release<ul><li><a href="/ej2-react/release-notes/27.1.58">27.1.58</a></li><li><a href="/ej2-react/release-notes/27.1.57">27.1.57</a></li><li><a href="/ej2-react/release-notes/27.1.56">27.1.56</a></li><li><a href="/ej2-react/release-notes/27.1.55">27.1.55</a></li><li><a href="/ej2-react/release-notes/27.1.53">27.1.53</a></li><li><a href="/ej2-react/release-notes/27.1.52">27.1.52</a></li><li><a href="/ej2-react/release-notes/27.1.51">27.1.51</a></li><li><a href="/ej2-react/release-notes/27.1.50">27.1.50</a></li></ul></li><li><a href="/ej2-react/release-notes/27.2.2">27.2.2 Service Pack Release</a></li><li><a href="/ej2-react/release-notes/27.1.48">27.1.48 Main Release</a></li></ul></li><li>2024 Volume 2 - 26.*<ul><li>Weekly Release<ul><li><a href="/ej2-react/release-notes/26.2.14">26.2.14</a></li><li><a href="/ej2-react/release-notes/26.2.13">26.2.13</a></li><li><a href="/ej2-react/release-notes/26.2.12">26.2.12</a></li><li><a href="/ej2-react/release-notes/26.2.11">26.2.11</a></li><li><a href="/ej2-react/release-notes/26.2.10">26.2.10</a></li><li><a href="/ej2-react/release-notes/26.2.9">26.2.9</a></li><li><a href="/ej2-react/release-notes/26.2.8">26.2.8</a></li><li><a href="/ej2-react/release-notes/26.2.7">26.2.7</a></li><li><a href="/ej2-react/release-notes/26.2.5">26.2.5</a></li><li><a href="/ej2-react/release-notes/26.1.42">26.1.42</a></li><li><a href="/ej2-react/release-notes/26.1.41">26.1.41</a></li><li><a href="/ej2-react/release-notes/26.1.40">26.1.40</a></li><li><a href="/ej2-react/release-notes/26.1.39">26.1.39</a></li><li><a href="/ej2-react/release-notes/26.1.38">26.1.38</a></li></ul></li><li><a href="/ej2-react/release-notes/26.2.4">26.2.4 Service Pack Release</a></li><li><a href="/ej2-react/release-notes/26.1.35">26.1.35 Main Release</a></li></ul></li><li>2024 Volume 1 - 25.*<ul><li>Weekly Release<ul><li><a href="/ej2-react/release-notes/25.2.7">25.2.7</a></li><li><a href="/ej2-react/release-notes/25.2.6">25.2.6</a></li><li><a href="/ej2-react/release-notes/25.2.5">25.2.5</a></li><li><a href="/ej2-react/release-notes/25.2.4">25.2.4</a></li><li><a href="/ej2-react/release-notes/25.1.42">25.1.42</a></li><li><a href="/ej2-react/release-notes/25.1.41">25.1.41</a></li><li><a href="/ej2-react/release-notes/25.1.40">25.1.40</a></li><li><a href="/ej2-react/release-notes/25.1.39">25.1.39</a></li><li><a href="/ej2-react/release-notes/25.1.38">25.1.38</a></li><li><a href="/ej2-react/release-notes/25.1.37">25.1.37</a></li></ul></li><li><a href="/ej2-react/release-notes/25.2.3">25.2.3 Service Pack Release</a></li><li><a href="/ej2-react/release-notes/25.1.35">25.1.35 Main Release</a></li></ul></li>
 				<li>2023 Volume 4 - 24.*<ul><li>Weekly Release<ul><li><a href="/ej2-react/release-notes/24.2.9">24.2.9</a></li><li><a href="/ej2-react/release-notes/24.2.8">24.2.8</a></li><li><a href="/ej2-react/release-notes/24.2.7">24.2.7</a></li><li><a href="/ej2-react/release-notes/24.2.6">24.2.6</a></li><li><a href="/ej2-react/release-notes/24.2.5">24.2.5</a></li><li><a href="/ej2-react/release-notes/24.2.4">24.2.4</a></li><li><a href="/ej2-react/release-notes/24.1.47">24.1.47</a></li><li><a href="/ej2-react/release-notes/24.1.46">24.1.46</a></li><li><a href="/ej2-react/release-notes/24.1.45">24.1.45</a></li><li><a href="/ej2-react/release-notes/24.1.44">24.1.44</a></li><li><a href="/ej2-react/release-notes/24.1.43">24.1.43</a></li></ul></li><li><a href="/ej2-react/release-notes/24.2.3">24.2.3 Service Pack Release</a></li><li><a href="/ej2-react/release-notes/24.1.41">24.1.41 Main Release</a></li></ul></li>
 				<li>2023 Volume 3 - 23.*<ul><li> Weekly Release<ul><li><a href="/ej2-react/release-notes/23.2.7">23.2.7</a></li><li><a href="/ej2-react/release-notes/23.2.6">23.2.6</a></li><li><a href="/ej2-react/release-notes/23.2.5">23.2.5</a></li><li><a href="/ej2-react/release-notes/23.1.44">23.1.44</a></li><li><a href="/ej2-react/release-notes/23.1.43">23.1.43</a></li><li><a href="/ej2-react/release-notes/23.1.42">23.1.42</a></li><li><a href="/ej2-react/release-notes/23.1.41">23.1.41</a></li><li><a href="/ej2-react/release-notes/23.1.40">23.1.40</a></li><li><a href="/ej2-react/release-notes/23.1.39">23.1.39</a></li><li><a href="/ej2-react/release-notes/23.1.38">23.1.38</a></li></ul></li><li><a href="/ej2-react/release-notes/23.2.4">23.2.4 Service Pack Release</a></li><li><a href="/ej2-react/release-notes/23.1.36">23.1.36 Main Release</a></li></ul></li>
 				<li>2023 Volume 2 - 22.*
diff --git a/ej2-react/Release-notes/27.2.2.md b/ej2-react/Release-notes/27.2.2.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for React Service Pack Release Release Notes  
+description: Essential Studio for React Service Pack Release Release Notes  
+platform: ej2-react
+documentation: ug
+---
+
+# Essential Studio for React  Release Notes  
+
+{% include release-info.html date="November 12, 2024"  version="v27.2.2" %}
+
+{% directory path: _includes/release-notes/v27.2.2 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
diff --git a/ej2-react/code-snippet/diagram/commands/customCommand-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/commands/customCommand-cs1/app/index.jsx
@@ -1,3 +1,5 @@
+{% raw %}
+
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { DiagramComponent, Keys, KeyModifiers } from "@syncfusion/ej2-react-diagrams";
@@ -65,3 +67,5 @@ function App() {
 
 const root = ReactDOM.createRoot(document.getElementById('diagram'));
 root.render(<App />);
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/diagram/commands/customCommand-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/commands/customCommand-cs1/app/index.tsx
@@ -1,3 +1,5 @@
+{% raw %}
+
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { DiagramComponent, Keys, KeyModifiers,NodeModel } from "@syncfusion/ej2-react-diagrams";
@@ -65,3 +67,5 @@ function App() {
 
 const root = ReactDOM.createRoot(document.getElementById('diagram'));
 root.render(<App />);
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/diagram/commands/modifyCommand-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/commands/modifyCommand-cs1/app/index.jsx
@@ -1,3 +1,5 @@
+{% raw %}
+
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { DiagramComponent, Keys, KeyModifiers } from "@syncfusion/ej2-react-diagrams";
@@ -74,3 +76,5 @@ function App() {
 
 const root = ReactDOM.createRoot(document.getElementById('diagram'));
 root.render(<App />);
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/diagram/commands/modifyCommand-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/commands/modifyCommand-cs1/app/index.tsx
@@ -1,3 +1,5 @@
+{% raw %}
+
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { DiagramComponent, Keys,NodeModel, KeyModifiers } from "@syncfusion/ej2-react-diagrams";
@@ -74,3 +76,5 @@ function App() {
 
 const root = ReactDOM.createRoot(document.getElementById('diagram'));
 root.render(<App />);
+
+{% endraw %}
diff --git a/ej2-react/code-snippet/diagram/pagesettings/es5BGImage-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/pagesettings/es5BGImage-cs1/app/index.jsx
@@ -1,3 +1,4 @@
+{% raw %}
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
@@ -20,4 +21,5 @@ function App() {
         }}/>);
 }
 const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(<App />);
+root.render(<App />);
+{% endraw %}
diff --git a/ej2-react/code-snippet/diagram/pagesettings/es5BGImage-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/pagesettings/es5BGImage-cs1/app/index.tsx
@@ -1,3 +1,4 @@
+{% raw %}
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {
@@ -30,4 +31,5 @@ function App() {
   );
 }
 const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(<App />);
+root.render(<App />);
+{% endraw %}
diff --git a/ej2-react/code-snippet/diagram/pagesettings/es5FitOption-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/pagesettings/es5FitOption-cs1/app/index.jsx
@@ -1,3 +1,4 @@
+{% raw %}
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
@@ -31,4 +32,5 @@ function App() {
     }}/>);
 }
 const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(<App />);
+root.render(<App />);
+{% endraw %}
diff --git a/ej2-react/code-snippet/diagram/pagesettings/es5FitOption-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/pagesettings/es5FitOption-cs1/app/index.tsx
@@ -1,3 +1,4 @@
+{% raw %}
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {
@@ -43,4 +44,5 @@ function App() {
   );
 }
 const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(<App />);
+root.render(<App />);
+{% endraw %}
diff --git a/ej2-react/code-snippet/diagram/pagesettings/es5boundaryconstraints-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/pagesettings/es5boundaryconstraints-cs1/app/index.jsx
@@ -1,3 +1,4 @@
+{% raw %}
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
@@ -46,4 +47,5 @@ function App() {
         }}/>);
 }
 const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(<App />);
+root.render(<App />);
+{% endraw %}
diff --git a/ej2-react/code-snippet/diagram/pagesettings/es5boundaryconstraints-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/pagesettings/es5boundaryconstraints-cs1/app/index.tsx
@@ -1,3 +1,4 @@
+{% raw %}
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {
@@ -62,4 +63,5 @@ function App() {
   );
 }
 const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(<App />);
+root.render(<App />);
+{% endraw %}
diff --git a/ej2-react/code-snippet/diagram/pagesettings/es5multiplepage-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/pagesettings/es5multiplepage-cs1/app/index.jsx
@@ -1,3 +1,4 @@
+{% raw %}
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
@@ -40,4 +41,5 @@ function App() {
         }}/>);
 }
 const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(<App />);
+root.render(<App />);
+{% endraw %}
diff --git a/ej2-react/code-snippet/diagram/pagesettings/es5multiplepage-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/pagesettings/es5multiplepage-cs1/app/index.tsx
@@ -1,3 +1,4 @@
+{% raw %}
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {
@@ -54,4 +55,5 @@ function App() {
   );
 }
 const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(<App />);
+root.render(<App />);
+{% endraw %}
diff --git a/ej2-react/code-snippet/diagram/pagesettings/es5pagesettings-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/pagesettings/es5pagesettings-cs1/app/index.tsx
@@ -1,3 +1,4 @@
+{% raw %}
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {
@@ -61,4 +62,5 @@ function App() {
   );
 }
 const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(<App />);
+root.render(<App />);
+{% endraw %}
diff --git a/ej2-react/code-snippet/diagram/pagesettings/es5pagesettings-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/pagesettings/es5pagesettings-cs2/app/index.jsx
@@ -1,3 +1,4 @@
+{% raw %}
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
@@ -44,4 +45,5 @@ function App() {
         }}/>);
 }
 const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(<App />);
+root.render(<App />);
+{% endraw %}
diff --git a/ej2-react/code-snippet/diagram/pagesettings/es5pagesettings-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/pagesettings/es5pagesettings-cs2/app/index.tsx
@@ -1,3 +1,4 @@
+{% raw %}
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {
@@ -56,4 +57,5 @@ function App() {
   );
 }
 const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(<App />);
+root.render(<App />);
+{% endraw %}
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs1/app/index.tsx
@@ -1,3 +1,4 @@
+{% raw %}
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {
@@ -62,4 +63,5 @@ function App() {
   );
 }
 const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(<App />);
+root.render(<App />);
+{% endraw %}
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs2/app/index.jsx
@@ -1,3 +1,4 @@
+{% raw %}
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { DiagramComponent, DiagramTools } from "@syncfusion/ej2-react-diagrams";
@@ -25,4 +26,5 @@ function App() {
         scrollChange={scrollChange} />);
 }
 const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(<App />);
+root.render(<App />);
+{% endraw %}
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs2/app/index.tsx
@@ -1,3 +1,4 @@
+{% raw %}
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {
@@ -39,4 +40,5 @@ function App() {
   );
 }
 const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(<App />);
+root.render(<App />);
+{% endraw %}
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs3/app/index.jsx b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs3/app/index.jsx
@@ -1,3 +1,4 @@
+{% raw %}
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
@@ -13,4 +14,5 @@ function App() {
         }}/>);
 }
 const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(<App />);
+root.render(<App />);
+{% endraw %}
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs3/app/index.tsx b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs3/app/index.tsx
@@ -1,3 +1,4 @@
+{% raw %}
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {
@@ -25,4 +26,5 @@ function App() {
   );
 }
 const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(<App />);
+root.render(<App />);
+{% endraw %}
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs4/app/index.jsx b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs4/app/index.jsx
@@ -1,3 +1,4 @@
+{% raw %}
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { Rect, DiagramComponent } from "@syncfusion/ej2-react-diagrams";
@@ -40,4 +41,5 @@ function App() {
     </div>);
 }
 const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(<App />);
+root.render(<App />);
+{% endraw %}
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs4/app/index.tsx b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs4/app/index.tsx
@@ -1,3 +1,4 @@
+{% raw %}
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {
@@ -54,4 +55,5 @@ function App() {
   );
 }
 const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(<App />);
+root.render(<App />);
+{% endraw %}
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs5/app/index.jsx b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs5/app/index.jsx
@@ -1,3 +1,4 @@
+{% raw %}
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { DiagramComponent, UndoRedo, Inject } from "@syncfusion/ej2-react-diagrams";
@@ -27,4 +28,5 @@ function App() {
     </DiagramComponent>);
 }
 const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(<App />);
+root.render(<App />);
+{% endraw %}
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs5/app/index.tsx b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs5/app/index.tsx
@@ -1,3 +1,4 @@
+{% raw %}
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {
@@ -40,4 +41,5 @@ function App() {
   );
 }
 const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(<App />);
+root.render(<App />);
+{% endraw %}
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs6/app/index.jsx b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs6/app/index.jsx
@@ -1,3 +1,4 @@
+{% raw %}
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { DiagramComponent, UndoRedo, Inject } from "@syncfusion/ej2-react-diagrams";
@@ -18,4 +19,5 @@ function App() {
     </DiagramComponent>);
 }
 const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(<App />);
+root.render(<App />);
+{% endraw %}
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs6/app/index.tsx b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs6/app/index.tsx
@@ -1,3 +1,4 @@
+{% raw %}
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {
@@ -31,4 +32,5 @@ function App() {
   );
 }
 const root = ReactDOM.createRoot(document.getElementById('diagram'));
-root.render(<App />);
+root.render(<App />);
+{% endraw %}
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5CurrentEntry-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/undoredo/es5CurrentEntry-cs1/app/index.jsx
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5CurrentEntry-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/undoredo/es5CurrentEntry-cs1/app/index.tsx
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5HistoryChange-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/undoredo/es5HistoryChange-cs1/app/index.jsx
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5HistoryChange-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/undoredo/es5HistoryChange-cs1/app/index.tsx
diff --git a/ej2-react/code-snippet/diagram/undoredo/groupAction-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/undoredo/groupAction-cs1/app/index.jsx
diff --git a/ej2-react/code-snippet/diagram/undoredo/groupAction-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/undoredo/groupAction-cs1/app/index.tsx
diff --git a/ej2-react/diagram/tools.md b/ej2-react/diagram/tools.md
