feat: support marked render for textarea field
This commit is contained in:
		
							parent
							
								
									0b6d54b3fc
								
							
						
					
					
						commit
						8c679b0938
					
				@ -11,8 +11,15 @@ import ViewFactory from '..';
 | 
				
			|||||||
import './style.less';
 | 
					import './style.less';
 | 
				
			||||||
import { getImageByUrl, testUrl } from '@/components/form.fields';
 | 
					import { getImageByUrl, testUrl } from '@/components/form.fields';
 | 
				
			||||||
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
 | 
					import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
 | 
				
			||||||
 | 
					import marked from 'marked';
 | 
				
			||||||
import Lightbox from 'react-image-lightbox';
 | 
					import Lightbox from 'react-image-lightbox';
 | 
				
			||||||
import 'react-image-lightbox/style.css';
 | 
					import 'react-image-lightbox/style.css';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					marked.setOptions({
 | 
				
			||||||
 | 
					  gfm: true,
 | 
				
			||||||
 | 
					  breaks: true,
 | 
				
			||||||
 | 
					});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const InterfaceTypes = new Map<string, any>();
 | 
					const InterfaceTypes = new Map<string, any>();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
function registerFieldComponent(type, Component) {
 | 
					function registerFieldComponent(type, Component) {
 | 
				
			||||||
@ -58,13 +65,13 @@ export function TextareaField(props: any) {
 | 
				
			|||||||
    return null;
 | 
					    return null;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
  if (viewType !== 'table') {
 | 
					  if (viewType !== 'table') {
 | 
				
			||||||
    return value;
 | 
					    return <div className={'textarea-field-content'} style={{maxWidth: 300}} dangerouslySetInnerHTML={{__html: marked(value)}}/>;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
  if (value.length > 20) {
 | 
					  if (value.length > 20) {
 | 
				
			||||||
    return (
 | 
					    return (
 | 
				
			||||||
      <Popover content={<div onClick={(e) => {
 | 
					      <Popover content={(
 | 
				
			||||||
        e.stopPropagation();
 | 
					        <div onClick={(e) => e.stopPropagation()} className={'textarea-field-content'} style={{maxWidth: 300}} dangerouslySetInnerHTML={{__html: marked(value)}}/>
 | 
				
			||||||
      }} style={{maxWidth: 300}}>{value}</div>}>{value.substring(0, 15)}...</Popover>
 | 
					      )}>{value.substring(0, 15)}...</Popover>
 | 
				
			||||||
    );
 | 
					    );
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
  return (
 | 
					  return (
 | 
				
			||||||
 | 
				
			|||||||
@ -27,3 +27,9 @@
 | 
				
			|||||||
    background: rgba(255,255,255,.4);
 | 
					    background: rgba(255,255,255,.4);
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.textarea-field-content {
 | 
				
			||||||
 | 
					  > *:last-child {
 | 
				
			||||||
 | 
					    margin-bottom: 0;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
		Loading…
	
		Reference in New Issue
	
	Block a user