feat: Add PDF import functionality and DPI menu#187
feat: Add PDF import functionality and DPI menu#187fnzcmd wants to merge 1 commit into
Conversation
|
@fnzcmd Hey this is pretty cool! I'll need some time to look this over in full, but in the meantime do you think it would be possible to do a bit of refactoring here? I think moving all functionality that relates to the PDF functionality into its own folder would be ideal. Maybe under root folder in
I think minimizing the amount of files modified would be ideal. If a file was modified try to limit it to importing from files under the pdf directory. I'll add some comments where I notice refactoring could be done. |
There was a problem hiding this comment.
@fnzcmd Overall I think this would be a great addition. I do recommend you make the changes regarding refactoring the pdf related features into its own folder so that way it keeps it modularized and easier to navigate the files related to pdf functionality.
| // Plugin to load pdf.worker.min.mjs as text for blob URL creation | ||
| const pdfWorkerPlugin = { | ||
| name: 'pdf-worker-text', | ||
| setup(build) { | ||
| build.onLoad({ filter: /pdf\.worker\.min\.mjs$/ }, async (args) => { | ||
| const contents = readFileSync(args.path, 'utf8'); | ||
| return { | ||
| contents: `export default ${JSON.stringify(contents)};`, | ||
| loader: 'js', | ||
| }; | ||
| }); | ||
| }, | ||
| }; | ||
|
|
There was a problem hiding this comment.
Maybe refactor into extensions/pdf/esbuild-plugin.mjs?
export default {
name: 'pdf-worker-blob',
setup(build) {
build.onLoad({ filter: /pdf\.worker\.min\.mjs$/ }, async (args) => {
const contents = readFileSync(args.path, 'utf8');
return {
contents: 'export default ${JSON.stringify(contents)};`,
loader: 'js',
};
});
},
}Also, I see that the worker code is exported as a string in contents, then made into a blob later on in different places. Perhaps it could be done directly like this?
const pdfWorkerCode = ${JSON.stringify(contents)}
const pdfWorkerBlob = new Blob([pdfWorkerCode], { type: 'application/javascript' })
export default pdfWorkerBlob
This avoid creating multiple blob objects, reusing the one created in this module.
| // Custom context menu with PDF DPI option | ||
| function CustomContextMenu(props: any) { | ||
| const editor = useEditor(); | ||
| const actions = useActions(); | ||
|
|
||
| // Helper to recursively get all descendant shapes | ||
| function getAllDescendants(shapes: any[]): any[] { | ||
| const result: any[] = []; | ||
| for (const shape of shapes) { | ||
| result.push(shape); | ||
| if (shape.type === 'group') { | ||
| const children = editor.getSortedChildIdsForParent(shape.id) | ||
| .map((id: any) => editor.getShape(id)) | ||
| .filter(Boolean); | ||
| result.push(...getAllDescendants(children as any[])); | ||
| } | ||
| } | ||
| return result; | ||
| } | ||
|
|
||
| // Check if any selected shape is a PDF | ||
| const selectedShapes = editor.getSelectedShapes(); | ||
| const allShapes = getAllDescendants(selectedShapes); | ||
| const hasPdfSelected = allShapes.some((shape: any) => { | ||
| if (shape.type !== 'image') return false; | ||
| const asset = editor.getAsset((shape.props as any).assetId); | ||
| return asset && (asset.meta as any)?.isPdfAsset; | ||
| }); | ||
|
|
||
| const handleChangePdfDpi = React.useCallback(() => { | ||
| actions['change-pdf-dpi']?.onSelect('context-menu' as any); | ||
| }, [actions]); | ||
|
|
||
| return ( | ||
| <DefaultContextMenu {...props}> | ||
| {hasPdfSelected && ( | ||
| <TldrawUiMenuGroup id="pdf-options"> | ||
| <TldrawUiMenuItem | ||
| id="change-pdf-dpi" | ||
| label="Change PDF Quality (DPI)" | ||
| onSelect={handleChangePdfDpi} | ||
| /> | ||
| </TldrawUiMenuGroup> | ||
| )} | ||
| <DefaultContextMenuContent /> | ||
| </DefaultContextMenu> | ||
| ); | ||
| } | ||
|
|
||
|
|
There was a problem hiding this comment.
Refactor custom context menu items like so
src/components/TldrawApp.tsx
import { PdfContextMenuItems } from "extensions/pdf/context-menu-items"
function CustomContextMenu(props: any) {
return (
<DefaultContextMenu {...props}>
<PdfContextMenuItems />
<DefaultContextMenuContent />
</DefaultContextMenu>
);
}extensions/pdf/components/context-menu-items.ts
// Custom menu items with PDF DPI option
export function PdfContextMenuItems() {
const editor = useEditor();
const actions = useActions();
// Helper to recursively get all descendant shapes
function getAllDescendants(shapes: any[]): any[] {
const result: any[] = [];
for (const shape of shapes) {
result.push(shape);
if (shape.type === 'group') {
const children = editor.getSortedChildIdsForParent(shape.id)
.map((id: any) => editor.getShape(id))
.filter(Boolean);
result.push(...getAllDescendants(children as any[]));
}
}
return result;
}
// Check if any selected shape is a PDF
const selectedShapes = editor.getSelectedShapes();
const allShapes = getAllDescendants(selectedShapes);
const hasPdfSelected = allShapes.some((shape: any) => {
if (shape.type !== 'image') return false;
const asset = editor.getAsset((shape.props as any).assetId);
return asset && (asset.meta as any)?.isPdfAsset;
});
const handleChangePdfDpi = React.useCallback(() => {
actions['change-pdf-dpi']?.onSelect('context-menu' as any);
}, [actions]);
return (
<>
{hasPdfSelected && (
<TldrawUiMenuGroup id="pdf-options">
<TldrawUiMenuItem
id="change-pdf-dpi"
label="Change PDF Quality (DPI)"
onSelect={handleChangePdfDpi}
/>
</TldrawUiMenuGroup>
)}
</>
);
}|
|
||
|
|
||
| function LocalFileMenu(props: { plugin: TldrawPlugin }) { | ||
| const actions = useActions(); |
There was a problem hiding this comment.
Similar pattern as the context menu
There was a problem hiding this comment.
move into extensions/pdf/components/ folder
There was a problem hiding this comment.
refactor into extensions/pdf/components/ folder
There was a problem hiding this comment.
refactor pdf related logic to extensions/pdf/tldraw/ ?
| const store = createTLStore({ | ||
| snapshot: snapshot, | ||
| shapeUtils: defaultShapeUtils, | ||
| }); | ||
|
|
||
| store.put(storeGroup.main.store.allRecords()); | ||
|
|
There was a problem hiding this comment.
Is there a reason this was changed?
There was a problem hiding this comment.
refactor pdf related stuff to extensions/pdf/tldraw/
There was a problem hiding this comment.
move to extensions/pdf/utils/
There was a problem hiding this comment.
refactor pdf related stuff to extensions/pdf/styles.css and import it into this file
|
@Nikita-Egunov Currently I have no plans to introduce PDF functionality as part of the core plugin features. I think PDF functionality should be implemented as some separate extension on top of this plugin, though an extensions API that allows users (or other plugins) to access tldraw components and hook into the editor does not exist yet. |
feat: Add PDF import functionality with page selection and DPI settings
This PR adds comprehensive PDF import functionality to the tldraw-in-obsidian plugin, allowing users to import PDF files directly into their tldraw canvases with full control over page selection and rendering quality.
Features
PDF Import Modal
1-3,5,7-10)PDF Rendering
pdf-pageshape type: New tldraw shape for native PDF page renderingPdfPageRenderer: React component for rendering PDF pages using PDF.jsPDF Editor Component
DPI Quality Menu
prompt()which doesn't work in Electron/Obsidian)Technical Changes
New Files
Modified Files
esbuild.config.mjs- Added text loader for PDF.js workerpackage.json/package-lock.json- Addedpdfjs-distdependencyContainer Support
Added containerization files for development:
Containerfilecompose.yaml.containerignoreScreenshots
Testing
Breaking Changes
None