From b03f51a369e8cc97b2aee5e0a5a085c4dafd1e9c Mon Sep 17 00:00:00 2001 From: Vanessa Date: Sat, 17 Dec 2022 18:53:54 +0800 Subject: [PATCH] :sparkles: https://github.com/siyuan-note/siyuan/issues/6858 --- app/src/history/diff.ts | 112 +++++++++++++++++++++++++++++++++---- app/src/history/history.ts | 3 + 2 files changed, 105 insertions(+), 10 deletions(-) diff --git a/app/src/history/diff.ts b/app/src/history/diff.ts index 7d596d2ce..f7ae20db7 100644 --- a/app/src/history/diff.ts +++ b/app/src/history/diff.ts @@ -1,21 +1,100 @@ import {fetchPost} from "../util/fetch"; import {Dialog} from "../dialog"; +import {Protyle} from "../protyle"; +import {Constants} from "../constants"; +import {disabledProtyle, onGet} from "../protyle/util/onGet"; +import {hasClosestByClassName} from "../protyle/util/hasClosest"; +import {escapeHtml} from "../util/escape"; -const genItem = (data: [], type: "add" | "update" | "remove") => { +const genItem = (data: [], data2?: { title: string, fileID: string }[]) => { if (!data || data.length === 0) { return `
  • ${window.siyuan.languages.emptyContent}
    • ` } let html = ""; - data.forEach((item: { id: string, path: string }) => { - html += `
  • ${item.path}
    • `; + data.forEach((item: { title: string, fileID: string }, index) => { + let id2 = ""; + if (data2) { + id2 = `data-id2="${data2[index].fileID}"`; + } + html += `
  • + ${escapeHtml(item.title)} +
    • `; }) return html; } +let leftEditor: Protyle; +let rightEditor: Protyle; const renderCompare = (element: HTMLElement) => { - fetchPost("/api/repo/openRepoSnapshotDoc", {id: element.getAttribute("data-id")}, (response) => { + const listElement = hasClosestByClassName(element, "b3-dialog__diff") + if (!listElement) { + return; + } + const leftElement = listElement.nextElementSibling.firstElementChild; + const rightElement = listElement.nextElementSibling.lastElementChild; + if (!leftEditor) { + leftEditor = new Protyle(leftElement.lastElementChild as HTMLElement, { + blockId: "", + action: [Constants.CB_GET_HISTORY], + render: { + background: false, + title: false, + gutter: false, + breadcrumb: false, + breadcrumbDocName: false, + breadcrumbContext: false, + }, + typewriterMode: false, + after(editor) { + disabledProtyle(editor.protyle); + } + }); + rightEditor = new Protyle(rightElement.lastElementChild as HTMLElement, { + blockId: "", + action: [Constants.CB_GET_HISTORY], + render: { + background: false, + title: false, + gutter: false, + breadcrumb: false, + breadcrumbDocName: false, + breadcrumbContext: false, + }, + typewriterMode: false, + after(editor) { + disabledProtyle(editor.protyle); + } + }); + } + fetchPost("/api/repo/openRepoSnapshotDoc", {id: element.getAttribute("data-id")}, (response) => { + if (response.data.isLargeDoc) { + (leftElement.firstElementChild as HTMLTextAreaElement).value = response.data.content; + leftElement.firstElementChild.classList.remove("fn__none"); + leftElement.lastElementChild.classList.add("fn__none"); + } else { + leftElement.firstElementChild.classList.add("fn__none"); + leftElement.lastElementChild.classList.remove("fn__none"); + onGet(response, leftEditor.protyle, [Constants.CB_GET_HISTORY, Constants.CB_GET_HTML]); + } }) + const id2 = element.getAttribute("data-id2") + if (id2) { + rightElement.classList.remove("fn__none"); + fetchPost("/api/repo/openRepoSnapshotDoc", {id: id2}, (response) => { + if (response.data.isLargeDoc) { + (rightElement.firstElementChild as HTMLTextAreaElement).value = response.data.content; + rightElement.firstElementChild.classList.remove("fn__none"); + rightElement.lastElementChild.classList.add("fn__none"); + } else { + rightElement.firstElementChild.classList.add("fn__none"); + rightElement.lastElementChild.classList.remove("fn__none"); + onGet(response, rightEditor.protyle, [Constants.CB_GET_HISTORY, Constants.CB_GET_HTML]); + } + }) + } else { + rightElement.classList.add("fn__none"); + } } export const showDiff = (ids: string) => { @@ -33,18 +112,18 @@ export const showDiff = (ids: string) => { - ${window.siyuan.languages.addAttr} + ${window.siyuan.languages.update} - + -
    +
    +
    + +
    +
    +
    + +
    +
    +
    `, width: "80vw", height: "80vh", + destroyCallback() { + leftEditor.destroy(); + rightEditor.destroy(); + } }); dialog.element.addEventListener("click", (event) => { let target = event.target as HTMLElement; diff --git a/app/src/history/history.ts b/app/src/history/history.ts index 8eecb9370..fcfc7ecb0 100644 --- a/app/src/history/history.ts +++ b/app/src/history/history.ts @@ -296,6 +296,9 @@ export const openHistory = () => { `, width: "80vw", height: "80vh", + destroyCallback() { + historyEditor.destroy(); + } }); const firstPanelElement = dialog.element.querySelector("#historyContainer [data-type=doc]") as HTMLElement;