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

# 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.

app/core/src/main/resources/messages_ar_AR.properties

@@ -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.

app/core/src/main/resources/messages_az_AZ.properties

@@ -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.

app/core/src/main/resources/messages_bg_BG.properties

@@ -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.

app/core/src/main/resources/messages_bo_CN.properties

@@ -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.

app/core/src/main/resources/messages_ca_CA.properties

@@ -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.

app/core/src/main/resources/messages_cs_CZ.properties

@@ -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.

app/core/src/main/resources/messages_da_DK.properties

@@ -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.

app/core/src/main/resources/messages_de_DE.properties

@@ -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.

app/core/src/main/resources/messages_el_GR.properties

@@ -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.

app/core/src/main/resources/messages_en_GB.properties

@@ -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.

app/core/src/main/resources/messages_en_US.properties

@@ -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.

app/core/src/main/resources/messages_es_ES.properties

@@ -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.

app/core/src/main/resources/messages_eu_ES.properties

@@ -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.

app/core/src/main/resources/messages_fa_IR.properties

@@ -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.

app/core/src/main/resources/messages_fr_FR.properties

@@ -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.

app/core/src/main/resources/messages_ga_IE.properties

@@ -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.

app/core/src/main/resources/messages_hi_IN.properties

@@ -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.

app/core/src/main/resources/messages_hr_HR.properties

@@ -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.

app/core/src/main/resources/messages_hu_HU.properties

@@ -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.

app/core/src/main/resources/messages_id_ID.properties

@@ -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.

app/core/src/main/resources/messages_it_IT.properties

@@ -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.

app/core/src/main/resources/messages_ja_JP.properties

@@ -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=各しおりにはタイトルと対象のページ番号が必要です。

app/core/src/main/resources/messages_ko_KR.properties

@@ -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.

app/core/src/main/resources/messages_ml_IN.properties

@@ -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.

app/core/src/main/resources/messages_nl_NL.properties

@@ -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.

app/core/src/main/resources/messages_no_NB.properties

@@ -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.

app/core/src/main/resources/messages_pl_PL.properties

@@ -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.

app/core/src/main/resources/messages_pt_BR.properties

@@ -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.

app/core/src/main/resources/messages_pt_PT.properties

@@ -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.

app/core/src/main/resources/messages_ro_RO.properties

@@ -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.

app/core/src/main/resources/messages_ru_RU.properties

@@ -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=Для каждой закладки требуется название и номер целевой страницы.

app/core/src/main/resources/messages_sk_SK.properties

@@ -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.

app/core/src/main/resources/messages_sl_SI.properties

@@ -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.

app/core/src/main/resources/messages_sr_LATN_RS.properties

@@ -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.

app/core/src/main/resources/messages_sv_SE.properties

@@ -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.

app/core/src/main/resources/messages_th_TH.properties

@@ -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.

app/core/src/main/resources/messages_tr_TR.properties

@@ -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.

app/core/src/main/resources/messages_uk_UA.properties

@@ -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.

app/core/src/main/resources/messages_vi_VN.properties

@@ -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.

app/core/src/main/resources/messages_zh_CN.properties

@@ -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=每个书签需填写标题和目标页码

app/core/src/main/resources/messages_zh_TW.properties

@@ -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=每個書籤都需要標題和目標頁碼。

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

@@ -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; }
+}

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

@@ -1,88 +1,117 @@
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener("DOMContentLoaded", function () {
-  const bookmarksContainer = document.getElementById('bookmarks-container');
+  const bookmarksContainer = document.getElementById("bookmarks-container");
-  const addBookmarkBtn = document.getElementById('addBookmarkBtn');
+  const errorMessageContainer = document.getElementById("error-message-container");
-  const bookmarkDataInput = document.getElementById('bookmarkData');
+  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
+  // callback function on file input change to extract bookmarks from PDF
-  document.getElementById('fileInput-input').addEventListener('change', async function(e) {
+  async function getBookmarkDataFromPdf(event) {
-    if (!e.target.files || e.target.files.length === 0) {
+    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]);
+    formData.append("file", event.target.files[0]);
-
-    // Show loading indicator
-    showLoadingIndicator();
 
     try {
       // Call the API to extract bookmarks using fetchWithCsrf for CSRF protection
-      const response = await fetchWithCsrf('/api/v1/general/extract-bookmarks', {
+      const response = await fetchWithCsrf("/api/v1/general/extract-bookmarks", {
-        method: 'POST',
+        method: "POST",
-        body: formData
+        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) {
+      if (newBookmarks && newBookmarks.length > 0) {
-        bookmarks = extractedBookmarks.map(convertExtractedBookmark);
+        bookmarks = newBookmarks.map(convertExtractedBookmark);
-      } else {
-        showEmptyState();
       }
     } catch (error) {
-      // Show error message
+      bookmarks = [];
-      showErrorMessage('Failed to extract bookmarks. You can still create new ones.');
+      throw new Error(`Error loading bookmarks: ${error}`);
-
-      // Add a default bookmark if no bookmarks and error
-      if (bookmarks.length === 0) {
-        showEmptyState();
-      }
     } 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');
+    const loadingEl = document.createElement("div");
-    loadingEl.className = 'alert alert-info';
+    loadingEl.className = "alert alert-info";
-    loadingEl.textContent = 'Loading bookmarks from PDF...';
+    loadingEl.textContent = "Loading bookmarks from PDF...";
-    loadingEl.id = 'loading-bookmarks';
+    loadingEl.id = "loading-bookmarks";
-    bookmarksContainer.innerHTML = '';
+    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');
+    const errorEl = document.createElement("div");
-    errorEl.className = 'alert alert-danger';
+    errorEl.className = "alert alert-danger";
     errorEl.textContent = message;
-    bookmarksContainer.appendChild(errorEl);
+    errorMessageContainer.appendChild(errorEl);
   }
 
   function showEmptyState() {
-    const emptyStateEl = document.createElement('div');
+    const emptyStateEl = document.createElement("div");
-    emptyStateEl.className = 'empty-bookmarks mb-3';
+    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() {
+    emptyStateEl.querySelector(".btn-add-first-bookmark").addEventListener("click", function () {
-      addBookmark(null, 'New Bookmark', 1);
+      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')) {
+    if (!document.querySelector("#bookmarks-container .alert")) {
-      bookmarksContainer.innerHTML = '';
+      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');
+    const bookmarkEl = document.createElement("div");
-    bookmarkEl.className = 'bookmark-item';
+    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');
+    const content = document.createElement("div");
-    content.className = 'bookmark-content';
+    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');
+    const header = document.createElement("div");
-    header.className = 'bookmark-header';
+    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');
+    const headerLeft = document.createElement("div");
-    headerLeft.className = 'd-flex align-items-center';
+    headerLeft.className = "d-flex align-items-center";
 
     // Toggle expand/collapse icon with child count
-    const toggleContainer = document.createElement('div');
+    const toggleContainer = document.createElement("div");
-    toggleContainer.className = 'd-flex align-items-center';
+    toggleContainer.className = "d-flex align-items-center";
-    toggleContainer.style.marginRight = '8px';
+    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');
+      const toggleIcon = document.createElement("span");
-      toggleIcon.className = 'material-symbols-rounded toggle-icon me-1';
+      toggleIcon.className = "material-symbols-rounded toggle-icon me-1";
-      toggleIcon.textContent = 'expand_more';
+      toggleIcon.textContent = "expand_more";
-      toggleIcon.style.cursor = 'pointer';
+      toggleIcon.style.cursor = "pointer";
       toggleContainer.appendChild(toggleIcon);
 
       // Add child count indicator
-      const childCount = document.createElement('span');
+      const childCount = document.createElement("span");
-      childCount.className = 'badge rounded-pill';
+      childCount.className = "badge rounded-pill";
       // Use theme-appropriate badge color
-      const isDarkMode = document.documentElement.getAttribute('data-bs-theme') === 'dark';
+      const isDarkMode = document.documentElement.getAttribute("data-bs-theme") === "dark";
-      childCount.classList.add(isDarkMode ? 'bg-info' : 'bg-secondary');
+      childCount.classList.add(isDarkMode ? "bg-info" : "bg-secondary");
-      childCount.style.fontSize = '0.7rem';
+      childCount.style.fontSize = "0.7rem";
-      childCount.style.padding = '0.2em 0.5em';
+      childCount.style.padding = "0.2em 0.5em";
       childCount.textContent = bookmark.children.length;
-      childCount.setAttribute('data-bs-toggle', 'tooltip');
+      childCount.setAttribute("data-bs-toggle", "tooltip");
-      childCount.setAttribute('data-bs-placement', 'top');
+      childCount.setAttribute("data-bs-placement", "top");
-      childCount.title = `${bookmark.children.length} child bookmark${bookmark.children.length > 1 ? 's' : ''}`;
+      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');
+      const spacer = document.createElement("span");
-      spacer.style.width = '24px';
+      spacer.style.width = "24px";
-      spacer.style.display = 'inline-block';
+      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');
+      const relationshipIndicator = document.createElement("div");
-      relationshipIndicator.className = 'bookmark-relationship-indicator';
+      relationshipIndicator.className = "bookmark-relationship-indicator";
 
-      const line = document.createElement('div');
+      const line = document.createElement("div");
-      line.className = 'relationship-line';
+      line.className = "relationship-line";
       relationshipIndicator.appendChild(line);
 
-      const arrow = document.createElement('div');
+      const arrow = document.createElement("div");
-      arrow.className = 'relationship-arrow';
+      arrow.className = "relationship-arrow";
       relationshipIndicator.appendChild(arrow);
 
       header.appendChild(relationshipIndicator);
 
       // Text indicator
-      const levelIndicator = document.createElement('span');
+      const levelIndicator = document.createElement("span");
-      levelIndicator.className = 'bookmark-level-indicator';
+      levelIndicator.className = "bookmark-level-indicator";
       levelIndicator.textContent = `Child`;
       headerLeft.appendChild(levelIndicator);
     }
 
     // Title preview
-    const titlePreview = document.createElement('span');
+    const titlePreview = document.createElement("span");
-    titlePreview.className = 'bookmark-title-preview';
+    titlePreview.className = "bookmark-title-preview";
     titlePreview.textContent = bookmark.title;
     headerLeft.appendChild(titlePreview);
 
     // Page number preview
-    const pagePreview = document.createElement('span');
+    const pagePreview = document.createElement("span");
-    pagePreview.className = 'bookmark-page-preview';
+    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');
+    const headerRight = document.createElement("div");
-    headerRight.className = 'bookmark-actions-header';
+    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' +
+      if (
-                  (bookmark.children.length > 0 ? ' and all its children?' : '?'))) {
+        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');
+    const row = document.createElement("div");
-    row.className = 'row';
+    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');
+    const titleCol = document.createElement("div");
-    titleCol.className = 'col-md-8';
+    titleCol.className = "col-md-8";
 
-    const titleGroup = document.createElement('div');
+    const titleGroup = document.createElement("div");
-    titleGroup.className = 'mb-3';
+    titleGroup.className = "mb-3";
 
-    const titleLabel = document.createElement('label');
+    const titleLabel = document.createElement("label");
-    titleLabel.textContent = 'Title';
+    titleLabel.textContent = "Title";
-    titleLabel.className = 'form-label';
+    titleLabel.className = "form-label";
 
-    const titleInput = document.createElement('input');
+    const titleInput = document.createElement("input");
-    titleInput.type = 'text';
+    titleInput.type = "text";
-    titleInput.className = 'form-control bookmark-title';
+    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');
+    const pageCol = document.createElement("div");
-    pageCol.className = 'col-md-4';
+    pageCol.className = "col-md-4";
 
-    const pageGroup = document.createElement('div');
+    const pageGroup = document.createElement("div");
-    pageGroup.className = 'mb-3';
+    pageGroup.className = "mb-3";
 
-    const pageLabel = document.createElement('label');
+    const pageLabel = document.createElement("label");
-    pageLabel.textContent = 'Page';
+    pageLabel.textContent = "Page";
-    pageLabel.className = 'form-label';
+    pageLabel.className = "form-label";
 
-    const pageInput = document.createElement('input');
+    const pageInput = document.createElement("input");
-    pageInput.type = 'number';
+    pageInput.type = "number";
-    pageInput.className = 'form-control bookmark-page';
+    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');
+    const button = document.createElement("button");
-    button.type = '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-toggle", "tooltip");
-    button.setAttribute('data-bs-placement', 'top');
+    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');
+    const childrenContainer = document.createElement("div");
-    childrenContainer.className = 'bookmark-children';
+    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-toggle", "tooltip");
-  addBookmarkBtn.setAttribute('data-bs-placement', 'top');
+  addBookmarkBtn.setAttribute("data-bs-placement", "top");
-  addBookmarkBtn.title = 'Add a new top-level bookmark';
+  addBookmarkBtn.title = "Add a new top-level bookmark";
 
   // Add icon to empty state button as well
-  const updateEmptyStateButton = function() {
+  const updateEmptyStateButton = function () {
-    const emptyStateBtn = document.querySelector('.btn-add-first-bookmark');
+    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-toggle", "tooltip");
-      emptyStateBtn.setAttribute('data-bs-placement', 'top');
+      emptyStateBtn.setAttribute("data-bs-placement", "top");
-      emptyStateBtn.title = 'Add first bookmark';
+      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) {
+  const observer = new MutationObserver(function (mutations) {
-    mutations.forEach(function(mutation) {
+    mutations.forEach(function (mutation) {
-      if (mutation.attributeName === 'data-bs-theme') {
+      if (mutation.attributeName === "data-bs-theme") {
-        const isDarkMode = document.documentElement.getAttribute('data-bs-theme') === 'dark';
+        const isDarkMode = document.documentElement.getAttribute("data-bs-theme") === "dark";
-        document.querySelectorAll('.badge').forEach(badge => {
+        document.querySelectorAll(".badge").forEach((badge) => {
-          badge.classList.remove('bg-secondary', 'bg-info');
+          badge.classList.remove("bg-secondary", "bg-info");
-          badge.classList.add(isDarkMode ? 'bg-info' : 'bg-secondary');
+          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');
+          const siblings = parent.querySelectorAll(":scope > .bookmark-item");
-          siblings.forEach(sibling => {
+          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 => {
+      document.querySelectorAll(".bookmark-item").forEach((item) => {
-        item.style.boxShadow = '';
+        item.style.boxShadow = "";
       });
     }
   });

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

@@ -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>
+  <head>
-  <th:block th:insert="~{fragments/common :: head(title=#{editTableOfContents.title}, header=#{editTableOfContents.header})}">
+    <th:block
-  </th:block>
+      th:insert="~{fragments/common :: head(title=#{editTableOfContents.title}, header=#{editTableOfContents.header})}">
-  <link rel="stylesheet" th:href="@{'/css/edit-table-of-contents.css'}">
+    </th:block>
-</head>
+    <link rel="stylesheet"
+      th:href="@{'/css/edit-table-of-contents.css'}">
+  </head>
 
-<body>
+  <body>
-  <div id="page-container">
+    <div id="page-container">
-    <div id="content-wrap">
+      <div id="content-wrap">
-      <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
+        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-      <br><br>
+        <br><br>
-      <div class="container">
+        <div class="container">
-        <div class="row justify-content-center">
+          <div class="row justify-content-center">
-          <div class="col-md-8 bg-card">
+            <div class="col-md-8 bg-card">
-            <div class="tool-header">
+              <div class="tool-header">
-              <span class="material-symbols-rounded tool-header-icon edit">bookmark_add</span>
+                <span class="material-symbols-rounded tool-header-icon edit">bookmark_add</span>
-              <span class="tool-header-text" th:text="#{editTableOfContents.header}"></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 th:src="@{'/js/pages/edit-table-of-contents.js'}"></script>
-  <script>
+    <script>
     document.addEventListener('DOMContentLoaded', function() {
       // Initialize Bootstrap tooltips
       if (typeof $ !== 'undefined') {
@@ -77,6 +171,6 @@
       }
     });
   </script>
-</body>
+  </body>
 
 </html>