ADefWebserver / ADefWebserver.Module.HtmlTextV2

MIT License
4 stars 1 forks source link

[ENH] Move Editor to Edit.razor #7

Closed thabaum closed 5 months ago

thabaum commented 5 months ago

Currently this editor is in place of content display. We need to shift this to the editor.

image

to this location:

image

This will be "Interactive" and should work with static rendering mode there after potentially.

ADefWebserver commented 5 months ago

I'm not sure if this will ever work in static mode ... (Sigh)

thabaum commented 5 months ago

You can run an interactive component in static, we just need to move it. I believe the current HTML editor in Oqtane is "Interactive" as far as the editor goes, the "index.razor" is static since it just displays content. No interactivity needed to display the HTML.

ADefWebserver commented 5 months ago

OK. Sound good.

thabaum commented 5 months ago

This goes for control panel modules (components) as well, they are all interactive I believe still, or most are. There is a boundary set in Oqtane where you can override and declare it in the code behind. You just cant change types of interactivity, once set it is set for all child components if I am not mistaken or MS has not changed this.

ADefWebserver commented 5 months ago

Ok can you do that with your PR?

thabaum commented 5 months ago

I will see how far I can get and push a few PR's once I get everything found that may need updated to .NET 8 for example as I found another part of the sass that needed to go to .NET 8. But I am currently running all with latest and things are so far things are working as expected.

This seems to be a priority now so I will first get all my current updates provided in a PR.

I see it can upload files from the image picker selector, that will also need to be reviewed.

8 and #10 pretty much are in this part of the world as well. So I would like to tackle all of these possibly in one PR, however I can share what I may have as a draft while moving forward for some additional feedback.

I will push a PR for the package updates to Oqtane Framework repository and this one so we can go off the dev branch going forward and .NET should act as expected more.

I will also put in a request for 5.2 version update so we can base our project on this and use the dev branch if not at least 5.1.2.

ADefWebserver commented 5 months ago

I am fine with just one PR because it is not as if we have to worry about breaking changes :) Meaning, if it works on your computer, at this stage, that is good enough forme.

thabaum commented 5 months ago

sounds good, dont get to work in those types of scenarios often.

I just submitted this PR for the Oqtane: https://github.com/oqtane/oqtane.framework/pull/4325

It will boost our dependencies to the latest to match our project since this should land in the Oqtane 5.2.0 release. It updates all dependencies to .NET 8.0.6. Then I can test both areas of the framework and module development out and provide any additional community feedback I can along the way.

I will submit one for this next.

Link to my Oqtane Framework dependencies updated repo: https://github.com/thabaum/oqtane.framework/tree/update-package-dependences-v5.2.0

you will get the other one as soon I have it ready for this project. I will add to it as I go... or merge I can create another PR no worries as it will help to keep track of things as we go.

So I will have a PR ready to get my first with updating all the projects and package dependencies to latest and close that issue. Then it feels like we are getting something done ;)

thabaum commented 5 months ago

Line 62 about for HtmlEditorTextArea.razor component I commented out some code at the end of file that relates to it but I could not get it to compile quickly so moved on I need to revisit at some point. Let this all digest overnight see what I can get done in the morning.

Cheers!

thabaum commented 5 months ago

17 replaces the logic needed for basic html rendering which can be done with static if enabled or else it defaults to the interactive mode selected by the parent component or framework.

Need the Edit.razor part now.

thabaum commented 5 months ago

I would reopen this but I can put up something that at least shows the editor, however it is not currently saving it was nice to see it work after I fire it up the first time and the browser had to update so bugged out the hot reload dotnet action... short story long I fired it up again... and the editor was showing up as shown in image below:

It looks like this currently:

View Mode: image Designer Mode: image Source Mode: image

Save action needs doctored up but the cancel button works great!

ADefWebserver commented 5 months ago

This is great! Once it saves let's push it out?

thabaum commented 5 months ago

restore works too

image

thabaum commented 5 months ago

to tell you the truth I was going to skip this tonight, but I felt like I needed to prepare for it some for working on it tomorrow. I am still trying to understand it all, it does not adhere 100% to the V1 settings yet... and localization... stuff like that will need to be factored in later.

thabaum commented 5 months ago

This is the error when I hit save:

image

System.NullReferenceException
  HResult=0x80004003
  Message=Object reference not set to an instance of an object.
  Source=ADefWebserver.Module.HtmlTextV2.Client.Oqtane
  StackTrace:
   at ADefWebserver.Module.HtmlTextV2.Edit.<SaveContent>d__20.MoveNext() in H:\Project\Oqtane\HTMLTEXTV2\ADefWebserver.Module.HtmlTextV2-main\Client\Modules\ADefWebserver.Module.HtmlTextV2\Edit.razor:line 117

    private async Task SaveContent()
    {
        string content = await HtmlEditorComponentHtml.GetHtml();
        content = Utilities.FormatContent(content, PageState.Alias, "save");

        try
        {
            var htmltext = new HtmlText();
            htmltext.ModuleId = ModuleState.ModuleId;
            htmltext.Content = content;
            await HtmlTextService.AddHtmlTextAsync(htmltext);

            await logger.LogInformation("Content Saved {HtmlText}", htmltext);
            NavigationManager.NavigateTo(NavigateUrl());
        }
        catch (Exception ex)
thabaum commented 5 months ago

this is because I never did make that part work and I think it should be @_content right?! lol i dont know sometimes when merging things how different I look at things from what they could be or should be...

ADefWebserver commented 5 months ago

If you get stuck I can work on it this weekend.

thabaum commented 5 months ago

I have tomorrow to work on it and possibly a day or two if not partial days of time I will contribute towards this to help. Reporting what I have done on this merge that shows it is working.

I am sure I can make it work for a POC, this can be changed as needed for the production version. I will hand whatever I have to offer over who knows in 5 minutes to a day probably... I will make a final push so you have everything when you are ready to put some time into it. I can work probably a few more partial days on this.

I expected this error... I am just happy to see it fire off and want to try to save something...

Hmm... I guess it only took 2 minutes and fixed it while discussing with you ;)

thabaum commented 5 months ago

It does not save from source however, but if you save in the designer it works, sorry to be bad news/good news lol but fun stuff right?

I think I know the issue sort of... it is a JS file call I changed

Could not find 'HtmlEditor.Blazor.innerHTML' ('Blazor' was undefined).

which I changed from Radzen.innerHTML guessing...

so still ironing out but looking promising.

thabaum commented 5 months ago

image image I got it working both in source and designer modes as I did not need to have the term "blazor" on that namespace for innerHTML was the issue.

But I noticed a few other issues now...

  1. the toolbar is not interactive, does not matter if interactive/static render mode so it is an issue. (although it does style things as you click on them)
  2. file manager and the other raw editor may still be wanted? Or will we be ok with just this source editor?
ADefWebserver commented 5 months ago

file manager and the other raw editor may still be wanted? Or will we be ok with just this source editor?

We just need source editor. We can add our own button to open the file manager.

thabaum commented 5 months ago

TODO:

  1. Source (Raw) Editor Feature needs to be enabled/disabled from the module settings or a parameter.
  2. File Manager Image Add/Upload Enable/Disable.
  3. Role/User Security Permissions Tested.
  4. Styling Fixes To See Text Colors No Matter Dark/Light Themes Backgrounds.

What Works:

  1. Save from editor in design or source modes.
  2. ability to edit in designer or source modes.

What does not work and should now:

  1. Interactivity of buttons in toolbar seem to have been lost and needs to be fixed.

Plus other mentioned in TODO.

ADefWebserver commented 5 months ago

Does the undo/redo button work?

thabaum commented 5 months ago

We just need source editor. We can add our own button to open the file manager.

I think the image button in the toolbar should work if I can make it work? We have the source I may give it a go and rewrite it for a dialog with the file manager component.

Does the undo/redo button work?

Yes

thabaum commented 5 months ago

It all... works, just the dropdowns are inactive and the colors of icons are not active/inactive always... some work it is odd. It all worked before.

I need to go through this JS files and the component library get all files up to speed with the Radzen latest repo fixes... I have some applied already to files we are working on.