diff --git a/Document-Processing/Word/Word-Processor/react/how-to/customize-context-menu.md b/Document-Processing/Word/Word-Processor/react/how-to/customize-context-menu.md index c3a2cf1ae3..eb421cbd13 100644 --- a/Document-Processing/Word/Word-Processor/react/how-to/customize-context-menu.md +++ b/Document-Processing/Word/Word-Processor/react/how-to/customize-context-menu.md @@ -1,22 +1,22 @@ --- layout: post -title: Customize context menu in React Document editor component | Syncfusion -description: Learn here all about Customize context menu in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more. -control: Customize context menu +title: Customize context menu in React DOCX Editor component | Syncfusion +description: Learn how to customize the context menu in the Syncfusion React Document Editor component by adding custom menu items and handling selection events. +control: Customize Context Menu platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Customize context menu in React Document editor component +# Customize Context Menu in React Document Editor component -## How to customize context menu in Document Editor +## How to Customize Context Menu in the Document Editor -[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) allows you to add custom option in context menu. It can be achieved by using the [`addCustomMenu()`](https://ej2.syncfusion.com/react/documentation/api/document-editor/contextmenu#addcustommenu) method and custom action is defined using the [`customContextMenuSelect`](https://ej2.syncfusion.com/react/documentation/api/document-editor/customContentMenuEventArgs/) +[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) allows you to add custom options to the context menu. Use the [`addCustomMenu()`](https://ej2.syncfusion.com/react/documentation/api/document-editor/contextmenu#addcustommenu) method to add a custom option, and handle the selection with the [`customContextMenuSelect`](https://ej2.syncfusion.com/react/documentation/api/document-editor/customContentMenuEventArgs) event. ### Add Custom Option -The following code shows how to add custom option in context menu. +The following code shows how to add a custom option to the context menu. ```ts import { createRoot } from 'react-dom/client'; @@ -25,7 +25,6 @@ import * as React from 'react'; import { MenuItemModel } from '@syncfusion/ej2-navigations'; import { DocumentEditorContainerComponent, - CustomToolbarItemModel, Toolbar, } from '@syncfusion/ej2-react-documenteditor'; DocumentEditorContainerComponent.Inject(Toolbar); @@ -80,17 +79,19 @@ createRoot(document.getElementById('sample')).render(); ``` -> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. +N> 1. The Web Service link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` used in the `serviceUrl` property is intended solely for demonstration and evaluation purposes. +N> 2. For production deployment, please host your own Web Service with your required server configurations. +N> 3. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own Web Service and use it for the `serviceUrl` property. -### Customize custom option in context menu +### Customize Custom Option in Context Menu -Document Editor allows you to customize the added custom option and also to hide/show default context menu. +The Document Editor allows you to customize an added custom option and also to hide or show default context menu items. -#### Hide default context menu items +#### Hide Default Context Menu Items -Using [`addCustomMenu()`](https://ej2.syncfusion.com/react/documentation/api/document-editor/contextmenu#addcustommenu) method, you can hide the default context menu. By setting second parameter as true. +Using the [`addCustomMenu()`](https://ej2.syncfusion.com/react/documentation/api/document-editor/contextmenu#addcustommenu) method, you can replace the default context menu by setting the second parameter to `true`. -The following code shows how to hide default context menu and add custom option in context menu. +The following code shows how to replace the default context menu and add a custom option in the context menu. ```ts import { createRoot } from 'react-dom/client'; @@ -99,7 +100,6 @@ import * as React from 'react'; import { MenuItemModel } from '@syncfusion/ej2-navigations'; import { DocumentEditorContainerComponent, - CustomToolbarItemModel, Toolbar, } from '@syncfusion/ej2-react-documenteditor'; DocumentEditorContainerComponent.Inject(Toolbar); @@ -140,11 +140,13 @@ createRoot(document.getElementById('sample')).render(); ``` -> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. +N> 1. The Web Service link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` used in the `serviceUrl` property is intended solely for demonstration and evaluation purposes. +N> 2. For production deployment, please host your own Web Service with your required server configurations. +N> 3. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own Web Service and use it for the `serviceUrl` property. -#### Customize added context menu items +#### Customize Added Context Menu Items -The following code shows how to hide/show added custom option in context menu using the [`customContextMenuBeforeOpen`](https://ej2.syncfusion.com/react/documentation/api/document-editor/beforeOpenCloseCustomContentMenuEventArgs/). +The following code shows how to show or hide an added custom option in the context menu using the [`customContextMenuBeforeOpen`](https://ej2.syncfusion.com/react/documentation/api/document-editor/beforeOpenCloseCustomContentMenuEventArgs) event. ```ts import { createRoot } from 'react-dom/client'; @@ -153,7 +155,6 @@ import * as React from 'react'; import { MenuItemModel } from '@syncfusion/ej2-navigations'; import { DocumentEditorContainerComponent, - CustomToolbarItemModel, Toolbar, } from '@syncfusion/ej2-react-documenteditor'; DocumentEditorContainerComponent.Inject(Toolbar); @@ -216,9 +217,11 @@ createRoot(document.getElementById('sample')).render(); ``` -> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. +N> 1. The Web Service link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` used in the `serviceUrl` property is intended solely for demonstration and evaluation purposes. +N> 2. For production deployment, please host your own Web Service with your required server configurations. +N> 3. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own Web Service and use it for the `serviceUrl` property. -The following is the output of custom context menu with customization. +The following is the output of the custom context menu with customization. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -234,13 +237,15 @@ The following is the output of custom context menu with customization. {% previewsample "/document-processing/code-snippet/document-editor/react/customize-context-menu-cs1" %} -> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. +N> 1. The Web Service link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` used in the `serviceUrl` property is intended solely for demonstration and evaluation purposes. +N> 2. For production deployment, please host your own Web Service with your required server configurations. +N> 3. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own Web Service and use it for the `serviceUrl` property. -#### Customize Context Menu with sub-menu items - -Document Editor allows you to customize the Context Menu with sub-menu items. It can be achieved by using the [`addCustomMenu()`](https://ej2.syncfusion.com/react/documentation/api/document-editor/contextmenu#addcustommenu) method. +#### Customize Context Menu with Sub-Menu Items + +The Document Editor allows you to customize the context menu with sub-menu items. It can be achieved by using the [`addCustomMenu()`](https://ej2.syncfusion.com/react/documentation/api/document-editor/contextmenu#addcustommenu) method. -The following code shows how to add a sub items in the custom option in context menu in Document Editor Container. +The following code shows how to add sub-items inside a custom context menu option in the Document Editor container. ```ts import * as ReactDOM from 'react-dom'; @@ -299,7 +304,9 @@ ReactDOM.render(, document.getElementById('sample')); ``` -> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. +N> 1. The Web Service link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` used in the `serviceUrl` property is intended solely for demonstration and evaluation purposes. +N> 2. For production deployment, please host your own Web Service with your required server configurations. +N> 3. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own Web Service and use it for the `serviceUrl` property. ## Online Demo diff --git a/Document-Processing/Word/Word-Processor/react/supported-fileformats.md b/Document-Processing/Word/Word-Processor/react/supported-fileformats.md index 6e3a6ff749..26d1353e31 100644 --- a/Document-Processing/Word/Word-Processor/react/supported-fileformats.md +++ b/Document-Processing/Word/Word-Processor/react/supported-fileformats.md @@ -1,16 +1,16 @@ --- layout: post title: Supported File Formats in React DOCX Editor | Syncfusion -description: Learn more about the supported file formats in Syncfusion® React DOCX Editor (Document Editor) for opening and exporting documents. +description: Learn more about the supported file formats in Syncfusion® React Document Editor (Document Editor) for opening and exporting documents. control: Supported File Formats platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Supported File Formats in React DOCX Editor +# Supported File Formats in React Document Editor -[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) supports a wide range of Microsoft Word and other document formats for opening and exporting, with both client-side and server-side capabilities. +[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) supports a wide range of Microsoft Word and other document formats. Some operations are handled client-side, while others require server-side processing. ## Supported File Formats @@ -34,10 +34,10 @@ N> * Requires server-side interactions for the operations. ## Supported platforms for server-side dependencies -You can deploy web APIs for the server-side dependencies of the Document Editor component on the following platforms. +You can deploy Web Services for the server-side dependencies of the Document Editor component on the following platforms. -- [ASP.NET Core](./web-services/core) -- [ASP.NET MVC](./web-services/mvc) -- [Java](./web-services/java) +- [ASP.NET Core](./web-services/core) +- [ASP.NET MVC](./web-services/mvc) +- [Java](./web-services/java) -To know more about server-side dependencies, refer to this [page](./web-services-overview). \ No newline at end of file +For more information about server-side dependencies, refer to this [page](./web-services-overview). \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/react/track-changes.md b/Document-Processing/Word/Word-Processor/react/track-changes.md index b6756560c5..1b89fcaa37 100644 --- a/Document-Processing/Word/Word-Processor/react/track-changes.md +++ b/Document-Processing/Word/Word-Processor/react/track-changes.md @@ -1,16 +1,16 @@ --- layout: post title: Track Changes in React DOCX Editor | Syncfusion -description: Learn how to enable Track Changes in React DOCX Editor and manage document revisions by accepting or rejecting edits made by multiple reviewers. +description: Learn how to enable Track Changes in React Document Editor and manage document revisions by accepting or rejecting edits made by multiple reviewers. control: Track changes platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Track Change in React DOCX Editor +# Track Changes in React Document Editor -[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) supports Track Changes functionality, which allows you to keep a record of changes or edits made to a document. You can then choose to accept or reject these modifications. It is a useful tool for managing changes made by several reviewers to the same document. When the Track Changes option is enabled, all editing operations are preserved as revisions in the Document Editor. +[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) supports Track Changes functionality, which allows you to keep a record of changes or edits made to a document. You can then choose to accept or reject these modifications. It is a useful tool for managing changes made by several reviewers to the same document. When the Track Changes option is enabled, all editing operations are preserved as revisions. ## Enable Track changes @@ -50,7 +50,8 @@ createRoot(document.getElementById('sample')).render(); {% endhighlight %} {% endtabs %} -N> Track changes are document level settings. When opening a document, if the document does not have track changes enabled, then enableTrackChanges will be disabled even if we set enableTrackChanges: true in the initial rendering. If you want to enable track changes for all the documents, then we recommend enabling track changes in documentChange event. +N> 1. Track changes are document-level settings. When opening a document, if the document does not have track changes enabled, then `enableTrackChanges` will be disabled even if you set `enableTrackChanges: true` in the initial rendering. +N> 2. If you want to enable track changes for all documents, we recommend enabling track changes in the `documentChange` event. The following example demonstrates how to enable track changes for the all the document while opening. @@ -68,7 +69,7 @@ container.current.documentChange = () => { ## Show or hide revisions pane -The Show or Hide Revisions Pane in the Document Editor allows users to toggle the visibility of the revisions pane, providing flexibility in managing tracked changes within the document. +The Show or Hide Revisions Pane option allows users to toggle the visibility of the revisions pane, providing flexibility in managing tracked changes within the document. The following example code illustrates how to show or hide the revisions pane. @@ -89,8 +90,10 @@ function App() { let container = null; React.useEffect(() => { - container.documentEditor.showRevisions = true; // To show revisions pane - container.documentEditor.showRevisions = false; // To hide revisions pane + if (container != null) { + container.documentEditor.showRevisions = true; // To show revisions pane + container.documentEditor.showRevisions = false; // To hide revisions pane + } }, [container]); // Re-run the effect when the container is initialized return ( @@ -122,7 +125,7 @@ N> The hosted Web API URL is for demo and evaluation purposes only. For producti ## Get all tracked revisions -Retrieves all tracked revisions from the current document using the [revisions collection](https://ej2.syncfusion.com/documentation/api/document-editor/revisioncollection) in the Document Editor. +Use the [revisions collection](https://ej2.syncfusion.com/documentation/api/document-editor/revisioncollection) on the Document Editor instance to retrieve all tracked revisions from the current document. The following example demonstrates how to get all tracked revisions from the current document. @@ -140,7 +143,7 @@ let revisions : RevisionCollection = documentEditor.revisions; ## Accept or reject all changes -Handles all tracked changes in the document at once, either by accepting or rejecting them. This helps quickly finalize or discard edits without reviewing each change individually. +Use `acceptAll()` or `rejectAll()` to apply or discard every tracked change at once, without reviewing each individually. The following example demonstrates how to accept or reject all changes. @@ -166,7 +169,7 @@ revisions.rejectAll(); ## Accept or reject a specific revision -Applies changes to a specific tracked revision in the document, allowing precise control to accept or reject individual edits. +Use `accept()` or `reject()` on a specific revision to apply or discard that edit individually. The following example demonstrates how to accept or reject a specific revision in the Document Editor. @@ -191,7 +194,7 @@ revisions.get(1).reject(); ## Navigate between the tracked changes -Navigates through tracked changes in the document programmatically, enabling easy movement to the next or previous revision from the current selection. +Use `navigateNextRevision()` and `navigatePreviousRevision()` to move the selection to the next or previous tracked change. The following example demonstrates how to navigate through tracked revisions programmatically. @@ -212,7 +215,7 @@ this.container.documentEditor.selection.navigatePreviousRevision(); ## Custom metadata along with author -The Document Editor allows customizing revisions using [revisionSettings](https://ej2.syncfusion.com/react/documentation/api/document-editor/documenteditorsettingsmodel#revisionsettings). The [customData](https://ej2.syncfusion.com/react/documentation/api/document-editor/revisionsettings#customdata) property allows attaching additional metadata to tracked revisions. This metadata can represent roles, tags, or any custom identifier for a revision. To display this metadata along with the author name in the Track Changes pane, the [showCustomDataWithAuthor](https://ej2.syncfusion.com/react/documentation/api/document-editor/revisionsettings#showcustomdatawithauthor) property must be enabled. +The Document Editor allows customizing revisions using [revisionSettings](https://ej2.syncfusion.com/react/documentation/api/document-editor/documenteditorsettingsmodel#revisionsettings). The [customData](https://ej2.syncfusion.com/react/documentation/api/document-editor/revisionsettings#customdata) property allows attaching additional metadata to tracked revisions. This metadata can represent roles, tags, or any custom identifier for a revision. To display this metadata along with the author name in the Track Changes pane, the [showCustomDataWithAuthor](https://ej2.syncfusion.com/react/documentation/api/document-editor/revisionsettings#showcustomdatawithauthor) property must be enabled. The following example illustrates how to enable and update custom metadata for track changes revisions. @@ -253,13 +256,14 @@ The Track Changes pane will display the author name along with the custom metada ![Custom metadata along with author in track changes pane](./images/custom-metadata-author-trackchanges.png) -N> When the document is exported as SFDT, the customData value is stored in the revision collection. Upon reopening the SFDT, the custom data is automatically restored and displayed in the Track Changes pane.In formats other than SFDT (such as DOCX and others), the customData is not preserved, as it is specific to the Document Editor component +N> 1. When the document is exported as SFDT, the `customData` value is stored in the revision collection. Upon reopening the SFDT, the custom data is automatically restored and displayed in the Track Changes pane. +N> 2. In formats other than SFDT (such as DOCX and others), the `customData` is not preserved, as it is specific to the Document Editor component. ## Restrict accept or reject by author -Accepting or rejecting changes can be restricted based on the author’s name. +Restrict accepting or rejecting changes by author name. -The following example demonstrates how to restrict an author from accept or reject changes. +The following example demonstrates how to restrict an author from accepting or rejecting changes. {% tabs %} {% highlight ts tabtitle="TS" %} @@ -305,7 +309,7 @@ createRoot(document.getElementById('sample')).render(); ## Filter Changes by User -In the Document Editor, a built-in review panel is available that supports filtering changes based on the user. +The built-in review panel in the Document Editor supports filtering changes based on the user. ![Filter changes by user in review panel](./images/filter-changes-by-user.png) diff --git a/Document-Processing/Word/Word-Processor/react/troubleshooting/document-loading-issue-with-404-error.md b/Document-Processing/Word/Word-Processor/react/troubleshooting/document-loading-issue-with-404-error.md index fc9a879ed6..ad60faf4f6 100644 --- a/Document-Processing/Word/Word-Processor/react/troubleshooting/document-loading-issue-with-404-error.md +++ b/Document-Processing/Word/Word-Processor/react/troubleshooting/document-loading-issue-with-404-error.md @@ -8,17 +8,17 @@ documentation: ug domainurl: ##DomainURL## --- -# Document loading issue with 404 error in React DOCX Editor component +# Fix 404 Error When Loading Documents in React Document Editor -If document loading fails and you see a 404 error in the browser console, the [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) is unable to reach a valid Web Service endpoint. +If document loading fails and you see a 404 error in the browser console, the [React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) is unable to reach a valid Web Service endpoint. ## Reasons The 404 error may occur due to the following reasons: -- **The Web Service is not running or inactive** – When hosting your own Web API, the server may be stopped or not deployed correctly, causing required endpoints such as `/Import` or `/SpellCheck` to return 404. -- **The configured `serviceUrl` is invalid** – Issues like a missing trailing slash (`/`), wrong port number, incorrect API route, or typos will cause the editor to call incorrect endpoints. -- **The application is using an old or discontinued Document Editor service URL** – When using an old Document Editor service URL which no longer valid. +- **The Web Service is not running or inactive** – When hosting your own Web Service, the server may be stopped, not deployed correctly, or configured such that required endpoints (e.g., `/Import`, `/SpellCheck`) return 404. +- **The configured `serviceUrl` is invalid** – A missing trailing slash (`/`), wrong port, incorrect API route, or typos cause the editor to call invalid endpoints. +- **The application is using an old or discontinued Document Editor service URL** – When using an old Document Editor service URL that is no longer valid. ## Solutions @@ -28,6 +28,8 @@ The 404 error may occur due to the following reasons: container.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'; ``` -> Note: The hosted Web API link is provided for demonstration and evaluation only. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. +N> 1. The hosted Web Service link is provided for demonstration and evaluation only. +N> 2. For production deployment, please host your own Web Service with your required server configurations. +N> 3. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own Web Service and use it for the `serviceUrl` property. -- If you are using your own hosted Web API, ensure that the Web Service is running, active, and the configured service URL is valid. \ No newline at end of file +- If you are using your own hosted Web Service, ensure that the Web Service is running, active, and the configured service URL is valid. \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/react/ui-builder-skill.md b/Document-Processing/Word/Word-Processor/react/ui-builder-skill.md index e5ba2de4e3..14fc56dc12 100644 --- a/Document-Processing/Word/Word-Processor/react/ui-builder-skill.md +++ b/Document-Processing/Word/Word-Processor/react/ui-builder-skill.md @@ -1,29 +1,29 @@ --- layout: post title: React UI Builder Skill with DOCX Editor | Syncfusion® -description: Install Syncfusion® React UI Builder to generate production-ready React components with DOCX Editor from natural-language prompts. -control: DOCX Editor +description: Install Syncfusion® React UI Builder to generate production-ready React components with Document Editor from natural-language prompts. +control: Document Editor platform: document-processing documentation: ug -keywords: React UI Builder, Skills, AI Assistants, DOCX Editor SDK, Agent Skills +keywords: React UI Builder, Skills, AI Assistants, Document Editor SDK, Agent Skills --- -# React UI Builder Skill with DOCX Editor for AI Assistants +# React UI Builder Skill with Document Editor for AI Assistants -**Syncfusion® React UI Builder Skill** is an AI-powered agent skill that accelerates React DOCX Editor development by transforming natural-language UI requirements into production-ready code using Syncfusion® React components. +**Syncfusion® React UI Builder Skill** is an AI-powered agent skill that accelerates React Document Editor development by transforming natural-language UI requirements into production-ready code using Syncfusion® React components. -Integrated with your AI-powered IDE, it leverages deep knowledge of **[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor)** (Document Editor) and other React components to deliver accurate and ready-to-use code. +Integrated with your AI-powered IDE, it leverages deep knowledge of **[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor)** (Document Editor) and other React components to deliver accurate and ready-to-use code. By combining intelligent code generation with best practices, accessibility standards, and design-system consistency, React UI Builder helps you rapidly build scalable Document editing applications and user interfaces without leaving your development workflow. ## Prerequisites -Before installing React UI Builder Skill with DOCX Editor, ensure the following: +Before installing React UI Builder Skill with Document Editor, ensure the following: - Install [APM (Agent Package Manager)](https://microsoft.github.io/apm/getting-started/installation/#quick-install-recommended) -- Required [Node.js](https://nodejs.org/en) version ≥ 18 +- [Node.js](https://nodejs.org/en) version ≥ 18 (required) - React application (existing or new); see [Quick Start](https://ej2.syncfusion.com/react/documentation/getting-started/quick-start) - A supported AI agent or IDE that integrates with the Skills (VS Code, Cursor, Syncfusion® Code Studio, etc.) -- Active Syncfusion® license(any of the following): +- Active Syncfusion® license (any of the following): - [Commercial](https://www.syncfusion.com/sales/unlimitedlicense) - [Community License](https://www.syncfusion.com/products/communitylicense) - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) @@ -55,7 +55,7 @@ Before installing React UI Builder Skill with DOCX Editor, ensure the following: ## Installation -Before installing React UI Builder Skill with DOCX Editor, ensure that APM (Agent Package Manager) is installed and available in your environment. +Before installing React UI Builder Skill with Document Editor, ensure that APM (Agent Package Manager) is installed and available in your environment. ### Verify APM Installation @@ -65,9 +65,9 @@ Run the following command to confirm APM is installed: apm --version ``` -### Install the Syncfusion® React UI Builder Skill with DOCX Editor package using APM +### Install the Syncfusion® React UI Builder Skill with Document Editor package using APM -Use the APM CLI to install the React UI Builder Skill with DOCX Editor for your preferred environment: +Use the APM CLI to install the React UI Builder Skill with Document Editor for your preferred environment: {% tabs %} {% highlight bash tabtitle="Copilot" %} @@ -99,20 +99,20 @@ After installation, the following artifacts are added to your project for the Gi Refer to the [documentation](https://microsoft.github.io/apm/reference/cli/targets/#detection-signals) for details about supported deployment targets. -> For [Syncfusion® Code Studio](https://help.syncfusion.com/code-studio/reference/configure-properties/custom-agents#predefined-agents), use the Copilot command above to install the React UI Builder. +N> For [Syncfusion® Code Studio](https://help.syncfusion.com/code-studio/reference/configure-properties/custom-agents#predefined-agents), use the Copilot command above to install the React UI Builder. -## How the Syncfusion® React UI Builder Skill Works with DOCX Editor +## How the Syncfusion® React UI Builder Skill Works with Document Editor 1. **Intent Analysis:** Parse the user's prompt to identify component types and high-level layout intent. -2. **Project Detection:** Automatically detects project framework, package manager, existing themes, and DOCX Editor configuration. -3. **Component Mapping:** Map intent to Syncfusion® DOCX Editor and React components, including required modules. +2. **Project Detection:** Automatically detects project framework, package manager, existing themes, and Document Editor configuration. +3. **Component Mapping:** Map intent to Syncfusion® Document Editor and React components, including required modules. 4. **Theming & Design System** Load required theming guidelines and confirm key design choices: - CSS framework (Tailwind, Bootstrap, Material, or Greenfield(custom theme)). If no themes detected in the existing project, Greenfield and Syncfusion Tailwind3 theme are shown as the default option, which can be used as is or changed based on preference. - Syncfusion theme (Tailwind3, Bootstrap5, Material3, fluent2) - Light and Dark Mode - Core design basics (colors, spacing, typography, responsiveness, accessibility) -5. **Code Generation:** Produce TypeScript React components with DOCX Editor integration, props interfaces, and CSS/styling scaffolding. +5. **Code Generation:** Produce TypeScript React components with Document Editor integration, props interfaces, and CSS/styling scaffolding. 6. **Dependency Management:** Recommend or install required Syncfusion® packages and peer dependencies. 7. **Validation:** Run accessibility and basic security checks, request confirmation for changes. 8. **Code Insertion:** Create files or patch existing files following project structure and conventions. @@ -124,39 +124,39 @@ Key enforcement points: - Generates semantic HTML with ARIA attributes and keyboard support - Avoids unsupported or deprecated API usages for Syncfusion® components -> The assistant handles most stages automatically and may request confirmation where required. +N> The assistant handles most stages automatically and may request confirmation where required. ## Using the AI Assistant -After installing React UI Builder Skill with DOCX Editor and APM, the relevant agent and skill files are added to your project under: +After installing React UI Builder Skill with Document Editor and APM, the relevant agent and skill files are added to your project under: - `.agent/skills/` (skill files) - `.github/agents/` (React UI builder agent configuration, based on the selected target) To start using the skill: -1.Open your supported IDE. -2.In the chat panel, select the `syncfusion-react-ui-builder` agent from the **Agent dropdown**. +1. Open your supported IDE. +2. In the chat panel, select the `syncfusion-react-ui-builder` agent from the **Agent dropdown**. ![Set Agent](images/UI-Builder-Agent.png) -3.Start prompting the agent with a clear description of your UI requirements. +3. Start prompting the agent with a clear description of your UI requirements. -> For Syncfusion® Code Studio, if the UI Builder agent is not shown, ensure that the agent location is configured to use it in the chat, and refer to the [documentation](https://help.syncfusion.com/code-studio/reference/configure-properties/usersettings#agent-file-locations) to configure the agent location properly. +N> For Syncfusion® Code Studio, if the UI Builder agent is not shown, ensure that the agent location is configured to use it in the chat, and refer to the [documentation](https://help.syncfusion.com/code-studio/reference/configure-properties/usersettings#agent-file-locations) to configure the agent location properly. -**Examples Prompts:** +**Example Prompts:** {% promptcards %} {% promptcard Dynamic Toolbar Customization Editor %} -Build a new React application - Include a sidebar panel on the right side that displays a list of toolbar options with checkboxes for New, Open, Undo and Redo. Add a button at the bottom of the panel labeled **"Apply Changes"**. When users select or deselect the checkboxes and click the button, the toolbar at the top of the DOCX Editor should dynamically show or hide the corresponding items in real time, providing a customizable editing experience similar to advanced document editors. +Build a new React application - Include a sidebar panel on the right side that displays a list of toolbar options with checkboxes for New, Open, Undo and Redo. Add a button at the bottom of the panel labeled **"Apply Changes"**. When users select or deselect the checkboxes and click the button, the toolbar at the top of the Document Editor should dynamically show or hide the corresponding items in real time, providing a customizable editing experience similar to advanced document editors. {% endpromptcard %} {% promptcard Track Changes Toggle Editor %} -Build a new React application with the Syncfusion DOCX Editor. Include a toggle switch button at the top-left corner to control track changes. The editor should support real-time change tracking, and the toggle must properly enable or disable this feature. +Build a new React application with the Syncfusion Document Editor. Include a toggle switch button at the top-left corner to control track changes. The editor should support real-time change tracking, and the toggle must properly enable or disable this feature. {% endpromptcard %} @@ -166,7 +166,7 @@ Generated code follows best practices with accessible, semantic HTML, strong Typ ## Best Practices -Follow these guidelines to get the most out of UI Builder and ensure high-quality production-ready result: +Follow these guidelines to get the most out of UI Builder and ensure high-quality production-ready results: - **Stay consistent:** Maintain consistent file organization, naming conventions, and coding standards throughout your project. - **Use advanced AI models:** For best results, use **Claude Sonnet 4.6 or higher** capability models to produce better code quality and more accurate implementations.