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:
parent
adaee548e2
commit
02d2962004
2 changed files with 11 additions and 8 deletions
|
@ -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);
|
||||
},
|
||||
}}
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
|
|
Loading…
Reference in a new issue