feat: added Form Annotation support #2845

natterstefan · 2024-08-18T19:00:09Z

Tasks

fix dependency cycle (also mentioned here). @diegomura: I am not sure how though... #need-help
discuss component names (see feat: added Form Annotation support #2845 (comment), and feat: added Form Annotation support #2845 (comment))
fix macOS (feat: added Form Annotation support #2845 (comment))

Related PR

Form Annotation Docs react-pdf-site#145

Notes

based on the September 2022 PR feat: add Form Annotation support #2013 initially started by @axel7083
used @runelk's branch as the base branch for this one
applied initForm fix by @kjossendal, see feat: add Form Annotation support #2013 (comment)

Docs

https://pdfkit.org/docs/forms.html

Example PDF

Example 2.0.pdf

changeset-bot · 2024-08-18T19:00:12Z

⚠️ No Changeset found

Latest commit: b6995a3

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

packages/pdfkit/src/mixins/acroform.js

natterstefan · 2024-08-18T19:08:53Z

packages/primitives/src/index.js

+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';


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)

packages/render/src/primitives/renderNode.js

packages/examples/src/form/index.jsx

PhilippBloss · 2024-08-25T17:18:37Z

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?

packages/render/src/primitives/form/renderCheckbox.js

packages/render/src/primitives/form/renderTextInput.js

packages/renderer/index.d.ts

…mField

natterstefan · 2024-09-06T13:45:29Z

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

diegomura

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

diegomura · 2024-09-22T15:10:37Z

packages/primitives/src/index.js

@@ -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';


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

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.

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.

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.

Sounds good as well. Would give the decision to @diegomura

Would take over the docs, except @natterstefan has already started with those

Would take over the docs, except @natterstefan has already started with those

Hi @PhilippBloss, I haven't taken care of the docs yet. You can take over the docs if you want to or we can share the task. It's fine for me.

Also thanks for the review. I will try to apply your suggestions tomorrow or at least in the next few days.

Thanks for the ping @diegomura.

packages/renderer/index.d.ts

GauravB159 · 2024-11-14T07:55:10Z

Would love to see this get merged! I'd love to contribute as well if there's a blocker

diegomura · 2024-11-17T01:31:49Z

@PhilippBloss thanks for the review here. Would love to take this to the finish line. Are you still open to take care of the docs? 🙏🏻

PhilippBloss · 2024-11-19T15:48:20Z

@PhilippBloss thanks for the review here. Would love to take this to the finish line. Are you still open to take care of the docs? 🙏🏻

Initially I wanted to wait for a decision on the component names, but I made a todo: diegomura/react-pdf-site#145

# By Diego Muracciole (31) and others # Via GitHub * upstream/master: (60 commits) feat: allow units for page size (diegomura#2773) chore: bump jay-peg chore: release packages (diegomura#2981) fix(textkit): make indentation only affect first line. (diegomura#2975) fix: conditional rendering (diegomura#2983) fix(reconciler): missing dependencies (diegomura#2980) chore: release packages (diegomura#2959) feat: rem border widths (diegomura#2960) fix: add scheduler dependency (diegomura#2958) chore: update README chore: release packages (diegomura#2953) feat: support rem units (diegomura#2955) feat: add image stress test example (diegomura#2954) feat: support multiple line-height units (diegomura#2952) chore: release packages (diegomura#2946) fix: note rendering (diegomura#2951) feat: accept commas between transformations (diegomura#2950) fix: document metadata setters (diegomura#2949) fix: stroke dash array computation (diegomura#2948) feat: remove cross-fetch (diegomura#2947) ... # Conflicts: # packages/renderer/index.d.ts

natterstefan · 2024-12-06T09:24:13Z

Hi @diegomura,
Hi @PhilippBloss,

I just made the branch compatible with 4.x and took care of @PhilippBloss' feedback. The only that is left now is deciding which names we choose for the components:

Option 1 - align with pdfkit

<FormField />
<FormText />
<FormCombo />
<FormCheckbox />
<FormList />

Option 2 - web standards

<Fieldset />
<InputText /> (not 100% aligned as it would be <input type="text" />)
<Select />
<Checkbox /> (Alternative InputCheckbox, anyway not 100% aligned as it would be <input type="checkbox" />)
<List /> (also not 100% aligned but there are ol and ul lists)

I favour Option 1 more as there is a connect to the used library used for forms. What do you think?

(previous discussion: #2845 (comment), and #2845 (comment))

natterstefan · 2024-12-10T07:41:31Z

Hey @diegomura, Hey @PhilippBloss,

can you take a look at my last thoughts please? Thank you!

axel7083 and others added 15 commits September 8, 2022 16:41

Adding Form Annotation

eee292a

Adding types

e39acab

Fixing FormField scope issue and adding Unit Test

51b4493

HotFix: Preventing problem in renderFormCombo for accessing node.box

687aa06

fix: lint

b562369

Merge remote-tracking branch 'axel7083/master'

824d05c

Change FormText to TextInput for more consistent naming.

f20153a

Change FormCombo to Picker for more consistent naming.

33ef422

Fix spelling error.

c36d8c9

Merge remote-tracking branch 'runelk/master'

24183a0

chore: format code

6264795

test: fixed tests

e6fa36b

fix: fixed types

9f68eaa

fix: fixed issue when using <Form/> multiple times

c6f86f5

feat: added form example

49322f8

natterstefan commented Aug 18, 2024

View reviewed changes

packages/pdfkit/src/mixins/acroform.js Outdated Show resolved Hide resolved

feat: updated example

81b75d2

natterstefan commented Aug 18, 2024

View reviewed changes

packages/render/src/primitives/renderNode.js Outdated Show resolved Hide resolved

natterstefan added 2 commits August 18, 2024 21:15

test: fixed tests

8aa7a0a

feat: updated example

d05e812

natterstefan commented Aug 19, 2024

View reviewed changes

packages/render/src/primitives/renderNode.js Outdated Show resolved Hide resolved

feat: added checkbox

a08b945

natterstefan commented Aug 19, 2024

View reviewed changes

packages/examples/src/form/index.jsx Outdated Show resolved Hide resolved

natterstefan added 2 commits August 19, 2024 10:42

fix: fixed types

c7fb5e2

feat: added multiline example

d9a1e84

natterstefan added 2 commits August 28, 2024 16:20

feat: added support for checked appearance (Checkbox)

96e4d7d

feat: removed Form component, check AcroForm in form components

7162e6f

fix: revert changes in acroform

43bd666

natterstefan requested a review from PhilippBloss August 28, 2024 14:56

feat: improved macos appearance

39cb88a

PhilippBloss reviewed Aug 30, 2024

View reviewed changes

packages/render/src/primitives/form/renderCheckbox.js Outdated Show resolved Hide resolved

PhilippBloss reviewed Aug 30, 2024

View reviewed changes

packages/render/src/primitives/form/renderTextInput.js Outdated Show resolved Hide resolved

PhilippBloss reviewed Aug 30, 2024

View reviewed changes

packages/renderer/index.d.ts Outdated Show resolved Hide resolved

natterstefan added 2 commits September 1, 2024 20:38

feat: removed requirement to render TextInput and Checkbox within For…

81dc6fa

…mField

fix: fixed PDF appearance on macOS (e.g. checked Checkbox)

e1e3726

natterstefan requested a review from PhilippBloss September 1, 2024 18:44

diegomura reviewed Sep 22, 2024

View reviewed changes

PhilippBloss reviewed Oct 5, 2024

View reviewed changes

packages/renderer/index.d.ts Outdated Show resolved Hide resolved

PhilippBloss reviewed Oct 5, 2024

View reviewed changes

packages/renderer/index.d.ts Outdated Show resolved Hide resolved

PhilippBloss reviewed Oct 6, 2024

View reviewed changes

packages/renderer/index.d.ts Show resolved Hide resolved

PhilippBloss reviewed Oct 12, 2024

View reviewed changes

packages/renderer/index.d.ts Outdated Show resolved Hide resolved

diegomura force-pushed the master branch from 15f2ccd to 9075655 Compare November 17, 2024 09:35

PhilippBloss added a commit to PhilippBloss/react-pdf-site that referenced this pull request Nov 19, 2024

Docs for diegomura/react-pdf#2845

800d6fe

PhilippBloss mentioned this pull request Nov 19, 2024

Form Annotation Docs diegomura/react-pdf-site#145

Open

2 tasks

natterstefan added 5 commits December 5, 2024 18:22

feat: applied feedback (types)

0868599

feat: added example form to next-14 and next-15

3409ca1

test: updated tests and marked two as todo

1402f9e

feat: exported class types

b6995a3

natterstefan requested review from diegomura and PhilippBloss December 6, 2024 09:10

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: added Form Annotation support #2845

feat: added Form Annotation support #2845

natterstefan commented Aug 18, 2024 •

edited

Loading

changeset-bot bot commented Aug 18, 2024 •

edited

Loading

natterstefan Aug 18, 2024

PhilippBloss commented Aug 25, 2024

natterstefan commented Sep 6, 2024

diegomura left a comment

diegomura Sep 22, 2024

natterstefan Sep 23, 2024

PhilippBloss Sep 29, 2024

natterstefan Oct 2, 2024 •

edited

Loading

PhilippBloss Oct 5, 2024

PhilippBloss Oct 5, 2024

natterstefan Nov 17, 2024

GauravB159 commented Nov 14, 2024

diegomura commented Nov 17, 2024

PhilippBloss commented Nov 19, 2024

natterstefan commented Dec 6, 2024 •

edited

Loading

natterstefan commented Dec 10, 2024

feat: added Form Annotation support #2845

Are you sure you want to change the base?

feat: added Form Annotation support #2845

Conversation

natterstefan commented Aug 18, 2024 • edited Loading

Tasks

Related PR

Notes

Docs

Example PDF

changeset-bot bot commented Aug 18, 2024 • edited Loading

⚠️ No Changeset found

natterstefan Aug 18, 2024

Choose a reason for hiding this comment

PhilippBloss commented Aug 25, 2024

natterstefan commented Sep 6, 2024

diegomura left a comment

Choose a reason for hiding this comment

diegomura Sep 22, 2024

Choose a reason for hiding this comment

natterstefan Sep 23, 2024

Choose a reason for hiding this comment

PhilippBloss Sep 29, 2024

Choose a reason for hiding this comment

natterstefan Oct 2, 2024 • edited Loading

Choose a reason for hiding this comment

PhilippBloss Oct 5, 2024

Choose a reason for hiding this comment

PhilippBloss Oct 5, 2024

Choose a reason for hiding this comment

natterstefan Nov 17, 2024

Choose a reason for hiding this comment

GauravB159 commented Nov 14, 2024

diegomura commented Nov 17, 2024

PhilippBloss commented Nov 19, 2024

natterstefan commented Dec 6, 2024 • edited Loading

Option 1 - align with pdfkit

Option 2 - web standards

natterstefan commented Dec 10, 2024

natterstefan commented Aug 18, 2024 •

edited

Loading

changeset-bot bot commented Aug 18, 2024 •

edited

Loading

natterstefan Oct 2, 2024 •

edited

Loading

natterstefan commented Dec 6, 2024 •

edited

Loading