Merge branch '752-wikilinks-in-simplest-form-works-but-wikilinks-with…

…-custom-text-dont'

src/cdm/FolderModel.ts

@@ -113,6 +113,7 @@ export interface DatabaseHeaderProps {
 export type RelationshipProps = {
     value: Literal,
     backgroundColor: string
+    view: DatabaseView,
 }
 
 export type RowTemplateOption = {

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<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (ref.current !== null) {
+      MarkdownService.renderStringAsMarkdown(
+        view,
+        value?.toString(),
+        ref.current,
+        3
+      );
+    }
+  }, [value]);
+
   return (
-    <span
+    <div
       className={c("relationship")}
+      ref={ref}
       style={{
         backgroundColor: backgroundColor,
       }}
-    >
-      {value && value.toString()}
-    </span>
+    />
   );
 }

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 ? (
-            <Relationship value={cellValue} backgroundColor={getColor()} />
+            <Relationship
+              value={cellValue}
+              backgroundColor={getColor()}
+              view={view}
+            />
           ) : null}
         </div>
       )}

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}
                   />
                 </div>
               ))

src/components/contextMenu/CellContextMenu.tsx

@@ -77,6 +77,7 @@ export default function CellContextMenu(
           <Relationship
             value={index}
             backgroundColor={StyleVariables.BACKGROUND_PRIMARY}
+            view={view}
           />
         )}
       </div>