mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2025-08-21 19:59:24 +00:00
40936efe8d
# Description of Changes
- add **import** and **export buttons** to bookmark editor (bottom
right) to **copy and past bookmark data**
- the export reads the hidden `<input id="bookmarkData">` field and uses
`navigator.clipboard.writeText()` to copy it to the clipboard
- the import reads from `navigator.clipboard.readText()` and sets the
internal `bookmarks` variable, which is used to update the UI elements
- after successful import or export, the buttons flash in green to give
visual feedback to the user
- this provides non-technical users with an intuitive method to copy
bookmarks between files
- I have seen, that this is also possible with the pipeline tool, but
this requires multiple steps and familiarity with the pipeline:
1. use `extract-bookmarks` to generate `bookmarks.json`
2. open the file and copy the data
3. use `edit-table-of-contents` with the copied data
4. process the target file
- challenges:
- I used `navigator.clipboard` as opposed to `document.execCommand`. The
latter is used in `account.html`, `errorBanner.html` and
`errorBanner.js`, but is
[deprecated](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand).
- I used the bootstrap-style rendering for the title attribute tooltip
for visual consistency in the bookmark editor, where the tooltip hovers
centered above the originating element. However, in most other places
the title tooltip follows the cursor and is slightly visually different.
- in case you are testing this on a mobile device (EDIT: or non-locally
hosted), the copy-to-clipboard might fail when hosted without SSL
(mobile only works in secure environment)
- similarly, when not using normal user interaction (i.e.
`element.click()` via console) the copy-to-clipboard will throw an error
`Clipboard write was blocked due to lack of user activation.`
---
## Checklist
### General
- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [x] I have performed a self-review of my own code
- [x] My changes generate no new warnings
### Documentation
- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [x] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)
### UI Changes (if applicable)
- [x] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)
<img width="600" alt="Bookmark editor with new Import/Export buttons in
the bottom right corner" title="Bookmark editor with new Import/Export
buttons in the bottom right corner"
src="https://github.com/user-attachments/assets/61b948a1-9f68-4793-9c86-a056bad6b7e1"
/>
<img width="300" alt="Bookmark editor with new Import/Export buttons
with low width layout" title="Bookmark editor with new Import/Export
buttons with low width layout"
src="https://github.com/user-attachments/assets/4fa7bc76-ca11-4268-b83a-8d1e612dc5b9"
/>
### Testing (if applicable)
- [x] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.