[data views] Improve preview pane (#126013) (#126097)

* fix preview pane * fix preview pane * one less span tag Co-authored-by: Kibana Machine <[email protected]> (cherry picked from commit 7dbe341) Co-authored-by: Matthew Kime <[email protected]>
elastic · Feb 21, 2022 · b12c8b1 · b12c8b1
1 parent 81f308c
commit b12c8b1
Showing 1 changed file with 5 additions and 2 deletions.
diff --git a/src/plugins/data_view_field_editor/public/components/preview/field_preview_context.tsx b/src/plugins/data_view_field_editor/public/components/preview/field_preview_context.tsx
@@ -16,6 +16,7 @@ import React, {
   useRef,
   FunctionComponent,
 } from 'react';
+import { renderToString } from 'react-dom/server';
 import useDebounce from 'react-use/lib/useDebounce';
 import { i18n } from '@kbn/i18n';
 import { get } from 'lodash';
@@ -45,8 +46,10 @@ const defaultParams: Params = {
   format: null,
 };
 
-export const defaultValueFormatter = (value: unknown) =>
-  `<span>${typeof value === 'object' ? JSON.stringify(value) : value ?? '-'}</span>`;
+export const defaultValueFormatter = (value: unknown) => {
+  const content = typeof value === 'object' ? JSON.stringify(value) : String(value) ?? '-';
+  return renderToString(<>{content}</>);
+};
 
 export const FieldPreviewProvider: FunctionComponent = ({ children }) => {
   const previewCount = useRef(0);