I am using ck editor 5 online build tool to build a custom build of CK Editor 5. Successfully added it as a dependency of react project.
Included Mention plugin and other default plugins
import Editor from "ckeditor5-custom-build/build/ckeditor";
<CKEditor
disabled={props.readOnly}
editor={Editor}
data={props.value ? props.value : ""}
config={{
readOnly: props.readOnly,
mention: {
feeds: [
{
marker: "#",
feed: getPersonByName,
minimumCharacters: 1,
},
],
},
toolbar: [],
}}
onChange={(_event: any, editor: { getData: () => any }) => {
const data = editor.getData();
handleChange(editor);
}}
onBlur={(_event: any, _editor: any) => {}}
onFocus={(_event: any, _editor: any) => {}}
/>
mention plugin work as expected. but editors onChange event not firing.so I could not get the editor value.
ckeditor.js:5
CKEditorError: editor-isreadonly-has-no-setter
Updating the React version to the latest version (18.0.0) would be fixed the issue
Related
I have the Monaco editor embedded in a React component. For some reason the intellisense font sizes are all hosed up. Anyone have any ideas? I have changed a bunch of settings to try and fix things but nothing I have tried is having any impact.
import { useRef } from 'react'
import MonacoEditor from '#monaco-editor/react'
import codeShift from 'jscodeshift'
import Highlighter from 'monaco-jsx-highlighter'
import './jsx-syntax.css'
const CodeEditor = ({ height, initialValue, language, onChange, readOnly }) => {
const editorRef = useRef()
const onEditorDidMount = (getValue, editor) => {
editorRef.current = editor
editor.onDidChangeModelContent(() => (onChange) ? onChange(getValue()) : {})
editor.getModel()?.updateOptions({ tabSize: 4 })
const highlighter = new Highlighter(window.monaco, codeShift, editor);
highlighter.highLightOnDidChangeModelContent(
() => {}, () => {}, undefined, () => {}
);
}
const options = {
minimap: {enabled: false},
//showUnused: false,
lineNumbersMinChars: 3,
//fontSize: 13,
scrollBeyondLastLine: false,
automaticLayout: true,
readOnly
}
return (
<div className="editor-wrapper">
<MonacoEditor theme="dark" language={language ?? 'javascript'} height={(height ?? 400) + 'px'} value={initialValue ?? ''}
editorDidMount={onEditorDidMount} options={options}
/>
</div>
);
};
export default CodeEditor;
After much playing around I can confirm that the reason for the distortions is that my project is using the Bulma css framework. It looks like Monaco does not properly namespace its CSS and that Bulma is able to change things that completely mess up the toolbars and intellisense popups from the editor. To fix it I am manually going through and figuring out which styles need to be loacally applied to the wrapper around Monaco to get it working again.
It turned out to be the padding added to the tabs style in Bulma since the Monaco intellisense apparently uses a embedded tab on each line:
.tabs a {
...
padding: 0.5em 1em;
...
}
There's a FAQ somewhere, which says that if Monaco has measured its fonts before you set new ones, values are computed wrongly.
That's why I call:
public componentDidMount(): void {
Monaco.remeasureFonts();
}
I am using material-table and I want to remove the default CSV & PDF export option.
I would like to have only an excel option.
How can I change the menu ?
Thank you
For custom CSV and PDF, you should define options
options={{
exportButton: {
csv: true,
pdf: true,
}
}}
and for the handlers should be defined more options
options={{
exportButton: {
csv: true,
pdf: true,
},
exportCsv: (data, columns) => console.log(data, columns, '<== CSV'),
exportPdf: (data, columns) => console.log(data, columns, '<== PDF'),
}}
in the handler function for the CSV you can use filefy package
import { CsvBuilder } from 'filefy';
and for PDF you can use jspdf and jspdf-autotable packages
import jsPDF from 'jspdf';
import 'jspdf-autotable';
also handler examples
exportCsv: (data, columns) => {
const columnTitles = columns
.map(columnDef => columnDef.title);
const csvData = data.map(rowData =>
columns.map(columnDef => rowData[columnDef.field]),
);
const builder = new CsvBuilder(`data.csv`)
.setColumns(columnTitles)
.addRows(csvData)
.exportFile();
return builder;
}
exportPdf: (data, columns) => {
const doc = new jsPDF();
const columnTitles = columns
.map(columnDef => columnDef.title);
const pdfData = data.map(rowData =>
columns.map(columnDef => rowData[columnDef.field]),
);
doc.autoTable({
head: [columnTitles],
body: pdfData,
});
doc.save(`data.pdf`);
}
Defining options on the MT component like this will allow you to show/hide each option:
options={{
// ..other options
exportButton: {
csv: true,
pdf: false
}
}}
Also, you could use localization settings to rename the label of each option like this:
localization={{
toolbar: {
exportCSVName: "Export some Excel format",
exportPDFName: "Export as pdf!!"
}
}}
It looks like the official docs are a bit outdated, so I found the answer to what you were looking for on these threads in GitHub:
exportButton
localization
Working sandbox here. Good luck!
This is piece of my react component code:
<div style={{ width }}>
<FormField
label='Select a type'
labelPlacement='top'
className='cdsdrop'
>
{({ getButtonProps }) => (
<Dropdown
{...getButtonProps({
id: 'typeDropDown',
source: data,
onChange: this.handleInputChange,
options: data
})}
/>)}
</FormField>
</div>
Am new to jest framework. I started writing testcases for submit button and reset are disabled when dropdown value is empty, after selecting dropdown buttons should get enable.
When I use props().label am getting label but when I called children am getting error.
this is mytest component
describe('Buttons should be disabled on page load', () => {
it('submit and reset buttons are disabled when type is empty', () => {
const wrapper = shallow(<CdsNettingActions/>);
const submitButton = wrapper.find('WithStyles(Component).cdssubmit');
const resetButton = wrapper.find('WithStyles(Component).cdsreset');
const dropDown = wrapper.find('WithStyles(Component).cdsdrop');
const drop1=dropDown.props().children();
console.log('drop',drop1);
expect(submitButton.prop('disabled')).toEqual(true);
expect(resetButton.prop('disabled')).toEqual(true);
});
});
But am getting below error:
TypeError: Cannot read property 'getButtonProps' of undefined
className='cdsdrop'>
When I did the console logging the children function looks as below:
getButtonProps({
id: 'typeDropDown',
borderless: true,
buttonWidth: width,
source: data,
onChange: _this4.handleInputChange,
options: data
}))
Please help me how to read options from the dropdown.
I am using shollow strong textreact 16
So your FormField's children prop is a callback that expects an object with getButtonProps property:
{({ getButtonProps }) => (
That's why when you just do
const drop1=dropDown.props().children();
it crashes - there is no object with getButtonProps. You may pass this argument, but next you will find drop1 variable contains React object, not Enzyme's ShallowWrapper. So any checks like expect(drop1.prop('something')).toEqual(2) will fail "prop is not a function".
So you either use renderProp():
const drop1 = dropDown.renderProp('children')({
getButtonProps: () => ({
id: 'typeDropDown',
borderless: true,
buttonWidth: someWidth,
source: mockedSource,
onChange: mockedOnChange,
options: mockedOptions
})
});
Or maybe it's much easier to use mount() instead.
I'm trying to get rid of the space as shown in the image below:
I'm using the Menu component of primereact from this documentation
Here's my constructor code for reference:
constructor() {
super();
this.state = {
items: [
{
label: 'First Services',
items: [
{label: 'firstitem',
command: (event) => {window.open('http://someurl','_blank');}},
{label: 'firstitemname',
command: (event) => {window.open('http://someurl#get-firstitemname','_blank');}},
{label: 'firstcategoryname',
command: (event) => {window.open('http://someurl#get-firstcategoryname','_blank');}},
]
},
{
label: 'Second Services',
items: [
{label: 'testforuser ',
command: (event) => {window.open('http://someurl#get-testforuser','_blank');}},
{label: 'testforproject',
command: (event) => {window.open('http://someurl#get-testforproject','_blank');}},
{label: 'testforprotocol ',
command: (event) => {window.open('http://someurl#get-testforprotocol','_blank');}}
]
},
{
label: 'Workflows ',
items: [
{label: 'Workflow for User ',
command: (event) => {window.open('http://someurl#workflow-section','_blank');}}
]
},
]
};
}
And here's my Menu and Button component defined:
<Menu
model={this.state.items}
popup={true}
style={{fontSize:'16px'},{width:'12%'}}
ref={el => this.menu = el}
/>
<Button
label="My DropDown Menu"
icon="pi pi-bars"
style={{width:'12%'},{backgroundColor:'#000000'}}
onClick={
(event)=>this.menu.toggle(event)
}
/>
I figured out the reason why there's space between the Button and the Menu. When I right clicked on the MY DROPDOWN MENU and selected Inspect Element Q on my Firefox browser, I saw the following-the css top property is set to 118.5px. :
I'm trying to overwrite the top property and change it to 60px from 118.5px. For that I tried modifying my code like this:
<Menu
model={this.state.items}
popup={true}
style={{fontSize:'16px'},{width:'12%'},{marginTop:'60px'}}
ref={el => this.menu = el}
/>
But it ended up showing as a separate property like this:
How can I modify top property?
Top and margin-top are 2 different things in CSS.
style={{
top:'60px'
}}
CSS: Top vs Margin-top
First check what classes are being used by the primereact menu, using console, then make a .css file and import into your .js file. Write the same name of the class as you found out using console and then override the properties you want. Then run your app again. It should work. P.S. I tried this before and this worked for me.
I have a button that when clicked, all the content is transparent.
Is it possible to manually set the text color ? Not background color !
I want black color on my font not transparent.
My Code:
import React from 'react';
import DatePicker from "react-datepicker";
import Select from 'react-select';
import "react-datepicker/dist/react-datepicker.css";
import 'react-datepicker/dist/react-datepicker-cssmodules.css';
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' },
];
class Test extends React.Component {
state = {
startDate: new Date(),
selectedOption: null,
}
constructor() {
super();
this.state = {
};
}
handleChange = date => {
this.setState({
startDate: date
});
};
handleChange = selectedOption => {
this.setState({ selectedOption });
console.log(`Option selected:`, selectedOption);
};
render() {
const { selectedOption } = this.state;
return (
<div className="grid-container">
<DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
dateFormat="yyyy-MM-dd"
/>
<Select
value={selectedOption}
onChange={this.handleChange}
options={options}
/>
</div>
);
}
}
export default Test;
I tried to manually adjust the colors through this link But without success !
I want the data to be in black letters on a white background when I click the button.
react-select is built in a way you should use CSS-in-JS and not css like describe here: https://react-select.com/styles.
Then you will be able to use some styling props like:
const customStyles = {
option: provided => ({
...provided,
color: 'black'
}),
control: provided => ({
...provided,
color: 'black'
}),
singleValue: provided => ({
...provided,
color: 'black'
})
}
And so on.
react-select v5.2.2 gives the following style keys which we can use to style different parts of UI using css
clearIndicator
container
control
dropdownIndicator
group
groupHeading
indicatorsContainer
indicatorSeparator
input
loadingIndicator
loadingMessage
menu
menuList
menuPortal
multiValue
multiValueLabel
multiValueRemove
noOptionsMessage
option
placeholder
singleValue
valueContainer
Now lets say you want to change the font color of selected option (see the img below)
now what you have to do is you need to find the right **style key** from above and
write a custom css function that's all.
you can use dev tools to inspect elements and easily find the style keys!
const customStyles = {
singleValue:(provided:any) => ({
...provided,
height:'100%',
color:'#08699B',
paddingTop:'3px',
}),
}
<ReactSelect
styles={customStyles}
/>
It took me some time to figure this out, hope it helps you and save your time to understand this.
You can find the class you want to target this way: in the browser element inspector find the element and find its class. You can that modify its class by adding:
.putElementClassNameHere {
color: black !important;
}
You might need !important for the style to be applied.