Allow rich-text formatting on board column header (#732)

src/ui/views/Board/BoardView.svelte

@@ -113,5 +113,6 @@
     onRecordUpdate={handleRecordUpdate(groupByField)}
     onSortColumns={handleSortColumns}
     {readonly}
+    richText={groupByField?.typeConfig?.richText ?? false}
   />
 </BoardOptionsProvider>

src/ui/views/Board/components/Board/Board.svelte

@@ -12,6 +12,7 @@
   export let columns: Column[];
 
   export let readonly: boolean;
+  export let richText: boolean;
   export let onRecordClick: (record: DataRecord) => void;
   export let onRecordUpdate: (column: string, record: DataRecord) => void;
   export let onRecordAdd: (column: string) => void;
@@ -48,6 +49,7 @@
   {#each columns as column (column.id)}
     <BoardColumn
       {readonly}
+      {richText}
       name={column.id}
       records={column.records}
       {onRecordClick}

src/ui/views/Board/components/Board/BoardColumn.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
-  import { Button, Typography, Icon } from "obsidian-svelte";
+  import { Button, Icon } from "obsidian-svelte";
   import { i18n } from "src/lib/stores/i18n";
+  import ColumnHeader from "./ColumnHeader.svelte";
 
   import type { DataRecord, DataField } from "src/lib/dataframe/dataframe";
   import CardGroup from "./CardList.svelte";
 
   export let name: string;
   export let records: DataRecord[];
   export let readonly: boolean;
+  export let richText: boolean;
   export let onDrop: (records: DataRecord[]) => void;
   export let includeFields: DataField[];
 
@@ -16,7 +18,7 @@
 </script>
 
 <section data-id={name} class="projects--board--column">
-  <Typography variant="label" nomargin>{name}</Typography>
+  <ColumnHeader value={name} {richText} />
   <CardGroup items={records} {onRecordClick} {onDrop} {includeFields} />
   {#if !readonly}
     <span>

src/ui/views/Board/components/Board/ColumnHeader.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { MarkdownRenderer } from "obsidian";
+  import { app, view } from "src/lib/stores/obsidian";
+  import { getContext } from "svelte";
+
+  export let value: string;
+  export let richText: boolean = false;
+
+  const sourcePath = getContext<string>("sourcePath") ?? "";
+
+  function useMarkdown(node: HTMLElement, value: string) {
+    MarkdownRenderer.renderMarkdown(value, node, sourcePath, $view);
+
+    return {
+      update(newValue: string) {
+        node.empty();
+        MarkdownRenderer.renderMarkdown(newValue, node, sourcePath, $view);
+      },
+    };
+  }
+
+  function handleClick(event: MouseEvent) {
+    const targetEl = event.target as HTMLElement;
+    const closestAnchor =
+      targetEl.tagName === "A" ? targetEl : targetEl.closest("a");
+
+    if (!closestAnchor) {
+      return;
+    }
+
+    if (closestAnchor.hasClass("internal-link")) {
+      event.preventDefault();
+
+      const href = closestAnchor.getAttr("href");
+      const newLeaf = event.button === 1 || event.ctrlKey || event.metaKey;
+
+      if (href) {
+        $app.workspace.openLinkText(href, sourcePath, newLeaf);
+      }
+    }
+  }
+</script>
+
+{#if richText}
+  <div use:useMarkdown={value} on:click={handleClick} on:keypress />
+{:else}
+  <div>
+    {value}
+  </div>
+{/if}
+
+<style>
+  div :global(p:first-child) {
+    margin-top: 0;
+  }
+
+  div :global(p:last-child) {
+    margin-bottom: 0;
+  }
+</style>