More directive TS

app/assets/javascripts/directives/views/revisionPreviewModal.ts

@@ -0,0 +1,151 @@
+import { WebApplication } from '@/application';
+import { WebDirective } from './../../types';
+import {
+  ContentType,
+  PayloadSource,
+  SNComponent,
+  SNNote,
+  ComponentArea
+} from 'snjs';
+import template from '%/directives/revision-preview-modal.pug';
+import { PayloadContent } from '@/../../../../snjs/dist/@types/protocol/payloads/generator';
+
+interface RevisionPreviewScope {
+  uuid: string
+  content: PayloadContent
+  application: WebApplication
+}
+
+class RevisionPreviewModalCtrl implements RevisionPreviewScope {
+
+  $element: JQLite
+  $timeout: ng.ITimeoutService
+  uuid!: string
+  content!: PayloadContent
+  application!: WebApplication
+  unregisterComponent?: any
+  note!: SNNote
+  editor?: SNComponent
+
+  /* @ngInject */
+  constructor(
+    $element: JQLite,
+    $timeout: ng.ITimeoutService
+  ) {
+    this.$element = $element;
+    this.$timeout = $timeout;
+  }
+
+  $onInit() {
+    this.configure();
+  }
+
+  $onDestroy() {
+    if (this.unregisterComponent) {
+      this.unregisterComponent();
+      this.unregisterComponent = undefined;
+    }
+  }
+
+  get componentManager() {
+    return this.application.componentManager!;
+  }
+
+  async configure() {
+    this.note = await this.application.createTemplateItem(
+      ContentType.Note,
+      this.content
+    ) as SNNote;
+    const originalNote = this.application.findItem(this.uuid) as SNNote;
+    const editorForNote = this.componentManager.editorForNote(originalNote);
+    if (editorForNote) {
+      /** 
+       * Create temporary copy, as a lot of componentManager is uuid based, so might 
+       * interfere with active editor. Be sure to copy only the content, as the top level 
+       * editor object has non-copyable properties like .window, which cannot be transfered
+       */
+      const editorCopy = await this.application.createTemplateItem(
+        ContentType.Component,
+        editorForNote.safeContent
+      ) as SNComponent;
+      this.componentManager.setReadonlyStateForComponent(editorCopy, true, true);
+      this.unregisterComponent = this.componentManager.registerHandler({
+        identifier: editorCopy.uuid,
+        areas: [ComponentArea.Editor],
+        contextRequestHandler: (component) => {
+          if (component === this.editor) {
+            return this.note;
+          }
+        },
+        componentForSessionKeyHandler: (key) => {
+          if (key === this.componentManager.sessionKeyForComponent(this.editor!)) {
+            return this.editor;
+          }
+        }
+      });
+
+      this.editor = editorCopy;
+    }
+  }
+
+  restore(asCopy: boolean) {
+    const run = async () => {
+      let item;
+      if (asCopy) {
+        const contentCopy = Object.assign({}, this.content);
+        if (contentCopy.title) {
+          contentCopy.title += " (copy)";
+        }
+        item = await this.application.createManagedItem(
+          ContentType.Note,
+          contentCopy,
+          true
+        );
+      } else {
+        const uuid = this.uuid;
+        item = this.application.findItem(uuid)!;
+        this.application.changeAndSaveItem(item.uuid, (mutator) => {
+          mutator.setContent(this.content);
+        }, true, PayloadSource.RemoteActionRetrieved);
+      }
+      this.dismiss();
+    };
+
+    if (!asCopy) {
+      this.application.alertService!.confirm(
+        "Are you sure you want to replace the current note's contents with what you see in this preview?",
+        undefined,
+        undefined,
+        undefined,
+        run,
+        undefined,
+        true,
+      );
+    } else {
+      run();
+    }
+  }
+
+  dismiss() {
+    const elem = this.$element;
+    const scope = elem.scope();
+    scope.$destroy();
+    elem.remove();
+  }
+}
+
+export class RevisionPreviewModal extends WebDirective {
+  constructor() {
+    super();
+    this.restrict = 'E';
+    this.template = template;
+    this.controller = RevisionPreviewModalCtrl;
+    this.controllerAs = 'ctrl';
+    this.bindToController = true;
+    this.scope = {
+      uuid: '=',
+      content: '=',
+      application: '='
+    };
+  }
+}