fix(priority): sanitize priority values to prevent DOM errors

Priority values containing spaces (e.g., '⏰ 2025-06-05 14:25' or 'Invitation to meeting')
were causing InvalidCharacterError when used in CSS class names. This fix adds a utility
function to sanitize priority values by removing spaces and invalid characters.

- Add priorityUtils module with sanitizePriorityForClass() function
- Update all components that use priority in CSS classes:
  - kanban-card.ts (3 locations)
  - gantt/task-renderer.ts (2 locations)
  - quadrant-card.ts (1 location)
  - InlineEditor.ts (1 location)
  - listItem.ts (1 location)
  - treeItem.ts (1 location)
- Preserve numeric priorities (1-5) as-is
- Replace spaces with hyphens for text priorities
- Remove special characters invalid in CSS tokens

Fixes: Failed to execute 'add' on 'DOMTokenList' errors in kanban, gantt, and quadrant views

Author: Quorafind

src/components/gantt/task-renderer.ts

@@ -7,6 +7,7 @@ import {
 import { GanttTaskItem, PlacedGanttTaskItem, Timescale } from "./gantt"; // 添加PlacedGanttTaskItem导入
 import { Task } from "../../types/task";
 import { MarkdownRendererComponent } from "../MarkdownRenderer";
+import { sanitizePriorityForClass } from "../../utils/priorityUtils";
 
 // Constants from GanttComponent (consider moving to a shared config/constants file)
 const ROW_HEIGHT = 24;
@@ -142,13 +143,11 @@ export class TaskRendererComponent extends Component {
 			if (task.status && task.status.trim()) {
 				taskElement.classList.add(`status-${task.status.trim()}`);
 			}
-			if (
-				task.metadata.priority &&
-				String(task.metadata.priority).trim()
-			) {
-				taskElement.classList.add(
-					`priority-${String(task.metadata.priority).trim()}`
-				);
+			if (task.metadata.priority) {
+				const sanitizedPriority = sanitizePriorityForClass(task.metadata.priority);
+				if (sanitizedPriority) {
+					taskElement.classList.add(`priority-${sanitizedPriority}`);
+				}
 			}
 
 			// Add text label to the right
@@ -225,13 +224,11 @@ export class TaskRendererComponent extends Component {
 			if (task.status && task.status.trim()) {
 				taskElement.classList.add(`status-${task.status.trim()}`);
 			}
-			if (
-				task.metadata.priority &&
-				String(task.metadata.priority).trim()
-			) {
-				taskElement.classList.add(
-					`priority-${String(task.metadata.priority).trim()}`
-				);
+			if (task.metadata.priority) {
+				const sanitizedPriority = sanitizePriorityForClass(task.metadata.priority);
+				if (sanitizedPriority) {
+					taskElement.classList.add(`priority-${sanitizedPriority}`);
+				}
 			}
 
 			// Add tooltip for bar

src/components/kanban/kanban-card.ts

@@ -5,6 +5,7 @@ import TaskProgressBarPlugin from "../../index"; // Adjust path
 import { KanbanSpecificConfig } from "../../common/setting-definition";
 import { createTaskCheckbox } from "../task-view/details";
 import { getEffectiveProject } from "../../utils/taskUtil";
+import { sanitizePriorityForClass } from "../../utils/priorityUtils";
 
 export class KanbanCardComponent extends Component {
 	public element: HTMLElement;
@@ -49,7 +50,10 @@ export class KanbanCardComponent extends Component {
 		}
 		const metadata = this.task.metadata || {};
 		if (metadata.priority) {
-			this.element.classList.add(`priority-${metadata.priority}`);
+			const sanitizedPriority = sanitizePriorityForClass(metadata.priority);
+			if (sanitizedPriority) {
+				this.element.classList.add(`priority-${sanitizedPriority}`);
+			}
 		}
 
 		// --- Card Content ---
@@ -267,13 +271,12 @@ export class KanbanCardComponent extends Component {
 
 	private renderPriority() {
 		const metadata = this.task.metadata || {};
-		const priorityEl = this.metadataEl.createDiv({
-			cls: [
-				"task-priority",
-				`priority-${metadata.priority}`,
-				"clickable-metadata",
-			],
-		});
+		const sanitizedPriority = sanitizePriorityForClass(metadata.priority);
+		const classes = ["task-priority", "clickable-metadata"];
+		if (sanitizedPriority) {
+			classes.push(`priority-${sanitizedPriority}`);
+		}
+		const priorityEl = this.metadataEl.createDiv({ cls: classes });
 		priorityEl.textContent = `${"!".repeat(metadata.priority || 0)}`;
 		priorityEl.setAttribute("aria-label", `Priority ${metadata.priority}`);
 
@@ -341,12 +344,18 @@ export class KanbanCardComponent extends Component {
 			this.element.classList.toggle("task-completed", newTask.completed);
 		}
 		if (oldMetadata.priority !== newMetadata.priority) {
-			if (oldMetadata.priority)
-				this.element.classList.remove(
-					`priority-${oldMetadata.priority}`
-				);
-			if (newMetadata.priority)
-				this.element.classList.add(`priority-${newMetadata.priority}`);
+			if (oldMetadata.priority) {
+				const oldSanitized = sanitizePriorityForClass(oldMetadata.priority);
+				if (oldSanitized) {
+					this.element.classList.remove(`priority-${oldSanitized}`);
+				}
+			}
+			if (newMetadata.priority) {
+				const newSanitized = sanitizePriorityForClass(newMetadata.priority);
+				if (newSanitized) {
+					this.element.classList.add(`priority-${newSanitized}`);
+				}
+			}
 		}
 
 		// Re-render content and metadata if needed

src/components/quadrant/quadrant-card.ts

@@ -4,6 +4,7 @@ import { Task } from "../../types/task";
 import { createTaskCheckbox } from "../task-view/details";
 import { MarkdownRendererComponent } from "../MarkdownRenderer";
 import { t } from "../../translations/helper";
+import { sanitizePriorityForClass } from "../../utils/priorityUtils";
 
 export class QuadrantCardComponent extends Component {
 	plugin: TaskProgressBarPlugin;
@@ -217,12 +218,12 @@ export class QuadrantCardComponent extends Component {
 					numericPriority = this.task.metadata.priority;
 				}
 
-				const priorityEl = el.createDiv({
-					cls: [
-						"tg-quadrant-card-priority",
-						`priority-${numericPriority}`,
-					],
-				});
+				const sanitizedPriority = sanitizePriorityForClass(numericPriority);
+				const classes = ["tg-quadrant-card-priority"];
+				if (sanitizedPriority) {
+					classes.push(`priority-${sanitizedPriority}`);
+				}
+				const priorityEl = el.createDiv({ cls: classes });
 
 				// 根据优先级数字显示不同数量的感叹号
 				let icon = "!".repeat(numericPriority);

src/components/task-view/InlineEditor.ts

@@ -10,6 +10,7 @@ import {
 import "../../styles/inline-editor.css";
 import { getEffectiveProject, isProjectReadonly } from "../../utils/taskUtil";
 import { t } from "../../translations/helper";
+import { sanitizePriorityForClass } from "../../utils/priorityUtils";
 
 export interface InlineEditorOptions {
 	onTaskUpdate: (task: Task, updatedTask: Task) => Promise<void>;
@@ -1344,7 +1345,8 @@ export class InlineEditor extends Component {
 					targetEl.textContent = "!".repeat(
 						this.task.metadata.priority
 					);
-					targetEl.className = `task-priority priority-${this.task.metadata.priority}`;
+					const sanitizedPriority = sanitizePriorityForClass(this.task.metadata.priority);
+				targetEl.className = sanitizedPriority ? `task-priority priority-${sanitizedPriority}` : "task-priority";
 				}
 				break;
 			case "onCompletion":

src/components/task-view/listItem.ts

@@ -9,6 +9,7 @@ import TaskProgressBarPlugin from "../../index";
 import { TaskProgressBarSettings } from "../../common/setting-definition";
 import { InlineEditor, InlineEditorOptions } from "./InlineEditor";
 import { InlineEditorManager } from "./InlineEditorManager";
+import { sanitizePriorityForClass } from "../../utils/priorityUtils";
 
 export class TaskListItemComponent extends Component {
 	public element: HTMLElement;
@@ -227,9 +228,12 @@ export class TaskListItemComponent extends Component {
 				numericPriority = this.task.metadata.priority;
 			}
 
-			const priorityEl = createDiv({
-				cls: ["task-priority", `priority-${numericPriority}`],
-			});
+			const sanitizedPriority = sanitizePriorityForClass(numericPriority);
+			const classes = ["task-priority"];
+			if (sanitizedPriority) {
+				classes.push(`priority-${sanitizedPriority}`);
+			}
+			const priorityEl = createDiv({ cls: classes });
 
 			// Priority icon based on level
 			let icon = "•";

src/components/task-view/treeItem.ts

@@ -14,6 +14,7 @@ import { t } from "../../translations/helper";
 import TaskProgressBarPlugin from "../../index";
 import { InlineEditor, InlineEditorOptions } from "./InlineEditor";
 import { InlineEditorManager } from "./InlineEditorManager";
+import { sanitizePriorityForClass } from "../../utils/priorityUtils";
 
 export class TaskTreeItemComponent extends Component {
 	public element: HTMLElement;
@@ -286,12 +287,12 @@ export class TaskTreeItemComponent extends Component {
 
 		// Priority indicator if available
 		if (this.task.metadata.priority) {
-			const priorityEl = createDiv({
-				cls: [
-					"task-priority",
-					`priority-${this.task.metadata.priority}`,
-				],
-			});
+			const sanitizedPriority = sanitizePriorityForClass(this.task.metadata.priority);
+			const classes = ["task-priority"];
+			if (sanitizedPriority) {
+				classes.push(`priority-${sanitizedPriority}`);
+			}
+			const priorityEl = createDiv({ cls: classes });
 
 			// Priority icon based on level
 			let icon = "•";

src/utils/priorityUtils.ts

@@ -0,0 +1,49 @@
+/**
+ * Utility functions for handling task priorities
+ */
+
+/**
+ * Sanitizes a priority value to make it safe for use in CSS class names.
+ * Removes spaces and special characters that are invalid in CSS tokens.
+ * 
+ * @param priority - The priority value to sanitize (can be string or number)
+ * @returns A sanitized string safe for CSS class names, or empty string if invalid
+ */
+export function sanitizePriorityForClass(priority: string | number | undefined | null): string {
+    if (priority === undefined || priority === null) {
+        return '';
+    }
+    
+    // Convert to string and trim
+    const priorityStr = String(priority).trim();
+    
+    // If it's a numeric priority (1-5), return as-is
+    const numericPriority = parseInt(priorityStr, 10);
+    if (!isNaN(numericPriority) && numericPriority >= 1 && numericPriority <= 5) {
+        return String(numericPriority);
+    }
+    
+    // For non-numeric priorities, remove all spaces and special characters
+    // Only keep alphanumeric characters and hyphens
+    const sanitized = priorityStr
+        .replace(/\s+/g, '-') // Replace spaces with hyphens
+        .replace(/[^\w-]/g, '') // Remove non-word characters except hyphens
+        .replace(/--+/g, '-') // Replace multiple hyphens with single hyphen
+        .replace(/^-|-$/g, ''); // Remove leading/trailing hyphens
+    
+    return sanitized;
+}
+
+/**
+ * Checks if a priority value is valid for use in DOM operations
+ * @param priority - The priority value to check
+ * @returns true if the priority is valid, false otherwise
+ */
+export function isValidPriority(priority: string | number | undefined | null): boolean {
+    if (priority === undefined || priority === null) {
+        return false;
+    }
+    
+    const sanitized = sanitizePriorityForClass(priority);
+    return sanitized.length > 0;
+}