saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-08-21 19:59:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

feature: import and export bookmarks to clipboard (#4093)

Browse Source 
# 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.
This commit is contained in:
Lukas 2025-08-08 13:48:36 +02:00 committed by GitHub
parent b77d02e988
commit 40936efe8d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
44 changed files with 772 additions and 245 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/core/src/main/resources/messages_ar_AR.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Replace existing bookmarks (uncheck to appen
editTableOfContents.editorTitle=Bookmark Editor
editTableOfContents.editorDesc=Add and arrange bookmarks below. Click + to add child bookmarks.
editTableOfContents.addBookmark=Add New Bookmark
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=This tool allows you to add or edit the table of contents (bookmarks) in a PDF document.
editTableOfContents.desc.2=You can create a hierarchical structure by adding child bookmarks to parent bookmarks.
editTableOfContents.desc.3=Each bookmark requires a title and target page number.

6
app/core/src/main/resources/messages_az_AZ.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Replace existing bookmarks (uncheck to appen
editTableOfContents.editorTitle=Bookmark Editor
editTableOfContents.editorDesc=Add and arrange bookmarks below. Click + to add child bookmarks.
editTableOfContents.addBookmark=Add New Bookmark
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=This tool allows you to add or edit the table of contents (bookmarks) in a PDF document.
editTableOfContents.desc.2=You can create a hierarchical structure by adding child bookmarks to parent bookmarks.
editTableOfContents.desc.3=Each bookmark requires a title and target page number.

6
app/core/src/main/resources/messages_bg_BG.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Replace existing bookmarks (uncheck to appen
editTableOfContents.editorTitle=Bookmark Editor
editTableOfContents.editorDesc=Add and arrange bookmarks below. Click + to add child bookmarks.
editTableOfContents.addBookmark=Add New Bookmark
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=This tool allows you to add or edit the table of contents (bookmarks) in a PDF document.
editTableOfContents.desc.2=You can create a hierarchical structure by adding child bookmarks to parent bookmarks.
editTableOfContents.desc.3=Each bookmark requires a title and target page number.

6
app/core/src/main/resources/messages_bo_CN.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Replace existing bookmarks (uncheck to appen
editTableOfContents.editorTitle=Bookmark Editor
editTableOfContents.editorDesc=Add and arrange bookmarks below. Click + to add child bookmarks.
editTableOfContents.addBookmark=Add New Bookmark
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=This tool allows you to add or edit the table of contents (bookmarks) in a PDF document.
editTableOfContents.desc.2=You can create a hierarchical structure by adding child bookmarks to parent bookmarks.
editTableOfContents.desc.3=Each bookmark requires a title and target page number.

6
app/core/src/main/resources/messages_ca_CA.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Replace existing bookmarks (uncheck to appen
editTableOfContents.editorTitle=Bookmark Editor
editTableOfContents.editorDesc=Add and arrange bookmarks below. Click + to add child bookmarks.
editTableOfContents.addBookmark=Add New Bookmark
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=This tool allows you to add or edit the table of contents (bookmarks) in a PDF document.
editTableOfContents.desc.2=You can create a hierarchical structure by adding child bookmarks to parent bookmarks.
editTableOfContents.desc.3=Each bookmark requires a title and target page number.

6
app/core/src/main/resources/messages_cs_CZ.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Replace existing bookmarks (uncheck to appen
editTableOfContents.editorTitle=Bookmark Editor
editTableOfContents.editorDesc=Add and arrange bookmarks below. Click + to add child bookmarks.
editTableOfContents.addBookmark=Add New Bookmark
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=This tool allows you to add or edit the table of contents (bookmarks) in a PDF document.
editTableOfContents.desc.2=You can create a hierarchical structure by adding child bookmarks to parent bookmarks.
editTableOfContents.desc.3=Each bookmark requires a title and target page number.

6
app/core/src/main/resources/messages_da_DK.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Replace existing bookmarks (uncheck to appen
editTableOfContents.editorTitle=Bookmark Editor
editTableOfContents.editorDesc=Add and arrange bookmarks below. Click + to add child bookmarks.
editTableOfContents.addBookmark=Add New Bookmark
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=This tool allows you to add or edit the table of contents (bookmarks) in a PDF document.
editTableOfContents.desc.2=You can create a hierarchical structure by adding child bookmarks to parent bookmarks.
editTableOfContents.desc.3=Each bookmark requires a title and target page number.

6
app/core/src/main/resources/messages_de_DE.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Vorhandene Lesezeichen ersetzen (deaktiviere
editTableOfContents.editorTitle=Lesezeichen-Editor
editTableOfContents.editorDesc=Fügen unten Lesezeichen hinzu und ordne sie an. Klicke auf +, um das untergeordnete Lesezeichen hinzuzufügen.
editTableOfContents.addBookmark=Neues Lesezeichen hinzufügen
editTableOfContents.importBookmarksDefault=Importieren
editTableOfContents.importBookmarksFromJsonFile=JSON-Datei hochladen
editTableOfContents.importBookmarksFromClipboard=Aus Zwischenablage einfügen
editTableOfContents.exportBookmarksDefault=Exportieren
editTableOfContents.exportBookmarksAsJson=Als JSON herunterladen
editTableOfContents.exportBookmarksAsText=Als Text kopieren
editTableOfContents.desc.1=Mit diesem Werkzeug können Sie das Inhaltsverzeichnis (Lesezeichen) eines PDF-Dokuments hinzufügen oder bearbeiten.
editTableOfContents.desc.2=Sie können eine hierarchische Struktur erstellen, indem Sie untergeordnete Lesezeichen zu übergeordneten hinzufügen.
editTableOfContents.desc.3=Jedes Lesezeichen benötigt einen Titel und eine Seitenzahl.

6
app/core/src/main/resources/messages_el_GR.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Replace existing bookmarks (uncheck to appen
editTableOfContents.editorTitle=Bookmark Editor
editTableOfContents.editorDesc=Add and arrange bookmarks below. Click + to add child bookmarks.
editTableOfContents.addBookmark=Add New Bookmark
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=This tool allows you to add or edit the table of contents (bookmarks) in a PDF document.
editTableOfContents.desc.2=You can create a hierarchical structure by adding child bookmarks to parent bookmarks.
editTableOfContents.desc.3=Each bookmark requires a title and target page number.

6
app/core/src/main/resources/messages_en_GB.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Replace existing bookmarks (uncheck to appen
editTableOfContents.editorTitle=Bookmark Editor
editTableOfContents.editorDesc=Add and arrange bookmarks below. Click + to add child bookmarks.
editTableOfContents.addBookmark=Add New Bookmark
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=This tool allows you to add or edit the table of contents (bookmarks) in a PDF document.
editTableOfContents.desc.2=You can create a hierarchical structure by adding child bookmarks to parent bookmarks.
editTableOfContents.desc.3=Each bookmark requires a title and target page number.

6
app/core/src/main/resources/messages_en_US.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Replace existing bookmarks (uncheck to appen
editTableOfContents.editorTitle=Bookmark Editor
editTableOfContents.editorDesc=Add and arrange bookmarks below. Click + to add child bookmarks.
editTableOfContents.addBookmark=Add New Bookmark
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=This tool allows you to add or edit the table of contents (bookmarks) in a PDF document.
editTableOfContents.desc.2=You can create a hierarchical structure by adding child bookmarks to parent bookmarks.
editTableOfContents.desc.3=Each bookmark requires a title and target page number.

6
app/core/src/main/resources/messages_es_ES.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Replace existing bookmarks (uncheck to appen
editTableOfContents.editorTitle=Bookmark Editor
editTableOfContents.editorDesc=Add and arrange bookmarks below. Click + to add child bookmarks.
editTableOfContents.addBookmark=Add New Bookmark
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=This tool allows you to add or edit the table of contents (bookmarks) in a PDF document.
editTableOfContents.desc.2=You can create a hierarchical structure by adding child bookmarks to parent bookmarks.
editTableOfContents.desc.3=Each bookmark requires a title and target page number.

6
app/core/src/main/resources/messages_eu_ES.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Replace existing bookmarks (uncheck to appen
editTableOfContents.editorTitle=Bookmark Editor
editTableOfContents.editorDesc=Add and arrange bookmarks below. Click + to add child bookmarks.
editTableOfContents.addBookmark=Add New Bookmark
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=This tool allows you to add or edit the table of contents (bookmarks) in a PDF document.
editTableOfContents.desc.2=You can create a hierarchical structure by adding child bookmarks to parent bookmarks.
editTableOfContents.desc.3=Each bookmark requires a title and target page number.

6
app/core/src/main/resources/messages_fa_IR.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Replace existing bookmarks (uncheck to appen
editTableOfContents.editorTitle=Bookmark Editor
editTableOfContents.editorDesc=Add and arrange bookmarks below. Click + to add child bookmarks.
editTableOfContents.addBookmark=Add New Bookmark
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=This tool allows you to add or edit the table of contents (bookmarks) in a PDF document.
editTableOfContents.desc.2=You can create a hierarchical structure by adding child bookmarks to parent bookmarks.
editTableOfContents.desc.3=Each bookmark requires a title and target page number.

6
app/core/src/main/resources/messages_fr_FR.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Remplacer les signets existants (décocher p
editTableOfContents.editorTitle=Éditeur de signets
editTableOfContents.editorDesc=Ajoutez et organisez les signets ci-dessous. Cliquez sur + pour ajouter des signets enfants.
editTableOfContents.addBookmark=Ajouter un nouveau signet
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=Cet outil vous permet d'ajouter ou de modifier la table des matières (signets) dans un document PDF.
editTableOfContents.desc.2=Vous pouvez créer une structure hiérarchique en ajoutant des signets enfants à des signets parents.
editTableOfContents.desc.3=Chaque signet nécessite un titre et un numéro de page cible.

6
app/core/src/main/resources/messages_ga_IE.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Replace existing bookmarks (uncheck to appen
editTableOfContents.editorTitle=Bookmark Editor
editTableOfContents.editorDesc=Add and arrange bookmarks below. Click + to add child bookmarks.
editTableOfContents.addBookmark=Add New Bookmark
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=This tool allows you to add or edit the table of contents (bookmarks) in a PDF document.
editTableOfContents.desc.2=You can create a hierarchical structure by adding child bookmarks to parent bookmarks.
editTableOfContents.desc.3=Each bookmark requires a title and target page number.

6
app/core/src/main/resources/messages_hi_IN.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Replace existing bookmarks (uncheck to appen
editTableOfContents.editorTitle=Bookmark Editor
editTableOfContents.editorDesc=Add and arrange bookmarks below. Click + to add child bookmarks.
editTableOfContents.addBookmark=Add New Bookmark
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=This tool allows you to add or edit the table of contents (bookmarks) in a PDF document.
editTableOfContents.desc.2=You can create a hierarchical structure by adding child bookmarks to parent bookmarks.
editTableOfContents.desc.3=Each bookmark requires a title and target page number.

6
app/core/src/main/resources/messages_hr_HR.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Replace existing bookmarks (uncheck to appen
editTableOfContents.editorTitle=Bookmark Editor
editTableOfContents.editorDesc=Add and arrange bookmarks below. Click + to add child bookmarks.
editTableOfContents.addBookmark=Add New Bookmark
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=This tool allows you to add or edit the table of contents (bookmarks) in a PDF document.
editTableOfContents.desc.2=You can create a hierarchical structure by adding child bookmarks to parent bookmarks.
editTableOfContents.desc.3=Each bookmark requires a title and target page number.

6
app/core/src/main/resources/messages_hu_HU.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Meglévő könyvjelzők cseréje (törölje
editTableOfContents.editorTitle=Könyvjelző szerkesztő
editTableOfContents.editorDesc=Könyvjelzők hozzáadása és rendezése lent. Kattintson a + gombra gyermek könyvjelzők hozzáadásához.
editTableOfContents.addBookmark=Új könyvjelző hozzáadása
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=Ez az eszköz lehetővé teszi a tartalomjegyzék (könyvjelzők) hozzáadását vagy szerkesztését egy PDF dokumentumban.
editTableOfContents.desc.2=Hierarchikus struktúrákat hozhat létre, ha gyermek könyvjelzőket ad a szülő könyvjelzőkhöz.
editTableOfContents.desc.3=Minden könyvjelzőhöz szükséges egy cím és egy céloldalszám.

6
app/core/src/main/resources/messages_id_ID.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Replace existing bookmarks (uncheck to appen
editTableOfContents.editorTitle=Bookmark Editor
editTableOfContents.editorDesc=Add and arrange bookmarks below. Click + to add child bookmarks.
editTableOfContents.addBookmark=Add New Bookmark
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=This tool allows you to add or edit the table of contents (bookmarks) in a PDF document.
editTableOfContents.desc.2=You can create a hierarchical structure by adding child bookmarks to parent bookmarks.
editTableOfContents.desc.3=Each bookmark requires a title and target page number.

6
app/core/src/main/resources/messages_it_IT.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Sostituisci i segnalibri esistenti (deselezi
editTableOfContents.editorTitle=Editor segnalibri
editTableOfContents.editorDesc=Aggiungi e disponi i segnalibri qui sotto. Fai clic su + per aggiungere segnalibri secondari.
editTableOfContents.addBookmark=Aggiungi nuovo segnalibro
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=Questo strumento consente di aggiungere o modificare il sommario (segnalibri) in un documento PDF.
editTableOfContents.desc.2=È possibile creare una struttura gerarchica aggiungendo segnalibri secondari a quelli principali.
editTableOfContents.desc.3=Ogni segnalibro richiede un titolo e un numero di pagina di destinazione.

6
app/core/src/main/resources/messages_ja_JP.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=既存のしおりを置き換える（既
editTableOfContents.editorTitle=しおりエディター
editTableOfContents.editorDesc=以下にしおりを追加して配置します。+をクリックして、子のしおりを追加します。
editTableOfContents.addBookmark=新しいしおりを追加
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=このツールを使用すると、PDFドキュメントに目次（しおり）を追加または編集できます。
editTableOfContents.desc.2=親しおりに子しおりを追加することで階層構造を作成できます。
editTableOfContents.desc.3=各しおりにはタイトルと対象のページ番号が必要です。

6
app/core/src/main/resources/messages_ko_KR.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Replace existing bookmarks (uncheck to appen
editTableOfContents.editorTitle=Bookmark Editor
editTableOfContents.editorDesc=Add and arrange bookmarks below. Click + to add child bookmarks.
editTableOfContents.addBookmark=Add New Bookmark
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=This tool allows you to add or edit the table of contents (bookmarks) in a PDF document.
editTableOfContents.desc.2=You can create a hierarchical structure by adding child bookmarks to parent bookmarks.
editTableOfContents.desc.3=Each bookmark requires a title and target page number.

6
app/core/src/main/resources/messages_ml_IN.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Replace existing bookmarks (uncheck to appen
editTableOfContents.editorTitle=Bookmark Editor
editTableOfContents.editorDesc=Add and arrange bookmarks below. Click + to add child bookmarks.
editTableOfContents.addBookmark=Add New Bookmark
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=This tool allows you to add or edit the table of contents (bookmarks) in a PDF document.
editTableOfContents.desc.2=You can create a hierarchical structure by adding child bookmarks to parent bookmarks.
editTableOfContents.desc.3=Each bookmark requires a title and target page number.

6
app/core/src/main/resources/messages_nl_NL.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Replace existing bookmarks (uncheck to appen
editTableOfContents.editorTitle=Bookmark Editor
editTableOfContents.editorDesc=Add and arrange bookmarks below. Click + to add child bookmarks.
editTableOfContents.addBookmark=Add New Bookmark
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=This tool allows you to add or edit the table of contents (bookmarks) in a PDF document.
editTableOfContents.desc.2=You can create a hierarchical structure by adding child bookmarks to parent bookmarks.
editTableOfContents.desc.3=Each bookmark requires a title and target page number.

6
app/core/src/main/resources/messages_no_NB.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Replace existing bookmarks (uncheck to appen
editTableOfContents.editorTitle=Bookmark Editor
editTableOfContents.editorDesc=Add and arrange bookmarks below. Click + to add child bookmarks.
editTableOfContents.addBookmark=Add New Bookmark
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=This tool allows you to add or edit the table of contents (bookmarks) in a PDF document.
editTableOfContents.desc.2=You can create a hierarchical structure by adding child bookmarks to parent bookmarks.
editTableOfContents.desc.3=Each bookmark requires a title and target page number.

6
app/core/src/main/resources/messages_pl_PL.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Replace existing bookmarks (uncheck to appen
editTableOfContents.editorTitle=Bookmark Editor
editTableOfContents.editorDesc=Add and arrange bookmarks below. Click + to add child bookmarks.
editTableOfContents.addBookmark=Add New Bookmark
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=This tool allows you to add or edit the table of contents (bookmarks) in a PDF document.
editTableOfContents.desc.2=You can create a hierarchical structure by adding child bookmarks to parent bookmarks.
editTableOfContents.desc.3=Each bookmark requires a title and target page number.

6
app/core/src/main/resources/messages_pt_BR.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Replace existing bookmarks (uncheck to appen
editTableOfContents.editorTitle=Bookmark Editor
editTableOfContents.editorDesc=Add and arrange bookmarks below. Click + to add child bookmarks.
editTableOfContents.addBookmark=Add New Bookmark
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=This tool allows you to add or edit the table of contents (bookmarks) in a PDF document.
editTableOfContents.desc.2=You can create a hierarchical structure by adding child bookmarks to parent bookmarks.
editTableOfContents.desc.3=Each bookmark requires a title and target page number.

6
app/core/src/main/resources/messages_pt_PT.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Replace existing bookmarks (uncheck to appen
editTableOfContents.editorTitle=Bookmark Editor
editTableOfContents.editorDesc=Add and arrange bookmarks below. Click + to add child bookmarks.
editTableOfContents.addBookmark=Add New Bookmark
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=This tool allows you to add or edit the table of contents (bookmarks) in a PDF document.
editTableOfContents.desc.2=You can create a hierarchical structure by adding child bookmarks to parent bookmarks.
editTableOfContents.desc.3=Each bookmark requires a title and target page number.

6
app/core/src/main/resources/messages_ro_RO.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Replace existing bookmarks (uncheck to appen
editTableOfContents.editorTitle=Bookmark Editor
editTableOfContents.editorDesc=Add and arrange bookmarks below. Click + to add child bookmarks.
editTableOfContents.addBookmark=Add New Bookmark
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=This tool allows you to add or edit the table of contents (bookmarks) in a PDF document.
editTableOfContents.desc.2=You can create a hierarchical structure by adding child bookmarks to parent bookmarks.
editTableOfContents.desc.3=Each bookmark requires a title and target page number.

6
app/core/src/main/resources/messages_ru_RU.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Заменить существующие з
editTableOfContents.editorTitle=Редактор закладок
editTableOfContents.editorDesc=Добавьте и упорядочьте закладки ниже. Нажмите «+», чтобы добавить дочерние закладки.
editTableOfContents.addBookmark=Добавить новую закладку
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=Этот инструмент позволяет вам добавлять или редактировать оглавление (закладки) в PDF-документе.
editTableOfContents.desc.2=Вы можете создать иерархическую структуру, добавив дочерние закладки к родительским.
editTableOfContents.desc.3=Для каждой закладки требуется название и номер целевой страницы.

6
app/core/src/main/resources/messages_sk_SK.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Replace existing bookmarks (uncheck to appen
editTableOfContents.editorTitle=Bookmark Editor
editTableOfContents.editorDesc=Add and arrange bookmarks below. Click + to add child bookmarks.
editTableOfContents.addBookmark=Add New Bookmark
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=This tool allows you to add or edit the table of contents (bookmarks) in a PDF document.
editTableOfContents.desc.2=You can create a hierarchical structure by adding child bookmarks to parent bookmarks.
editTableOfContents.desc.3=Each bookmark requires a title and target page number.

6
app/core/src/main/resources/messages_sl_SI.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Replace existing bookmarks (uncheck to appen
editTableOfContents.editorTitle=Bookmark Editor
editTableOfContents.editorDesc=Add and arrange bookmarks below. Click + to add child bookmarks.
editTableOfContents.addBookmark=Add New Bookmark
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=This tool allows you to add or edit the table of contents (bookmarks) in a PDF document.
editTableOfContents.desc.2=You can create a hierarchical structure by adding child bookmarks to parent bookmarks.
editTableOfContents.desc.3=Each bookmark requires a title and target page number.

6
app/core/src/main/resources/messages_sr_LATN_RS.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Zameni postojeće obeleživače (isključi d
editTableOfContents.editorTitle=Editor obeleživača
editTableOfContents.editorDesc=Dodaj i rasporedi obeleživače ispod. Klikni + za dodavanje podređenih obeleživača.
editTableOfContents.addBookmark=Dodaj novi obeleživač
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=Ovaj alat omogućava dodavanje ili izmenu sadržaja (obeleživača) u PDF dokumentu.
editTableOfContents.desc.2=Moguće je kreirati hijerarhijsku strukturu dodavanjem podređenih obeleživača nadređenim obeleživačima.
editTableOfContents.desc.3=Svaki obeleživač zahteva naslov i broj ciljne strane.

6
app/core/src/main/resources/messages_sv_SE.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Replace existing bookmarks (uncheck to appen
editTableOfContents.editorTitle=Bookmark Editor
editTableOfContents.editorDesc=Add and arrange bookmarks below. Click + to add child bookmarks.
editTableOfContents.addBookmark=Add New Bookmark
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=This tool allows you to add or edit the table of contents (bookmarks) in a PDF document.
editTableOfContents.desc.2=You can create a hierarchical structure by adding child bookmarks to parent bookmarks.
editTableOfContents.desc.3=Each bookmark requires a title and target page number.

6
app/core/src/main/resources/messages_th_TH.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Replace existing bookmarks (uncheck to appen
editTableOfContents.editorTitle=Bookmark Editor
editTableOfContents.editorDesc=Add and arrange bookmarks below. Click + to add child bookmarks.
editTableOfContents.addBookmark=Add New Bookmark
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=This tool allows you to add or edit the table of contents (bookmarks) in a PDF document.
editTableOfContents.desc.2=You can create a hierarchical structure by adding child bookmarks to parent bookmarks.
editTableOfContents.desc.3=Each bookmark requires a title and target page number.

6
app/core/src/main/resources/messages_tr_TR.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Mevcut yer işaretlerini değiştir (var ola
editTableOfContents.editorTitle=Yer İşareti Düzenleyici
editTableOfContents.editorDesc=Aşağıdan yer işaretleri ekleyin ve düzenleyin. Alt yer işareti eklemek için + simgesine tıklayın.
editTableOfContents.addBookmark=Yeni Yer İşareti Ekle
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=Bu araç, bir PDF belgesine içindekiler tablosu (yer işaretleri) eklemenizi veya mevcut olanları düzenlemenizi sağlar.
editTableOfContents.desc.2=Alt yer işaretleri ekleyerek hiyerarşik bir yapı oluşturabilirsiniz.
editTableOfContents.desc.3=Her yer işareti bir başlık ve hedef sayfa numarası gerektirir.

6
app/core/src/main/resources/messages_uk_UA.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Replace existing bookmarks (uncheck to appen
editTableOfContents.editorTitle=Bookmark Editor
editTableOfContents.editorDesc=Add and arrange bookmarks below. Click + to add child bookmarks.
editTableOfContents.addBookmark=Add New Bookmark
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=This tool allows you to add or edit the table of contents (bookmarks) in a PDF document.
editTableOfContents.desc.2=You can create a hierarchical structure by adding child bookmarks to parent bookmarks.
editTableOfContents.desc.3=Each bookmark requires a title and target page number.

6
app/core/src/main/resources/messages_vi_VN.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=Replace existing bookmarks (uncheck to appen
editTableOfContents.editorTitle=Bookmark Editor
editTableOfContents.editorDesc=Add and arrange bookmarks below. Click + to add child bookmarks.
editTableOfContents.addBookmark=Add New Bookmark
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=This tool allows you to add or edit the table of contents (bookmarks) in a PDF document.
editTableOfContents.desc.2=You can create a hierarchical structure by adding child bookmarks to parent bookmarks.
editTableOfContents.desc.3=Each bookmark requires a title and target page number.

6
app/core/src/main/resources/messages_zh_CN.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=替换现有书签（取消勾选则追加
editTableOfContents.editorTitle=书签编辑器
editTableOfContents.editorDesc=在下方添加并排列书签，点击 + 可添加子书签
editTableOfContents.addBookmark=添加书签
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=此工具可用于在 PDF 文档中添加或编辑目录（书签）
editTableOfContents.desc.2=您可以通过为父书签添加子书签来构建层级结构
editTableOfContents.desc.3=每个书签需填写标题和目标页码

6
app/core/src/main/resources/messages_zh_TW.properties
View File

@ -1860,6 +1860,12 @@ editTableOfContents.replaceExisting=取代現有書籤 (取消勾選以附加到
editTableOfContents.editorTitle=書籤編輯器
editTableOfContents.editorDesc=在下方新增和排列書籤。點選 + 新增子書籤。
editTableOfContents.addBookmark=新增書籤
editTableOfContents.importBookmarksDefault=Import
editTableOfContents.importBookmarksFromJsonFile=Upload JSON file
editTableOfContents.importBookmarksFromClipboard=Paste from clipboard
editTableOfContents.exportBookmarksDefault=Export
editTableOfContents.exportBookmarksAsJson=Download as JSON
editTableOfContents.exportBookmarksAsText=Copy as text
editTableOfContents.desc.1=此工具可讓您在 PDF 文件中新增或編輯目錄 (書籤)。
editTableOfContents.desc.2=您可以透過將子書籤新增至父書籤來建立階層式結構。
editTableOfContents.desc.3=每個書籤都需要標題和目標頁碼。

24
app/core/src/main/resources/static/css/edit-table-of-contents.css
View File

@ -156,7 +156,7 @@
.bookmark-actions {
margin-top: 20px;
display: flex;
justify-content: flex-start;
justify-content: space-between;
}
/* Collapse/expand icons */
@ -274,3 +274,25 @@
--bg-empty: var(--md-sys-color-surface-container-low, #24282e);
--border-empty: var(--md-sys-color-outline, #495057);
}
.success-flash {
position: relative;
}
.success-flash::after {
content: "✓";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
font-size: 1.2em;
color: white;
opacity: 0;
animation: fadeOut 1s ease-in-out;
}
@keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; }
}

527
app/core/src/main/resources/static/js/pages/edit-table-of-contents.js
View File

@ -1,88 +1,117 @@
document.addEventListener('DOMContentLoaded', function() {
const bookmarksContainer = document.getElementById('bookmarks-container');
const addBookmarkBtn = document.getElementById('addBookmarkBtn');
const bookmarkDataInput = document.getElementById('bookmarkData');
document.addEventListener("DOMContentLoaded", function () {
const bookmarksContainer = document.getElementById("bookmarks-container");
const errorMessageContainer = document.getElementById("error-message-container");
const addBookmarkBtn = document.getElementById("addBookmarkBtn");
const bookmarkDataInput = document.getElementById("bookmarkData");
let bookmarks = [];
let counter = 0; // Used for generating unique IDs
// Add event listener to the file input to extract existing bookmarks
document.getElementById('fileInput-input').addEventListener('change', async function(e) {
if (!e.target.files || e.target.files.length === 0) {
// callback function on file input change to extract bookmarks from PDF
async function getBookmarkDataFromPdf(event) {
if (!event.target.files || event.target.files.length === 0) {
return;
}
// Reset bookmarks initially
bookmarks = [];
updateBookmarksUI();
const formData = new FormData();
formData.append('file', e.target.files[0]);
// Show loading indicator
showLoadingIndicator();
formData.append("file", event.target.files[0]);
try {
// Call the API to extract bookmarks using fetchWithCsrf for CSRF protection
const response = await fetchWithCsrf('/api/v1/general/extract-bookmarks', {
method: 'POST',
body: formData
const response = await fetchWithCsrf("/api/v1/general/extract-bookmarks", {
method: "POST",
body: formData,
});
if (!response.ok) {
throw new Error(`Failed to extract bookmarks: ${response.status} ${response.statusText}`);
throw new Error(`Failed to fetch API: ${response.status} ${response.statusText}`);
}
const extractedBookmarks = await response.json();
return extractedBookmarks;
} catch (error) {
throw new Error("Error extracting bookmark data:", error);
}
}
// callback function on file input change to extract bookmarks from JSON
async function getBookmarkDataFromJson(event) {
if (!event.target.files || event.target.files.length === 0) {
return;
}
const file = event.target.files[0];
try {
const fileText = await file.text();
const jsonData = JSON.parse(fileText);
return jsonData;
} catch (error) {
throw new Error(`Error extracting bookmark data: error while reading or parsing JSON file: ${error.message}`);
}
}
// display new bookmark data given by a callback function that loads or fetches the data
async function loadBookmarks(getBookmarkDataCallback) {
// reset bookmarks
bookmarks = [];
updateBookmarksUI();
showLoadingIndicator();
try {
// Get new bookmarks from the callback
const newBookmarks = await getBookmarkDataCallback();
// Convert extracted bookmarks to our format with IDs
if (extractedBookmarks && extractedBookmarks.length > 0) {
bookmarks = extractedBookmarks.map(convertExtractedBookmark);
} else {
showEmptyState();
if (newBookmarks && newBookmarks.length > 0) {
bookmarks = newBookmarks.map(convertExtractedBookmark);
}
} catch (error) {
// Show error message
showErrorMessage('Failed to extract bookmarks. You can still create new ones.');
// Add a default bookmark if no bookmarks and error
if (bookmarks.length === 0) {
showEmptyState();
}
bookmarks = [];
throw new Error(`Error loading bookmarks: ${error}`);
} finally {
// Remove loading indicator
removeLoadingIndicator();
// Update the UI
updateBookmarksUI();
}
}
// Add event listener to the file input to extract existing bookmarks
document.getElementById("fileInput-input").addEventListener("change", async function (event) {
try {
await loadBookmarks(async function () {
return getBookmarkDataFromPdf(event);
});
} catch {
showErrorMessage("Failed to extract bookmarks. You can still create new ones.");
}
});
function showLoadingIndicator() {
const loadingEl = document.createElement('div');
loadingEl.className = 'alert alert-info';
loadingEl.textContent = 'Loading bookmarks from PDF...';
loadingEl.id = 'loading-bookmarks';
bookmarksContainer.innerHTML = '';
const loadingEl = document.createElement("div");
loadingEl.className = "alert alert-info";
loadingEl.textContent = "Loading bookmarks from PDF...";
loadingEl.id = "loading-bookmarks";
errorMessageContainer.innerHTML = "";
bookmarksContainer.innerHTML = "";
bookmarksContainer.appendChild(loadingEl);
}
function removeLoadingIndicator() {
const loadingEl = document.getElementById('loading-bookmarks');
const loadingEl = document.getElementById("loading-bookmarks");
if (loadingEl) {
loadingEl.remove();
}
}
function showErrorMessage(message) {
const errorEl = document.createElement('div');
errorEl.className = 'alert alert-danger';
const errorEl = document.createElement("div");
errorEl.className = "alert alert-danger";
errorEl.textContent = message;
bookmarksContainer.appendChild(errorEl);
errorMessageContainer.appendChild(errorEl);
}
function showEmptyState() {
const emptyStateEl = document.createElement('div');
emptyStateEl.className = 'empty-bookmarks mb-3';
const emptyStateEl = document.createElement("div");
emptyStateEl.className = "empty-bookmarks mb-3";
emptyStateEl.innerHTML = `
<span class="material-symbols-rounded mb-2" style="font-size: 48px;">bookmark_add</span>
<h5>No bookmarks found</h5>
@ -93,8 +122,8 @@ document.addEventListener('DOMContentLoaded', function() {
`;
// Add event listener to the "Add First Bookmark" button
emptyStateEl.querySelector('.btn-add-first-bookmark').addEventListener('click', function() {
addBookmark(null, 'New Bookmark', 1);
emptyStateEl.querySelector(".btn-add-first-bookmark").addEventListener("click", function () {
addBookmark(null, "New Bookmark", 1);
emptyStateEl.remove();
});
@ -106,15 +135,15 @@ document.addEventListener('DOMContentLoaded', function() {
counter++;
const result = {
id: Date.now() + counter, // Generate a unique ID
title: bookmark.title || 'Untitled Bookmark',
title: bookmark.title || "Untitled Bookmark",
pageNumber: bookmark.pageNumber || 1,
children: [],
expanded: false // All bookmarks start collapsed for better visibility
expanded: false, // All bookmarks start collapsed for better visibility
};
// Convert children recursively
if (bookmark.children && bookmark.children.length > 0) {
result.children = bookmark.children.map(child => {
result.children = bookmark.children.map((child) => {
return convertExtractedBookmark(child);
});
}
@ -123,24 +152,24 @@ document.addEventListener('DOMContentLoaded', function() {
}
// Add bookmark button click handler
addBookmarkBtn.addEventListener('click', function(e) {
addBookmarkBtn.addEventListener("click", function (e) {
e.preventDefault();
addBookmark();
});
// Add form submit handler to update JSON data
document.getElementById('editTocForm').addEventListener('submit', function() {
document.getElementById("editTocForm").addEventListener("submit", function () {
updateBookmarkData();
});
function addBookmark(parent = null, title = '', pageNumber = 1) {
function addBookmark(parent = null, title = "", pageNumber = 1) {
counter++;
const newBookmark = {
id: Date.now() + counter,
title: title || 'New Bookmark',
title: title || "New Bookmark",
pageNumber: pageNumber || 1,
children: [],
expanded: false // New bookmarks start collapsed
expanded: false, // New bookmarks start collapsed
};
if (parent === null) {
@ -162,13 +191,13 @@ document.addEventListener('DOMContentLoaded', function() {
setTimeout(() => {
const newElement = document.querySelector(`[data-id="${newBookmark.id}"]`);
if (newElement) {
const titleInput = newElement.querySelector('.bookmark-title');
const titleInput = newElement.querySelector(".bookmark-title");
if (titleInput) {
titleInput.focus();
titleInput.select();
}
// Scroll to the new element
newElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
newElement.scrollIntoView({ behavior: "smooth", block: "center" });
}
}, 50);
}
@ -203,7 +232,7 @@ document.addEventListener('DOMContentLoaded', function() {
function removeBookmark(id) {
// Remove from top level
const index = bookmarks.findIndex(b => b.id === id);
const index = bookmarks.findIndex((b) => b.id === id);
if (index !== -1) {
bookmarks.splice(index, 1);
updateBookmarksUI();
@ -213,7 +242,7 @@ document.addEventListener('DOMContentLoaded', function() {
// Remove from children
function removeFromChildren(bookmarkArray, id) {
for (const bookmark of bookmarkArray) {
const childIndex = bookmark.children.findIndex(b => b.id === id);
const childIndex = bookmark.children.findIndex((b) => b.id === id);
if (childIndex !== -1) {
bookmark.children.splice(childIndex, 1);
return true;
@ -253,7 +282,7 @@ document.addEventListener('DOMContentLoaded', function() {
return {
title: bookmark.title,
pageNumber: bookmark.pageNumber,
children: bookmark.children.map(cleanBookmark)
children: bookmark.children.map(cleanBookmark),
};
}
@ -263,22 +292,22 @@ document.addEventListener('DOMContentLoaded', function() {
}
// Only clear the container if there are no error messages or loading indicators
if (!document.querySelector('#bookmarks-container .alert')) {
bookmarksContainer.innerHTML = '';
if (!document.querySelector("#bookmarks-container .alert")) {
bookmarksContainer.innerHTML = "";
}
// Check if there are bookmarks to display
if (bookmarks.length === 0 && !document.querySelector('.empty-bookmarks')) {
if (bookmarks.length === 0 && !document.querySelector(".empty-bookmarks")) {
showEmptyState();
} else {
// Remove empty state if it exists and there are bookmarks
const emptyState = document.querySelector('.empty-bookmarks');
const emptyState = document.querySelector(".empty-bookmarks");
if (emptyState && bookmarks.length > 0) {
emptyState.remove();
}
// Create bookmark elements
bookmarks.forEach(bookmark => {
bookmarks.forEach((bookmark) => {
const bookmarkElement = createBookmarkElement(bookmark);
bookmarksContainer.appendChild(bookmarkElement);
});
@ -287,15 +316,15 @@ document.addEventListener('DOMContentLoaded', function() {
updateBookmarkData();
// Initialize tooltips for dynamically added elements
if (typeof $ !== 'undefined') {
if (typeof $ !== "undefined") {
$('[data-bs-toggle="tooltip"]').tooltip();
}
}
// Create the main bookmark element with collapsible interface
function createBookmarkElement(bookmark, level = 0) {
const bookmarkEl = document.createElement('div');
bookmarkEl.className = 'bookmark-item';
const bookmarkEl = document.createElement("div");
bookmarkEl.className = "bookmark-item";
bookmarkEl.dataset.id = bookmark.id;
bookmarkEl.dataset.level = level;
@ -304,10 +333,10 @@ document.addEventListener('DOMContentLoaded', function() {
bookmarkEl.appendChild(header);
// Create the content (collapsible part)
const content = document.createElement('div');
content.className = 'bookmark-content';
const content = document.createElement("div");
content.className = "bookmark-content";
if (!bookmark.expanded) {
content.style.display = 'none';
content.style.display = "none";
}
// Main input row
@ -328,48 +357,48 @@ document.addEventListener('DOMContentLoaded', function() {
// Create the header that's always visible
function createBookmarkHeader(bookmark, level) {
const header = document.createElement('div');
header.className = 'bookmark-header';
const header = document.createElement("div");
header.className = "bookmark-header";
if (!bookmark.expanded) {
header.classList.add('collapsed');
header.classList.add("collapsed");
}
// Left side of header with expand/collapse and info
const headerLeft = document.createElement('div');
headerLeft.className = 'd-flex align-items-center';
const headerLeft = document.createElement("div");
headerLeft.className = "d-flex align-items-center";
// Toggle expand/collapse icon with child count
const toggleContainer = document.createElement('div');
toggleContainer.className = 'd-flex align-items-center';
toggleContainer.style.marginRight = '8px';
const toggleContainer = document.createElement("div");
toggleContainer.className = "d-flex align-items-center";
toggleContainer.style.marginRight = "8px";
// Only show toggle if has children
if (bookmark.children && bookmark.children.length > 0) {
// Create toggle icon
const toggleIcon = document.createElement('span');
toggleIcon.className = 'material-symbols-rounded toggle-icon me-1';
toggleIcon.textContent = 'expand_more';
toggleIcon.style.cursor = 'pointer';
const toggleIcon = document.createElement("span");
toggleIcon.className = "material-symbols-rounded toggle-icon me-1";
toggleIcon.textContent = "expand_more";
toggleIcon.style.cursor = "pointer";
toggleContainer.appendChild(toggleIcon);
// Add child count indicator
const childCount = document.createElement('span');
childCount.className = 'badge rounded-pill';
const childCount = document.createElement("span");
childCount.className = "badge rounded-pill";
// Use theme-appropriate badge color
const isDarkMode = document.documentElement.getAttribute('data-bs-theme') === 'dark';
childCount.classList.add(isDarkMode ? 'bg-info' : 'bg-secondary');
childCount.style.fontSize = '0.7rem';
childCount.style.padding = '0.2em 0.5em';
const isDarkMode = document.documentElement.getAttribute("data-bs-theme") === "dark";
childCount.classList.add(isDarkMode ? "bg-info" : "bg-secondary");
childCount.style.fontSize = "0.7rem";
childCount.style.padding = "0.2em 0.5em";
childCount.textContent = bookmark.children.length;
childCount.setAttribute('data-bs-toggle', 'tooltip');
childCount.setAttribute('data-bs-placement', 'top');
childCount.title = `${bookmark.children.length} child bookmark${bookmark.children.length > 1 ? 's' : ''}`;
childCount.setAttribute("data-bs-toggle", "tooltip");
childCount.setAttribute("data-bs-placement", "top");
childCount.title = `${bookmark.children.length} child bookmark${bookmark.children.length > 1 ? "s" : ""}`;
toggleContainer.appendChild(childCount);
} else {
// Add spacer if no children
const spacer = document.createElement('span');
spacer.style.width = '24px';
spacer.style.display = 'inline-block';
const spacer = document.createElement("span");
spacer.style.width = "24px";
spacer.style.display = "inline-block";
toggleContainer.appendChild(spacer);
}
@ -378,65 +407,68 @@ document.addEventListener('DOMContentLoaded', function() {
// Level indicator for nested items
if (level > 0) {
// Add relationship indicator visual line
const relationshipIndicator = document.createElement('div');
relationshipIndicator.className = 'bookmark-relationship-indicator';
const relationshipIndicator = document.createElement("div");
relationshipIndicator.className = "bookmark-relationship-indicator";
const line = document.createElement('div');
line.className = 'relationship-line';
const line = document.createElement("div");
line.className = "relationship-line";
relationshipIndicator.appendChild(line);
const arrow = document.createElement('div');
arrow.className = 'relationship-arrow';
const arrow = document.createElement("div");
arrow.className = "relationship-arrow";
relationshipIndicator.appendChild(arrow);
header.appendChild(relationshipIndicator);
// Text indicator
const levelIndicator = document.createElement('span');
levelIndicator.className = 'bookmark-level-indicator';
const levelIndicator = document.createElement("span");
levelIndicator.className = "bookmark-level-indicator";
levelIndicator.textContent = `Child`;
headerLeft.appendChild(levelIndicator);
}
// Title preview
const titlePreview = document.createElement('span');
titlePreview.className = 'bookmark-title-preview';
const titlePreview = document.createElement("span");
titlePreview.className = "bookmark-title-preview";
titlePreview.textContent = bookmark.title;
headerLeft.appendChild(titlePreview);
// Page number preview
const pagePreview = document.createElement('span');
pagePreview.className = 'bookmark-page-preview';
const pagePreview = document.createElement("span");
pagePreview.className = "bookmark-page-preview";
pagePreview.textContent = `Page ${bookmark.pageNumber}`;
headerLeft.appendChild(pagePreview);
// Right side of header with action buttons
const headerRight = document.createElement('div');
headerRight.className = 'bookmark-actions-header';
const headerRight = document.createElement("div");
headerRight.className = "bookmark-actions-header";
// Quick add buttons with clear visual distinction - using Stirling-PDF's tooltip system
const quickAddChildButton = createButton('subdirectory_arrow_right', 'btn-add-child', 'Add child bookmark', function(e) {
const quickAddChildButton = createButton("subdirectory_arrow_right", "btn-add-child", "Add child bookmark", function (e) {
e.preventDefault();
e.stopPropagation();
addBookmark(bookmark.id);
});
const quickAddSiblingButton = createButton('add', 'btn-add-sibling', 'Add sibling bookmark', function(e) {
const quickAddSiblingButton = createButton("add", "btn-add-sibling", "Add sibling bookmark", function (e) {
e.preventDefault();
e.stopPropagation();
// Find parent of current bookmark
const parentId = findParentBookmark(bookmarks, bookmark.id);
addBookmark(parentId, '', bookmark.pageNumber); // Same level as current bookmark
addBookmark(parentId, "", bookmark.pageNumber); // Same level as current bookmark
});
// Quick remove button
const quickRemoveButton = createButton('delete', 'btn-outline-danger', 'Remove bookmark', function(e) {
const quickRemoveButton = createButton("delete", "btn-outline-danger", "Remove bookmark", function (e) {
e.preventDefault();
e.stopPropagation();
if (confirm('Are you sure you want to remove this bookmark' +
(bookmark.children.length > 0 ? ' and all its children?' : '?'))) {
if (
confirm(
"Are you sure you want to remove this bookmark" + (bookmark.children.length > 0 ? " and all its children?" : "?")
)
) {
removeBookmark(bookmark.id);
}
});
@ -450,9 +482,9 @@ document.addEventListener('DOMContentLoaded', function() {
header.appendChild(headerRight);
// Add click handler for expansion toggle
header.addEventListener('click', function(e) {
header.addEventListener("click", function (e) {
// Only toggle if not clicking on buttons
if (!e.target.closest('button')) {
if (!e.target.closest("button")) {
toggleBookmarkExpanded(bookmark.id);
}
});
@ -461,8 +493,8 @@ document.addEventListener('DOMContentLoaded', function() {
}
function createInputRow(bookmark) {
const row = document.createElement('div');
row.className = 'row';
const row = document.createElement("div");
row.className = "row";
// Title input
row.appendChild(createTitleInputElement(bookmark));
@ -474,26 +506,26 @@ document.addEventListener('DOMContentLoaded', function() {
}
function createTitleInputElement(bookmark) {
const titleCol = document.createElement('div');
titleCol.className = 'col-md-8';
const titleCol = document.createElement("div");
titleCol.className = "col-md-8";
const titleGroup = document.createElement('div');
titleGroup.className = 'mb-3';
const titleGroup = document.createElement("div");
titleGroup.className = "mb-3";
const titleLabel = document.createElement('label');
titleLabel.textContent = 'Title';
titleLabel.className = 'form-label';
const titleLabel = document.createElement("label");
titleLabel.textContent = "Title";
titleLabel.className = "form-label";
const titleInput = document.createElement('input');
titleInput.type = 'text';
titleInput.className = 'form-control bookmark-title';
const titleInput = document.createElement("input");
titleInput.type = "text";
titleInput.className = "form-control bookmark-title";
titleInput.value = bookmark.title;
titleInput.addEventListener('input', function() {
titleInput.addEventListener("input", function () {
bookmark.title = this.value;
updateBookmarkData();
// Also update the preview in the header
const header = titleInput.closest('.bookmark-item').querySelector('.bookmark-title-preview');
const header = titleInput.closest(".bookmark-item").querySelector(".bookmark-title-preview");
if (header) {
header.textContent = this.value;
}
@ -507,27 +539,27 @@ document.addEventListener('DOMContentLoaded', function() {
}
function createPageInputElement(bookmark) {
const pageCol = document.createElement('div');
pageCol.className = 'col-md-4';
const pageCol = document.createElement("div");
pageCol.className = "col-md-4";
const pageGroup = document.createElement('div');
pageGroup.className = 'mb-3';
const pageGroup = document.createElement("div");
pageGroup.className = "mb-3";
const pageLabel = document.createElement('label');
pageLabel.textContent = 'Page';
pageLabel.className = 'form-label';
const pageLabel = document.createElement("label");
pageLabel.textContent = "Page";
pageLabel.className = "form-label";
const pageInput = document.createElement('input');
pageInput.type = 'number';
pageInput.className = 'form-control bookmark-page';
const pageInput = document.createElement("input");
pageInput.type = "number";
pageInput.className = "form-control bookmark-page";
pageInput.value = bookmark.pageNumber;
pageInput.min = 1;
pageInput.addEventListener('input', function() {
pageInput.addEventListener("input", function () {
bookmark.pageNumber = parseInt(this.value) || 1;
updateBookmarkData();
// Also update the preview in the header
const header = pageInput.closest('.bookmark-item').querySelector('.bookmark-page-preview');
const header = pageInput.closest(".bookmark-item").querySelector(".bookmark-page-preview");
if (header) {
header.textContent = `Page ${bookmark.pageNumber}`;
}
@ -541,25 +573,25 @@ document.addEventListener('DOMContentLoaded', function() {
}
function createButton(icon, className, title, clickHandler) {
const button = document.createElement('button');
button.type = 'button';
const button = document.createElement("button");
button.type = "button";
button.className = `btn ${className} btn-bookmark-action`;
button.innerHTML = `<span class="material-symbols-rounded">${icon}</span>`;
// Use Bootstrap tooltips
button.setAttribute('data-bs-toggle', 'tooltip');
button.setAttribute('data-bs-placement', 'top');
button.setAttribute("data-bs-toggle", "tooltip");
button.setAttribute("data-bs-placement", "top");
button.title = title;
button.addEventListener('click', clickHandler);
button.addEventListener("click", clickHandler);
return button;
}
function createChildrenContainer(bookmark, level) {
const childrenContainer = document.createElement('div');
childrenContainer.className = 'bookmark-children';
const childrenContainer = document.createElement("div");
childrenContainer.className = "bookmark-children";
bookmark.children.forEach(child => {
bookmark.children.forEach((child) => {
childrenContainer.appendChild(createBookmarkElement(child, level + 1));
});
@ -568,24 +600,24 @@ document.addEventListener('DOMContentLoaded', function() {
// Update the add bookmark button appearance with clear visual cue
addBookmarkBtn.innerHTML = '<span class="material-symbols-rounded">add</span> Add Top-level Bookmark';
addBookmarkBtn.className = 'btn btn-primary btn-add-bookmark top-level';
addBookmarkBtn.className = "btn btn-primary btn-add-bookmark top-level";
// Use Bootstrap tooltips
addBookmarkBtn.setAttribute('data-bs-toggle', 'tooltip');
addBookmarkBtn.setAttribute('data-bs-placement', 'top');
addBookmarkBtn.title = 'Add a new top-level bookmark';
addBookmarkBtn.setAttribute("data-bs-toggle", "tooltip");
addBookmarkBtn.setAttribute("data-bs-placement", "top");
addBookmarkBtn.title = "Add a new top-level bookmark";
// Add icon to empty state button as well
const updateEmptyStateButton = function() {
const emptyStateBtn = document.querySelector('.btn-add-first-bookmark');
const updateEmptyStateButton = function () {
const emptyStateBtn = document.querySelector(".btn-add-first-bookmark");
if (emptyStateBtn) {
emptyStateBtn.innerHTML = '<span class="material-symbols-rounded">add</span> Add First Bookmark';
emptyStateBtn.setAttribute('data-bs-toggle', 'tooltip');
emptyStateBtn.setAttribute('data-bs-placement', 'top');
emptyStateBtn.title = 'Add first bookmark';
emptyStateBtn.setAttribute("data-bs-toggle", "tooltip");
emptyStateBtn.setAttribute("data-bs-placement", "top");
emptyStateBtn.title = "Add first bookmark";
// Initialize tooltips for the empty state button
if (typeof $ !== 'undefined') {
if (typeof $ !== "undefined") {
$('[data-bs-toggle="tooltip"]').tooltip();
}
}
@ -597,14 +629,147 @@ document.addEventListener('DOMContentLoaded', function() {
updateEmptyStateButton();
}
// Add bookmarks Import/Export functionality
// Import/Export button references
const importDefaultBtn = document.getElementById("importDefaultBtn");
const exportDefaultBtn = document.getElementById("exportDefaultBtn");
const importUploadJsonFileInput = document.getElementById("importUploadJsonFileInput");
const importPasteFromClipboardBtn = document.getElementById("importPasteFromClipboardBtn");
const exportDownloadJsonFileBtn = document.getElementById("exportDownloadJsonFileBtn");
const exportCopyToClipboardBtn = document.getElementById("exportCopyToClipboardBtn");
// display import/export from/to clipboard buttons if supported
if (navigator.clipboard && navigator.clipboard.readText) {
importPasteFromClipboardBtn.parentElement.classList.remove("d-none");
}
if (navigator.clipboard && navigator.clipboard.writeText) {
exportCopyToClipboardBtn.parentElement.classList.remove("d-none");
}
function flashButtonSuccess(button) {
const originalClass = button.className;
button.classList.remove("btn-outline-primary");
button.classList.add("btn-success", "success-flash");
setTimeout(() => {
button.className = originalClass;
}, 1000);
}
// Import handlers
async function handleJsonFileInputChange(event) {
try {
await loadBookmarks(async function () {
return getBookmarkDataFromJson(event);
});
flashButtonSuccess(importDefaultBtn);
} catch (error) {
console.error(`Failed to import bookmarks from JSON file: ${error.message}`);
}
}
async function importBookmarksFromClipboard() {
console.log("Importing bookmarks from clipboard...");
try {
await loadBookmarks(async function () {
const clipboardText = await navigator.clipboard.readText();
if (!clipboardText) return [];
return JSON.parse(clipboardText);
});
flashButtonSuccess(importDefaultBtn);
} catch (error) {
console.error(`Failed to import bookmarks from clipboard: ${error.message}`);
}
}
async function handleBookmarksPasteFromClipboard(event) {
// do not override normal paste behavior on input fields
if (event.target.tagName.toLowerCase() === "input") return;
try {
await loadBookmarks(async function () {
const clipboardText = event.clipboardData?.getData("text/plain");
if (!clipboardText) return [];
return JSON.parse(clipboardText);
});
flashButtonSuccess(importDefaultBtn);
} catch (error) {
console.error(`Failed to import bookmarks from clipboard (ctrl-v): ${error.message}`);
}
}
// Export handlers
async function exportBookmarksToJson() {
console.log("Exporting bookmarks to JSON...");
try {
const bookmarkData = bookmarkDataInput.value;
const blob = new Blob([bookmarkData], { type: "application/json" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "bookmarks.json";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
flashButtonSuccess(exportDefaultBtn);
} catch (error) {
console.error(`Failed to export bookmarks to JSON: ${error.message}`);
}
}
async function exportBookmarksToClipboard() {
const bookmarkData = bookmarkDataInput.value;
try {
await navigator.clipboard.writeText(bookmarkData);
flashButtonSuccess(exportDefaultBtn);
} catch (error) {
console.error(`Failed to export bookmarks to clipboard: ${error.message}`);
}
}
async function handleBookmarksCopyToClipboard(event) {
// do not override normal copy behavior on input fields
if (event.target.tagName.toLowerCase() === "input") return;
const bookmarkData = bookmarkDataInput.value;
try {
event.clipboardData.setData("text/plain", bookmarkData);
event.preventDefault();
flashButtonSuccess(exportDefaultBtn);
} catch (error) {
console.error(`Failed to export bookmarks to clipboard (ctrl-c): ${error.message}`);
}
}
// register event listeners for import/export functions
importUploadJsonFileInput.addEventListener("change", handleJsonFileInputChange);
importPasteFromClipboardBtn.addEventListener("click", importBookmarksFromClipboard);
exportDownloadJsonFileBtn.addEventListener("click", exportBookmarksToJson);
exportCopyToClipboardBtn.addEventListener("click", exportBookmarksToClipboard);
document.body.addEventListener("copy", handleBookmarksCopyToClipboard);
document.body.addEventListener("paste", handleBookmarksPasteFromClipboard);
// set default actions
// importDefaultBtn is already handled by being a label for the file input
exportDefaultBtn.addEventListener("click", exportBookmarksToJson);
// Listen for theme changes to update badge colors
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === 'data-bs-theme') {
const isDarkMode = document.documentElement.getAttribute('data-bs-theme') === 'dark';
document.querySelectorAll('.badge').forEach(badge => {
badge.classList.remove('bg-secondary', 'bg-info');
badge.classList.add(isDarkMode ? 'bg-info' : 'bg-secondary');
const observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (mutation.attributeName === "data-bs-theme") {
const isDarkMode = document.documentElement.getAttribute("data-bs-theme") === "dark";
document.querySelectorAll(".badge").forEach((badge) => {
badge.classList.remove("bg-secondary", "bg-info");
badge.classList.add(isDarkMode ? "bg-info" : "bg-secondary");
});
}
});
@ -613,26 +778,26 @@ document.addEventListener('DOMContentLoaded', function() {
observer.observe(document.documentElement, { attributes: true });
// Add visual enhancement to clearly show the top-level/child relationship
document.addEventListener('mouseover', function(e) {
document.addEventListener("mouseover", function (e) {
// When hovering over add buttons, highlight their relationship targets
const button = e.target.closest('.btn-add-child, .btn-add-sibling');
const button = e.target.closest(".btn-add-child, .btn-add-sibling");
if (button) {
if (button.classList.contains('btn-add-child')) {
if (button.classList.contains("btn-add-child")) {
// Highlight parent-child relationship
const bookmarkItem = button.closest('.bookmark-item');
const bookmarkItem = button.closest(".bookmark-item");
if (bookmarkItem) {
bookmarkItem.style.boxShadow = '0 0 0 2px var(--btn-add-child-border, #198754)';
bookmarkItem.style.boxShadow = "0 0 0 2px var(--btn-add-child-border, #198754)";
}
} else if (button.classList.contains('btn-add-sibling')) {
} else if (button.classList.contains("btn-add-sibling")) {
// Highlight sibling relationship
const bookmarkItem = button.closest('.bookmark-item');
const bookmarkItem = button.closest(".bookmark-item");
if (bookmarkItem) {
// Find siblings
const parent = bookmarkItem.parentElement;
const siblings = parent.querySelectorAll(':scope > .bookmark-item');
siblings.forEach(sibling => {
const siblings = parent.querySelectorAll(":scope > .bookmark-item");
siblings.forEach((sibling) => {
if (sibling !== bookmarkItem) {
sibling.style.boxShadow = '0 0 0 2px var(--btn-add-sibling-border, #0d6efd)';
sibling.style.boxShadow = "0 0 0 2px var(--btn-add-sibling-border, #0d6efd)";
}
});
}
@ -640,13 +805,13 @@ document.addEventListener('DOMContentLoaded', function() {
}
});
document.addEventListener('mouseout', function(e) {
document.addEventListener("mouseout", function (e) {
// Remove highlights when not hovering
const button = e.target.closest('.btn-add-child, .btn-add-sibling');
const button = e.target.closest(".btn-add-child, .btn-add-sibling");
if (button) {
// Remove all highlights
document.querySelectorAll('.bookmark-item').forEach(item => {
item.style.boxShadow = '';
document.querySelectorAll(".bookmark-item").forEach((item) => {
item.style.boxShadow = "";
});
}
});

220
app/core/src/main/resources/templates/edit-table-of-contents.html
View File

@ -1,75 +1,169 @@
<!DOCTYPE html>
<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
<html th:lang="${#locale.language}"
th:dir="#{language.direction}"
th:data-language="${#locale.toString()}"
xmlns:th="https://www.thymeleaf.org">
<head>
<th:block th:insert="~{fragments/common :: head(title=#{editTableOfContents.title}, header=#{editTableOfContents.header})}">
</th:block>
<link rel="stylesheet" th:href="@{'/css/edit-table-of-contents.css'}">
</head>
<head>
<th:block
th:insert="~{fragments/common :: head(title=#{editTableOfContents.title}, header=#{editTableOfContents.header})}">
</th:block>
<link rel="stylesheet"
th:href="@{'/css/edit-table-of-contents.css'}">
</head>
<body>
<div id="page-container">
<div id="content-wrap">
<th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
<br><br>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 bg-card">
<div class="tool-header">
<span class="material-symbols-rounded tool-header-icon edit">bookmark_add</span>
<span class="tool-header-text" th:text="#{editTableOfContents.header}"></span>
<body>
<div id="page-container">
<div id="content-wrap">
<th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
<br><br>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 bg-card">
<div class="tool-header">
<span class="material-symbols-rounded tool-header-icon edit">bookmark_add</span>
<span class="tool-header-text"
th:text="#{editTableOfContents.header}"></span>
</div>
<form th:action="@{'/api/v1/general/edit-table-of-contents'}"
method="post"
enctype="multipart/form-data"
id="editTocForm">
<div
th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='application/pdf')}">
</div>
<div class="mb-3 form-check">
<input type="checkbox"
class="form-check-input"
id="replaceExisting"
name="replaceExisting"
checked>
<label class="form-check-label"
for="replaceExisting"
th:text="#{editTableOfContents.replaceExisting}"></label>
<input type="hidden"
name="replaceExisting"
value="false" />
</div>
<div class="bookmark-editor">
<h5 th:text="#{editTableOfContents.editorTitle}"></h5>
<p th:text="#{editTableOfContents.editorDesc}"></p>
<div id="error-message-container">
<!-- Error messages will be added here dynamically -->
</div>
<div id="bookmarks-container">
<!-- Bookmarks will be added here dynamically -->
</div>
<div class="bookmark-actions">
<button type="button"
id="addBookmarkBtn"
class="btn btn-outline-primary"
th:text="#{editTableOfContents.addBookmark}"></button>
<div class="d-flex flex-wrap justify-content-end gap-2">
<!-- Import Split Button -->
<div class="btn-group">
<label
id="importDefaultBtn"
for="importUploadJsonFileInput"
class="btn btn-outline-primary"
style="border-top-left-radius: 1.25rem !important; border-bottom-left-radius: 1.25rem !important;"
th:text="#{editTableOfContents.importBookmarksDefault}">
</label>
<button type="button"
class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-expanded="false">
<span class="visually-hidden">Toggle Import Options</span>
</button>
<ul class="dropdown-menu">
<li><label class="dropdown-item"
id="importUploadJsonFileBtn"
for="importUploadJsonFileInput"
style="cursor: pointer;"
th:text="#{editTableOfContents.importBookmarksFromJsonFile}"></label></li>
<li class="d-none"><a class="dropdown-item"
href="#bookmarks-container"
id="importPasteFromClipboardBtn"
th:text="#{editTableOfContents.importBookmarksFromClipboard}"></a></li>
</ul>
</div>
<!-- Export Split Button -->
<div class="btn-group">
<button type="button"
id="exportDefaultBtn"
class="btn btn-outline-primary"
th:text="#{editTableOfContents.exportBookmarksDefault}"></button>
<button type="button"
class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-expanded="false">
<span class="visually-hidden">Toggle Export Options</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item"
href="#bookmarks-container"
id="exportDownloadJsonFileBtn"
th:text="#{editTableOfContents.exportBookmarksAsJson}"></a></li>
<li class="d-none"><a class="dropdown-item"
href="#bookmarks-container"
id="exportCopyToClipboardBtn"
th:text="#{editTableOfContents.exportBookmarksAsText}"></a></li>
</ul>
</div>
</div>
</div>
<!-- Hidden field to store JSON data -->
<input type="hidden"
id="bookmarkData"
name="bookmarkData"
value="[]">
</div>
<p>
<a class="btn btn-outline-primary"
data-bs-toggle="collapse"
href="#info"
role="button"
aria-expanded="false"
aria-controls="info"
th:text="#{info}"></a>
</p>
<div class="collapse"
id="info">
<p th:text="#{editTableOfContents.desc.1}"></p>
<p th:text="#{editTableOfContents.desc.2}"></p>
<p th:text="#{editTableOfContents.desc.3}"></p>
</div>
<br>
<button type="submit"
id="submitBtn"
class="btn btn-primary"
th:text="#{editTableOfContents.submit}"></button>
</form>
<!-- Hidden file input for JSON import (outside of form)-->
<input type="file"
id="importUploadJsonFileInput"
accept="application/json"
style="display: none;">
</div>
<form th:action="@{'/api/v1/general/edit-table-of-contents'}" method="post" enctype="multipart/form-data" id="editTocForm">
<div
th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='application/pdf')}">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="replaceExisting" name="replaceExisting" checked>
<label class="form-check-label" for="replaceExisting"
th:text="#{editTableOfContents.replaceExisting}"></label>
<input type="hidden" name="replaceExisting" value="false" />
</div>
<div class="bookmark-editor">
<h5 th:text="#{editTableOfContents.editorTitle}"></h5>
<p th:text="#{editTableOfContents.editorDesc}"></p>
<div id="bookmarks-container">
<!-- Bookmarks will be added here dynamically -->
</div>
<div class="bookmark-actions">
<button type="button" id="addBookmarkBtn" class="btn btn-outline-primary" th:text="#{editTableOfContents.addBookmark}"></button>
</div>
<!-- Hidden field to store JSON data -->
<input type="hidden" id="bookmarkData" name="bookmarkData" value="[]">
</div>
<p>
<a class="btn btn-outline-primary" data-bs-toggle="collapse" href="#info" role="button"
aria-expanded="false" aria-controls="info" th:text="#{info}"></a>
</p>
<div class="collapse" id="info">
<p th:text="#{editTableOfContents.desc.1}"></p>
<p th:text="#{editTableOfContents.desc.2}"></p>
<p th:text="#{editTableOfContents.desc.3}"></p>
</div>
<br>
<button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{editTableOfContents.submit}"></button>
</form>
</div>
</div>
</div>
<th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
</div>
<th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
</div>
<script th:src="@{'/js/pages/edit-table-of-contents.js'}"></script>
<script>
<script th:src="@{'/js/pages/edit-table-of-contents.js'}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Initialize Bootstrap tooltips
if (typeof $ !== 'undefined') {
@ -77,6 +171,6 @@
}
});
</script>
</body>
</body>
</html>