mirror of
https://github.com/LBRYFoundation/lbry-desktop.git
synced 2025-08-23 17:47:24 +00:00
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,
|
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);
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
|
|
|
@ -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,
|
||||||
},
|
},
|
||||||
|
|
Loading…
Add table
Reference in a new issue