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

package.json

@@ -13,12 +13,17 @@
   "license": "MIT",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^18.0.0",
+    "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-typescript": "^8.2.1",
+    "@types/markdown-it": "^12.2.3",
+    "@types/markdown-it-emoji": "^2.0.2",
     "@types/node": "^14.14.37",
+    "@types/node-emoji": "^1.8.1",
     "@types/react": "^17.0.27",
     "@types/react-dom": "^17.0.9",
     "@types/react-tabs": "^2.3.3",
+    "@types/twemoji": "^12.1.2",
     "css-loader": "^6.4.0",
     "extract-text-webpack-plugin": "^2.1.2",
     "obsidian": "^0.12.0",
@@ -29,12 +34,16 @@
     "typescript": "^4.2.4"
   },
   "dependencies": {
+    "markdown-it": "^12.3.2",
+    "markdown-it-emoji": "^2.0.0",
     "node": "^16.10.0",
+    "node-emoji": "^1.11.0",
     "node-fetch": "^3.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-emoji-render": "^1.2.4",
     "react-markdown": "^7.1.0",
-    "react-tabs": "^3.2.2"
+    "react-tabs": "^3.2.2",
+    "twemoji": "^13.1.0"
   }
 }

rollup.config.js

@@ -1,6 +1,7 @@
 import typescript from '@rollup/plugin-typescript';
 import {nodeResolve} from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
 
 const isProd = (process.env.BUILD === 'production');
 
@@ -26,5 +27,6 @@ export default {
     typescript(),
     nodeResolve({browser: true}),
     commonjs(),
+    json(),
   ]
 };

src/main.ts

@@ -24,7 +24,7 @@ export default class HabiticaSync extends Plugin {
             VIEW_TYPE,
             (leaf) => (new HabiticaSyncView(leaf, this))
           );
-        this.addRibbonIcon("popup-open", "Open Habitica Pane", () => {  //activate view
+        this.addRibbonIcon("popup-open", "Open Habitica Pane", () => {
             this.activateView();
         });
         this.addCommand({
@@ -35,7 +35,6 @@ export default class HabiticaSync extends Plugin {
                 this.activateView();
             }
         });
-        // this.activateView();
         
     }
     async loadSettings() {

src/view/App.tsx

@@ -83,6 +83,7 @@ class App extends React.Component<any, any> {
                 new Notice('Login Failed, Please check credentials and try again!');
             }
             else {
+                console.log(result);
                 this.setState({
                     isLoaded: true,
                     user_data: result,

src/view/Components/Taskview/Dailiesview/DailyItem.tsx

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

src/view/Components/Taskview/Dailiesview/DailySubTasks.tsx

@@ -1,13 +1,15 @@
-import Emoji from "react-emoji-render";
 import * as React from "react";
+import renderMarkdown from "../markdownRender";
 
 function DailySubTasks(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>
             )
         });

src/view/Components/Taskview/Habitsview/HabitItem.tsx

@@ -1,8 +1,9 @@
-import Emoji from "react-emoji-render";
 import * as React from "react";
-import ReactMarkdown from "react-markdown";
+import renderMarkdown from "../markdownRender";
 
 function HabitItem(props: any) {
+    let habit_text = renderMarkdown(props.habit_text);
+    let habit_notes = renderMarkdown(props.habit_notes);
     return (
         <div className="habit-item" id={props.id}>
             <div className="habit-button-grp">
@@ -14,8 +15,8 @@ function HabitItem(props: any) {
                 </button>
             </div>
             <div>
-                <p className="habit-text"><Emoji text={props.habit_text}></Emoji></p>
+                <p className="habit-text"><span dangerouslySetInnerHTML={{__html: habit_text}}></span></p>
-                <ReactMarkdown className="description" children={props.habit_notes} />
+                <div className="description" dangerouslySetInnerHTML={{__html: habit_notes}}></div>
             </div>
         </div>
     )

src/view/Components/Taskview/Rewardview/RewardItem.tsx

@@ -1,15 +1,17 @@
-import Emoji from "react-emoji-render";
 import * as React from "react";
-import ReactMarkdown from "react-markdown";
+import renderMarkdown from "../markdownRender";
+
 function RewardItem(props: any) {
+    let reward_text = renderMarkdown(props.reward_text);
+    let reward_notes = renderMarkdown(props.reward_notes);
     return (
         <div className="habit-item" id={props.id}>
             <div className="habit-button-grp">
                 <button className="habit-button" id={props.id} onClick={props.onChange}>-{props.reward_value}</button>
             </div>
             <div>
-            <p className="habit-text"><Emoji text={props.reward_text}></Emoji></p>
+            <p className="habit-text"><span dangerouslySetInnerHTML={{__html: reward_text}}></span></p>
-            <ReactMarkdown className="description" children={props.reward_notes} />
+            <div className="description" dangerouslySetInnerHTML={{__html: reward_notes}}></div>
             </div>
             
         </div>

src/view/Components/Taskview/TodoItem.tsx

@@ -1,13 +0,0 @@
-import { Emoji } from 'react-emoji-render';
-import * as React from "react";
-
-function TodoItem(props: any) {
-    return (
-        <div className="todo-item" id={props.id}>
-            <input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed}/>
-            <Emoji text = {props.todo_text}></Emoji><Emoji text = {props.todo_text}></Emoji>
-        </div>
-    )
-}
-
-export default TodoItem

src/view/Components/Taskview/Todoview/TodoItem.tsx

@@ -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>
+                <p><span dangerouslySetInnerHTML={{__html: text_html}}></span></p>
-                <ReactMarkdown className="description" children={props.todo_notes} />
+                <div className="description" dangerouslySetInnerHTML={{__html: note_html}}></div>
                 <TodoSubTasks subtasks={props.todo_subtasks} onChange={props.onChange}></TodoSubTasks>
             </div>
         </div>

src/view/Components/Taskview/Todoview/TodoSubTasks.tsx

@@ -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>
             )
         });

src/view/Components/Taskview/Todoview/index.tsx

@@ -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}/>
                 }
                     

src/view/Components/Taskview/Todoview/tabs.ts

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

src/view/Components/Taskview/index.tsx

@@ -38,5 +38,5 @@ export default function Index(props: any){
                     </Tabs>
                 </div>
     return(display);
-}                 //yes
+}                 
 

src/view/Components/Taskview/markdownRender.ts

@@ -0,0 +1,17 @@
+import MarkdownIt from "markdown-it";
+import markdownitEmoji from "markdown-it-emoji"
+import twemoji from "twemoji";
+
+export default function renderMarkdown(markdown: string) {
+    const md = new MarkdownIt({
+        html: true,
+        breaks: true,
+        linkify: true,
+        typographer: true
+    });
+    md.use(markdownitEmoji);
+    md.renderer.rules.emoji = function(token, idx) {
+        return twemoji.parse(token[idx].content);
+        };
+    return md.render(markdown);
+}

styles.css

@@ -49,7 +49,6 @@
 
 .description {
   font-family: Open Sans, sans-serif;
-  font-style: italic;
   font-weight: 100;
 }
 .description > ul {
@@ -303,3 +302,6 @@ button {
   font-family: Roboto, sans-serif;
   justify-content: flex-start;
 }
+.emoji {
+  height: 1em;
+}

tsconfig.json

@@ -9,6 +9,7 @@
     "noImplicitAny": true,
     "moduleResolution": "node",
     "importHelpers": true,
+    "allowSyntheticDefaultImports": true,
     "lib": [
       "dom",
       "es5",