feat: display linewraps for multi-line strings

Author: bigeagle

docs/pages/full/index.tsx

@@ -69,6 +69,13 @@ map.set({}, 'world')
 const set = new Set([1, 2, 3])
 
 const superLongString = '1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111'
+const shortMultiLineString = `Line 1
+Line 2
+Line 3`
+const multiLineString = `Lorem ipsum dolor sit amet,
+consectetur adipiscing elit.
+Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.`
 
 const example = {
   avatar,
@@ -101,6 +108,8 @@ const example = {
     [3, 4]
   ],
   superLongString,
+  shortMultiLineString,
+  multiLineString,
   function: aPlusB,
   constFunction: aPlusBConst,
   anonymousFunction: function (a: number, b: number) {

src/components/DataTypes/String.tsx

@@ -16,13 +16,14 @@ export const stringType = defineEasyType<string>({
     const value = showRest
       ? props.value
       : props.value.slice(0, collapseStringsAfterLength)
-    const hasRest = props.value.length > collapseStringsAfterLength
+    const hasRest = (props.value.length > collapseStringsAfterLength) || props.value.includes('\n')
     return (
       <Box
         component='span'
         sx={{
           overflowWrap: 'anywhere',
-          cursor: hasRest ? 'pointer' : 'inherit'
+          cursor: hasRest ? 'pointer' : 'inherit',
+          whiteSpace: showRest ? 'pre-wrap' : 'normal'
         }}
         onClick={() => {
           if (window.getSelection()?.type === 'Range') {

src/components/mui/DataBox.tsx

@@ -11,6 +11,7 @@ export const DataBox: FC<DataBoxProps> = props => (
     {...props}
     sx={{
       display: 'inline-block',
+      verticalAlign: 'top',
       ...props.sx
     }}
   />