feat: add Images to PDF conversion tool (closes #261)#272
Merged
iib0011 merged 2 commits intoiib0011:mainfrom Oct 29, 2025
Merged
feat: add Images to PDF conversion tool (closes #261)#272iib0011 merged 2 commits intoiib0011:mainfrom
iib0011 merged 2 commits intoiib0011:mainfrom
Conversation
Chesterkxng
reviewed
Oct 27, 2025
| heightPx: number; | ||
| } | null>(null); | ||
|
|
||
| const compute = async (file: File | null, currentScale: number) => { |
Collaborator
There was a problem hiding this comment.
Create a service.ts file with this util method
Chesterkxng
reviewed
Oct 27, 2025
| } | ||
| }; | ||
|
|
||
| useEffect(() => { |
Collaborator
There was a problem hiding this comment.
Remove this useEffect, You should use the same signature for the compute function as in the protect-pdf index file
and use it in ToolContent (compute={compute})
Chesterkxng
requested changes
Oct 27, 2025
| title={title} | ||
| input={input} | ||
| inputComponent={ | ||
| <Box display="flex" flexDirection="column" gap={3}> |
Collaborator
There was a problem hiding this comment.
Here; just the input box has to be in the inputComponent.
The following options will be added in getGroups props
Comment on lines
+126
to
+192
| <Box> | ||
| <Typography gutterBottom>PDF Type</Typography> | ||
| <RadioGroup | ||
| row | ||
| value={pageType} | ||
| onChange={(e) => setPageType(e.target.value as 'a4' | 'full')} | ||
| > | ||
| <FormControlLabel | ||
| value="a4" | ||
| control={<Radio />} | ||
| label="A4 Page" | ||
| /> | ||
| <FormControlLabel | ||
| value="full" | ||
| control={<Radio />} | ||
| label="Full Size (Same as Image)" | ||
| /> | ||
| </RadioGroup> | ||
|
|
||
| {pageType === 'full' && imageSize && ( | ||
| <Typography variant="body2" color="text.secondary"> | ||
| Image size: {imageSize.widthMm.toFixed(1)} ×{' '} | ||
| {imageSize.heightMm.toFixed(1)} mm ({imageSize.widthPx} ×{' '} | ||
| {imageSize.heightPx} px) | ||
| </Typography> | ||
| )} | ||
| </Box> | ||
|
|
||
| {pageType === 'a4' && ( | ||
| <> | ||
| <Box> | ||
| <Typography gutterBottom>Orientation</Typography> | ||
| <RadioGroup | ||
| row | ||
| value={orientation} | ||
| onChange={(e) => | ||
| setOrientation(e.target.value as 'portrait' | 'landscape') | ||
| } | ||
| > | ||
| <FormControlLabel | ||
| value="portrait" | ||
| control={<Radio />} | ||
| label="Portrait (Vertical)" | ||
| /> | ||
| <FormControlLabel | ||
| value="landscape" | ||
| control={<Radio />} | ||
| label="Landscape (Horizontal)" | ||
| /> | ||
| </RadioGroup> | ||
| </Box> | ||
|
|
||
| <Box> | ||
| <Typography gutterBottom>Scale image: {scale}%</Typography> | ||
| <Slider | ||
| value={scale} | ||
| onChange={(_, v) => setScale(v as number)} | ||
| onChangeCommitted={(_, v) => compute(input, v as number)} | ||
| min={10} | ||
| max={100} | ||
| step={1} | ||
| valueLabelDisplay="auto" | ||
| /> | ||
| </Box> | ||
| </> | ||
| )} | ||
| </Box> |
Collaborator
There was a problem hiding this comment.
This have to be moved in getGroups props.
| resultComponent={ | ||
| <ToolFileResult title={'Output PDF'} value={result} extension={'pdf'} /> | ||
| } | ||
| compute={() => compute(input, scale)} |
Comment on lines
+19
to
+29
| const [scale, setScale] = useState<number>(100); | ||
| const [orientation, setOrientation] = useState<'portrait' | 'landscape'>( | ||
| 'portrait' | ||
| ); | ||
| const [pageType, setPageType] = useState<'a4' | 'full'>('a4'); | ||
| const [imageSize, setImageSize] = useState<{ | ||
| widthMm: number; | ||
| heightMm: number; | ||
| widthPx: number; | ||
| heightPx: number; | ||
| } | null>(null); |
Collaborator
There was a problem hiding this comment.
create a file nammed types.ts for InitialValuesType then initialize it before the react component.
for every comment, you can check what has been done in protect-pdf folder for example
Chesterkxng
reviewed
Oct 27, 2025
Collaborator
Chesterkxng
left a comment
Chesterkxng
left a comment
There was a problem hiding this comment.
Thanks you for your contribution.
Please checkout the changes requested.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR implements the feature requested in #261 — converting images to PDF.
Changes
ConvertToPdftool under PDF toolsjsPDFfor PDF generation