Issue #2076✓ SolvedOpened June 12, 2019by msassa2 reactions

How make a new component to allow laravel blade directives?

Quick answerby artf2

@msassa If you write the code like this, it's quite hard for the editor to understand it, but if you create a kind of custom conditional component you'll get more control over it. Here an example of your case where the condition can also be changed via trait https://jsfiddle.net/452fvwk6/

Read full answer below ↓

Question

Hi, thanks for the nice work. I'll like to know if there is a way to use blade directives inside the code. I already add a new functionality to edit the source code, and work just fine. But when I write something like that, the canvas show a ugly text: And I like to find a way that @if don't render in the canvas. Do you know how? The template in the front end works just fine, but I like to hide that from the canvas. Thanks!

Answers (3)

👍 Most helpfulartfJune 14, 2019

@msassa If you write the code like this, it's quite hard for the editor to understand it, but if you create a kind of custom conditional component you'll get more control over it. Here an example of your case where the condition can also be changed via trait https://jsfiddle.net/452fvwk6/

verdvermJune 13, 2019

What would parse that syntax during rendering? I've been looking at running react in the canvas, but we need to load react and transpile components we create. There is an in browser babel script to do something like this. Haven't got it fully working yet. Fundamentally, what you are writing is bein...

msassaJune 13, 2019

Hi, I'm saving that code into a file, in S3. Later, I use that files in a Laravel application. Everything work fine, the only improvement I like to do, is: The code is correct as source code, and it has to be saved that way. But when I visualize that block on the canvas, I just need to see the html...

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.