Enable (rendering of) inline components within the RichText field

[riclep]

Enable (rendering of) inline components within the RichText field

[papoms]

Updated it to also respect Custom Block Classes instead of using the default Block Class.

<?php

namespace App\Storyblok\Fields;

use Riclep\Storyblok\Fields\RichText as BaseRichText;
use Storyblok\RichtextRender\Resolver;
use Riclep\Storyblok\Block;
use Riclep\Storyblok\Traits\HasChildClasses;

class Richtextfield extends BaseRichText
{
    use HasChildClasses;
	/**
	 * Converts the data to HTML when printed
	 *
	 * @return string
	 */
	public function __toString()
	{
        $richtextResolver = new Resolver();

        $out = "";
        // Loop through all nodes from the RichText Field
        // If the node type is 'blok' it is an inline component -> render it as block
        // else just use the richtextResolver as normally
        foreach ($this->content['content'] as $node) {

            if ($node['type'] == 'blok' && isset($node['attrs']['body']) && is_array($node['attrs']['body'])){
                foreach ($node['attrs']['body'] as $blockContent) {
                    $class = $this->getChildClassName('Block', $blockContent['component']);
                    $block = new $class($blockContent, $this->block()->parent());
                    $out .= $block->render();
                }
            } else {
                $out .= $richtextResolver->render(["content" => [$node]]);
            }
        }
        return $out;
	}
}

[RicLeP]

This looks interesting. I’ve not tried using components in rich-text fields before and worried clients will go crazy with the editing power! Closing this ticket but will look to implement it as it is on my to-do list. Thank you.

[papoms]

clients will go crazy with the editing power

Thats a valid point, had a good laugh ;-)
You can disable it within Storyblok.

[papoms]

We are using it on a food blog / Recipe App.

The Blog Authors can include lists of Recipes within the article. Using the Rich-Text Fields allows to do so without splitting up the content in multiple richtext fields like

RichText
RecipeList
RichText
RecipeList

I also found it handy for more advanced control of inserting Images. The built-in method does not really support placement and size options. So i've created an ImageBlock that can now be placed directly within the Richtext Field.

[RicLeP]

Inserting images is a really good idea. I will need to explore it more as until now I’ve made a containing Block that could take different child blocks (text, quote, image etc.) but what you suggested does sound interesting.

I’d love to see the site you’re working on when it’s ready

[RicLeP]

Thanks for the code @papoms. I’ve tweaked it a bit to process the rich-text field’s content before the __toString method. It creates a content key in the field with a collection of all the HTML and Blocks. This way it can be manipulated further before rending in Blade. The toString method them loops over the content outputting HTML.

Do you have any thoughts on this as I’ve not used inline components much.

(Probably shouldn’t have closed the ticket yet either. I am new to maintaining open source!)

[RicLeP]

@papoms just pushed version 2.5 live with inline rendering. Thanks for the help with this.

[papoms]

Thanks for the update! I will look into it on sunday