🎨 https://github.com/siyuan-note/siyuan/issues/9567

app/src/history/diff.ts

@@ -35,11 +35,18 @@ const renderCompare = (app: App, element: HTMLElement) => {
     if (!listElement) {
         return;
     }
+    const dialogContainerElement = hasClosestByClassName(element, "b3-dialog__container")
+    if (!dialogContainerElement) {
+        return
+    }
     const leftElement = listElement.nextElementSibling.firstElementChild;
     const rightElement = listElement.nextElementSibling.lastElementChild;
     if (!leftEditor) {
         leftEditor = new Protyle(app, leftElement.lastElementChild as HTMLElement, {
             blockId: "",
+            history: {
+                snapshot: ""
+            },
             action: [Constants.CB_GET_HISTORY],
             render: {
                 background: false,
@@ -54,6 +61,9 @@ const renderCompare = (app: App, element: HTMLElement) => {
         rightEditor = new Protyle(app, rightElement.lastElementChild as HTMLElement, {
             blockId: "",
             action: [Constants.CB_GET_HISTORY],
+            history: {
+                snapshot: ""
+            },
             render: {
                 background: false,
                 title: false,
@@ -84,6 +94,7 @@ const renderCompare = (app: App, element: HTMLElement) => {
             textElement.classList.add("fn__none");
             leftElement.lastElementChild.classList.remove("fn__none");
             textElement.previousElementSibling.classList.add("fn__none");
+            leftEditor.protyle.options.history.snapshot = dialogContainerElement.querySelector(".b3-dialog__header code").getAttribute("data-snapshot");
             onGet({
                 data: response,
                 protyle: leftEditor.protyle,
@@ -112,6 +123,7 @@ const renderCompare = (app: App, element: HTMLElement) => {
                 textElement.classList.add("fn__none");
                 rightElement.lastElementChild.classList.remove("fn__none");
                 textElement.previousElementSibling.classList.add("fn__none");
+                rightEditor.protyle.options.history.snapshot = dialogContainerElement.querySelectorAll(".b3-dialog__header code")[1].getAttribute("data-snapshot");
                 onGet({
                     data: response,
                     protyle: rightEditor.protyle,
@@ -194,13 +206,13 @@ const genHTML = (left: string, right: string, dialog: Dialog, direct: string) =>
         const headElement = dialog.element.querySelector(".b3-dialog__header");
         headElement.innerHTML = `<div style="padding: 0;min-height: auto;" class="block__icons">
     <span class="fn__flex-1"></span>
-    <code class="fn__code${isPhone ? " fn__none" : ""}">${left.substring(0, 7)}</code>
+    <code class="fn__code${isPhone ? " fn__none" : ""}" data-snapshot="${left}">${left.substring(0, 7)}</code>
     ${isPhone ? "" : '<span class="fn__space"></span>'}
     ${dayjs(response.data.left.created).format("YYYY-MM-DD HH:mm")}
     <span class="fn__space"></span>
     <span class="block__icon block__icon--show b3-tooltips b3-tooltips__s" aria-label="${window.siyuan.languages.switchDirect}" data-direct="${direct}"><svg><use xlink:href="#iconScrollHoriz"></use></svg></span>
     <span class="fn__space"></span>
-    <code class="fn__code${isPhone ? " fn__none" : ""}">${right.substring(0, 7)}</code>
+    <code class="fn__code${isPhone ? " fn__none" : ""}" data-snapshot="${right}">${right.substring(0, 7)}</code>
     ${isPhone ? "" : '<span class="fn__space"></span>'}
     ${dayjs(response.data.right.created).format("YYYY-MM-DD HH:mm")}
     <span class="fn__flex-1"></span>

app/src/protyle/render/av/render.ts

@@ -51,9 +51,11 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void) =
                 selectCellId = (hasClosestByClassName(selectCellElement, "av__row") as HTMLElement).dataset.id + Constants.ZWSP + selectCellElement.getAttribute("data-col-id");
             }
             const created = protyle.options.history?.created;
-            fetchPost(created ? "/api/av/renderHistoryAttributeView" : "/api/av/renderAttributeView", {
+            const snapshot = protyle.options.history?.snapshot;
+            fetchPost(created ? "/api/av/renderHistoryAttributeView" : (snapshot ? "/api/av/renderSnapshotAttributeView" : "/api/av/renderAttributeView"), {
                 id: e.getAttribute("data-av-id"),
-                created
+                created,
+                snapshot
             }, (response) => {
                 const data = response.data.view as IAVTable;
                 // header

app/src/types/protyle.d.ts

@@ -377,6 +377,7 @@ interface IHint {
 interface IOptions {
     history?: {
         created?: string
+        snapshot?: string
     },
     backlinkData?: {
         blockPaths: IBreadcrumb[],