pandadoc-editor
v0.0.0-a.21
Published
The `pandadoc-editor` can be used to embed the PandaDoc Editor in your web application.
Downloads
2,984
Readme
pandadoc-editor Library
The pandadoc-editor
can be used to embed the PandaDoc Editor in your web
application.
Features
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.