I built an editor using draftjs. When I click image control, a dialog pops up. The dialog allows the user to enter source, target, and also different styles of the image like padding, border, etc.
I can see the image with the border and padding in the editor when I upload the image. But then I click toHtml control and then fromHTML and the styles are lost. I am using draft-js-export-html/draft-js-import-html for this.
This is Image.js
const Image = ({ contentState, entityKey, block }) => {
const eKey = entityKey || block.getEntityAt(0);
const entity = contentState.getEntity(eKey);
const { alt, height, src, width, horizontalPadding, verticalPadding, border } = entity.getData();
const imageStyle = {
padding: `(${verticalPadding} || 0)px (${horizontalPadding} || 0)px`,
border: `${border}px solid red`
};
return <img alt={alt} height={height} src={src} style={imageStyle} width={width} />;
};
How do we store these styles for the image so that they are not lost when we toggle between toHtml and fromHTMl?
Related
I have used react bootstrap to display a popup when page is loaded. I want to change the position of the box with tailwind css and the position is changing but there's a white box present on the screen. can you please help me how to remove it?
import React,{useState} from 'react';
import {Modal} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
const Popup = () => {
const [show, setShow] = useState(true);
const handleClose = () => setShow(false);
return (
<>
<Modal show={show} onHide={handleClose}>
<Modal.Body className="bg-black absolute top-44"><input className="pl-2 py-1" placeholder="search..."/></Modal.Body>
</Modal>
</>
);
}
export default Popup
It will show because you are applying absolute position with top:44px you can use margin then it will show inside of white box if you don't required white box then you have to remove default background color from .modal-content class.
Hello i want to put a style opacity:0.3 on img
<ion-content [style]="getBackgroundImg()">
getBackgroundImg() {
const img = this.mediaDetails.image_path;
const style = `background-image: url(${img}); `;
return this.sanitizer.bypassSecurityTrustStyle(style);
}
Note: i want put opacity only on const img not on the whole ion-content. It doesnt take the opacity in the object
You can add the opacity property in a style e.g.
const style = `background-image: url(${img}); opacity:0.3 `;
I have to import a custom svg icon and use it as a button within my application
What I have been doing it is,
import high from '../img/high.svg';
const styles = theme => ({
icon: {
color: red[800],
height: '15px',
width: '15px',
cursor: 'pointer'
}
});
<IconButton><CardMedia image={high} className={classes.icon}/></IconButton>
But this does not behave like a button and I do not get the hand symbol for onClick. What is the best way to display the icon as a button?
Do a styled component that is styled s a span
interface IconProps {
color: 'blue' | 'red' | 'green';
size: string;
margin: string;
}
export const Icon = styled.span<IconProps>`
color: ${props => props.color || '#000000'};
font-size: ${props => props.size || ''};
margin: ${props => props.margin || null};
cursor: pointer;
`;
You do not have to use props like I have, but this works fine for me. spans are very useful when forcing styling on to things like text and SVGs.
Example
<Icon size="150px" color="green">
<i className="fab fa-fort-awesome-alt"/>
</Icon>
NOTE: I do use typescript. You may not need to use an interface if you dont use props. I just left it there as part of my example I have done.
I followed the steps in this link to change the background color material-ui --> Date Picker dialog by changing the theme. Changing the theme changed background color but it did not change the color of the OK and CANCEL buttons.How to change the color of OK and CANCEL buttons?
You have two options to customize the color of the OK and Cancel buttons.
(Easier) If you are okay with all flat buttons in your application using same, customized color you want to use on your Date Picker buttons, then you can simply add
flatButton: {
primaryTextColor: purple500, // Whatever color you want.
}
to the object you are passing into your getMuiTheme() call.
If you are only customizing the button colors in this situation, and want the other Flat Buttons in your application to take the theme's color, then you need to customize the muiTheme right before the DatePicker is used.
So if we wanted to have all of our Flat Buttons to be cyan500, then we would set that at our main
const mainMuiTheme = getMuiTheme({
flatButton: { primaryTextColor: cyan500 }
})
const WrapperWithMainThemeProvider = (props) => {
return (
<MuiThemeProvider muiTheme={mainMuiTheme}>
<MyDatePicker />
</MuiThemeProvider>
)
}
Then if wanted the buttons in our DatePicker to be customized, then we do that in a custom component.
class MyDatePicker extends React.class {
render() {
const muiTheme = getMuiTheme({
...this.context.muiTheme,
flatButton: {
primaryTextColor: purple500,
}
})
// Customize the muiTheme, and pass it down in a new MuiThemeProvider.
// Only Flat Buttons that are children of this component
// will have the new color.
return (
<MuiThemeProvider muiTheme={muiTheme}>
<DatePicker />
</MuiThemeProvider>
)
}
}
MyDatePicker.contextTypes = {
muiTheme: React.PropTypes.object.isRequired
}
Material-UI uses Flatbutton as default on datepicker or for any dialog. Which means the OK/CANCEL button you see on datepicker is nothing but a flatbutton. So to apply background color to OK/CANCEL button of Date picker you have to use color instead of primaryTextColor. The color attribute of flatbutton does change the button background color. Please find example below and Screenshot here
import DatePicker from 'material-ui/DatePicker';
const mainMuiTheme = getMuiTheme({
flatButton: { color: '#333' }
})
const WrapperWithMainThemeProvider = (props) => {
return (
<MuiThemeProvider muiTheme={mainMuiTheme}>
<DatePicker
floatingLabelText="Date Of Birth"
hintText="Select Date Of Birth"
container="inline"
locale="en-US"
firstDayOfWeek={0}
autoOk={true}
value={this.state.dob}
onChange={this.changeDateOfBirth}
defaultDate={this.state.dateYesterday}
>
</DatePicker>
</MuiThemeProvider>
)
}
And below is what Material-UI expects muiTheme styles for FlatButton.
flatButton: {
color: transparent,
buttonFilterColor: '#999999',
disabledTextColor: fade(palette.textColor, 0.3),
textColor: palette.textColor,
primaryTextColor: palette.primary1Color,
secondaryTextColor: palette.accent1Color,
fontSize: typography.fontStyleButtonFontSize,
fontWeight: typography.fontWeightMedium,
}
For more information about muiTheme styles of each material-UI component check the following link https://github.com/mui-org/material-ui/blob/master/src/styles/getMuiTheme.js
I tested this and it worked for me. Hope this answer helpful.
I am using TinyMCE plugin. Currently, my font-size option comes with list dropdown but I want slider for font size.
Is this possible with the TinyMCE. Anyone know how can I achieve this with TinyMCE editor?
TinyMCE does not have a built in way to select font size via a "slider". As TinyMCE is open source you can always modify the editor's code to meet your needs.
If you look in the main tinymce.js file you will find code like this:
editor.addButton('fontsizeselect', function() {
var items = [], defaultFontsizeFormats = '8pt 10pt 12pt 14pt 18pt 24pt 36pt';
var fontsize_formats = editor.settings.fontsize_formats || defaultFontsizeFormats;
each(fontsize_formats.split(' '), function(item) {
var text = item, value = item;
// Allow text=value font sizes.
var values = item.split('=');
if (values.length > 1) {
text = values[0];
value = values[1];
}
items.push({text: text, value: value});
});
return {
type: 'listbox',
text: 'Font Sizes',
tooltip: 'Font Sizes',
values: items,
fixedWidth: true,
onPostRender: createListBoxChangeHandler(items, 'fontsize'),
onclick: function(e) {
if (e.control.settings.value) {
editor.execCommand('FontSize', false, e.control.settings.value);
}
}
};
});
This is how the current select list is implemented - you can always replace this with logic to implement font selection in a different manner.