From 2af2f46c2b0825558548f897ade3d83e1f738c91 Mon Sep 17 00:00:00 2001
From: Matt Kime <matt@mattki.me>
Date: Thu, 17 Feb 2022 23:46:07 -0600
Subject: [PATCH 1/3] fix preview pane

---
 .../public/components/preview/field_preview_context.tsx        | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

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
index a4a09562c300f3..8d0078d2092fa4 100644
--- 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';
@@ -46,7 +47,7 @@ const defaultParams: Params = {
 };
 
 export const defaultValueFormatter = (value: unknown) =>
-  `<span>${typeof value === 'object' ? JSON.stringify(value) : value ?? '-'}</span>`;
+  renderToString(<span>${typeof value === 'object' ? JSON.stringify(value) : value ?? '-'}</span>);
 
 export const FieldPreviewProvider: FunctionComponent = ({ children }) => {
   const previewCount = useRef(0);

From 07d2c3bf3049d2a7f6e7f886a74978d6bac46e05 Mon Sep 17 00:00:00 2001
From: Matt Kime <matt@mattki.me>
Date: Fri, 18 Feb 2022 00:02:47 -0600
Subject: [PATCH 2/3] fix preview pane

---
 .../public/components/preview/field_preview_context.tsx     | 6 ++++--
 1 file changed, 4 insertions(+), 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
index 8d0078d2092fa4..129fa130303aa2 100644
--- 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
@@ -46,8 +46,10 @@ const defaultParams: Params = {
   format: null,
 };
 
-export const defaultValueFormatter = (value: unknown) =>
-  renderToString(<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(<span>{content}</span>);
+};
 
 export const FieldPreviewProvider: FunctionComponent = ({ children }) => {
   const previewCount = useRef(0);

From 33de410b7edb3fe6d9d62b6f3f08e2f23e68a4ff Mon Sep 17 00:00:00 2001
From: Matt Kime <matt@mattki.me>
Date: Fri, 18 Feb 2022 00:15:42 -0600
Subject: [PATCH 3/3] one less span tag

---
 .../public/components/preview/field_preview_context.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index 129fa130303aa2..981654ac52d916 100644
--- 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
@@ -48,7 +48,7 @@ const defaultParams: Params = {
 
 export const defaultValueFormatter = (value: unknown) => {
   const content = typeof value === 'object' ? JSON.stringify(value) : String(value) ?? '-';
-  return renderToString(<span>{content}</span>);
+  return renderToString(<>{content}</>);
 };
 
 export const FieldPreviewProvider: FunctionComponent = ({ children }) => {