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,
hideIcons: ['heading', 'image', 'fullscreen', 'side-by-side'],
previewRender(plainText) {
const preview = <MarkdownPreview content={plainText} isStubEmbed />;
const preview = <MarkdownPreview content={plainText} noDataStore />;
return ReactDOMServer.renderToString(preview);
},
}}

View file

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