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

[Markdown] Fixes Quote and Fixes Images not showing (#242)

Browse source 
* Refactor and fix blockquote filling the full message content

* Fix images not showing on markdown
This commit is contained in:
saltrafael 2021-11-08 11:08:22 -03:00 committed by GitHub
parent d7ada7904b
commit 9138e508c6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 22 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,23 +1,23 @@
// @flow // @flow
import * as React from 'react'; import { CHANNEL_STAKED_LEVEL_VIDEO_COMMENTS, SIMPLE_SITE } from 'config';
import classnames from 'classnames'; import { formattedEmote, inlineEmote } from 'util/remark-emote';
import remark from 'remark';
import remarkAttr from 'remark-attr';
import remarkStrip from 'strip-markdown';
import remarkEmoji from 'remark-emoji';
import remarkBreaks from 'remark-breaks';
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 { formattedLinks, inlineLinks } from 'util/remark-lbry'; import { formattedLinks, inlineLinks } from 'util/remark-lbry';
import { formattedTimestamp, inlineTimestamp } from 'util/remark-timestamp'; import { formattedTimestamp, inlineTimestamp } from 'util/remark-timestamp';
import { formattedEmote, inlineEmote } from 'util/remark-emote';
import ZoomableImage from 'component/zoomableImage';
import { CHANNEL_STAKED_LEVEL_VIDEO_COMMENTS, SIMPLE_SITE } from 'config';
import Button from 'component/button';
import * as ICONS from 'constants/icons'; import * as ICONS from 'constants/icons';
import * as React from 'react';
import Button from 'component/button';
import classnames from 'classnames';
import defaultSchema from 'hast-util-sanitize/lib/github.json';
import MarkdownLink from 'component/markdownLink';
import OptimizedImage from 'component/optimizedImage'; import OptimizedImage from 'component/optimizedImage';
import reactRenderer from 'remark-react';
import remark from 'remark';
import remarkAttr from 'remark-attr';
import remarkBreaks from 'remark-breaks';
import remarkEmoji from 'remark-emoji';
import remarkFrontMatter from 'remark-frontmatter';
import remarkStrip from 'strip-markdown';
import ZoomableImage from 'component/zoomableImage';
const RE_EMOTE = /:\+1:|:-1:|:[\w-]+:/; const RE_EMOTE = /:\+1:|:-1:|:[\w-]+:/;
@ -25,6 +25,10 @@ function isEmote(title, src) {
return title && RE_EMOTE.test(title) && src.includes('static.odycdn.com/emoticons'); return title && RE_EMOTE.test(title) && src.includes('static.odycdn.com/emoticons');
} }
function isStakeEnoughForPreview(stakedLevel) {
return !stakedLevel || stakedLevel >= CHANNEL_STAKED_LEVEL_VIDEO_COMMENTS;
}
type SimpleTextProps = { type SimpleTextProps = {
children?: React.Node, children?: React.Node,
}; };
@ -138,13 +142,6 @@ const REPLACE_REGEX = /(<iframe\s+src=["'])(.*?(?=))(["']\s*><\/iframe>)/g;
// **************************************************************************** // ****************************************************************************
// **************************************************************************** // ****************************************************************************
function isStakeEnoughForPreview(stakedLevel) {
return !stakedLevel || stakedLevel >= CHANNEL_STAKED_LEVEL_VIDEO_COMMENTS;
}
// ****************************************************************************
// ****************************************************************************
const MarkdownPreview = (props: MarkdownProps) => { const MarkdownPreview = (props: MarkdownProps) => {
const { const {
content, content,
@ -177,10 +174,6 @@ 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 = { const remarkOptions: Object = {
sanitize: schema, sanitize: schema,
fragment: React.Fragment, fragment: React.Fragment,
@ -200,7 +193,7 @@ const MarkdownPreview = (props: MarkdownProps) => {
div: React.Fragment, div: React.Fragment,
img: (imgProps) => img: (imgProps) =>
isStakeEnoughForPreview(stakedLevel) && !isEmote(imgProps.title, imgProps.src) ? ( isStakeEnoughForPreview(stakedLevel) && !isEmote(imgProps.title, imgProps.src) ? (
ZoomableImage <ZoomableImage {...imgProps} />
) : ( ) : (
<SimpleImageLink <SimpleImageLink
src={imgProps.src} src={imgProps.src}
@ -222,22 +215,10 @@ const MarkdownPreview = (props: MarkdownProps) => {
}; };
// Strip all content and just render text // Strip all content and just render text
if (strip || stripQuote) { if (strip) {
// Remove new lines and extra space // Remove new lines and extra space
remarkOptions.remarkReactComponents.p = SimpleText; remarkOptions.remarkReactComponents.p = SimpleText;
return stripQuote ? ( return (
<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"> <span dir="auto" className="markdown-preview">
{ {
remark() remark()