Create Preview for Identifiers on Edition and Author pages

[onnotasler]

It is not always certain which identifier is expected in an ID field, both for editions and authors. Some institutions offer several IDs, with others the ID is not obvious. Checking an ID is rather tedious, as the page needs to be saved and reloaded for every check. While not problematic for a single ID, it gets time consuming if necessary for many works / authors or one work / author with many IDs.

Describe the problem that you'd like solved

Integrate a preview for IDs, to allow for a test without exiting the edit window or having to leave the editing page.

Proposal & Constraints

There should be a usable preview of the IDs within the edit page, so that I can test any entry without leaving the screen. Many editors for LaTeX, HTML and Asciidoc offer such a preview. There are also plenty online HTML editors with instant preview.

The most important feature is that I can check whether a) a link is created and b) it works as intended. The link from the preview must open in a new tab, as the changes to the work or author page would otherwise be lost.

Additional context

#7261 (This is a part of Improve OpenLibrary's User Interface to make librarians work easier)

Stakeholders

[numericals-org]

@mekarpeles @lokesh

Introduces an inline identifier preview feature for the author and edition edit pages. Librarians can now test whether an identifier generates a valid, working link without saving the page or leaving
the edit view.

Changes:

• Add openlibrary/plugins/openlibrary/js/id-preview.js New module that handles modal open/close, real-time format validation, URL resolution from existing config URL templates, and opens the resolved link in a new tab to preserve unsaved edits.

• Edit openlibrary/plugins/openlibrary/js/index.js Lazy-loads id-preview.js on pages containing .identifiers-form.

• Edit openlibrary/templates/type/edition/edit.html Adds a Preview button next to each identifier [x] remove button, with data-id-name and data-id-value attributes for JS to consume.

• Edit openlibrary/templates/type/author/edit.html Same as above, next to each Remove button in the author edit form.

• Add openlibrary/macros/id_preview_modal.html Shared modal markup included once per edit page. Hidden by default, activated by id-preview.js on button click.

No backend or config changes required. The existing edition.yml and author.yml identifier URL templates (@@@ placeholder) are consumed directly by the JS at runtime.

[lokesh]

This solution seems complex. A simpler approach: Add a small link/icon button next to each entered identifier row inside the existing IdentifiersInput.vue component. When clicked, it resolves the URL from the already-loaded config and opens it in a new tab.

What would be interesting to explore, but better for a second phase, is to have a way to fetch the metadata from the source and display it inline for the editor to verify. So you type in Wikidata id and we query wikidata.org/wiki/Special:EntityData/Q{id}.json and show a small preview of the wikidata book with that id. This might be too ambitious even for a second phase as it would entail maintaining support a large number of third party services. 😅