diff options
author | Mike Greiling <mike@pixelcog.com> | 2018-10-10 01:27:42 -0500 |
---|---|---|
committer | Mike Greiling <mike@pixelcog.com> | 2018-10-10 02:30:25 -0500 |
commit | 56914c1ac94c02ee336db5014649777d9d729711 (patch) | |
tree | 080cf7410d2a8e146bb1ab73b87bea33c6538a08 /app/assets/javascripts/notebook | |
parent | f7a3e8ff53449bc4ad4a19b3df5a6d19f391b180 (diff) | |
download | gitlab-ce-56914c1ac94c02ee336db5014649777d9d729711.tar.gz |
Prettify merge_conflicts monitoring and notebook modules
Diffstat (limited to 'app/assets/javascripts/notebook')
-rw-r--r-- | app/assets/javascripts/notebook/cells/code/index.vue | 72 | ||||
-rw-r--r-- | app/assets/javascripts/notebook/cells/markdown.vue | 129 | ||||
-rw-r--r-- | app/assets/javascripts/notebook/cells/output/html.vue | 44 | ||||
-rw-r--r-- | app/assets/javascripts/notebook/cells/output/image.vue | 28 | ||||
-rw-r--r-- | app/assets/javascripts/notebook/cells/output/index.vue | 128 | ||||
-rw-r--r-- | app/assets/javascripts/notebook/cells/prompt.vue | 44 | ||||
-rw-r--r-- | app/assets/javascripts/notebook/index.vue | 77 |
7 files changed, 260 insertions, 262 deletions
diff --git a/app/assets/javascripts/notebook/cells/code/index.vue b/app/assets/javascripts/notebook/cells/code/index.vue index 7d2a1a33b98..0691ba64f8e 100644 --- a/app/assets/javascripts/notebook/cells/code/index.vue +++ b/app/assets/javascripts/notebook/cells/code/index.vue @@ -1,45 +1,45 @@ <script> - import Prism from '../../lib/highlight'; - import Prompt from '../prompt.vue'; +import Prism from '../../lib/highlight'; +import Prompt from '../prompt.vue'; - export default { - components: { - prompt: Prompt, +export default { + components: { + prompt: Prompt, + }, + props: { + count: { + type: Number, + required: false, + default: 0, }, - props: { - count: { - type: Number, - required: false, - default: 0, - }, - codeCssClass: { - type: String, - required: false, - default: '', - }, - type: { - type: String, - required: true, - }, - rawCode: { - type: String, - required: true, - }, + codeCssClass: { + type: String, + required: false, + default: '', }, - computed: { - code() { - return this.rawCode; - }, - promptType() { - const type = this.type.split('put')[0]; - - return type.charAt(0).toUpperCase() + type.slice(1); - }, + type: { + type: String, + required: true, + }, + rawCode: { + type: String, + required: true, }, - mounted() { - Prism.highlightElement(this.$refs.code); + }, + computed: { + code() { + return this.rawCode; + }, + promptType() { + const type = this.type.split('put')[0]; + + return type.charAt(0).toUpperCase() + type.slice(1); }, - }; + }, + mounted() { + Prism.highlightElement(this.$refs.code); + }, +}; </script> <template> diff --git a/app/assets/javascripts/notebook/cells/markdown.vue b/app/assets/javascripts/notebook/cells/markdown.vue index 3d09d24b6ab..5aa83db0986 100644 --- a/app/assets/javascripts/notebook/cells/markdown.vue +++ b/app/assets/javascripts/notebook/cells/markdown.vue @@ -1,12 +1,12 @@ <script> - /* global katex */ - import marked from 'marked'; - import sanitize from 'sanitize-html'; - import Prompt from './prompt.vue'; +/* global katex */ +import marked from 'marked'; +import sanitize from 'sanitize-html'; +import Prompt from './prompt.vue'; - const renderer = new marked.Renderer(); +const renderer = new marked.Renderer(); - /* +/* Regex to match KaTex blocks. Supports the following: @@ -17,7 +17,7 @@ The matched text then goes through the KaTex renderer & then outputs the HTML */ - const katexRegexString = `( +const katexRegexString = `( ^\\\\begin{[a-zA-Z]+}\\s | ^\\$\\$ @@ -32,66 +32,69 @@ | \\$ ) - `.replace(/\s/g, '').trim(); + ` + .replace(/\s/g, '') + .trim(); - renderer.paragraph = (t) => { - let text = t; - let inline = false; +renderer.paragraph = t => { + let text = t; + let inline = false; - if (typeof katex !== 'undefined') { - const katexString = text.replace(/&/g, '&') - .replace(/&=&/g, '\\space=\\space') - .replace(/<(\/?)em>/g, '_'); - const regex = new RegExp(katexRegexString, 'gi'); - const matchLocation = katexString.search(regex); - const numberOfMatches = katexString.match(regex); + if (typeof katex !== 'undefined') { + const katexString = text + .replace(/&/g, '&') + .replace(/&=&/g, '\\space=\\space') + .replace(/<(\/?)em>/g, '_'); + const regex = new RegExp(katexRegexString, 'gi'); + const matchLocation = katexString.search(regex); + const numberOfMatches = katexString.match(regex); - if (numberOfMatches && numberOfMatches.length !== 0) { - if (matchLocation > 0) { - let matches = regex.exec(katexString); - inline = true; + if (numberOfMatches && numberOfMatches.length !== 0) { + if (matchLocation > 0) { + let matches = regex.exec(katexString); + inline = true; - while (matches !== null) { - const renderedKatex = katex.renderToString(matches[0].replace(/\$/g, '')); - text = `${text.replace(matches[0], ` ${renderedKatex}`)}`; - matches = regex.exec(katexString); - } - } else { - const matches = regex.exec(katexString); - text = katex.renderToString(matches[2]); + while (matches !== null) { + const renderedKatex = katex.renderToString(matches[0].replace(/\$/g, '')); + text = `${text.replace(matches[0], ` ${renderedKatex}`)}`; + matches = regex.exec(katexString); } + } else { + const matches = regex.exec(katexString); + text = katex.renderToString(matches[2]); } } + } - return `<p class="${inline ? 'inline-katex' : ''}">${text}</p>`; - }; + return `<p class="${inline ? 'inline-katex' : ''}">${text}</p>`; +}; - marked.setOptions({ - sanitize: true, - renderer, - }); +marked.setOptions({ + sanitize: true, + renderer, +}); - export default { - components: { - prompt: Prompt, - }, - props: { - cell: { - type: Object, - required: true, - }, +export default { + components: { + prompt: Prompt, + }, + props: { + cell: { + type: Object, + required: true, }, - computed: { - markdown() { - return sanitize(marked(this.cell.source.join('').replace(/\\/g, '\\\\')), { - allowedTags: false, - allowedAttributes: { - '*': ['class'], - }, - }); - }, + }, + computed: { + markdown() { + return sanitize(marked(this.cell.source.join('').replace(/\\/g, '\\\\')), { + allowedTags: false, + allowedAttributes: { + '*': ['class'], + }, + }); }, - }; + }, +}; </script> <template> @@ -105,13 +108,13 @@ </template> <style> - .markdown .katex { - display: block; - text-align: center; - } +.markdown .katex { + display: block; + text-align: center; +} - .markdown .inline-katex .katex { - display: inline; - text-align: initial; - } +.markdown .inline-katex .katex { + display: inline; + text-align: initial; +} </style> diff --git a/app/assets/javascripts/notebook/cells/output/html.vue b/app/assets/javascripts/notebook/cells/output/html.vue index 0535ee7afa8..c6fc786fa76 100644 --- a/app/assets/javascripts/notebook/cells/output/html.vue +++ b/app/assets/javascripts/notebook/cells/output/html.vue @@ -1,30 +1,28 @@ <script> - import sanitize from 'sanitize-html'; - import Prompt from '../prompt.vue'; +import sanitize from 'sanitize-html'; +import Prompt from '../prompt.vue'; - export default { - components: { - prompt: Prompt, +export default { + components: { + prompt: Prompt, + }, + props: { + rawCode: { + type: String, + required: true, }, - props: { - rawCode: { - type: String, - required: true, - }, + }, + computed: { + sanitizedOutput() { + return sanitize(this.rawCode, { + allowedTags: sanitize.defaults.allowedTags.concat(['img', 'svg']), + allowedAttributes: { + img: ['src'], + }, + }); }, - computed: { - sanitizedOutput() { - return sanitize(this.rawCode, { - allowedTags: sanitize.defaults.allowedTags.concat([ - 'img', 'svg', - ]), - allowedAttributes: { - img: ['src'], - }, - }); - }, - }, - }; + }, +}; </script> <template> diff --git a/app/assets/javascripts/notebook/cells/output/image.vue b/app/assets/javascripts/notebook/cells/output/image.vue index 67d6c5ad12b..a17868963ce 100644 --- a/app/assets/javascripts/notebook/cells/output/image.vue +++ b/app/assets/javascripts/notebook/cells/output/image.vue @@ -1,21 +1,21 @@ <script> - import Prompt from '../prompt.vue'; +import Prompt from '../prompt.vue'; - export default { - components: { - prompt: Prompt, +export default { + components: { + prompt: Prompt, + }, + props: { + outputType: { + type: String, + required: true, }, - props: { - outputType: { - type: String, - required: true, - }, - rawCode: { - type: String, - required: true, - }, + rawCode: { + type: String, + required: true, }, - }; + }, +}; </script> <template> diff --git a/app/assets/javascripts/notebook/cells/output/index.vue b/app/assets/javascripts/notebook/cells/output/index.vue index 4183b976814..d9f8604ed10 100644 --- a/app/assets/javascripts/notebook/cells/output/index.vue +++ b/app/assets/javascripts/notebook/cells/output/index.vue @@ -1,78 +1,78 @@ <script> - import CodeCell from '../code/index.vue'; - import Html from './html.vue'; - import Image from './image.vue'; +import CodeCell from '../code/index.vue'; +import Html from './html.vue'; +import Image from './image.vue'; - export default { - components: { - 'code-cell': CodeCell, - 'html-output': Html, - 'image-output': Image, +export default { + components: { + 'code-cell': CodeCell, + 'html-output': Html, + 'image-output': Image, + }, + props: { + codeCssClass: { + type: String, + required: false, + default: '', }, - props: { - codeCssClass: { - type: String, - required: false, - default: '', - }, - count: { - type: Number, - required: false, - default: 0, - }, - output: { - type: Object, - requred: true, - default: () => ({}), - }, + count: { + type: Number, + required: false, + default: 0, }, - computed: { - componentName() { - if (this.output.text) { - return 'code-cell'; - } else if (this.output.data['image/png']) { - return 'image-output'; - } else if (this.output.data['text/html']) { - return 'html-output'; - } else if (this.output.data['image/svg+xml']) { - return 'html-output'; - } - + output: { + type: Object, + requred: true, + default: () => ({}), + }, + }, + computed: { + componentName() { + if (this.output.text) { return 'code-cell'; - }, - rawCode() { - if (this.output.text) { - return this.output.text.join(''); - } + } else if (this.output.data['image/png']) { + return 'image-output'; + } else if (this.output.data['text/html']) { + return 'html-output'; + } else if (this.output.data['image/svg+xml']) { + return 'html-output'; + } - return this.dataForType(this.outputType); - }, - outputType() { - if (this.output.text) { - return ''; - } else if (this.output.data['image/png']) { - return 'image/png'; - } else if (this.output.data['text/html']) { - return 'text/html'; - } else if (this.output.data['image/svg+xml']) { - return 'image/svg+xml'; - } + return 'code-cell'; + }, + rawCode() { + if (this.output.text) { + return this.output.text.join(''); + } + + return this.dataForType(this.outputType); + }, + outputType() { + if (this.output.text) { + return ''; + } else if (this.output.data['image/png']) { + return 'image/png'; + } else if (this.output.data['text/html']) { + return 'text/html'; + } else if (this.output.data['image/svg+xml']) { + return 'image/svg+xml'; + } - return 'text/plain'; - }, + return 'text/plain'; }, - methods: { - dataForType(type) { - let data = this.output.data[type]; + }, + methods: { + dataForType(type) { + let data = this.output.data[type]; - if (typeof data === 'object') { - data = data.join(''); - } + if (typeof data === 'object') { + data = data.join(''); + } - return data; - }, + return data; }, - }; + }, +}; </script> <template> diff --git a/app/assets/javascripts/notebook/cells/prompt.vue b/app/assets/javascripts/notebook/cells/prompt.vue index fe1fc37e1dc..d96f701ee3e 100644 --- a/app/assets/javascripts/notebook/cells/prompt.vue +++ b/app/assets/javascripts/notebook/cells/prompt.vue @@ -1,23 +1,23 @@ <script> - export default { - props: { - type: { - type: String, - required: false, - default: '', - }, - count: { - type: Number, - required: false, - default: 0, - }, +export default { + props: { + type: { + type: String, + required: false, + default: '', }, - computed: { - hasKeys() { - return this.type !== '' && this.count; - }, + count: { + type: Number, + required: false, + default: 0, }, - }; + }, + computed: { + hasKeys() { + return this.type !== '' && this.count; + }, + }, +}; </script> <template> @@ -29,9 +29,9 @@ </template> <style scoped> - .prompt { - padding: 0 10px; - min-width: 7em; - font-family: monospace; - } +.prompt { + padding: 0 10px; + min-width: 7em; + font-family: monospace; +} </style> diff --git a/app/assets/javascripts/notebook/index.vue b/app/assets/javascripts/notebook/index.vue index f241df9620d..c5cc8c97dda 100644 --- a/app/assets/javascripts/notebook/index.vue +++ b/app/assets/javascripts/notebook/index.vue @@ -1,51 +1,48 @@ <script> - import { - MarkdownCell, - CodeCell, - } from './cells'; +import { MarkdownCell, CodeCell } from './cells'; - export default { - components: { - 'code-cell': CodeCell, - 'markdown-cell': MarkdownCell, +export default { + components: { + 'code-cell': CodeCell, + 'markdown-cell': MarkdownCell, + }, + props: { + notebook: { + type: Object, + required: true, }, - props: { - notebook: { - type: Object, - required: true, - }, - codeCssClass: { - type: String, - required: false, - default: '', - }, + codeCssClass: { + type: String, + required: false, + default: '', }, - computed: { - cells() { - if (this.notebook.worksheets) { - const data = { - cells: [], - }; + }, + computed: { + cells() { + if (this.notebook.worksheets) { + const data = { + cells: [], + }; - return this.notebook.worksheets.reduce((cellData, sheet) => { - const cellDataCopy = cellData; - cellDataCopy.cells = cellDataCopy.cells.concat(sheet.cells); - return cellDataCopy; - }, data).cells; - } + return this.notebook.worksheets.reduce((cellData, sheet) => { + const cellDataCopy = cellData; + cellDataCopy.cells = cellDataCopy.cells.concat(sheet.cells); + return cellDataCopy; + }, data).cells; + } - return this.notebook.cells; - }, - hasNotebook() { - return Object.keys(this.notebook).length; - }, + return this.notebook.cells; }, - methods: { - cellType(type) { - return `${type}-cell`; - }, + hasNotebook() { + return Object.keys(this.notebook).length; }, - }; + }, + methods: { + cellType(type) { + return `${type}-cell`; + }, + }, +}; </script> <template> |