Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: added Form Annotation support #2845

Open
wants to merge 32 commits into
base: master
Choose a base branch
from

Conversation

natterstefan
Copy link

@natterstefan natterstefan commented Aug 18, 2024

Tasks

Notes

Docs

Example PDF

Example 2.0.pdf

Copy link

changeset-bot bot commented Aug 18, 2024

⚠️ No Changeset found

Latest commit: e1e3726

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Comment on lines 11 to 16
export const Form = 'FORM';
export const FormField = 'FORM_FIELD';
export const TextInput = 'TEXT_INPUT';
export const FormPushButton = 'FORM_PUSH_BUTTON';
export const Picker = 'PICKER';
export const FormList = 'FORM_LIST';
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think of keeping the initial names of these components to keep them aligned with the form annotation methods of PDFKit?

formText( name, x, y, width, height, options)
formPushButton( name, x, y, width, height, name, options)
formCombo( name, x, y, width, height, options)
formList( name, x, y, width, height, options)

(src)

@PhilippBloss
Copy link

Right now, push buttons don't have any purpose. They are only there to exist. They cannot hold any value. There should be an option for the user to specify an 8.6.4 action (from PDF Reference 1.7) for this button. Even if it's just on a basic level. Going too detailed e.g. with 8.5.3 actions would go beyond the scope of the pr. What do you think?

@natterstefan
Copy link
Author

Right now, push buttons don't have any purpose. They are only there to exist. They cannot hold any value. There should be an option for the user to specify an 8.6.4 action (from PDF Reference 1.7) for this button. Even if it's just on a basic level. Going too detailed e.g. with 8.5.3 actions would go beyond the scope of the pr. What do you think?

Yes, it's beyond this scope. Let's keep it "small" by introducing the first version of form elements first and then improve from there.

@natterstefan
Copy link
Author

Hi @diegomura, what do you think about this feature request?

Copy link
Owner

@diegomura diegomura left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I love this. Thanks so much for putting this together. I'd like to get this merged soon.

Left a small comment about primitive naming.

Also I think we should add docs in the site (https://github.com/diegomura/react-pdf-site) after this lands. Can you take care of them? 🙏🏻 Not a blocker to merge this once we settle on namings

@@ -8,6 +8,11 @@ export const Note = 'NOTE';
export const Path = 'PATH';
export const Rect = 'RECT';
export const Line = 'LINE';
export const FormField = 'FORM_FIELD';
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not a strong opinion, but would Form be more semantic? For Field I imagine like an input, but this is actually a form wrapper

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @diegomura,

thanks for your response. Let's see what I suggested here in the past: #2845 (comment). 🤔

My initial thought was to align the names with the ones used in pdfkit (here). So TextInput becomes FormText, Picker becomes FormPicker, and so on. But you made a valid point back in 2022 suggesting we should stick to the native web primitives. I got used to the current names while preparing the PR.

Regarding FormField: I chose the same name as pdfkit mainly to align our (react-pdf) and their (pdfkit) docs and keep them similar. I don't know if that's practical.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about something like FormGroup? Form rather sounds like the single and complete set of inputs, but they rather are a subsection. E.g., you could separate billing address and shipping address into two groups.

Copy link
Author

@natterstefan natterstefan Oct 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @PhilippBloss,

your suggestion makes sense to me, considering what pdfkit states in their docs as well:

Using the formField method you might create a shipping field that is added to the root of the document, an address field that refers to the shipping field as it's parent, and a street Form Annotation that would refer to the address field as it's parent.

What do you think of fieldset(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset):

The <fieldset> HTML element is used to group several controls as well as labels (<label>) within a web form.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants