vueup / vue-quill

Rich Text Editor Component for Vue 3.
https://vueup.github.io/vue-quill/
MIT License
1.13k stars 282 forks source link

Clipboard matchers don't work if providing both :options and :modules #332

Closed hschk closed 1 year ago

hschk commented 1 year ago

I have defined a matcher function that changes all headings to h1 headings and referenced it in the options object. I also have a modules object.

The matcher works perfectly fine if I pass just :options alone without :modules prop. Also my custom toolbar is shown correctly.

As soon as I add :modules="modules", my custom image upload handler is working fine, but now the matcher function is not even fired when pasting a heading. Furthermore, my custom toolbar is not there anymore.

<script setup>
function matchHeadline (node, delta) {
  return delta.compose(new Delta().retain(delta.length(), { header: 1 }))
}

const options = { 
  theme: 'snow',
  toolbar: '#toolbar',
  modules: {
    clipboard: {
      matchVisual: false,
      matchers: [
        ["H2", matchHeadline],
        ["H3", matchHeadline],
        ["H4", matchHeadline],
        ["H5", matchHeadline],
        ["H6", matchHeadline],
      ],
    },
  },
}

const modules = {
  name: 'ImageUploader',
  module: ImageUploader,
  options: {
    upload: async file => {
      console.log(file)

      // just for testing  
      await new Promise(r => setTimeout(r, 1000))
      return 'https://madewithvuejs.com/mandant/madewithvuejs/images/logo.png'
    },
  },
}
</script>

With this setup the matcher is working fine and my custom toolbar is shown:

<QuillEditor
    v-model:content="content"    
    :options="options"
    content-type="html"
  />

But when I pass modules prop, the matcher is not even fired anymore and custom toolbar is gone. The image upload handler from the :modules prop is working fine tough:

<QuillEditor
    v-model:content="content"    
    :options="options"
    :modules="modules"
    content-type="html"
  >

I am using @vueup/vue-quill version 1.1.0

Thanks for any help!

stale[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.