Is it possible to integrate an existing TipTap Extension?

[tomkiss]

Question

I've read through all the documentation and user guides. I've got the custom module working for the given Emoji example.

I'm now turning my attention to the thing I'm actually trying to do and I notice that the TipTap Emoji extension itself appears to have the functionality for what I need. If I could get that working I'd be on my way.

I can't see any obvious way to do this. Is anyone able to give me some pointers as where to start with something like this? Are there any examples of other TipTap extensions integrated with Vizy through custom modules?

Any help greatly appreciated.

Additional context

No response

[engram-design]

So the emoji example in the Vizy docs is probably not the best example as there is - as you say - a completely "native" one with TipTap. But, as it's a Pro extension, I can't bundle that with Vizy - although I do have access to it, I just can't re-distribute it according to the license.

You can completely use the TipTap extensions, that's exactly what Vizy does.

import Emoji from '@tiptap-pro/extension-emoji';

document.addEventListener('onVizyConfigReady', (e) => {
    Craft.Vizy.Config.registerExtensions((extensions) => {
        return [
            Emoji.configure({
              suggestion: {
                // …
             },
           }),
        ];
    });
});

You'll need to run npm install @tiptap-pro/extension-emoji according to the TipTap docs in your own JS.

[tomkiss]

Thanks Josh, that was really helpful.

I sort of made some progress there following your advice, in that I got the tiptap-pro extension loading and running.

I'm now finding the trickier bit to be rendering their example which includes the :colon searching: which brings up the inline drop-down menu (implementing the code from EmojiList.jsx, EmojiList.scss, styles.scss, suggestion.js files). After attempting to implement that, I get React errors with, amongst other things, TypeError: t.setRenderer is not a function appearing. The main thing I don't understand here, is how compiling my own js for TipTap in my own modules directory will marry up to the precompiled JS that's being loaded in the CP from Vizy's repo.

All of this isn't my forté, so I'm struggling a little and sensing I'm not doing this right here, but any further pointers greatly appreciated.

[engram-design]

That’s an interesting point - I don’t think you’ll be able to use React where we use Vue for TipTap. Although that’s just a hunch.

As for the marrying together, it’s more that you’re creating a JS export (file) that Vizy will look for when the page loads in addition to its own JS. So long as your custom JS is loaded on the page when Vizy is loaded (that’s what the work in the module does) then it should all work together.

When I have a moment I can spin up a working module example for you.

[tomkiss]

🤦 Oh, what a doofus of me to use React. I know most Craft devs use Vue but I instinctively jumped in with the React demo.

OK, switching to their Vue example is immediately less painful.

There are no console errors, emojis are rendered with the shorthands, emoticons work. The only thing that doesn't appear to be working is the tippy tooltip, which renders OK but has no list items within it.

I will keep poking at this but again, thanks so much for your help.

[engram-design]

Yeah, to be fair I've not actually tried to use React, but just going off a hunch that if the TipTap instance uses Vue, you'd need to also. That's not ideal for you the developer to be forced into that, so sorry!

That might be an issue with the Tiptap extension, but happy to look at it if you can't get to the bottom of the issue (and it is a Vizy issue)?

[tomkiss]

Was away for a little bit and looking at this again. Not having much luck!

I've got the custom module loading OK as you suggested above, tucked away in /modules/vizymodule/assets/js/emoji.js.

import Emoji, { gitHubEmojis } from '@tiptap-pro/extension-emoji';
import suggestion from './suggestion.js';

document.addEventListener('onVizyConfigReady', (e) => {
  Craft.Vizy.Config.registerExtensions((extensions) => {
    return [
      Emoji.configure({
        emojis: gitHubEmojis,
        suggestion,
      }),
    ];
  });
});

And then, using the the EmojiList.vue and suggestions.js from the TipTap example templates, I don't get any console errors and it sort of works. The output of theEmojiList.vue template looks like this:

<template>
  <div class="items">
    <button
      class="item"
      :class="{ 'is-selected': index === selectedIndex }"
      v-for="(item, index) in items"
      :key="index"
      @click="selectItem(index)"
    >
      <img v-if="item.fallbackImage" :src="item.fallbackImage" align="absmiddle">
      <template v-else>
        {{ item.emoji }}
      </template>
      :{{ item.name }}:
    </button>
  </div>
</template>
...

Now, if I put a <span>{{items}}</span> in there, I can see the items array being correctly propagated. However, it just will not output anything in that loop.

Trying to see if I can get any loop to output, I also tried a simple test:

<template>
  <div class="items">
    <span>Loop:</span>
    <span v-for="n in 10">{{ n }}</span>
  </div>
</template>

Which also... doesn't appear to output anything in the loop:

I'm not familiar with vue at all but I think that test should at least have worked? Is this something on Vizy's side? I can't tell!

[engram-design]

Looks like everything is connected well, and you're 90% there, I think it's probably just some finer things.

The quickest way for me to help might be if you can bundle up your module and your JS/Vue files, and send them to support@verbb.io - then I can take a look, spin it up on my end and give you a hand!

But I would say just to test, try:

<template>
  <div class="items">
    <button
      class="item"
      :class="{ 'is-selected': index === selectedIndex }"
      v-for="(item, index) in items"
      :key="index"
      @click="selectItem(index)"
    >
      {{ item }}
    </button>
  </div>
</template>

And I'm pretty sure that should show up something

[tomkiss]

Thanks Josh.

I've pinged you a support email.

(still no luck outputting anything, even with your example there!)

[tomkiss]

Hmm, just tried again, (from a different address too!)

[engram-design]

Nothing I'm afraid, not even in spam. Just note if you're trying to attach a zip, it might need to be uploaded elsewhere to Dropbox (or similar), as some providers don't like zip files.

[engram-design]

Ooop, got something that time, might've just taken a sec. Will review in the morning!

[tomkiss]

Amazing, thank you Josh

[engram-design]

Alright, thanks for that! Looks like this must've been a Tiptap and Vue error, as upgrading both those dependencies has sorted things on my end.

Fixed for the next release. To get this early, run composer require verbb/vizy:"dev-craft-4 as 2.1.15".

[tomkiss]

Amazing! Thanks so much for your help with this.

[engram-design]

Fixed in 2.1.16