Elgato_dark/documenso
1
0
Fork 0
mirror of https://github.com/documenso/documenso synced 2026-04-21 13:27:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

feat: display the field id in dev mode (#2658)

Browse source
This commit is contained in:
Catalin Pit 2026-03-26 15:40:29 +02:00 committed by GitHub
parent 2346de83a6
commit f5b3babcbb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 46 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
apps/docs/content/docs/developers/api/developer-mode.mdx
View file

@ -1,17 +1,22 @@
---
title: Developer Mode
description: Advanced development tools for debugging field coordinates and integrating with the Documenso API.
description: Advanced development tools for debugging field IDs, recipient IDs, coordinates and integrating with the Documenso API.
---
## Overview
Developer mode provides additional tools and features to help you integrate and debug Documenso.
## Field Coordinates
## Field Information
Field coordinates represent the position of a field in a document. They are returned in the `pageX`, `pageY`, `width` and `height` properties of the field.
When enabled, developer mode displays the following information for each field:
To enable field coordinates, add the `devmode=true` query parameter to the editor URL.
- **Field ID** - The unique identifier of the field
- **Recipient ID** - The ID of the recipient assigned to the field
- **Pos X / Pos Y** - The position of the field on the page
- **Width / Height** - The dimensions of the field
To enable developer mode, add the `devmode=true` query parameter to the editor URL.
```bash
# Legacy editor

BIN
apps/docs/public/developer-mode/field-coordinates-legacy-editor.webp
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 596 KiB

After

Width:  |  Height:  |  Size: 117 KiB

BIN
apps/docs/public/developer-mode/field-coordinates-new-editor.webp
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 571 KiB

After

Width:  |  Height:  |  Size: 126 KiB

26
apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx
View file

@ -337,32 +337,42 @@ export const EnvelopeEditorFieldsPage = () => {
</h3>
<div className="space-y-2 rounded-md border border-border bg-muted/50 p-3 text-sm text-foreground">
{selectedField.id && (
<p>
<span className="min-w-12 text-muted-foreground">
<Trans>Field ID:</Trans>
</span>{' '}
{selectedField.id}
</p>
)}
<p>
<span className="min-w-12 text-muted-foreground">
<Trans>Recipient ID:</Trans>
</span>{' '}
{selectedField.recipientId}
</p>
<p>
<span className="min-w-12 text-muted-foreground">
<Trans>Pos X:</Trans>
</span>
&nbsp;
</span>{' '}
{selectedField.positionX.toFixed(2)}
</p>
<p>
<span className="min-w-12 text-muted-foreground">
<Trans>Pos Y:</Trans>
</span>
&nbsp;
</span>{' '}
{selectedField.positionY.toFixed(2)}
</p>
<p>
<span className="min-w-12 text-muted-foreground">
<Trans>Width:</Trans>
</span>
&nbsp;
</span>{' '}
{selectedField.width.toFixed(2)}
</p>
<p>
<span className="min-w-12 text-muted-foreground">
<Trans>Height:</Trans>
</span>
&nbsp;
</span>{' '}
{selectedField.height.toFixed(2)}
</p>
</div>

28
packages/ui/primitives/document-flow/field-item.tsx
View file

@ -333,34 +333,44 @@ const FieldItemInner = ({
</div>
{isDevMode && (
<div className="absolute -top-20 left-1/2 z-50 -translate-x-1/2 rounded-md border border-border bg-background/95 px-2 py-1 shadow-sm backdrop-blur-sm">
<div className="absolute bottom-full left-1/2 z-50 mb-1 -translate-x-1/2 rounded-md border border-border bg-background/95 px-2 py-1 shadow-sm backdrop-blur-sm">
<div className="flex flex-col gap-0.5 text-[9px]">
{field.nativeId && (
<span>
<span className="text-muted-foreground">
<Trans>Field ID:</Trans>
</span>{' '}
<span className="font-mono text-foreground">{field.nativeId}</span>
</span>
)}
<span>
<span className="text-muted-foreground">
<Trans>Recipient ID:</Trans>
</span>{' '}
<span className="font-mono text-foreground">{field.recipientId}</span>
</span>
<span>
<span className="text-muted-foreground">
<Trans>Pos X:</Trans>
</span>
&nbsp;
</span>{' '}
<span className="font-mono text-foreground">{field.pageX.toFixed(2)}</span>
</span>
<span>
<span className="text-muted-foreground">
<Trans>Pos Y:</Trans>
</span>
&nbsp;
</span>{' '}
<span className="font-mono text-foreground">{field.pageY.toFixed(2)}</span>
</span>
<span>
<span className="text-muted-foreground">
<Trans>Width:</Trans>
</span>
&nbsp;
</span>{' '}
<span className="font-mono text-foreground">{field.pageWidth.toFixed(2)}</span>
</span>
<span>
<span className="text-muted-foreground">
<Trans>Height:</Trans>
</span>
&nbsp;
</span>{' '}
<span className="font-mono text-foreground">{field.pageHeight.toFixed(2)}</span>
</span>
</div>