diff --git a/packages/web/package.json b/packages/web/package.json index 9a453c0e0..891979e11 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -19,6 +19,7 @@ "react": "^16.12.0", "react-ace": "^8.0.0", "react-dom": "^16.12.0", + "react-json-view": "^1.19.1", "react-modal": "^3.11.1", "react-scripts": "3.3.0", "react-select": "^3.1.0", diff --git a/packages/web/src/celldata/CellDataView.js b/packages/web/src/celldata/CellDataView.js index 7884907bc..043c9068a 100644 --- a/packages/web/src/celldata/CellDataView.js +++ b/packages/web/src/celldata/CellDataView.js @@ -2,7 +2,8 @@ import React from 'react'; import { SelectField } from '../utility/inputs'; import ErrorInfo from '../widgets/ErrorInfo'; import styled from 'styled-components'; -import TextCellView from './TextCellView'; +import { TextCellViewWrap, TextCellViewNoWrap } from './TextCellView'; +import JsonCellView from './JsonCellDataView'; const Toolbar = styled.div` display: flex; @@ -22,10 +23,22 @@ const DataWrapper = styled.div` `; const formats = [ + { + type: 'textWrap', + title: 'Text (wrap)', + Component: TextCellViewWrap, + single: true, + }, { type: 'text', - title: 'Text', - Component: TextCellView, + title: 'Text (no wrap)', + Component: TextCellViewNoWrap, + single: true, + }, + { + type: 'json', + title: 'Json', + Component: JsonCellView, single: true, }, ]; @@ -46,7 +59,7 @@ export default function CellDataView({ selection, grider }) { Format: setSelectedFormat(formats.find((x) => x.type == value))} + onChange={(e) => setSelectedFormat(formats.find((x) => x.type == e.target.value))} > {formats.map((fmt) => (