F
Filament•2mo ago
Dorian

Highlight code block in Rich Editor

Hi, I installed Filament 4, and I'm using the rich editor (I was using the awcodes package in v3). However, it doesn't seem to be possible to use highlighting with code blocks. So I created a plugin. 1) I installed the lowlight, @tiptap/extension-code-block-lowlight, and highlight.js packages. 2) I created a js extension. 
import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
import { all, createLowlight } from 'lowlight'

const lowlight = createLowlight(all)

export default CodeBlockLowlight
    .configure({
        lowlight,
        defaultLanguage: 'php'
    })
import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
import { all, createLowlight } from 'lowlight'

const lowlight = createLowlight(all)

export default CodeBlockLowlight
    .configure({
        lowlight,
        defaultLanguage: 'php'
    })
3) I compiled the js with esbuild and saved it in my FIlament Provider. 4) I created a PHP plugin. 
<?php

namespace App\Filament\Plugins\RichEditor;

use Filament\Actions\Action;
use Filament\Forms\Components\RichEditor\Plugins\Contracts\RichContentPlugin;
use Filament\Forms\Components\RichEditor\RichEditorTool;
use Filament\Support\Facades\FilamentAsset;
use Tiptap\Core\Extension;

class CodeBlockLowlight implements RichContentPlugin
{
    public static function make(): static
    {
        return app(static::class);
    }

    /**
     * @return array<Extension>
     */
    public function getTipTapPhpExtensions(): array
    {
        return [];
    }

    /**
     * @return array<string>
     */
    public function getTipTapJsExtensions(): array
    {
        return [
            FilamentAsset::getScriptSrc('rich-content-plugins/code-block-lowlight'),
        ];
    }

    /**
     * @return array<RichEditorTool>
     */
    public function getEditorTools(): array
    {
        return [];
    }

    /**
     * @return array<Action>
     */
    public function getEditorActions(): array
    {
        return [];
    }
}
<?php

namespace App\Filament\Plugins\RichEditor;

use Filament\Actions\Action;
use Filament\Forms\Components\RichEditor\Plugins\Contracts\RichContentPlugin;
use Filament\Forms\Components\RichEditor\RichEditorTool;
use Filament\Support\Facades\FilamentAsset;
use Tiptap\Core\Extension;

class CodeBlockLowlight implements RichContentPlugin
{
    public static function make(): static
    {
        return app(static::class);
    }

    /**
     * @return array<Extension>
     */
    public function getTipTapPhpExtensions(): array
    {
        return [];
    }

    /**
     * @return array<string>
     */
    public function getTipTapJsExtensions(): array
    {
        return [
            FilamentAsset::getScriptSrc('rich-content-plugins/code-block-lowlight'),
        ];
    }

    /**
     * @return array<RichEditorTool>
     */
    public function getEditorTools(): array
    {
        return [];
    }

    /**
     * @return array<Action>
     */
    public function getEditorActions(): array
    {
        return [];
    }
}
5) I am receiving the error (see screenshot): Uncaught (in promise) RangeError: Adding different instances of a keyed plugin (codeBlockVSCodeHandler$) Did anyone manage to get it working? I didn't see this topic in the issues or roadmap on GitHub.
No description
4 Replies
awcodes
awcodes•2mo ago
It’s because of a conflict with the 2 codeBlock extensions. They are not meant to be used at the same time. I ran into this too and I’m still working on a solution for core editor.
Dorian
DorianOP•2mo ago
Oh, okay, if you're working on it, I'm not worried. Thanks you! Are you looking to implement it directly in Filament, or are you looking for a workaround?
awcodes
awcodes•2mo ago
I’m working on a package of missing rich editor features that Dan doesn’t necessarily want in core. They will be plugins to the core editor.
Dorian
DorianOP•2mo ago
Ok nice, I'll mark it as solved. Keep us posted 🙂

Did you find this page helpful?