I am using react-quill for mentioning users however I am not able to style mention list ,actually when I mention user, long list of user gets displayed on the screen which needs scrollbar to make it more presentable.how to achieve scrollbar in mention list in React-quill?
here is the code for better understanding.
<div>
<ReactQuill
onChange={handleChange}
value={editorHtml}
modules={modules}
formats={formats}
bounds={".app"}
placeholder={props.placeholder}
/>
</div>
);
}
const modules = {
toolbar: [
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ list: "ordered" }, { list: "bullet" }],
["bold", "italic", "underline"],
[{ color: [] }, { background: [] }],
// [{ script: 'sub' }, { script: 'super' }],
[{ align: [] }],
["link", "blockquote", "emoji"],
["clean"],
],
clipboard: {
// toggle to add extra line breaks when pasting HTML:
matchVisual: false,
},
mention,
"emoji-toolbar": true,
"emoji-textarea": false,
"emoji-shortname": true,
};
const formats = [
"header",
"font",
"size",
"bold",
"italic",
"underline",
"strike",
"blockquote",
"list",
"bullet",
"indent",
"link",
"mention",
"emoji",
];
This worked for me
.ql-mention-list-container {
max-height: 200px;
}
Related
I want to add the following function to the toolbar of react quill.
num 1 ~ 20 text size custom button
More than 15 types of font styles
Any good way?
current:
const modules = {
toolbar: [
// [{ font: [] }],
[{ size: ['14px', '16px', '18px'] }],
[{ header: [1, 2, 3, 4, 5, 6, false] }],
["bold", "italic", "underline", "strike"],
[{ color: [] }, { background: [] }],
[{ script: "sub" }, { script: "super" }],
["blockquote", "code-block"],
[{ list: "ordered" }, { list: "bullet" }],
[{ indent: "-1" }, { indent: "+1" }, { align: [] }],
["link", "image", "video"],
["clean"],
]
};
I am using quill JS with Next JS, its working totally fine on local machine but on production not working like when I selecting any header tag like h3 its by default selecting h1 tag
and when I selecting any color its not selecting it
Here is my component for quill js
RichTextEditor.js
import React from 'react'
import dynamic from 'next/dynamic'
const QullEditor = dynamic(import("react-quill"), {ssr: false})
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
['link'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
// [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'font': [] }],
[{ 'align': [] }],
['clean'], // remove formatting button
];
const RichTextEditor = ({ handler, defaultValue,placeholder }) => {
return (
<QullEditor modules={{toolbar:toolbarOptions}} onChange={(data) => handler(data)} theme="snow" placeholder={ placeholder ?? 'Enter Your Paragraph'} defaultValue={defaultValue} />
)
}
export default RichTextEditor
and I am using it like this
<RichTextEditor handler={setSubText} defaultValue={update.is ? update.data.subtext : null} />
Please Let me know How to solve this bug
I'm looking to create a drilldown using the CChartBar available in the CoreUI documentation here: https://coreui.io/react/docs/3.3/components/CCharts/
I need to be able to get the month from the bar that is clicked, and when the bar is clicked, it needs to take the user to another page. How do I get the information? How to I make each bar clickable to send the user to the table page?
Currently here is the html
<div className="chart-container">
<CChartBar
datasets={[
{
label: "Expected Expirations",
type: "bar",
data: expectedExpirations,
backgroundColor: "#949fe8",
borderColor: "blue",
fill: true,
order: 2,
},
{
label: 'Actual Expirations',
type: "bar",
data: actualExpirations,
backgroundColor: '#556ad1',
borderColor: "blue",
fill: true,
order: 1,
},
{
label: 'Target Expirations',
backgroundColor: '#352c2c',
data: targetExpirations,
type: "line",
borderColor: "black",
fill: true,
order: 0,
borderWidth: 2,
fill: "#352c2c",
pointBackgroundColor: "#352c2c",
lineTension: 0,
}
]}
labels={dateLabels}
onClick={(event) => drillDown(event)}
options={{
maintainAspectRatio: false,
responsive: true,
tooltips: {
enabled: true,
},
scales: {
xAxes: [{
stacked: true,
scaleLabel: {
display: true,
labelString: "Month"
}
}],
yAxes: [{
ticks: {
stacked: true,
beginAtZero: true,
stepValue: 10,
max: maxOfAllExpirations
},
scaleLabel: {
display: true,
labelString: "Number of Lease Expirations"
}
}]
},
}}
/>
I would like to be able to click on the bar, and get the data that is being charted, so I can pass the month to another page.
You can use the onClick function for this:
var options = {
type: 'bar',
data: {
labels: ["December 2020", "Januarie 2021", "Feb 2021", "March 2021", "April 2021", "May 2021"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 3, 3],
backgroundColor: 'pink'
}]
},
options: {
onClick: (evt, activeEls) => {
console.log(activeEls[0]._model.label)
console.log(activeEls[0]._model.label.split(" ")[0])
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>
<div className = "chart-container" >
<CChartBar
datasets = {
[{
label: "Expected Expirations",
type: "bar",
data: expectedExpirations,
backgroundColor: "#949fe8",
borderColor: "blue",
fill: true,
order: 2,
},
{
label: 'Actual Expirations',
type: "bar",
data: actualExpirations,
backgroundColor: '#556ad1',
borderColor: "blue",
fill: true,
order: 1,
},
{
label: 'Target Expirations',
backgroundColor: '#352c2c',
data: targetExpirations,
type: "line",
borderColor: "black",
fill: true,
order: 0,
borderWidth: 2,
fill: "#352c2c",
pointBackgroundColor: "#352c2c",
lineTension: 0,
}
]
}
labels = {
dateLabels
}
onClick = {
(event) => drillDown(event)
}
options = {
{
onClick: (evt, activeEls) => {
console.log(activeEls[0]._model.label)
console.log(activeEls[0]._model.label.split(" ")[0])
},
maintainAspectRatio: false,
responsive: true,
tooltips: {
enabled: true,
},
scales: {
xAxes: [{
stacked: true,
scaleLabel: {
display: true,
labelString: "Month"
}
}],
yAxes: [{
ticks: {
stacked: true,
beginAtZero: true,
stepValue: 10,
max: maxOfAllExpirations
},
scaleLabel: {
display: true,
labelString: "Number of Lease Expirations"
}
}]
},
}
}
/>
``
After setting up a stacked horizontal bar chart using chartjs, the x-axis cannot be hidden. I have tried numerous ways to remove it like using "display:false" and making the text transparent but to no avail. Here is what it looks like and what I want it to look like:
https://imgur.com/a/mKYViUx
Thanks in advance~!
Current Chartjs code:
datasets: [
{
label: 'Example Data One',
data: [10],
backgroundColor: '#C4D156',
borderColor: "#ffffff",
borderWidth: 1.5
},
{
label: 'Example Two, etc',
data: [25],
backgroundColor: '#68A03F',
borderColor: "#ffffff",
borderWidth: 1.5
},
{
label: 'Three',
data: [55],
backgroundColor: '#2F9138',
borderColor: "#ffffff",
borderWidth: 1.5
}
]
};
},
options: {
maintainAspectRatio: false,
legend: {
display: false
},
tooltips: {
bodySpacing: 4,
xPadding: 12,
mode: "nearest",
intersect: 0,
position: "nearest"
},
responsive: true,
scales: {
yAxes: [
{stacked: true},
],
xAxes: [
{stacked: true},
{gridLines: {
display:false
}
},
]
}
}
Hiding the label/text on the axis is done with that
options: {
...
scales: {
...
xAxes: [{
ticks: {
display: false //this will remove the label/text
}
}]
}
}
Image
This is my current result bar
But I need the content to be collapsed when clicked, the content is similar to the picture below
Give a link to some library or some solution
in advance thankful
Source
<HorizontalBar
data={{
barPercentage: 0.8,
labels: [
'Label1', //THIS ARR FOR ONLY FOR EXAMPLE
'Label2',
'Label3',
'Label4',
'Label5',
'Label6',
'Label7',
'Label8'
],
datasets: [{
legend: {
display: false
},
label: '',
data: [7305064, 7305064, 5294903, 1313290, 600300, 96571, 617650, -200000],
fill: false,
borderColor: "#18B9AB",
backgroundColor: '#7facf5',
hoverBackgroundColor: '#609af7',
barThickness: 20
}]
}}
options={{
tooltips: {
enabled: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
plugins: {
datalabels: {
color: '#EFEFEF',
}
}
}}/>