Rich Text Laravel

https://github.com/tonysm/rich-text-laravel
Admin
Integrates the Trix Editor with Laravel, inspired by Rails' Action Text, to manage rich text content...
Tokens:4,035
Snippets:31
Trust Score:9.6
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Rich Text Laravel Package

Source: https://github.com/tonysm/rich-text-laravel/blob/main/README.md

Installs the rich-text-laravel package using Composer and runs the necessary Artisan command for setup.

```bash
composer require tonysm/rich-text-laravel
php artisan richtext:install
```

--------------------------------

### Custom Attachable Implementation Example

Source: https://github.com/tonysm/rich-text-laravel/blob/main/README.md

An example implementation of a custom attachable, `OpengraphEmbed`, which implements the `AttachableContract`. It includes a `fromNode` static method to create instances from `DOMElement` and defines a `CONTENT_TYPE` constant.

```php
namespace App\Models\Opengraph;

use DOMElement;
use Tonysm\RichTextLaravel\Attachables\AttachableContract;

class OpengraphEmbed implements AttachableContract
{
    const CONTENT_TYPE = 'application/vnd.rich-text-laravel.opengraph-embed';

    public static function fromNode(DOMElement $node): ?OpengraphEmbed
    {
        if ($node->hasAttribute('content-type') && $node->getAttribute('content-type') === static::CONTENT_TYPE) {
            return new OpengraphEmbed(...static::attributesFromNode($node));
        }

        return null;
    }

    // ...
}
```

--------------------------------

### Plain Text Output Example

Source: https://github.com/tonysm/rich-text-laravel/blob/main/README.md

The plain text output corresponding to the provided HTML rich text content. It shows how headings, paragraphs, lists, attachments (with captions), and blockquotes are rendered in plain text.

```plaintext
Very Important Message

This is an important message, with the following items:

    1. first item
    1. second item

And here's an image:

[The caption of the image]

With a famous quote

“Lorem Ipsum Dolor - Lorense Ipsus”

Cheers,
```

--------------------------------

### Rich Text to Plain Text Conversion Example

Source: https://github.com/tonysm/rich-text-laravel/blob/main/README.md

Demonstrates the conversion of HTML-formatted rich text content, including headings, lists, attachments, and blockquotes, into a plain text representation. Attachments with a `richTextAsPlainText` method or a caption are included.

```html
<h1>Very Important Message<h1>
<p>This is an important message, with the following items:</p>
<ol>
    <li>first item</li>
    <li>second item</li>
</ol>
<p>And here's an image:</p>
<rich-text-attachment content-type="image/jpeg" filename="blue.png" filesize="1168" height="300" href="http://example.com/blue.jpg" url="http://example.com/blue.jpg" width="300" caption="The caption of the image" presentation="gallery"></rich-text-attachment>
<br><br>
<p>With a famous quote</p>
<blockquote>Lorem Ipsum Dolor - Lorense Ipsus</blockquote>
<p>Cheers,</p>
```

--------------------------------

### Rendering Rich Text Content for Viewing

Source: https://github.com/tonysm/rich-text-laravel/blob/main/README.md

Provides an example of how to render the processed rich text content in a Blade view for display to the user. It highlights the need for sanitization before rendering.

```blade
{!! $post->content !!}
```

--------------------------------

### Get Gallery Attachments

Source: https://github.com/tonysm/rich-text-laravel/blob/main/README.md

Retrieves all attachments from images within galleries in a post's body. It returns a collection of `Attachment` instances, which can then be mapped to their attachable components.

```php
$post->body->galleryAttachments()
```

```php
$post->body->galleryAttachments()
    ->map(fn (Attachment $attachment) => $attachment->attachable)
```

--------------------------------

### Run Migrations

Source: https://github.com/tonysm/rich-text-laravel/blob/main/README.md

Executes the database migrations to set up the necessary tables for the rich-text-laravel package.

```bash
php artisan migrate
```

--------------------------------

### Run Tests

Source: https://github.com/tonysm/rich-text-laravel/blob/main/README.md

This command executes the test suite for the project. It's essential for verifying the functionality and stability of the package.

```bash
composer test
```

--------------------------------

### Livewire Integration with Trix Input

Source: https://github.com/tonysm/rich-text-laravel/blob/main/README.md

Illustrates how to integrate Rich Text Laravel with Livewire using the `@entangle()` feature. It points to a custom Trix input component and a Livewire component that manages the state for editing posts.

```php
// resources/views/components/trix-input-livewire.blade.php
// Example of using @entangle() with a Trix input
```

```php
// app/Livewire/Posts.php
// Livewire component managing post editing state
// Sets the currently editing Post into state and fills the PostForm with data
```

--------------------------------

### Rendering Rich Text for Trix Editor

Source: https://github.com/tonysm/rich-text-laravel/blob/main/README.md

Demonstrates how to render rich text content specifically for the Trix editor using the `toTrixHtml` method. This is useful for pre-filling the editor with existing content.

```blade
<x-trix-input id="post_body" name="body" value="{!! $post->body->toTrixHtml() !!}" />
```

--------------------------------

### Use Trix Input Component

Source: https://github.com/tonysm/rich-text-laravel/blob/main/README.md

Demonstrates how to use the published Trix input Blade component in your forms for rich text input.

```blade
<x-trix-input id="bio" name="bio" />
```

--------------------------------

### Rendering Rich Text Content for Trix Editor Input

Source: https://github.com/tonysm/rich-text-laravel/blob/main/README.md

Demonstrates the specific method required to render rich text content when feeding it back into a Trix editor input field, using the `toTrixHtml()` method.

```blade
<x-trix-input id="post_body" name="body" value="{!! $post->body->toTrixHtml() !!}" />
```

--------------------------------

### Mention API Endpoint for User Suggestions

Source: https://github.com/tonysm/rich-text-laravel/blob/main/README.md

The mentioner class queries this route to find user suggestions based on a search query. It returns the user's sgid, content, and name for use by Trix and Tribute.

```php
// In routes/web.php
use App\Http\Controllers\MentionController;

Route::get('/mentions', [MentionController::class, 'index']);

// MentionController@index would return JSON like:
// [
//     {'sgid': '...', 'content': 'User Name', 'name': 'User Name'}
// ]
```

--------------------------------

### Trix Image Upload Event Handling

Source: https://github.com/tonysm/rich-text-laravel/blob/main/README.md

This snippet demonstrates the basic JavaScript logic for handling image uploads with Trix. It listens for the `trix-attachment-add` event, performs an upload request, and updates the attachment with the returned URL.

```javascript
document.addEventListener('trix-attachment-add', function(event) {
  if (event.detail.attachment.file) {
    // Implement upload request here
    // Example: using fetch API
    const formData = new FormData();
    formData.append('attachment', event.detail.attachment.file);

    fetch('/attachments', { // Replace with your upload endpoint
      method: 'POST',
      body: formData
    })
    .then(response => response.json())
    .then(data => {
      // Update attachment URL upon successful upload
      event.detail.attachment.setAttributes({
        url: data.url, // Assuming your endpoint returns a 'url' field
        href: data.url
      });
    })
    .catch(error => {
      console.error('Upload failed:', error);
      // Optionally handle upload errors
    });
  }
});
```

--------------------------------

### Custom Encryption Handler

Source: https://github.com/tonysm/rich-text-laravel/blob/main/README.md

Shows how to define custom encryption and decryption handlers for the Rich Text Laravel package by calling the RichTextLaravel::encryptUsing() method in the AppServiceProvider's boot method. This allows for custom encryption logic.

```php
namespace App\Providers;

use Illuminate\Support\Facades\Crypt;
use Illuminate\Support\ServiceProvider;
use Tonysm\RichTextLaravel\RichTextLaravel;

class AppServiceProvider extends ServiceProvider
{
    // ...
    public function boot(): void
    {
        RichTextLaravel::encryptUsing(
            encryption: fn ($value, $model, $key) => Crypt::encrypt($value),
            decryption: fn ($value, $model, $key) => Crypt::decrypt($value),
        );
    }
}
```

--------------------------------

### Tribute.js Integration for Mentions

Source: https://github.com/tonysm/rich-text-laravel/blob/main/README.md

This snippet shows how Tribute.js is used in conjunction with Trix to detect mentions when a user types '@'. It listens for the `tribute-replaced` event to create Trix attachments.

```javascript
// In resources/views/components/app-layout.blade.php or similar
// ...
// Look for 'rich-text-mentions' controller setup
// ...
// In Trix input components (e.g., resources/views/components/trix-input.blade.php)
// ... 
<input type="hidden" name="content" data-action="tribute-replaced->mention@trix-editor" />
// ...
```

--------------------------------

### Implement AttachableContract and Use Attachable Trait

Source: https://github.com/tonysm/rich-text-laravel/blob/main/README.md

To make a model attachable in Trix, implement the AttachableContract and optionally use the Attachable trait. The trait provides basic functionality, but the `richTextRender` method must be implemented to define how the attachment is rendered.

```php
use TiptapContracts\AttachableContract;
use Tiptap\Traits\Attachable;

class User implements AttachableContract
{
    use Attachable;

    public function richTextRender(array $options): string
    {
        // Implementation to render the user attachment
        return view('mentions.partials.user', ['user' => $this])->render();
    }
}
```

--------------------------------

### Using AsRichTextContent Custom Cast

Source: https://github.com/tonysm/rich-text-laravel/blob/main/README.md

Illustrates how to use the AsRichTextContent custom cast on a model attribute to automatically parse, minify, and manage rich text content, including handling Trix editor attachments. This provides an alternative to the default structure.

```php
use Tonysm\RichTextLaravel\Casts\AsRichTextContent;

class Post extends Model
{
    protected $casts = [
        'body' => AsRichTextContent::class,
    ];
}
```

--------------------------------

### Laravel Upload Route

Source: https://github.com/tonysm/rich-text-laravel/blob/main/README.md

This PHP snippet shows a basic Laravel route definition for handling file attachments. It defines a POST route `/attachments` that is expected to handle the uploaded file.

```php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

Route::post('/attachments', function (Request $request) {
    // Validate the request and handle file upload
    $request->validate([
        'attachment' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
    ]);

    $path = $request->file('attachment')->store('attachments', 'public');

    return response()->json([
        'url' => Storage::url($path)
    ]);
})->name('attachments.store');
```

--------------------------------

### Interacting with Rich Text Fields

Source: https://github.com/tonysm/rich-text-laravel/blob/main/README.md

Shows how to create a model with rich text fields and interact with them as if they were regular model attributes. The trait handles forwarding operations to the underlying rich text relationships.

```php
$post = Post::create(['body' => $body, 'notes' => $notes]);
$post->body->render();
```

--------------------------------

### Convert Rich Text to Plain Text

Source: https://github.com/tonysm/rich-text-laravel/blob/main/README.md

Converts Trix rich text content into plain text using the `toPlainText()` method. This is useful for generating text-only versions of the content, such as for previews or accessibility.

```php
$post->body->toPlainText()
```

--------------------------------

### Rendering Rich Text Content in Blade

Source: https://github.com/tonysm/rich-text-laravel/blob/main/README.md

Illustrates how to render rich text content directly in Blade views. The RichText model's __toString magic method handles casting to a string, outputting the HTML content.

```blade
{!! $post->body !!}
```

--------------------------------

### Retrieve Attachment Galleries from Rich Text Content

Source: https://github.com/tonysm/rich-text-laravel/blob/main/README.md

The Trix editor supports galleries. You can retrieve all gallery `DOMElement`s from the rich text content by calling the `attachmentGalleries()` method.

```php
$post->body->attachmentGalleries()
```

--------------------------------

### Sanitizing Rich Text Content

Source: https://github.com/tonysm/rich-text-laravel/blob/main/README.md

Demonstrates how to sanitize user-generated HTML content using Symfony's HTML Sanitizer. It highlights the importance of escaping both HTML and plain text versions and provides references to relevant files within the Workbench application for implementation details.

```php
// resources/views/posts/show.blade.php
// Pass Rich Text Attributes to the clean() function
clean($attributes);
```

```php
// workbench/helpers.php
// The clean() function creates the Sanitizer
// See the factory: workbench/app/Html/SanitizerFactory.php
// See the Sanitizer: workbench/app/Html/Sanitizer.php
```

--------------------------------

### Register Custom Attachable Resolver

Source: https://github.com/tonysm/rich-text-laravel/blob/main/README.md

Allows registering a custom resolver for attachable content that doesn't need to be stored in the database, such as OpenGraph embeds. The resolver function receives a `DOMElement` and should return an `AttachableContract` implementation or `null`.

```php
use App\Models\Opengraph\OpengraphEmbed;
use Illuminate\Support\ServiceProvider;
use Tonysm\RichTextLaravel\RichTextLaravel;

class AppServiceProvider extends ServiceProvider
{
    public function boot()
    {
        RichTextLaravel::withCustomAttachables(function (DOMElement $node) {
            if ($attachable = OpengraphEmbed::fromNode($node)) {
                return $attachable;
            }
        });
    }
}
```

--------------------------------

### Eager Loading Rich Text Fields

Source: https://github.com/tonysm/rich-text-laravel/blob/main/README.md

Explains how to use the custom scope provided by the HasRichText trait to eager load rich text fields. This allows for efficient loading of related rich text content.

```php
// Loads all rich text fields
Post::withRichText()->get();

// Loads only a specific field
Post::withRichText('body')->get();

// Loads some specific fields
Post::withRichText(['body', 'notes'])->get();
```

--------------------------------

### Include Rich Text Styles

Source: https://github.com/tonysm/rich-text-laravel/blob/main/README.md

Adds the necessary Blade component for Rich Text styles to your application's layouts. Supports a custom theme.

```blade
<x-rich-text::styles />
```

```blade
<x-rich-text::styles theme="richtextlaravel" />
```

--------------------------------

### Using HasRichText Trait in Laravel Model

Source: https://github.com/tonysm/rich-text-laravel/blob/main/README.md

Demonstrates how to use the HasRichText trait in a Laravel Eloquent model to manage rich text fields. It shows how to define which attributes should be treated as rich text fields.

```php
use Tonysm\RichTextLaravel\Models\Traits\HasRichText;

class Post extends Model
{
    use HasRichText;

    protected $guarded = [];

    protected $richTextAttributes = [
        'body',
        'notes',
    ];
}
```

--------------------------------

### Retrieve Links from Rich Text Content

Source: https://github.com/tonysm/rich-text-laravel/blob/main/README.md

To extract all links present within the rich text content, you can use the `links()` method on the RichText or Content instance.

```php
$post->body->links()
```

--------------------------------

### Encrypting Rich Text Attributes

Source: https://github.com/tonysm/rich-text-laravel/blob/main/README.md

Demonstrates how to configure specific rich text attributes to be encrypted at rest by setting the 'encrypted' option to true within the richTextAttributes property of a Laravel Eloquent model. This leverages Laravel's built-in encryption.

```php
use Tonysm\RichTextLaravel\Models\Traits\HasRichText;

class Post extends Model
{
    use HasRichText;

    protected $guarded = [];

    protected $richTextAttributes = [
        'body' => ['encrypted' => true], // This will be encrypted...
        'notes', // Not encrypted...
    ];
}
```

--------------------------------

### Retrieve Attachments from Rich Text Content

Source: https://github.com/tonysm/rich-text-laravel/blob/main/README.md

You can retrieve all attachments from a rich text field using the `attachments()` method on the RichText or Content instance. You can further filter these attachments by type or map them to their underlying models.

```php
$post->body->attachments()

// Getting only attachments of users
$post->body->attachments()
    ->filter(fn (Attachment $attachment) => $attachment->attachable instanceof User)
    ->map(fn (Attachment $attachment) => $attachment->attachable)
    ->unique();
```
Tokens:
Raw