I am new to React-Quill and I am using it to edit an HTML template. I already have custom API which I created using spark post. Now I need to get that HTML file into this editor and then user can edit the template and save it.
When I get the HTML data and pass it into editor, some of the alignments, background colors and image size are different than the original HTML.
Can anyone please provide me a solution how I can improve this?
This is my expected HTML template.
.
.
.
This is what I got from React-Quill.
I want to get the preview as the first image.
This is my current code.
import ReactQuill from 'react-quill';
import { PreviewProps } from 'app/event/emails/emailModal/preview/Preview.types';
import { useLocale } from 'hooks/useLocale/useLocale';
import { Heading, Loader, Typography } from 'ui/atoms';
import 'react-quill/dist/quill.snow.css';
import { useStyles } from './Preview.styles';
export const Preview = ({ title, previewData }: PreviewProps) => {
const classes = useStyles();
const { formatMessage } = useLocale();
if (!previewData) {
return <Loader className={classes.loader} />;
}
const modules = {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline', 'strike', 'blockquote'],
[{ list: 'ordered' }, { list: 'bullet' }],
[{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }],
['link', 'image'],
],
};
const formats = [
'header',
'font',
'size',
'bold',
'italic',
'underline',
'strike',
'blockquote',
'list',
'bullet',
'indent',
'link',
'image',
'color',
'size',
'video',
'align',
'background',
'direction',
'code-block',
'code',
];
return (
<>
<div className={classes.container}>
<Heading variant="h4" bold className={classes.title}>
{formatMessage({ id: 'event.emails.preview.title' })}
</Heading>
<Typography variant="h5" className={classes.subtitle}>
{title}
</Typography>
</div>
<ReactQuill theme="snow" modules={modules} formats={formats} value={previewData.html || ''}>
<div className="text-editor" />
</ReactQuill>
</>
);
};
Anyone please help me to get this correctly. Thank you in advance.
Related
I need your help related to mui/x-data-grid. I am trying to render a cell in mui/x-data-grid with text/icon in it based on the text value, but unable to do so.
The following is the codesandbox link:
codesandbox link
And I want something similar to this.
You can use the Chip component in MUI instead of rolling out your own, to make it look like in the screenshot, set its variant to outlined. Below is an example:
function getChipProps(params: GridRenderCellParams): ChipProps {
if (params.value === "RED") {
return {
icon: <WarningIcon style={{ fill: red[500] }} />,
label: params.value,
style: {
borderColor: red[500]
}
};
} else {
return {
icon: <CheckCircleIcon style={{ fill: blue[500] }} />,
label: params.value,
style: {
borderColor: blue[500]
}
};
}
}
const columns: GridColDef[] = [
{...},
{
field: "status",
headerName: "Status",
renderCell: (params) => {
return <Chip variant="outlined" {...getChipProps(params)} />;
}
}
];
Live Demo
MUI column data grid example :
{
field: "",
width:150,
renderCell: (cellValues) => {
return (
<>
<IconButton
color="secondary"
aria-label="add an alarm"
onClick={(event) =>
this.handleModalDelete(event, cellValues)
}
>
<DeleteIcon style={{ color: blue[500] }} />
</IconButton>
</>
);
},
}
I need to generate html code in a customRender function of one column.
I cannot use scopedSlots as suggested here, since the html code is part of e generic component, and other components pass their columns array as a parameter.
BaseComponent.vue:
<template>
<a-table
:columns="attrs.columns"
:rowKey="record => record[attrs.recordId]"
:dataSource="filteredTableData"
>
</a-table>
</template>
<script>
export default {
props: {
attrs: {
type: Object,
required: true
}
:
</script>
ContactComponent.vue:
<template>
:
<base-component :attrs="attrs"/>
:
</template>
<script>
import BaseComponent from './BaseComponent';
export default {
components: {
BaseComponent
},
data() {
return {
attrs: {
columns: [
title: 'Type',
dataIndex: 'type',
customRender: (val, record) => {
return '<div class="myClass">' + val + </div>';
},
],
recordId: 'contactId'
}
}
}
:
</script>
The problem:
The following code:
customRender: (val, record) => {
return '<div class="myClass">' + val + '</div>';
},
renders this:
Is there a way to force raw html rendering directly from the customRender function?
You can transform your code:
customRender: (val, record) => {
return '<div class="myClass">' + val + '</div>';
},
In this way (if you have JSX support).
customRender: (data) => {
return <div class="myClass"> {data.text} </div>;
},
If you dont have JSX support, you can return a Vnode. Like specified here: https://vuejs.org/guide/extras/render-function.html#creating-vnodes (I didn't try this way).
Or you can try to add support for JSX: https://vuejs.org/guide/extras/render-function.html#jsx-tsx
(My reply is late but may help others.)
==========
Edit:
Here, another exemple, to show you where this piece of code should be (only work with JSX support):
data: function () {
return {
dataSource: [],
columns: [
{
title: 'Website',
dataIndex: "cat_website",
key: "cat_website",
customRender: (data) => {
return <a href={'http://' + data.text} target='_blank'>{data.text}</a>;
},
},
// other columns...
],
// ...
}
}
I have a table and need wrap every table row to Link. How can I do that? I need that when I click on the row I go to another route. I’ve already figured out how to make a link every cell, but with the whole row I don’t know how to make
const AccountList = props => {
const columns = [
{
title: "Acc",
dataIndex: "fullName",
key: "fullName",
width: 170,
},
{
title: "Number",
dataIndex: "ID",
key: "ID",
width: 100
},
];
return (
<div style={{ margin: "15px" }}>
<Table
columns={columns}
dataSource={accInfoProps}
pagination={false}
size={"small"}
title={() => <h2 style={{ float: "left" }}>Список аккаунтов</h2>}
onRow={(record) => {
return {
onClick: () => {
console.log(record.id)
},
};
}}
/>
,
<Pagination
onChange={onChange}
style={{ float: "right", marginTop: "15px" }}
defaultCurrent={1}
total={500}
/>
</div>
);
};
export default AccountList;
Thanks in advance
Use onRow event handler on Table component to route to desired link onClick. If using react-router-dom, you can use the Redirect component to navigate to the new link.
<Table
onRow={(record, rowIndex) => {
return {
onClick: event => <Redirect push to={record.link}/>
};
}}
I'm trying to include a local JSON file from the static directory called blogs.json which has a load of blogs inside it.
I'm currently loading the blogs via Vue Axios which is a module I'm including in Nuxt JS.
Currently, the blogs are being loaded from the json file perfectly fine, however there is a noticeable few ms delay before the blogs are loaded, I'm trying to figure out a better approach to load the json file and populate the blogs array listed inside data()
This is my current code:
<script>
import PageBanner from '~/components/PageBanner';
export default {
head: {
title: 'Site Title: Blog',
meta: [
{ hid: 'description', name: 'description', content: 'Site description' }
]
},
components: {
PageBanner
},
data () {
return {
blogs: [],
isLoading: true
}
},
created () {
this.axios.get("/articles/blogs.json").then((response) => {
this.blogs = response.data
this.isLoading = false
})
}
}
</script>
This works just fine, but how could I modify this to load the json more quickly?
Just import it, do this and it should work God willing:
<template>
<div>
<!-- There should be no delay -->
{{blogs}}
</div>
<template>
<script>
import PageBanner from '~/components/PageBanner';
import blogsFromJson from '~/articles/blogs.json'; // Or wherever it is found
export default {
head: {
title: 'Site Title: Blog',
meta: [
{ hid: 'description', name: 'description', content: 'Site description' }
]
},
components: {
PageBanner
},
data () {
return {
blogs: blogsFromJson, // Just set it here
isLoading: true
}
},
/* No need for this anymore
created () {
this.axios.get("/articles/blogs.json").then((response) => {
this.blogs = response.data
this.isLoading = false
})
}
*/
}
</script>
jsPDF allows to create a table form JSON data and save that table into a PDF document. I have created a Angualr2/Typescript application to do the same. This create table form my JSON data. I'm trying to use jsPDF is create a table with horizontal headers. Example for this given here. Code to create that is as follows.
// Horizontal - shows how tables can be drawn with horizontal headers
examples.horizontal = function () {
var doc = new jsPDF('p', 'pt');
doc.autoTable(getColumns().splice(1,4), getData(), {
drawHeaderRow: function() {
// Don't draw header row
return false;
},
columnStyles: {
first_name: {fillColor: [41, 128, 185], textColor: 255, fontStyle: 'bold'}
}
});
return doc;
};
Complete code is available here. This code is written in JavaScript. I'm looking for a way to convert this into Typescript. Does anyone have any idea how to do it?
Your component might look like this:
#Component({
selector: 'my-app',
template:
`<h1>JSON to PDF app</h1>
<div class="container" id="div1">
<button id="create" (click)="convert('base')">Create file</button>
<button id="create" (click)="convert('horizontal')">
Create file with horizontal table
</button>
</div>
`
})
export class AppComponent {
cols: Array<any> = [{
title: "Details",
dataKey: 'details'
}, {
title: "Values",
dataKey: 'values'
}];
optionsContainer = {
base: {},
horizontal: {
drawHeaderRow: () => false,
columnStyles: {
details: {fillColor: [41, 128, 185], textColor: 255, fontStyle: 'bold'}
}
}
};
rows: Array<any> = [];
constructor() {
const item = {
"Name" : "XYZ",
"Age" : "22",
"Gender" : "Male"
};
this.rows = Object.keys(item).map((key) => {
return { 'details': key, 'values': item[key] };
});
}
convert(action){
const doc = new jsPDF()
.autoTable(this.cols, this.rows, this.optionsContainer[action]);
doc.save('Test.pdf');
}
}
Demo Plunker