Document Editor

A custom-built, internally developed Document Editor component for React applications. This package provides a reusable, embeddable document editing experience — including header, body, and footer editing, page-based layout, text formatting, and image support — designed to be dropped into any React + Vite application.

This is not a wrapper around a third-party rich text editor. The editing engine, document model, pagination, and DOCX import/export logic are built and maintained in-house.

1. Package Overview

The Document Editor package exposes a reusable DocumentEditor component that renders a full document editing surface inside a host React application. It is responsible for:

• Rendering and editing structured documents (header, body, footer, pages).
• Managing document layout and pagination.
• Providing text formatting and content editing capabilities.
• Supporting image insertion and management within documents.
• Importing and exporting documents (e.g. DOCX) to and from the internal document model.

Supported environment:

• React ^19.x
• Vite-based build tooling
• TypeScript

The package is intended for internal use across products that require a consistent, embeddable document authoring experience.

2. Features

• Document creation and editing — create new documents or edit existing ones using a WYSIWYG surface.
• Header, body, and footer editing — independently editable document regions with consistent formatting behavior.
• Page-based document layout — content is automatically paginated to reflect a real page layout, not a single continuous scroll area.
• Text formatting — standard formatting controls for structuring and styling document content.
• Image support — insert, position, and manage images within document content.
• Document structure management — internal document model handles structural elements such as styles, numbering, and layout metadata.
• Reusable editor component integration — designed to be imported and embedded as a single component in any React application.
• Custom configuration support — configurable behavior via component props to adapt the editor to different host applications.

3. Installation

Install the package

npm install <package-name>

Private package installation

Since this is an internal/private package, ensure your project is configured to authenticate against the internal/private npm registry before installing.

npm config set @<scope>:registry <private-registry-url>
npm login --registry=<private-registry-url>
npm install <package-name>

Required peer dependencies

The host application must provide the following dependencies:

npm install react react-dom

| Package | Required Version | |---|---| | react | ^19.0.0 | | react-dom | ^19.0.0 |

4. Usage

Import the DocumentEditor component into your React application and render it like any other component.

import { DocumentEditor } from "<package-name>";

function App() {
  return (
    <DocumentEditor />
  );
}

export default App;

By default, the component renders a ready-to-use document editing surface. No additional setup is required for a minimal integration — configuration and content control are added through props as described below.

5. Configuration

The DocumentEditor component accepts props to control its content and behavior.

import { DocumentEditor } from "<package-name>";

function App() {
  const [content, setContent] = useState(initialContent);

  const handleChange = (updatedContent) => {
    setContent(updatedContent);
  };

  return (
    <DocumentEditor
      value={content}
      onChange={handleChange}
      config={{
        readOnly: false,
      }}
    />
  );
}

| Prop | Type | Description | |---|---|---| | value | object | Initial content used to populate the editor. | | onChange | (content: object) => void | Callback invoked whenever the document content changes. | | config | object | Optional configuration object used to customize editor behavior. |

Notes:

• Initial content — pass the document content to load via the value prop.
• Change handlers — use onChange to receive updates and persist content in the host application's state or backend.
• Custom settings / editor configuration — the config object is used to adjust editor behavior for the consuming application. Extend this object as new configuration options are introduced.

6. Project Integration Steps

1. Install the package into your React project:

   npm install <package-name>

2. Import the component:

   import { DocumentEditor } from "<package-name>";

3. Add the component to your application's component tree:

   <DocumentEditor />

4. Configure required props such as value, onChange, and config based on your application's needs.
5. Run your project:

   npm run dev

7. Development

To work on the Document Editor package locally:

Clone the repository

git clone <repository-url>
cd <repository-folder>

Install dependencies

npm install

Run locally

npm run dev

Build the package

npm run build

Test locally in a consuming project

Use a local package link to test changes in another project before publishing:

npm link

In the consuming project:

npm link <package-name>

8. Build and Publish

Build

npm run build

This generates the distributable package output ready for publishing.

Publish to the private registry

npm publish --registry=<private-registry-url>

Ensure the package version in package.json is incremented according to semantic versioning before publishing.

npm version patch   # or minor / major
npm publish --registry=<private-registry-url>

9. Folder Structure

src/
 ├── components/
 │    ├── editor/          # Core editor UI components
 │    └── icons/           # Icon components used within the editor UI
 ├── lib/
 │    ├── editor/          # Editor behavior and content flow logic
 │    └── docx/            # Document model, pagination, and DOCX import/export
 ├── styles.css             # Editor styling
 └── index.ts               # Package entry point / public exports

Key files:

• components/editor/ — contains the primary editor component and its supporting UI (toolbars, dropdowns, tooltips).
• lib/docx/ — contains the document model, page layout/pagination logic, and DOCX parsing and export utilities.
• lib/editor/ — contains internal editor state and content flow handling.
• index.ts — the package's public entry point; all exports consumed by host applications are re-exported from here.

10. API Reference

Components

| Component | Description | |---|---| | DocumentEditor | Main exported component that renders the document editing surface. |

Props

| Prop | Type | Required | Description | |---|---|---|---| | value | object | No | Initial document content. | | onChange | (content: object) => void | No | Fired when document content changes. | | config | object | No | Editor configuration options. |

Events

| Event | Description | |---|---| | onChange | Triggered whenever the document content is modified by the user. |

Configuration Options

| Option | Type | Description | |---|---|---| | readOnly | boolean | When set, disables editing and renders the document in a view-only state. |

Additional configuration options will be documented here as they are introduced.

11. Browser Support

The Document Editor supports the latest stable versions of modern evergreen browsers:

• Google Chrome
• Microsoft Edge
• Mozilla Firefox
• Safari

Internet Explorer and other legacy/non-evergreen browsers are not supported.

12. License

This package is proprietary and intended for internal/authorized use only.

Copyright (c) <year> Virtualan Software. All rights reserved.

This software and associated documentation are the confidential
and proprietary property of Virtualan Software. Unauthorized copying,
distribution, or use of this package, in whole or in part, is strictly
prohibited without prior written permission.