MarkdownPreview: Replace 'lbry://' link with a stub when previewing an edit.

## Issue
4797: Markdown preview breaks when using a lbry link in angle brackets

This is similar to the Embed case in commit dbcd677e.

## Change
Replaced it with a dummy link that looks like what the final outcome would be, but would not be clickable.

Again, similar to the embed case, unless there is a way to pass the store over, I don't have an alternative that makes sense: Adding a dummy router or replacing it as a regular <a> will just make React spew security errors.

Not being able to click it is not ideal as we (as a user) can't verify our links, but it's better than the current case of not rendering anything at all.
This commit is contained in:
infiinte-persistence 2020-09-29 11:46:18 +08:00 committed by Sean Yesmunt
parent adaee548e2
commit 02d2962004
2 changed files with 11 additions and 8 deletions

View file

@ -182,7 +182,7 @@ export class FormField extends React.PureComponent<Props> {
spellChecker: true, spellChecker: true,
hideIcons: ['heading', 'image', 'fullscreen', 'side-by-side'], hideIcons: ['heading', 'image', 'fullscreen', 'side-by-side'],
previewRender(plainText) { previewRender(plainText) {
const preview = <MarkdownPreview content={plainText} isStubEmbed />; const preview = <MarkdownPreview content={plainText} noDataStore />;
return ReactDOMServer.renderToString(preview); return ReactDOMServer.renderToString(preview);
}, },
}} }}

View file

@ -21,14 +21,14 @@ type SimpleLinkProps = {
href?: string, href?: string,
title?: string, title?: string,
children?: React.Node, children?: React.Node,
isStubEmbed?: boolean, noDataStore?: boolean,
}; };
type MarkdownProps = { type MarkdownProps = {
strip?: boolean, strip?: boolean,
content: ?string, content: ?string,
promptLinks?: boolean, promptLinks?: boolean,
isStubEmbed?: boolean, noDataStore?: boolean,
}; };
const SimpleText = (props: SimpleTextProps) => { const SimpleText = (props: SimpleTextProps) => {
@ -37,7 +37,7 @@ const SimpleText = (props: SimpleTextProps) => {
const SimpleLink = (props: SimpleLinkProps) => { const SimpleLink = (props: SimpleLinkProps) => {
const { title, children } = props; const { title, children } = props;
const { href, isStubEmbed } = props; const { href, noDataStore } = props;
if (!href) { if (!href) {
return children || null; return children || null;
@ -58,7 +58,7 @@ const SimpleLink = (props: SimpleLinkProps) => {
if (embed) { if (embed) {
// Decode this since users might just copy it from the url bar // Decode this since users might just copy it from the url bar
const decodedUri = decodeURI(uri); const decodedUri = decodeURI(uri);
return isStubEmbed ? ( return noDataStore ? (
<div className="embed__inline-button-preview"> <div className="embed__inline-button-preview">
<pre>{decodedUri}</pre> <pre>{decodedUri}</pre>
</div> </div>
@ -71,7 +71,10 @@ const SimpleLink = (props: SimpleLinkProps) => {
// using Link after formatLbryUrl to handle "/" vs "#/" // using Link after formatLbryUrl to handle "/" vs "#/"
// for web and desktop scenarios respectively // for web and desktop scenarios respectively
return ( return noDataStore ? (
// Dummy link (no 'href')
<a title={title}>{children}</a>
) : (
<Link <Link
title={title} title={title}
to={webLink} to={webLink}
@ -94,7 +97,7 @@ schema.attributes.a.push('embed');
const REPLACE_REGEX = /(<iframe\s+src=["'])(.*?(?=))(["']\s*><\/iframe>)/g; const REPLACE_REGEX = /(<iframe\s+src=["'])(.*?(?=))(["']\s*><\/iframe>)/g;
const MarkdownPreview = (props: MarkdownProps) => { const MarkdownPreview = (props: MarkdownProps) => {
const { content, strip, promptLinks, isStubEmbed } = props; const { content, strip, promptLinks, noDataStore } = props;
const strippedContent = content const strippedContent = content
? content.replace(REPLACE_REGEX, (iframeHtml, y, iframeSrc) => { ? content.replace(REPLACE_REGEX, (iframeHtml, y, iframeSrc) => {
// Let the browser try to create an iframe to see if the markup is valid // Let the browser try to create an iframe to see if the markup is valid
@ -118,7 +121,7 @@ const MarkdownPreview = (props: MarkdownProps) => {
sanitize: schema, sanitize: schema,
fragment: React.Fragment, fragment: React.Fragment,
remarkReactComponents: { remarkReactComponents: {
a: promptLinks ? ExternalLink : linkProps => <SimpleLink {...linkProps} isStubEmbed={isStubEmbed} />, a: promptLinks ? ExternalLink : linkProps => <SimpleLink {...linkProps} noDataStore={noDataStore} />,
// Workaraund of remarkOptions.Fragment // Workaraund of remarkOptions.Fragment
div: React.Fragment, div: React.Fragment,
}, },