Fix various issues with linked page / inline metadata rendering

src/DragDropApp.tsx

@@ -6,7 +6,7 @@ import { KanbanView } from './KanbanView';
 import { DraggableItem } from './components/Item/Item';
 import { DraggableLane } from './components/Lane/Lane';
 import { KanbanContext } from './components/context';
-import { c, getDateColorFn, getTagColorFn, maybeCompleteForMove } from './components/helpers';
+import { c, maybeCompleteForMove } from './components/helpers';
 import { Board, DataTypes, Item, Lane } from './components/types';
 import { DndContext } from './dnd/components/DndContext';
 import { DragOverlay } from './dnd/components/DragOverlay';
@@ -285,8 +285,6 @@ export function DragDropApp({ win, plugin }: { win: Window; plugin: KanbanPlugin
                   stateManager,
                   boardModifiers,
                   filePath,
-                  getTagColor: getTagColorFn(stateManager),
-                  getDateColor: getDateColorFn(stateManager),
                 },
               ];
             }, [entity]);

src/KanbanView.tsx

@@ -227,13 +227,14 @@ export class KanbanView extends TextFileView implements HoverParent {
       return;
     }
 
-    this.activeEditor = null;
-    this.previewQueue.clear();
-    this.previewCache.clear();
-    this.emitter.emit('queueEmpty');
-
-    Object.values(this.actionButtons).forEach((b) => b.remove());
-    this.actionButtons = {};
+    if (clear) {
+      this.activeEditor = null;
+      this.previewQueue.clear();
+      this.previewCache.clear();
+      this.emitter.emit('queueEmpty');
+      Object.values(this.actionButtons).forEach((b) => b.remove());
+      this.actionButtons = {};
+    }
 
     this.plugin.addView(this, data, !clear && this.isPrimary);
   }

src/components/Item/ItemContent.tsx

@@ -20,7 +20,7 @@ import {
   MarkdownRenderer,
 } from '../MarkdownRenderer/MarkdownRenderer';
 import { KanbanContext, SearchContext } from '../context';
-import { c } from '../helpers';
+import { c, useGetDateColorFn, useGetTagColorFn } from '../helpers';
 import { EditState, EditingState, Item, isEditing } from '../types';
 import { DateAndTime, RelativeDate } from './DateAndTime';
 import { InlineMetadata } from './InlineMetadata';
@@ -123,10 +123,19 @@ function checkCheckbox(stateManager: StateManager, title: string, checkboxIndex:
   return results.join('\n');
 }
 
-export function Tags({ tags, searchQuery }: { tags?: string[]; searchQuery?: string }) {
-  const { stateManager, getTagColor } = useContext(KanbanContext);
+export function Tags({
+  tags,
+  searchQuery,
+  alwaysShow,
+}: {
+  tags?: string[];
+  searchQuery?: string;
+  alwaysShow?: boolean;
+}) {
+  const { stateManager } = useContext(KanbanContext);
+  const getTagColor = useGetTagColorFn(stateManager);
   const search = useContext(SearchContext);
-  const shouldShow = stateManager.useSetting('move-tags');
+  const shouldShow = stateManager.useSetting('move-tags') || alwaysShow;
 
   if (!tags.length || !shouldShow) return null;
 
@@ -179,7 +188,8 @@ export const ItemContent = memo(function ItemContent({
   showMetadata = true,
   isStatic,
 }: ItemContentProps) {
-  const { stateManager, filePath, boardModifiers, getDateColor } = useContext(KanbanContext);
+  const { stateManager, filePath, boardModifiers } = useContext(KanbanContext);
+  const getDateColor = useGetDateColorFn(stateManager);
   const titleRef = useRef<string | null>(null);
 
   useEffect(() => {

src/components/Item/ItemMenu.ts

@@ -52,7 +52,7 @@ export function useItemMenu({
           i.setIcon('lucide-file-plus-2')
             .setTitle(t('New note from card'))
             .onClick(async () => {
-              const prevTitle = item.data.title.split('\n')[0].trim();
+              const prevTitle = item.data.titleRaw.split('\n')[0].trim();
               const sanitizedTitle = prevTitle
                 .replace(embedRegEx, '$1')
                 .replace(wikilinkRegEx, '$1')

src/components/Item/MetadataTable.tsx

@@ -1,5 +1,7 @@
 import classcat from 'classcat';
+import { isPlainObject } from 'is-plain-object';
 import { TFile, moment } from 'obsidian';
+import { getAPI } from 'obsidian-dataview';
 import { ComponentChild } from 'preact';
 import { memo, useContext, useMemo } from 'preact/compat';
 import { KanbanView } from 'src/KanbanView';
@@ -8,7 +10,7 @@ import { InlineField, taskFields } from 'src/parsers/helpers/inlineMetadata';
 
 import { MarkdownRenderer } from '../MarkdownRenderer/MarkdownRenderer';
 import { KanbanContext } from '../context';
-import { c, parseMetadataWithOptions } from '../helpers';
+import { c, parseMetadataWithOptions, useGetDateColorFn } from '../helpers';
 import { DataKey, FileMetadata, Item, PageData } from '../types';
 import { Tags } from './ItemContent';
 
@@ -120,22 +122,24 @@ function getDate(v: any) {
     }
   }
   if (moment.isMoment(v)) return v;
-  if (v.ts) return moment(v.ts);
   if (v instanceof Date) return moment(v);
+  const dv = getAPI();
+  if (dv?.value.isDate(v)) return moment(v.ts);
   return null;
 }
 
 export function anyToString(v: any, stateManager: StateManager): string {
-  if (v.value) v = v.value;
+  if (isPlainObject(v) && v.value) v = v.value;
   const date = getDate(v);
   if (date) return getDateFromObj(date, stateManager);
   if (typeof v === 'string') return v;
   if (v instanceof TFile) return v.path;
-  if (typeof v === 'object' && v.path) return v.display || v.path;
   if (Array.isArray(v)) {
     return v.map((v2) => anyToString(v2, stateManager)).join(' ');
   }
   if (v.rrule) return v.toText();
+  const dv = getAPI();
+  if (dv) return dv.value.toString(v);
   return `${v}`;
 }
 
@@ -144,7 +148,8 @@ export function pageDataToString(data: PageData, stateManager: StateManager): st
 }
 
 export function MetadataValue({ data, dateLabel, searchQuery }: MetadataValueProps) {
-  const { view, stateManager, getDateColor } = useContext(KanbanContext);
+  const { view, stateManager } = useContext(KanbanContext);
+  const getDateColor = useGetDateColorFn(stateManager);
 
   const renderChild = (v: any, sep?: string) => {
     const link = getLinkFromObj(v, view);
@@ -253,7 +258,7 @@ export const MetadataTable = memo(function MetadataTable({
                 data-value={pageDataToString(data, stateManager)}
               >
                 {k === 'tags' ? (
-                  <Tags searchQuery={searchQuery} tags={data.value as string[]} />
+                  <Tags searchQuery={searchQuery} tags={data.value as string[]} alwaysShow />
                 ) : (
                   <MetadataValue data={data} searchQuery={searchQuery} />
                 )}

src/components/Kanban.tsx

@@ -19,7 +19,7 @@ import { Lanes } from './Lane/Lane';
 import { LaneForm } from './Lane/LaneForm';
 import { TableView } from './Table/Table';
 import { KanbanContext, SearchContext } from './context';
-import { baseClassName, c, getDateColorFn, getTagColorFn, useSearchValue } from './helpers';
+import { baseClassName, c, useSearchValue } from './helpers';
 import { DataTypes } from './types';
 
 const boardScrollTiggers = [DataTypes.Item, DataTypes.Lane];
@@ -173,8 +173,6 @@ export const Kanban = ({ view, stateManager }: KanbanProps) => {
       stateManager,
       boardModifiers,
       filePath,
-      getTagColor: getTagColorFn(stateManager),
-      getDateColor: getDateColorFn(stateManager),
     };
   }, [view, stateManager, boardModifiers, filePath, dateColors, tagColors]);
 

src/components/MarkdownRenderer/MarkdownRenderer.tsx

@@ -11,7 +11,7 @@ import { PromiseCapability } from 'src/helpers/util';
 
 import { applyCheckboxIndexes } from '../../helpers/renderMarkdown';
 import { IntersectionObserverContext, KanbanContext, SortContext } from '../context';
-import { c } from '../helpers';
+import { c, useGetDateColorFn, useGetTagColorFn } from '../helpers';
 import { DateColor, TagColor } from '../types';
 
 interface MarkdownRendererProps extends HTMLAttributes<HTMLDivElement> {
@@ -225,11 +225,13 @@ export const MarkdownRenderer = memo(function MarkdownPreviewRenderer({
   searchQuery,
   ...divProps
 }: MarkdownRendererProps) {
-  const { view, getDateColor, getTagColor } = useContext(KanbanContext);
+  const { view, stateManager } = useContext(KanbanContext);
   const entityManager = useContext(EntityManagerContext);
   const dndManager = useContext(DndManagerContext);
   const sortContext = useContext(SortContext);
   const intersectionContext = useContext(IntersectionObserverContext);
+  const getTagColor = useGetTagColorFn(stateManager);
+  const getDateColor = useGetDateColorFn(stateManager);
 
   const renderer = useRef<BasicMarkdownRenderer>();
   const elRef = useRef<HTMLDivElement>();

src/components/Table/Cells.tsx

@@ -12,7 +12,7 @@ import { ItemContent, useDatePickers } from '../Item/ItemContent';
 import { useItemMenu } from '../Item/ItemMenu';
 import { MarkdownRenderer } from '../MarkdownRenderer/MarkdownRenderer';
 import { KanbanContext, SearchContext } from '../context';
-import { c } from '../helpers';
+import { c, useGetDateColorFn } from '../helpers';
 import { EditState, Item, Lane, isEditing } from '../types';
 import { TableItem } from './types';
 
@@ -25,8 +25,9 @@ export const DateCell = memo(function DateCell({
   hideDateDisplay: boolean;
   shouldShowRelativeDate: boolean;
 }) {
-  const { stateManager, filePath, getDateColor } = useContext(KanbanContext);
+  const { stateManager, filePath } = useContext(KanbanContext);
   const { onEditDate, onEditTime } = useDatePickers(item.item, item.path);
+  const getDateColor = useGetDateColorFn(stateManager);
 
   return (
     <>

src/components/Table/helpers.tsx

@@ -370,7 +370,7 @@ export function useTableColumns(boardData: Board, stateManager: StateManager) {
               if (!val) return null;
               const searchQuery = info.table.getState().globalFilter;
               if (key === 'tags') {
-                return <Tags searchQuery={searchQuery} tags={val.value as string[]} />;
+                return <Tags searchQuery={searchQuery} tags={val.value as string[]} alwaysShow />;
               }
               return <MetadataValue data={val} searchQuery={searchQuery} />;
             },

src/components/context.ts

@@ -4,15 +4,13 @@ import { StateManager } from 'src/StateManager';
 import { IntersectionObserverHandler } from 'src/dnd/managers/ScrollManager';
 
 import { BoardModifiers } from '../helpers/boardModifiers';
-import { DateColor, Item, Lane, LaneSort, TagColor } from './types';
+import { Item, Lane, LaneSort } from './types';
 
 export interface KanbanContextProps {
   filePath?: string;
   stateManager: StateManager;
   boardModifiers: BoardModifiers;
   view: KanbanView;
-  getTagColor: (tag: string) => TagColor;
-  getDateColor: (date: moment.Moment) => DateColor;
 }
 
 export const KanbanContext = createContext<KanbanContextProps>(null);

src/components/helpers.ts

@@ -224,9 +224,7 @@ export function getTemplatePlugins(app: App) {
   };
 }
 
-export function getTagColorFn(stateManager: StateManager): (tag: string) => TagColor {
-  const tagColors = stateManager.getSetting('tag-colors');
-
+export function getTagColorFn(tagColors: TagColor[]) {
   const tagMap = (tagColors || []).reduce<Record<string, TagColor>>((total, current) => {
     if (!current.tagKey) return total;
     total[current.tagKey] = current;
@@ -239,10 +237,12 @@ export function getTagColorFn(stateManager: StateManager): (tag: string) => TagC
   };
 }
 
-export function getDateColorFn(
-  stateManager: StateManager
-): (date: moment.Moment) => DateColor | null {
-  const dateColors = stateManager.getSetting('date-colors');
+export function useGetTagColorFn(stateManager: StateManager): (tag: string) => TagColor {
+  const tagColors = stateManager.useSetting('tag-colors');
+  return useMemo(() => getTagColorFn(tagColors), [tagColors]);
+}
+
+export function getDateColorFn(dateColors: DateColor[]) {
   const orders = (dateColors || []).map<[moment.Moment | 'today' | 'before' | 'after', DateColor]>(
     (c) => {
       if (c.isToday) {
@@ -312,6 +312,13 @@ export function getDateColorFn(
   };
 }
 
+export function useGetDateColorFn(
+  stateManager: StateManager
+): (date: moment.Moment) => DateColor | null {
+  const dateColors = stateManager.useSetting('date-colors');
+  return useMemo(() => getDateColorFn(dateColors), [dateColors]);
+}
+
 export function parseMetadataWithOptions(data: InlineField, metadataKeys: DataKey[]): PageData {
   const options = metadataKeys.find((opts) => opts.metadataKey === data.key);
 

src/components/types.ts

@@ -86,7 +86,6 @@ export interface ItemData {
   titleSearch: string;
   titleSearchRaw: string;
   metadata: ItemMetadata;
-  dom?: HTMLDivElement;
   forceEditMode?: boolean;
 }