LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Chat/comment markdown and style fixes #7193

Closed
saltrafael wants to merge 6 commits from chat-markdown into master
pull from: chat-markdown
merge into: LBRYCommunity:master
Conversation 2 Commits 6 Files changed 8 +25 -6
3 changed files with 25 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit bf6d42dee8 - Show all commits

27
ui/component/common/markdown-preview.jsx
View file

@ -10,7 +10,7 @@ import remarkFrontMatter from 'remark-frontmatter';
import reactRenderer from 'remark-react';
import MarkdownLink from 'component/markdownLink';
import defaultSchema from 'hast-util-sanitize/lib/github.json';
import { formatedLinks, inlineLinks } from 'util/remark-lbry';
import { formattedLinks, inlineLinks } from 'util/remark-lbry';
import { formattedTimestamp, inlineTimestamp } from 'util/remark-timestamp';
infinite-persistence commented 2021-10-11 17:50:36 +02:00 (Migrated from github.com)
Review
Copy link

Dash parsing in channel name broken

I think this issue came from changes in Channel Mention. Can fix together if possible:

In a post,

----
Playlist:
<iframe id="lbry-iframe" width="560" height="315" src="https://lbry.tv/$/embed/Wrestling/e9a586dcf13c5fe8f30692c6b39d1c8e9323ea69?r=4bWsJBCcfyXoHwYBHEXV61pTrf3RW5Fe" allowfullscreen></iframe>

<iframe src="lbry://@ip-test-2#c/Wrestling#e"></iframe>

<iframe id="lbry-iframe" width="560" height="315" src="lbry://@ip-test-2#c/Wrestling#e" allowfullscreen></iframe>
----

yields:
image

The commit before Channel Mention yields (the correct version):
image

## Dash parsing in channel name broken I think this issue came from changes in Channel Mention. Can fix together if possible: In a post, ``` ---- Playlist: <iframe id="lbry-iframe" width="560" height="315" src="https://lbry.tv/$/embed/Wrestling/e9a586dcf13c5fe8f30692c6b39d1c8e9323ea69?r=4bWsJBCcfyXoHwYBHEXV61pTrf3RW5Fe" allowfullscreen></iframe> <iframe src="lbry://@ip-test-2#c/Wrestling#e"></iframe> <iframe id="lbry-iframe" width="560" height="315" src="lbry://@ip-test-2#c/Wrestling#e" allowfullscreen></iframe> ---- ``` yields: ![image](https://user-images.githubusercontent.com/64950861/136819141-830232df-31d2-464c-82c7-30c7b795add5.png) The commit before Channel Mention yields (the correct version): ![image](https://user-images.githubusercontent.com/64950861/136819409-1d3c06c9-a927-4e7f-8bc6-7a1ac5a9d81d.png)
import ZoomableImage from 'component/zoomableImage';
infinite-persistence commented 2021-10-11 17:54:20 +02:00 (Migrated from github.com)
Review
Copy link

Some embeds not showing

The picture on the left is before the Channel Mention commit. The picture on the right is this PR.

image

The markdown is:

----
Video 1:
<iframe src="lbry://@Tasteshow#9/the-crispiest-chicken-wings-recipe-with#9"></iframe>
----
## Some embeds not showing The picture on the left is before the Channel Mention commit. The picture on the right is this PR. ![image](https://user-images.githubusercontent.com/64950861/136819818-d82f98c8-50a4-4e5c-86eb-3e0fe3376767.png) The markdown is: ``` ---- Video 1: <iframe src="lbry://@Tasteshow#9/the-crispiest-chicken-wings-recipe-with#9"></iframe> ---- ```
import { CHANNEL_STAKED_LEVEL_VIDEO_COMMENTS, SIMPLE_SITE } from 'config';
infinite-persistence commented 2021-10-11 18:08:37 +02:00 (Migrated from github.com)
Review
Copy link

#5845 says "don't allow embeds on livestreams", but with a level 5 account, I was able to.

image

#5845 says "don't allow embeds on livestreams", but with a level 5 account, I was able to. ![image](https://user-images.githubusercontent.com/64950861/136821799-5d0ef4f4-7804-4a94-a991-0e996560d1bd.png)
infinite-persistence commented 2021-10-11 18:34:51 +02:00 (Migrated from github.com)
Review
Copy link

Same goes for images. I thought we were supposed to disable them in favor of stickers (I could be wrong)

image

Same goes for images. I thought we were supposed to disable them in favor of stickers (I could be wrong) ![image](https://user-images.githubusercontent.com/64950861/136824947-24f39aac-e43c-402b-9883-e0e657729320.png)
saltrafael commented 2021-10-12 14:59:51 +02:00 (Migrated from github.com)
Review
Copy link

yeah those will be disabled along with the stickers, so it's okay for now

yeah those will be disabled along with the stickers, so it's okay for now
@ -133,8 +133,9 @@ function isStakeEnoughForPreview(stakedLevel) {
const MarkdownPreview = (props: MarkdownProps) => {
const { content, strip, simpleLinks, noDataStore, className, parentCommentId, isMarkdownPost, stakedLevel } = props;
const strippedContent = content
? content.replace(REPLACE_REGEX, (iframeHtml, y, iframeSrc) => {
? content.replace(REPLACE_REGEX, (iframeHtml) => {
// Let the browser try to create an iframe to see if the markup is valid
const outer = document.createElement('div');
outer.innerHTML = iframeHtml;
@ -152,6 +153,10 @@ const MarkdownPreview = (props: MarkdownProps) => {
})
: '';
const initialQuote = strippedContent.split(' ').find((word) => word.length > 0 || word.charAt(0) === '>');
let stripQuote;
if (initialQuote && initialQuote.charAt(0) === '>') stripQuote = true;
const remarkOptions: Object = {
sanitize: schema,
fragment: React.Fragment,
@ -192,10 +197,22 @@ const MarkdownPreview = (props: MarkdownProps) => {
};
// Strip all content and just render text
if (strip) {
if (strip || stripQuote) {
// Remove new lines and extra space
remarkOptions.remarkReactComponents.p = SimpleText;
return (
return stripQuote ? (
<span dir="auto" className="markdown-preview">
<blockquote>
{
remark()
.use(remarkStrip)
.use(remarkFrontMatter, ['yaml'])
.use(reactRenderer, remarkOptions)
.processSync(content).contents
}
</blockquote>
</span>
) : (
<span dir="auto" className="markdown-preview">
{
remark()
@ -215,7 +232,7 @@ const MarkdownPreview = (props: MarkdownProps) => {
.use(remarkAttr, remarkAttrOpts)
// Remark plugins for lbry urls
// Note: The order is important
.use(formatedLinks)
.use(formattedLinks)
.use(inlineLinks)
.use(isMarkdownPost ? null : inlineTimestamp)
.use(isMarkdownPost ? null : formattedTimestamp)

2
ui/scss/component/_markdown-preview.scss
View file

@ -1,4 +1,6 @@
.markdown-preview {
word-break: break-all;
> :first-child {
margin-top: 0;
}

2
ui/util/remark-lbry.js
View file

@ -149,7 +149,7 @@ const transform = (tree) => {
visit(tree, ['link'], visitor);
};
export const formatedLinks = () => transform;
export const formattedLinks = () => transform;
// Main module
export function inlineLinks() {