From 2e1edf12fb51927da2f61f1a7edae61fc6f882c3 Mon Sep 17 00:00:00 2001 From: RobbinBaauw Date: Thu, 8 Nov 2018 23:01:40 +0100 Subject: [PATCH] Fixed code highlighting --- cshub-client/public/assets/highlight.min.css | 2 +- cshub-client/src/components/posts/Post.vue | 31 ++++++-- cshub-client/src/components/quill/Quill.vue | 80 +++++++++++++++++--- 3 files changed, 95 insertions(+), 18 deletions(-) diff --git a/cshub-client/public/assets/highlight.min.css b/cshub-client/public/assets/highlight.min.css index 4daffddf..de8f00e9 100644 --- a/cshub-client/public/assets/highlight.min.css +++ b/cshub-client/public/assets/highlight.min.css @@ -1 +1 @@ -.hljs-attribute,.hljs-doctag,.hljs-keyword,.hljs-meta-keyword,.hljs-name,.hljs-selector-tag,.hljs-strong{font-weight:700}.hljs{display:block;overflow-x:auto;padding:.5em;background:#F0F0F0;font-family:"Courier New",Courier,monospace}.hljs,.hljs-subst{color:#444}.hljs-comment{color:#888}.hljs-deletion,.hljs-number,.hljs-quote,.hljs-selector-class,.hljs-selector-id,.hljs-string,.hljs-template-tag,.hljs-type{color:#800}.hljs-section,.hljs-title{color:#800;font-weight:700}.hljs-link,.hljs-regexp,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#BC6060}.hljs-literal{color:#78A960}.hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-code{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta-string{color:#4d99bf}.hljs-emphasis{font-style:italic} \ No newline at end of file +.hljs{display:block;overflow-x:auto;padding:.5em;color:#000;background:#ededed;font-family:"Courier New",Courier,monospace}.hljs-subst,.hljs-title{font-weight:400;color:#000}.hljs-comment,.hljs-quote{color:grey;font-style:italic}.hljs-meta{color:olive}.hljs-tag{background:#efefef}.hljs-keyword,.hljs-literal,.hljs-name,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-selector-tag,.hljs-type{font-weight:700;color:navy}.hljs-attribute,.hljs-link,.hljs-number,.hljs-regexp{font-weight:700;color:#00f}.hljs-link,.hljs-number,.hljs-regexp{font-weight:400}.hljs-string,.hljs-strong{font-weight:700}.hljs-string{color:green}.hljs-bullet,.hljs-formula,.hljs-symbol{color:#000;background:#d0eded;font-style:italic}.hljs-doctag{text-decoration:underline}.hljs-template-variable,.hljs-variable{color:#660e7a}.hljs-addition{background:#baeeba}.hljs-deletion{background:#ffc8bd}.hljs-emphasis{font-style:italic} \ No newline at end of file diff --git a/cshub-client/src/components/posts/Post.vue b/cshub-client/src/components/posts/Post.vue index 209f0fd3..204e4744 100644 --- 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 index bb8325f0..b74fc86f 100644 --- 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 = `${prevElement.currString}`; + + 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(this.postHashCacheItemID, this.getDelta()) - .then(() => { - logStringConsole("Drafted current post", "textchanged quill"); - }); + if (this.editor !== null) { + localForage.setItem(this.postHashCacheItemID, this.getDelta()) + .then(() => { + logStringConsole("Drafted current post", "textchanged quill"); + }); + } }, 1000); } }