pandadoc-editor

pandadoc-editor Library

The pandadoc-editor can be used to embed the PandaDoc Editor in your web application.

Features

• Embedded Sending
• Embedded Editing

Installation

To install pandadoc-editor, you can use either npm or yarn:

npm install pandadoc-editor

or

yarn add pandadoc-editor

Usage

First, import the library in your project:

import { Editor } from "pandadoc-editor";

Then, you can initialize the editor:

const editor = new Editor("editor-container", {
  // Editor will open start automatically if you provide documentId or templateId
  documentId: "", // Document id
  templateId: "", // Template id

  token: "", // Bearer token
  workspaceId: "", // Workspace id
  organizationId: "", // Organization id,
});

Controlling Visible Fields

The 'openDocument' function allows you to control the visibility of fields in a document. This is controlled by the 'fields' parameter.

Hint: Fields can be set as part of the Editor configuration (along with 'documentId') if you don't need to configure them for each openDocument call.

The 'fields' parameter is an object where the keys are the types of fields you want to control, and the values are objects with a 'visible' property that determines whether the field is visible.

If you don't provide a field configuration, the function will use it from the default configuration or from the configuration that was passed during Editor initialization. All fields are visible by default.

Default Field Configuration

  const defaultFieldConfig = {
    "checkbox": { visible: true },
    "dropdown": { visible: true },
    "date": { visible: true },
    "signature": { visible: true },
    "stamp": { visible: true },
    "initials": { visible: true },
    "payment_details": { visible: true },
    "collect_file": { visible: true },
    "radio_buttons": { visible: true },
  };

Example Here's an example of how you can call the 'openDocument' function to control the visibility of fields:

editor.openDocument("doc1", {
  fields: {
    'stamp': {
      visible: false,
    },
    'dropdown': {
      visible: false,
    },
  },
});

In this example, the 'stamp' and 'dropdown' fields will be hidden.

Close the Editor

To close the editor, you can call the close method:

editor.close();

Building

To build the library, run:

vite build

This will generate the library bundle in the dist directory.