add markdown render
This commit is contained in:
kkzzhizhou
parent
9b15bb1236
commit
e45182547f
14 changed files with 53 additions and 28 deletions
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
||||
|
|
|
|||
|
|
@ -31,8 +31,7 @@ export class HabiticaSyncView extends ItemView {
|
|||
this.containerEl.children[1]
|
||||
)
|
||||
}
|
||||
|
||||
// async onClose(){
|
||||
// ReactDOM.unmountComponentAtNode(this.containerEl.children[1]);
|
||||
// }
|
||||
async onClose(){
|
||||
ReactDOM.unmountComponentAtNode(this.containerEl.children[1]);
|
||||
}
|
||||
}
|
||||
|
|
@ -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 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>
|
||||
);
|
||||
<div className="cron"></div>
|
||||
)
|
||||
}
|
||||
else {
|
||||
return null
|
||||
|
|
|
|||
|
|
@ -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} />
|
||||
<div>
|
||||
<p><Emoji text={props.daily_text}></Emoji></p>
|
||||
<ReactMarkdown children={props.daily_notes} />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<div>
|
||||
<p className="habit-text"><Emoji text={props.habit_text}></Emoji></p>
|
||||
|
||||
<ReactMarkdown children={props.habit_notes} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue