how can i use it in esm?

[artem-schander]

how can i use it in esm?

[Artem-Schander]

i used 'clipboard' as the module object's key

That was the solution. See this sandbox. Everything should work just fine this way.
I'll add a demo for vue-quill to the readme as soon as I find some time.

[Artem-Schander]

Hi @MiniJude
I don't fully understand what you mean. Are you asking how to use it in Ecma Script? If so, refer to the docs.
Besides that.. what do you need the modules default export for? there is nothing you can do with it in your code (at least i can not think of anything)

[MiniJude]

Hi @MiniJude I don't fully understand what you mean. Are you asking how to use it in Ecma Script? If so, refer to the docs. Besides that.. what do you need the modules default export for? there is nothing you can do with it in your code (at least i can not think of anything)

Thank you for your reply! I'm sorry i wasn't clear :)
I need to use the paste plug-in on the component VueQuill. I saw your demo . But options are not used in this example, which is what i want to do.

My current solution is to download the module.js file and use it this way:

<template>
  <QuillEditor ref="editorRef" :content="content" contentType="html" :toolbar="defaultToolBar" :modules="modules" theme="snow" />
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
// @ts-expect-error
import BlotFormatter from 'quill-blot-formatter/dist/BlotFormatter'
// @ts-expect-error
import PasteSmart from './pasteSmartModule.js' // this is your module.js
const props = withDefaults(
  defineProps<{
    content: string
  }>(),
  {
    content: '',
  }
)

const emits = defineEmits<{
  (event: 'update:content', content: string): void
}>()

const editorRef = ref()

const defaultToolBar = [['bold', 'italic', 'underline'], ['image'], ['formula']]

const modules = [
  {
    name: 'blotFormatter',
    module: BlotFormatter
  },
  {
    name: 'clipboard',
    module: PasteSmart,
    options: {
      allowed: {
        tags: ['a', 'b', 'strong', 'u', 's', 'i', 'p', 'br', 'ul', 'ol', 'li', 'img'],
        attributes: ['href', 'rel', 'target', 'class', 'src']
      },
      keepSelection: true,
      substituteBlockElements: true,
    }
  }
]
</script>

[Artem-Schander]

Ok, I peeked into vue-quill and tried to reproduce your issue.
I could not find any issue with importing the module by import QuillPasteSmart from 'quill-paste-smart'.
But @vueup/vue-quill seems to fire the paste event twice. This results in duplicate content.
For now I have no idea how to prevent this from happening. Tbh I think its an issue with @vueup/vue-quill since it does not happen in vanilla quill (or any other derivation I know of).
I'll try to find some time to tackle this.

[MiniJude]

Ok, I peeked into vue-quill and tried to reproduce your issue. I could not find any issue with importing the module by import QuillPasteSmart from 'quill-paste-smart'. But @vueup/vue-quill seems to fire the paste event twice. This results in duplicate content. For now I have no idea how to prevent this from happening. Tbh I think its an issue with @vueup/vue-quill since it does not happen in vanilla quill (or any other derivation I know of). I'll try to find some time to tackle this.

Every plug-in in 'modules' object will be registered into quill editor by @vueup/vue-quill, and the quill-paste-smart has registered by itemself. So it caused two triggers?
my code does not trigger twice. i used 'clipboard' as the module object's key. but yours is 'QuillPasteSmart', which is different from the one used when registering your component.
Perhaps my guess is wrong. Looking forward to your answer.

[Artem-Schander]

Every plug-in in 'modules' object will be registered into quill editor by @vueup/vue-quill, and the quill-paste-smart has registered by itemself. So it caused two triggers?

That was my first thought also. But it seems not to be the case. vue-quill does not register the plugin (at least not correctly). I get an error if I remove the "register itself" bit.