Thursday 18 March 2021

Quill Image Uploader in Meteor React (importing experimental modules?)

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