Skip to content

Generate a link for @-Mentionings

Hannes Heine requested to merge pr462head into pr462base

Created by: Tirokk

roschaefer Authored by roschaefer Merged

Pullrequest

I'm not able to provide proper testing of the Editor component. When I unskip this test case I get TypeError: this.view.root.getSelection is not a function. I tried to find working component tests in their repo but unfortunately the entire library seems to be untested 🙀 there are no traces in package.json or issue list. I would be super glad if sb. could help me out on writing component tests for the Editor of if sb. has ideas how to resolve the above error.

Regarding the implementation: This PR sticks extremely close to their example code. It's basically copy-paste from here. That means I added tippy.js which gives animated tooltips and fuse.js which does fuzzy search in the list of suggestions. I can see the value of fuse.js but I would question the need for tippy. @appinteractive are tooltips and the suggestions menu sth. easy to implement? Opinions? If we implement it ourselves, we could at least test some parts of the editor.

After understanding how tiptap works, my task was just to create a custom Mention node. The original code which I overrode is Mention.js.

Oh yeah and one last thing. I'm fetching the entire user collection (id+slug) here.

Issues

Checklist

  • None

How2Test

  • Try to write or edit a post and enter @ in the content field.

Todo

  • None

Full stack trace:

● Editor.vue › mount › given a piece of text › renders

    TypeError: this.view.root.getSelection is not a function

      337 |     // if it's the first item, navigate to the last one
      338 |     upHandler() {
    > 339 |       this.navigatedUserIndex =
          |                     ^
      340 |         (this.navigatedUserIndex + this.filteredUsers.length - 1) %
      341 |         this.filteredUsers.length
      342 |     },

      at SelectionReader.domChanged (node_modules/prosemirror-view/dist/index.js:2033:28)
      at EditorView.updateState (node_modules/prosemirror-view/dist/index.js:4370:92)
      at Editor.setContent (node_modules/tiptap/dist/tiptap.common.js:1127:17)
      at VueComponent.handler (components/Editor/index.vue:339:21)
      at VueComponent.Vue.$watch (node_modules/vue/dist/vue.runtime.common.dev.js:4926:12)
      at createWatcher (node_modules/vue/dist/vue.runtime.common.dev.js:4883:13)
      at initWatch (node_modules/vue/dist/vue.runtime.common.dev.js:4865:7)
      at initState (node_modules/vue/dist/vue.runtime.common.dev.js:4628:5)
      at VueComponent.Vue._init (node_modules/vue/dist/vue.runtime.common.dev.js:4981:5)
      at new VueComponent (node_modules/vue/dist/vue.runtime.common.dev.js:5128:12)
      at createComponentInstanceForVnode (node_modules/vue/dist/vue.runtime.common.dev.js:3277:10)
      at init (node_modules/vue/dist/vue.runtime.common.dev.js:3108:45)
      at createComponent (node_modules/vue/dist/vue.runtime.common.dev.js:5952:9)
      at createElm (node_modules/vue/dist/vue.runtime.common.dev.js:5899:9)
      at VueComponent.patch [as __patch__] (node_modules/vue/dist/vue.runtime.common.dev.js:6449:7)
      at VueComponent.Vue._update (node_modules/vue/dist/vue.runtime.common.dev.js:3927:19)
      at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4048:10)
      at Watcher.get (node_modules/vue/dist/vue.runtime.common.dev.js:4459:25)
      at new Watcher (node_modules/vue/dist/vue.runtime.common.dev.js:4448:12)
      at mountComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4055:3)
      at VueComponent.Object.<anonymous>.Vue.$mount (node_modules/vue/dist/vue.runtime.common.dev.js:8386:10)
      at mount (node_modules/@vue/test-utils/dist/vue-test-utils.js:8649:21)
      at Wrapper (components/Editor/spec.js:21:45)
      at Object.it (components/Editor/spec.js:39:19)

Merge request reports