adds markdown caching and refactored decryption

Clay-Ferguson · Clay-Ferguson · commit 6c602f58e201 · 2024-11-24T13:40:09.000-06:00
diff --git a/src/main/resources/public/package.json b/src/main/resources/public/package.json
@@ -26,6 +26,7 @@
     "dropzone": "^6.0.0-beta.1",
     "emoji-picker-react": "^4.4.9",
     "fullcalendar": "^6.1.8",
+    "quick-lru": "^7.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-emoji-render": "^2.0.1",
diff --git a/src/main/resources/public/src/Crypto.ts b/src/main/resources/public/src/Crypto.ts
@@ -3,6 +3,7 @@ import * as J from "./JavaIntf";
 import { S } from "./Singletons";
 import { Constants as C } from "./Constants";
 import { NodeInfo, PrincipalName } from "./JavaIntf";
+import { dispatch } from "./AppContext";
 
 /*
 SYMMETRIC ENCRYPTION and PUBLIC KEY ENCRYPTION
@@ -81,6 +82,13 @@ export class Crypto {
     asymEncKey: string = null;
     userSignature: string = null;
 
+    // Set of nodeId to NodeInfo of all nodes pending decryption. Don't be tempted to make this a map with perhaps nodeId
+    // as key becasue we can have various different NodeInfo objects that are the same node, so we need to use the NodeInfo
+    // object itself. Also we already have a clearTextCache so performance is not an issue.
+    pendingDecrypt: Set<NodeInfo> = new Set<NodeInfo>();
+
+    clearTextCache: Map<string, string> = new Map<string, string>();
+
     constructor() {
         /* WARNING: Crypto (or at least subtle) will not be available except on Secure Origin, which means a SSL (https)
         web address plus also localhost */
@@ -104,6 +112,53 @@ export class Crypto {
         this.vector = new Uint8Array([71, 73, 79, 83, 89, 37, 41, 47, 53, 67, 97, 103, 107, 109, 127, 131]);
     }
 
+    queueDecrypt(node: NodeInfo) {
+        if (S.props.isEncrypted(node)) {
+            // if we have already decrypted this content then just use the decrypted content
+            const content = this.clearTextCache.get(node.content);
+            if (content) {
+                node.content = content;
+                return;
+            }
+            // else we add to pending decrypts
+            this.pendingDecrypt.add(node);
+        }
+    }
+
+    async decryptAll() {
+        if (this.pendingDecrypt.size === 0) return;
+        for (const node of this.pendingDecrypt) {
+            await this.decryptNode(node);
+        }
+        this.pendingDecrypt.clear();
+        dispatch("afterDecryptAll", _s => { });
+    }
+
+    async decryptNode(node: NodeInfo) {
+        if (!this.avail) return;
+        let clearText = null;
+
+        if (node.content.startsWith(J.Constant.ENC_TAG)) {
+            // check if we have decrypted this content before
+            clearText = this.clearTextCache.get(node.content);
+
+            // if now, then decrypt it now
+            if (!clearText) {
+                const cipherText = node.content.substring(J.Constant.ENC_TAG.length);
+                const cipherKey = S.props.getCryptoKey(node);
+                if (cipherKey) {
+                    clearText = await S.crypto.decryptSharableString(null, { cipherKey, cipherText });
+                    this.clearTextCache.set(node.content, clearText);
+                }
+            }
+        }
+
+        // console.log("Decrypted to " + clearText);
+        // Warning clearText can be "" (which is a 'falsy' value and a valid decrypted string!)
+        clearText = clearText !== null ? clearText : "[Decrypt Failed]";
+        node.content = clearText;
+    }
+
     invalidateKeys() {
         console.log("Setting crypto keys to all null");
         this.sigKey = null;
@@ -704,16 +759,6 @@ export class Crypto {
 
     /* Inverse of encryptSharableString() function */
     async decryptSharableString(privateKey: CryptoKey, skpd: SymKeyDataPackage): Promise<string> {
-        // get hash of the encrypted data
-        const cipherHash: string = S.util.hashOfString(skpd.cipherText);
-
-        let ret = S.quanta.decryptCache.get(cipherHash);
-        // if we have already decrypted this data return the result.
-        if (ret) {
-            // decryption cache hit
-            return ret;
-        }
-
         try {
             // console.log("decrypting [" + skpd.cipherText + "] with cipherKey: " + skpd.cipherKey);
             privateKey = privateKey || await this.getPrivateEncKey();
@@ -731,8 +776,7 @@ export class Crypto {
 
             const symKeyJsonObj: JsonWebKey = JSON.parse(symKeyJsonStr);
             const symKey = await crypto.subtle.importKey("jwk", symKeyJsonObj, this.SYM_ALGO, true, this.OP_ENC_DEC);
-            ret = await this.symDecryptString(symKey, skpd.cipherText);
-            S.quanta.decryptCache.set(cipherHash, ret);
+            const ret = await this.symDecryptString(symKey, skpd.cipherText);
             return ret;
         }
         catch (ex) {
@@ -835,7 +879,7 @@ export class Crypto {
 
         let path: string = node.path;
         // convert any 'pending (p)' path to a final version of the path (no '/p/')
-        if (path.startsWith("/r/p/")) { 
+        if (path.startsWith("/r/p/")) {
             path = "/r/" + path.substring(5);
         }
 
diff --git a/src/main/resources/public/src/NodeUtil.ts b/src/main/resources/public/src/NodeUtil.ts
@@ -365,6 +365,7 @@ export class NodeUtil {
                 }
             }
         }
+        S.crypto.queueDecrypt(node);
 
         if (node.children) {
             this.processInboundNodes(node.children);
diff --git a/src/main/resources/public/src/Quanta.ts b/src/main/resources/public/src/Quanta.ts
@@ -71,10 +71,6 @@ export class Quanta {
     ctrlKey: boolean;
     ctrlKeyTime: number;
 
-    // maps the hash of an encrypted block of text to the unencrypted text, so that we never run the same
-    // decryption code twice.
-    decryptCache: Map<string, string> = new Map<string, string>();
-
     /* Map of all URLs and the openGraph object retrieved for it */
     openGraphData: Map<string, J.OpenGraph> = new Map<string, J.OpenGraph>();
     imageUrls: Set<string> = new Set<string>();
@@ -220,6 +216,7 @@ export class Quanta {
             window.onpopstate = this._onPopState;
 
             this.addPageLevelEventListeners();
+            this.setDecryptionTimer();
             Log.log("initConstants");
             S.props.initConstants();
 
@@ -380,6 +377,14 @@ export class Quanta {
         return window.innerWidth > window.innerHeight;
     }
 
+    setDecryptionTimer() {
+        setInterval(() => {
+            if (S.crypto.pendingDecrypt.size > 0) {
+                S.crypto.decryptAll();
+            }
+        }, 2000);
+    }
+
     addPageLevelEventListeners() {
         /* We have to run this timer to wait for document.body to exist because we load our JS in
             the HTML HEAD because we need our styling in place BEFORE the page renders or else you
diff --git a/src/main/resources/public/src/comp/node/NodeCompMarkdown.ts b/src/main/resources/public/src/comp/node/NodeCompMarkdown.ts
@@ -7,10 +7,12 @@ import { Comp, CompT } from "../base/Comp";
 import ReactMarkdownComp from "../core/ReactMarkdownComp";
 import { NodeInfo } from "../../JavaIntf";
 import { UrlInfo } from "../../plugins/base/TypeBase";
+import QuickLRU from 'quick-lru';
+
+const cache = new QuickLRU({ maxSize: 1000 });
 
 interface LS {
     content: string;
-    pendingDecrypt?: string;
 }
 
 export class NodeCompMarkdown extends Comp {
@@ -28,48 +30,26 @@ export class NodeCompMarkdown extends Comp {
     // but is ok named as 'cont'
     cont: string;
 
-    /* This makes the encrypted text visible without editing the node which is important to have
-    on so nodes shared to you can be seen, because a user can't edit nodes they don't own */
-    private autoDecrypting: boolean = true;
-
-    constructor(public node: NodeInfo, extraContainerClass: string, _tabData: TabBase<any>, urls: Map<string, UrlInfo>) {
+    constructor(public node: NodeInfo, extraContainerClass: string, _tabData: TabBase<any>, private urls: Map<string, UrlInfo>) {
         super({ key: "ncmkd_" + node.id });
         this.cont = node.renderContent || node.content;
-        const ast = getAs();
         this.attribs.nodeId = node.id; // this 'nodeId' is needed to track expand collapse of code blocks.
         this.attribs.className = "mkCont";
 
         if (extraContainerClass) {
             this.attribs.className += " " + extraContainerClass;
         }
 
-        const content = this.cont || "";
-        const state: LS = {
-            content: null
-        };
-
-        /* If this content is encrypted we set it in 'pendingDecrypt' to decrypt it asynchronously */
-        if (S.props.isEncrypted(node)) {
-            state.content = "[Encrypted]";
-
-            if (!ast.isAnonUser) {
-                state.pendingDecrypt = content;
-            }
-        }
-        /* otherwise it's not encrypted and we display the normal way */
-        else {
-            state.content = this.preprocessMarkdown(node, null, urls);
-        }
-
-        this.mergeState<LS>(state);
+        this.mergeState<LS>({
+            content: this.cont || ""
+        });
     }
 
     /* If content is passed in it will be used. It will only be passed in when the node is encrypted and the text
     has been decrypted and needs to be rendered, in which case we don't need the node.content, but use the 'content' parameter here */
-    preprocessMarkdown(node: NodeInfo, content: string = null, urls: Map<string, UrlInfo>): string {
-        content = content || this.cont || "";
-        let val = "";
-        val = S.render.injectSubstitutions(node, content);
+    preprocessMarkdown(node: NodeInfo, urls: Map<string, UrlInfo>): string {
+        const content = this.cont || "";
+        let val = S.render.injectSubstitutions(node, content);
 
         if (S.props.isMine(node)) {
             val = S.util.makeHtmlCommentsVisible(val);
@@ -103,52 +83,30 @@ export class NodeCompMarkdown extends Comp {
             .replaceAll("\\]", "$$");
     }
 
-    override preRender(): boolean | null {
-        const state: LS = this.getState<LS>();
-
-        if (this.autoDecrypting && state.pendingDecrypt) {
-            let cipherText = null;
-            if (state.pendingDecrypt.startsWith(J.Constant.ENC_TAG)) {
-                cipherText = state.pendingDecrypt.substring(J.Constant.ENC_TAG.length);
-            }
-
-            if (!cipherText) {
-                console.log("not decrypting. cipherText was unexpected format: " + cipherText);
-                return;
-            }
-
-            const cipherHash = S.util.hashOfString(cipherText);
-            let clearText = S.quanta.decryptCache.get(cipherHash);
-            // if we have already decrypted this data use the result.
-            if (clearText) {
-                clearText = this.preprocessMarkdown(this.node, clearText, null);
-
-                this.mergeState<LS>({
-                    content: clearText,
-                    pendingDecrypt: null
-                });
-            }
-            else {
-                setTimeout(() => {
-                    this.decrypt();
-                }, 10);
-            }
-        }
-        return true;
-    }
-
     override compRender(_children: CompT[]): ReactNode {
         const state = this.getState<LS>();
 
         // ReactMarkdown can't have this 'ref' and would throw a warning if we did
         delete this.attribs.ref;
 
+        if (state.content?.indexOf(J.Constant.ENC_TAG) === 0) {
+            return createElement(ReactMarkdownComp as any, this.attribs, "[Encrypted]");
+        }
+
+        const key = this.attribs.key + "_" + state.content;
+        let ret: any = cache.get(key);
+        if (ret) {
+            return cache.get(key) as ReactNode;
+        }
+
+        const content = this.preprocessMarkdown(this.node, this.urls);
         // Process with special markdown if there is any.
-        const sections = this.processSpecialMarkdown(state.content);
-        if (sections) {
-            return sections;
+        ret = this.processSpecialMarkdown(content);
+        if (!ret) {
+            ret = createElement(ReactMarkdownComp as any, this.attribs, content);
         }
-        return createElement(ReactMarkdownComp as any, this.attribs, state.content);
+        cache.set(key, ret);
+        return ret;
     }
 
     /* When any markdown content contains something like "-**My Section Title**-" that will be
@@ -272,31 +230,4 @@ export class NodeCompMarkdown extends Comp {
             children.push(createElement(ReactMarkdownComp as any, attribs, curBuf));
         }
     }
-
-    async decrypt() {
-        if (!S.crypto.avail) return;
-        const state: LS = this.getState<LS>();
-        if (!state.pendingDecrypt) return;
-        let clearText = null;
-        // console.log("decrypting (in NodeCompMarkdown): " + state.pendingDecrypt);
-
-        if (state.pendingDecrypt.startsWith(J.Constant.ENC_TAG)) {
-            const cipherText = state.pendingDecrypt.substring(J.Constant.ENC_TAG.length);
-            const cipherKey = S.props.getCryptoKey(this.node);
-            if (cipherKey) {
-                // console.log("CIPHERKEY " + cipherKey);
-                clearText = await S.crypto.decryptSharableString(null, { cipherKey, cipherText });
-            }
-        }
-
-        // console.log("Decrypted to " + clearText);
-        // Warning clearText can be "" (which is a 'falsy' value and a valid decrypted string!)
-        clearText = clearText !== null ? clearText : "[Decrypt Failed]";
-        clearText = this.preprocessMarkdown(this.node, clearText, null);
-
-        this.mergeState<LS>({
-            content: clearText,
-            pendingDecrypt: null
-        });
-    }
 }
diff --git a/src/main/resources/public/src/dlg/EditNodeDlg.ts b/src/main/resources/public/src/dlg/EditNodeDlg.ts
@@ -937,7 +937,6 @@ export class EditNodeDlg extends DialogBase {
         }
         else {
             if (S.crypto.avail) {
-                // console.log("decrypting: " + value);
                 const cipherText = value.substring(J.Constant.ENC_TAG.length);
                 const cipherKey = S.props.getCryptoKey(ast.editNode);
                 if (cipherKey) {
diff --git a/src/main/resources/public/yarn.lock b/src/main/resources/public/yarn.lock
@@ -3334,6 +3334,11 @@ queue-microtask@^1.2.2:
   resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+quick-lru@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-7.0.0.tgz#447f6925b33ae4d2d637e211967d74bae4b99c3f"
+  integrity sha512-MX8gB7cVYTrYcFfAnfLlhRd0+Toyl8yX8uBx1MrX7K0jegiz9TumwOK27ldXrgDlHRdVi+MqU9Ssw6dr4BNreg==
+
 react-dom@^18.2.0:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz"

Original file line number	Diff line number	Diff line change
`@@ -365,6 +365,7 @@ export class NodeUtil {`
`365`	`365`	`}`
`366`	`366`	`}`
`367`	`367`	`}`
	`368`	`+ S.crypto.queueDecrypt(node);`
`368`	`369`
`369`	`370`	`if (node.children) {`
`370`	`371`	`this.processInboundNodes(node.children);`
Original file line number	Diff line number	Diff line change
`@@ -937,7 +937,6 @@ export class EditNodeDlg extends DialogBase {`
`937`	`937`	`}`
`938`	`938`	`else {`
`939`	`939`	`if (S.crypto.avail) {`
`940`		`- // console.log("decrypting: " + value);`
`941`	`940`	`const cipherText = value.substring(J.Constant.ENC_TAG.length);`
`942`	`941`	`const cipherKey = S.props.getCryptoKey(ast.editNode);`
`943`	`942`	`if (cipherKey) {`