DocAuthSystem

DocAuthSystem:

{
  loadDocument(documentInput: DocAuthDocumentInput): Promise<DocAuthDocument>;
  importDOCX(docx: BlobInput, options?: ImportDOCXOptions): Promise<DocAuthDocument>;
  createEditor(target: HTMLElement, options?: CreateEditorOptions): Promise<DocAuthEditor>;
  createDocumentFromPlaintext(text: string, options?: CreateDocumentFromPlaintextOptions): Promise<DocAuthDocument>;
  destroy(): void;
}

A DocAuthSystem instance holds the internal WASM engine and loaded fonts. It is used to load or import documents and create DocAuthEditor instances.

See

Getting started guide

Methods

loadDocument()

loadDocument(documentInput): Promise<DocAuthDocument>

Loads a document stored in the Document Authoring format. The document can be provided as a JSON string or a JavaScript object.

Parameters

documentInput

DocAuthDocumentInput

Returns

Promise<DocAuthDocument>

Examples

// Load from JSON string
const doc = await system.loadDocument('{"version":"7.0","content":[...]}');

// Load from object
const docData = { version: '7.0', content: [...] };
const doc = await system.loadDocument(docData);

// Load from server
const doc = await system.loadDocument(fetch('/api/documents/123'));

// Load and create editor
const doc = await system.loadDocument(savedDocJSON);
const editor = await system.createEditor(targetElement, { document: doc });

See

DocJSON guide
DocAuthDocumentInput for supported input types.

importDOCX()

importDOCX(docx, options?): Promise<DocAuthDocument>

Imports a DOCX document.

Parameters

Examples

// Import from file input
const fileInput = document.querySelector('input[type="file"]');
const file = fileInput.files[0];
const doc = await system.importDOCX(file);

// Import from URL
const doc = await system.importDOCX(fetch('/documents/template.docx'));

// Import with abort signal
const controller = new AbortController();
const doc = await system.importDOCX(file, {
  abortSignal: controller.signal,
});

// Complete workflow: import DOCX, edit, export PDF
const doc = await system.importDOCX(fetch('/template.docx'));
const editor = await system.createEditor(targetElement, { document: doc });
// ... user edits document ...
const pdfBuffer = await editor.currentDocument().exportPDF();

See

DOCX import guide
BlobInput for supported input types.

createEditor()

createEditor(target, options?): Promise<DocAuthEditor>

Creates an editor in the specified HTML element. IMPORTANT: The position of the target element cannot be static or unset. If unsure, use relative.

Parameters

target

HTMLElement

options?

CreateEditorOptions

Returns

Promise<DocAuthEditor>

Examples

// Shared code for the examples below - ensure target element has proper positioning
const target = document.getElementById('editor');
target.style.position = 'relative';
target.style.height = '600px';

// Create editor with empty document
const editor = await system.createEditor(target);

// Create editor with existing document
const doc = await system.loadDocument(docJSON);
const editor = await system.createEditor(target, { document: doc });

// Complete workflow with event handling
const editor = await system.createEditor(target);
editor.on('content.change', async () => {
  const doc = await editor.currentDocument().saveDocument();
  localStorage.setItem('draft', JSON.stringify(doc));
});

See

Getting started guide
CreateEditorOptions for available options.

createDocumentFromPlaintext()

createDocumentFromPlaintext(text, options?): Promise<DocAuthDocument>

Creates a document from plain text by interpreting patterns and replacing characters. E.g.:

\n creates a line break in a paragraph
\n\n separates paragraphs
\t is replaced with spaces

Parameters

text

string

options?

CreateDocumentFromPlaintextOptions

Returns

Promise<DocAuthDocument>

Examples

// Simple text document
const doc = await system.createDocumentFromPlaintext('Hello World');

// Multi-paragraph document
const text = `First paragraph.

Second paragraph with line break\nand continuation.`;
const doc = await system.createDocumentFromPlaintext(text);

// With custom page settings
const doc = await system.createDocumentFromPlaintext('My content', {
  pageSize: 'A4',
  pageMargins: { left: 72, right: 72, top: 72, bottom: 72 },
});

// Create document and editor in one flow
const doc = await system.createDocumentFromPlaintext('Initial content');
const editor = await system.createEditor(targetElement, { document: doc });

See

CreateDocumentFromPlaintextOptions for available options.

destroy()

destroy(): void

Releases resources held by the system. IMPORTANT: The system and any editors created by this system can no longer be used after calling this.

Returns

void

Example

// Clean up when done
editor.destroy();
system.destroy();

// Or use try-finally pattern
const system = await createDocAuthSystem();
try {
  const editor = await system.createEditor(target);
  // ... use editor ...
  editor.destroy();
} finally {
  system.destroy();
}