@nutrient-sdk/document-authoring/README.md

A web SDK for word processing and rich text capabilities.

# Document Authoring SDK

The Document Authoring SDK provides a way to seamlessly embed document authoring capabilities into your web app. It's a WYSIWYG editor that provides features traditionally found only in desktop word processors. You can read more and try a demo on our [dedicated product page](https://www.nutrient.io/sdk/document-authoring).


## ✨ Feature Requests & Feedback

To help us shape this new authoring experience, we highly value your feedback! Please submit any feature requests or bug reports to [support@nutrient.io](mailto:support@nutrient.io) with the subject line "Document Authoring: Feature Request/Bug Report".  We appreciate your contributions and are excited to hear your thoughts!

## 💻 Installation

The package is available on [npm](https://www.npmjs.com/), and can be installed with your package manager of choice. The package name is `@nutrient-sdk/document-authoring`.

```bash
npm install @nutrient-sdk/document-authoring
```

## ⚡️ Quickstart

The visual editor needs a suitable target DOM element:

```html
<!--
  IMPORTANT: An editor target element needs to have its `position` set to a value other than the default or `static`!
  If unsure use `relative`.
-->
<div id="editor" style="position: relative; border: 1px solid black; width: 1024px; height: 600px;"></div>
```

The npm package can then be imported and the target set to the element:

```javascript
import DocAuth from '@nutrient-sdk/document-authoring';

const docAuthSystem = await DocAuth.createDocAuthSystem()

const editor = await docAuthSystem.createEditor(document.getElementById('editor'),{
  document: await docAuthSystem.createDocumentFromPlaintext('Hi there!'),
})
```
For a typical setup, this is all that's needed.

### Other methods

In a static context (with no bundler) you can use the file found at `lib/docauth.es.js` in the package (located in
`node_modules/@nutrient-sdk/document-authoring/lib/docauth.es.js` if you installed
the SDK via `npm`).

With the default configuration (CDN assets) this is the only file you need at runtime.
If you use this file in your application you will need to use a dynamic import:

```javascript
// Replace `/lib/docauth.es.js` with the path where the file is available in your setup.
const DocAuth = await import('/lib/docauth.es.js');

const docAuthSystem = await DocAuth.createDocAuthSystem()

const editor = await docAuthSystem.createEditor(document.getElementById('editor'),{
  document: await docAuthSystem.createDocumentFromPlaintext('Hi there!'),
})
```

Alternatively a version that can be included via a script tag is available at `lib/docauth.umd.js` in the package (located in
`node_modules/@nutrient-sdk/document-authoring/lib/docauth.umd.js` if you installed
the SDK via `npm`).

```html
<script src="lib/docauth.umd.js"></script>
<script>
  (async()=>{
    const docAuthSystem = await DocAuth.createDocAuthSystem()
    const editor = await docAuthSystem.createEditor(document.getElementById('editor'),{
      document: await docAuthSystem.createDocumentFromPlaintext('Hi there!'),
    })
  })()
</script>
```

### Example

You can download an example project demoing both TypeScript and JavaScript integration from [here](https://document-authoring.cdn.nutrient.io/releases/document-authoring-1.10.0-example.zip), unzip it and run:

```bash
npm install
npx vite serve
```

## Fetching assets

By default, the Document Authoring SDK will fetch the required files (fonts, emoji data, etc.) from a public CDN, and no further configuration is needed. See below for instructions on how to self-host assets.


### Self-hosting the assets

To host the assets on your own infrastructure you can download them from [here](https://document-authoring.cdn.nutrient.io/releases/document-authoring-1.10.0-assets.zip) and deploy them to a suitable location.
Provide an appropriate base path when initializing the Document Authoring SDK.

#### Example:

```JavaScript
// Alternatively you can use `import DocAuth from '@nutrient-sdk/document-authoring'` if you have a bundler set up.
// Replace `/lib/docauth.es.js` with the path where the file is available in your setup.
const DocAuth = await import('/lib/docauth.es.js');

const docAuthSystem = await DocAuth.createDocAuthSystem({
  assets: {
    // Replace '/document-authoring-assets/' with the path where the assets are available.
    base: '/document-authoring-assets/',
  },
});
```

## 🧾 License

Copyright (c) 2024-present [PSPDFKit GmbH](https://www.nutrient.io). See the [evaluation license](./LICENSE.md) for more information.