From 9121a062b3885d3a28e365d79726fd80adb878f3 Mon Sep 17 00:00:00 2001 From: Mythie Date: Mon, 14 Apr 2025 11:31:54 +1000 Subject: [PATCH] chore: add docs for authoring --- .../pages/developers/embedding/_meta.json | 5 +- .../pages/developers/embedding/authoring.mdx | 167 ++++++++++++++++++ .../pages/developers/embedding/index.mdx | 14 ++ .../authoring/configure-document-upload.tsx | 3 - 4 files changed, 184 insertions(+), 5 deletions(-) create mode 100644 apps/documentation/pages/developers/embedding/authoring.mdx diff --git a/apps/documentation/pages/developers/embedding/_meta.json b/apps/documentation/pages/developers/embedding/_meta.json index 96806de3e..78d8b2503 100644 --- a/apps/documentation/pages/developers/embedding/_meta.json +++ b/apps/documentation/pages/developers/embedding/_meta.json @@ -6,5 +6,6 @@ "solid": "Solid Integration", "preact": "Preact Integration", "angular": "Angular Integration", - "css-variables": "CSS Variables" -} + "css-variables": "CSS Variables", + "authoring": "Authoring" +} \ No newline at end of file diff --git a/apps/documentation/pages/developers/embedding/authoring.mdx b/apps/documentation/pages/developers/embedding/authoring.mdx new file mode 100644 index 000000000..8d5c4d09f --- /dev/null +++ b/apps/documentation/pages/developers/embedding/authoring.mdx @@ -0,0 +1,167 @@ +--- +title: Authoring +description: Learn how to use embedded authoring to create documents and templates in your application +--- + +# Embedded Authoring + +In addition to embedding signing experiences, Documenso now supports embedded authoring, allowing you to integrate document and template creation directly within your application. + +## How Embedded Authoring Works + +The embedded authoring feature enables your users to create new documents without leaving your application. This process works through secure presign tokens that authenticate the embedding session and manage permissions. + +## Creating Documents with Embedded Authoring + +To implement document creation in your application, use the `EmbedCreateDocument` component from our SDK: + +```jsx +import { unstable_EmbedCreateDocument as EmbedCreateDocument } from '@documenso/embed-react'; + +const DocumentCreator = () => { + // You'll need to obtain a presign token using your API key + const presignToken = 'YOUR_PRESIGN_TOKEN'; + + return ( +
+ { + console.log('Document created with ID:', data.documentId); + console.log('External reference ID:', data.externalId); + }} + /> +
+ ); +}; +``` + +## Obtaining a Presign Token + +Before using the `EmbedCreateDocument` component, you'll need to obtain a presign token from your backend. This token authorizes the embedding session. + +You can create a presign token by making a request to: + +``` +POST /api/v2-beta/embedding/create-presign-token +``` + +This API endpoint requires authentication with your Documenso API key. The token has a default expiration of 1 hour, but you can customize this duration based on your security requirements. + +You can find more details on this request at our [API Documentation](https://openapi.documenso.com/reference#tag/embedding) + +## Configuration Options + +The `EmbedCreateDocument` component accepts several configuration options: + +| Option | Type | Description | +| ------------------ | ------- | ------------------------------------------------------------------ | +| `presignToken` | string | **Required**. The authentication token for the embedding session. | +| `externalId` | string | Optional reference ID from your system to link with the document. | +| `host` | string | Optional custom host URL. Defaults to `https://app.documenso.com`. | +| `css` | string | Optional custom CSS to style the embedded component. | +| `cssVars` | object | Optional CSS variables for colors, spacing, and more. | +| `darkModeDisabled` | boolean | Optional flag to disable dark mode. | +| `className` | string | Optional CSS class name for the iframe. | + +## Feature Toggles + +You can customize the authoring experience by enabling or disabling specific features: + +```jsx + +``` + +## Handling Document Creation Events + +The `onDocumentCreated` callback is triggered when a document is successfully created, providing both the document ID and your external reference ID: + +```jsx + { + // Navigate to a success page + navigate(`/documents/success?id=${data.documentId}`); + + // Or update your database with the document ID + updateOrderDocument(data.externalId, data.documentId); + }} +/> +``` + +## Styling the Embedded Component + +You can customize the appearance of the embedded component using standard CSS classes: + +```jsx + +``` + +## Complete Integration Example + +Here's a complete example of integrating document creation in a React application: + +```tsx +import { useState } from 'react'; + +import { unstable_EmbedCreateDocument as EmbedCreateDocument } from '@documenso/embed-react'; + +function DocumentCreator() { + // In a real application, you would fetch this token from your backend + // using your API key at /api/v2-beta/embedding/create-presign-token + const presignToken = 'YOUR_PRESIGN_TOKEN'; + const [documentId, setDocumentId] = useState(null); + + if (documentId) { + return ( +
+

Document Created Successfully!

+

Document ID: {documentId}

+ +
+ ); + } + + return ( +
+ { + setDocumentId(data.documentId); + }} + /> +
+ ); +} + +export default DocumentCreator; +``` + +With embedded authoring, your users can seamlessly create documents within your application, enhancing the overall user experience and streamlining document workflows. diff --git a/apps/documentation/pages/developers/embedding/index.mdx b/apps/documentation/pages/developers/embedding/index.mdx index 3a5535f89..7fd3d4193 100644 --- a/apps/documentation/pages/developers/embedding/index.mdx +++ b/apps/documentation/pages/developers/embedding/index.mdx @@ -169,6 +169,19 @@ Once you've obtained the appropriate tokens, you can integrate the signing exper If you're using **web components**, the integration process is slightly different. Keep in mind that web components are currently less tested but can still provide flexibility for general use cases. +## Embedded Authoring + +In addition to embedding signing experiences, Documenso now supports **embedded authoring**, allowing your users to create documents and templates directly within your application. + +With embedded authoring, you can: + +- Create new documents with custom fields +- Configure document properties and settings +- Set up recipients and signing workflows +- Customize the authoring experience + +For detailed implementation instructions and code examples, see our [Embedded Authoring](/developers/embedding/authoring) guide. + ## Related - [React Integration](/developers/embedding/react) @@ -178,3 +191,4 @@ If you're using **web components**, the integration process is slightly differen - [Preact Integration](/developers/embedding/preact) - [Angular Integration](/developers/embedding/angular) - [CSS Variables](/developers/embedding/css-variables) +- [Embedded Authoring](/developers/embedding/authoring) diff --git a/apps/remix/app/components/embed/authoring/configure-document-upload.tsx b/apps/remix/app/components/embed/authoring/configure-document-upload.tsx index 271a1d8a3..a86ffbcaf 100644 --- a/apps/remix/app/components/embed/authoring/configure-document-upload.tsx +++ b/apps/remix/app/components/embed/authoring/configure-document-upload.tsx @@ -116,9 +116,6 @@ export const ConfigureDocumentUpload = ({ isSubmitting = false }: ConfigureDocum const { getRootProps, getInputProps, isDragActive } = useDropzone({ accept: { 'application/pdf': ['.pdf'], - 'application/msword': ['.doc'], - 'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx'], - 'text/plain': ['.txt'], }, maxSize: APP_DOCUMENT_UPLOAD_SIZE_LIMIT * 1024 * 1024, multiple: false,