feat(Preview): Add auto-updating document previews

stencila · Jul 27, 2021 · 5ea9e4a · 5ea9e4a
1 parent 9e28d41
commit 5ea9e4a
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 56 deletions.
diff --git a/desktop/package-lock.json b/desktop/package-lock.json
diff --git a/desktop/package.json b/desktop/package.json
@@ -78,7 +78,7 @@
     "@reduxjs/toolkit": "1.6.0",
     "@sentry/electron": "2.5.1",
     "@stencila/brand": "0.7.1",
-    "@stencila/components": "0.37.0",
+    "@stencila/components": "0.38.0",
     "@stencila/schema": "1.10.0",
     "electron-squirrel-startup": "1.0.0",
     "fp-ts": "2.10.5",

diff --git a/desktop/src/main/document/channel.ts b/desktop/src/main/document/channel.ts
@@ -2,6 +2,7 @@ export const DOCUMENT_CHANNEL = {
   DOCUMENTS_CLOSE_ACTIVE: 'DOCUMENTS_CLOSE_ACTIVE',
   DOCUMENTS_CLOSE: 'DOCUMENTS_CLOSE',
   DOCUMENTS_DUMP: 'DOCUMENTS_DUMP',
+  DOCUMENTS_LOAD: 'DOCUMENTS_LOAD',
   DOCUMENTS_OPEN: 'DOCUMENTS_OPEN',
   DOCUMENTS_PREVIEW: 'DOCUMENTS_PREVIEW',
   DOCUMENTS_UNSUBSCRIBE: 'DOCUMENTS_UNSUBSCRIBE',

diff --git a/desktop/src/main/document/index.ts b/desktop/src/main/document/index.ts
@@ -3,6 +3,7 @@ import { CHANNEL } from '../../preload/channels'
 import {
   DocumentsClose,
   DocumentsDump,
+  DocumentsLoad,
   DocumentsOpen,
   DocumentsPreview,
   DocumentsUnsubscribe,
@@ -46,6 +47,13 @@ const registerDocumentHandlers = () => {
     }
   )
 
+  handle<DocumentsLoad>(
+    CHANNEL.DOCUMENTS_LOAD,
+    async (_ipcEvent, documentId, contents) => {
+      return dispatch.documents.load(documentId, contents)
+    }
+  )
+
   handle<DocumentsPreview>(
     CHANNEL.DOCUMENTS_PREVIEW,
     async (ipcEvent, documentId) => {

diff --git a/desktop/src/preload/types.d.ts b/desktop/src/preload/types.d.ts
@@ -180,6 +180,11 @@ export type DocumentsDump = InvokeType<
   typeof dispatch.documents.dump
 >
 
+export type DocumentsLoad = InvokeType<
+  typeof CHANNEL.DOCUMENTS_LOAD,
+  typeof dispatch.documents.load
+>
+
 export type DocumentsWrite = InvokeType<
   typeof CHANNEL.DOCUMENTS_WRITE,
   typeof dispatch.documents.write
@@ -216,6 +221,7 @@ type InvokeTypes =
   | DocumentsCloseActive
   | DocumentsPreview
   | DocumentsDump
+  | DocumentsLoad
   | DocumentsWrite
   | DocumentsUnsubscribe
 
@@ -367,6 +373,11 @@ interface Invoke {
     ...args: DocumentsDump['args']
   ): DocumentsDump['result']
 
+  invoke(
+    channel: DocumentsLoad['channel'],
+    ...args: DocumentsLoad['args']
+  ): DocumentsLoad['result']
+
   invoke(
     channel: DocumentsWrite['channel'],
     ...args: DocumentsWrite['args']

diff --git a/desktop/src/renderer/client.ts b/desktop/src/renderer/client.ts
@@ -124,6 +124,10 @@ export const client = {
       window.api
         .invoke(CHANNEL.DOCUMENTS_DUMP, docId.toString())
         .then(unwrapOrThrow),
+    load: (docId: EntityId, contents: string) =>
+      window.api
+        .invoke(CHANNEL.DOCUMENTS_LOAD, docId.toString(), contents)
+        .then(unwrapOrThrow),
     preview: (docId: EntityId) =>
       window.api
         .invoke(CHANNEL.DOCUMENTS_PREVIEW, docId.toString())

diff --git a/desktop/src/renderer/components/app-document/app-document-editor/app-document-editor.tsx b/desktop/src/renderer/components/app-document/app-document-editor/app-document-editor.tsx
@@ -118,6 +118,15 @@ export class AppDocumentEditor {
     })
   }
 
+  /**
+   * Function to call whenever the contents of the editor change.
+   */
+  private onDocChange = () => {
+    this.editorRef
+      ?.getContents()
+      .then((contents) => client.documents.load(this.documentId, contents.text))
+  }
+
   private fileFormatToLanguage = (): string => {
     const file = selectDoc(state)(this.documentId)
     switch (file?.format?.name) {
@@ -159,6 +168,7 @@ export class AppDocumentEditor {
             activeLanguage={this.fileFormatToLanguage()}
             lineNumbers={configState.EDITOR_LINE_NUMBERS}
             lineWrapping={configState.EDITOR_LINE_WRAPPING}
+            contentChangeHandler={this.onDocChange}
           ></stencila-editor>
         </div>
       </Host>