Editor Embed

Overview

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

Use cases

• Embedded Sending
• Embedded Editing

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 Const

/**
 * Available UI elements that can be hidden in the editor.
 * MANAGE_RECIPIENTS: The recipients management ui elements.
 * MANAGE_ROLES: The roles management ui elements.
 * MANAGE_VARIABLES: The variables management panel ui element.
 */
export declare const UIElement: {
    readonly MANAGE_RECIPIENTS: "manage-recipients";
    readonly MANAGE_ROLES: "manage-roles";
    readonly MANAGE_VARIABLES_PANEL: "manage-variables-panel";
};

• MANAGE_RECIPIENT: Use to hides the recipient management UI elements.
• MANAGE_ROLES: Use to hides the role management UI elements.
• MANAGE_VARIABLES_PANEL: Use to hides the variables panel UI elements.

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