From 46a4118461a02f7f7146696ee00715975eddcbca Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Wed, 6 Nov 2019 12:41:41 +0100
Subject: [PATCH] DataLinks: fix syntax highlighting not being applied on first
 render (#20199)

* Enable prism syntax for data links outside of effect

* Retrieve theme with useTheme hook
---
 .../src/components/DataLinks/DataLinksEditor.tsx      | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinksEditor.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinksEditor.tsx
index 6854090e324..8ac6c69feba 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinksEditor.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinksEditor.tsx
@@ -1,14 +1,14 @@
 // Libraries
-import React, { FC, useContext, useEffect } from 'react';
+import React, { FC } from 'react';
 // @ts-ignore
 import Prism from 'prismjs';
 // Components
 import { css } from 'emotion';
 import { DataLink } from '@grafana/data';
-import { ThemeContext } from '../../index';
 import { Button } from '../index';
 import { DataLinkEditor } from './DataLinkEditor';
 import { VariableSuggestion } from './DataLinkSuggestions';
+import { useTheme } from '../../themes/ThemeContext';
 
 interface DataLinksEditorProps {
   value: DataLink[];
@@ -26,11 +26,8 @@ export const enableDatalinksPrismSyntax = () => {
 };
 
 export const DataLinksEditor: FC<DataLinksEditorProps> = React.memo(({ value, onChange, suggestions, maxLinks }) => {
-  const theme = useContext(ThemeContext);
-
-  useEffect(() => {
-    enableDatalinksPrismSyntax();
-  });
+  const theme = useTheme();
+  enableDatalinksPrismSyntax();
 
   const onAdd = () => {
     onChange(value ? [...value, { url: '', title: '' }] : [{ url: '', title: '' }]);