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 trying to compare two different date interval data in a single chart by using 'linkedTo' attribute (in order to vanish and show two lines in a single click of a legend since they are related)
My problem: two series are automatically align themselves in the middle (Fiddle Link Here)
Here's my options:
Highcharts.chart('container', {
xAxis: [{
tickInterval: 1,
left: 0
},
{
type: 'datetime',
categories: ['4/18/2018', '4/19/2018', '4/20/2018', '4/21/2018', '4/22/2018', '4/23/2018'],
visible: false,
left: 0,
labels: {
formatter: function() {
return Highcharts.dateFormat('%b/%e/%Y', this.value);
}
}
},
{
type: 'datetime',
categories: ['5/2/2018', '5/3/2018', '5/4/2018'],
visible: false,
}
],
yAxis: [{
type: 'value',
visible: false
},
],
series: [{
name: 'instance1',
key: 'instance1',
type: 'line',
data: [1, 5, 2, 2, 8, 6
],
xAxis: 1
},
{
name: 'instance1 compared',
linkedTo: 'instance1',
dashStyle: 'shortdash',
type: 'line',
data: [
8, 3, 6
],
xAxis: 2
}
],
tooltip: {
crosshairs: true,
shared: true,
useHTML: true,
headerFormat: '<table><tr><th colspan="2">{point.key}</th></tr>',
pointFormat: '<tr><td>{series.name} </td> <td style="text-align: right"><b>{point.y}</b></td></tr>',
footerFormat: '</table>'
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
What I want is something like here:
Where the days are ticked together and short serie is halted before the other one
I tried linking the two series in a single xAxis that tracks the day count as the picture. That partially worked to align the dots together but then I couldn't send the separate date data to tooltip. How can I format the tooltip?
Another solution I tried to find online is if there's any way I can link three data in highchart then I can use the day count as a single xAxis and put the date data in tooltip separately.
Ex: (125 clicks, 1/8/2022, Day: 2)
Add the max property to the xAxis with fewer categories, in order to match it to the other one.
xAxis: [{
tickInterval: 1
},
{
categories: categories1,
visible: false
},
{
categories: categories2,
max: categories1.length - 1,
visible: false
}
],
tooltip: {
crosshairs: true,
shared: true,
useHTML: true,
headerFormat: '<table><tr><th colspan="2">Day {point.point.x}</th></tr>',
pointFormat: '<tr><td>{point.category} </td> <td style="text-align: right"><b>{point.y}</b></td></tr>',
footerFormat: '</table>'
},
Demo:
https://jsfiddle.net/BlackLabel/naes6v89/
Another approach you mentioned would be possible to achieve by using series.keys (API: https://api.highcharts.com/highcharts/series.line.keys), but in this case, is not necessary. You need to only pass the category as a point.name, and then use the point.x value in tooltip.headerFormat
tooltip: {
crosshairs: true,
shared: true,
useHTML: true,
headerFormat: '<table><tr><th colspan="2">Day {point.x}</th></tr>',
pointFormat: '<tr><td>{point.name} </td> <td style="text-align: right"><b>{point.y}</b></td></tr>',
footerFormat: '</table>',
},
series: [{
name: 'instance1',
id: 'instance1',
data: [
['4/18/2018', 1],
['4/19/2018', 5],
['4/20/2018', 2],
['4/21/2018', 2]
],
},
{
name: 'instance1 compared',
linkedTo: 'instance1',
dashStyle: 'shortdash',
data: [
['5/2/2018', 8],
['5/3/2018', 3],
['5/4/2018', 6]
],
}
]
Demo:
https://jsfiddle.net/BlackLabel/8xsnr7c9/
P.S. Remember you need to use linkedTo with id, instead of key.
series: [{
name: 'instance1',
id: 'instance1',
data: [1, 5, 2, 2],
xAxis: 1
},
{
name: 'instance1 compared',
linkedTo: 'instance1',
dashStyle: 'shortdash',
data: [8, 3, 6],
xAxis: 2
}
]
API Reference:
https://api.highcharts.com/highcharts/series.line.linkedTo
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;
}
I'm currently designing a website with React where the user will work with a text editor. The text editor will already have text in it. The user will make some changes to the text and submit it. I would like to add a button that will show the user the differences between the original text and his new text, like Git but down to individual characters.
I'm currently trying to use Quill for that. I've found a lovely solution to my problem, but it's written in plain JavaScript. I've tried translating it to React by setting the Quill objects in the state:
const [quill_old, set_quill_old] = React.useState(new Quill('#old', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
}))
const [quill_new, set_quill_new] = React.useState(new Quill('#new', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
}))
const [quill_diff, set_quill_diff] = React.useState(new Quill('#diff', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
}))
but when initializing the code it gets stuck on the "findDiff" function, on this line:
var oldContent = quill_old.getContents();
and returns an error:
TypeError: Cannot read property 'length' of undefined
Where "undefined" is "quill_old".
When trying to run the page without the function, the page shows properly, but I get multiple errors in the console like this:
quill Invalid Quill container #old
Does somebody know how to properly implement this solution in React? Or has a suggestion on some other library I can use?
Thank you for your time