add markdown viewer

This commit is contained in:
Simon Larsen 2022-08-28 18:07:08 +01:00
parent cc1b57d2a8
commit 271660328e
No known key found for this signature in database
GPG Key ID: AB45983AA9C81CDE
8 changed files with 59 additions and 10 deletions

View File

@ -365,8 +365,8 @@ class DatabaseService<TBaseModel extends BaseModel> {
return createBy;
}
private serializeCreate(
data: TBaseModel | QueryDeepPartialEntity<TBaseModel>
private SanitizeCreateOrUpdate(
data: TBaseModel | QueryDeepPartialEntity<TBaseModel>, props: DatabaseCommonInteractionProps, isUpdate: boolean = false
): TBaseModel | QueryDeepPartialEntity<TBaseModel> {
const columns: Columns = this.model.getTableColumns();
@ -419,6 +419,12 @@ class DatabaseService<TBaseModel extends BaseModel> {
}
}
// check createByUserId.
if (!isUpdate && props.userId) {
(data as any)['createdByUserId'] = props.userId;
}
return data;
}
@ -461,7 +467,7 @@ class DatabaseService<TBaseModel extends BaseModel> {
createBy = await this.checkUniqueColumnBy(createBy);
// serialize.
createBy.data = this.serializeCreate(createBy.data) as TBaseModel;
createBy.data = this.SanitizeCreateOrUpdate(createBy.data, createBy.props) as TBaseModel;
try {
createBy.data = await this.getRepository().save(createBy.data);
@ -1386,8 +1392,8 @@ class DatabaseService<TBaseModel extends BaseModel> {
beforeUpdateBy.query
);
const data: QueryDeepPartialEntity<TBaseModel> =
this.serializeCreate(
beforeUpdateBy.data
this.SanitizeCreateOrUpdate(
beforeUpdateBy.data, updateBy.props, true
) as QueryDeepPartialEntity<TBaseModel>;
const items: Array<TBaseModel> = await this._findBy({

View File

@ -30,6 +30,7 @@
"react-color": "^2.19.3",
"react-dom": "^18.1.0",
"react-icons": "^4.4.0",
"react-markdown": "^8.0.3",
"react-modern-drawer": "^1.1.1",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",
@ -39,6 +40,7 @@
"reactstrap": "^9.1.1",
"redux": "^4.2.0",
"rehype-sanitize": "^5.0.1",
"remark-gfm": "^3.0.1",
"universal-cookie": "^4.0.4",
"use-async-effect": "^2.2.6",
"web-vitals": "^2.1.4",

View File

@ -32,6 +32,7 @@
"react-color": "^2.19.3",
"react-dom": "^18.1.0",
"react-icons": "^4.4.0",
"react-markdown": "^8.0.3",
"react-modern-drawer": "^1.1.1",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",
@ -41,6 +42,7 @@
"reactstrap": "^9.1.1",
"redux": "^4.2.0",
"rehype-sanitize": "^5.0.1",
"remark-gfm": "^3.0.1",
"universal-cookie": "^4.0.4",
"use-async-effect": "^2.2.6",
"web-vitals": "^2.1.4",

View File

@ -7,6 +7,7 @@ import FieldType from '../Types/FieldType';
import HiddenText from '../HiddenText/HiddenText';
import { JSONObject } from 'Common/Types/JSON';
import _ from 'lodash';
import MarkdownViewer from '../Markdown.tsx/MarkdownViewer';
export interface ComponentProps {
item: JSONObject;
@ -16,6 +17,12 @@ export interface ComponentProps {
}
const Detail: Function = (props: ComponentProps): ReactElement => {
const getMarkdownViewer = (text: string): ReactElement => {
return <MarkdownViewer text={text}/>
}
const getField: Function = (field: Field, index: number): ReactElement => {
const fieldKey: string = field.key;
@ -43,6 +50,10 @@ const Detail: Function = (props: ComponentProps): ReactElement => {
);
}
if (field.fieldType === FieldType.Markdown) {
data = getMarkdownViewer(data as string);
}
if (field.fieldType === FieldType.HiddenText) {
data = (
<HiddenText

View File

@ -38,7 +38,7 @@ import Route from 'Common/Types/API/Route';
import Exception from 'Common/Types/Exception/Exception';
import HashedString from 'Common/Types/HashedString';
import Input from '../Input/Input';
import Markdown from '../Markdown.tsx/Markdown';
import Markdown from '../Markdown.tsx/MarkdownEditor';
export const DefaultValidateFunction: Function = (
_values: FormValues<JSONObject>

View File

@ -18,7 +18,7 @@ export interface ComponentProps {
onBlur?: (() => void) | undefined;
}
const Markdown: FunctionComponent<ComponentProps> = (
const MarkdownEditor: FunctionComponent<ComponentProps> = (
props: ComponentProps
): ReactElement => {
const [value, setValue] = useState<string>('');
@ -80,4 +80,4 @@ const Markdown: FunctionComponent<ComponentProps> = (
);
};
export default Markdown;
export default MarkdownEditor;

View File

@ -0,0 +1,27 @@
import React, {
FunctionComponent,
ReactElement,
} from 'react';
// https://github.com/remarkjs/react-markdown
import ReactMarkdown from 'react-markdown';
// https://github.com/remarkjs/remark-gfm
import remarkGfm from 'remark-gfm'
export interface ComponentProps {
text: string
}
const MarkdownViewer: FunctionComponent<ComponentProps> = (
props: ComponentProps
): ReactElement => {
return (
<div>
<ReactMarkdown children={props.text} remarkPlugins={[remarkGfm]} />
</div>
);
};
export default MarkdownViewer;

View File

@ -66,6 +66,7 @@ const IncidentDelete: FunctionComponent<PageComponentProps> = (
id="table-incident-internal-note"
isDeleteable={true}
isCreateable={true}
isEditable={true}
isViewable={false}
query={{
incidentId: modelId,
@ -110,7 +111,7 @@ const IncidentDelete: FunctionComponent<PageComponentProps> = (
field: {
note: true,
},
title: 'Internal Note',
title: 'Note',
type: FieldType.Markdown,
},
{
@ -123,7 +124,7 @@ const IncidentDelete: FunctionComponent<PageComponentProps> = (
title: 'Created By',
type: FieldType.Entity,
getElement: (item: JSONObject): ReactElement => {
if (item['user']) {
if (item['createdByUser']) {
return (
<UserElement
user={new User().fromJSON(