GH-108 Version History & Audit Log

blocks/edit/da-content/da-content.css

@@ -16,7 +16,16 @@ da-editor {
   z-index: 1;
 }
 
-da-preview {
+da-version {
+  display: none;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 2;
+}
+
+da-preview,
+da-versions {
   visibility: hidden;
   position: absolute;
   width: 0;
@@ -25,46 +34,61 @@ da-preview {
   justify-self: right;
 }
 
-da-preview.show-preview {
+da-preview.show-preview,
+da-versions.show-versions {
   visibility: unset;
   position: relative;
   width: unset;
   height: unset;
   overflow: unset;
 }
 
-.da-preview-menubar {
+.da-editor-tabs {
   display: none;
   position: absolute;
   top: 20px;
-  padding: 6px 6px 0px;
+  right: -56px;
+}
+
+.da-editor-tabs-full {
+  padding: 6px;
   border-radius: 4px;
-  box-shadow: rgb(181, 181, 181) 0px 0px 5px 0px;
-  background: rgb(255, 255, 255);
+  box-shadow: rgb(181 181 181) 0 0 5px 0;
+  background: rgb(255 255 255);
   box-sizing: border-box;
-  right: -56px;
 }
 
-:host(.show-preview) .da-preview-menubar {
-  display: none;
+.da-editor-tabs-quiet {
+  padding: 6px;
 }
 
-.da-preview-menuitem {
+.da-editor-tab {
   display: block;
   width: 50px;
   height: 44px;
   text-indent: -1000px;
   overflow: hidden;
   border-radius: 2px;
-  margin-bottom: 6px;
-  background-color: rgb(239, 239, 239);
+  border: none;
+  cursor: pointer;
 }
 
-.da-preview-menuitem.show-preview {
-  background: url("/blocks/edit/img/Smock_Preview_18_N.svg") center center / 20px no-repeat rgb(239, 239, 239);
+.da-editor-tab.show-preview {
+  background: url("/blocks/edit/img/Smock_Preview_18_N.svg") center center / 20px no-repeat rgb(239 239 239);
   background-blend-mode: hard-light;
 }
 
+.da-editor-tab.show-versions {
+  background: url("/blocks/edit/img/Smock_Calendar_18_N.svg") center center / 20px no-repeat;
+  background-blend-mode: hard-light;
+}
+
+:host(.show-preview) .da-editor-tabs,
+:host(.show-versions) .da-editor-tabs {
+  display: none;
+}
+
+
 @media (min-width: 600px) {
   :host {
     padding: 0 80px;
@@ -74,7 +98,7 @@ da-preview.show-preview {
     min-width: 375px;
   }
 
-  .da-preview-menubar {
+  .da-editor-tabs {
     display: unset;
   }
 }
@@ -89,12 +113,4 @@ da-preview.show-preview {
   .editor-wrapper {
     width: 900px;
   }
-
-  da-editor {
-
-  }
-
-  :host(.show-preview) da-editor {
-
-  }
 }

blocks/edit/da-content/da-content.js

@@ -3,32 +3,67 @@ import { LitElement, html } from '../../../deps/lit/lit-core.min.js';
 import getSheet from '../../shared/sheet.js';
 import '../da-editor/da-editor.js';
 import '../da-preview/da-preview.js';
+import '../da-versions/da-versions.js';
 
 const sheet = await getSheet('/blocks/edit/da-content/da-content.css');
 
 export default class DaContent extends LitElement {
-  static properties = { details: { attribute: false } };
+  static properties = {
+    details: { attribute: false },
+    _sourceUrl: { state: true },
+    _versionUrl: { state: true },
+  };
 
   connectedCallback() {
     super.connectedCallback();
     this.shadowRoot.adoptedStyleSheets = [sheet];
+    this._sourceUrl = this.details.sourceUrl;
   }
 
-  showPreview(e) {
+  showPreview() {
     this.classList.add('show-preview');
-    e.target.parentElement.classList.add('show-preview');
     this.shadowRoot.querySelector('da-preview').classList.add('show-preview');
   }
 
+  showVersions() {
+    this.classList.add('show-versions');
+    this.daVersions.open = true;
+    this.daVersions.classList.add('show-versions');
+  }
+
+  handleReset() {
+    this._versionUrl = null;
+  }
+
+  handlePreview(e) {
+    this._versionUrl = e.detail.url;
+  }
+
+  handleCloseVersions() {
+    this.daVersions.open = false;
+    this.classList.remove('show-versions');
+    this.daVersions.classList.remove('show-versions');
+  }
+
+  get daVersions() {
+    return this.shadowRoot.querySelector('da-versions');
+  }
+
   render() {
     return html`
       <div class="editor-wrapper">
-        <da-editor path="${this.details.sourceUrl}"></da-editor>
-        <div class="da-preview-menubar">
-          <span class="da-preview-menuitem show-preview" @click=${this.showPreview}></span>
+        <da-editor path="${this._sourceUrl}" version="${this._versionUrl}" @versionreset=${this.handleReset}></da-editor>
+        <div class="da-editor-tabs">
+          <div class="da-editor-tabs-full">
+            <button class="da-editor-tab show-preview" title="Preview" @click=${this.showPreview}>Preview</button>
+          </div>
+          <div class="da-editor-tabs-quiet">
+            <button class="da-editor-tab quiet show-versions" title="Versions" @click=${this.showVersions}>Versions</button>
+          </div>
         </div>
       </div>
       <da-preview path=${this.details.previewUrl}></da-preview>
+      <da-versions path=${this.details.fullpath} @preview=${this.handlePreview} @close=${this.handleCloseVersions}></da-versions>
     `;
   }
 }

blocks/edit/da-editor/da-editor.css

@@ -1,3 +1,62 @@
+:host {
+  display: grid;
+  grid-template-areas: 'editor';
+}
+
+.da-prose-mirror {
+  grid-area: editor;
+}
+
+.da-prose-mirror.da-version-preview {
+  position: relative;
+  z-index: 1000;
+  margin: 24px -24px -24px 24px;
+}
+
+.da-version-action-area {
+  display: flex;
+  justify-content: end;
+  gap: 12px;
+  position: absolute;
+  top: 0;
+  z-index: 2;
+  width: 100%;
+  padding: 20px;
+  background: #EFEFEF;
+  box-sizing: border-box;
+  border-radius: 10px 10px 0 0;
+}
+
+.da-version-action-area button {
+  font-family: var(--body-font-family);
+  display: inline-block;
+  font-style: normal;
+  cursor: pointer;
+  padding: 5px 14px;
+  line-height: 18px;
+  font-size: 15px;
+  border-radius: var(--s2-radius-300);
+  outline-offset: 0;
+  transition: outline-offset .2s;
+  text-decoration: none;
+  font-weight: 700;
+  text-align: center;
+  background: none;
+  border: 2px solid #000;
+  color: #000;
+}
+
+.da-version-action-area button.accent {
+  background: var(--s2-blue-800);
+  border: 2px solid var(--s2-blue-800);
+  outline-color: var(--s2-blue-800);
+  color: #FFF;
+}
+
+.da-prose-mirror.da-version-preview .ProseMirror {
+  padding-top: 96px;
+}
+
 .ProseMirror {
   min-height: 600px;
   background: #FFF;
@@ -335,6 +394,7 @@ span.ProseMirror-menuseparator {
   margin: 3px;
   vertical-align: top;
   min-width: 100px;
+  padding: 6px;
 }
 
 td.selectedCell {
@@ -506,13 +566,12 @@ da-library.hide {
   }
 }
 
-
 /* this is a rough fix for the first cursor position when the first paragraph is empty */
 .ProseMirror > .ProseMirror-yjs-cursor:first-child {
   margin-top: 16px;
 }
 .ProseMirror p:first-child, .ProseMirror h1:first-child, .ProseMirror h2:first-child, .ProseMirror h3:first-child, .ProseMirror h4:first-child, .ProseMirror h5:first-child, .ProseMirror h6:first-child {
-  margin-top: 16px;
+  margin-top: 0;
 }
 /* This gives the remote user caret. The colors are automatically overwritten*/
 .ProseMirror-yjs-cursor {

blocks/edit/da-editor/da-editor.js

@@ -1,41 +1,82 @@
-import { LitElement, html } from '../../../deps/lit/lit-core.min.js';
+import { DOMParser as proseDOMParser } from 'da-y-wrapper';
+import { LitElement, html, nothing } from '../../../deps/lit/lit-core.min.js';
 import initProse from '../prose/index.js';
 import getSheet from '../../shared/sheet.js';
-import { initIms } from '../../shared/utils.js';
+import { initIms, daFetch } from '../../shared/utils.js';
+import { parse, aem2prose } from '../utils/helpers.js';
 
 const sheet = await getSheet('/blocks/edit/da-editor/da-editor.css');
 
 export default class DaEditor extends LitElement {
   static properties = {
-    path: {},
+    path: { type: String },
+    version: { type: String },
     _imsLoaded: { state: false },
+    _versionDom: { state: true },
   };
 
   connectedCallback() {
     super.connectedCallback();
     this.shadowRoot.adoptedStyleSheets = [sheet];
     this.shadowRoot.createRange = () => document.createRange();
-    initIms().then(() => {
-      this._imsLoaded = true;
-    });
+    initIms().then(() => { this._imsLoaded = true; });
   }
 
-  attributeChangedCallback(name, _old, value) {
-    super.attributeChangedCallback();
-    if (name !== 'path') return;
-    this._path = value;
+  async fetchVersion() {
+    const resp = await daFetch(this.version);
+    if (!resp.ok) return;
+    const text = await resp.text();
+    const doc = parse(text);
+    const proseDom = aem2prose(doc);
+    const flattedDom = document.createElement('div');
+    flattedDom.append(...proseDom);
+    this._versionDom = flattedDom;
+  }
+
+  handleCancel() {
+    const opts = { bubbles: true, composed: true };
+    const event = new CustomEvent('versionreset', opts);
+    this.dispatchEvent(event);
+    this._versionDom = null;
+  }
+
+  handleRestore() {
+    const { schema, doc } = window.view.state;
+    const newDoc = proseDOMParser.fromSchema(schema).parse(this._versionDom);
+    const tr = window.view.state.tr.replaceWith(0, doc.content.size, newDoc.content);
+
+    const newState = window.view.state.apply(tr);
+    window.view.updateState(newState);
+    this.handleCancel();
+  }
+
+  renderVersion() {
+    return html`
+      <div class="da-prose-mirror da-version-preview">
+        <div class="da-version-action-area">
+          <button @click=${this.handleCancel}>Cancel</button>
+          <button class="accent" @click=${this.handleRestore}>Restore</button>
+        </div>
+        <div class="ProseMirror">${this._versionDom}</div>
+      </div>`;
   }
 
   render() {
+    if (this.version && !this._versionDom) this.fetchVersion();
     if (!this._imsLoaded) return null;
-    return html`<div class="da-prose-mirror"></div>`;
+    return html`
+      <div class="da-prose-mirror"></div>
+      ${this._versionDom ? this.renderVersion() : nothing}
+    `;
   }
 
-  updated() {
+  updated(props) {
     if (!this._imsLoaded) return;
-    const prose = this.shadowRoot.querySelector('.da-prose-mirror');
-    prose.innerHTML = '';
-    initProse({ editor: prose, path: this._path });
+    if (!(props.has('version') || props.has('_versionDom'))) {
+      const prose = this.shadowRoot.querySelector('.da-prose-mirror');
+      prose.innerHTML = '';
+      initProse({ editor: prose, path: this.path });
+    }
   }
 }