From 3f049f0672c2d8b32ee23b9cf6026e7bbf9bc1e5 Mon Sep 17 00:00:00 2001
From: Chiyu Liang <532117255@qq.com>
Date: Tue, 14 Nov 2023 22:12:32 +0800
Subject: [PATCH] Allow rich-text formatting on board column header (#732)

---
 src/ui/views/Board/BoardView.svelte           |  1 +
 .../views/Board/components/Board/Board.svelte |  2 +
 .../Board/components/Board/BoardColumn.svelte |  6 +-
 .../components/Board/ColumnHeader.svelte      | 60 +++++++++++++++++++
 4 files changed, 67 insertions(+), 2 deletions(-)
 create mode 100644 src/ui/views/Board/components/Board/ColumnHeader.svelte

diff --git a/src/ui/views/Board/BoardView.svelte b/src/ui/views/Board/BoardView.svelte
index 86a72153..171fcd52 100644
--- a/src/ui/views/Board/BoardView.svelte
+++ b/src/ui/views/Board/BoardView.svelte
@@ -113,5 +113,6 @@
     onRecordUpdate={handleRecordUpdate(groupByField)}
     onSortColumns={handleSortColumns}
     {readonly}
+    richText={groupByField?.typeConfig?.richText ?? false}
   />
 </BoardOptionsProvider>
diff --git a/src/ui/views/Board/components/Board/Board.svelte b/src/ui/views/Board/components/Board/Board.svelte
index e944a1eb..5dadccc4 100644
--- a/src/ui/views/Board/components/Board/Board.svelte
+++ b/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}
diff --git a/src/ui/views/Board/components/Board/BoardColumn.svelte b/src/ui/views/Board/components/Board/BoardColumn.svelte
index 6af52e80..c61bf4e8 100644
--- a/src/ui/views/Board/components/Board/BoardColumn.svelte
+++ b/src/ui/views/Board/components/Board/BoardColumn.svelte
@@ -1,6 +1,7 @@
 <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";
@@ -8,6 +9,7 @@
   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>
diff --git a/src/ui/views/Board/components/Board/ColumnHeader.svelte b/src/ui/views/Board/components/Board/ColumnHeader.svelte
new file mode 100644
index 00000000..528e80af
--- /dev/null
+++ b/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>