When developing modern web applications, content management is an essential task that often requires a rich text editor that allows for dynamic and visual formatting. Filament, a powerful package for Laravel, provides a highly useful rich text field for developers looking to create flexible user interfaces. To enhance how text is displayed, Torchlight.dev offers an interesting solution for adding rich, highlighted code visualization within these rich text fields.

In this article, we will explain how to integrate Torchlight.dev into a Filament rich text field to provide a robust and user-friendly code visualization experience.

Requirements

We will assume that you have a Laravel project with Filament and Torchlight properly configured.

Integrating Torchlight Code into the Rich Text Field

The goal is to capture the content from the rich text field and send it to Torchlight to obtain the highlighted code. For this, you can use the mutateFormDataBeforeCreate or mutateFormDataBeforeSave methods from the Create and Edit pages of the Filament resource containing the rich text field.

Example code in the mutateFormDataBeforeCreate method:

1 protected function mutateFormDataBeforeCreate(array $data): array

2{

3 /** @var string $content */

4 $content = $data['content'];

5 

6 $data['content'] = str_replace(['<pre>', '</pre>'], ['<pre><x-torchlight-code language="php" theme="github-dark">', '</x-torchlight-code></pre>'], $content);

7 

8 return $data;

9}

Displaying the Highlighted Content on the Front-End

Once the content is saved correctly in the database, you can display it in a Blade view. However, in order for Torchlight to render it properly, you can prepare it in the following way:

1 @php

2 // trim $article->content to separate blocks starting with <x-torchlight-code language="php" theme="github-dark"> and ending with </x-torchlight-code>

3 $blocks = preg_split('/(<x-torchlight-code[^>]*>.*?<\/x-torchlight-code>)/s', $article->content, -1, PREG_SPLIT_DELIM_CAPTURE);

4 

5 // remove <pre> and </pre> from $blocks

6 $blocks = array_map(function ($block) {

7 return preg_replace('/<pre[^>]*>/', '', $block);

8 }, $blocks);

9 

10 $blocks = array_map(function ($block) {

11 return preg_replace('/<\/pre>/', '', $block);

12 }, $blocks);

13@endphp

14 

15@foreach ($blocks as $block)

16 @if (Str::startsWith($block, '<x-torchlight-code'))

17 @php

18 // remove '<x-torchlight-code language="php" theme="github-dark">' and '</x-torchlight-code>' from $block

19 $block = preg_replace('/<x-torchlight-code[^>]*>/', '', $block);

20 $block = preg_replace('/<\/x-torchlight-code>/', '', $block);

21 

22 // replace '&lt;' and '&gt;' with '<' and '>' in $block

23 $block = preg_replace('/&lt;/', '<', $block);

24 $block = preg_replace('/&gt;/', '>', $block);

25 

26 // replace '&amp;' with '&' in $block

27 $block = preg_replace('/&amp;/', '&', $block);

28 @endphp

29 

30 <x-torchlight-code language="php" theme="github-dark">

31 {!! $block !!}

32 </x-torchlight-code>

33 @else

34 <p class="text-lg text-gray-800 dark:text-neutral-200">{!! $block !!}</p>

35 @endif

36@endforeach

The content processed by Torchlight will be displayed with syntax highlighting and automatically formatted.

Benefits of Integrating Torchlight with Filament

• Visual Enhancement: It makes code snippets more readable and visually appealing, thanks to syntax highlighting.
• Improved User Experience: Developers interacting with the application will have a better visual experience and functionality when displaying code.
• Simple Maintenance: Integrating a code highlighting solution like Torchlight makes it easier to maintain and update code snippets.

Conclusion

Integrating Torchlight.dev into a Filament rich text field can greatly improve the presentation of code within your Laravel-based web applications. With the detailed steps provided, you can easily add code highlighting functionality, offering users a more organized and visually appealing way to manage code within the rich text editor. This integration not only improves readability but also enhances the overall user experience in your admin panel or application.

If you believe there's a simpler or cleaner way to do this, please don't hesitate to reach out to me on social media. I'd love to hear your thoughts!