Trilium/src/public/javascripts/services/note_detail_image.js

import utils from "./utils.js";
import infoService from "./info.js";
import server from "./server.js";

class NoteDetailImage {
    /**
     * @param {TabContext} ctx
     */
    constructor(ctx) {
        this.ctx = ctx;
        this.$component = ctx.$tabContent.find('.note-detail-image');
        this.$imageWrapper = ctx.$tabContent.find('.note-detail-image-wrapper');
        this.$imageView = ctx.$tabContent.find('.note-detail-image-view');
        this.$copyToClipboardButton = ctx.$tabContent.find(".image-copy-to-clipboard");
        this.$fileName = ctx.$tabContent.find(".image-filename");
        this.$fileType = ctx.$tabContent.find(".image-filetype");
        this.$fileSize = ctx.$tabContent.find(".image-filesize");

        this.$imageDownloadButton = ctx.$tabContent.find(".image-download");
        this.$imageDownloadButton.click(() => utils.download(this.getFileUrl()));

        this.$copyToClipboardButton.click(() => {
            this.$imageWrapper.attr('contenteditable','true');

            try {
                this.selectImage(this.$imageWrapper.get(0));

                const success = document.execCommand('copy');

                if (success) {
                    infoService.showMessage("Image copied to the clipboard");
                }
                else {
                    infoService.showAndLogError("Could not copy the image to clipboard.");
                }
            }
            finally {
                window.getSelection().removeAllRanges();
                this.$imageWrapper.removeAttr('contenteditable');
            }
        });
    }

    async render() {
        const attributes = await server.get('notes/' + this.ctx.note.noteId + '/attributes');
        const attributeMap = utils.toObject(attributes, l => [l.name, l.value]);

        this.$component.show();

        this.$fileName.text(attributeMap.originalFileName || "?");
        this.$fileSize.text((attributeMap.fileSize || "?") + " bytes");
        this.$fileType.text(this.ctx.note.mime);

        this.$imageView.prop("src", `api/images/${this.ctx.note.noteId}/${this.ctx.note.title}`);
    }

    selectImage(element) {
        const selection = window.getSelection();
        const range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }

    getFileUrl() {
        // electron needs absolute URL so we extract current host, port, protocol
        return utils.getHost() + `/api/notes/${this.ctx.note.noteId}/download`;
    }

    show() {}

    getContent() {}

    focus() {}

    onNoteChange() {}

    cleanup() {}

    scrollToTop() {
        this.$component.scrollTop(0);
    }
}

export default NoteDetailImage