Fixed code highlighting

finitum · Nov 8, 2018 · 2e1edf1 · 2e1edf1
1 parent 8c0f710
commit 2e1edf1
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 18 deletions.
diff --git a/cshub-client/public/assets/highlight.min.css b/cshub-client/public/assets/highlight.min.css
diff --git a/cshub-client/src/components/posts/Post.vue b/cshub-client/src/components/posts/Post.vue
@@ -231,6 +231,13 @@ export default class Post extends Vue {
         }
     }
 
+    @Watch("showContent")
+    private showContentChanged(to: boolean) {
+        if (to) {
+            this.highlightCode();
+        }
+    }
+
     /**
      * Lifecycle hooks
      */
@@ -253,18 +260,31 @@ export default class Post extends Vue {
                 hash: this.postHash
             });
         }
+
+        if (this.showContent) {
+            this.highlightCode();
+        }
     }
 
     private updated() {
-        setTimeout(() => {
-            this.windowHeightChanged();
-        }, 500);
+        this.windowHeightChanged();
+        this.highlightCode();
     }
 
     /**
      * Methods
      */
-        private getAvatarURL(dbImage: string) {
+    private highlightCode() {
+        const domElements = document.getElementsByClassName("hljsBlock");
+        if (domElements.length > 0) {
+            for (const domElement of domElements) {
+                (window as any).hljs.highlightBlock(domElement);
+            }
+        }
+
+    }
+
+    private getAvatarURL(dbImage: string) {
             if (dbImage !== null) {
                 return `data:image/jpg;base64,${dbImage}`;
             } else {
@@ -358,9 +378,10 @@ export default class Post extends Vue {
         ImgurUpload.findAndReplaceImagesWithImgurLinks(delta)
             .then((newValue: Delta) => {
                 const diff = this.editContent.diff(newValue);
-                const html: string = (this.$refs as any).editQuill.getHTML();
 
                 if (!isEqual(diff, new Delta())) {
+                    const html: string = (this.$refs as any).editQuill.getHTML();
+
                     logStringConsole("Editing post");
 
                     ApiWrapper.sendPostRequest(new EditPost(this.postHash, {

diff --git a/cshub-client/src/components/quill/Quill.vue b/cshub-client/src/components/quill/Quill.vue
@@ -233,18 +233,72 @@
             const node = this.editor.container.firstChild;
 
             // Converts the classes of all the code blocks so that hljs can highlight them properly
-            const codes = node.getElementsByClassName("ql-code-block");
-            for (const code of codes) {
-                const lang = code.attributes.getNamedItem("data-language") ? code.attributes.getNamedItem("data-language").value : "";
-                code.className += " hljs " + lang;
+            const allNodes: HTMLElement[] = node.getElementsByTagName("*");
+
+            let prevElement: {
+                isCodeBlock: boolean,
+                lang?: string,
+                containerNode?: HTMLElement,
+                currString?: string
+            } = {
+                isCodeBlock: false
+            };
+
+            const finalizeCodeBlock = () => {
+                const newNode = document.createElement("pre");
+                newNode.innerHTML = `<code class="${prevElement.lang} hljsBlock">${prevElement.currString}</code>`;
+
+                prevElement.containerNode.after(newNode);
+
+                prevElement = {
+                    isCodeBlock: false
+                };
+            };
+
+            const toBeDeletedNodes: HTMLElement[] = [];
+
+            for (const domNode of allNodes) {
+                if (domNode.tagName === "DIV") {
+                    if (domNode.classList.contains("ql-code-block-container")) {
+                        toBeDeletedNodes.push(domNode);
+                        prevElement.containerNode = domNode;
+                    }
+
+                    if (domNode.classList.contains("ql-code-block")) {
+                        if (!prevElement.isCodeBlock) {
+                            console.log(domNode.innerText)
+                            const lang = domNode.attributes.getNamedItem("data-language") ? domNode.attributes.getNamedItem("data-language").value : "";
+                            prevElement = {
+                                ...prevElement,
+                                isCodeBlock: true,
+                                lang,
+                                currString: domNode.innerText
+                            };
+                        } else {
+                            prevElement = {
+                                ...prevElement,
+                                currString: prevElement.currString + "\n" + domNode.innerText
+                            };
+                        }
+                        toBeDeletedNodes.push(domNode);
+                    } else {
+                        if (prevElement.isCodeBlock) {
+                            finalizeCodeBlock();
+                        }
+                    }
+                } else if (domNode.tagName === "SELECT") {
+                    toBeDeletedNodes.push(domNode);
+                }
             }
 
-            // Removes all select tags as they are not needed in viewing the post
-            const selects = document.getElementsByTagName("select");
-            for (let i = 0, len = selects.length; i !== len; ++i) {
-                selects[0].parentNode.removeChild(selects[0]);
+            if (prevElement.isCodeBlock) {
+                finalizeCodeBlock();
             }
 
+            toBeDeletedNodes.forEach((domNode: HTMLElement) => {
+                domNode.remove();
+            });
+
             return node.innerHTML; // Doesn't have images replaced
         }
 
@@ -326,10 +380,12 @@
         private textChanged(delta: Delta, oldContents: Delta, source: any) {
             clearTimeout(this.typingTimeout);
             this.typingTimeout = setTimeout(() => {
-                localForage.setItem<Delta>(this.postHashCacheItemID, this.getDelta())
-                    .then(() => {
-                        logStringConsole("Drafted current post", "textchanged quill");
-                    });
+                if (this.editor !== null) {
+                    localForage.setItem<Delta>(this.postHashCacheItemID, this.getDelta())
+                        .then(() => {
+                            logStringConsole("Drafted current post", "textchanged quill");
+                        });
+                }
             }, 1000);
         }
     }