Fix nested indents in Live Chat

This commit is contained in:
saltrafael 2021-10-08 10:11:59 -03:00
parent b4f3e40a0b
commit bf6d42dee8
No known key found for this signature in database
GPG key ID: 85B63D36CBFAB1E5
3 changed files with 25 additions and 6 deletions

View file

@ -10,7 +10,7 @@ import remarkFrontMatter from 'remark-frontmatter';
import reactRenderer from 'remark-react'; import reactRenderer from 'remark-react';
import MarkdownLink from 'component/markdownLink'; import MarkdownLink from 'component/markdownLink';
import defaultSchema from 'hast-util-sanitize/lib/github.json'; 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 { formattedTimestamp, inlineTimestamp } from 'util/remark-timestamp';
import ZoomableImage from 'component/zoomableImage'; import ZoomableImage from 'component/zoomableImage';
import { CHANNEL_STAKED_LEVEL_VIDEO_COMMENTS, SIMPLE_SITE } from 'config'; import { CHANNEL_STAKED_LEVEL_VIDEO_COMMENTS, SIMPLE_SITE } from 'config';
@ -133,8 +133,9 @@ function isStakeEnoughForPreview(stakedLevel) {
const MarkdownPreview = (props: MarkdownProps) => { const MarkdownPreview = (props: MarkdownProps) => {
const { content, strip, simpleLinks, noDataStore, className, parentCommentId, isMarkdownPost, stakedLevel } = props; const { content, strip, simpleLinks, noDataStore, className, parentCommentId, isMarkdownPost, stakedLevel } = props;
const strippedContent = content 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 // Let the browser try to create an iframe to see if the markup is valid
const outer = document.createElement('div'); const outer = document.createElement('div');
outer.innerHTML = iframeHtml; 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 = { const remarkOptions: Object = {
sanitize: schema, sanitize: schema,
fragment: React.Fragment, fragment: React.Fragment,
@ -192,10 +197,22 @@ const MarkdownPreview = (props: MarkdownProps) => {
}; };
// Strip all content and just render text // Strip all content and just render text
if (strip) { if (strip || stripQuote) {
// Remove new lines and extra space // Remove new lines and extra space
remarkOptions.remarkReactComponents.p = SimpleText; remarkOptions.remarkReactComponents.p = SimpleText;
return ( return stripQuote ? (
<span dir="auto" className="markdown-preview">
<blockquote>
{
remark()
.use(remarkStrip)
.use(remarkFrontMatter, ['yaml'])
.use(reactRenderer, remarkOptions)
.processSync(content).contents
}
</blockquote>
</span>
) : (
<span dir="auto" className="markdown-preview"> <span dir="auto" className="markdown-preview">
{ {
remark() remark()
@ -215,7 +232,7 @@ const MarkdownPreview = (props: MarkdownProps) => {
.use(remarkAttr, remarkAttrOpts) .use(remarkAttr, remarkAttrOpts)
// Remark plugins for lbry urls // Remark plugins for lbry urls
// Note: The order is important // Note: The order is important
.use(formatedLinks) .use(formattedLinks)
.use(inlineLinks) .use(inlineLinks)
.use(isMarkdownPost ? null : inlineTimestamp) .use(isMarkdownPost ? null : inlineTimestamp)
.use(isMarkdownPost ? null : formattedTimestamp) .use(isMarkdownPost ? null : formattedTimestamp)

View file

@ -1,4 +1,6 @@
.markdown-preview { .markdown-preview {
word-break: break-all;
> :first-child { > :first-child {
margin-top: 0; margin-top: 0;
} }

View file

@ -149,7 +149,7 @@ const transform = (tree) => {
visit(tree, ['link'], visitor); visit(tree, ['link'], visitor);
}; };
export const formatedLinks = () => transform; export const formattedLinks = () => transform;
// Main module // Main module
export function inlineLinks() { export function inlineLinks() {