+
Select a page to see its history.
+
+
+
+ ${this.renderCreateRow()}
+ ${this._loading ? html`- Loading…
` : nothing}
+ ${this._versions?.map((entry) => (entry.isVersion
+ ? this.renderVersionItem(entry)
+ : this.renderAuditGroup(entry)))}
+
+
+ ${this._compareDom ? renderCompareModal({
+ labelA: 'Current document',
+ labelB: this._compareLabel,
+ compareDom: this._compareDom,
+ onClose: () => this.handleCloseCompare(),
+ }) : nothing}
+
diff --git a/blocks/edit/prose/diff/generate-diff.js b/blocks/edit/prose/diff/generate-diff.js
index 455cc197f..a21d508aa 100644
--- a/blocks/edit/prose/diff/generate-diff.js
+++ b/blocks/edit/prose/diff/generate-diff.js
@@ -1,4 +1,4 @@
-import { htmlDiff } from './htmldiff.js';
+import { htmlDiff } from '../../../shared/version/htmldiff.js';
function fragmentToHTML(fragment) {
if (!fragment) return '';
diff --git a/blocks/shared/utils.js b/blocks/shared/utils.js
index f540d51fd..21a9a38d7 100644
--- a/blocks/shared/utils.js
+++ b/blocks/shared/utils.js
@@ -302,6 +302,13 @@ export const getAemSiteToken = (() => {
};
})();
+export function formatDate(timestamp) {
+ const rawDate = timestamp ? new Date(timestamp) : new Date();
+ const date = rawDate.toLocaleDateString([], { year: 'numeric', month: 'short', day: 'numeric' });
+ const time = rawDate.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+ return { date, time };
+}
+
export function delay(ms) {
return new Promise((res) => { setTimeout(res, ms); });
}
diff --git a/blocks/edit/da-editor/da-compare.css b/blocks/shared/version/compare.css
similarity index 98%
rename from blocks/edit/da-editor/da-compare.css
rename to blocks/shared/version/compare.css
index 8a0ed7392..17bdc0838 100644
--- a/blocks/edit/da-editor/da-compare.css
+++ b/blocks/shared/version/compare.css
@@ -9,7 +9,7 @@
}
.da-compare-modal {
- background: #FFF;
+ background: #fff;
border-radius: 10px;
box-shadow: rgb(0 0 0 / 25%) 0 4px 24px;
width: min(960px, 100%);
@@ -25,7 +25,7 @@
justify-content: space-between;
gap: 16px;
padding: 16px 20px;
- border-bottom: 1px solid #DDD;
+ border-bottom: 1px solid #ddd;
flex: 0 0 auto;
}
diff --git a/blocks/shared/version/compare.js b/blocks/shared/version/compare.js
new file mode 100644
index 000000000..bb95b194f
--- /dev/null
+++ b/blocks/shared/version/compare.js
@@ -0,0 +1,90 @@
+import { html } from 'da-lit';
+import { DOMSerializer } from 'da-y-wrapper';
+import { daFetch } from '../utils.js';
+
+export function wrapTablesInWrappers(root) {
+ root.querySelectorAll('table').forEach((table) => {
+ if (table.parentElement?.classList.contains('tableWrapper')) return;
+ const wrapper = document.createElement('div');
+ wrapper.className = 'tableWrapper';
+ table.replaceWith(wrapper);
+ wrapper.appendChild(table);
+ });
+}
+
+export function stripEmptyTopLevelBlocks(root) {
+ const isWhitespace = (s) => !s || /^\s*$/.test(s);
+ Array.from(root.children).forEach((child) => {
+ const hasMedia = child.querySelector('img, video, table, hr, iframe, svg');
+ if (!hasMedia && isWhitespace(child.textContent)) child.remove();
+ });
+}
+
+export function docToHtml(view) {
+ const { schema, doc } = view.state;
+ const frag = DOMSerializer.fromSchema(schema).serializeFragment(doc.content);
+ const el = document.createElement('div');
+ el.append(frag);
+ wrapTablesInWrappers(el);
+ stripEmptyTopLevelBlocks(el);
+ return el.innerHTML;
+}
+
+export function domToHtml(el) {
+ const clone = el.cloneNode(true);
+ stripEmptyTopLevelBlocks(clone);
+ return clone.innerHTML;
+}
+
+export async function fetchVersionDom(url) {
+ const resp = await daFetch(url);
+ if (!resp.ok) return null;
+ const rawHtml = await resp.text();
+ const { Y } = await import('da-y-wrapper');
+ const { aem2doc, getSchema, yDocToProsemirror } = await import('da-parser');
+ const ydoc = new Y.Doc();
+ aem2doc(rawHtml, ydoc);
+ const schema = getSchema();
+ const pmDoc = yDocToProsemirror(schema, ydoc);
+ const frag = DOMSerializer.fromSchema(schema).serializeFragment(pmDoc.content);
+ const el = document.createElement('div');
+ el.append(frag);
+ stripEmptyTopLevelBlocks(el);
+ return el;
+}
+
+export async function buildCompareDom({ htmlA, htmlB, onClose }) {
+ const { htmlDiff } = await import('./htmldiff.js');
+ const dom = document.createElement('div');
+ dom.className = 'ProseMirror';
+ dom.innerHTML = htmlDiff(htmlA, htmlB);
+ wrapTablesInWrappers(dom);
+
+ const onDocClick = (ev) => {
+ const insideModal = ev.composedPath().some((n) => n?.classList?.contains?.('da-compare-modal'));
+ if (!insideModal) onClose();
+ };
+ const cleanup = () => document.removeEventListener('click', onDocClick, true);
+ setTimeout(() => document.addEventListener('click', onDocClick, true), 0);
+
+ return { dom, cleanup };
+}
+
+export function renderCompareModal({ title = 'Compare', labelA, labelB, compareDom, onClose }) {
+ return html`
+
`;
+}
diff --git a/blocks/shared/version/da-versions-base.js b/blocks/shared/version/da-versions-base.js
new file mode 100644
index 000000000..8cb633583
--- /dev/null
+++ b/blocks/shared/version/da-versions-base.js
@@ -0,0 +1,160 @@
+import { LitElement, html, nothing } from 'da-lit';
+import { DA_ORIGIN } from '../constants.js';
+import { daFetch, formatDate } from '../utils.js';
+import { formatVersions } from './helpers.js';
+
+export default class DaVersionsBase extends LitElement {
+ static properties = {
+ open: { attribute: false },
+ path: { type: String },
+ _versions: { state: true },
+ _newVersion: { state: true },
+ _loading: { state: true },
+ };
+
+ async getVersions() {
+ if (!this.path) return;
+ this._loading = true;
+ this._versions = null;
+ const resp = await daFetch(`${DA_ORIGIN}/versionlist${this.path}`);
+ if (!resp.ok) {
+ this._loading = false;
+ return;
+ }
+ try {
+ const json = await resp.json();
+ this._versions = formatVersions(json);
+ } catch {
+ this._versions = [];
+ }
+ this._loading = false;
+ }
+
+ handleClose() {
+ const opts = { bubbles: true, composed: true };
+ this.dispatchEvent(new CustomEvent('close', opts));
+ }
+
+ async handlePreview(e, entry) {
+ e.stopPropagation();
+ const entryEl = e.target.closest('.da-version-entry');
+ if (!entryEl.classList.contains('is-open')) {
+ entryEl.classList.toggle('is-open');
+ }
+ const detail = { url: `${DA_ORIGIN}${entry.url}`, label: entry.label, date: entry.date };
+ this.dispatchEvent(new CustomEvent('preview', { detail, bubbles: true, composed: true }));
+ }
+
+ handleExpand({ target }) {
+ target.closest('.da-version-entry').classList.toggle('is-open');
+ }
+
+ async handleNewSubmit(e) {
+ e.preventDefault();
+ const entry = { ...this._newVersion };
+ if (e.target.elements.label?.value) entry.label = e.target.elements.label.value;
+
+ const opts = { method: 'POST' };
+ if (entry.label) opts.body = JSON.stringify({ label: entry.label });
+
+ const res = await daFetch(`${DA_ORIGIN}/versionsource${this.path}`, opts);
+ if (res.status !== 201) return;
+
+ this._newVersion = null;
+ this._versions.unshift(entry);
+ // TODO: The server does not respond with version details, so get a fresh list
+ this.getVersions();
+ }
+
+ handleNew(e) {
+ e.target.disabled = true;
+ const { date, time } = formatDate();
+ this._newVersion = { date, time, isVersion: true, users: [] };
+ }
+
+ handleCancel() {
+ this._newVersion = null;
+ }
+
+ update(changedProps) {
+ if (changedProps.has('open') && this.open) this.getVersions();
+ super.update(changedProps);
+ }
+
+ // --- render helpers (available to subclasses) ---
+
+ renderAudits(entry) {
+ return html`
+
+
+ ${entry.date}
+
+ ${entry.audits.map((auEntry) => html`
+ -
+
${auEntry.time}
+
+ ${auEntry.users.map((user) => html`
${user.email}
`)}
+
+ `)}
+
+
+ `;
+ }
+
+ renderNewVersion() {
+ const entry = this._newVersion;
+ return html`
+
+
+
+
+ `;
+ }
+
+ renderVersion(entry) {
+ return html`
+
+
+ ${entry.date}
+ ${entry.label ? html`${entry.label}
` : nothing}
+
+ -
+
${entry.time}
+
+ ${entry.users.map((user) => html`
${user.email}
`)}
+
+
+
+ `;
+ }
+
+ renderNow() {
+ return html`
+
+
+ Now
+
+ `;
+ }
+
+ renderVersionList() {
+ return this._versions.map((entry) => html`
+ ${entry.isVersion ? this.renderVersion(entry) : this.renderAudits(entry)}
+ `);
+ }
+
+ renderLoading() {
+ return html`
+
+
+ Loading...
+
+ `;
+ }
+}
diff --git a/blocks/edit/da-versions/helpers.js b/blocks/shared/version/helpers.js
similarity index 71%
rename from blocks/edit/da-versions/helpers.js
rename to blocks/shared/version/helpers.js
index 560f31459..3259977d7 100644
--- a/blocks/edit/da-versions/helpers.js
+++ b/blocks/shared/version/helpers.js
@@ -1,9 +1,4 @@
-export function formatDate(timestamp) {
- const rawDate = timestamp ? new Date(timestamp) : new Date();
- const date = rawDate.toLocaleDateString([], { year: 'numeric', month: 'short', day: 'numeric' });
- const time = rawDate.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
- return { date, time };
-}
+import { formatDate } from '../utils.js';
export function formatVersions(json) {
// Sort by timestamp epoch
diff --git a/blocks/edit/prose/diff/htmldiff.js b/blocks/shared/version/htmldiff.js
similarity index 100%
rename from blocks/edit/prose/diff/htmldiff.js
rename to blocks/shared/version/htmldiff.js
diff --git a/test/unit/blocks/edit/da-versions/helpers.test.js b/test/unit/blocks/shared/version/helpers.test.js
similarity index 97%
rename from test/unit/blocks/edit/da-versions/helpers.test.js
rename to test/unit/blocks/shared/version/helpers.test.js
index 118621c8c..7f7d5adbc 100644
--- a/test/unit/blocks/edit/da-versions/helpers.test.js
+++ b/test/unit/blocks/shared/version/helpers.test.js
@@ -1,5 +1,6 @@
import { expect } from '@esm-bundle/chai';
-import { formatDate, formatVersions } from '../../../../../blocks/edit/da-versions/helpers.js';
+import { formatDate } from '../../../../../blocks/shared/utils.js';
+import { formatVersions } from '../../../../../blocks/shared/version/helpers.js';
const TIME_OPTS = { hour: 'numeric', minute: '2-digit' };
const DATE_OPTS = { year: 'numeric', month: 'short', day: 'numeric' };
diff --git a/test/unit/blocks/edit/prose/diff/htmldiff.test.js b/test/unit/blocks/shared/version/htmldiff.test.js
similarity index 99%
rename from test/unit/blocks/edit/prose/diff/htmldiff.test.js
rename to test/unit/blocks/shared/version/htmldiff.test.js
index 0114ef78b..3ee81f96b 100644
--- a/test/unit/blocks/edit/prose/diff/htmldiff.test.js
+++ b/test/unit/blocks/shared/version/htmldiff.test.js
@@ -1,5 +1,5 @@
import { expect } from '@esm-bundle/chai';
-import { htmlDiff } from '../../../../../../blocks/edit/prose/diff/htmldiff.js';
+import { htmlDiff } from '../../../../../blocks/shared/version/htmldiff.js';
describe('HTML Diff', () => {
describe('htmlDiff main function', () => {