Fixed markdown bullet list exception (#177)

* fixed markdown bullet list exception

* minor changes
This commit is contained in:
Sachin Chaurasiya 2021-08-15 15:06:47 +05:30 committed by GitHub
parent 6b1c70495e
commit d1c904ae4b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 36 additions and 5 deletions

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M48 48a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm448 16H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"/></svg>

After

Width:  |  Height:  |  Size: 491 B

View File

@ -22,6 +22,7 @@ import 'react-tippy/dist/tippy.css';
import { PopOverProp, Position, Size, Theme, Trigger } from './PopOverTypes';
const PopOver: React.FC<PopOverProp> = ({
arrow = true,
children,
className = '',
html,
@ -33,7 +34,7 @@ const PopOver: React.FC<PopOverProp> = ({
}): JSX.Element => {
return (
<Tooltip
arrow
arrow={arrow}
className={className}
html={html}
position={position}

View File

@ -25,8 +25,9 @@ import React, {
} from 'react';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import ListUl from '../../../assets/svg/list-ul.svg';
import { EditorProp, editorRef, Format } from './RichTextEditor.interface';
import { Bold, Italic, Link, ULLIST } from './ToolBarOptions';
import { Bold, Italic, Link } from './ToolBarOptions';
const getIntialContent = (format: string, content?: string) => {
/*eslint-disable */
@ -115,7 +116,15 @@ const RichTextEditor = forwardRef<editorRef, EditorProp>(
editorState={editorState}
readOnly={readonly}
toolbar={{
options: [],
options: ['list'],
list: {
className: 'my-list tw-order-4',
options: ['unordered'],
unordered: {
icon: ListUl,
className: 'list-option ',
},
},
}}
toolbarClassName="tw-py-2 tw-border-0 tw-border-b tw-border-main"
toolbarCustomButtons={
@ -123,7 +132,6 @@ const RichTextEditor = forwardRef<editorRef, EditorProp>(
<Bold key="bold" />,
<Italic key="italic" />,
<Link key="link" />,
<ULLIST key="ulList" />,
]
}
toolbarHidden={readonly}

View File

@ -39,6 +39,14 @@ const RichTextEditorPreviewer = ({ markdown }: { markdown: string }) => {
h4: 'p',
h5: 'p',
h6: 'p',
ul: ({ node, children, ...props }) => {
const { ordered: _ordered, ...rest } = props;
return (
<ul style={{ marginLeft: '14px' }} {...rest}>
{children}
</ul>
);
},
}}
remarkPlugins={[gfm]}
/>

View File

@ -84,6 +84,7 @@ export class Bold extends Component {
return (
<div className="rdw-option-wrapper tw-font-bold" onClick={this.makeBold}>
<PopOver
arrow={false}
position="bottom"
size="small"
title="Add bold text"
@ -128,6 +129,7 @@ export class Link extends Component {
return (
<div className="rdw-option-wrapper " onClick={this.makeLink}>
<PopOver
arrow={false}
position="bottom"
size="small"
title="Add link"
@ -172,6 +174,7 @@ export class Italic extends Component {
return (
<div className="rdw-option-wrapper " onClick={this.makeItalic}>
<PopOver
arrow={false}
position="bottom"
size="small"
title="Add italic text"
@ -263,7 +266,7 @@ export class ULLIST extends Component {
size="small"
title="Add unordered list"
trigger="mouseenter">
<i className="fas fa-list-ul" />
<i className="fas fa-list-ul " />
</PopOver>
</div>
);

View File

@ -687,3 +687,13 @@ strong {
body .rdw-editor-main pre {
background: none;
}
body .public-DraftStyleDefault-ul li::marker {
content: '- ';
}
.list-option img {
width: 16px;
}
body .list-option.rdw-option-active {
box-shadow: none;
}