Add GrapesJs Editor

[hishamco]

Adding Graphes JS editor in HTML Module

/cc @kudryavtsevda

[kudryavtsevda]

Thanks for looping me, I am waiting to check your module

[hishamco]

I already have a WIP PR, hope to submit it ASAP

[kudryavtsevda]

Could you provide me link regarding to this PR? if it is possible

[hishamco]

I will push a WIP PR today, I will keep you updated

[hishamco]

@kudryavtsevda a WIP PR is created

[kudryavtsevda]

@kudryavtsevda a WIP PR is created

Thanks, let me check BTW, do you know when it will be approved?

[hishamco]

For OCC I can publish a beta release but it needs some work to make the components show up in the blocks section

[kudryavtsevda]

For OCC I can publish a beta release but it needs some work to make the components show up in the blocks section

If it is possible please do it and then I will clone your module and will ask questions

[hishamco]

You can fork the repo and try the module and it will be nice if you want to push some commits

[kudryavtsevda]

I have been playing with your module and noticed that 1) uploaded images are not saved 2) background colors are not saved and 3) control panel in the right top cornet doesn't work at all (no preview, no code review)

may be I did something wrong?

[hishamco]

Seems I disabled the storage. Regarding the last two points I notice that while I'm developing, I presume this a script issues, coz when I use GrapesJs in a blank html it works. I need to figure out why, if you can help on this it's much appreciated

That's why I told you we need a lot of work here, more interestingly adding components in blocks section

[kudryavtsevda]

Seems I disabled the storage.

do you mean it doesn't persist changes made by grapesjs? could you explain it a little bit?

[kudryavtsevda]

@hishamco I figured out that html body part should be setup with disabled if you want to allow to use local storage of grapes-js. otherwiese it may be required to setup remote storage. so as a result I managed to show my images uploaded by grapes-js from orchard end-user perspective.

[hishamco]

Thanks, I really forgot to uncheck the santize option, but still I'm not sure sure why the preview and other icons not working

[kudryavtsevda]

I will go through "get started" https://grapesjs.com/docs/getting-started.html#import-the-library and I bet I will find answer there

[hishamco]

BTW I already downloaded the latest version, hope to use CDN resources in the upcoming update

[kudryavtsevda]

Have you noticed that these buttons are not working?

[hishamco]

Let me know the content that you entered in the editor, so I can check. Probably the issue comes from scripts collision as I mentioned above

[kudryavtsevda]

it contains only such block: <div data-gjs-type="text">Insert your text here</div>

[hishamco]

Custom block?

[kudryavtsevda]

Like this one

[kudryavtsevda]

I noticed that toolbar button is replaced and commented in orchard due to some reason compare with properly working toolbar here:

[hishamco]

As I told you something weired happenning here, it needs time to investigate

[kudryavtsevda]

I created new admin theme and disabled this two lines. after that grapes js was working BUT some styles were disappeared. I fixed it by adding new awesome-font of 4.7.0 version with small fix here and I attached that awesomestyle. you can see it on 24th line in the first screenshot

[hishamco]

I fixed it by adding new awesome-font of 4.7.0 version with small fix here

Why we need to add .fas if you updated the font-awesome version?

[kudryavtsevda]

I fixed it by adding new awesome-font of 4.7.0 version with small fix here

Why we need to add .fas if you updated the font-awesome version?

because default orchard admin theme uses 'fas' instead of 'fa' Default admin theme without any changes:

After adding 'fas' into css. As you see grapesJs is working properly in conjuction with orchard admin theme

I don't claim that my solution is 100% correct BUT I found the reason and workaround

[hishamco]

Thanks so much for your efforts, we need to add your changes in the our HTML module

[hishamco]

I think upgrading the OC.Resources should solve the font awesome issue

[hishamco]

@kudryavtsevda could you surround the editor using iframe, then there's no need to introduce a new theme or removing a scripts from the admin theme

[kudryavtsevda]

@kudryavtsevda could you surround the editor using iframe, then there's no need to introduce a new theme or removing a scripts from the admin theme

Interesting idea. I thought about it as well. I will try on Wednesday BTW, I managed apply grapes js demo preset with grapes js web-plugin from the demo page. It looks great

[hishamco]

Hope if you can participate on this PR, because I'm quite busy with Data Localization Module. BTW I updated the related PR with the latest OC bits

Points to consider if you want to participate:

• Use iframe or Partial to isolate the GrapesJS Editor
• Add resources if it's needed as a part of this module

If all goes well then we can use OC widgets as blocks elements

[hishamco]

You can fork the repo and work on top of my PR, please let me know if you need help. I'm sure this will be one of the greate modules that we will have

[hishamco]

BTW, I managed apply grapes js demo preset with grapes js web-plugin from the demo page. It looks great

Oh really, hope if you can share a GIF screenshot

[kudryavtsevda]

Partial to isolate the GrapesJS Editor

Could you explain how to leverage partial views in OC? I thought it would be the same part of the DOM and would not help with CSS collisions

[hishamco]

Simple partial that contains iframe just to make the UI simple and clear

[kudryavtsevda]

Oh really, hope if you can share a GIF screenshot

Sorry for being late. I have a tough schedule. You can see my results here

[hishamco]

Very nice, did you bring the components / blocks from GrapesJS itself? I think we need to extend that in OC. This will be one of the coolest modules in OCC, the credits goes for you ;)

Thanks, hope to see some commits in the associated PR, or you can start another one

[hishamco]

So let us keep this going, by fixing the scripts issues, make the editor works as expected, then we can think about the components or blocks

[kudryavtsevda]

I am trying to move grapes js into iframe as you asked me and I almost done BUT suddenly I was stuck. Can I ask you to review these problems regarding GrapesJS module? https://github.com/OrchardCMS/OrchardCore/discussions/11364 https://github.com/OrchardCMS/OrchardCore/discussions/11362

May be you have an idea?

[hishamco]

Sure

[kudryavtsevda]

Very nice, did you bring the components / blocks from GrapesJS itself? I think we need to extend that in OC. This will be one of the coolest modules in OCC, the credits goes for you ;)

Thanks, hope to see some commits in the associated PR, or you can start another one

I tried to commit changes regarding https://github.com/OrchardCMS/OrchardCore/discussions/11364 in that PR but I got 403 error access denied. But I bet you can do it without my assistance

[hishamco]

No problem I can change the Id and commit into my PR, just try to complete what you have started and keep me posted, then I can merge my PR followed by another PR that contains your changes. If you need to start a new PR no problem I can close mine

Thanks

[hishamco]

BTW @kudryavtsevda seems you miss to decorate your controller with the Feature attribute, I already use the same thing in OCC.Users module

[hishamco]

Any updates on this?

[kudryavtsevda]

We solved it on friday when I figured out that feature id should be the same as module name

[hishamco]

Believe it or not even you didn't change the id it should works if you decorate your controller with Feature attribute, something like this https://github.com/OrchardCoreContrib/OrchardCoreContrib.Modules/blob/e54e130189f8e9e9b0083d9851e3c49b35c337d5/src/OrchardCoreContrib.Users/Controllers/ImpersonationController.cs#L18-L20

[kudryavtsevda]

I believe you but I haven't tried

[hishamco]

Anyway, could you please let me the progress of this module, coz we need to publish a beta release at least. Please let me know if you have a branch in your forked repo

[kudryavtsevda]

Anyway, could you please let me the progress of this module, coz we need to publish a beta release at least. Please let me know if you have a branch in your forked repo

as I said before I tried to commit right into your PR but it was not succesful due to lack of permissions

[hishamco]

Could you please create a branch on your repo, then I can commit what I have and let you create a new PR