Document Editor

The Document Editor is available as npm packages for Angular, React and Node.js. Each package is listed with its versions and dependencies, how to install it and the backend it needs; the complete step-by-step tutorials are in Getting Started: Document Editor.

Packages

All four packages are public and install without credentials. All frontends share the same JavaScript API, the TXTextControl object.

Dependencies

The Angular and React packages declare the Angular or React versions your application must use as peer dependencies; Angular and React list the ranges and explain what to do in case of a conflict. The Angular package also depends on @angular/cdk in the same range and on tslib ^2.8.1, and the React package has no other dependencies. The Node.js packages have no peer dependencies:

npm installs the dependencies automatically.

Install the Packages

You need Node.js and npm. Run the commands in the folder of your client application.

Angular and React

Install the package of your framework:

npm i @txtextcontrol/tx-ng-document-editor
npm i @txtextcontrol/tx-react-document-editor

Before you install the Angular package, check the @angular/cdk version of your application, and after the installation, import DocumentEditorModule, as Angular describes. The React package requires React 19.2 or a later 19.x version, and projects created with Vite 8 take the component from the default property of the package, as React shows.

Node.js

A Node.js application needs the editor package and the WebSocket server package:

npm install @txtextcontrol/tx-document-editor
npm install @txtextcontrol/tx-websocket-server

The example in the package README also uses the web framework Express and the template engine Pug, which you install with npm install express and npm install pug.

The Backend for Angular and React

The Angular and React components contain only the user interface. They open a WebSocket connection to an ASP.NET Core application that runs TX Text Control .NET Server and synchronizes the document.

1. Create an ASP.NET Core application, for example with the ASP.NET Core Web API project template.

2. Install the NuGet packages from the Text Control Private NuGet Feed:

   dotnet add package TXTextControl.Web
   dotnet add package TXTextControl.TextControl.Core.SDK
   dotnet add package TXTextControl.Web.DocumentEditor.Backend
   

3. In Program.cs, register the hosted service with builder.Services.AddHostedService<DocumentEditorWorkerManager>(), and call app.UseWebSockets() and app.UseTXWebSocketMiddleware(). The complete file is shown in the Angular and React tutorials.

TXTextControl.Web provides the WebSocket middleware, and TXTextControl.Web.DocumentEditor.Backend the backend process that the middleware connects to over TCP, by default on port 4283; Document Editor in Product Architecture explains the connection chain.

To connect a component to the backend, set its webSocketURL to the address of the ASP.NET Core application with the wss protocol and the path /api/TXWebSocket, for example wss://localhost:7118/api/TXWebSocket. Use ws when the backend runs on HTTP. The Document Editor needs no CORS policy.

The Backend for Node.js

The Node.js packages also communicate over a WebSocket connection. Instead of an ASP.NET Core application, the Node.js application provides the WebSocket endpoint with the WebSocketServer class, which forwards the connection to the Document Editor backend TXTextControl.Web.Server.Core over TCP, by default to localhost on port 4283. You host this backend yourself: in a Node.js application, no hosted service starts it, so you publish its files from the NuGet packages and start it as a standalone application, a Windows service or a Linux daemon. Only ASP.NET applications on the .NET Framework still deploy the older TX TextControl Service.

The Node.js tutorial prepares the backend and shows the Express application from the package README in Write the Application. Connect to a Backend on Another Machine lists the options of the WebSocketServer constructor, such as the address and port of the backend.

The READMEs name these requirements:

• @txtextcontrol/tx-document-editor 34.0.0: @txtextcontrol/tx-websocket-server 34.0.0 or higher, or the NuGet package TXTextControl.Web 34.0.0 or higher as the WebSocket endpoint, and TX Text Control .NET Server 34.0 or higher.
• @txtextcontrol/tx-websocket-server 34.5.0: TX Text Control .NET Server 34.0 SP5.

The README of the Angular package also describes a Node.js application with WebSocketServer as the WebSocket endpoint for the Angular component, as Angular in the Integration Guide shows.

Next Steps

• Getting Started: Document Editor with Angular — build an Angular application with the Document Editor and its ASP.NET Core backend.
• Getting Started: Document Editor with React — build a React application with the Document Editor and its ASP.NET Core backend.
• Angular npm Packages — the supported Angular versions, root modules and standalone components.
• Document Editor Architecture — how the frontend, the middleware and the backend process work together.