The Live preview do not shows the task body and subtasks

[tu2-atmanand]

The Preview section do not shows the Task Body content and the Subtasks.

You can either show all the subtasks first and below that the task body after leaving one line. Or opposite. You can decide which one looks better.

[tu2-atmanand]

I have implemented the logic to show the Task Description and the Sub tasks in the preview part as of now, but it will be a bad idea to do it using HTML and CSS, as for tags and all the other css, i will have to do it myself.

Instead, i have a better approach, i can show/render the Obsidian Reading mode View with the content I am updating inside the HTML div. So, I will have to find, if Obsidian gives option for me to render a View inside the Modal.

[tu2-atmanand]

I found the methods provided by Obsidian to render the Markdown in Preview mode which basically returns HTML code when i pass plain content to it. This functionality has been implemented and workin :

    // Reference to the HTML element where markdown will be rendered
    const previewContainerRef = useRef<HTMLDivElement>(null);
    useEffect(() => {
        if (previewContainerRef.current) {
            // Clear previous content before rendering new markdown
            previewContainerRef.current.innerHTML = '';

            // Use the MarkdownRenderer.render() method
            MarkdownRenderer.render(
                app,                   // The app object
                newTaskContent,         // The markdown content
                previewContainerRef.current, // The element to append to
                task.filePath,                     // Source path (leave empty if not needed)
                container                    // The parent component (this modal instance)
            );
        }
    }, [newTaskContent]); // Re-render when newTaskContent changes

[tu2-atmanand]

• [x] Add rest of the data which should be previewed to the user. Implementing this in opti-combineModals branch.

I can do this by creating a common function for the below code which i can use in the TaskItemUtils.ts file also :

    const basePath = (window as any).app.vault.adapter.basePath;
    const filePath = path.join(basePath, updatedTask.filePath);
    let globalSettings = loadGlobalSettings(); // Load the globalSettings to check dayPlannerPlugin status
    globalSettings = globalSettings.data.globalSettings;
    const dayPlannerPlugin = globalSettings?.dayPlannerPlugin;

    let dueDateWithFormat = "";
    let completedWitFormat = "";
    if (updatedTask.due || updatedTask.completed) {
        if (globalSettings?.taskCompletionFormat === "1") {
            dueDateWithFormat = updatedTask.due ? ` 📅${updatedTask.due}` : "";
            completedWitFormat = updatedTask.completed ? ` ✅${updatedTask.completed} `: "";
        } else if (globalSettings?.taskCompletionFormat === "2") {
            dueDateWithFormat = updatedTask.due ? ` 📅 ${updatedTask.due}` : "";
            completedWitFormat = updatedTask.completed ? ` ✅ ${updatedTask.completed} ` : "";
        } else if (globalSettings?.taskCompletionFormat === "3") {
            dueDateWithFormat = updatedTask.due ? ` [due:: ${updatedTask.due}]` : "";
            completedWitFormat = updatedTask.completed ? ` [completion:: ${updatedTask.completed}] ` : "";
        } else {
            dueDateWithFormat = updatedTask.due ? ` @due(${updatedTask.due})` : "";
            completedWitFormat = updatedTask.completed ? ` @completion(${updatedTask.completed}) ` : "";
        }
    }

    const timeWithEmo = updatedTask.time ? ` ⏰[${updatedTask.time}]` : "";
    const checkBoxStat = updatedTask.completed ? "- [x]" : "- [ ]";

    // Combine priority emoji if it exists
    const priorityWithEmo =
        updatedTask.priority > 0
            ? priorityEmojis[updatedTask.priority as number]
            : "";

    // Build the formatted string for the main task
    let formattedTask = "";
    if (dayPlannerPlugin) {
        formattedTask = `${checkBoxStat} ${
            updatedTask.time ? `${updatedTask.time} ` : ""
        }${updatedTask.title} |${dueDateWithFormat} ${priorityWithEmo} ${
            updatedTask.tag
        }${completedWitFormat}`;
    } else {
        formattedTask = `${checkBoxStat} ${updatedTask.title} |${timeWithEmo}${dueDateWithFormat} ${priorityWithEmo} ${updatedTask.tag}${completedWitFormat}`;
    }

    // Add the body content, indent each line with a tab (or 4 spaces) for proper formatting
    const bodyLines = updatedTask.body
        .filter(
            (line: string) =>
                !line.startsWith("- [ ]") && !line.startsWith("- [x]")
        )
        .map((line: string) => `\t${line}`)
        .join("\n");

    // Add the sub-tasks without additional indentation
    const subTasksWithTab = updatedTask.body
        .filter(
            (line: string) =>
                line.startsWith("- [ ]") || line.startsWith("- [x]")
        )
        .map((Line: string) => `\t${Line}`)
        .join("\n");

    // console.log("If i there is not subTask to the file and there was no line in the Description, then here there shouldnt be anything if i have added a fresh bullete point in the Desc : ", subTasksWithTab);

    // Combine all parts: main task, body, and sub-tasks
    // const completeTask = `${formattedTask}\n${bodyLines}\n${subTasksWithTab}`;
    const completeTask = `${formattedTask}${
        bodyLines.trim() ? `\n${bodyLines}` : ""
    }\n${subTasksWithTab}`;

    try {
        // Read the file content
        const fileContent = fs.readFileSync(filePath, "utf8");
        let taskRegex = "";
        // Create a regex to match the old task by its body content for replacement
        // const taskRegex = new RegExp(
        //  `^- \\[ \\] .*?${oldTask.title}.*$(?:[\s\S]*?\n\n)`,
        //  "gm"
        // );

        // A more reliable approach would be to use a regex to find the starting line, and then iterate through the lines until an empty line is detected:
        // const taskRegex = new RegExp(^- \\[ \\] .*?${oldTask.title}.*$, "gm");

        const startRegex = new RegExp(
            `^- \\[.{1}\\] .*?${oldTask.title}.*$`,
            "gm"
        );
        const startIndex = fileContent.search(startRegex);

        if (startIndex !== -1) {
            const lines = fileContent.substring(startIndex).split("\n");
            const taskContent = [];

            for (const line of lines) {
                if (line.trim() === "") {
                    break;
                }
                taskContent.push(line);
            }

            taskRegex = taskContent.join("\n");
        }
        console.log(
            "Following is the Old Content, That i am going to update :\n",
            taskRegex
        );

[tu2-atmanand]

This task has been completed. Moving this for testing. Close this issue if everything works correctly.

[tu2-atmanand]

This feature has been teste, working fine.

Closing this issue