I am trying to add an ImageUpload module to Quill in React and Meteor. There will be several things I am getting wrong in trying to add this feature to Quill in react. Hopefully, someone can get me through all of them. It seems like a pretty straight forward addition to my editor, but let's just see.
The first problem is that I a cannot properly import the ImageUpload module. It may take a few suggestions to get me through this. To start, I have added these lines to my package.json file:
{
"type": "module",
...
"quill-image-uploader": "^1.2.2",
and run meteor npm install which was successful.
Then I started modifying my editor and came up with the following:
import React from 'react'
export default class PostEditor extends React.Component {
constructor(props) {
super(props)
this.state = { editorHtml: '', theme: 'snow' }
this.handleChange = this.handleChange.bind(this)
if (typeof window !== 'undefined') {
this.ReactQuill = require('react-quill');
this.quillImageUploader = require("quill-image-uploader")
this.ReactQuill.Quill.register("modules/imageUploader", this.quillImageUploader);
require('katex');
require('react-quill/dist/quill.snow.css');
}
}
handleChange (value) {
this.props.onChange(value);
}
render() {
const ReactQuill = this.ReactQuill
const { value } = this.props;
if (typeof window !== 'undefined' && ReactQuill) {
return (
<ReactQuill
onChange={this.handleChange}
theme="snow"
value={value}
modules={PostEditor.modules}
/>
)
} else {
return <textarea />;
}
}
}
PostEditor.modules = {
toolbar: [
[{ 'header': '1'}, {'header': '2'}, { 'font': [] }],
[{size: []}],
['bold', 'italic', 'underline', 'strike', 'blockquote'],
[{'list': 'ordered'}, {'list': 'bullet'},
{'indent': '-1'}, {'indent': '+1'}],
['link', 'image', 'video','formula'],
['clean']
],
clipboard: {
// toggle to add extra line breaks when pasting HTML:
matchVisual: false,
},
imageUploader: {
upload: file => {
return new Promise((resolve, reject) => {
const formData = new FormData();
formData.append("image", file);
fetch(
"https://api.imgbb.com/1/upload?key=d36eb6591370ae7f9089d85875e56b22",
{
method: "POST",
body: formData
}
)
.then(response => response.json())
.then(result => {
console.log(result);
resolve(result.data.url);
})
.catch(error => {
reject("Upload failed");
console.error("Error:", error);
});
});
}
}
}
PostEditor.formats = [
'header', 'font', 'size',
'bold', 'italic', 'underline', 'strike', 'blockquote',
'list', 'bullet', 'indent',
'link', 'image', 'video', 'formula'
]
// PostEditor.propTypes = {
// placeholder: PropTypes.string,
// }
The error I am getting for this is the following:
Uncaught SyntaxError: Cannot use import statement outside a module
at eval (modules.js?hash=616c9afc25e8c793c0ce70c001c1db7ac5a8b734:65271)
at dynamic-import.js?hash=0c8b56e0987a7736b15e9b62721475978f7e3031:134
at fileEvaluate (modules-runtime.js?hash=d3c3e5d67c95f97a60888bda7373292efad3be5e:346)
at Module.require (modules-runtime.js?hash=d3c3e5d67c95f97a60888bda7373292efad3be5e:248)
at require (modules-runtime.js?hash=d3c3e5d67c95f97a60888bda7373292efad3be5e:268)
at new PostEditor (post-editor.js:12)
at constructClassInstance (modules.js?hash=616c9afc25e8c793c0ce70c001c1db7ac5a8b734:49022)
at updateClassComponent (modules.js?hash=616c9afc25e8c793c0ce70c001c1db7ac5a8b734:52348)
at beginWork (modules.js?hash=616c9afc25e8c793c0ce70c001c1db7ac5a8b734:53305)
at performUnitOfWork (modules.js?hash=616c9afc25e8c793c0ce70c001c1db7ac5a8b734:56973)
As an aside, in VSCode, I am getting a warning of this type:
module "C:/TheCanonworks/node_modules/quill-image-uploader/src/quill.imageUploader"
Could not find a declaration file for module 'quill-image-uploader'. 'C:/TheCanonworks/node_modules/quill-image-uploader/src/quill.imageUploader.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/quill-image-uploader` if it exists or add a new declaration (.d.ts) file containing `declare module 'quill-image-uploader';`ts(7016)
No quick fixes available
from Quill Image Uploader in Meteor React (importing experimental modules?)
No comments:
Post a Comment