Commit c10684ed authored by Igor Drozdov's avatar Igor Drozdov

Code nav: Accept tokens instead of raw HTML on FE

It's a safer and more natural approach
parent 9b596143
<script>
export default {
props: {
language: {
type: String,
required: true,
},
tokens: {
type: Array,
required: true,
},
},
};
</script>
<template>
<span class="line" :lang="language">
<span v-for="(token, tokenIndex) in tokens" :key="tokenIndex" :class="token.class">{{
token.value
}}</span>
</span>
</template>
<script>
import { GlButton } from '@gitlab/ui';
import DocLine from './doc_line.vue';
export default {
components: {
GlButton,
DocLine,
},
props: {
position: {
......@@ -83,8 +85,7 @@ export default {
ref="code-output"
:class="$options.colorScheme"
class="border-0 bg-transparent m-0 code highlight"
v-html="hover.value"
></pre>
><doc-line v-for="(tokens, tokenIndex) in hover.tokens" :key="tokenIndex" :language="hover.language" :tokens="tokens"/></pre>
<p v-else ref="doc-output" class="p-3 m-0">
{{ hover.value }}
</p>
......
......@@ -16,7 +16,27 @@ exports[`Code navigation popover component renders popover 1`] = `
<pre
class="border-0 bg-transparent m-0 code highlight"
>
console.log
<span
class="line"
lang="javascript"
>
<span
class="k"
>
function
</span>
<span>
main() {
</span>
</span>
<span
class="line"
lang="javascript"
>
<span>
}
</span>
</span>
</pre>
</div>
......
import { shallowMount } from '@vue/test-utils';
import Popover from '~/code_navigation/components/popover.vue';
import DocLine from '~/code_navigation/components/doc_line.vue';
const DEFINITION_PATH_PREFIX = 'http://gitlab.com';
......@@ -7,7 +8,22 @@ const MOCK_CODE_DATA = Object.freeze({
hover: [
{
language: 'javascript',
value: 'console.log',
tokens: [
[
{
class: 'k',
value: 'function',
},
{
value: ' main() {',
},
],
[
{
value: '}',
},
],
],
},
],
definition_path: 'test.js#L20',
......@@ -28,6 +44,7 @@ let wrapper;
function factory({ position, data, definitionPathPrefix, blobPath = 'index.js' }) {
wrapper = shallowMount(Popover, {
propsData: { position, data, definitionPathPrefix, blobPath },
stubs: { DocLine },
});
}
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment