Merge pull request #451 from Syncfusion-Content/hotfix/hotfix-v26.1.35

DOCINFRA-2341_merged_using_automation

Author: SyncfusionBuild

ej2-react/document-editor/content-control.md

@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
 
 # Content control in React Document editor control
 
-Document Editor provides content control preservation support (i.e.) Content control present in the input document is preserved upon saving.
+Document Editor provides support for inserting, editing content controls.
 
 Content controls can be categorized based on its occurrence in a document as follows,
 
@@ -26,4 +26,76 @@ BlockContentControl: Among paragraphs and tables, as a child of a Body, HeaderFo
 * Drop-Down List and Combo Box
 * Picture
 
->Note: Content control with custom XML mapping of file type WordML is converted as normal Rich Text Content Control to provide lossless round-tripping upon saving.
+## Insert content control
+
+Content control can be inserted using [`insertContentControl`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor/#insertcontentcontrol) method in editor module.
+
+{% highlight ts %}
+//Insert Rich Text Content Control
+this.container.documentEditor.editor.insertContentControl('RichText');
+//Insert Rich Text Content Control with default sfdt string
+let sfdt = {"sections":[{"blocks":[{"inlines":[{"text": "Hello"}]}]}]};
+this.container.documentEditor.editor.insertContentControl('RichText', sfdt);
+
+//Insert Plain Text Content Control
+this.container.documentEditor.editor.insertContentControl('Text');
+//Insert Plain Text Content Control with default string
+this.container.documentEditor.editor.insertContentControl('Text', 'Hello World');
+
+//Insert CheckBox Content Control
+this.container.documentEditor.editor.insertContentControl('CheckBox');
+//Insert CheckBox Content Control with mention checked state
+this.container.documentEditor.editor.insertContentControl('CheckBox', true);
+
+//Insert ComboBox Content Control
+this.container.documentEditor.editor.insertContentControl('ComboBox');
+//Insert ComboBox Content Control with items
+this.container.documentEditor.editor.insertContentControl('ComboBox', 'One', ['One', 'Two', 'Three']);
+
+//Insert Date Content Control
+this.container.documentEditor.editor.insertContentControl('Date');
+//Insert Date Content Control
+this.container.documentEditor.editor.insertContentControl('Date', '01/01/2024');
+
+//Insert DropDownList Content Control
+this.container.documentEditor.editor.insertContentControl('DropDownList');
+//Insert DropDownList Content Control with items
+this.container.documentEditor.editor.insertContentControl('DropDownList', 'One', ['One', 'Two', 'Three']);
+
+//Insert Picture Content Control
+this.container.documentEditor.editor.insertContentControl('Picture');
+//Insert Picture Content Control with default image
+this.container.documentEditor.editor.insertContentControl('Picture', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADgSURBVEhLY3jx4sV/WuDBafCluXH/D6ydhlWObIMPLmn8/32KPBiD2OjyKAY7+zbDsX945/91azehiBWU9IPVgVwJMxSX4SgG65jXwrGVa+v/6TOXoojBDEZ2LQh/m676/+D+/XBzQJgsg0EY5GqQgSCDsYUz2QaDMCiosIUvCKMYDFKIjK9dvYrCB3kXJIaMkfUjY5JdDEpioCCAYZCFyGbAMFkGI0fcMDUYpAgZY4s8EEYWwxWBJLsYhJHFQIYjmwHDQ9xgkGEwDCp0QAYji8EMRhYjymBq4lGDofjFfwCV5AGEIf9DQQAAAABJRU5ErkJggg==');
+{% endhighlight %}
+
+## Import content control properties
+
+Content control properties can be set using the [`ContentControlInfo`](https://ej2.syncfusion.com/react/documentation/api/document-editor/contentControlInfo/) and import it using [`importContentControlData`](https://ej2.syncfusion.com/react/documentation/api/document-editor/#importcontentcontroldata)
+
+{% highlight ts %}
+let data: ContentControlInfo[] = [];
+let contentControlData: ContentControlInfo = { title: placeHolderPrefix + 'Name', tag: '', value: 'John', canDelete: false, canEdit: false, type: 'RichText' };
+data.push(contentControlData);
+this.container.documentEditor.importContentControlData(data);
+{% endhighlight %}
+
+## Export content control properties
+
+Content control properties can be exported using the [`exportContentControlData`](https://ej2.syncfusion.com/react/documentation/api/document-editor/#exportcontentcontroldata)
+
+{% highlight ts %}
+let contentControlInfos: ContentControlInfo[] = this.container.documentEditor.exportContentControlData();
+{% endhighlight %}
+
+## Reset content control
+
+Content control properties can be reset using the [`resetcontentcontroldata`](https://ej2.syncfusion.com/react/documentation/api/document-editor/#resetcontentcontroldata)
+
+{% highlight ts %}
+let data: ContentControlInfo[] = [];
+let contentControlData: ContentControlInfo = { title: placeHolderPrefix + 'Name', tag: '', value: 'John', canDelete: false, canEdit: false, type: 'RichText' };
+data.push(contentControlData);
+this.container.documentEditor.resetContentControlData(data);
+{% endhighlight %}
+
+>Note: Content control with custom XML mapping of file type WordML is converted as normal Rich Text Content Control to provide lossless round-tripping upon saving.