fix(RichText): unify style (#3946)

This commit is contained in:
Zeke Zhang 2024-04-06 19:41:52 +08:00 committed by GitHub
parent 10ad3f16fd
commit f1f9f3ec28
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 229 additions and 220 deletions

View File

@ -21,7 +21,9 @@ type Composed = {
export const ReadPretty: Composed = () => null; export const ReadPretty: Composed = () => null;
ReadPretty.Input = (props) => { ReadPretty.Input = (props) => {
// eslint-disable-next-line react-hooks/rules-of-hooks
const prefixCls = usePrefixCls('description-input', props); const prefixCls = usePrefixCls('description-input', props);
// eslint-disable-next-line react-hooks/rules-of-hooks
const compile = useCompile(); const compile = useCompile();
return ( return (
<div className={cls(prefixCls, props.className)} style={props.style}> <div className={cls(prefixCls, props.className)} style={props.style}>
@ -35,7 +37,9 @@ ReadPretty.Input = (props) => {
}; };
ReadPretty.TextArea = (props) => { ReadPretty.TextArea = (props) => {
// eslint-disable-next-line react-hooks/rules-of-hooks
const prefixCls = usePrefixCls('description-textarea', props); const prefixCls = usePrefixCls('description-textarea', props);
// eslint-disable-next-line react-hooks/rules-of-hooks
const compile = useCompile(); const compile = useCompile();
const value = compile(props.value ?? ''); const value = compile(props.value ?? '');
const { autop = true, ellipsis, text } = props; const { autop = true, ellipsis, text } = props;
@ -76,12 +80,15 @@ function convertToText(html: string) {
} }
ReadPretty.Html = (props) => { ReadPretty.Html = (props) => {
// eslint-disable-next-line react-hooks/rules-of-hooks
const prefixCls = usePrefixCls('description-textarea', props); const prefixCls = usePrefixCls('description-textarea', props);
// eslint-disable-next-line react-hooks/rules-of-hooks
const compile = useCompile(); const compile = useCompile();
const value = compile(props.value ?? ''); const value = compile(props.value ?? '');
const { autop = true, ellipsis } = props; const { autop = true, ellipsis } = props;
const html = ( const html = (
<div <div
style={{ lineHeight: '1.42' }}
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: value, __html: value,
}} }}
@ -105,6 +112,7 @@ ReadPretty.Html = (props) => {
}; };
ReadPretty.URL = (props) => { ReadPretty.URL = (props) => {
// eslint-disable-next-line react-hooks/rules-of-hooks
const prefixCls = usePrefixCls('description-url', props); const prefixCls = usePrefixCls('description-url', props);
const content = props.value && ( const content = props.value && (
<Typography.Link ellipsis target={'_blank'} href={props.value as any}> <Typography.Link ellipsis target={'_blank'} href={props.value as any}>
@ -123,6 +131,7 @@ ReadPretty.URL = (props) => {
}; };
ReadPretty.JSON = (props) => { ReadPretty.JSON = (props) => {
// eslint-disable-next-line react-hooks/rules-of-hooks
const prefixCls = usePrefixCls('json', props); const prefixCls = usePrefixCls('json', props);
return ( return (
<pre <pre

View File

@ -43,225 +43,225 @@ export const useStyles = genStyleHook('nb-rich-text', (token) => {
whiteSpace: 'pre-wrap', whiteSpace: 'pre-wrap',
wordWrap: 'break-word', wordWrap: 'break-word',
}, },
'.ql-editor > *': { cursor: 'text' }, // '.ql-editor > *': { cursor: 'text' },
'.ql-editor p,\n.ql-editor ol,\n.ql-editor ul,\n.ql-editor pre,\n.ql-editor blockquote,\n.ql-editor h1,\n.ql-editor h2,\n.ql-editor h3,\n.ql-editor h4,\n.ql-editor h5,\n.ql-editor h6': // '.ql-editor p,\n.ql-editor ol,\n.ql-editor ul,\n.ql-editor pre,\n.ql-editor blockquote,\n.ql-editor h1,\n.ql-editor h2,\n.ql-editor h3,\n.ql-editor h4,\n.ql-editor h5,\n.ql-editor h6':
{ // {
margin: '0', // margin: '0',
padding: '0', // padding: '0',
counterReset: 'list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9', // counterReset: 'list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9',
}, // },
'.ql-editor ol,\n.ql-editor ul': { paddingLeft: '0' }, // '.ql-editor ol,\n.ql-editor ul': { paddingLeft: '0' },
'.ql-editor ol > li,\n.ql-editor ul > li': { listStyleType: 'none' }, // '.ql-editor ol > li,\n.ql-editor ul > li': { listStyleType: 'none' },
'.ql-editor ul > li::before': { content: "'\\2022'" }, // '.ql-editor ul > li::before': { content: "'\\2022'" },
".ql-editor ul[data-checked='true'],\n.ql-editor ul[data-checked='false']": { // ".ql-editor ul[data-checked='true'],\n.ql-editor ul[data-checked='false']": {
pointerEvents: 'none', // pointerEvents: 'none',
}, // },
".ql-editor ul[data-checked='true'] > li *,\n.ql-editor ul[data-checked='false'] > li *": { // ".ql-editor ul[data-checked='true'] > li *,\n.ql-editor ul[data-checked='false'] > li *": {
pointerEvents: 'all', // pointerEvents: 'all',
}, // },
".ql-editor ul[data-checked='true'] > li::before,\n.ql-editor ul[data-checked='false'] > li::before": { // ".ql-editor ul[data-checked='true'] > li::before,\n.ql-editor ul[data-checked='false'] > li::before": {
color: '#777', // color: '#777',
cursor: 'pointer', // cursor: 'pointer',
pointerEvents: 'all', // pointerEvents: 'all',
}, // },
".ql-editor ul[data-checked='true'] > li::before": { content: "'\\2611'" }, // ".ql-editor ul[data-checked='true'] > li::before": { content: "'\\2611'" },
".ql-editor ul[data-checked='false'] > li::before": { content: "'\\2610'" }, // ".ql-editor ul[data-checked='false'] > li::before": { content: "'\\2610'" },
'.ql-editor li::before': { // '.ql-editor li::before': {
display: 'inline-block', // display: 'inline-block',
whiteSpace: 'nowrap', // whiteSpace: 'nowrap',
width: '1.2em', // width: '1.2em',
}, // },
'.ql-editor li:not(.ql-direction-rtl)::before': { // '.ql-editor li:not(.ql-direction-rtl)::before': {
marginLeft: '-1.5em', // marginLeft: '-1.5em',
marginRight: '0.3em', // marginRight: '0.3em',
textAlign: 'right', // textAlign: 'right',
}, // },
'.ql-editor li.ql-direction-rtl::before': { // '.ql-editor li.ql-direction-rtl::before': {
marginLeft: '0.3em', // marginLeft: '0.3em',
marginRight: '-1.5em', // marginRight: '-1.5em',
}, // },
'.ql-editor ol li:not(.ql-direction-rtl),\n.ql-editor ul li:not(.ql-direction-rtl)': { // '.ql-editor ol li:not(.ql-direction-rtl),\n.ql-editor ul li:not(.ql-direction-rtl)': {
paddingLeft: '1.5em', // paddingLeft: '1.5em',
}, // },
'.ql-editor ol li.ql-direction-rtl,\n.ql-editor ul li.ql-direction-rtl': { // '.ql-editor ol li.ql-direction-rtl,\n.ql-editor ul li.ql-direction-rtl': {
paddingRight: '1.5em', // paddingRight: '1.5em',
}, // },
'.ql-editor ol li': { // '.ql-editor ol li': {
counterReset: 'list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9', // counterReset: 'list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9',
counterIncrement: 'list-0', // counterIncrement: 'list-0',
}, // },
'.ql-editor ol li:before': { content: "counter(list-0, decimal) '. '" }, // '.ql-editor ol li:before': { content: "counter(list-0, decimal) '. '" },
'.ql-editor ol li.ql-indent-1': { // '.ql-editor ol li.ql-indent-1': {
counterIncrement: 'list-1', // counterIncrement: 'list-1',
counterReset: 'list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9', // counterReset: 'list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9',
}, // },
'.ql-editor ol li.ql-indent-1:before': { // '.ql-editor ol li.ql-indent-1:before': {
content: "counter(list-1, lower-alpha) '. '", // content: "counter(list-1, lower-alpha) '. '",
}, // },
'.ql-editor ol li.ql-indent-2': { // '.ql-editor ol li.ql-indent-2': {
counterIncrement: 'list-2', // counterIncrement: 'list-2',
counterReset: 'list-3 list-4 list-5 list-6 list-7 list-8 list-9', // counterReset: 'list-3 list-4 list-5 list-6 list-7 list-8 list-9',
}, // },
'.ql-editor ol li.ql-indent-2:before': { // '.ql-editor ol li.ql-indent-2:before': {
content: "counter(list-2, lower-roman) '. '", // content: "counter(list-2, lower-roman) '. '",
}, // },
'.ql-editor ol li.ql-indent-3': { // '.ql-editor ol li.ql-indent-3': {
counterIncrement: 'list-3', // counterIncrement: 'list-3',
counterReset: 'list-4 list-5 list-6 list-7 list-8 list-9', // counterReset: 'list-4 list-5 list-6 list-7 list-8 list-9',
}, // },
'.ql-editor ol li.ql-indent-3:before': { // '.ql-editor ol li.ql-indent-3:before': {
content: "counter(list-3, decimal) '. '", // content: "counter(list-3, decimal) '. '",
}, // },
'.ql-editor ol li.ql-indent-4': { // '.ql-editor ol li.ql-indent-4': {
counterIncrement: 'list-4', // counterIncrement: 'list-4',
counterReset: 'list-5 list-6 list-7 list-8 list-9', // counterReset: 'list-5 list-6 list-7 list-8 list-9',
}, // },
'.ql-editor ol li.ql-indent-4:before': { // '.ql-editor ol li.ql-indent-4:before': {
content: "counter(list-4, lower-alpha) '. '", // content: "counter(list-4, lower-alpha) '. '",
}, // },
'.ql-editor ol li.ql-indent-5': { // '.ql-editor ol li.ql-indent-5': {
counterIncrement: 'list-5', // counterIncrement: 'list-5',
counterReset: 'list-6 list-7 list-8 list-9', // counterReset: 'list-6 list-7 list-8 list-9',
}, // },
'.ql-editor ol li.ql-indent-5:before': { // '.ql-editor ol li.ql-indent-5:before': {
content: "counter(list-5, lower-roman) '. '", // content: "counter(list-5, lower-roman) '. '",
}, // },
'.ql-editor ol li.ql-indent-6': { // '.ql-editor ol li.ql-indent-6': {
counterIncrement: 'list-6', // counterIncrement: 'list-6',
counterReset: 'list-7 list-8 list-9', // counterReset: 'list-7 list-8 list-9',
}, // },
'.ql-editor ol li.ql-indent-6:before': { // '.ql-editor ol li.ql-indent-6:before': {
content: "counter(list-6, decimal) '. '", // content: "counter(list-6, decimal) '. '",
}, // },
'.ql-editor ol li.ql-indent-7': { // '.ql-editor ol li.ql-indent-7': {
counterIncrement: 'list-7', // counterIncrement: 'list-7',
counterReset: 'list-8 list-9', // counterReset: 'list-8 list-9',
}, // },
'.ql-editor ol li.ql-indent-7:before': { // '.ql-editor ol li.ql-indent-7:before': {
content: "counter(list-7, lower-alpha) '. '", // content: "counter(list-7, lower-alpha) '. '",
}, // },
'.ql-editor ol li.ql-indent-8': { // '.ql-editor ol li.ql-indent-8': {
counterIncrement: 'list-8', // counterIncrement: 'list-8',
counterReset: 'list-9', // counterReset: 'list-9',
}, // },
'.ql-editor ol li.ql-indent-8:before': { // '.ql-editor ol li.ql-indent-8:before': {
content: "counter(list-8, lower-roman) '. '", // content: "counter(list-8, lower-roman) '. '",
}, // },
'.ql-editor ol li.ql-indent-9': { counterIncrement: 'list-9' }, // '.ql-editor ol li.ql-indent-9': { counterIncrement: 'list-9' },
'.ql-editor ol li.ql-indent-9:before': { // '.ql-editor ol li.ql-indent-9:before': {
content: "counter(list-9, decimal) '. '", // content: "counter(list-9, decimal) '. '",
}, // },
'.ql-editor .ql-indent-1:not(.ql-direction-rtl)': { paddingLeft: '3em' }, // '.ql-editor .ql-indent-1:not(.ql-direction-rtl)': { paddingLeft: '3em' },
'.ql-editor li.ql-indent-1:not(.ql-direction-rtl)': { paddingLeft: '4.5em' }, // '.ql-editor li.ql-indent-1:not(.ql-direction-rtl)': { paddingLeft: '4.5em' },
'.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right': { // '.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right': {
paddingRight: '3em', // paddingRight: '3em',
}, // },
'.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right': { // '.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right': {
paddingRight: '4.5em', // paddingRight: '4.5em',
}, // },
'.ql-editor .ql-indent-2:not(.ql-direction-rtl)': { paddingLeft: '6em' }, // '.ql-editor .ql-indent-2:not(.ql-direction-rtl)': { paddingLeft: '6em' },
'.ql-editor li.ql-indent-2:not(.ql-direction-rtl)': { paddingLeft: '7.5em' }, // '.ql-editor li.ql-indent-2:not(.ql-direction-rtl)': { paddingLeft: '7.5em' },
'.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right': { // '.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right': {
paddingRight: '6em', // paddingRight: '6em',
}, // },
'.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right': { // '.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right': {
paddingRight: '7.5em', // paddingRight: '7.5em',
}, // },
'.ql-editor .ql-indent-3:not(.ql-direction-rtl)': { paddingLeft: '9em' }, // '.ql-editor .ql-indent-3:not(.ql-direction-rtl)': { paddingLeft: '9em' },
'.ql-editor li.ql-indent-3:not(.ql-direction-rtl)': { paddingLeft: '10.5em' }, // '.ql-editor li.ql-indent-3:not(.ql-direction-rtl)': { paddingLeft: '10.5em' },
'.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right': { // '.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right': {
paddingRight: '9em', // paddingRight: '9em',
}, // },
'.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right': { // '.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right': {
paddingRight: '10.5em', // paddingRight: '10.5em',
}, // },
'.ql-editor .ql-indent-4:not(.ql-direction-rtl)': { paddingLeft: '12em' }, // '.ql-editor .ql-indent-4:not(.ql-direction-rtl)': { paddingLeft: '12em' },
'.ql-editor li.ql-indent-4:not(.ql-direction-rtl)': { paddingLeft: '13.5em' }, // '.ql-editor li.ql-indent-4:not(.ql-direction-rtl)': { paddingLeft: '13.5em' },
'.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right': { // '.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right': {
paddingRight: '12em', // paddingRight: '12em',
}, // },
'.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right': { // '.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right': {
paddingRight: '13.5em', // paddingRight: '13.5em',
}, // },
'.ql-editor .ql-indent-5:not(.ql-direction-rtl)': { paddingLeft: '15em' }, // '.ql-editor .ql-indent-5:not(.ql-direction-rtl)': { paddingLeft: '15em' },
'.ql-editor li.ql-indent-5:not(.ql-direction-rtl)': { paddingLeft: '16.5em' }, // '.ql-editor li.ql-indent-5:not(.ql-direction-rtl)': { paddingLeft: '16.5em' },
'.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right': { // '.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right': {
paddingRight: '15em', // paddingRight: '15em',
}, // },
'.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right': { // '.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right': {
paddingRight: '16.5em', // paddingRight: '16.5em',
}, // },
'.ql-editor .ql-indent-6:not(.ql-direction-rtl)': { paddingLeft: '18em' }, // '.ql-editor .ql-indent-6:not(.ql-direction-rtl)': { paddingLeft: '18em' },
'.ql-editor li.ql-indent-6:not(.ql-direction-rtl)': { paddingLeft: '19.5em' }, // '.ql-editor li.ql-indent-6:not(.ql-direction-rtl)': { paddingLeft: '19.5em' },
'.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right': { // '.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right': {
paddingRight: '18em', // paddingRight: '18em',
}, // },
'.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right': { // '.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right': {
paddingRight: '19.5em', // paddingRight: '19.5em',
}, // },
'.ql-editor .ql-indent-7:not(.ql-direction-rtl)': { paddingLeft: '21em' }, // '.ql-editor .ql-indent-7:not(.ql-direction-rtl)': { paddingLeft: '21em' },
'.ql-editor li.ql-indent-7:not(.ql-direction-rtl)': { paddingLeft: '22.5em' }, // '.ql-editor li.ql-indent-7:not(.ql-direction-rtl)': { paddingLeft: '22.5em' },
'.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right': { // '.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right': {
paddingRight: '21em', // paddingRight: '21em',
}, // },
'.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right': { // '.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right': {
paddingRight: '22.5em', // paddingRight: '22.5em',
}, // },
'.ql-editor .ql-indent-8:not(.ql-direction-rtl)': { paddingLeft: '24em' }, // '.ql-editor .ql-indent-8:not(.ql-direction-rtl)': { paddingLeft: '24em' },
'.ql-editor li.ql-indent-8:not(.ql-direction-rtl)': { paddingLeft: '25.5em' }, // '.ql-editor li.ql-indent-8:not(.ql-direction-rtl)': { paddingLeft: '25.5em' },
'.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right': { // '.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right': {
paddingRight: '24em', // paddingRight: '24em',
}, // },
'.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right': { // '.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right': {
paddingRight: '25.5em', // paddingRight: '25.5em',
}, // },
'.ql-editor .ql-indent-9:not(.ql-direction-rtl)': { paddingLeft: '27em' }, // '.ql-editor .ql-indent-9:not(.ql-direction-rtl)': { paddingLeft: '27em' },
'.ql-editor li.ql-indent-9:not(.ql-direction-rtl)': { paddingLeft: '28.5em' }, // '.ql-editor li.ql-indent-9:not(.ql-direction-rtl)': { paddingLeft: '28.5em' },
'.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right': { // '.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right': {
paddingRight: '27em', // paddingRight: '27em',
}, // },
'.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right': { // '.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right': {
paddingRight: '28.5em', // paddingRight: '28.5em',
}, // },
'.ql-editor .ql-video': { display: 'block', maxWidth: '100%' }, // '.ql-editor .ql-video': { display: 'block', maxWidth: '100%' },
'.ql-editor .ql-video.ql-align-center': { margin: '0 auto' }, // '.ql-editor .ql-video.ql-align-center': { margin: '0 auto' },
'.ql-editor .ql-video.ql-align-right': { margin: '0 0 0 auto' }, // '.ql-editor .ql-video.ql-align-right': { margin: '0 0 0 auto' },
'.ql-editor .ql-bg-black': { backgroundColor: '#000' }, // '.ql-editor .ql-bg-black': { backgroundColor: '#000' },
'.ql-editor .ql-bg-red': { backgroundColor: '#e60000' }, // '.ql-editor .ql-bg-red': { backgroundColor: '#e60000' },
'.ql-editor .ql-bg-orange': { backgroundColor: '#f90' }, // '.ql-editor .ql-bg-orange': { backgroundColor: '#f90' },
'.ql-editor .ql-bg-yellow': { backgroundColor: '#ff0' }, // '.ql-editor .ql-bg-yellow': { backgroundColor: '#ff0' },
'.ql-editor .ql-bg-green': { backgroundColor: '#008a00' }, // '.ql-editor .ql-bg-green': { backgroundColor: '#008a00' },
'.ql-editor .ql-bg-blue': { backgroundColor: token.colorPrimaryTextHover }, // '.ql-editor .ql-bg-blue': { backgroundColor: token.colorPrimaryTextHover },
'.ql-editor .ql-bg-purple': { backgroundColor: '#93f' }, // '.ql-editor .ql-bg-purple': { backgroundColor: '#93f' },
'.ql-editor .ql-color-white': { color: '#fff' }, // '.ql-editor .ql-color-white': { color: '#fff' },
'.ql-editor .ql-color-red': { color: '#e60000' }, // '.ql-editor .ql-color-red': { color: '#e60000' },
'.ql-editor .ql-color-orange': { color: '#f90' }, // '.ql-editor .ql-color-orange': { color: '#f90' },
'.ql-editor .ql-color-yellow': { color: '#ff0' }, // '.ql-editor .ql-color-yellow': { color: '#ff0' },
'.ql-editor .ql-color-green': { color: '#008a00' }, // '.ql-editor .ql-color-green': { color: '#008a00' },
'.ql-editor .ql-color-blue': { color: token.colorPrimaryTextHover }, // '.ql-editor .ql-color-blue': { color: token.colorPrimaryTextHover },
'.ql-editor .ql-color-purple': { color: '#93f' }, // '.ql-editor .ql-color-purple': { color: '#93f' },
'.ql-editor .ql-font-serif': { // '.ql-editor .ql-font-serif': {
fontFamily: 'Georgia, Times New Roman, serif', // fontFamily: 'Georgia, Times New Roman, serif',
}, // },
'.ql-editor .ql-font-monospace': { // '.ql-editor .ql-font-monospace': {
fontFamily: 'Monaco, Courier New, monospace', // fontFamily: 'Monaco, Courier New, monospace',
}, // },
'.ql-editor .ql-size-small': { fontSize: '0.75em' }, // '.ql-editor .ql-size-small': { fontSize: '0.75em' },
'.ql-editor .ql-size-large': { fontSize: '1.5em' }, // '.ql-editor .ql-size-large': { fontSize: '1.5em' },
'.ql-editor .ql-size-huge': { fontSize: '2.5em' }, // '.ql-editor .ql-size-huge': { fontSize: '2.5em' },
'.ql-editor .ql-direction-rtl': { direction: 'rtl', textAlign: 'inherit' }, // '.ql-editor .ql-direction-rtl': { direction: 'rtl', textAlign: 'inherit' },
'.ql-editor .ql-align-center': { textAlign: 'center' }, // '.ql-editor .ql-align-center': { textAlign: 'center' },
'.ql-editor .ql-align-justify': { textAlign: 'justify' }, // '.ql-editor .ql-align-justify': { textAlign: 'justify' },
'.ql-editor .ql-align-right': { textAlign: 'right' }, // '.ql-editor .ql-align-right': { textAlign: 'right' },
'.ql-editor.ql-blank::before': { // '.ql-editor.ql-blank::before': {
color: 'rgba(0, 0, 0, 0.6)', // color: 'rgba(0, 0, 0, 0.6)',
content: 'attr(data-placeholder)', // content: 'attr(data-placeholder)',
fontStyle: 'italic', // fontStyle: 'italic',
left: '15px', // left: '15px',
pointerEvents: 'none', // pointerEvents: 'none',
position: 'absolute', // position: 'absolute',
right: '15px', // right: '15px',
}, // },
'.ql-snow.ql-toolbar:after,\n.ql-snow .ql-toolbar:after': { '.ql-snow.ql-toolbar:after,\n.ql-snow .ql-toolbar:after': {
clear: 'both', clear: 'both',
content: "''", content: "''",
@ -365,7 +365,7 @@ export const useStyles = genStyleHook('nb-rich-text', (token) => {
'.ql-snow .ql-editor h4': { fontSize: '1em' }, '.ql-snow .ql-editor h4': { fontSize: '1em' },
'.ql-snow .ql-editor h5': { fontSize: '0.83em' }, '.ql-snow .ql-editor h5': { fontSize: '0.83em' },
'.ql-snow .ql-editor h6': { fontSize: '0.67em' }, '.ql-snow .ql-editor h6': { fontSize: '0.67em' },
'.ql-snow .ql-editor a': { textDecoration: 'underline' }, // '.ql-snow .ql-editor a': { textDecoration: 'underline' },
'.ql-snow .ql-editor blockquote': { '.ql-snow .ql-editor blockquote': {
borderLeft: '4px solid #ccc', borderLeft: '4px solid #ccc',
marginBottom: '5px', marginBottom: '5px',