Few changes in the AddOrEditTaskModal

[tu2-atmanand]

• Move the section of adding SubTasks right below the Main Title

• Then There will be directly the Preview Section. In this preview Section there will be a button 'Edit', pressing this button will move the preview section below. And above this preview section the TextArea component will open, in which the whole content of the task, same to same, as you see in the MD file in source mode will be there and the user can edit the previous content, as well as will able to add more lines for SubTasks for multilevel subtasks or description lines. (I can show display short message to user, after they open this textArea, that 'They can edit the previous fields as well as add more lines for description or multilevel subtasks.')

• Also, the subTasks are not getting detected/displayed in this modal, must be a small issue due to the indentations have been added.

This will be temporary for now, since its not a good, idea as user cannot able to paste images and all. Or, if adding a real MarkdownEditor is very difficult then i can go with the approach of Github Project Kanban, in which you are writing right now, and there is a preview button on top, pressing which you can see the exact preview how it will be shown in the Markdown file. But for this i will have to handle the pasting images and all the other Markdown features. Or if you can able to integrate the CodeMirror editor that will be an easy solution.

[tu2-atmanand]

• Instead of keeping a edit button and then showing the TextArea box only when the Edit button will be pressed take this Github Kanban idea itself, keep a tab like this.
  • The default tab will be the Preview, which will be rendered by the MarkdownRenderer.
  • And there will be Edit Tab, which will show the TextArea box at the place of this Preview and the preview will disappear, display=none.
  • But now i will have to extract the values from the TextArea, since all the fields will be inside this TextArea and if user edits anything in this now, i will have to change it in the actual field too. Plus the user can add description line or more subTasks directly as usual.
  • The only backlog of this feature is not pasting images and all, that is basically having a real MarkdownEditor, see the comment someone made, that might solve some issues.

[tu2-atmanand]

• Use the following new code given by GPT :

I am going to use the code from the following link and create a new file in my project : https://github.com/mgmeyers/obsidian-kanban/blob/main/src/components/Editor/MarkdownEditor.tsx

Then I will update the below code in my AddOrEditTaskModal to use this MarkdownEditor :

To embed the `MarkdownEditor` inside the `EditTaskContent` component and replace the existing `textarea`, here’s how you can modify the code.

### Steps:
1. **Create the `EmbeddedMarkdownEditor.tsx` file**:
   Place the provided `MarkdownEditor` code in the `EmbeddedMarkdownEditor.tsx` file as planned.

2. **Modify `EditTaskContent` to Use `MarkdownEditor`**:
   Replace the existing `textarea` with the `MarkdownEditor` from your `EmbeddedMarkdownEditor.tsx` file, while handling the necessary props, such as `value`, `onChange`, `onSubmit`, etc.

Here is how you can update the `EditTaskContent` component to use the new `MarkdownEditor`:

### Code Changes in `EditTaskContent`:

Replace the `textarea` block with the following:

```tsx
// Import the MarkdownEditor from the EmbeddedMarkdownEditor file
import { MarkdownEditor } from './Editor/EmbeddedMarkdownEditor';

// ...

const EditTaskContent: React.FC<{ app: App, plugin: TaskBoard, root: HTMLElement, task?: taskItem, taskExists?: boolean, filePath: string; onSave: (updatedTask: taskItem) => void; onClose: () => void }> = ({ app, plugin, root, task = taskItemEmpty, taskExists, filePath, onSave, onClose }) => {
  // Replace the textarea state handler with the MarkdownEditor state handler
  const [taskContent, setTaskContent] = useState(task.body ? task.body.join('\n') : '');

  // Function to handle the submission of the task from MarkdownEditor
  const handleMarkdownSubmit = (editor: EditorView) => {
    const updatedContent = editor.state.doc.toString();
    const updatedTask = parseTaskContent(updatedContent);
    setTaskContent(updatedContent);
    setUpdatedTask(updatedTask);
    onSave(updatedTask);
    onClose();
  };

  return (
    <div className="EditTaskModalHome">
      {/* Your other code */}

      {/* Conditional rendering based on active tab */}
      <div className={`EditTaskModalTabContent ${activeTab === 'preview' ? 'show' : 'hide'}`}>
        {/* Preview Section */}
        <div className="EditTaskModalHomePreview" style={{ display: activeTab === 'preview' ? 'block' : 'none' }}>
          {/* Your Preview logic */}
        </div>
      </div>

      <div className={`EditTaskModalTabContent ${activeTab === 'editor' ? 'show' : 'hide'}`}>
        <div className="EditTaskModalHomePreviewHeader">
          Directly Edit any value or add more sub tasks and description for this task.
        </div>

        {/* Embed the MarkdownEditor */}
        <MarkdownEditor
          value={taskContent}
          onChange={(update) => setTaskContent(update.state.doc.toString())}
          onSubmit={handleMarkdownSubmit}
          className="EditTaskModalBodyDescription"
          placeholder="Body content"
        />
      </div>

      {/* Rest of your component code */}
      <button className="EditTaskModalHomeSaveBtn" onClick={handleSave}>Save</button>
    </div>
  );
};

// Rest of your modal logic

Key Changes:

1. MarkdownEditor Integration:

   • The MarkdownEditor replaces the textarea to provide a richer editing experience.
   • The onSubmit handler is configured to save and close the modal when the user finishes editing.

2. State Management:

   • The content of the editor is managed by taskContent and updated using the onChange event of the MarkdownEditor.

3. Preview Tab:

   • The preview logic remains unchanged, but when switching to the editor tab, users will now have the full Markdown editing experience.

By following these steps, you'll be able to replace the standard textarea with the custom MarkdownEditor while keeping the task's editing and previewing functionalities intact.

[tu2-atmanand]

Following is the simplest code GPT gave using the codeMirror library, just sharing here to refer, because I am deleting the below file /src/components/MarkdownEditor.tsx :

// /src/components/MarkdownEditor.tsx

import { EditorView, basicSetup } from 'codemirror';
import React, { useEffect, useRef, useState } from 'react';
import { markdown, markdownLanguage } from '@codemirror/lang-markdown';

import { indentWithTab } from '@codemirror/commands';
import { keymap } from '@codemirror/view';
import { oneDark } from '@codemirror/theme-one-dark';

class MarkdownEditor {
	private editorView: EditorView | null = null;
	private onChangeCallback: (value: string) => void;

	constructor(onChangeCallback: (value: string) => void) {
		this.onChangeCallback = onChangeCallback;
	}

	initializeEditor(editorContainer: HTMLDivElement, initialValue: string) {
		if (this.editorView) {
			this.editorView.destroy();
		}

		this.editorView = new EditorView({
			doc: initialValue,
			extensions: [
				basicSetup,
				markdown({ base: markdownLanguage }),
				oneDark,
				keymap.of([indentWithTab]), // Correctly wrap keybindings with `keymap.of()`
				EditorView.updateListener.of((update) => {
					if (update.docChanged) {
						const currentValue = this.editorView?.state.doc.toString() || '';
						this.onChangeCallback(currentValue);
					}
				}),
			],
			parent: editorContainer,
		});
	}

	destroyEditor() {
		if (this.editorView) {
			this.editorView.destroy();
			this.editorView = null;
		}
	}

	getEditorValue(): string {
		return this.editorView?.state.doc.toString() || '';
	}

	static extractIndentedLines(content: string): string[] {
		return content
			.split('\n')
			.filter((line) => /^\s+[^- \[]/.test(line)); // lines with indentation not starting with `- [ ]`
	}
}

export default function CodeMirrorEditor({ initialContent, onChange }: { initialContent: string, onChange: (bodyContent: string[]) => void }) {
	const editorRef = useRef<HTMLDivElement>(null);
	const [editorInstance, setEditorInstance] = useState<MarkdownEditor | null>(null);

	useEffect(() => {
		if (editorRef.current) {
			const editor = new MarkdownEditor((value: string) => {
				const indentedLines = MarkdownEditor.extractIndentedLines(value);
				onChange(indentedLines);
			});
			editor.initializeEditor(editorRef.current, initialContent);
			setEditorInstance(editor);

			return () => {
				editor.destroyEditor();
			};
		}
	}, [initialContent, onChange]);

	return <div ref={editorRef} className="markdown-editor"></div>;
}

[tu2-atmanand]

Creating a new branch for this Markdown Editor Implementation called markdownEditorEmbed
As of now, i have the TextArea element to edit/add description for the task. Will release the plugin with this state. The work can be parallely dont on this branch to achieve this feature, with the current state of the plugin, later on, i can simply merge.

[tu2-atmanand]

The required functionalities of this issue has been achieved, the MarkdownEditor functionality will be continued in the following issue : #50

Closing this issue.