Editor: Include Tables extensions or a guide to install the Tables extensions

[Kjohnny71]

Hello,

Has anyone had any luck adding the TipTapTables extensions to the Editor? I've tried following the Flux docs and TipTap docs and have had no luck.

Here's what I've done so far:

1. Installed TipTap extensions via npm per TipTap docs:

npm install @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell

2. Register the extensions in a file "fluxui-editor.js" that is imported in my bootstrap.js file

// fluxui-editor.js
import { Table } from '@tiptap/extension-table'
import { TableRow } from '@tiptap/extension-table-row'
import { TableCell } from '@tiptap/extension-table-cell'
import { TableHeader } from '@tiptap/extension-table-header'

// Configure table extension
const configuredTable = Table.configure({
    resizable: true,
    HTMLAttributes: {
        class: 'min-w-full divide-y divide-gray-200',
    },
});

// Make extensions available globally
window.TiptapExtensions = {
    Table: configuredTable,
    TableRow,
    TableCell,
    TableHeader
};

3. In my layouts/app.blade.php file, I add the event listeners in the <script> tag just before the closing tag.

<script type="module">
    document.addEventListener('flux:editor', (e) => {
        console.log('flux:editor event triggered!', e.detail);
        
        const { editor, registerExtension } = e.detail;

        try {
            registerExtension([
                window.TiptapExtensions.Table,
                window.TiptapExtensions.TableRow,
                window.TiptapExtensions.TableCell,
                window.TiptapExtensions.TableHeader,
            ]); 

            console.log('Table extensions registered');

            e.detail.init(({ editor }) => {
                editor.on('create', ({ editor }) => {
                    console.log('Editor created with extensions:', editor.extensionManager.extensions.map(ext => ext.name));
                });

                console.log('Editor initialized:', editor);
                console.log('Editor extensions:', editor.extensionManager.extensions.map(ext => ext.name));
            });

        } catch (error) {
            console.error('Error registering extensions or initializing editor:', error);
        }




        // Debug logging

        //    Add debug logging for all editor events
        document.addEventListener('editor:command', (e) => {
            console.log('Editor command received:', e.detail);
        });

        document.addEventListener('flux:editor:command', (e) => {
            console.log('Flux editor command received:', e.detail);
        });

        // Listen for specific table commands
        document.addEventListener('flux:editor:insertTable', (e) => {
            console.log('Insert table command received:', e.detail);
        });

        // Debug registration
        console.log('Extensions registered:', {
            Table: !!TiptapExtensions,
            TableRow: !!TiptapExtensions,
            TableCell: !!TiptapExtensions,
            TableHeader: !!TiptapExtensions
        });
    });
</script>

4. Create the toolbar icons and actions in a resource/views/flux/editor/table.blade.php file. I've tried several variations of accessing the editor with no luck. Note that I have been focusing on the InsertTable function, the other functions will get corrected/updated when/if I finally get the InsertTable function working. :) I used the 'copy' and 'align' examples as a template for this file.

<ui-select data-editor="table" class="relative">
    <flux:tooltip content="{{ __('Insert table') }}" class="contents">
        <flux:editor.button>
            <ui-selected>
                <flux:icon.table class="size-5 shrink-0" aria-hidden="true" />
                <div class="[ui-selected_&]:sr-only">{{ __('Table') }}</div>
            </ui-selected>

            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4" aria-hidden="true"> 
                <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /> 
            </svg>
        </flux:editor.button>
    </flux:tooltip>

    <ui-options popover="manual" class="min-w-[10rem] rounded-lg border border-zinc-200 dark:border-zinc-600 bg-white dark:bg-zinc-700 shadow-xs p-[5px]">
        <flux:editor.option value="insert-table" selected>
            <flux:icon.table class="size-5 shrink-0" aria-hidden="true" />
            <div 
                {{-- x-data="{ rows: 3, cols: 3, withHeaderRow: true }" --}}
                x-data
                {{-- @click="$dispatch('editor:command', { 
                    command: 'insertTable',
                    options: {
                        rows: 3,
                        cols: 3,
                        withHeaderRow: true
                    }
                })"  --}}
                {{-- onclick="this.closest('[data-flux-editor]').editor.commands.insertTable()" --}}
                {{-- @click="this.closest('[data-flux-editor]').editor.commands.insertTable()" --}}
                {{-- x-on:click="let editor = $el.closest('[data-flux-editor]').editor; if (editor && typeof editor.commands.setColor === 'function') { console.log('Color:', $el.querySelector('input').value); editor.chain().focus().setColor($el.querySelector('input').value).run(); } else { console.log('Editor not initialized or setColor not available'); }" --}}
                x-on:click="
                    let editor = $el.closest('[data-flux-editor]').editor; 
                    console.log(typeof editor.commands.insertTable); 
                    if (editor && typeof editor.commands.insertTable === 'function') { 
                        console.log('Inserting table'); 
                        editor.commands.insertTable(); 
                    } else { 
                        console.log('Editor not initialized or insertTable not available'); 
                    }
                    "
                class="[ui-selected_&]:sr-only">{{ __('Insert Table') }}</div>
        </flux:editor.option>

        <flux:editor.option value="add-column-before">
            <flux:icon.between-vertical-start class="size-5 shrink-0" aria-hidden="true" />
            <div x-data @click="$dispatch('flux:editor:command', { command: 'addColumnBefore' })" 
                class="[ui-selected_&]:sr-only text-nowrap">{{ __('Add Column Before') }}</div>
        </flux:editor.option>

        <flux:editor.option value="add-column-after">
            <flux:icon.between-vertical-end class="size-5 shrink-0" aria-hidden="true" />
            <div x-data @click="$dispatch('flux:editor:command', { command: 'addColumnAfter' })" class="[ui-selected_&]:sr-only text-nowrap">{{ __('Add Column After') }}</div>
        </flux:editor.option>

        <flux:editor.option value="delete-column">
            <flux:icon.delete class="size-5 shrink-0 rotate-270" aria-hidden="true" />
            <div x-data @click="$dispatch('flux:editor:command', { command: 'deleteColumn' })" class="[ui-selected_&]:sr-only">{{ __('Delete Column') }}</div>
        </flux:editor.option>

        <flux:editor.option value="add-row-before">
            <flux:icon.between-horizontal-start class="size-5 shrink-0" aria-hidden="true" />
            <div x-data @click="$dispatch('flux:editor:command', { command: 'addRowBefore' })" class="[ui-selected_&]:sr-only">{{ __('Add Row Before') }}</div>
        </flux:editor.option>

        <flux:editor.option value="add-row-after">
            <flux:icon.between-horizontal-end class="size-5 shrink-0" aria-hidden="true" />
            <div x-data @click="$dispatch('flux:editor:command', { command: 'addRowAfter' })" class="[ui-selected_&]:sr-only">{{ __('Add Row After') }}</div>
        </flux:editor.option>

        <flux:editor.option value="delete-row">
            <flux:icon.delete class="size-5 shrink-0 rotate-180" aria-hidden="true" />
            <div x-data @click="$dispatch('flux:editor:command', { command: 'deleteRow' })" class="[ui-selected_&]:sr-only">{{ __('Delete Row') }}</div>
        </flux:editor.option>

        <flux:editor.option value="delete-table">
            <flux:icon.grid-2x2-x class="size-5 shrink-0" aria-hidden="true" />
            <div x-data @click="$dispatch('flux:editor:command', { command: 'deleteTable' })" class="[ui-selected_&]:sr-only">{{ __('Delete Table') }}</div>
        </flux:editor.option>

    </ui-options>
</ui-select>

5. Finally, in the blade file that hosts the editor, I have added the table to the toolbar:

                    <flux:editor 
                        wire:model="editingEventMinutes.minutes_text" 
                        extensions="['table', 'tableRow', 'tableCell', 'tableHeader']"
                        wire:dirty.class=" border-omborange! ring-offset-2! ring-offset-omborange!  "
                        label="{{ __('Minutes')}}" 
                        toolbar="heading | bold italic underline strike | bullet ordered blockquote | highlight | link | align | table ~ undo redo copy"
                        description="{{ ($editMode ? __('Enter the meeting minutes.') : '')}}" 
                        :disabled="!$editMode"
                    />

My javascript is pretty weak and I've been modifying this code with the help of AI so it is becoming quite a mess.

Any help or guidance in the right direction would be greatly appreciated.

Kevin

[ammannbe]

This is my resources/views/flux/editor/table.blade.php:

<flux:tooltip content="{{ __('Table') }}" class="contents">
    <flux:editor.button x-on:click="$el.closest('[data-flux-editor]').editor.chain().focus().insertTable().run()">
        <flux:icon.table-cells class="size-5!" />
    </flux:editor.button>
</flux:tooltip>

<flux:dropdown position="bottom start">
    <flux:editor.button tooltip="Column" class="">
        <flux:icon.between-vertical-start class="size-5!" />
        <flux:icon.chevron-down class="size-4!" />
    </flux:editor.button>

    <flux:menu>
        <flux:menu.item x-on:click="$el.closest('[data-flux-editor]').editor.chain().focus().toggleHeaderColumn().run()" icon="toggle-right">{{ __('Toggle header column') }}</flux:menu.item>
        <flux:menu.item x-on:click="$el.closest('[data-flux-editor]').editor.chain().focus().addColumnAfter().run()" icon="chevron-right">{{ __('Insert column after') }}</flux:menu.item>
        <flux:menu.item x-on:click="$el.closest('[data-flux-editor]').editor.chain().focus().addColumnBefore().run()" icon="chevron-left">{{ __('Insert column before') }}</flux:menu.item>
        <flux:menu.item x-on:click="$el.closest('[data-flux-editor]').editor.chain().focus().deleteColumn().run()" icon="x-mark">{{ __('Delete column') }}</flux:menu.item>
    </flux:menu>
</flux:dropdown>

<flux:dropdown position="bottom start">
    <flux:editor.button tooltip="Row" class="">
        <flux:icon.between-horizontal-start class="size-5!" />
        <flux:icon.chevron-down class="size-4!" />
    </flux:editor.button>

    <flux:menu>
        <flux:menu.item x-on:click="$el.closest('[data-flux-editor]').editor.chain().focus().toggleHeaderRow().run()" icon="toggle-left">{{ __('Toggle header row') }}</flux:menu.item>
        <flux:menu.item x-on:click="$el.closest('[data-flux-editor]').editor.chain().focus().addRowAfter().run()" icon="chevron-down">{{ __('Insert row after') }}</flux:menu.item>
        <flux:menu.item x-on:click="$el.closest('[data-flux-editor]').editor.chain().focus().addRowBefore().run()" icon="chevron-up">{{ __('Insert row before') }}</flux:menu.item>
        <flux:menu.item x-on:click="$el.closest('[data-flux-editor]').editor.chain().focus().deleteRow().run()" icon="x-mark">{{ __('Delete row') }}</flux:menu.item>
    </flux:menu>
</flux:dropdown>

And resources/js/flux-editor.js:

import { TableKit } from '@tiptap/extension-table'

document.addEventListener('flux:editor', (e) => {
    e.detail.registerExtensions([
        TableKit.configure({
            table: {
                resizable: true,
                // HTMLAttributes: {
                //     class: 'min-w-full divide-y divide-gray-200',
                // },
            }
        }),
    ]);
});

And last but no least resources/css/flux-editor.css:

/* Basic editor styles */
[data-flux-editor] .tiptap {
    /* Table-specific styling */
    table {
        border-collapse: collapse;
        /* margin: 0; */
        margin-bottom: 1rem;
        overflow: hidden;
        table-layout: fixed;
        width: 100%;

        td,
        th {
            border: 1px solid var(--color-gray-300);
            box-sizing: border-box;
            min-width: 1em;
            padding: 6px 8px;
            position: relative;
            vertical-align: top;

            > * {
                margin-bottom: 0;
            }
        }

        th {
            background-color: var(--color-gray-100);
            font-weight: bold;
            text-align: left;
        }

        .selectedCell:after {
            background: var(--color-gray-200);
            content: '';
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            pointer-events: none;
            position: absolute;
            z-index: 2;
        }

        .column-resize-handle {
            background-color: var(--color-purple-500);
            bottom: -2px;
            pointer-events: none;
            position: absolute;
            right: -2px;
            top: 0;
            width: 4px;
        }
    }

    .tableWrapper {
        margin: 1.5rem 0;
        overflow-x: auto;
    }

    &.resize-cursor {
        cursor: ew-resize;
        cursor: col-resize;
    }
}

On one hand you can find the usage of the TipTap plugin here: https://tiptap.dev/docs/editor/extensions/nodes/table
And on the other hand how to use a custom item in flux: https://fluxui.dev/components/editor#custom-items

[Kjohnny71]

I eventually got this code working (apologies for not returning and updating the discussion)

My code looks quite similar to what you have implemented so I'm going to mark this as the answer.

Thank you for responding!
Kevin