Tiptap: Vue runtime-only build

[g3rd]

First off, thanks for this amazing project!

I'm working through the demos within my existing app. When I use the TodoItemNode, maybe others I'm getting:

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

Is the runtime-only build not supported?

Did I miss in the setup or docs where it talks about the Vue build type?

Thanks!

[g3rd]

I'm getting a little farther. Will have to pick back up in the morning. This is what I have so far:

import { TodoItemNode as TipTapItemNode } from 'tiptap-extensions'

export default class TodoItemNode extends TipTapItemNode {
  get view () {
    return {
      props: ['node', 'updateAttrs', 'editable'],
      methods: {
        onChange () {
          this.updateAttrs({
            done: !this.node.attrs.done,
          })
        },
      },
      render (h) {
        h(
          'li',
          {
            attrs: {
              'data-type': 'todo_item',
              'data-done': this.node.attrs.done.toString(),
            },
          },
          [
            h('span', {
              staticClass: 'todo-checkbox',
              attrs: {
                contenteditable: 'false',
              },
              on: {
                click: this.onChange,
              },
            }),
            h('div', {
              ref: 'content',
              staticClass: 'todo-content',
              attrs: {
                contenteditable: this.editable.toString(),
              },
            }),
          ],
        )
      },
    }
  }
}

When I click the button, it removes all of my highlighted text and has the following errors in the console:

[Vue warn]: Error in event handler for "click": "TypeError: node.getBoundingClientRect is not a function"
found in
...

TypeError: node.getBoundingClientRect is not a function
    at coordsAtPos (index.js?703f:345)
    at EditorView.coordsAtPos$1 [as coordsAtPos] (index.js?703f:4391)
    at EditorView.updateState (index.js?703f:4290)
    at VueComponent.dispatchTransaction (tiptap.esm.js?cd42:861)
    at EditorView.dispatch (index.js?703f:4484)
    at eval (schema-list.js?7a87:94)
    at eval (tiptap.esm.js?cd42:464)
    at Array.forEach (<anonymous>)
    at Object.assign.obj.(anonymous function) (webpack-internal:///./node_modules/tiptap/dist/tiptap.esm.js:488:15)
    at VueComponent.invoker (vue.runtime.esm.js?2b0e:2023)
logError @ vue.runtime.esm.js?2b0e:1737
globalHandleError @ vue.runtime.esm.js?2b0e:1728
handleError @ vue.runtime.esm.js?2b0e:1717
Vue.$emit @ vue.runtime.esm.js?2b0e:2536
e.(anonymous function) @ backend.js:1
trigger @ QBtn.js?c7ec:73
click @ QBtn.js?c7ec:82
invoker @ vue.runtime.esm.js?2b0e:2023
fn._withTask.fn._withTask @ vue.runtime.esm.js?2b0e:1822

[philippkuehn]

Hey, yeah… runtime-only build is not supported at the moment because on the TodoItemNode. I like templates 🙃. I should add this to the readme. But as you already found out: you are free to use your custom nodes for that. In your example you did just a small mistake. you have to return h() in your render function.

[laurensiusadi]

@philippkuehn How do I solve this issue if I build on top of vue-cli? Running vue-cli-service build then serve dist doesn't solve the issue TypeError: i.getBoundingClientRect is not a function

[pkkid]

For anyone else hitting this who is using vue-cli. You can enable the runtime compiler in Vue with the following option in your vue.config.js file.

module.exports = { runtimeCompiler: true, }

[andreasvirkus]

@philippkuehn Please consider re-opening this. The runtime-only build is the only CSP-compliant Vue build. It will become a major blocker as proper CSP headers get more and more popular (and are already pretty much a must-have for large scale or enterprise apps)... 😕

Or is a custom node the "official" workaround?

[ryanbliss]

Linked to pull request #576. I know this is closed, but this is highly relevant to anybody looking to have a CSP compliant app, and it would be pretty silly to avoid it when the solution is so simple :)

[huntj88]

@philippkuehn what about #576?