donotebase / quasar-tiptap

A modern WYSIWYG rich-text editor built on top of tiptap and Quasar for Vue.js.
https://donotebase.github.io/quasar-tiptap
MIT License
310 stars 61 forks source link

RangeError: Duplicate use of selection JSON ID cell #54

Open jonalxh opened 3 years ago

jonalxh commented 3 years ago

Hi, I'm trying to use this amazing component but the following error is thrown when i import it: image

I'm using it as the README.md says.

Template side: <quasar-tiptap v-bind="options" />

Script side: import { QuasarTiptap, RecommendedExtensions } from "quasar-tiptap"; import "quasar-tiptap/lib/index.css";

export default {
    components: {QuasarTiptap},
    data() {
        return {
        options: {
        content: "content",
        editable: true,
        extensions: [
            ...RecommendedExtensions,
            // other extenstions
            // name string, or custom extension
        ],
        toolbar: [
            "add-more",
            "separator",
            "bold",
            "italic",
            "underline",
            // other toolbar buttons
            // name string
        ],
    },
        }
    }
}

Current version is: "quasar-tiptap": "^1.9.1"

I love this amazing project, I hope you could help me.

PD: My project is just a Vue/Nuxt project, not Quasar project.

mekery commented 3 years ago

quasar-tiptap is a quasar-based project, which depends on quasar and some quasar's components.

joe-berg-colossus commented 3 years ago

quasar-tiptap is a quasar-based project, which depends on quasar and some quasar's components.

I'm also experiencing this on a quasar project.

here are dependency versions:

"dependencies": {
    "@quasar/extras": "^1.0.0",
    "algoliasearch": "^4.8.5",
    "axios": "^0.18.1",
    "core-js": "^3.6.5",
    "katex": "^0.11.1",
    "mermaid": "^8.9.2",
    "qs": "^6.7.0",
    "quasar": "^1.0.0",
    "quasar-tiptap": "^1.9.1",
    "tiptap": "^1.32.1",
    "tiptap-extensions": "^1.35.1",
    "vue-autosuggest": "^2.2.0",
    "vue-codemirror": "^4.0.6",
    "vue-horizontal": "^0.8.8",
    "vue-i18n": "^8.0.0",
    "vue-instantsearch": "^3.4.3",
    "vue-plugin-load-script": "^1.3.2"
  },
amasson84 commented 3 years ago

I have the same problem. Using tiptap only seems to work ... Any idea how to fix this?

joe-berg-colossus commented 3 years ago

I have the same problem. Using tiptap only seems to work ... Any idea how to fix this?

I was able to resolve it by uninstalling all of quasar tiptap's dependencies and reinstalling. Then make sure you are configuring quasar-tiptap to run only the client in your boot file

flowt-au commented 2 years ago

This is all a bit new to me but what I have found out is this: quasar-tiptap package.json specifies "prosemirror-utils": "^0.9.6" but the latest version of "prosemirror-utils" is "1.0.0-0" So, when quasar-tiptap installs, it creates its own (nested) node_modules folder and installs prosemirror-utils and its out-of-date dependency prosemirror-tables. I think the presence of two versions of prosemirror-tables is what is causing the error.

So, to my app's package.json I added the following to ensure I have the latest versions in my app,

"prosemirror-tables": "^1.1.1",    
"prosemirror-utils": "^1.0.0-0",

then deleted the node_modules folder within myapp/node_modules/quasar-tiptap folder so the imports within quasar-tiptap use the latest version from the main node_modules and there were no duplicate prosemirror packages.

quasar dev with the basic demo from the README.md page and all seems well.

As far as actually using quasar-tiptap though, there are a few more issues and a question here: #76 Murray