Suggestion on How to use this with vue-quill

[eokwukwe]

Has anyone tried using this package with vue-quill? I need help on how to integrate the vue-quill.

[c-w]

What issues are you facing?

[eokwukwe]

@c-w. The custom operator buttons are not showing. This is my component:

<script setup>
// KaTeX dependency
import katex from 'katex';
window.katex = katex;
import 'katex/dist/katex.css';

import { QuillEditor, Quill } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.bubble.css';
import '@vueup/vue-quill/dist/vue-quill.snow.css';

import '@edtr-io/mathquill/build/mathquill.js';
import '@edtr-io/mathquill/build/mathquill.css';

// mathquill4quill include
import mathquill4quill from 'mathquill4quill';
import 'mathquill4quill/mathquill4quill.css';

import { onBeforeMount, onMounted, ref } from 'vue';

const operators = [
  ['\\pm', '\\pm'],
  ['\\sqrt{x}', '\\sqrt'],
  ['\\sqrt[3]{x}', '\\sqrt[3]{}'],
  ['\\sqrt[n]{x}', '\\nthroot'],
  ['\\frac{x}{y}', '\\frac'],
  ['\\sum^{s}_{x}{d}', '\\sum'],
  ['\\prod^{s}_{x}{d}', '\\prod'],
  ['\\coprod^{s}_{x}{d}', '\\coprod'],
  ['\\int^{s}_{x}{d}', '\\int'],
  ['\\binom{n}{k}', '\\binom'],
];

const quill = ref();
const content = ref('');

onMounted(() => {
  console.log('mounted', quill.value);
  const enableMathQuillFormulaAuthoring = mathquill4quill({ Quill, katex });

  enableMathQuillFormulaAuthoring(quill, {
    operators,
  });
});

const textChange = (prop) => {
  console.log('textChange', content.value);
};
</script>

<template>
  <div>
    <QuillEditor
      id="quill-editor"
      v-model:content="content"
      theme="snow"
      placeholder="Type text here, or click on the formula button to enter math."
      ref="quill"
      :options="{
        modules: {
          formula: true,
          toolbar: [['bold', 'italic', 'underline'], ['formula']],
        },
      }"
      @editorChange="textChange"
    />
  </div>
</template>

When I load the page, check the error:

The error is coming from this line

  enableMathQuillFormulaAuthoring(quill, {
    operators,
  });

I have tried using quill.value like this:

  enableMathQuillFormulaAuthoring(quill.value, {
    operators,
  });

but I get the error:

[c-w]

I don’t regularly use Vue, but if you open a pull request with a minimal setup/demo project (like this one for React), I can take a look and fix/integrate it.

[eokwukwe]

@c-w. I just added the PR.

[c-w]

Thanks for the PR, will review by end of week.

[c-w]

@eokwukwe Apologies for the delay and thank you for providing the sample code. I now found some time to look into this and found the issue. It turns out that unlike the main quill library, vue-quill doesn't expose the .container property on the quill reference. Injecting this value manually into the object that's passed down to mathquill4quill like shown in the patch below will fix the integration.

diff --git a/rvuejs/src/components/TextEditor.vue b/rvuejs/src/components/TextEditor.vue
index 6aec045..2f96db0 100644
--- a/rvuejs/src/components/TextEditor.vue
+++ b/rvuejs/src/components/TextEditor.vue
@@ -33,6 +33,7 @@ const content = ref('');
 
 onMounted(() => {
   console.log('mounted', quill.value);
+  quill.value.container = quill.value.getEditor();
   const enableMathQuillFormulaAuthoring = mathquill4quill({ Quill, katex });
 
   enableMathQuillFormulaAuthoring(quill.value, {

For now, you can work around the issue like shown above, but ideally this is something that would be fixed in the upstream vue-quill project. Feel free to submit an issue linked to this one and let's see if vue-quill is willing to fix the problem.

[digitalboy]

<template>
    <QuillEditor id="quill-editor" ref="quillEditor" theme="snow" v-model:content="content" :options="editorOptions" />
</template>

<script lang="ts">
import "./jquery";
import katex from 'katex';
window.katex = katex;
import { ref, onMounted, defineComponent} from 'vue';
import { QuillEditor, Quill } from '@vueup/vue-quill';
import mathquill4quill from 'mathquill4quill';
import '@edtr-io/mathquill/build/mathquill.js';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import 'katex/dist/katex.min.css';
import '@edtr-io/mathquill/build/mathquill.css';
import 'mathquill4quill/mathquill4quill.css';

export default defineComponent({
    components: { QuillEditor },
    setup() {
        const content = ref('');
        const quillEditor =  ref();

        // 定义 operators 数组
        const operators = [
            ["\\pm", "\\pm"],
            ["\\sqrt{x}", "\\sqrt"],
            ["\\sqrt[3]{x}", "\\sqrt[3]{}"],
            ["\\sqrt[n]{x}", "\\nthroot"],
            ["\\frac{x}{y}", "\\frac"],
            ["\\sum^{s}_{x}{d}", "\\sum"],
            ["\\prod^{s}_{x}{d}", "\\prod"],
            ["\\coprod^{s}_{x}{d}", "\\coprod"],
            ["\\int^{s}_{x}{d}", "\\int"],
            ["\\binom{n}{k}", "\\binom"]
        ];

        const editorOptions = {
            modules: {
                toolbar: [['formula']],
            },
        };

        onMounted(() => {
            if (quillEditor.value && quillEditor.value.$quill) {
                const quillInstance = quillEditor.value.$quill;
                quillInstance.container = quillInstance.getEditor();
                const enableMathQuillFormulaAuthoring = mathquill4quill({ Quill, katex });
                enableMathQuillFormulaAuthoring(quillInstance, {
                    operators: operators
                });
            }

        });

        return { content, quillEditor, editorOptions };
    },
});
</script>

there is not operators, could you tell me the reason? thanks.

[c-w]

@digitalboy Take a look at the VueJS demo and code for how to integrate operators correctly.