From 88fdde519dbaae4f7e919d6b4fbd07776deea20a Mon Sep 17 00:00:00 2001 From: SuperChamp234 Date: Fri, 14 Jan 2022 14:39:21 +0530 Subject: [PATCH] Added a wrapper Markdown Rendered to render BOTH Emojis and Mardown as HTML --- package.json | 11 ++++++++++- rollup.config.js | 2 ++ src/main.ts | 3 +-- src/view/App.tsx | 1 + .../Taskview/Dailiesview/DailyItem.tsx | 9 +++++---- .../Taskview/Dailiesview/DailySubTasks.tsx | 6 ++++-- .../Taskview/Habitsview/HabitItem.tsx | 9 +++++---- .../Taskview/Rewardview/RewardItem.tsx | 10 ++++++---- src/view/Components/Taskview/TodoItem.tsx | 13 ------------- .../Components/Taskview/Todoview/TodoItem.tsx | 10 +++++----- .../Taskview/Todoview/TodoSubTasks.tsx | 5 +++-- src/view/Components/Taskview/Todoview/index.tsx | 2 +- src/view/Components/Taskview/Todoview/tabs.ts | 1 - src/view/Components/Taskview/index.tsx | 2 +- src/view/Components/Taskview/markdownRender.ts | 17 +++++++++++++++++ styles.css | 4 +++- tsconfig.json | 1 + 17 files changed, 65 insertions(+), 41 deletions(-) delete mode 100644 src/view/Components/Taskview/TodoItem.tsx delete mode 100644 src/view/Components/Taskview/Todoview/tabs.ts create mode 100644 src/view/Components/Taskview/markdownRender.ts diff --git a/package.json b/package.json index 174f5f6..7dbcea4 100644 --- a/package.json +++ b/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" } } diff --git a/rollup.config.js b/rollup.config.js index 8e28e8d..6da9767 100644 --- a/rollup.config.js +++ b/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(), ] }; \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index 5b370f7..5677142 100644 --- a/src/main.ts +++ b/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() { diff --git a/src/view/App.tsx b/src/view/App.tsx index 2f0abc5..149304c 100644 --- a/src/view/App.tsx +++ b/src/view/App.tsx @@ -83,6 +83,7 @@ class App extends React.Component { new Notice('Login Failed, Please check credentials and try again!'); } else { + console.log(result); this.setState({ isLoaded: true, user_data: result, diff --git a/src/view/Components/Taskview/Dailiesview/DailyItem.tsx b/src/view/Components/Taskview/Dailiesview/DailyItem.tsx index d5b2a93..a59d02c 100644 --- a/src/view/Components/Taskview/Dailiesview/DailyItem.tsx +++ b/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 (
-

- +

+
{console.log(props.checklist)}
diff --git a/src/view/Components/Taskview/Dailiesview/DailySubTasks.tsx b/src/view/Components/Taskview/Dailiesview/DailySubTasks.tsx index 63d97d2..cd30f13 100644 --- a/src/view/Components/Taskview/Dailiesview/DailySubTasks.tsx +++ b/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 (
-

+

) }); diff --git a/src/view/Components/Taskview/Habitsview/HabitItem.tsx b/src/view/Components/Taskview/Habitsview/HabitItem.tsx index 557adf6..37d672c 100644 --- a/src/view/Components/Taskview/Habitsview/HabitItem.tsx +++ b/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 (
@@ -14,8 +15,8 @@ function HabitItem(props: any) {
-

- +

+
) diff --git a/src/view/Components/Taskview/Rewardview/RewardItem.tsx b/src/view/Components/Taskview/Rewardview/RewardItem.tsx index 983c909..5f331e2 100644 --- a/src/view/Components/Taskview/Rewardview/RewardItem.tsx +++ b/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 (
-

- +

+
diff --git a/src/view/Components/Taskview/TodoItem.tsx b/src/view/Components/Taskview/TodoItem.tsx deleted file mode 100644 index 586fdc9..0000000 --- a/src/view/Components/Taskview/TodoItem.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { Emoji } from 'react-emoji-render'; -import * as React from "react"; - -function TodoItem(props: any) { - return ( -
- - -
- ) -} - -export default TodoItem \ No newline at end of file diff --git a/src/view/Components/Taskview/Todoview/TodoItem.tsx b/src/view/Components/Taskview/Todoview/TodoItem.tsx index 4c31505..0843657 100644 --- a/src/view/Components/Taskview/Todoview/TodoItem.tsx +++ b/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 (
- {/*

*/}
-

- +

+
diff --git a/src/view/Components/Taskview/Todoview/TodoSubTasks.tsx b/src/view/Components/Taskview/Todoview/TodoSubTasks.tsx index 79c7161..ef74d92 100644 --- a/src/view/Components/Taskview/Todoview/TodoSubTasks.tsx +++ b/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 (
-

+

) }); diff --git a/src/view/Components/Taskview/Todoview/index.tsx b/src/view/Components/Taskview/Todoview/index.tsx index 8c1f236..682e2ef 100644 --- a/src/view/Components/Taskview/Todoview/index.tsx +++ b/src/view/Components/Taskview/Todoview/index.tsx @@ -20,7 +20,7 @@ export default function Index(props: any){ todo_subtasks = todo.checklist; } return } diff --git a/src/view/Components/Taskview/Todoview/tabs.ts b/src/view/Components/Taskview/Todoview/tabs.ts deleted file mode 100644 index 55153e7..0000000 --- a/src/view/Components/Taskview/Todoview/tabs.ts +++ /dev/null @@ -1 +0,0 @@ -import * as React from "react" diff --git a/src/view/Components/Taskview/index.tsx b/src/view/Components/Taskview/index.tsx index 7001ac9..58f95fb 100644 --- a/src/view/Components/Taskview/index.tsx +++ b/src/view/Components/Taskview/index.tsx @@ -38,5 +38,5 @@ export default function Index(props: any){
return(display); -} //yes +} diff --git a/src/view/Components/Taskview/markdownRender.ts b/src/view/Components/Taskview/markdownRender.ts new file mode 100644 index 0000000..9e95a59 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/styles.css b/styles.css index eef70b1..118caa0 100644 --- a/styles.css +++ b/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; +} \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 48f3cf9..95b95d2 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,6 +9,7 @@ "noImplicitAny": true, "moduleResolution": "node", "importHelpers": true, + "allowSyntheticDefaultImports": true, "lib": [ "dom", "es5",