From 44625aeb27dc76a5d118da4b47d4805d43d19bda Mon Sep 17 00:00:00 2001 From: Dessalines Date: Sat, 30 Mar 2019 00:11:44 -0700 Subject: [PATCH] Adding markdown to content fields - Fixes #7 --- README.md | 1 + ui/package.json | 1 + ui/src/components/post.tsx | 4 ++-- ui/src/main.css | 4 ++++ ui/src/utils.ts | 11 ++++++++++ ui/yarn.lock | 45 ++++++++++++++++++++++++++++++++++++++ 6 files changed, 64 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index f3f111d05..483a9927b 100644 --- a/README.md +++ b/README.md @@ -34,6 +34,7 @@ We have a twitter alternative (mastodon), a facebook alternative (friendica), so - [Mastodan public key server example](https://blog.joinmastodon.org/2018/06/how-to-implement-a-basic-activitypub-server/) - [Recursive query for adjacency list for nested comments](https://stackoverflow.com/questions/192220/what-is-the-most-efficient-elegant-way-to-parse-a-flat-table-into-a-tree/192462#192462) - https://github.com/sparksuite/simplemde-markdown-editor +- [Markdown-it](https://github.com/markdown-it/markdown-it) - [Sticky Sidebar](https://stackoverflow.com/questions/38382043/how-to-use-css-position-sticky-to-keep-a-sidebar-visible-with-bootstrap-4/49111934) - [RXJS websocket](https://stackoverflow.com/questions/44060315/reconnecting-a-websocket-in-angular-and-rxjs/44067972#44067972) - [Rust JWT](https://github.com/Keats/jsonwebtoken) diff --git a/ui/package.json b/ui/package.json index 0d30805d0..11730017d 100644 --- a/ui/package.json +++ b/ui/package.json @@ -22,6 +22,7 @@ "inferno-router": "^7.0.1", "js-cookie": "^2.2.0", "jwt-decode": "^2.2.0", + "markdown-it": "^8.4.2", "moment": "^2.24.0", "rxjs": "^6.4.0" }, diff --git a/ui/src/components/post.tsx b/ui/src/components/post.tsx index feb815e57..1d9412fcc 100644 --- a/ui/src/components/post.tsx +++ b/ui/src/components/post.tsx @@ -3,7 +3,7 @@ import { Subscription } from "rxjs"; import { retryWhen, delay, take } from 'rxjs/operators'; import { UserOperation, Community, Post as PostI, PostResponse, Comment, CommentForm as CommentFormI, CommentResponse, CommentLikeForm, CreateCommentLikeResponse, CommentSortType } from '../interfaces'; import { WebSocketService, UserService } from '../services'; -import { msgOp, hotRank } from '../utils'; +import { msgOp, hotRank,mdToHtml } from '../utils'; import { MomentTime } from './moment-time'; interface CommentNodeI { @@ -304,7 +304,7 @@ export class CommentNode extends Component { {this.state.showEdit && } {!this.state.showEdit &&
-

{node.comment.content}

+
  • reply diff --git a/ui/src/main.css b/ui/src/main.css index 089a53b89..3e0dd44a7 100644 --- a/ui/src/main.css +++ b/ui/src/main.css @@ -23,3 +23,7 @@ body { color: #fff; background-color: var(--secondary); } + +.md-div p { + margin-bottom: 0px; +} diff --git a/ui/src/utils.ts b/ui/src/utils.ts index 1d490a303..64c826824 100644 --- a/ui/src/utils.ts +++ b/ui/src/utils.ts @@ -1,4 +1,5 @@ import { UserOperation, Comment } from './interfaces'; +import * as markdown_it from 'markdown-it'; export let repoUrl = 'https://github.com/dessalines/rust-reddit-fediverse'; export let wsUri = (window.location.protocol=='https:'&&'wss://'||'ws://')+window.location.host + '/service/ws/'; @@ -8,6 +9,12 @@ export function msgOp(msg: any): UserOperation { return UserOperation[opStr]; } +var md = new markdown_it({ + html: true, + linkify: true, + typographer: true +}); + export function hotRank(comment: Comment): number { // Rank = ScaleFactor * sign(Score) * log(1 + abs(Score)) / (Time + 2)^Gravity @@ -21,3 +28,7 @@ export function hotRank(comment: Comment): number { return rank; } + +export function mdToHtml(text: string) { + return {__html: md.render(text)}; +} diff --git a/ui/yarn.lock b/ui/yarn.lock index ff82991bb..7accf57b7 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -115,6 +115,13 @@ are-we-there-yet@~1.1.2: delegates "^1.0.0" readable-stream "^2.0.6" +argparse@^1.0.7: + version "1.0.10" + resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911" + integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg== + dependencies: + sprintf-js "~1.0.2" + arr-diff@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf" @@ -599,6 +606,11 @@ encodeurl@~1.0.2: resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59" integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k= +entities@~1.1.1: + version "1.1.2" + resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56" + integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w== + error-ex@^1.2.0: version "1.3.2" resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf" @@ -1564,6 +1576,13 @@ levn@~0.3.0: prelude-ls "~1.1.2" type-check "~0.3.2" +linkify-it@^2.0.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.1.0.tgz#c4caf38a6cd7ac2212ef3c7d2bde30a91561f9db" + integrity sha512-4REs8/062kV2DSHxNfq5183zrqXMl7WP0WzABH9IeJI+NLm429FgE1PDecltYfnOoFDFlZGh2T8PfZn0r+GTRg== + dependencies: + uc.micro "^1.0.1" + load-json-file@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-2.0.0.tgz#7947e42149af80d696cbf797bcaabcfe1fe29ca8" @@ -1614,11 +1633,27 @@ map-visit@^1.0.0: dependencies: object-visit "^1.0.0" +markdown-it@^8.4.2: + version "8.4.2" + resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-8.4.2.tgz#386f98998dc15a37722aa7722084f4020bdd9b54" + integrity sha512-GcRz3AWTqSUphY3vsUqQSFMbgR38a4Lh3GWlHRh/7MRwz8mcu9n2IO7HOh+bXHrR9kOPDl5RNCaEsrneb+xhHQ== + dependencies: + argparse "^1.0.7" + entities "~1.1.1" + linkify-it "^2.0.0" + mdurl "^1.0.1" + uc.micro "^1.0.5" + math-random@^1.0.1: version "1.0.4" resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.4.tgz#5dd6943c938548267016d4e34f057583080c514c" integrity sha512-rUxjysqif/BZQH2yhd5Aaq7vXMSx9NdEsQcyA07uEzIvxgI7zIr33gGsh+RU0/XjmQpCW7RsVof1vlkvQVCK5A== +mdurl@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e" + integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4= + media-typer@0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748" @@ -2673,6 +2708,11 @@ split-string@^3.0.1, split-string@^3.0.2: dependencies: extend-shallow "^3.0.0" +sprintf-js@~1.0.2: + version "1.0.3" + resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c" + integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw= + sshpk@^1.7.0: version "1.16.1" resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.16.1.tgz#fb661c0bef29b39db40769ee39fa70093d6f6877" @@ -2888,6 +2928,11 @@ typescript@^3.3.3333: resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.3.3333.tgz#171b2c5af66c59e9431199117a3bcadc66fdcfd6" integrity sha512-JjSKsAfuHBE/fB2oZ8NxtRTk5iGcg6hkYXMnZ3Wc+b2RSqejEqTaem11mHASMnFilHrax3sLK0GDzcJrekZYLw== +uc.micro@^1.0.1, uc.micro@^1.0.5: + version "1.0.6" + resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac" + integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA== + uglify-es@^3.3.9: version "3.3.9" resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677"