npm package: @lexcend/docx-editor
Description: Lexcend CLM Document Editor — WYSIWYG DOCX editing for contract lifecycle management
Author: Lexcend
Latest version: 1.6.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @lexcend/docx-editor

**Lexcend CLM Document Editor** — A WYSIWYG DOCX editor for React, purpose-built for Contract Lifecycle Management.

Edit `.docx` contracts directly in the browser — no server required.

## Features

- **Full WYSIWYG Editing** — Bold, italic, underline, fonts, colors, paragraph styles
- **Tables** — Cell merging, borders, column resizing, nested content
- **Images** — Inline and floating with positioning and resizing
- **Page Layout** — Accurate page dimensions, margins, headers, footers, page breaks
- **Template Variables** — `{variable}` syntax for contract templates with live highlighting
- **Plugin Architecture** — Extensible via EditorPlugin (browser) and CorePlugin (headless)
- **100% Client-Side** — Parsing, rendering, editing all happen in the browser
- **CLM Extensions** — Clause library, track changes, approval workflows, AI analysis

## Installation

```bash
npm install @lexcend/docx-editor
```

## Quick Start

```tsx
import { DocxEditor, type DocxEditorRef } from '@lexcend/docx-editor';
import '@lexcend/docx-editor/styles.css';
import { useRef, useState } from 'react';

function ContractEditor() {
  const editorRef = useRef<DocxEditorRef>(null);
  const [buffer, setBuffer] = useState<ArrayBuffer | null>(null);

  const handleSave = async () => {
    const docBuffer = await editorRef.current?.save();
    if (docBuffer) {
      // Save to your CLM backend
      await fetch('/api/contracts/1/document', { method: 'PUT', body: docBuffer });
    }
  };

  return (
    <>
      <button onClick={handleSave}>Save Contract</button>
      {buffer && <DocxEditor ref={editorRef} documentBuffer={buffer} onChange={() => {}} />}
    </>
  );
}
```

## With CLM Plugins

```tsx
import { DocxEditor, PluginHost, templatePlugin } from '@lexcend/docx-editor';
import '@lexcend/docx-editor/styles.css';

function CLMEditor({ contractBuffer }: { contractBuffer: ArrayBuffer }) {
  return (
    <PluginHost plugins={[templatePlugin]}>
      <DocxEditor documentBuffer={contractBuffer} onChange={() => {}} />
    </PluginHost>
  );
}
```

## Package Exports

| Export                              | Purpose               |
| ----------------------------------- | --------------------- |
| `@lexcend/docx-editor`              | Full editor (React)   |
| `@lexcend/docx-editor/core`         | Core types and models |
| `@lexcend/docx-editor/headless`     | Node.js API (no DOM)  |
| `@lexcend/docx-editor/core-plugins` | Server-side plugins   |
| `@lexcend/docx-editor/styles.css`   | Editor stylesheet     |

## Framework Support

Works with Vite, Next.js, Remix, and Astro. For SSR frameworks, use dynamic imports:

```tsx
// Next.js
const Editor = dynamic(() => import('./Editor'), { ssr: false });
```

## License

MIT — See [LICENSE](./LICENSE) and [THIRD_PARTY_LICENSES.md](./THIRD_PARTY_LICENSES.md)

Based on [docx-js-editor](https://github.com/eigenpal/docx-js-editor) by EigenPal (MIT License).