diff --git a/src/cdm/FolderModel.ts b/src/cdm/FolderModel.ts index a5225e30..0d8bc5ff 100644 --- a/src/cdm/FolderModel.ts +++ b/src/cdm/FolderModel.ts @@ -113,6 +113,7 @@ export interface DatabaseHeaderProps { export type RelationshipProps = { value: Literal, backgroundColor: string + view: DatabaseView, } export type RowTemplateOption = { diff --git a/src/components/RelationShip.tsx b/src/components/RelationShip.tsx index dde512c3..aa26894e 100644 --- a/src/components/RelationShip.tsx +++ b/src/components/RelationShip.tsx @@ -1,17 +1,30 @@ -import React from "react"; +import React, { useEffect, useRef } from "react"; import { RelationshipProps } from "cdm/FolderModel"; import { c } from "helpers/StylesHelper"; +import { MarkdownService } from "services/MarkdownRenderService"; export default function Relationship(relationShipProps: RelationshipProps) { - const { value, backgroundColor } = relationShipProps; + const { value, backgroundColor, view } = relationShipProps; + const ref = useRef(null); + + useEffect(() => { + if (ref.current !== null) { + MarkdownService.renderStringAsMarkdown( + view, + value?.toString(), + ref.current, + 3 + ); + } + }, [value]); + return ( - - {value && value.toString()} - + /> ); } diff --git a/src/components/cellTypes/SelectCell.tsx b/src/components/cellTypes/SelectCell.tsx index 71799ead..62328121 100644 --- a/src/components/cellTypes/SelectCell.tsx +++ b/src/components/cellTypes/SelectCell.tsx @@ -18,7 +18,7 @@ import { InputType } from "helpers/Constants"; const SelectCell = (popperProps: CellComponentProps) => { const { defaultCell } = popperProps; const { row, column, table } = defaultCell; - const { tableState } = table.options.meta; + const { tableState, view } = table.options.meta; const tableColumn = column.columnDef as TableColumn; const dataActions = tableState.data((state) => state.actions); @@ -153,7 +153,11 @@ const SelectCell = (popperProps: CellComponentProps) => { tabIndex={0} > {cellValue ? ( - + ) : null} )} diff --git a/src/components/cellTypes/TagsCell.tsx b/src/components/cellTypes/TagsCell.tsx index 1a923ecd..6da9f00a 100644 --- a/src/components/cellTypes/TagsCell.tsx +++ b/src/components/cellTypes/TagsCell.tsx @@ -18,7 +18,7 @@ import { satinizedColumnOption } from "helpers/FileManagement"; const TagsCell = (tagsProps: CellComponentProps) => { const { defaultCell } = tagsProps; const { row, column, table } = defaultCell; - const { tableState } = table.options.meta; + const { tableState, view } = table.options.meta; const tableColumn = column.columnDef as TableColumn; const columnsInfo = tableState.columns((state) => state.info); const configInfo = tableState.configState((state) => state.info); @@ -166,6 +166,7 @@ const TagsCell = (tagsProps: CellComponentProps) => { key={`tags-${row.index}-${tableColumn.key}-${tag}`} value={tag.toString()} backgroundColor={getColor(tag)} + view={view} /> )) diff --git a/src/components/contextMenu/CellContextMenu.tsx b/src/components/contextMenu/CellContextMenu.tsx index 88321ede..0942964d 100644 --- a/src/components/contextMenu/CellContextMenu.tsx +++ b/src/components/contextMenu/CellContextMenu.tsx @@ -77,6 +77,7 @@ export default function CellContextMenu( )}