import utils from '../services/utils.js'; import server from '../services/server.js'; import toastService from "../services/toast.js"; import appContext from "../services/app_context.js"; import libraryLoader from "../services/library_loader.js"; import openService from "../services/open.js"; const $dialog = $("#note-revisions-dialog"); const $list = $("#note-revision-list"); const $listDropdown = $("#note-revision-list-dropdown"); const $content = $("#note-revision-content"); const $title = $("#note-revision-title"); const $titleButtons = $("#note-revision-title-buttons"); const $eraseAllRevisionsButton = $("#note-revisions-erase-all-revisions-button"); $listDropdown.dropdown(); $listDropdown.parent().on('hide.bs.dropdown', e => { // prevent closing dropdown by clicking outside if (e.clickEvent) { e.preventDefault(); } }); let revisionItems = []; let note; let noteRevisionId; export async function showCurrentNoteRevisions() { await showNoteRevisionsDialog(appContext.tabManager.getActiveContextNoteId()); } export async function showNoteRevisionsDialog(noteId, noteRevisionId) { utils.openDialog($dialog); await loadNoteRevisions(noteId, noteRevisionId); } async function loadNoteRevisions(noteId, noteRevId) { $list.empty(); $content.empty(); $titleButtons.empty(); note = appContext.tabManager.getActiveContextNote(); revisionItems = await server.get(`notes/${noteId}/revisions`); for (const item of revisionItems) { $list.append( $('') .text(item.dateLastEdited.substr(0, 16) + ` (${item.contentLength} bytes)`) .attr('data-note-revision-id', item.noteRevisionId) .attr('title', 'This revision was last edited on ' + item.dateLastEdited) ); } $listDropdown.dropdown('show'); noteRevisionId = noteRevId; if (revisionItems.length > 0) { if (!noteRevisionId) { noteRevisionId = revisionItems[0].noteRevisionId; } } else { $title.text("No revisions for this note yet..."); noteRevisionId = null; } $eraseAllRevisionsButton.toggle(revisionItems.length > 0); } $dialog.on('shown.bs.modal', () => { $list.find(`[data-note-revision-id="${noteRevisionId}"]`) .trigger('focus'); }); async function setContentPane() { const noteRevisionId = $list.find(".active").attr('data-note-revision-id'); const revisionItem = revisionItems.find(r => r.noteRevisionId === noteRevisionId); $titleButtons.empty(); $content.empty(); $title.html(revisionItem.title); const $restoreRevisionButton = $(''); $restoreRevisionButton.on('click', async () => { const confirmDialog = await import('../dialogs/confirm.js'); const text = 'Do you want to restore this revision? This will overwrite current title/content of the note with this revision.'; if (await confirmDialog.confirm(text)) { await server.put(`notes/${revisionItem.noteId}/restore-revision/${revisionItem.noteRevisionId}`); $dialog.modal('hide'); toastService.showMessage('Note revision has been restored.'); } }); const $eraseRevisionButton = $(''); $eraseRevisionButton.on('click', async () => { const confirmDialog = await import('../dialogs/confirm.js'); const text = 'Do you want to delete this revision? This action will delete revision title and content, but still preserve revision metadata.'; if (await confirmDialog.confirm(text)) { await server.remove(`notes/${revisionItem.noteId}/revisions/${revisionItem.noteRevisionId}`); loadNoteRevisions(revisionItem.noteId); toastService.showMessage('Note revision has been deleted.'); } }); $titleButtons .append($restoreRevisionButton) .append('   ') .append($eraseRevisionButton) .append('   '); const $downloadButton = $(''); $downloadButton.on('click', () => openService.downloadNoteRevision(revisionItem.noteId, revisionItem.noteRevisionId)); $titleButtons.append($downloadButton); const fullNoteRevision = await server.get(`notes/${revisionItem.noteId}/revisions/${revisionItem.noteRevisionId}`); if (revisionItem.type === 'text') { $content.html(fullNoteRevision.content); if ($content.find('span.math-tex').length > 0) { await libraryLoader.requireLibrary(libraryLoader.KATEX); renderMathInElement($content[0], {trust: true}); } } else if (revisionItem.type === 'code') { $content.html($("
").text(fullNoteRevision.content));
    }
    else if (revisionItem.type === 'image') {
        $content.html($("")
            // reason why we put this inline as base64 is that we do not want to let user to copy this
            // as a URL to be used in a note. Instead if they copy and paste it into a note, it will be a uploaded as a new note
            .attr("src", `data:${note.mime};base64,` + fullNoteRevision.content)
            .css("max-width", "100%")
            .css("max-height", "100%"));
    }
    else if (revisionItem.type === 'file') {
        const $table = $("")
            .append($("").append(
                $("").append(
                $("").append(
                $('
").text("MIME: "), $("").text(revisionItem.mime) )) .append($("
").text("File size:"), $("").text(revisionItem.contentLength + " bytes") )); if (fullNoteRevision.content) { $table.append($("
').append( $('
').text("Preview:"), $('
')
                        .text(fullNoteRevision.content)
                )
            ));
        }

        $content.html($table);
    }
    else if (revisionItem.type === 'canvas-note') {
        /**
         * can the revisions called without being on the note type before?
         * if so: load excalidraw
         */
        // FIXME: Does it make sense to use EXCALIDRAW_UTILS  that are 1.5 MB
        //        whereas excalidraw (650kB) +react(12kB)+reactdom(118kB)
        /**
         * FIXME: We load a font called Virgil.wof2, which originates from excalidraw.com
         *        REMOVE external dependency!!!! This is defined in the svg in defs.style
         */ 
        await libraryLoader.requireLibrary(libraryLoader.EXCALIDRAW_UTILS);
        const {exportToSvg} = window.ExcalidrawUtils

        const content = fullNoteRevision.content;

        try {
            const data = JSON.parse(content)
            const excData = {
                type: "excalidraw",
                version: 2,
                source: "trilium",
                elements: data.elements,
                appState: data.appState,
                files: data.files,
            }
            const svg = await exportToSvg(excData);
            console.log("canvas-note revision", data, svg);
            $content
                .html(
                    $('
') .html(svg) ); } catch(err) { console.error("error parsing fullNoteRevision.content as JSON", fullNoteRevision.content, err); $content.html($("
").text("Error parsing content. Please check console.error() for more details.")); } } else { $content.text("Preview isn't available for this note type."); } } $eraseAllRevisionsButton.on('click', async () => { const confirmDialog = await import('../dialogs/confirm.js'); const text = 'Do you want to delete all revisions of this note? This action will erase revision title and content, but still preserve revision metadata.'; if (await confirmDialog.confirm(text)) { await server.remove(`notes/${note.noteId}/revisions`); $dialog.modal('hide'); toastService.showMessage('Note revisions has been deleted.'); } }); $list.on('click', '.dropdown-item', e => { e.preventDefault(); return false; }); $list.on('focus', '.dropdown-item', e => { $list.find('.dropdown-item').each((i, el) => { $(el).toggleClass('active', el === e.target); }); setContentPane(); });