Overview
This is a record of investigating how to customize LEAF Writer.
https://gitlab.com/calincs/cwrc/leaf-writer/leaf-writer
This time, we add Mirador as shown below.

Method
Please refer to the following.
https://gitlab.com/nakamura196/leaf-writer/-/commit/377438739cdeb0a7b770ee9d4b9fea86081179d8
The file that needs to be modified is as follows.
import $ from 'jquery';
import 'jquery-ui';
import Writer from '../../../Writer';
// @ts-ignore
import Mirador from 'mirador';
interface IiifViewerProps {
attribute?: string;
parentId: string;
tag?: string;
writer: Writer;
}
class IiifViewer {
readonly writer: Writer;
readonly id: string;
readonly tagName: string;
readonly attrName: string;
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-redundant-type-constituents
miradorInstance: any | null;
$pageBreaks: unknown;
currentIndex = -1;
ignoreScroll = false;
constructor({ attribute, parentId, tag, writer }: IiifViewerProps) {
this.writer = writer;
this.id = `${parentId}_iiifViewer`;
this.tagName = tag ?? 'pb'; // page break element name
this.attrName = attribute ?? 'facs'; // attribute that stores the image URL
$(`#${parentId}`).append(`
<div id="${this.id}" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0"></div>
`);
this.writer.event('loadingDocument').subscribe(() => this.reset());
this.writer.event('documentLoaded').subscribe((success: boolean, body: HTMLElement) => {
console.log('documentLoaded', success, body);
if (!success) return;
this.processDocument(body);
});
this.writer.event('writerInitialized').subscribe(() => {
if (!this.writer.editor) return;
});
}
private processDocument(doc: HTMLElement) {
// (doc).find
const $facsimile = $(doc).find(`*[_tag="facsimile"]`);
const manifestUri = $facsimile.attr('sameas');
const config = {
id: this.id,
windows: [
{
loadedManifest: manifestUri,
},
],
window: {
sideBarOpen: false,
},
};
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
this.miradorInstance = Mirador.viewer(config);
}
reset() {
this.$pageBreaks = null;
this.currentIndex = -1;
}
}
export default IiifViewer;
The following section retrieves information from <facsimile sameAs="https://dl.ndl.go.jp/api/iiif/3437686/manifest.json">.
const $facsimile = $(doc).find(`*[_tag="facsimile"]`);
const manifestUri = $facsimile.attr('sameas');
Page synchronization functionality is not yet implemented. Also, the image is displayed small on initial view, which I plan to continue improving.
Summary
I hope this serves as a helpful reference for understanding LEAF Writer.