Colorpicker in Flux editor

[sanderdewijs]

I wanted to share my working solution for adding a colorpicker button in the Flux Editor component.

In the head I add this code for registering the Color and TextStyle modules needed to add the inline styles for the text color. Note that you can't import TextStyle directly, you have to pull in TextStyleModule and use it from there

<script type="module">
        import * as TextStyleModule from 'https://cdn.skypack.dev/@tiptap/[email protected]';
        import Color from 'https://cdn.skypack.dev/@tiptap/[email protected]';

        const TextStyle = TextStyleModule.default || TextStyleModule.TextStyle || TextStyleModule;

        // Pre-configure extensions
        const configuredTextStyle = TextStyle ? TextStyle.configure() : null;
        const configuredColor = Color ? Color.configure({ types: ['textStyle'] }) : null;

        window.TiptapExtensions = {
            TextStyle: configuredTextStyle,
            Color: configuredColor
        };
        document.addEventListener('flux:editor', (e) => {
            const { TextStyle, Color } = window.TiptapExtensions;
            const extensions = [];

            if (TextStyle) extensions.push(TextStyle);
            if (Color) extensions.push(Color);

            if (extensions.length > 0) {
                e.detail.registerExtensions(extensions);
            } else {
                console.warn('Registration skipped because of null-import');
            }
        })
    </script>

And finally the resources/views/flux/editor/color.blade.php

<flux:dropdown position="bottom end" offset="-15">
    <flux:editor.button
        icon="swatch"
        tooltip="Pick a text color"
        x-on:click="$dispatch('open')"
    />
    <flux:menu>
        <div class="p-2 bg-white rounded shadow-lg">
            <div class="p-2 flex flex-wrap gap-1 justify-center">
                @foreach(['#c00000', '#000000'] as $color)
                    <button x-on:click.prevent="
            let editor = $el.closest('[data-flux-editor]')?.editor;
            if (editor && !editor.state.selection.empty) {
                editor.commands.setColor('{{ $color }}');
                $dispatch('close');
            } else {
                console.error('No editor found');
            }
        "
                            class="w-6 h-6 rounded border disabled:opacity-50"
                            style="background-color: {{ $color }}"></button>
                @endforeach
            </div>
        </div>
        <flux:menu.item
            x-on:click.prevent="
                if ($store.editor) {
                    $store.editor.chain().focus().unsetColor().run();
                    $dispatch('close');
                    console.log('Color removed');
                } else {
                    console.warn('Editor unavailable');
                }
            "
            icon="x-mark">
               Remove color
        </flux:menu.item>
    </flux:menu>
</flux:dropdown>

When initializing the editor you can add the color property to the editor like described in the docs.

 <flux:editor wire:model="preview_text" label="Preview text" toolbar="heading | bold italic underline | link | color | align ~ undo redo" />