Editor Embed

Overview

pandadoc-editor is a TypeScript library for embedding and interacting with PandaDoc Editor in your web applications.

Use cases

For a detailed comparison of Embedded Sending and Embedded Editing, refer to the comparison table.

Installation

Install using yarn:

yarn add pandadoc-editor

or npm:

npm install --save pandadoc-editor

Usage

Import the library and create editor:

import { Editor } from 'pandadoc-editor';

const editor = new Editor(
  'editor-container', // ID of the container element
  {
    width: 800,
    height: 600,
    token: 'Edit session E-Token',
  }
);

editor.open();

You need to use Public API to generate E-Token for PandaDoc document/template.

API

Editor Class
Constructor

constructor(id: string, configuration: EditorConfig, pdConfig: Partial<PDConfigModel>)

id: ID of the HTML element to replace with the editor iframe.
configuration: Editor configuration object.
pdConfig: PandaDoc configuration object.

Methods

open(): Opens the editor.
close(): Closes the editor.

EditorConfig Interface

interface EditorConfig {
  width?: number | string;
  height?: number | string;
  token?: string;
  fieldPlacementOnly?: boolean;
  fields?: Record<FieldKind, FieldConfig>;
  blocks?: Record<BlockKind, BlockConfig>;
  hiddenElements?: UIElement[];
}

width: Width of the editor iframe.
height: Height of the editor iframe.
token: Editing Session Key (E-Token).
fieldPlacementOnly: Whether to only allow field placement.
fields: Field configuration object.
blocks: Block configuration object.
hiddenElements: Array of UI elements to hide.

PDConfigModel Interface

interface PDConfigModel {  
  host: string;  
}

host: PandaDoc application host.

FieldConfig Interface

interface FieldConfig {  
  visible: boolean;  
}

visible: Whether the field is visible.

BlockConfig Interface

interface BlockConfig {  
  visible: boolean;  
}

visible: Whether the block is visible.

UIElement Enum

enum UIElement {  
  MANAGE_RECIPIENT = "manage-recipient",  
  MANAGE_ROLES = "manage-roles",  
}

MANAGE_RECIPIENT: Use to hides the recipient management UI elements.
MANAGE_ROLES: Use to hides the role management UI elements.

Looking for React component? This work in progress, for now you can create your own component based on this example.