summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/notebook
diff options
context:
space:
mode:
authorMike Greiling <mike@pixelcog.com>2018-10-10 01:27:42 -0500
committerMike Greiling <mike@pixelcog.com>2018-10-10 02:30:25 -0500
commit56914c1ac94c02ee336db5014649777d9d729711 (patch)
tree080cf7410d2a8e146bb1ab73b87bea33c6538a08 /app/assets/javascripts/notebook
parentf7a3e8ff53449bc4ad4a19b3df5a6d19f391b180 (diff)
downloadgitlab-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.vue72
-rw-r--r--app/assets/javascripts/notebook/cells/markdown.vue129
-rw-r--r--app/assets/javascripts/notebook/cells/output/html.vue44
-rw-r--r--app/assets/javascripts/notebook/cells/output/image.vue28
-rw-r--r--app/assets/javascripts/notebook/cells/output/index.vue128
-rw-r--r--app/assets/javascripts/notebook/cells/prompt.vue44
-rw-r--r--app/assets/javascripts/notebook/index.vue77
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(/&amp;/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(/&amp;/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>