vueup / vue-quill Goto Github PK

Version
@vueup/vue-quill version [e.g. 1.0.0-beta.5]

Describe the bug
Vue3 does not have the updatecontents function after obtaining the quill instance through Ref.

Version
@vueup/vue-quill version 1.0.0-beta.7

Describe the bug
When typing even just one character into the editor and updating the v-model content using a wrapper the cursor jumps back to the beginning position at 0,0.

To Reproduce
The steps are described on the Codesandbox, but here again for clarity:

1. Click inside the editor to some text
2. Type a character
3. The cursor position gets now reset to the start at 0,0
   Also the 'content' prop, which gets mapped to the v-model:content of the QuillEditor does not set the content of the Editor, I'd expect it to set it though.
   You can use the DevTools (F12) and the 'Toggle Device Emulation' tool to see the mobile version, same bug occurs there as well.

Expected behavior
I expect the cursor to stay at the same position when content is changed and reached down to another component, etc.

Reproduction link
https://codesandbox.io/s/vue-quill-cursor-bug-2rwzu

Browser (please complete the following information):

• Microsoft Edge (Chromium, 91.0.864.71, 64bit, Windows 10)

Additional context
The linked Codesandbox shows the wrapper component I built which changes some visual things and options depending on if you are on a big screen (Desktop) or a small screen (Mobile). It uses vue3-mq for the screen size detection.
In the quillEditorSelectionChangeEvent and quillEditorUpdateContentEvent methods in the TextEditorWrapper.vue I have some commented out code where I tried a workaround. Needless to say, that workaround didn't work out as expected, if you type too fast it breaks.

Version
@vueup/vue-quill version 1.0.0-beta.7

Describe the bug
I try to center the text and works fine in editor but in preview still remain left

To Reproduce
Steps to reproduce the behavior:
change any text align to center or right

Expected behavior
it should align base on what I align from editor

Reproduction link

Browser (please complete the following information):
chrome
latest

Additional context
please fix

Describe the bug
When pasting formatted content into the editor, sometimes additional line breaks are inserted.
While pasting is a pain in quill in general, I believe that this particular issue has been addressed (slab/quill#1483).
My problem is that I cannot seem to configure the clipboard module correctly to set matchVisual to false.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://vueup.github.io/vue-quill/
2. Remove the text in the editor and insert one line without formatting and another line as e.g. a blockquote
3. Cut and paste the entire content within the same editor
4. An extra line break is inserted between the two lines

Expected behavior
Only the previously cut (or copied) text should be pasted, nothing more.

Additional context
I have tried setting quill.clipboard.options.matchVisual = false; within onMounted of my component but that didn't help.

Any help would be highly appreciated.

this is my component

QuillEditor v-model:content="contents" :options="options" contentType="html

and here i am updating the contents value but it's not work
mounted(){
this.emitter.on("setDraftStory", (draft) => {
this.contents = draft.story;
});
}

please help with that

Version
@vueup/vue-quill version [e.g. 1.0.0-beta.7]

It directly states that there is a security vulnerability.

Describe the bug
quill <=1.3.7
Severity: moderate
Cross-site Scripting in quill - GHSA-4943-9vgg-gr5r
fix available via npm audit fix --force
Will install undefined@undefined, which is a breaking change
node_modules/quill
@vueup/vue-quill *
Depends on vulnerable versions of quill
node_modules/@vueup/vue-quill

Version
1.0.0-beta.7

Describe the bug
I am using multiple instances of VueQuill on one view, with the QuillCursors-module.

On each instance it tries to register said module, on the second attempt I then get a warning in the console:
"Overwriting modules/cursors with" – function t3()…

The app works fine, but I'd like to get rid of the warnings.
Perhaps we can use Quill.getModule before registering, but not sure.
I haven't gotten NPM to install a forked version of VueQuill to test for myself.

To Reproduce
Steps to reproduce the behavior:

1. Add two instances of VueQuill to a view with modules
2. Open console
3. See warning

Expected behavior
Instancing multiple VueQuill-editors without warnings in the console.

Browser (please complete the following information):

• Browser: safari
• Version: 15.2 (17612.3.6.1.6)

Update: you can use the supressWarning-boolean in the Quill.register-call. Set it to true and the warning is gone. I have since removed the VueQuill-plugin and made my own implementation, but this could be helpful to others perhaps.

Version
@vueup/vue-quill version [e.g. 1.0.0-beta.5]

Describe the bug
I have tried the same example but I am getting an error

Expected behavior
add of the module

Browser (please complete the following information):
chrome

Additional context
I am adding the error log here

Uncaught TypeError: Cannot convert undefined or null to object
at Function.assign ()
at composeOptions (vue-quill.esm-bundler.js?93e8:203)
at initialize (vue-quill.esm-bundler.js?93e8:131)
at eval (vue-quill.esm-bundler.js?93e8:118)
at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:163)
at Array.hook.__weh.hook.__weh (runtime-core.esm-bundler.js?5c40:2909)
at flushPostFlushCbs (runtime-core.esm-bundler.js?5c40:357)
at render (runtime-core.esm-bundler.js?5c40:5793)
at mount (runtime-core.esm-bundler.js?5c40:4081)

Version
1.0.0-beta.7

Currently formats is only able to be passed to the options prop. Since the options prop is ignored when using the modules prop (#115), formats cannot be used while also using third party Quill modules.

Please add formats as an independent prop in addition to providing it in options.

Version
@vueup/vue-quill version [e.g. 1.0.0-beta.7]

const editor = ref()
...
<QuillEditor ref="editor" ... />
...
editor.value.setHTML(htmlContnet)

Throw error
Cannot read properties of undefined (reading 'setHTML')

Hi,
When I create a new instance, the default direction of the text is RTL. If I use the JS version from quilljs.com everything works fine.
Here is my code:

<template>
  <QuillEditor ref="editor" theme="snow" @update:content="updateContent" :options="options" />
</template>

<script type="ts">
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";

export default {
  components: {
    QuillEditor,
  },
  props: {
    modelValue: String,
    readOnly: {
      type: Boolean,
      default: false
    }
  },
  setup() {
    return {
      options: {
        readOnly: true,
        theme: 'snow'
      }
    }
  },
  methods: {
    updateContent(val) {
      const html = this.$refs.editor.getHTML();
      this.$emit("update:modelValue", html);
    },
  },
  watch: {
    modelValue: function (val) {
      this.$refs.editor.setHTML(val);
    },
  },
};
</script>

I am using Vue 3.
Any ideas why this happens?

Hi,

If we want to use the last version of the package, we really need to specify the beta version (8, released in Feb 2022), because the default version is alpha.1 (released in March 2021).

Thank you,

Hello,
Has anyone run the plugin innuxt 3? Is it possible?

This is what i get out from my database when i have saved content from the editor. but there is no stylesheet to style the classes

I used your open source project, but there was an error in packaging！

v-model:content not working when changed the binding value, it seems not two way binding,

@feature

Version
@vueup/vue-quill version ^1.0.0-beta.7
Nuxt 3
Describe the bug

ReferenceError: document is not defined in node_modules\quill\dist\quill.js

To Reproduce
Steps to reproduce the behavior:

1. Create nuxt3 App,
2. install @vueup/vue-quill
3. create plugins folder
4. create quill.ts file
5. Add: import { defineNuxtPlugin } from '#app'
   import { QuillEditor } from '@vueup/vue-quill'
   import '@vueup/vue-quill/dist/vue-quill.snow.css';
   import '@vueup/vue-quill/dist/vue-quill.bubble.css';
   export default defineNuxtPlugin(nuxtApp => {
   // Doing something with nuxtApp
   nuxtApp.vueApp.component('QuillEditor', QuillEditor);
   })

Browser (please complete the following information):

• Chrome

Not sure if this is the right place to ask this but could really use some help..

Im using a clipboard matcher to detect when a user pastes an img into my quill editor. My handler function works as follows:

pasteHandler(node, delta) {
let imgSrc = delta.ops[0].insert.image;

//imgSrc gets sent to an api to be stored and new img src is returned

//once I have the new src from my api res I add the image into my quill instance:

this.quillInstance.updateContents(
new Delta().insert({
image: New Image Source,
})
);
},
Everything works as expected and my image is displayed with the new updated source. The problem is I get this error from quill every time:

quill.js?9339:494 Uncaught TypeError: Cannot read properties of undefined (reading 'ops')
at Delta.concat (quill.js?9339:494)
at eval (quill.js?9339:9097)
at NodeList.reduce ()
at traverse (quill.js?9339:9087)
at eval (quill.js?9339:9088)
at NodeList.reduce ()
at traverse (quill.js?9339:9087)
at h.convert (quill.js?9339:8959)
at h.convert (quill.js?9339:8945)
at h.value (quill-paste-smart.js?593d:3)

Nothing breaks but I can't have this error message show up every time someone pastes an image in the editor

Any assistance would be greatly appreciated!

Version
3.0.6

Describe the bug
I am unable to set up vue-quill editor in a way that links automatically become clickable.

To Reproduce
I used 2 different libraries for this purpose and both of them crashed my app.

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

// First Attempt:
// import AutoLinks from 'quill-auto-links';
// VueQuillEditor.register(AutoLinks)

// Second Attempt:
// import MagicUrl from 'quill-magic-url'
// VueQuillEditor.register('modules/magicUrl', MagicUrl)

Vue.use(VueQuillEditor)

Expected behavior
I should be able to have an option to make links clickable automatically. Please tell me if such a possibility already exists.

After installing and setting up everyting like in the docs i get

[Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function. at <QuillEditor theme="snow" >

My Code

<template>
  <app-layout>
    <template #header>
      <h2 class="font-semibold text-xl text-gray-800 leading-tight">
        Posts
      </h2>
    </template>

    <div class="py-12">
      <div class="container">
        <div>
          <QuillEditor theme="snow"/>
        </div>
      </div>
    </div>
  </app-layout>
</template>

<script>
import AppLayout from '@/Layouts/AppLayout'
import {QuillEditor} from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

export default {
  components: {
    AppLayout,
    QuillEditor
  },
  created() {
  },
  data() {
    return {}
  },
};
</script>

🚨 The automated release from the alpha branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the alpha branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Missing name property in package.json.

The package.json's name property is required in order to publish a package to the npm registry.

Please make sure to add a valid name for your package in your package.json.

Good luck with your project ✨

Your semantic-release bot 📦🚀

I want to handle invalid link with an error. How to do it ?

Like this text would throw an error since it is not a valid video link. Thanks for reading

Version
@vueup/vue-quill version [e.g. 1.0.0-beta.7]

When I pass a prop with v-model directive to a child component (as described here ) and use it as content for QuillEditor, I get this error:
error Unexpected mutation of "description" prop vue/no-mutating-props.

Goal is to initialize QuillEditor with the prop as content and to propagate changes to the parent component.

Parent component:

<template>
  <CustomForm v-model:description="description"></TechnologyForm> 
</template>

<script>
import { ref } from 'vue'
import CustomForm from '@/components/CustomForm .vue'

export default {
   components: { 
      CustomForm 
    },
   setup(){
      const description= ref('')

      return(description)
   }
}
</script>

Child component CustomForm :

<template>
    <QuillEditor theme="snow" toolbar="essential" v-model:content="description" contentType="html"/>
</template>

<script>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

export default {
    props: ['description']
}
</script>

Version
@vueup/vue-quill version [^1.0.0-beta.7]

Code
NO.1

NO.2

Describe the bug
the config of the property 'modules' of 'options' prop of quill-editor component is not take effect.

To Reproduce
Steps to reproduce the behavior:

1. Config editor like the code case
2. Run application
3. Route to the page which had been configured the editor.
4. and then you will found the all config about modules is all not take effect

Solve Method
there is my currently way that used to avoid the bug

Version
"@vueup/vue-quill": "^1.0.0-beta.7",

Describe the bug
When i use the v-model (value type: string) to bind the string on VueQuill component, default value ( by setHTML() method ) will be

Version
"@vueup/vue-quill": "^1.0.0-alpha.1",

Describe the bug
install and follow the document to use,it's just can't work!

my whole code：

chrome console：

I tried in all ways to add the Emoji Module https://github.com/contentco/quill-emoji, in plus is not possible import the Quill instance from vue-quill.

So if someone did it, or can fix it would be awesome

Version
@vueup/vue-quill version [e.g. 1.0.0-alpha.1]

Describe the bug
Before the module is registered, it is not checked whether the module already exists, which causes quill to issue an alarm when it is repeatedly registered

Version
@vueup/vue-quill version [e.g. 1.0.0-beta.5]

Describe the bug
When you press enter/return in the editor extra lines are created in the editor with

To Reproduce
Steps to reproduce the behavior:

1. Open the editor on a page.
2. Press enter twice.
3. Notice you can down arrow twice.
4. Inspect the editor and you'll see additional tags being created that should not exist.

Expected behavior
When pressing enter/return only new lines are added for the returns.

Reproduction link
N/A

Browser (please complete the following information):

• Browser Chrome
• Version 95.0.4638.54 (Official Build) (arm64)

Additional context
N/A

🚨 The automated release from the beta branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the beta branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two Factor Authentication for your account, set its level to "Authorization only" in your account settings. semantic-release cannot publish with the default "
Authorization and writes" level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

Good luck with your project ✨

Your semantic-release bot 📦🚀

When the component mounts, it automatically grabs focus. This isn't desirable behaviour when the editor is rendered in a form with other components.

(Fantastic component by the way!)

Version
@vueup/vue-quill version [e.g. 1.0.0-beta.5]

Describe the bug
I am trying to have the following options: 'Bold', 'Italics', 'Underline' and 'Bullet List. The problem comes when I am initializing the toolbar, which is about to sent as a prop to the QuillEditor. The problem is, I am not able to see the icon of bullet list. When I used the element tracker in chrome to find out what is happening to the HTML element of the button, I found out that the class name is 'ql-list' and the value property is 'bullet' for bullet list and 'ordered' for a numbered list. The prop I am sending takes only the className and there is no way to send the value or I am not able to find a way in the documentation. I have given the screenshots below and explained a little bit more in detail.

Problem Screenshot

In the above picture, you can see the button is implemented but the icon is hidden. The functionality is working, but the visual representation of the button is not present.

Furthermore, to see what's wrong, I checked the HTML element's class to see what is happening there and found out this.

if you see the highlighted parts, the list type is decided based on the value and I cannot find a way to send the value in the VueJs documentation.

Please Help!

🚨 The automated release from the alpha branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the alpha branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Missing name property in package.json.

The package.json's name property is required in order to publish a package to the npm registry.

Please make sure to add a valid name for your package in your package.json.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Hi
I am using Laravel 8 + InertiaJs + Vue 3
everything works great in development but when I build the project the editor buttons are loaded like without css and nothing works at all in editor

These screenshots are from browser window

can anyone tell me what to do about this problem?

Hi! When I installed it (twice) via npm, according to the docs: npm install @vueup/vue-quill@alpha --save I was missing all the .css files.

However when I installed it according to npmjs.com with npm i @vueup/vue-quill I got all the .css files.

No expert at all in npm so maybe something wrong with my setup but currently running a Laravel Sail environment with default settings in Laravel Mix.

This package does import Quill from 'quill' which loads the entire quill as opposed to just core quill/core. This leads to least 40kb of extra JS in the bundle.

Any chance this could be prevented?

How to insert the specified html content at the cursor position?

Version
@vueup/vue-quill version [e.g. 1.0.0-beta.6]

Describe the bug
interactive toolbar elements is not working. So i am trying with basic usage and seems like i can not change font size, first drop down is not working

To Reproduce
Steps to reproduce the behavior:
i just tried to use <quill-editor :theme="'snow'"></quill-editor> with default toolbar and 'Normal' is not clickable in chrome. But demo works fine for me. In firefox everything ok

Browser (please complete the following information):

• Browser chrome version 91.0.4472.77

Thanks!

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Install using npm install @vueup/vue-quill@beta --save
2. Import using import { QuillEditor } from '@vueup/vue-quill';
3. See error on Terminal

ERR message
ERROR in ./node_modules/@vueup/vue-quill/dist/vue-quill.esm-bundler.js
Module not found: Error: Can't resolve 'vue' in '/Users/myusername/Sites/projectname/node_modules/@vueup/vue-quill/dist'
@ ./node_modules/@vueup/vue-quill/dist/vue-quill.esm-bundler.js 15:0-91 48:20-35 117:8-17 120:8-23 125:23-26 212:30-33 218:8-13 292:12-20 299:8-13 304:8-13 326:12-13
@ ./static/js/vue/blog/App.js

Expected behavior
As seen on https://vueup.github.io/vue-quill/guide/usage.html

Version
@vueup/vue-quill version [e.g. 1.0.0-beta.8]

Describe the bug
When I install the plug-in “quill-blot-formatter ^1.0.5”, and it words in development env.
But , but it doesn't works in product env.
"Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'className')"
the plug-in “quill-blot-formatter" has bug

How to use methods Vuequill, like setHTML,getHTML ...

I try use setHTML on ready event but return setHTML is not a function..

Version
@vueup/vue-quill version [e.g. 1.0.0-beta.7]

Describe the bug
I'm using vite-ssg for server side building of app. When I tried to build the project, quill is throwing this error

ReferenceError: document is not defined
    at Object.<anonymous> (/web/node_modules/.pnpm/quill@1.3.7/node_modules/quill/dist/quill.js:7661:12)
    at __webpack_require__ (/web/node_modules/.pnpm/quill@1.3.7/node_modules/quill/dist/quill.js:36:30)
    at Object.<anonymous> (/web/node_modules/.pnpm/quill@1.3.7/node_modules/quill/dist/quill.js:1030:1)
    at __webpack_require__ (/web/node_modules/.pnpm/quill@1.3.7/node_modules/quill/dist/quill.js:36:30)
    at Object.<anonymous> (/web/node_modules/.pnpm/quill@1.3.7/node_modules/quill/dist/quill.js:5655:14)
    at __webpack_require__ (/web/node_modules/.pnpm/quill@1.3.7/node_modules/quill/dist/quill.js:36:30)
    at Object.<anonymous> (/web/node_modules/.pnpm/quill@1.3.7/node_modules/quill/dist/quill.js:10045:13)
    at __webpack_require__ (/web/node_modules/.pnpm/quill@1.3.7/node_modules/quill/dist/quill.js:36:30)
    at Object.<anonymous> (/web/node_modules/.pnpm/quill@1.3.7/node_modules/quill/dist/quill.js:11557:18)
    at __webpack_require__ (/web/node_modules/.pnpm/quill@1.3.7/node_modules/quill/dist/quill.js:36:30)
 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Command failed with exit code 1.

Please suggest some ways to fix this issue

The editor doesn't change when it's v-model variable changes. Why is that?

So testReset() does nothing visual in this example.

Code:

<QuillEditor
        :id="name"
        v-model:content="test"
        :name="name"
        theme="bubble"
        toolbar="essential"
        content-type="html"
></QuillEditor>

<button @click="testReset()">reset</button>

data: {
  return {
    test: ""
  }
}

methods: {
    testReset() {
      console.log(this.test);
      this.test = "resetted";
    },
}

I have an error when I'm trying to import the plugin onto the project.

import QuillEditor from '@vueup/vue-quill

Uncaught Error: Module parse failed: Unexpected token (8:215655)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

import QuillEditor from '@vueup/vue-quill/dist/vue-quill.es'

or

import QuillEditor from '@vueup/vue-quill/dist/vue-quill.cjs'

Uncaught Error: Module parse failed: Unexpected token (11541:43)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|                     editor.value.classList.remove("ql-snow");
|                 // Fix clicking the quill toolbar is detected as blur event
>                 quill.getModule("toolbar")?.container.addEventListener("mousedown", (e) => {
|                     e.preventDefault();
|                 });
    at Object../node_modules/@vueup/vue-quill/dist/vue-quill.es.js (index.esm.js:741)

and same type of errors when importing other modules

My package.json

{
  "name": "___",
  "version": "1.1.0",
  "description": "___",
  "private": true,
  "loglevel": "silent",
  "scripts": {
    "clean": "rimraf public",
    "dev": "cross-env NODE_ENV=development webpack",
    "start": "cross-env NODE_ENV=development webpack-dev-server",
    "build": "npm run clean -s && cross-env NODE_ENV=production webpack"
  },
  "keywords": [
    "scss",
    "pug",
    "babel"
  ],
  "author": "___",
  "license": "ISC",
  "browserslist": [
    "last 2 version",
    "> 1%",
    "not dead"
  ],
  "devDependencies": {
    "@babel/core": "7.6.4",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-proposal-optional-chaining": "^7.10.4",
    "@babel/preset-env": "^7.12.11",
    "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
    "@vue/babel-plugin-jsx": "^1.0.0",
    "@vue/babel-preset-jsx": "^1.1.2",
    "@vue/compiler-sfc": "^3.0.5",
    "babel-eslint": "10.0.2",
    "babel-loader": "8.0.6",
    "copy-webpack-plugin": "^6.4.1",
    "cross-env": "6.0.3",
    "css-loader": "3.2.0",
    "dotenv-webpack": "^2.0.0",
    "eslint": "^7.18.0",
    "eslint-plugin-babel": "5.3.0",
    "eslint-webpack-plugin": "^2.4.2",
    "file-loader": "4.2.0",
    "html-beautify-webpack-plugin": "^1.0.5",
    "html-loader": "0.5.5",
    "html-webpack-harddisk-plugin": "1.0.1",
    "html-webpack-plugin": "3.2.0",
    "mini-css-extract-plugin": "0.8.0",
    "node-sass": "^4.14.1",
    "node-sass-json-importer": "4.1.0",
    "optimize-css-assets-webpack-plugin": "5.0.3",
    "path": "0.12.7",
    "pug": "2.0.4",
    "pug-html-loader": "1.1.5",
    "pug-loader": "2.4.0",
    "raw-loader": "3.1.0",
    "rimraf": "3.0.0",
    "sass-loader": "^8.0.2",
    "svg-url-loader": "^7.1.1",
    "terser-webpack-plugin": "^4.1.0",
    "vue-loader": "^16.0.0-rc.1",
    "vue-template-compiler": "^2.6.12",
    "webpack": "4.41.2",
    "webpack-bundle-analyzer": "^4.3.0",
    "webpack-cli": "3.3.9",
    "webpack-dev-server": "^3.11.2",
    "write-file-webpack-plugin": "^4.5.1"
  },
  "dependencies": {
    "@glidejs/glide": "^3.4.1",
    "@staaky/fresco": "^2.3.1",
    "@vueform/multiselect": "^1.3.5",
    "@vuelidate/core": "^2.0.0-alpha.8",
    "@vuelidate/validators": "^2.0.0-alpha.5",
    "@vueup/vue-quill": "^1.0.0-alpha.6",
    "@yaireo/tagify": "^3.6.10",
    "anchorme": "^2.1.2",
    "axios": "^0.21.1",
    "bootstrap-4-grid": "^3.0.0",
    "choices.js": "^9.0.1",
    "core-js": "^3.8.3",
    "jquery": "^3.5.0",
    "lodash": "^4.17.20",
    "mobile-device-detect": "^0.4.3",
    "normalize.css": "^8.0.1",
    "pristinejs": "^0.1.6",
    "quill": "^1.3.7",
    "regenerator-runtime": "^0.13.7",
    "sass-mq": "5.0.1",
    "selectric": "^1.13.0",
    "tail.datetime": "^0.4.13",
    "tingle.js": "^0.15.3",
    "uuid": "^8.3.1",
    "v-click-outside": "^3.0.1",
    "vue": "^3.0.5",
    "vue-final-modal": "^1.8.4",
    "vue-native-websocket-vue3": "^3.0.2",
    "vue-upload-component": "^3.0.47",
    "vuex": "^4.0.0-rc.2",
    "vuex-map-fields": "^1.4.1"
  }
}

My Webpack configuration

// System
const webpack = require('webpack')
const fs = require('fs')
const path = require('path')

// Common
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const { VueLoaderPlugin } = require("vue-loader")

// Development
const address = require('ip').address
const WriteFileWebpackPlugin = require('write-file-webpack-plugin')
// const ESLintPlugin = require('eslint-webpack-plugin')
const Dotenv = require('dotenv-webpack')

// Production
const HtmlBeautifyPlugin = require('html-beautify-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

// User
const paths = require('./webpack/paths')
const helpers = require('./webpack/helpers')

const pugTemplates = [];
const srcll = fs.readdirSync(paths.dirSrcPug);
srcll.forEach(s => s.endsWith('.pug') && pugTemplates.push(s));

const webpackConfig = {
  mode: process.env.NODE_ENV,
  entry: {
    main: paths.dirSrcJs + '/app.js',
    vue: paths.dirSrcJs + '/vue/index.js'
  },
  output: {
    path: paths.dirDist,
    filename: 'js/[name].bundle.js'
  },
  resolve: {
    alias: {
      '#root': paths.dirSrcJs,
      '#vue': paths.dirSrcJs + '/vue',
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    useBuiltIns: 'entry',
                    corejs: "3.8"
                  }
                ],
                '@vue/babel-preset-jsx'
              ],
              plugins: [
                ['@babel/plugin-proposal-class-properties', { 'loose': true }],
                ['@babel/plugin-proposal-optional-chaining'],
                ['@vue/babel-plugin-jsx'],
                // ['eslint-plugin-babel'],
              ]
            }
          }
        ]
      },
      {
        test: /\.css$/,
        use: helpers.styleLoaders([], process.env.NODE_ENV)
      },
      {
        test: /\.scss$/,
        use: helpers.styleLoaders([{
          loader: 'sass-loader',
          options: {
            sourceMap: process.env.NODE_ENV === 'development' ? true : false,
          },
        }], process.env.NODE_ENV)
      },
      {
        test: /\.pug$/,
        use: ['raw-loader', 'pug-html-loader']
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.svg$/,
        loader: 'svg-url-loader'
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      __VUE_OPTIONS_API__: true,
      __VUE_PROD_DEVTOOLS__: false,
    }),
    ...pugTemplates.map(templateName => new HtmlWebpackPlugin({
      inject: true,
      template: `./src/pug/${templateName}`,
      filename: path.join(paths.dirDist, templateName.replace('.pug', '.html')),
      minify: false,
      alwaysWriteToDisk: true,
    })),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    }),
    new CopyWebpackPlugin({
      patterns: [
        { from:'src/assets', to:'assets' },
      ]
    }),
    new VueLoaderPlugin(),
  ],
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
}

if (process.env.NODE_ENV === 'development') {
  // console.log(path.join(paths.dirSrc, '/**/*.js'))
  // console.log(paths.rootPath)
  webpackConfig.devtool = 'source-map'
  webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin())
  webpackConfig.plugins.push(new Dotenv({
    path: '.env.dev',
    systemvars: true,
  }))
  webpackConfig.plugins.push(new WriteFileWebpackPlugin())
  // webpackConfig.plugins.push(new ESLintPlugin())
  webpackConfig.devServer = {
    compress: true,
    quiet: true,
    stats: {
      assets: false,
      children: false,
      chunks: false,
      chunkModules: false,
      colors: true,
      entrypoints: false,
      hash: false,
      modules: false,
      timings: false,
      version: false,
    },
    hot: true,
    lazy: false,
    host: address(),
    port: 3000,
    clientLogLevel: 'error',
    headers: {
      'Access-Control-Allow-Origin': '*'
    },
    open: true
  }
}

if (process.env.NODE_ENV === 'production') {
  webpackConfig.plugins.push(new HtmlBeautifyPlugin({
    config: {
      html: {
        end_with_newline: false,
        indent_size: 2,
        indent_with_tabs: false,
        indent_inner_html: false,
        preserve_newlines: false,
        wrap_line_length: 0,
        inline: [],
        unformatted: [],
      }
    },
  }))
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
  webpackConfig.optimization.minimizer = [
    new TerserPlugin(),
    new OptimizeCSSAssetsPlugin()
  ]
}

module.exports = webpackConfig

Version
@vueup/vue-quill version"^1.0.0-alpha.40",

Describe the bug
In detail page I set content-type html and set content = '

...

To Reproduce
Steps to reproduce the behavior:
directly

Expected behavior
The editor show the content that I set

Reproduction link
If available, add a link to the source code to help explain your problem.

Browser (please complete the following information):
Chrome 89.0.4389.114

Additional context
Add any other context about the problem here.

Hi.
Quill adds classes to tags by default, but this is not correct. Is it possible to use styling via the style attribute? here is an example from the documentation for the library, but it doesn't work here.

Version 1.0.0-beta.5

Describe the bug
Following the documentantion: "returns the Quill instance that backs the editor. While you can freely use this to access methods such as getText(), focus(), and much more."

But focus() not work, getText, html is ok.

To Reproduce

1. Go use some method
2. get quill instance
3. set focus
4. See warning in console and no focus

I download the library with npm and i got "Object(...) is not a function" error where implemented component. Also i got this error on main.js. Which point that i'm missing?

I'm following this guideline

Project using
"vue": "~2.6.11"

Current vue-quill
"@vueup/vue-quill": "^1.0.0-alpha.35"

The version number of vue is 3.2.25
[Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.