Fix nested indents in Live Chat
This commit is contained in:
parent
b4f3e40a0b
commit
bf6d42dee8
3 changed files with 25 additions and 6 deletions
|
@ -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)
|
||||||
|
|
|
@ -1,4 +1,6 @@
|
||||||
.markdown-preview {
|
.markdown-preview {
|
||||||
|
word-break: break-all;
|
||||||
|
|
||||||
> :first-child {
|
> :first-child {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
Loading…
Reference in a new issue