Multi-var text plugin (V4)

peteward commented 1 month ago

This plugin is functionally ready for review. The behaviour is shown below:

https://github.com/pdfme/pdfme/assets/7068515/84d5164e-da7b-47e6-be99-15006aba58bd

The idea is to store the variables as a JSON string in content and the typed input as text.

This plugin will allow n variables to be added to a single text field, where n can be >= 0 (so this will also achieve a read-only schema). These variables are automatically detected as you type, and done so in an optimally efficient way that is usable even with dynamic font sizing enabled, as shown in the video above.

This plugin does not support the Form mode. Some thought would be needed as to the UI but it would be doable if people were interested. It would probably need an overlay.

TODO:

[ ] Add tests where applicable

vercel[bot] commented 1 month ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Ignored Deployments

peteward commented 1 month ago

Hi @hand-dot,

Just looking at the Form UI for this plugin.

There are 2 options.

1). Add an overlay for filling in the variables that becomes visible when you select the schema, similar to the prop panel:

Screenshot 2024-04-11 at 08 33 47

This approach would be easier to implement and it would likely require minimal or no modifications to the existing text plugin. However, the UX isn't ideal.

2). Create content-editable sections for all of the variables within the schema:

https://github.com/pdfme/pdfme/assets/7068515/b6ee5412-262a-4c3e-8e7f-5880e1a2a089

This feels like better UX, but it will either require significant duplication of the existing text plugin or refactoring the existing text plugin into smaller functions so that aspects of it can be reused. There will be complexity here as typing within each field will need to consider dynamic font sizing of the overall text area.

It is achievable, but let me know what you think and if you think I should continue the work.

hand-dot commented 1 month ago

@peteward

I believe the ideas and use cases are strong and likely sought after by other users. Let's integrate these into the schemas package.
For the implementation, I prefer the UX approach outlined in option 2.
- To enhance user understanding during input, it would be better to have different designs for the outer border and the placeholder border.
Could you implement it according to option 2? I'd appreciate support until the release.

I have another matter to discuss, unrelated to Multi-var text. If it might take a while, let's discuss it separately.
- Currently, the text schema lacks proper overflow handling for boxes (always behaves like overflow: visible).
- While developing the table schema, I added a mechanism to page break (though there are still bugs).
- How do you feel about adding a feature like overflow: pageBreak to the text schema?
- If we can achieve overflow: pageBreak, it should improve the usability of Multi-var text.
- This should make it even more user-friendly, as variable parts would break onto new pages when they're too long.
- There are also table-related bugs to address before implementation. The timing for this is undecided; it's just an idea. I'd like to hear your thoughts.

peteward commented 1 month ago

Hi @hand-dot,

Thanks for the feedback!

I have a deadline for the end of this week, but once I am passed this I can continue with this implementation.

I agree that the additional outline in form mode is not ideal - this was just a quick visual proof of concept. I will think how we can make it better.

Page breaking is an interesting challenge. Let's consider this extension once the main implementation has been done. I can see more use-cases for this with the existing text schema, so hopefully we can find a solution that works for both schema types.

pdfme / pdfme

Multi-var text plugin (V4) #466

TODO: