[7.17] [data views] Improve preview pane (#126013) (#126099)

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

* fix preview pane

* fix preview pane

* one less span tag

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
(cherry picked from commit 7dbe341)

* Update field_preview_context.tsx

Co-authored-by: Matthew Kime <matt@mattki.me>

src/plugins/index_pattern_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';
@@ -107,8 +108,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) : value ?? '-';
+  return renderToString(<>{content}</>);
+};
 
 export const FieldPreviewProvider: FunctionComponent = ({ children }) => {
   const previewCount = useRef(0);