diff --git a/ui/component/common/markdown-preview.jsx b/ui/component/common/markdown-preview.jsx index fba66eea5..da487dee5 100644 --- a/ui/component/common/markdown-preview.jsx +++ b/ui/component/common/markdown-preview.jsx @@ -10,7 +10,7 @@ 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 { formatedLinks, inlineLinks } from 'util/remark-lbry'; +import { formattedLinks, inlineLinks } from 'util/remark-lbry'; import { formattedTimestamp, inlineTimestamp } from 'util/remark-timestamp'; import ZoomableImage from 'component/zoomableImage'; import { CHANNEL_STAKED_LEVEL_VIDEO_COMMENTS, SIMPLE_SITE } from 'config'; @@ -133,8 +133,9 @@ function isStakeEnoughForPreview(stakedLevel) { const MarkdownPreview = (props: MarkdownProps) => { const { content, strip, simpleLinks, noDataStore, className, parentCommentId, isMarkdownPost, stakedLevel } = props; + const strippedContent = content - ? content.replace(REPLACE_REGEX, (iframeHtml, y, iframeSrc) => { + ? content.replace(REPLACE_REGEX, (iframeHtml) => { // Let the browser try to create an iframe to see if the markup is valid const outer = document.createElement('div'); outer.innerHTML = iframeHtml; @@ -152,6 +153,10 @@ 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 = { sanitize: schema, fragment: React.Fragment, @@ -192,10 +197,22 @@ const MarkdownPreview = (props: MarkdownProps) => { }; // Strip all content and just render text - if (strip) { + if (strip || stripQuote) { // Remove new lines and extra space remarkOptions.remarkReactComponents.p = SimpleText; - return ( + return stripQuote ? ( + +
+ { + remark() + .use(remarkStrip) + .use(remarkFrontMatter, ['yaml']) + .use(reactRenderer, remarkOptions) + .processSync(content).contents + } +
+
+ ) : ( { remark() @@ -215,7 +232,7 @@ const MarkdownPreview = (props: MarkdownProps) => { .use(remarkAttr, remarkAttrOpts) // Remark plugins for lbry urls // Note: The order is important - .use(formatedLinks) + .use(formattedLinks) .use(inlineLinks) .use(isMarkdownPost ? null : inlineTimestamp) .use(isMarkdownPost ? null : formattedTimestamp) diff --git a/ui/scss/component/_markdown-preview.scss b/ui/scss/component/_markdown-preview.scss index ae39627d0..2af7c40d4 100644 --- a/ui/scss/component/_markdown-preview.scss +++ b/ui/scss/component/_markdown-preview.scss @@ -1,4 +1,6 @@ .markdown-preview { + word-break: break-all; + > :first-child { margin-top: 0; } diff --git a/ui/util/remark-lbry.js b/ui/util/remark-lbry.js index ad0ea9145..7f3d9460e 100644 --- a/ui/util/remark-lbry.js +++ b/ui/util/remark-lbry.js @@ -149,7 +149,7 @@ const transform = (tree) => { visit(tree, ['link'], visitor); }; -export const formatedLinks = () => transform; +export const formattedLinks = () => transform; // Main module export function inlineLinks() {