Filament GrapesJS - Plugin Development
Getting help with plugin development
59 Replies
Hey @faab007nl
GitHub
GitHub - faab007nl/filament-grapesjs
Contribute to faab007nl/filament-grapesjs development by creating an account on GitHub.
Hay @Patrick Boivin
I already made 2 function that can load and store the data from grapejs
this.editor.on('load', async function (e) { and this.editor.on('storage:store', async function(e) {Ok cool, so
on('load') loads the field data into Grapes, and the other one should put it back into the form field?Yea
on('load') is called when grape loads and then await storageManager.store(newData); sets the data.
and on('storage:store' sis called when the save btn is pressed (or also when autosaving think. Not tested that yet).
When i get the editor data that is used in await storageManager.store(newData); and the html code that is used on the page itself.Ok, what is the "save" button in this case? (I don't really know how Grapes work)
Look for
className: 'fa fa-save',
Or i just send a screen 🙂And will probalby move the Toastifty to the actual upload function when thats done.
For a more correct error / success msg.
Ah ok, so this is a "save" button related to Grapes. Does it also save the Filament Form when you click it?
Yes. It does not.
The page should not reload or something.
When you click this button, what happens? Do you exit Grapes or just stay in the editor?
Oh I see, it's up to you, right? It will fire the
storage:store event?Clicking the save btn will store to local storage using code from grape (still need to find a solution to that so it does not do that)
And it will fire the
storage:store event
Normally you would have a load and store url/endpoint in grape but I don't wanna use that.
And I couldn't get a custom storage working.
So I decided to use localstorage and just overwrite the data on load.Hum, ok. I think the local storage can be a problem for later, not too important at this point.
Yea thought that too.
Ofcourse wanna do it the right way.
Also tried setting storage type to
none but that does not trigger the eventOk, so I think as a first step, I would probably try to get the data stored in the DB. So you start with an empty Grapes editor, add some block to it, click Save, and then you should have something stored somewhere in the DB. Does that sound right?
Yea
What tool do you use to inspect your DB. Do you have something like TablePlus?
Heidi
Ok perfect
So what's your next step?
Get the data to php
How do i do that?
I'm looking at
grapesjs.blade.php and I see state: $wire.entangle('{{ $getStatePath() }}').defer, did you set this up?Yea copied from other plugin
This is basically what you need... when you write to
this.state in Alpine, this should keep the value in sync on the Livewire side. That's what entangle does.self.state is undefinedShould be defined... that's the next thing to debug
And i also think
storage:store is called by await storageManager.store(newData);
So also need to fix that.
Maybe put a timeout on the save code.Sometimes you need timeouts but I think you should see if you can get it to work without. At first.
Yea
Oke added timeout for now.
How do i debug the self.state?
this.state is also undefined
Do you have a good example that i can use?One plugin I've studied that really helped me is this one:
https://github.com/awcodes/filament-tiptap-editor
GitHub
GitHub - awcodes/filament-tiptap-editor: A Rich Text Editor plugin ...
A Rich Text Editor plugin for Filament Forms. Contribute to awcodes/filament-tiptap-editor development by creating an account on GitHub.
It's a big-ish plugin, so not really simple, but it's a good example of how to integrate a custom field with a complex JS library.
Do i need to wrap the html in a
x-dynamic-component element?No, I don't think you need that
Thats not
Alpine.data('grapesjs'
Are you available for vc?Sorry, not possible for me
Do you know someone else who might?
Not sure, maybe @Leandro Ferreira would be available for consulting.
Hey,
thank you for tagging me, but I'm a bit busy these days and unavailable at the moment. Maybe next month. Thanks
This is an alpine component. It’s bundled with esbuild to turn it into a module that can be used to load it with async alpine when the field is rendered on the page. You can find more info about that on https://filamentphp.com/docs/3.x/support/assets#asynchronous-alpinejs-components
I created the component but i get an error>
Alpine component with ID [filament-grapesjs-component] not found for package [app].
I followed the steps in that page.
(Pushed to GH)
@awcodes Are you able to help me in vc?i don't have time to VC sorry
Does someone have time to help me?
Build the assets and publish it
artisan filament:assets
Already did that. Doesn't work
Looking at your repo, you’re not building the alpine component in a way that makes it a module. Nor are you registering it in Filament as an async alpine component. Start by following the documentation that I linked to at least get your alpine component working.
I didn't push to gh yet.
But I did follow the steps from the docs u send. I'll push later. Then u can see the changes
is your alpine component works already? if its not its best you develop it in line with
x-data before you move into a .js file which you need to build and publishPushed
ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('filament-grapesjs-component', 'ekremogul/filament-grapesjs') }}"
you're not including the plugin namespace when you load the script with ax-load-srcWill try that later today
Fixed that issue. Thx.
Now got this.
https://cloud.faab007.nl/s/kbqX7kZ5tKR83Bp/preview
That's because you are passing in a closure but trying to render it as a string
Oke. But the code is from the docs.
.
So did i do something wrong somewhere else?
I would recommend you to dig around Filament's view files especially those components integrating with js libs, like select/choicejs, fileupload/filepond, to understand how it works
its very hard for others to help you on what you don't understand
Already looked at another plugin (https://github.com/awcodes/filament-tiptap-editor).
It helped a little bit.
But not enough
try
$getStatePath() instead of $statepath in your entangle
also, when you copy paste stuff, don't do it blindly, understand what it is doing. 🙂That works.
Wdym i like copy pasting stuff. 🙂
It loads without errors now. But this.state is still
null