PolyPaw/habitica-sync
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

11
package.json
View file

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

2
rollup.config.js
View file

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

3
src/main.ts
View file

@ -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() {

1
src/view/App.tsx
View file

@ -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,

9
src/view/Components/Taskview/Dailiesview/DailyItem.tsx
View file

@ -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>
<ReactMarkdown className="description" children={props.daily_notes} />
<p><span dangerouslySetInnerHTML={{__html: text_html}}></span></p>
<div className="description" dangerouslySetInnerHTML={{__html: note_html}}></div>
{console.log(props.checklist)}
<DailySubTasks subtasks={props.daily_subtasks} onChange={props.onChange}></DailySubTasks>
</div>

6
src/view/Components/Taskview/Dailiesview/DailySubTasks.tsx
View file

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

9
src/view/Components/Taskview/Habitsview/HabitItem.tsx
View file

@ -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>
<ReactMarkdown className="description" children={props.habit_notes} />
<p className="habit-text"><span dangerouslySetInnerHTML={{__html: habit_text}}></span></p>
<div className="description" dangerouslySetInnerHTML={{__html: habit_notes}}></div>
</div>
</div>
)

10
src/view/Components/Taskview/Rewardview/RewardItem.tsx
View file

@ -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>
<ReactMarkdown className="description" children={props.reward_notes} />
<p className="habit-text"><span dangerouslySetInnerHTML={{__html: reward_text}}></span></p>
<div className="description" dangerouslySetInnerHTML={{__html: reward_notes}}></div>
</div>
</div>

13
src/view/Components/Taskview/TodoItem.tsx
View file

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

10
src/view/Components/Taskview/Todoview/TodoItem.tsx
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>

5
src/view/Components/Taskview/Todoview/TodoSubTasks.tsx
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>
)
});

2
src/view/Components/Taskview/Todoview/index.tsx
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}/>
}

1
src/view/Components/Taskview/Todoview/tabs.ts
View file

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

2
src/view/Components/Taskview/index.tsx
View file

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

17
src/view/Components/Taskview/markdownRender.ts Normal file
View file

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

4
styles.css
View file

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

1
tsconfig.json
View file

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