Custom Tiptap Editor Extensions

filament-tiptap-editor.php

<?php

// Config file

...
  
  'extensions' => [
        [
            'id' => 'hurdle',
            'name' => 'Hurdle',
            'view' => 'tools.hurdle',
            'source' => 'resources/js/tools/hurdle.js',
            'builder' => 'vite',
        ]
    ],
...

hurdle.blade.php

@php
    $colors = [
        'gray_light' => 'Gray - Light',
        'gray' => 'Gray',
        'gray_dark' => 'Gray - Dark',
        'primary' => 'Primary',
        'secondary' => 'Secondary',
        'tertiary' => 'Tertiary',
        'accent' => 'Accent',
    ];
@endphp

<x-filament-tiptap-editor::dropdown-button
    label="Hurdle"
    active="'hurdle'"
    icon="hurdle"
>
    @foreach($colors as $key => $label)
        <x-filament-tiptap-editor::dropdown-button-item
            action="editor().chain().focus().setHurdle({ color: '{{ $key }}' }).run()"
        >
            {{ $label }}
        </x-filament-tiptap-editor::dropdown-button-item>
    @endforeach
</x-filament-tiptap-editor::dropdown-button>

hurdle.js

import { Node, mergeAttributes } from "@tiptap/core";

const Hurdle = Node.create({
    name: "hurdle",
    group: "block",
    content: "block+",
    addOptions() {
        return {
            colors: [
                "gray_light",
                "gray",
                "gray_dark",
                "primary",
                "secondary",
                "tertiary",
                "accent",
            ],
            HTMLAttributes: {
                class: "filament-tiptap-hurdle",
            },
        };
    },
    addAttributes() {
        return {
            color: {
                default: "gray",
                parseHTML: (element) => element.getAttribute("data-color"),
                renderHTML: (attributes) => {
                    return {
                        "data-color": attributes.color,
                    };
                },
            },
        };
    },
    parseHTML() {
        return [
            {
                tag: "div",
                getAttrs: (element) =>
                    element.classList.contains("filament-tiptap-hurdle"),
            },
        ];
    },
    renderHTML({ node, HTMLAttributes }) {
        return [
            "div",
            mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
            0,
        ];
    },
    addCommands() {
        return {
            setHurdle:
                (attributes) =>
                ({ commands }) => {
                    if (!this.options.colors.includes(attributes.color)) {
                        return false;
                    }
                    return commands.toggleWrap(this.name, attributes);
                },
        };
    },
});

document.addEventListener("tiptapeditor:init", () => {
    window.registerTiptapEditorExtension('hurdle', Hurdle)
});

I get the following error when trying this example:
Unable to locate a class or view for component [tools.hurdle].

I have my files in the following locations:
config/filament-tiptap-editor.php
resources/js/tools/hurdle.js
resources/views/tools/hurdle.blade.php

Running:
livewire v2.12.6
filament v2.17.53
laravel v10.22.0

Solved it.
the hurdle.blade.php needs to be inside
resources/views/Components/tools/