search

mariojgt / onix-pro

A page builder for laravel that works in a very simple and easy way, by default onix uses tailwind css, but can be easy change to your custom css.
MIT License
34 stars 6 forks source link

How can i make basic grape js component like video, image,text , etc visible #10

Closed ehsantalkhouncheh closed 3 years ago

ehsantalkhouncheh commented 3 years ago

Hi @mariojgt , Again thank you so much for amazing package and im so sorry im not familiar with javascript packages so i used your package and its awsome everything works really good but i can not see basic components for drag and drop i have just tailwind blocks so how can i make those basic component that provided by grape js visible and i have another quastion if it is possible to use blade components or livewire components as a deagable block or not.

BR, Ehsan

mariojgt commented 3 years ago

About the blades components or live wire unfortunately grape js don't support only html and javascript but when you can define a component in the grape js with javascript logic, for example a prebuilt a contact form that does a ajax request, you can do that when you define the components in the building process, to use the building process is very easy you publish the onix assets them run, npm install and after npm run watch the inside the folder resources/vendor/onix you should find a javascript files with some examples components of the demo, note tha you don't really need to use the building process to create components but is less messy using the npm build processes.

mariojgt commented 3 years ago

For the basic component provided by grape js i had to override because they are just plain html, you can have a better results buy adding you own the default they mess the tailwind.

ehsantalkhouncheh commented 3 years ago

Hmmm Thank you for quick answer I'll try because i really need it.

mariojgt commented 3 years ago

i hope this video help, https://www.youtube.com/watch?v=B86iZFu4EIE

ehsantalkhouncheh commented 3 years ago

Thank you so much yes it helped a lot actually i working on it because i need to create landing page builder for editors i have to disable and enable some features based on role. I added basic plugins as well and it works fine the only issue that i have is when i drag and drop components,dashed lines do not show around components i tried to fix the problem with editor.runCommand('sw-visibility') but i could not find the right file to add this code in package ? ,😞

mariojgt commented 3 years ago

If is the tailwind dashing lines it may have been removed in the building process because of the tailwins purge basically if is not in use the npm removed from the css for soeed performance but only in production.

ehsantalkhouncheh commented 3 years ago

but when you gonna design page if you dont have dashes line it's confusing it should be hide in view mode but in design mode you need dashes line am i right?

mariojgt commented 3 years ago

you talking about the editor lines of the tailwind lines ?

ehsantalkhouncheh commented 3 years ago

No i mean dashes line around components or blocks even predefined tailwind blocks do not have dashes line

mariojgt commented 3 years ago

I am not sure it may be a npm building error or a miss configured js file.