Added a wrapper Markdown Rendered to render BOTH Emojis and Mardown as HTML

This commit is contained in:
SuperChamp234 2022-01-14 14:39:21 +05:30
parent 916236db5d
commit 88fdde519d
17 changed files with 65 additions and 41 deletions

View file

@ -1,16 +1,16 @@
import Emoji from "react-emoji-render";
import * as React from "react";
import ReactMarkdown from "react-markdown";
import TodoSubTasks from "./TodoSubTasks";
import renderMarkdown from "../markdownRender"
function TodoItem(props: any) {
var text_html = renderMarkdown(props.todo_text);
var note_html = renderMarkdown(props.todo_notes);
return (
<div className="todo-item" id={props.id}>
<input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed}/>
{/* <p><Emoji text ={props.todo_text}></Emoji></p> */}
<div>
<p><Emoji text={props.todo_text}></Emoji></p>
<ReactMarkdown className="description" children={props.todo_notes} />
<p><span dangerouslySetInnerHTML={{__html: text_html}}></span></p>
<div className="description" dangerouslySetInnerHTML={{__html: note_html}}></div>
<TodoSubTasks subtasks={props.todo_subtasks} onChange={props.onChange}></TodoSubTasks>
</div>
</div>

View file

@ -1,13 +1,14 @@
import Emoji from "react-emoji-render";
import * as React from "react";
import renderMarkdown from "../markdownRender";
function TodoSubTasks(props: any) {
if (props.subtasks) {
const subtasks = props.subtasks.map((subtask: any) => {
let subtask_text = renderMarkdown(subtask.text);
return (
<div className="subtask" id={subtask.id}>
<input type="checkbox" className="checkbox" onChange={props.onChange} checked={subtask.completed} />
<p id={subtask.id}><Emoji text={subtask.text}></Emoji></p>
<p id={subtask.id}><span dangerouslySetInnerHTML={{__html: subtask_text}}></span></p>
</div>
)
});

View file

@ -20,7 +20,7 @@ export default function Index(props: any){
todo_subtasks = todo.checklist;
}
return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text}
todo_notes={todo_subtasks} todo_subtasks={todo_subtasks}
todo_notes={todo_notes} todo_subtasks={todo_subtasks}
onChange={props.onChange} completed={todo.completed}/>
}

View file

@ -1 +0,0 @@
import * as React from "react"