From 524651d56647d12d9d21f9567b097dd861f39e95 Mon Sep 17 00:00:00 2001 From: brecert <11599528+Brecert@users.noreply.github.com> Date: Tue, 12 Nov 2019 17:47:51 -0500 Subject: [PATCH 1/3] replaced markdown-it with simple-markdown --- package.json | 4 +- src/components/app/MessageTemplate.vue | 8 +- src/components/app/SimpleMarkdown.vue | 21 ++++ src/utils/markdown-it-plugins/customEmoji.js | 117 ------------------ src/utils/markdown-it-plugins/formatCode.js | 10 -- src/utils/markdown-it-plugins/formatLink.js | 12 -- .../markdown-it-plugins/normalizeFence.js | 83 ------------- src/utils/markdown-rules/codeblock.js | 29 +++++ src/utils/markdown-rules/customEmoji.js | 24 ++++ src/utils/markdown-rules/inlineCodeblock.js | 17 +++ src/utils/markdown-rules/link.js | 41 ++++++ src/utils/markdown-rules/strikeout.js | 18 +++ src/utils/markdown-rules/underline.js | 18 +++ src/utils/messageFormatter.js | 79 +++++++----- yarn.lock | 48 +++++++ 15 files changed, 268 insertions(+), 261 deletions(-) create mode 100644 src/components/app/SimpleMarkdown.vue delete mode 100644 src/utils/markdown-it-plugins/customEmoji.js delete mode 100644 src/utils/markdown-it-plugins/formatCode.js delete mode 100644 src/utils/markdown-it-plugins/formatLink.js delete mode 100644 src/utils/markdown-it-plugins/normalizeFence.js create mode 100644 src/utils/markdown-rules/codeblock.js create mode 100644 src/utils/markdown-rules/customEmoji.js create mode 100644 src/utils/markdown-rules/inlineCodeblock.js create mode 100644 src/utils/markdown-rules/link.js create mode 100644 src/utils/markdown-rules/strikeout.js create mode 100644 src/utils/markdown-rules/underline.js diff --git a/package.json b/package.json index 03614c0..aee39c2 100644 --- a/package.json +++ b/package.json @@ -12,11 +12,9 @@ "filesize": "^4.1.2", "highlight.js": "^9.15.8", "jquery": "^3.4.0", - "markdown-it": "^9.0.1", - "markdown-it-chat-formatter": "^0.1.1", "match-sorter": "^2.3.0", "particles.js": "^2.0.0", - "simple-markdown": "^0.6.1", + "simple-markdown": "^0.7.1", "socket.io": "^2.2.0", "socket.io-client": "^2.2.0", "twemoji": "^11.3.0", diff --git a/src/components/app/MessageTemplate.vue b/src/components/app/MessageTemplate.vue index cff6b00..1a42805 100644 --- a/src/components/app/MessageTemplate.vue +++ b/src/components/app/MessageTemplate.vue @@ -21,8 +21,8 @@
{{ this.$props.username }}
{{ getDate }}
-
- + +
insert_drive_file @@ -87,6 +87,7 @@ \ No newline at end of file diff --git a/src/utils/markdown-it-plugins/customEmoji.js b/src/utils/markdown-it-plugins/customEmoji.js deleted file mode 100644 index e2ce535..0000000 --- a/src/utils/markdown-it-plugins/customEmoji.js +++ /dev/null @@ -1,117 +0,0 @@ -import config from "@/config.js"; - -/* 58: ':' */ -/* 60: '<' */ -/* 62: '>' */ -/* example: '<:cat_1:1hvDmIdozFp2vTTkEIsO-wBHPaYRkGmlP>' */ - -function skipUntil(state, pos, code) { - for (let max = state.src.length; pos < max; pos++) { - if (state.src.charCodeAt(pos) === code) { break; } - } - return pos; -} - -// old -function parseUntil(state, fromPos, until, maxLength = 16) { - let max = state.posMax - let found = false - let pos = state.pos + fromPos - let oldPos = state.pos - let end = -1 - - - while(pos < max && pos - oldPos < maxLength) { - let marker = state.src.charCodeAt(pos) - if(marker === until) { - found = true; - break; - } - - // state.md.inline.skipToken(state); - - pos += 1 - } - - if(found) { - end = pos - } - - return end -} - -function render_custom_emoji(tokens, idx) { - return '' -} - - -function parseEmojiName(state, nameStart) { - // return parseUntil(state, nameStart, 58) - - return skipUntil(state, nameStart, 58) -} - -function replace_custom_emoji(state, silent) { - let pos = state.pos - let max = state.posMax - - // if begins with < - if (state.src.charCodeAt(pos) !== 60) { return false; } - pos += 1 - - // if the next character is not ':' then it's not a custom emoji - if(state.src.charCodeAt(pos) !== 58) { return false; } - - // parse the emoji name - let nameStart = pos + 1 - let nameEnd = parseEmojiName(state, nameStart) - - // console.log(nameEnd, parseUntil(state,nameStart,58)) - - // parser failed to find another ':', so it's not a valid emoji - if((nameEnd+1) > max || nameEnd < 0 || nameEnd - nameStart <= 0) { return false; } - - let emojiName = state.src.slice(nameStart, nameEnd) - - pos = nameEnd + 1 - - // parse until '>' - let idStart = pos - let idEnd = skipUntil(state, pos, 62); - - if((idEnd+1) > max || idEnd < 0 || idEnd - idStart <= 1) { return false; } - - // console.log(idStart, idEnd) - - let emojiID = state.src.slice(idStart, idEnd) - - if(!silent) { - state.pos = idStart - state.posMax = idEnd - - let token = state.push('custom_emoji', 'img', 0); - token.attrs = [[ 'src', (`${config.domain}/media/${emojiID}`) ], [ 'alt', (emojiName) ]] - } - - state.pos = idEnd + 1 - state.posMax = max - return true -} - -const emojiRe = /<:[\w\d]+:[\w\d]+>/ - -export default function custom_emoji_plugin(md, opts) { - md.renderer.rules.custom_emoji = (tokens, idx) => { - let token = tokens[idx] - - const srcIdx = token.attrIndex('src'); - const altIdx = token.attrIndex('alt'); - - let src = encodeURI(md.utils.escapeHtml(token.attrs[srcIdx][1])) - let alt = md.utils.escapeHtml(token.attrs[altIdx][1]) - - return `<${md.utils.escapeHtml(token.tag)} class="emoji" title=${alt} alt=${alt} src=${src} />` - } - - md.inline.ruler.push('custom_emoji', replace_custom_emoji) -} \ No newline at end of file diff --git a/src/utils/markdown-it-plugins/formatCode.js b/src/utils/markdown-it-plugins/formatCode.js deleted file mode 100644 index 565b9db..0000000 --- a/src/utils/markdown-it-plugins/formatCode.js +++ /dev/null @@ -1,10 +0,0 @@ -export default function formatCode(md, opts) { - const defaultRender = md.renderer.rules.code_inline || function(tokens, idx, options, env, self) { - return self.renderToken(tokens, idx, options); - }; - - md.renderer.rules.code_inline = function (tokens, idx, options, env, self) { - tokens[idx].attrPush(['class', 'code-inline']); - return defaultRender(tokens, idx, options, env, self); - }; -} \ No newline at end of file diff --git a/src/utils/markdown-it-plugins/formatLink.js b/src/utils/markdown-it-plugins/formatLink.js deleted file mode 100644 index 78495b9..0000000 --- a/src/utils/markdown-it-plugins/formatLink.js +++ /dev/null @@ -1,12 +0,0 @@ -export default function formatLink(md, opts) { - const defaultRender = md.renderer.rules.link_open || function(tokens, idx, options, env, self) { - return self.renderToken(tokens, idx, options); - }; - - md.renderer.rules.link_open = function (tokens, idx, options, env, self) { - tokens[idx].attrPush(['target', '_blank']); // add new attribute - tokens[idx].attrPush(['class', 'msg-link']); - // pass token to default renderer. - return defaultRender(tokens, idx, options, env, self); - }; -} \ No newline at end of file diff --git a/src/utils/markdown-it-plugins/normalizeFence.js b/src/utils/markdown-it-plugins/normalizeFence.js deleted file mode 100644 index 1d7fd2d..0000000 --- a/src/utils/markdown-it-plugins/normalizeFence.js +++ /dev/null @@ -1,83 +0,0 @@ -function fence(state, startLine, endLine, silent) { - var marker, len, params, nextLine, mem, token, markup, - haveEndMarker = false, - pos = state.bMarks[startLine] + state.tShift[startLine], - max = state.eMarks[startLine]; - - // if it's indented more than 3 spaces, it should be a code block - // if (state.sCount[startLine] - state.blkIndent >= 4) { return false; } - - if (pos + 3 > max) { return false; } - - marker = state.src.charCodeAt(pos); - - if (marker !== 0x60 /* ` */) { - return false; - } - - // scan marker length - let count = state.skipChars(pos, marker); - - len = count - pos; - pos += 3 - - if (len < 3) { return false; } - - markup = state.src.slice(mem, pos); - params = state.src.slice(pos, max); - - if (marker === 0x60 /* ` */) { - if (params.indexOf(String.fromCharCode(marker)) >= 0) { - return false; - } - } - - // Since start is found, we can report success here in validation mode - if (silent) { return true; } - - // search end of block - nextLine = startLine; - - for (;;) { - nextLine++; - if (nextLine >= endLine) { - return false - } - - pos = mem = state.bMarks[nextLine] + state.tShift[nextLine]; - max = state.eMarks[nextLine]; - - if (state.src.charCodeAt(pos) !== marker) { continue; } - - pos = state.skipChars(pos, marker); - - // closing code fence must be at least as long as the opening one - if (pos - mem < 3) { continue; } - - // make sure tail has spaces only - pos = state.skipSpaces(pos); - - if (pos < max) { continue; } - - haveEndMarker = true; - // found! - break; - } - - // If a fence has heading spaces, they should be removed from its inner block - len = state.sCount[startLine]; - - state.line = nextLine + (haveEndMarker ? 1 : 0); - - token = state.push('fence', 'code', 0); - token.info = params; - token.content = state.getLines(startLine + 1, nextLine, len, true); - token.markup = markup; - token.map = [ startLine, state.line ]; - - return true; -} - -export default function normalizeFence(md, opts) { - md.block.ruler.at('fence', fence, {alt: [ 'paragraph', 'reference', 'blockquote', 'list' ]}) -} \ No newline at end of file diff --git a/src/utils/markdown-rules/codeblock.js b/src/utils/markdown-rules/codeblock.js new file mode 100644 index 0000000..26c1b62 --- /dev/null +++ b/src/utils/markdown-rules/codeblock.js @@ -0,0 +1,29 @@ +import * as SimpleMarkdown from 'simple-markdown' + +export default (order) => { return { + order: order++, + match: function(source) { + return /^ *```(?:(\S+) *)?\n?((?:[^`])+)```/.exec(source) + }, + + parse: function(capture, parse, state) { + return { + lang: capture[1] || undefined, + content: capture[2] + } + }, + + html: function(node, output) { + const className = node.lang ? `language-${node.lang}` : undefined + + const codeblock = SimpleMarkdown.htmlTag("div", SimpleMarkdown.sanitizeText(node.content), { + class: "codeblock" + }) + + const code = SimpleMarkdown.htmlTag("code", codeblock, { + class: className + }) + + return SimpleMarkdown.htmlTag("pre", code) + } +}} \ No newline at end of file diff --git a/src/utils/markdown-rules/customEmoji.js b/src/utils/markdown-rules/customEmoji.js new file mode 100644 index 0000000..7ef9852 --- /dev/null +++ b/src/utils/markdown-rules/customEmoji.js @@ -0,0 +1,24 @@ +import * as SimpleMarkdown from 'simple-markdown' +import config from "@/config.js"; + +export default (order) => { return { + order: order++, + match: function(source) { + return /^<:([\w\d_]+):([\w\d_]+)>/.exec(source) + }, + + parse: function(capture, parse, state) { + return { + name: capture[1], + id: capture[2] + } + }, + html: function(node, output) { + return SimpleMarkdown.htmlTag('img', '', { + class: "emoji", + title: node.name, + src: `${config.domain}/media/${node.id}`, + alt: node.name + }) + } +}} \ No newline at end of file diff --git a/src/utils/markdown-rules/inlineCodeblock.js b/src/utils/markdown-rules/inlineCodeblock.js new file mode 100644 index 0000000..36b3aef --- /dev/null +++ b/src/utils/markdown-rules/inlineCodeblock.js @@ -0,0 +1,17 @@ +import * as SimpleMarkdown from 'simple-markdown' + +export default (order) => { return { + order: order++, + match: function(source) { + return /^```([^\n]+)```(?!`)/.exec(source) + }, + + parse: function(capture, parse, state) { + return { + type: 'codeblock', + lang: undefined, + content: capture[1] + } + }, + html: null +}} \ No newline at end of file diff --git a/src/utils/markdown-rules/link.js b/src/utils/markdown-rules/link.js new file mode 100644 index 0000000..413394e --- /dev/null +++ b/src/utils/markdown-rules/link.js @@ -0,0 +1,41 @@ +import * as SimpleMarkdown from 'simple-markdown' +import LinkifyIt from 'linkify-it' + +const linkify = LinkifyIt() + +export default (order) => { return { + order: order++, + match: function(source) { + const match = linkify.match(source) + + if(match === null) { + return null + } + + const converted = [ + match[0].raw, + match[0].text, + match[0].url, + ] + + return converted + }, + + parse: function(capture, parse, state) { + return { + content: { + type: 'text', + content: capture[1] + }, + url: capture[2] + } + }, + + html: function(node, output) { + return SimpleMarkdown.htmlTag("a", output(node.content), { + href: node.url, + class: "msg-link", + target: "_blank" + }) + } +}} \ No newline at end of file diff --git a/src/utils/markdown-rules/strikeout.js b/src/utils/markdown-rules/strikeout.js new file mode 100644 index 0000000..1b1a449 --- /dev/null +++ b/src/utils/markdown-rules/strikeout.js @@ -0,0 +1,18 @@ +import * as SimpleMarkdown from 'simple-markdown' + +export default (order) => { return { + order: order++, + match: function(source) { + return /^~~([\s\S]+?)~~(?!~)/.exec(source) + }, + + parse: function(capture, parse, state) { + return { + content: parse(capture[1], state) + } + }, + + html: function(node, output) { + return SimpleMarkdown.htmlTag("s", output(node.content)) + } +}} \ No newline at end of file diff --git a/src/utils/markdown-rules/underline.js b/src/utils/markdown-rules/underline.js new file mode 100644 index 0000000..56f9319 --- /dev/null +++ b/src/utils/markdown-rules/underline.js @@ -0,0 +1,18 @@ +import * as SimpleMarkdown from 'simple-markdown' + +export default (order) => { return { + order: order++, + match: function(source) { + return /^__([\s\S]+?)__(?!_)/.exec(source) + }, + + parse: function(capture, parse, state) { + return { + content: parse(capture[1], state) + } + }, + + html: function(node, output) { + return SimpleMarkdown.htmlTag("u", output(node.content)) + } +}} \ No newline at end of file diff --git a/src/utils/messageFormatter.js b/src/utils/messageFormatter.js index 56cc4f2..3ebc6a0 100644 --- a/src/utils/messageFormatter.js +++ b/src/utils/messageFormatter.js @@ -2,46 +2,59 @@ import twemoji from "twemoji"; import emojiParser from "@/utils/emojiParser"; import config from "@/config.js"; -import customEmoji from "./markdown-it-plugins/customEmoji"; -import formatLink from "./markdown-it-plugins/formatLink"; -import formatCode from "./markdown-it-plugins/formatCode"; -import normalizeFence from "./markdown-it-plugins/normalizeFence"; +import * as SimpleMarkdown from 'simple-markdown' +import { htmlTag as h } from 'simple-markdown' -import hljs from "highlight.js"; -import MarkdownIt from "markdown-it"; -import chatPlugin from "markdown-it-chat-formatter/dist-src/plugin"; +import codeblock from './markdown-rules/codeblock' +import underline from './markdown-rules/underline' +import strikeout from './markdown-rules/strikeout' +import inlineCodeblock from './markdown-rules/inlineCodeblock' +import link from './markdown-rules/link' +import customEmoji from './markdown-rules/customEmoji' -const markdown = new MarkdownIt({ - highlight: function(str, lang) { - if (lang && hljs.getLanguage(lang)) { - try { - return ( - '
' + - hljs.highlight(lang, str, true).value + - "
" - ); - } catch (err) { - console.error(err); - } - } +let order = 0; // order the below rules as declared below rather than by the original defaultRules order: - return ( - '
' + - markdown.utils.escapeHtml(str) + - "
" - ); +const rules = { + inlineCodeblock: inlineCodeblock(order++), + codeblock: codeblock(order++), + underline: underline(order++), + strikeout: strikeout(order++), + link: link(order++), + customEmoji: customEmoji(order++), + + strong: Object.assign({}, SimpleMarkdown.defaultRules.strong, { + order: order++, + }), + + em: Object.assign({}, SimpleMarkdown.defaultRules.em, { + order: order++, + }), + + inlineCode: Object.assign({}, SimpleMarkdown.defaultRules.inlineCode, { + order: order++, + }), + + text: Object.assign({}, SimpleMarkdown.defaultRules.text, { + order: order++, + }), +}; + +const parse = SimpleMarkdown.parserFor(rules); +const output = SimpleMarkdown.outputFor(rules, 'html'); +const markdownToHtml = function(source, state) { + // if you don't have a paragraph rule, you probably want to default `state.inline` to true, to + // indicate to the bold rule that it is parsing inline text: + if (rules.paragraph == null) { + state.inline = true; } -}) - .use(normalizeFence) - .use(chatPlugin) - // .use(customEmoji) - .use(formatLink) - .use(formatCode); + + const parsedContentTree = parse(source, state); + return output(parsedContentTree, state); +}; export default message => { - message = markdown.render(message).trim(); - + message = markdownToHtml(message || '', { inline: false }) message = emojiParser.replaceEmojis(message); return message; diff --git a/yarn.lock b/yarn.lock index 965acee..46d9e5d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -817,16 +817,34 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-12.0.8.tgz#551466be11b2adc3f3d47156758f610bd9f6b1d8" integrity sha512-b8bbUOTwzIY3V5vDTY1fIJ+ePKDUBqt2hC2woVGotdQQhG/2Sh62HOKHrT7ab+VerXAcPyAiTEipPu/FsreUtg== +"@types/node@>=10.0.0": + version "12.12.7" + resolved "https://registry.yarnpkg.com/@types/node/-/node-12.12.7.tgz#01e4ea724d9e3bd50d90c11fd5980ba317d8fa11" + integrity sha512-E6Zn0rffhgd130zbCbAr/JdXfXkoOUFAKNs/rF8qnafSJ8KYaA/j3oz7dcwal+lYjLA7xvdd5J4wdYpCTlP8+w== + "@types/normalize-package-data@^2.4.0": version "2.4.0" resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e" integrity sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA== +"@types/prop-types@*": + version "15.7.3" + resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7" + integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw== + "@types/q@^1.5.1": version "1.5.2" resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8" integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw== +"@types/react@>=16.0.0": + version "16.9.11" + resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.11.tgz#70e0b7ad79058a7842f25ccf2999807076ada120" + integrity sha512-UBT4GZ3PokTXSWmdgC/GeCGEJXE5ofWyibCcecRLUVN2ZBpXQGVgQGtG2foS7CrTKFKlQVVswLvf7Js6XA/CVQ== + dependencies: + "@types/prop-types" "*" + csstype "^2.2.0" + "@types/socket.io-client@1.4.32": version "1.4.32" resolved "https://registry.yarnpkg.com/@types/socket.io-client/-/socket.io-client-1.4.32.tgz#988a65a0386c274b1c22a55377fab6a30789ac14" @@ -2736,6 +2754,11 @@ csso@^3.5.1: dependencies: css-tree "1.0.0-alpha.29" +csstype@^2.2.0: + version "2.6.7" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.7.tgz#20b0024c20b6718f4eda3853a1f5a1cce7f5e4a5" + integrity sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ== + current-script-polyfill@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/current-script-polyfill/-/current-script-polyfill-1.0.0.tgz#f31cf7e4f3e218b0726e738ca92a02d3488ef615" @@ -7418,6 +7441,14 @@ signal-exit@^3.0.0, signal-exit@^3.0.2: resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d" integrity sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0= +simple-markdown@^0.7.1: + version "0.7.1" + resolved "https://registry.yarnpkg.com/simple-markdown/-/simple-markdown-0.7.1.tgz#48f2f65ad9f7faa5922347e9ab6baf66ab3195bc" + integrity sha512-9p92kPFjaDER1yuDgVW1UzFVQoL46HBonniqOLKnCmqn0vlxKkHIxRODBJdHLplo44tOtmnGxPTbUZ1HpYkHyg== + dependencies: + "@types/node" ">=10.0.0" + "@types/react" ">=16.0.0" + simple-swizzle@^0.2.2: version "0.2.2" resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a" @@ -7545,6 +7576,11 @@ sort-keys@^2.0.0: dependencies: is-plain-obj "^1.0.0" +sortablejs@^1.10.1: + version "1.10.1" + resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.10.1.tgz#3d52b00f871be00f00f84d99a60d120bf3dfe52c" + integrity sha512-N6r7GrVmO8RW1rn0cTdvK3JR0BcqecAJ0PmYMCL3ZuqTH3pY+9QyqkmJSkkLyyDvd+AJnwaxTP22Ybr/83V9hQ== + source-list-map@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34" @@ -8380,6 +8416,11 @@ uws@^10.148.1: resolved "https://registry.yarnpkg.com/uws/-/uws-10.148.2.tgz#f01652a0b4bb941cb18bb7a6248d780fd0150245" integrity sha1-8BZSoLS7lByxi7emJI14D9AVAkU= +v-clipboard@^2.2.2: + version "2.2.2" + resolved "https://registry.yarnpkg.com/v-clipboard/-/v-clipboard-2.2.2.tgz#6144e3c5b895ead35463386aa660360a9f88fabf" + integrity sha512-8Nch/q4j4e5BqHFuKUReKBvB7lzn9FQTEuPa54pmfX44VYhWnxAoSHuMwm2Qf9EnyCSEmczqj2VYPsU2BEe6Mw== + validate-npm-package-license@^3.0.1: version "3.0.4" resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a" @@ -8539,6 +8580,13 @@ vue@^2.5.17: resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637" integrity sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ== +vuedraggable@^2.23.2: + version "2.23.2" + resolved "https://registry.yarnpkg.com/vuedraggable/-/vuedraggable-2.23.2.tgz#0d95d7fdf4f02f56755a26b3c9dca5c7ca9cfa72" + integrity sha512-PgHCjUpxEAEZJq36ys49HfQmXglattf/7ofOzUrW2/rRdG7tu6fK84ir14t1jYv4kdXewTEa2ieKEAhhEMdwkQ== + dependencies: + sortablejs "^1.10.1" + vuex@^3.0.1: version "3.1.1" resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.1.1.tgz#0c264bfe30cdbccf96ab9db3177d211828a5910e" From 7ea9bb37a52b8582a6ad0fa8b134f99ca4a9ae93 Mon Sep 17 00:00:00 2001 From: brecert <11599528+Brecert@users.noreply.github.com> Date: Tue, 12 Nov 2019 18:00:13 -0500 Subject: [PATCH 2/3] added syntax highlighting --- src/components/app/MessageTemplate.vue | 1 - src/utils/markdown-rules/codeblock.js | 9 ++++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/app/MessageTemplate.vue b/src/components/app/MessageTemplate.vue index 1a42805..9609f27 100644 --- a/src/components/app/MessageTemplate.vue +++ b/src/components/app/MessageTemplate.vue @@ -21,7 +21,6 @@
{{ this.$props.username }}
{{ getDate }}
-
diff --git a/src/utils/markdown-rules/codeblock.js b/src/utils/markdown-rules/codeblock.js index 26c1b62..7f5d1bf 100644 --- a/src/utils/markdown-rules/codeblock.js +++ b/src/utils/markdown-rules/codeblock.js @@ -1,4 +1,5 @@ import * as SimpleMarkdown from 'simple-markdown' +import hljs from 'highlight.js' export default (order) => { return { order: order++, @@ -16,7 +17,13 @@ export default (order) => { return { html: function(node, output) { const className = node.lang ? `language-${node.lang}` : undefined - const codeblock = SimpleMarkdown.htmlTag("div", SimpleMarkdown.sanitizeText(node.content), { + let content = SimpleMarkdown.sanitizeText(node.content) + if(node.lang) { + content = hljs.highlight(node.lang, node.content, true).value + } + + + const codeblock = SimpleMarkdown.htmlTag("div", content, { class: "codeblock" }) From 2f5549b6c4fce4113ad00a10d0bc4d3a9765b8b5 Mon Sep 17 00:00:00 2001 From: brecert <11599528+Brecert@users.noreply.github.com> Date: Tue, 12 Nov 2019 18:12:19 -0500 Subject: [PATCH 3/3] changed the way styling works for the markdown component --- src/components/app/MessageTemplate.vue | 34 +---------------------- src/components/app/SimpleMarkdown.vue | 36 ++++++++++++++++++++++++- src/utils/markdown-rules/customEmoji.js | 2 +- src/utils/markdown-rules/link.js | 2 +- src/utils/markdown-rules/strikeout.js | 4 ++- src/utils/markdown-rules/underline.js | 4 ++- src/utils/messageFormatter.js | 5 ++++ 7 files changed, 49 insertions(+), 38 deletions(-) diff --git a/src/components/app/MessageTemplate.vue b/src/components/app/MessageTemplate.vue index 9609f27..65447b8 100644 --- a/src/components/app/MessageTemplate.vue +++ b/src/components/app/MessageTemplate.vue @@ -505,36 +505,4 @@ export default { @media (max-width: 468px) { } - - - + \ No newline at end of file diff --git a/src/components/app/SimpleMarkdown.vue b/src/components/app/SimpleMarkdown.vue index 1272ee2..393abdb 100644 --- a/src/components/app/SimpleMarkdown.vue +++ b/src/components/app/SimpleMarkdown.vue @@ -18,4 +18,38 @@ } } } - \ No newline at end of file + + + \ No newline at end of file diff --git a/src/utils/markdown-rules/customEmoji.js b/src/utils/markdown-rules/customEmoji.js index 7ef9852..626468a 100644 --- a/src/utils/markdown-rules/customEmoji.js +++ b/src/utils/markdown-rules/customEmoji.js @@ -15,7 +15,7 @@ export default (order) => { return { }, html: function(node, output) { return SimpleMarkdown.htmlTag('img', '', { - class: "emoji", + class: "emoji custom-emoji", title: node.name, src: `${config.domain}/media/${node.id}`, alt: node.name diff --git a/src/utils/markdown-rules/link.js b/src/utils/markdown-rules/link.js index 413394e..423bd2a 100644 --- a/src/utils/markdown-rules/link.js +++ b/src/utils/markdown-rules/link.js @@ -34,7 +34,7 @@ export default (order) => { return { html: function(node, output) { return SimpleMarkdown.htmlTag("a", output(node.content), { href: node.url, - class: "msg-link", + class: "link", target: "_blank" }) } diff --git a/src/utils/markdown-rules/strikeout.js b/src/utils/markdown-rules/strikeout.js index 1b1a449..8aa5b1e 100644 --- a/src/utils/markdown-rules/strikeout.js +++ b/src/utils/markdown-rules/strikeout.js @@ -13,6 +13,8 @@ export default (order) => { return { }, html: function(node, output) { - return SimpleMarkdown.htmlTag("s", output(node.content)) + return SimpleMarkdown.htmlTag("s", output(node.content), { + class: "strikeout" + }) } }} \ No newline at end of file diff --git a/src/utils/markdown-rules/underline.js b/src/utils/markdown-rules/underline.js index 56f9319..6f9358f 100644 --- a/src/utils/markdown-rules/underline.js +++ b/src/utils/markdown-rules/underline.js @@ -13,6 +13,8 @@ export default (order) => { return { }, html: function(node, output) { - return SimpleMarkdown.htmlTag("u", output(node.content)) + return SimpleMarkdown.htmlTag("u", output(node.content), { + class: "underline" + }) } }} \ No newline at end of file diff --git a/src/utils/messageFormatter.js b/src/utils/messageFormatter.js index 3ebc6a0..65a558e 100644 --- a/src/utils/messageFormatter.js +++ b/src/utils/messageFormatter.js @@ -33,6 +33,11 @@ const rules = { inlineCode: Object.assign({}, SimpleMarkdown.defaultRules.inlineCode, { order: order++, + html: function(node, parse, state) { + return SimpleMarkdown.htmlTag("code", SimpleMarkdown.sanitizeText(node.content), { + class: "inline-code" + }) + } }), text: Object.assign({}, SimpleMarkdown.defaultRules.text, {