How to render data in blade?

[ehs4nm]

I know there are a few lib to do this but what is your recommendation?
I've some difficulty using codex-team/editor.js, for example it doesn't support image block (i tried to configure it but no success)

[camya]

Hi,

the code below is just as an idea and not implemented completely.

Only header, paragraph, code, and list are implemented. For unhandled blocks the plain json object is rendered. You can add the other required cases easily.

Ideally it needs some kind of data validation and caching. :)

The database field of the Post Model is named content

Filament form

EditorJs::make('content');

Post Model

Add the method contentRenderedSanitized and cast the database field content to object.

app/Models/Post.php

protected $casts = [
    'content' => 'object',
];


public function contentRenderedSanitized($plain = false): string
{
    $blocks = $this->content->blocks ?? null;

    if ($blocks === null) {
        return '';
    }

    $content = collect($blocks)->map(function ($block) {

        $data = $block->data;
        return match ($block->type) {
            'header' => "<h{$data->level}>{$data->text}</h{$data->level}>",
            'paragraph' => "<p>{$data->text}</p>",
            'code' => "<pre>{$data->code}</pre>",
            'list' => '
                <'.($data->style === 'ordered' ? 'ol' : 'ul').'>'.
                    collect($data->items)->map(fn($item) => '<li>'.$item.'</li>')->join("\n").
                '</'.($data->style === 'ordered' ? 'ol' : 'ul').'>',
            default => '<em>Unhandled block: </em><code>'.json_encode($block, JSON_THROW_ON_ERROR).'</code>',
        };

    })->join("\n");

    $content = Str::sanitizeHtml($content);

    if ($plain) {
        return strip_tags($content);
    }

    return $content;
}

Use it in your frontend

Output HTML:

I use the prose helper of TailwindCSS to automatically format the output.

<div class="prose">
    {!! $post->contentRenderedSanitized() !!}
</div>

Get Plain Text

$plainContent = $post->contentRenderedSanitized(plain: true);

Have a nice day.

[Xoshbin]

Why not use the editor.js it self in read only mode? it's doing all the work for you!

[camya]

Why not use the editor.js it self in read only mode?

Not sure what this does. Sounds like it renders the EditorJS Form in ReadOnly mode via Javascript.

If you have to consider SEO this might not work and you have to do it server side via PHP in Blade context.

But there are PHP packages for this already, for sure. :) This was just a idea how to do it simple and with full control of the generated markup.