import { AnnotationBlock } from "./elements/AnnotationBlock"; import { CancelButton } from "./elements/CancelButton"; import { DeleteButton } from "./elements/DeleteButton"; import { SaveButton } from "./elements/SaveButton"; import { Annotation, TextGranularity } from "./types/Annotation"; import { Target } from "./types/Target"; import { Editor } from "@tinymce/tinymce-webcomponent"; import AnnotationServerStorage from "./storage"; import "@ungap/custom-elements"; import "./styles/index.scss"; import { AnnotationLabel } from "./elements/AnnotationLabel"; declare global { /** * Exposing new namespace to window, needed to set tinyMCE config */ interface Window { // eslint-disable-next-line @typescript-eslint/no-explicit-any tinyConfig: any; // eslint-disable-next-line @typescript-eslint/no-explicit-any tinymce: any; tinyApiKey: string; } } // define a custom event to indicate that annotations should have positions recalculated const ReloadPositionsEvent = new Event("reload-all-positions"); // Shim for Object.groupBy() until it's implemented in all browsers // via https://stackoverflow.com/a/62765924/394067 // eslint-disable-next-line @typescript-eslint/no-explicit-any, jsdoc/require-jsdoc const groupBy = (arr: T[], key: (i: T) => K) => arr.reduce((groups, item) => { (groups[key(item)] ||= []).push(item); return groups; }, {} as Record); /** * Custom annotation editor for Geniza project */ class TranscriptionEditor { anno; annotationContainer: HTMLElement; toolbarContainer: HTMLFieldSetElement; storage; currentAnnotationBlock: AnnotationBlock | null; skipCancellation: string | undefined; // TODO: Add typedefs for the Annotorious client (anno) and storage plugin /** * Initialize an instance of the TranscriptionEditor. * * @param {any} anno Instance of Annotorious. * @param {any} storage Storage plugin to save Annotorious annotations. * @param {HTMLElement} annotationContainer Existing HTML element that the editor will be * placed into. * @param {HTMLFieldSetElement} toolbarContainer Existing HTML element that the toolbar inputs * will be placed into. * @param {string} tinyApiKey API key for the TinyMCE rich text editor. * @param {string} textDirection Text direction of the TinyMCE rich text editor. * @param {boolean} italicEnabled Set true to enable italic formatting. */ constructor( // eslint-disable-next-line @typescript-eslint/no-explicit-any anno: any, // eslint-disable-next-line @typescript-eslint/no-explicit-any storage: any, annotationContainer: HTMLElement, toolbarContainer: HTMLFieldSetElement, tinyApiKey?: string, textDirection?: string, italicEnabled?: boolean, ) { this.anno = anno; this.storage = storage; // disable the default annotorious editor (headless mode) this.anno.disableEditor = true; // read only in line mode this.anno.readOnly = this.storage.settings.lineMode; this.annotationContainer = annotationContainer; this.currentAnnotationBlock = null; // define custom elements // FIXME: "extends" setting does not work on Safari, nor does inheritance // of element types other than HTMLElement. Buttons will not display. if (!customElements.get("save-button")) customElements.define("save-button", SaveButton, { extends: "button", }); if (!customElements.get("cancel-button")) customElements.define("cancel-button", CancelButton, { extends: "button", }); if (!customElements.get("delete-button")) customElements.define("delete-button", DeleteButton, { extends: "button", }); if (!customElements.get("annotation-block")) customElements.define("annotation-block", AnnotationBlock); if (!customElements.get("annotation-label")) customElements.define("annotation-label", AnnotationLabel); // attach event listeners document.addEventListener( "annotations-loaded", this.handleAnnotationsLoaded.bind(this), ); document.addEventListener( "reload-all-positions", this.handleReloadAllPositions.bind(this), ); this.anno.on("createSelection", this.handleCreateSelection.bind(this)); this.anno.on( "selectAnnotation", this.handleSelectAnnotation.bind(this), ); this.anno.on( "changeSelectionTarget", this.handleChangeSelectionTarget.bind(this), ); this.anno.on( "cancelSelected", this.handleCancelSelection.bind(this), ); // initialize toolbar tools this.toolbarContainer = toolbarContainer; this.initializeToolbar(); // Prepare tinyMCE editor custom element and config if (!customElements.get("tinymce-editor")) { Editor(); } if (!window.tinyConfig) { const numlist = this.storage.settings?.lineMode ? "" : " numlist |"; const italic = italicEnabled ? " italic" : ""; // hide numbered list in line-level editor mode const toolbar = `language |${ numlist }${italic} strikethrough superscript | undo redo | `; window.tinyConfig = { height: this.storage?.settings?.lineMode ? 150 : 500, plugins: "lists", toolbar, directionality: textDirection || "rtl", formats: { italic: { inline: "i" }, strikethrough: { inline: "del" }, // A custom format for insertion element ins: { inline: "ins" }, }, extended_valid_elements: "i,em", content_langs: [ { title: "English", code: "en" }, { title: "Hebrew", code: "he" }, { title: "Arabic", code: "ar" }, ], content_style: "::marker { margin-left: 1em; }\ li { padding-right: 1em; } ins { color: gray; }", menubar: false, // disable menu bar }; } if (!window.tinyApiKey) { window.tinyApiKey = tinyApiKey || "no-api-key"; } } /** * Instantiate the different tools for the toolbar, give them event listeners, * and append them to the toolbar element. */ initializeToolbar() { // each tool is a label-wrapped radio input and span // rectangle image annotation tool const rectangleTool = document.createElement("label"); rectangleTool.classList.add("tahqiq-tool", "rectangle-tool"); const rectangleInput = document.createElement("input"); rectangleInput.type = "radio"; const rectangleLabel = document.createElement("span"); rectangleLabel.innerText = "Select a rectangle for image annotation"; rectangleTool.append(rectangleInput, rectangleLabel); // polygon image annotation tool const polygonTool = document.createElement("label"); polygonTool.classList.add("tahqiq-tool", "polygon-tool"); const polygonInput = document.createElement("input"); polygonInput.type = "radio"; const polygonLabel = document.createElement("span"); polygonLabel.innerText = "Select a polygon for image annotation"; polygonTool.append(polygonInput, polygonLabel); // set rectangle tool active by default rectangleInput.checked = true; rectangleTool.classList.add("active-tool"); // add event listener to rectangle input rectangleInput.addEventListener("change", (e: Event) => { if (e?.target instanceof HTMLInputElement && e.target.checked) { // set drawing tool on annotorious this.anno.setDrawingTool("rect"); // activate in UI, deactivate other tools rectangleTool.classList.add("active-tool"); polygonInput.checked = false; polygonTool.classList.remove("active-tool"); } }); // add event listener to polygon input polygonInput.addEventListener("change", (e: Event) => { if (e?.target instanceof HTMLInputElement && e.target.checked) { this.anno.setDrawingTool("polygon"); // activate in UI, deactivate other tools polygonTool.classList.add("active-tool"); rectangleInput.checked = false; rectangleTool.classList.remove("active-tool"); } }); // append both inputs to toolbar container this.toolbarContainer.append(rectangleTool, polygonTool); } /** * Helper method to sort annotations by position and create and append * AnnotationBlocks for each. * * @param {Array} annotations A list of annotations * @param {HTMLElement} container A container in which to place the blocks */ createBlocks(annotations: Array, container: HTMLElement) { // sort by position attribute if present annotations.sort((a: Annotation, b: Annotation) => { // null position should go to the end; it means dragged from another canvas if (a["schema:position"] === null) return 1; if (b["schema:position"] === null) return -1; if (a["schema:position"] && b["schema:position"]) return a["schema:position"] - b["schema:position"]; return 0; }); // append annotation blocks to display current annotations annotations.forEach((annotation: Annotation) => { container.append( new AnnotationBlock({ annotation, editable: false, onCancel: this.handleCancel.bind(this), onClick: this.handleClickAnnotationBlock.bind(this), onDelete: this.handleDeleteAnnotation.bind(this), onDrag: this.handleDrag.bind(this), onReorder: this.handleDropAnnotationBlock.bind(this), onSave: this.handleSaveAnnotation.bind(this), updateAnnotorious: this.anno.addAnnotation, }), ); }); } /** * Handler for custom annotations loaded event triggered by storage plugin. * * @param {Event} e The annotations-loaded custom event */ async handleAnnotationsLoaded(e: Event) { // only reload if the event target (i.e. canvas) matches this one if ( e instanceof CustomEvent && e.detail?.target === this.storage?.settings?.target ) { // remove any existing annotation blocks and drop zones, in case of update this.annotationContainer .querySelectorAll( "[class^='tahqiq-block'], .tahqiq-drop-zone, .tahqiq-line-group", ) .forEach((el) => el.remove()); // display all current annotations const currentAnnotations = e.detail.annotations; if (currentAnnotations) { if (this.storage.settings.lineMode) { // line mode: group line-level annotations by associated block-level ID Object.entries( groupBy( currentAnnotations.filter( (anno: Annotation) => anno.textGranularity === TextGranularity.LINE, ), (anno: Annotation) => anno.partOf || "group", ), ).forEach(([blockId, lines]) => { // locate the associated block-level annotation by ID const group = currentAnnotations.find( (anno: Annotation) => anno.textGranularity === TextGranularity.BLOCK && anno.id === blockId, ); // create the line group element and append the group label const lineGroup = document.createElement("DIV"); lineGroup.classList.add("tahqiq-line-group"); // allow editing the label associated with the group of line-level // annotations, since the group itself is not editable, only the lines this.annotationContainer.append( new AnnotationLabel({ annotation: group, editable: false, onCancel: this.handleCancel.bind(this), onClick: this.handleClickAnnotationBlock.bind(this), onSave: this.handleSaveAnnotation.bind(this), }), lineGroup, ); // create the editable line-level content blocks this.createBlocks(lines, lineGroup); }); } else { // block mode: just create blocks from all annotations this.createBlocks( currentAnnotations, this.annotationContainer, ); } } // if no annotations returned, append a drop zone here so we can drop annotations // from other canvases onto this one if (!currentAnnotations?.length) { const dropZone = document.createElement("div"); dropZone.className = "tahqiq-drop-zone"; // add drag and drop event listeners to drop zone dropZone.addEventListener("dragover", (evt) => { evt.preventDefault(); }); dropZone.addEventListener("dragenter", (evt) => { if (evt.currentTarget instanceof HTMLDivElement) { evt.currentTarget.classList.add("tahqiq-drag-target"); } }); dropZone.addEventListener("dragleave", (evt) => { if (evt.currentTarget instanceof HTMLDivElement) { evt.currentTarget.classList.remove("tahqiq-drag-target"); } }); dropZone.addEventListener("drop", (evt) => { if (evt.currentTarget instanceof HTMLDivElement) { evt.currentTarget.classList.remove("tahqiq-drag-target"); } this.handleDropAnnotationBlock(evt); }); this.annotationContainer.append(dropZone); } } this.setAllInteractive(true); } /** * Instantiates an editable annotation block when a new selection is made. * * @param {Annotation} selection Selected Annotorious annotation. */ async handleCreateSelection(selection: Annotation) { const annotationBlock = new AnnotationBlock({ annotation: selection, editable: true, onCancel: this.handleCancel.bind(this), onClick: this.handleClickAnnotationBlock.bind(this), onDelete: this.handleDeleteAnnotation.bind(this), onDrag: this.handleDrag.bind(this), onReorder: this.handleDropAnnotationBlock.bind(this), onSave: this.handleSaveAnnotation.bind(this), updateAnnotorious: this.anno.addAnnotation, }); this.annotationContainer.append(annotationBlock); this.makeAllReadOnlyExcept(annotationBlock); this.setAllInteractive(false); this.allowDragging(this.anno._element); } /** * When cancel button is clicked, cancel with annotorious and set all draggable */ handleCancel() { if (this.anno.getSelected()) { // cancel with annotorious this.anno.cancelSelected(); } // make all annotations draggable this.setAllInteractive(true); // raise global cancellation event document.dispatchEvent(new CustomEvent("tahqiq-cancel")); } /** * Sets all annotation blocks to read-only when an existing annotation is selected, * and sets one annotation block to editable corresponding to the selected annotation. * * @param {Annotation} annotation Annotorious annotation. * @param {HTMLElement} element Annotation SVG shape element. */ handleSelectAnnotation(annotation: Annotation, element: HTMLElement) { // The user has selected an existing annotation // find the display element by annotation id and swith to edit mode const annotationBlock = document.querySelector( '[data-annotation-id="' + annotation.id + '"]', ); if (annotationBlock && annotationBlock instanceof AnnotationBlock) { // allow pointer events while the handles are being dragged this.allowDragging(element); // make sure no other editor is active this.makeAllReadOnlyExcept(annotationBlock); annotationBlock.makeEditable(); // set current annotation block this.currentAnnotationBlock = annotationBlock; // ensure no annotation block is draggable this.setAllInteractive(false); } } /** * * Update the cached annotation on the currently selected annotation block * when the target changes. * * @param {Target} target updated target from an Annotorious annotation. */ handleChangeSelectionTarget(target: Target) { // if there is an annotation block currently active, // update the cached annotation with the changed target if (this.currentAnnotationBlock != null) { this.currentAnnotationBlock.annotation.target = target; } } /** * Handler for annotorious cancel selection event (should only fire when user * presses the escape key) * * @param {Annotation} selection the active selection being canceled */ handleCancelSelection(selection: Annotation) { // when Annotorious cancels an Annotation, we should too. // pass selection as CustomEvent.detail so we can cancel the right one // (e.g. if there are multiple annotations being edited on different canvases // at once) document.dispatchEvent( new CustomEvent("cancel-annotation", { detail: selection }), ); } /** * Deletes an annotation from both Annotorious display and the annotation store. * * @param {string} annotationBlock Annotation block associated with the annotation to delete. */ async handleDeleteAnnotation(annotationBlock: AnnotationBlock) { try { this.storage.alert("Deleting..."); if (!annotationBlock.annotation.id) { this.storage.alert( "No annotation ID associated with this display block", "error", ); } else { // calling removeAnnotation doesn't fire the deleteAnnotation event, // so we have to trigger the deletion explicitly (also avoids race condition!) await this.storage.delete(annotationBlock.annotation); // remove the highlight zone from the image this.anno.removeAnnotation(annotationBlock.annotation.id); // decrement annotation count this.storage.setAnnotationCount(this.storage.annotationCount - 1); // remove the edit/display displayBlock annotationBlock.remove(); // reload positions of all annotation blocks except this one const blocks = this.annotationContainer.querySelectorAll(".tahqiq-block-display"); const annotations = Array.from(blocks).map((block) => { if ( block instanceof AnnotationBlock && block.annotation.id !== annotationBlock.annotation.id && // if annotation is line-level and has an associated block, reload only // the annotations in its block for performance ( !block.annotation.partOf || block.annotation.partOf === annotationBlock.annotation.partOf ) ) return block.annotation; }); await this.updateSequence(annotations); this.storage.alert("Annotation deleted", "success"); } // eslint-disable-next-line @typescript-eslint/no-explicit-any } catch (err: any) { // handle errors thrown by storage.delete this.storage.alert(err.message, "error"); } } /** * Saves the passed annotation block's associated annotation using its editor * content (and label if present), and makes the annotation block read only. * * @param {AnnotationBlock | AnnotationLabel} annotationElement Annotation element * associated with the annotation to save. */ async handleSaveAnnotation( annotationElement: AnnotationBlock | AnnotationLabel, ) { this.storage.alert("Saving..."); const annotation = annotationElement.annotation; const editorContent = window.tinymce?.get(annotationElement.editorId)?.getContent(); // add the content to the annotation if (Array.isArray(annotation.body) && annotation.body.length == 0) { annotation.body.push({ type: "TextualBody", value: editorContent || "", format: "text/html", label: annotationElement.labelElement.textContent || undefined, // purpose: "transcribing", // - purpose on body is only needed if more than one body // (e.g., transcription + tags in the same annotation) }); } else if (Array.isArray(annotation.body)) { // assume text content is first body element annotation.body[0].value = editorContent || ""; annotation.body[0].label = annotationElement.labelElement.textContent || undefined; } // turn off draggability for all blocks while saving this.setAllInteractive(false); if (annotationElement instanceof AnnotationBlock) { // update with annotorious, save to, and reload from storage backend await this.anno.updateSelected(annotation, true); } else { await this.storage.handleUpdateAnnotationInStore(annotation); } } /** * On clicking an AnnotationBlock, selects the associated annotation in Annotorious * and makes all other AnnotationBlocks read-only. * * @param {AnnotationBlock | AnnotationLabel} annotationElement The element that was clicked. */ handleClickAnnotationBlock( annotationElement: AnnotationBlock | AnnotationLabel, ) { if (annotationElement.annotation.id) { if (annotationElement instanceof AnnotationBlock) { // highlight the zone (block only) this.anno.selectAnnotation(annotationElement.annotation.id); } // make sure no other annotation blocks are editable this.makeAllReadOnlyExcept(annotationElement); // ensure no annotation block is draggable this.setAllInteractive(false); } } /** * On drag start of any annotation, show drop zones as targetable. Do the opposite * on drag end. * * @param {boolean} start Boolean to indicate whether this is dragstart or dragend */ handleDrag(start: boolean) { const dropZones = document.querySelectorAll(".tahqiq-drop-zone"); dropZones.forEach((dropZone) => { if (start) { dropZone.classList.add("tahqiq-drag-targetable"); } else { dropZone.classList.remove("tahqiq-drag-targetable"); } }); } /** * When an annotation block is dropped, set its position and check its neighbors' positions * for changes. If any positions changed, save changed annotations. * * TODO: Test once DragEvent is implemented in jsdom * https://github.com/jsdom/jsdom/blob/28ed5/test/web-platform-tests/to-run.yaml#L648-L654 * * @param {DragEvent} evt The "drop" event that triggered this handler */ async handleDropAnnotationBlock(evt: DragEvent) { evt.preventDefault(); // set loading style to prepare for network requests this.annotationContainer .querySelectorAll("annotation-block") .forEach((block) => { if (block instanceof AnnotationBlock) { block.classList.add("tahqiq-loading"); } }); const blocks = this.annotationContainer.querySelectorAll("annotation-block"); const annotations = Array.from(blocks).map((block) => { if (block instanceof AnnotationBlock) { return block.annotation; } }); const draggedId = evt.dataTransfer?.getData("text"); const draggedAnnotation = annotations.find((anno: Annotation | undefined) => anno?.id === draggedId, ); if (draggedAnnotation && evt.currentTarget instanceof AnnotationBlock) { this.storage.alert("Reordering..."); // dragged block found in current tahqiq instance const draggedIndex = annotations.indexOf(draggedAnnotation); const droppedIndex = annotations.indexOf(evt.currentTarget.annotation); // move the dragged block to the correct index annotations.splice(draggedIndex, 1); annotations.splice(droppedIndex, 0, draggedAnnotation); try { await this.updateSequence(annotations); this.storage.alert("Annotations reordered", "success"); // eslint-disable-next-line @typescript-eslint/no-explicit-any } catch (err: any) { // handle errors thrown by storage.update in updateSequence this.storage.alert(err.message, "error"); } } else { // dragged block is from another tahqiq instance on the document this.storage.alert("Moving..."); const draggedBlock = document.querySelector( `[data-annotation-id="${draggedId}"]`, ); if (draggedBlock instanceof AnnotationBlock) { // adjust the target of the dragged block to point to this canvas const newAnnotation = { ...draggedBlock.annotation, target: { ...draggedBlock.annotation.target, source: { ...this.storage.adjustTargetSource( draggedBlock.annotation.target.source, ), id: this.storage.settings.target, }, }, "schema:position": null, }; try { // update the dragged block in storage await this.storage.update(newAnnotation); this.storage.alert("Annotation moved", "success"); // recalculate positions in both this and origin tahqiq instances document.dispatchEvent(ReloadPositionsEvent); // eslint-disable-next-line @typescript-eslint/no-explicit-any } catch (err: any) { // handle errors thrown by storage.update this.storage.alert(err.message, "error"); } } else { this.storage.alert("Error finding the dragged annotation", "error"); } } } /** * Event handler for the reload-all-positions event: loads all annotations from storage, * then recalculates their positions. */ async handleReloadAllPositions() { const annotations = await this.storage.loadAnnotations(); try { await this.updateSequence(annotations); // eslint-disable-next-line @typescript-eslint/no-explicit-any } catch (err: any) { // handle errors thrown by storage.update in updateSequence this.storage.alert(err.message, "error"); } } /** * Given an array of annotations, set all position properties and * save if changed. Used for annotation reordering and deletion. * * @param {(Annotation | undefined)[]} annotations Array of annotations. */ async updateSequence(annotations: (Annotation | undefined)[]) { // turn off draggability for all blocks while loading this.setAllInteractive(false); await Promise.all(annotations.map(async (anno, i) => { const position = i + 1; if ( anno && anno["schema:position"] !== position ) { // if position changed, set schema:position and save const newAnnotation = { ...anno, "schema:position": position, }; // save block await this.storage.update(newAnnotation); } return Promise.resolve(); })); // reload all annotations (and rebind event listeners, turn draggability // back on) return this.storage.loadAnnotations(); } /** * Sets all annotation blocks to read-only, except the passed one. * * @param {AnnotationBlock | AnnotationLabel} annotationElement The annotation block not * to make read-only. */ makeAllReadOnlyExcept( annotationElement: AnnotationBlock | AnnotationLabel, ) { this.annotationContainer .querySelectorAll(".tahqiq-block-editor, .tahqiq-label-editor") .forEach((block) => { if ( (block instanceof AnnotationBlock || block instanceof AnnotationLabel) && block !== annotationElement ) { block.makeReadOnly(); } }); } /** * Enable or disable all pointer events on the annotorious canvas in the current instance. * If an annotorious rectangle is currently selected and editable, it will remain movable * and resizable (pointer-events: all), even if enabled is set false. * * @param {boolean} enabled Whether or not pointer events should be enabled */ setAnnotoriousPointerEvents(enabled: boolean) { // use query selectors to get the annotorious elements const selectedAnnotoriousRectangle = this.anno._element.querySelector( "g.a9s-annotation.editable.selected", ); const osdCanvas = this.anno._element.querySelector("div.openseadragon-canvas"); const annotationLayer = this.anno._element.querySelector("svg.a9s-annotationlayer"); if (enabled) { // enable pointer events on the canvas and annotation layer osdCanvas.style.pointerEvents = "auto"; annotationLayer.style.pointerEvents = "all"; // enable pointer events on all annotorious rectangles this.anno._element.querySelectorAll("g.a9s-annotation").forEach( (el: SVGGElement) => { el.style.pointerEvents = "all"; }, ); } else { // disable pointer events on the OSD and annotation layers to prevent // accidental cancellation osdCanvas.style.pointerEvents = "none"; annotationLayer.style.pointerEvents = "none"; // disable pointer events on all non-editable annotorious rectangles this.anno._element.querySelectorAll("g.a9s-annotation:not(.editable)").forEach( (el: SVGGElement) => { el.style.pointerEvents = "none"; }, ); if (selectedAnnotoriousRectangle) { // allow the selected annotorious rectangle to be moved and resized selectedAnnotoriousRectangle.style.pointerEvents = "all"; } } } /** * When a selection is created or changed, this function will temporarily allow * Annotorious pointer events while the selection's handles are being dragged. * * @param {HTMLElement} element The element containing the selection's handles. */ allowDragging(element: HTMLElement) { element.querySelectorAll("g.a9s-handle").forEach( (handle) => { handle.addEventListener( "mousedown", () => this.setAnnotoriousPointerEvents(true), ); handle.addEventListener( "mouseup", () => this.setAnnotoriousPointerEvents(false), ); }, ); } /** * Set draggability on or off for all blocks; set pointer-events enabled or disabled on * the Annotorious canvas. * * @param {boolean} interactive Whether or not blocks should be draggable and clickable */ setAllInteractive(interactive: boolean) { this.annotationContainer .querySelectorAll("annotation-block, annotation-label") .forEach((block) => { if (block instanceof AnnotationBlock) { // no dragging in line mode block.setDraggable(interactive && !this.storage?.settings?.lineMode); block.setClickable(interactive); } else if (block instanceof AnnotationLabel) { // no dragging annotationlabel (only shows up in line mode) block.setClickable(interactive); } }); this.setAnnotoriousPointerEvents(interactive); } } export default TranscriptionEditor; export { TranscriptionEditor, AnnotationServerStorage };