add markdown render

package.json

@@ -5,7 +5,8 @@
   "main": "main.js",
   "scripts": {
     "dev": "rollup --config rollup.config.js -w",
-    "build": "rollup --config rollup.config.js --environment BUILD:production"
+    "build": "rollup --config rollup.config.js --environment BUILD:production",
+    "dev2": "obsidian-plugin dev src/main.ts"
   },
   "keywords": [],
   "author": "Leonard and Ran",
@@ -21,6 +22,7 @@
     "css-loader": "^6.4.0",
     "extract-text-webpack-plugin": "^2.1.2",
     "obsidian": "^0.12.0",
+    "obsidian-plugin-cli": "^0.4.3",
     "rollup": "^2.32.1",
     "style-loader": "^3.3.0",
     "tslib": "^2.2.0",
@@ -32,6 +34,7 @@
     "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"
   }
 }

src/main.ts

@@ -15,7 +15,7 @@ export default class HabiticaSync extends Plugin {
     view: HabiticaSyncView;
 
     async onload() {
-        console.log("正在加载habitica-sync")
+        console.log("load plugin: habitica-sync")
         await this.loadSettings();
         this.addSettingTab(new HabiticaSyncSettingsTab(this.app, this));
         this.registerView(
@@ -33,6 +33,8 @@ export default class HabiticaSync extends Plugin {
                 this.activateView();
             }
         });
+        this.activateView();
+        
     }
     async loadSettings() {
         this.settings = Object.assign(DEFAULT_SETTINGS, await this.loadData())
@@ -40,6 +42,7 @@ export default class HabiticaSync extends Plugin {
     async saveSettings() {
         await this.saveData(this.settings);
     }
+
     async onunload() {
         // await this.view.onClose();
     

src/view.tsx

@@ -31,8 +31,7 @@ export class HabiticaSyncView extends ItemView {
            this.containerEl.children[1]
         )
     }
-
+    async onClose(){      
-    // async onClose(){
+        ReactDOM.unmountComponentAtNode(this.containerEl.children[1]);
-    //     ReactDOM.unmountComponentAtNode(this.containerEl.children[1]);
+    }
-    // }
 }

src/view/App.tsx

@@ -51,12 +51,15 @@ class App extends React.Component<any, any> {
         let cronDate = new Date(lastCron);
         let now = new Date();
         if (cronDate.getDate() != now.getDate() || (cronDate.getMonth() != now.getMonth() || cronDate.getFullYear() != now.getFullYear())) {
+            // return (
+            //     <div className="cron">
+            //         <div id="cronMessage"> Welcome back! Please check your tasks for the last day and hit continue to get your daily rewards. </div>
+            //         <button onClick={this.runCron}>Continue</button>
+            //     </div>
+            // );
             return (
-                <div className="cron">
+                <div className="cron"></div>
-                    <div id="cronMessage"> Welcome back! Please check your tasks for the last day and hit continue to get your daily rewards. </div>
+            )
-                    <button onClick={this.runCron}>Continue</button>
-                </div>
-            );
         }
         else {
             return null

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

@@ -1,11 +1,16 @@
 import Emoji from "react-emoji-render";
 import * as React from "react";
+import ReactMarkdown from "react-markdown";
 
 function DailyItem(props: any) {
     return (
         <div className="todo-item" id={props.id}>
-            <input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed}/>
+            <input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed} />
-            <p><Emoji text={props.daily_text}></Emoji></p>
+            <div>
+                <p><Emoji text={props.daily_text}></Emoji></p>
+                <ReactMarkdown children={props.daily_notes} />
+            </div>
+
         </div>
     )
 }

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

@@ -9,11 +9,11 @@ export default function Index(props: any){
     else {
         const incompleteDailies = props.dailys.map((daily: any) => {
                 if(!daily.completed)
-                    return <DailyItem key={daily.id} id={daily.id}daily_text={daily.text} onChange={props.onChange} completed={daily.completed}/>
+                    return <DailyItem key={daily.id} id={daily.id} daily_text={daily.text} daily_notes={daily.notes} onChange={props.onChange} completed={daily.completed}/>
         })
         const completedDailies = props.dailys.map((daily: any) => {
             if(daily.completed)
-                return <DailyItem key={daily.id} id={daily.id}daily_text={daily.text} onChange={props.onChange} completed={daily.completed}/>
+                return <DailyItem key={daily.id} id={daily.id} daily_text={daily.text} daily_notes={daily.notes} onChange={props.onChange} completed={daily.completed}/>
         })
         const display = <div id="classDisplay">
                             <Tabs>

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

@@ -1,5 +1,6 @@
 import Emoji from "react-emoji-render";
 import * as React from "react";
+import ReactMarkdown from "react-markdown";
 
 function HabitItem(props: any) {
     return (
@@ -10,8 +11,10 @@ function HabitItem(props: any) {
             <button className="habit-minus" id={"mins" + props.id} onClick={props.onChange}>
                 -{props.downCount}
             </button>
-            <p className="habit-text"><Emoji text={props.habit_text}></Emoji></p>
+            <div>
-
+                <p className="habit-text"><Emoji text={props.habit_text}></Emoji></p>
+                <ReactMarkdown children={props.habit_notes} />
+            </div>
         </div>
     )
 }

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

@@ -9,7 +9,7 @@ export default function Index(props: any){
     }
     else {
         const allHabits = props.habits.map((habit: any) => {
-            return <HabitItem key={habit.id} id={habit.id} habit_text={habit.text} upCount={habit.counterUp} downCount={habit.counterDown} onChange={props.onChange}/>
+            return <HabitItem key={habit.id} id={habit.id} habit_text={habit.text} habit_notes={habit.notes} upCount={habit.counterUp} downCount={habit.counterDown} onChange={props.onChange}/>
         })
         const display = <div id="classDisplay">
                             <ul>{allHabits}</ul>

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

@@ -1,11 +1,15 @@
 import Emoji from "react-emoji-render";
 import * as React from "react";
-
+import ReactMarkdown from "react-markdown";
 function RewardItem(props: any) {
     return (
         <div className="reward-item" id={props.id}>
             <button className="reward-click" id={props.id} onClick={props.onChange}>-{props.reward_value}</button>
+            <div>
             <p className="reward-text"><Emoji text={props.reward_text}></Emoji></p>
+            <ReactMarkdown children={props.reward_notes} />
+            </div>
+            
         </div>
     )
 }

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

@@ -9,7 +9,7 @@ export default function Index(props: any){
     }
     else {
         const allRewards = props.rewards.map((reward: any) => {
-            return <RewardItem key={reward.id} id={reward.id} reward_text={reward.text} reward_value={reward.value} onChange={props.onChange}/>
+            return <RewardItem key={reward.id} id={reward.id} reward_text={reward.text} reward_notes={reward.notes} reward_value={reward.value} onChange={props.onChange}/>
         })
         const display = <div id="classDisplay">
                             <ul>{allRewards}</ul>

src/view/Components/Taskview/TodoItem.tsx

@@ -5,7 +5,7 @@ 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><Emoji text = {props.todo_text}></Emoji>
         </div>
     )
 }

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

@@ -1,11 +1,16 @@
 import Emoji from "react-emoji-render";
 import * as React from "react";
+import ReactMarkdown from "react-markdown";
 
 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}/>
-            <p><Emoji text ={props.todo_text}></Emoji></p>
+            {/* <p><Emoji text ={props.todo_text}></Emoji></p> */}
+            <div>
+                <p><Emoji text={props.todo_text}></Emoji></p>
+                <ReactMarkdown children={props.todo_notes} />
+            </div>
         </div>
     )
 }

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

@@ -9,11 +9,11 @@ export default function Index(props: any){
     else {
         const incompleteTodos = props.todos.map((todo: any) => {
                 if(!todo.completed)
-                    return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text} onChange={props.onChange} completed={todo.completed}/>
+                    return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text} todo_notes={todo.notes} onChange={props.onChange} completed={todo.completed}/>
         })
         const completedTodos = props.todos.map((todo: any) => {
             if(todo.completed)
-                return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text} onChange={props.onChange} completed={todo.completed}/>
+                return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text} todo_notes={todo.notes} onChange={props.onChange} completed={todo.completed}/>
         })
         const display = <div id="classDisplay">
                             <Tabs>

styles.css

@@ -1,5 +1,5 @@
 * {
-  margin: 0;
+  /* margin: 0; */
   padding: 0;
 }
 
@@ -49,7 +49,7 @@
 .habit-plus {
   /* background-color: #fff; */
   border: none;
-  color: black;
+  /* color: black; */
   padding: 7px 5px;
   text-align: center;
   text-decoration: none;
@@ -60,7 +60,7 @@
   /* background-color: #fff; */
   /* border-radius: 50%; */
   border: none;
-  color: black;
+  /* color: black; */
   padding: 7px 5px;
   text-align: center;
   text-decoration: none;