Integrated latest changes at 07-04-2025 7:30:22 PM

Author: SyncfusionBuild

ej2-react/block-editor/appearance.md

@@ -16,28 +16,34 @@ The Block Editor component provides various appearance customization options to
 
 You can specify the width and height for the Block Editor control using the [width](../api/blockeditor/#width) and [height](../api/blockeditor/#height) properties.
 
+{% raw %}
 ```typescript
 <BlockEditorComponent width="100%" height="80vh"></BlockEditorComponent>
 
 // Or with specific pixel values
 <BlockEditorComponent width="800px" height="500px"></BlockEditorComponent>
 ```
+{% endraw %}
 
 ## Setting readonly mode
 
 You can utilize the [readonly](../api/blockeditor/#readonly) property to control whether the editor is in read-only mode. When set to `true`, users cannot edit the content but can still view it.
 
+{% raw %}
 ```typescript
 <BlockEditorComponent readonly={true}></BlockEditorComponent>
 ```
+{% endraw %}
 
 ## Customization using CSS Class
 
 You can use the [cssClass](../api/blockeditor/#cssclass) property to customize the appearance of the Block Editor control.
 
+{% raw %}
 ```typescript
 <BlockEditorComponent width="600px" height="400px" cssClass="custom-editor-theme"></BlockEditorComponent>
 ```
+{% endraw %}
 
 Below example demonstrates the usage of readonly and cssClass properties.
 

ej2-react/block-editor/events.md

@@ -16,118 +16,148 @@ The Block Editor component provides a comprehensive set of events that allow you
 
 The [created](../api/blockeditor/#created) event is triggered when the Block Editor component is successfully initialized and ready for use. This event is useful for performing setup operations or initializing additional features after the editor is created.
 
+{% raw %}
 ```typescript
 <BlockEditorComponent created={handleCreated}></BlockEditorComponent>
 ```
+{% endraw %}
 
 ## ContentChanged
 
 The [contentChanged](../api/blockeditor/#contentchanged) event is triggered whenever the content within the editor is modified. This includes content additions, deletions, or any structural modifications to the document.
 
+{% raw %}
 ```typescript
 <BlockEditorComponent contentChanged={handleContentChanged}></BlockEditorComponent>
 ```
+{% endraw %}
 
 ## SelectionChanged
 
 The [selectionChanged](../api/blockeditor/#selectionchanged) event is triggered when the user's text selection changes within the editor. This can be useful for updating UI elements based on the current selection.
 
+{% raw %}
 ```typescript
 <BlockEditorComponent selectionChanged={handleSelectionChanged}></BlockEditorComponent>
 ```
+{% endraw %}
 
 ## UndoRedoPerformed
 
 The [undoRedoPerformed](../api/blockeditor/#undoredoperformed) event is triggered when an undo or redo operation is executed. This event provides information about the action performed and the state before and after the operation.
 
+{% raw %}
 ```typescript
 <BlockEditorComponent undoRedoPerformed={handleUndoRedoPerformed}></BlockEditorComponent>
 ```
+{% endraw %}
 
 ## BlockAdded
 
 The [blockAdded](../api/blockeditor/#blockadded) event is triggered when a new block is added to the editor. This includes blocks added through user interaction, paste operations, or programmatic insertion.
 
+{% raw %}
 ```typescript
 <BlockEditorComponent blockAdded={handleBlockAdded}></BlockEditorComponent>
 ```
+{% endraw %}
 
 ## BlockRemoved
 
 The [blockRemoved](../api/blockeditor/#blockremoved) event is triggered when a block is removed from the editor. This can occur through user deletion, cut operations, or programmatic removal.
 
+{% raw %}
 ```typescript
 <BlockEditorComponent blockRemoved={handleBlockRemoved}></BlockEditorComponent>
 ```
+{% endraw %}
 
 ## BlockMoved
 
 The [blockMoved](../api/blockeditor/#blockmoved) event is triggered when blocks are moved from one position to another within the editor. This includes drag-and-drop operations, through keyboard shortcuts or programmatic block reordering.
 
+{% raw %}
 ```typescript
 <BlockEditorComponent blockMoved={handleBlockMoved}></BlockEditorComponent>
 ```
+{% endraw %}
 
 ## BlockDragStart
 
 The [blockDragStart](../api/blockeditor/#blockdragstart) event is triggered at the beginning of a block drag operation, providing information about the blocks being dragged and their initial position.
 
+{% raw %}
 ```typescript
 <BlockEditorComponent blockDragStart={handleBlockDragStart}></BlockEditorComponent>
 ```
+{% endraw %}
 
 ## BlockDrag
 
 The [blockDrag](../api/blockeditor/#blockdrag) event is triggered during a drag operation, providing information about the blocks being dragged and their current position.
 
+{% raw %}
 ```typescript
 <BlockEditorComponent blockDrag={handleBlockDrag}></BlockEditorComponent>
 ```
+{% endraw %}
 
 ## BlockDrop
 
 The [blockDrop](../api/blockeditor/#blockdrop) event is triggered when blocks are successfully dropped at their destination during a drag-and-drop operation.
 
+{% raw %}
 ```typescript
 <BlockEditorComponent blockDrop={handleBlockDrop}></BlockEditorComponent>
 ```
+{% endraw %}
 
 ## Focus
 
 The [focus](../api/blockeditor/#focus) event is triggered when the editor gains focus. This is useful for updating UI states and managing editor interactions.
 
+{% raw %}
 ```typescript
 <BlockEditorComponent focus={handleFocus}></BlockEditorComponent>
 ```
+{% endraw %}
 
 ## Blur
 
 The [blur](../api/blockeditor/#blur) event is triggered when the editor loses focus. This is commonly used for auto-saving content or hiding UI elements.
 
+{% raw %}
 ```typescript
 <BlockEditorComponent blur={handleBlur}></BlockEditorComponent>
 ```
+{% endraw %}
 
 ## KeyActionExecuted
 
 The [keyActionExecuted](../api/blockeditor/#keyactionexecuted) event is triggered when a keyboard shortcut is executed. This provides information about the key combination used and the corresponding action performed.
 
+{% raw %}
 ```typescript
 <BlockEditorComponent keyActionExecuted={handleKeyActionExecuted}></BlockEditorComponent>
 ```
+{% endraw %}
 
 ## BeforePaste
 
 The [beforePaste](../api/blockeditor/#beforepaste) event is triggered before content is pasted into the editor. This event allows you to modify or cancel the paste operation.
 
+{% raw %}
 ```typescript
 <BlockEditorComponent beforePaste={handleBeforePaste}></BlockEditorComponent>
 ```
+{% endraw %}
 
 ## AfterPaste
 
 The [afterPaste](../api/blockeditor/#afterpaste) event is triggered after content has been successfully pasted into the editor. This is useful for post-processing pasted content or updating related UI elements.
 
+{% raw %}
 ```typescript
 <BlockEditorComponent afterPaste={handleAfterPaste}></BlockEditorComponent>
-```
+```
+{% endraw %}

ej2-react/block-editor/getting-started.md

@@ -71,6 +71,7 @@ Now, you can start adding Block Editor component in the application. For getting
 
 `[Class-component]`
 
+{% raw %}
 ```ts
 
 import { BlockEditorComponent } from '@syncfusion/ej2-react-blockeditor';
@@ -88,9 +89,11 @@ export default class App extends React.Component<{}, {}> {
 
 ReactDOM.render(<App />, document.getElementById('blockeditor'));
 ```
+{% endraw %}
 
 `[Functional-component]`
 
+{% raw %}
 ```ts
 import { BlockEditorComponent } from '@syncfusion/ej2-react-blockeditor';
 import * as React from 'react';
@@ -105,6 +108,7 @@ function App() {
 
 ReactDOM.render(<App />, document.getElementById('blockeditor'));
 ```
+{% endraw %}
 
 ## Adding CSS Reference
 

ej2-react/block-editor/keyboard-shortcuts.md

@@ -79,6 +79,8 @@ For other operations, you can customize the keyboard shortcuts by configuring th
 
 In the below example, the shortcut for bold formatting is changed to <kbd>Alt</kbd> + <kbd>B</kbd> and for italic formatting to <kbd>Alt</kbd> + <kbd>I</kbd>.
 
+{% raw %}
 ```typescript
 <BlockEditorComponent keyConfig={{ bold: 'alt+b', italic: 'alt+i' }}></BlockEditorComponent>
-```
+```
+{% endraw %}