Oqtane Framework Blazor HTML Text Editor (Radzen) POC Discussion

[thabaum]

This discussion is for providing feedback and information to help with creating our proof of concent (POC) for a new HTML Editor for the Oqtane Framework powered by Blazor and Radzen HTML UI component.

Currently we are at this point and starting to report issues to move forward with this new community project:

All are welcome to be a part of this ensuring we get a great long term solution for our community to support years to come.

[thabaum]

@ADefWebserver submitted a few issues that can be resolved to begin with this. Some may need cleared up further to understand as they are just placeholders for now as I continue to review this code. I will also check the HTML editor source against the latest from Radzen it may all still be the same. I am curious so I may work on that next after I put a few issues to rest.

[ADefWebserver]

Ok take your time :)

[thabaum]

@ADefWebserver I just removed the static override on the index.razor component and it seems to be working the same in static mode.

We need to put this into the Edit.razor file without the override and it will work interactively by default. Put the original Index.razor static logic back to render the new components front facing UI. Run the Edit.razor in default interactivity to allow working with the HTML Editor.

I would like to add the source editor and remove the raw editor... and maybe to start we can remove the upload feature or combine it with the Oqtane Framework File Manager later.. but for now link it to the file manager in a popup or whatever is clever there.

So my understanding of the underlying framework seems to be on page. I believe I am getting a grip on the wheel here, I just need to get into the next gear without losing control ;)

[ADefWebserver]

This is perfect. However I think we still need the raw editor because the Radzen control does not have a raw editor?

[thabaum]

for an update I was able to merge some of the latest fixes and the source editor into the code base and just now was able to successfully switch between the two:

This is not fully operational however as it will only display the html and does not color the code yet. I dont want to get too excited but I think it should work as expected with a little work.

When you edit the code in the Source view it does not apply back to the Design view when you switch currently. However it was a stride forward to get here I must say... I think I need to focus on getting this going inside the Edit.razor component now that things are coming together.

I have been through the Radzen library and we can utilize a few things to make things work smooth. I even thought of a few other ideas along the way but not sure they are ready to be discussed yet.

[thabaum]

@ADefWebserver the current project I have going seems to be flowing together but I need to figure out why the changes do not work going back. I was hoping to see colors like this:

I think that would take another thought at another time. The way I have it working is exactly how it works on the Radzen website for showing source so I will prepare a PR for this.

Still getting familiar with everything. I need to figure out

• how we integrate this with the relating Oqtane api.(should be a walk in the park)
• how to make it so the changes are saved between design and source html editor modes. (should be easy fix hoping)

[ADefWebserver]

If this causes any problems, for the Raw HTML I think we should just use the-exact-same-text-box-and-code as the core HTML module :)

In Phase II we can revisit this, if needed, but I would not want to get too distracted over this (because it may require us to dive into thousands of lines of Radzen code).

All we need to do is wire up their "raw code" button to open the simple text box the core module uses.

[thabaum]

I think what we have for a foundation now gives us a start exploring with the latest merges in the projects. Now we need to work out the placement of this in the Edit.razor component. I believe we may use the HtmlBase.razor component to display in the static Index.razor component possibly?

[ADefWebserver]

Right now I don't have a solution that builds. It may take me a day to get my Oqtane working again because I just tried to update it and it-broke-everything (sigh)

[thabaum]

To run this currently you need to do the following:

1. Download the latest dev branch and unzip it to a folder. (Be sure to rename the folder Oqtane.Framework)

2. Download this latest repository and unzip it to the same folder.
   Project\ADefWebserverHtmlEditor

3. Build the Oqtane Framework

4. Build this repo

5. run oqtane install an instance

6. install a module with Html Editor V2 like before
   

I think this is pretty much the workflow...

Clean the solutions for both and restarting projects...

Did I mention I restart visual studio if feels broken sometimes fixes it
be sure to close all projects when times are tough and open fresh
don't panic as it is a work in progress
I could not build a thing my first time either...

Patience pays, this is not a race. You should now see it working as expected.

[thabaum]

One note is I did not comment out the static render override set on the component. I figured that entire file needs replaced...

[ADefWebserver]

@thabaum - The error I am now getting are on the Radzen code, did you check everything in? This is what I get when I just try to build just that project:

Build started at 7:01 PM...
1>------ Build started: Project: HtmlEditor.Blazor, Configuration: Debug Any CPU ------
1>Sass compile files
1>Sass files compiled
1>C:\Users\webma\Source\Repos\ADefWebserver\ADefWebserver.Module.HtmlTextV2\HtmlEditor.Blazor\wwwroot\HtmlEditorTextArea.razor(6,77,6,85): error CS0103: The name 'ReadOnly' does not exist in the current context
1>C:\Users\webma\Source\Repos\ADefWebserver\ADefWebserver.Module.HtmlTextV2\HtmlEditor.Blazor\wwwroot\HtmlEditorTextArea.razor(6,107,6,111): error CS0103: The name 'Rows' does not exist in the current context
1>C:\Users\webma\Source\Repos\ADefWebserver\ADefWebserver.Module.HtmlTextV2\HtmlEditor.Blazor\wwwroot\HtmlEditorTextArea.razor(6,120,6,124): error CS0103: The name 'Cols' does not exist in the current context
1>C:\Users\webma\Source\Repos\ADefWebserver\ADefWebserver.Module.HtmlTextV2\HtmlEditor.Blazor\wwwroot\HtmlEditorTextArea.razor(7,54,7,63): error CS0103: The name 'MaxLength' does not exist in the current context
1>C:\Users\webma\Source\Repos\ADefWebserver\ADefWebserver.Module.HtmlTextV2\HtmlEditor.Blazor\wwwroot\HtmlEditorTextArea.razor(7,92,7,100): error CS0103: The name 'OnChange' does not exist in the current context
1>C:\Users\webma\Source\Repos\ADefWebserver\ADefWebserver.Module.HtmlTextV2\HtmlEditor.Blazor\FormComponent.cs(122,26,122,31): warning BL0007: Component parameter 'HtmlEditor.FormComponent<T>.Value' should be auto property
1>C:\Users\webma\Source\Repos\ADefWebserver\ADefWebserver.Module.HtmlTextV2\HtmlEditor.Blazor\HtmlEditorComponentBase.cs(48,28,48,35): warning BL0007: Component parameter 'HtmlEditor.HtmlEditorComponentBase.Culture' should be auto property
1>C:\Users\webma\Source\Repos\ADefWebserver\ADefWebserver.Module.HtmlTextV2\HtmlEditor.Blazor\HtmlEditorNumeric.razor.cs(80,32,80,37): warning BL0007: Component parameter 'HtmlEditor.Blazor.HtmlEditorNumeric<TValue>.Value' should be auto property
1>Done building project "HtmlEditor.Blazor.csproj" -- FAILED.
========== Build: 0 succeeded, 1 failed, 0 up-to-date, 0 skipped ==========
========== Build completed at 7:01 PM and took 01.026 seconds ==========

[thabaum]

1>C:\Users\webma\Source\Repos\ADefWebserver\ADefWebserver.Module.HtmlTextV2\HtmlEditor.Blazor\wwwroot\HtmlEditorTextArea.razor(6,77,6,85): error CS0103: The name 'ReadOnly' does not exist in the current context
1>C:\Users\webma\Source\Repos\ADefWebserver\ADefWebserver.Module.HtmlTextV2\HtmlEditor.Blazor\wwwroot\HtmlEditorTextArea.razor(6,107,6,111): error CS0103: The name 'Rows' does not exist in the current context
1>C:\Users\webma\Source\Repos\ADefWebserver\ADefWebserver.Module.HtmlTextV2\HtmlEditor.Blazor\wwwroot\HtmlEditorTextArea.razor(6,120,6,124): error CS0103: The name 'Cols' does not exist in the current context
1>C:\Users\webma\Source\Repos\ADefWebserver\ADefWebserver.Module.HtmlTextV2\HtmlEditor.Blazor\wwwroot\HtmlEditorTextArea.razor(7,54,7,63): error CS0103: The name 'MaxLength' does not exist in the current context
1>C:\Users\webma\Source\Repos\ADefWebserver\ADefWebserver.Module.HtmlTextV2\HtmlEditor.Blazor\wwwroot\HtmlEditorTextArea.razor(7,92,7,100): error CS0103: The name 'OnChange' does not exist in the current context

I should have this fixed as well sorry I will review it all again as I must of missed adding something but this one should get resolved for you as well if not already and review your latest updates today.

[thabaum]

the warnings I left alone for now...

[thabaum]

For the TextArea component I wasnt sure what to do with the ID, however it looks like

using Microsoft.AspNetCore.Components;

namespace HtmlEditor.Blazor
{
    /// <summary>
    /// HtmlEditorTextArea component.
    /// </summary>
    /// <example>
    /// <code>
    /// &lt;HtmlEditorTextArea Cols="30" Rows="3" @bind-Value=@value Change=@(args => Console.WriteLine($"Value: {args}")) /&gt;
    /// </code>
    /// </example>
    public partial class HtmlEditorTextArea : FormComponent<string>
    {
        /// <summary>
        /// Gets or sets the maximum length.
        /// </summary>
        /// <value>The maximum length.</value>
        [Parameter]
        public long? MaxLength { get; set; }

        /// <summary>
        /// Gets or sets a value indicating whether is read only.
        /// </summary>
        /// <value><c>true</c> if is read only; otherwise, <c>false</c>.</value>
        [Parameter]
        public bool ReadOnly { get; set; }

        /// <summary>
        /// Gets or sets the number of rows.
        /// </summary>
        /// <value>The number of rows.</value>
        [Parameter]
        public int Rows { get; set; } = 2;

        /// <summary>
        /// Gets or sets the number of cols.
        /// </summary>
        /// <value>The number of cols.</value>
        [Parameter]
        public int Cols { get; set; } = 20;

        /// <summary>
        /// Handles the <see cref="E:Change" /> event.
        /// </summary>
        /// <param name="args">The <see cref="ChangeEventArgs"/> instance containing the event data.</param>
        protected async System.Threading.Tasks.Task OnChange(ChangeEventArgs args)
        {
            Value = $"{args.Value}";

            await ValueChanged.InvokeAsync(Value);
            if (FieldIdentifier.FieldName != null) { EditContext?.NotifyFieldChanged(FieldIdentifier); }
            await Change.InvokeAsync(Value);
        }

        /// <inheritdoc />
        protected override string GetComponentCssClass()
        {
            return GetClassList("html-editor-text-area").ToString();
        }

        ///// <inheritdoc />
        //protected override string GetId()
        //{
        //    return Name ?? base.GetId();
        //}
    }
}

These exist in the code, maybe you need to clean the project and restart visual studio. I have to do that each time I make a big change it seems or the files/code do not compile some odd reason, very buggy. I restart and everything is fine

[ADefWebserver]

For the TextArea component I wasnt sure what to do with the ID

I believe I fixed this by removing the duplicate file in the wwwroot directory. Please get the latest.

[thabaum]

FYI Update for anyone following we have made progress and will submit some changes tomorrow. I am able to make my current version of Edit.razor component

1. save
2. cancel
3. restore
4. Source (Raw HTML Editor)/Designer (Rich Text Editor) Editor Modes.

There are still a few things to work out as far as a few minor bugs and integrating the file manager which is what I will work on tomorrow.

Here are a few current screenshots to share:

Designer Mode

Source Mode

Restore

Edit Mode

View Mode

Tomorrows priorities from top to bottom will be:

1. File Manager
2. Fix issue with designer toolbar drop downs to select styles being inactive shown below (others work, and prior to moving from index.razor they all worked as expected):

Currently Work

Currently Do Not Work

3. Set all flags for settings to allow enabling/disabling features.
4. Make it so when you change things in Source mode they are applied to the Designer when a user switches back prior to save. Currently it works like the current raw HTML editor where you have to save or lose changes if you switch back to designer.
5. Cleanup any loose code and refactoring along with naming conventions of classes/methods/files/projects/etc... to be using 100% best practice for latest .NET industry standards.
6. Add/Update any Radzen code from latest repository related to the new Oqtane HTML Editor.

One question was if this will work with static render mode, and the answer is yes. This module utilizes and demonstrates using both approaches. If set to "Interactive" render mode the static override is ignored and rendered interactively currenty, however .NET 9 did have plans to make this happen and a discussion was made talking about this upcoming enhancement to the .NET Core.

There are 2 main components to this module:

1. Index.razor (Static rendering is enabled, Interactive If Site Settings is set to Interactive render mode)
2. Edit.razor (Interactive Signal-R)

Both of these components use other UI Components. You cannot change different types of interactivity such as server to webassembly... once one is set all child components must utilize the same.

By default to avoid breaking changes the Oqtane Framework kept the modules using interactive mode. This made all old modules work out of the box no matter what site render mode was chosen. Then if you set your site to Static SSR render mode you can create component modules for the Oqtane Framework that use this type of render mode to take advantage of what it has to offer. Not everyone wants it all interactive and some do.

To wrap this up I am explaining all of this to share how the Index.razor file is rendered statically when Static render mode is enabled in Oqtane Framework. Since no one interacts with this "view" part of the module it is safe to run static easily. However the flip side to that coin is the Edit.razor component which uses very interactive components within in from another library Radzen which we are using to build our new HTML Editor POC. To keep Edit.razor "interactive" simply do not override the component render type and you can use "Blazor" as you would think it should be used.

The themes in Oqtane Framework in Static SSR mode are rendered static and the modules within are interactive by default FYI.

Hopefully that is clear enough to be understood. I get this question or people confused reading in discussions around this topic alone so I thought I would share my 2 cents to help anyone trying to understand. And please correct me if I am wrong or enhance this conversation with more details.

Any wish list ideas as well that are within reason I would not mind hearing about. Maybe squeeze one or two top wants in if possible.

Cheers!

🚀

[ADefWebserver]

Wow this is great! I can't wait for the PR 🙏🏽- You saw this right? https://www.oqtane.org/blog/!/91/passing-state-to-components-using-ssr-in-net-8

[thabaum]

That is exactly what I was trying to talk about for the render boundaries between static/interactive and how they behave. Thanks for the link that will help fill in the blanks as I am not a book writer ;) although I try to fake it helping with documentation. This needs to be added to Oqtane.Docs project along with the other 5.x enhancements.

I figured by 5.2 things would be ready to document things related and maybe I would have some time for some of it by next Oqtane Documentation meeting.

I seen the original rich text editor has a switch for type of editor to use... should we maybe add this to the html editor so you can pick which you want to have potentially as an option to discuss with the community? I am not as familiar with these parts of the module yet and need to review the logic relating if so more... And for now things are just getting made to work for a POC, we will need to review all input sanitation as needed. For example should <script> and <style> elements be stripped to not allow it, or a way to enable or disable allowing it?

[ADefWebserver]

I'd rather not try to add too many features and options at this point let's just get this out as something that works and discuss it at the next meeting

[thabaum]

@ADefWebserver we will need to probably refactor a lot of things to keep them from colliding namespaces with the RichTextEditor version.

Be sure you are using the latest Oqtane.Framework dev branch for 5.2.0 packages and fixes. I will work on both the framework and this POC along with documentation see what we can get done.

I refactored a lot and editors are working for me other than expected issues so far so I will try to reproduce your issue reported on the earler PR #20 merged.

I have most parameters set, working on some additional tweaks that maybe... breaking things, I was given a green light here so bare with me as it should all pull together in the end for you to review and fine tune.

I will make sure both editors do not conflict if there are any so they both work once this package is installed.

[thabaum]

This editor still works for me in debug F5... FYI not sure what environment you are running in if having any issues such as IIS from a release package?

I will just get some things working and try to merge over what is needed to get to where I am at by end of today.

[thabaum]

I have not tested against all the latest as I upgraded mine manually.

I will download all fresh into a new folder and run it to compare what may need updated to match what I have.

So this is F5 Debug Mode?

Oqtane HTML Rich Text Editor works until you build the new html V2 solution to install that package into Oqtane?

No errors in F12 of browser developer mode?

It has always worked in my setup but my dev environment has too much stuff to just... push it... going on.

I wont get anywhere worrying too much about the one that works with Oqtane already.

It looks like maybe the CSS or JS file is not loading to build the QuillJS UI.

[ADefWebserver]

Whether I'm running in F5 or debug it's not working at all so you really want to pull this down to a brand new install and see thanks!

[thabaum]

Well... you can try 5.1.2 and upgrade the packages on all the projects... that is probably closer to what I am running. i am not going to play too much with this issue until I get the latest version of my code updated and merged into this repo... then I can fix the repo as needed.

The current state of this repo is not POC... but evolving to one. IF it works for me it should for you once I merge changes... right?!

[thabaum]

I will create another branch based off this one, and start pushing my changes to it, prior to creating a PR here you can test it...

[ADefWebserver]

We can't just have it work against the latest Dev branch of Oqtane?

[thabaum]

https://github.com/thabaum/ADefWebserver.Module.HtmlTextV2/tree/HtmlEditorComponent-HTML-Editor

This will be a temporary repo for my upcoming changes to push here. It should have a lot of stuff done to it by end of day you can test and I will test at end of day against the latest oqtane framework dev branch "debug" builds and visual studio

[thabaum]

Since the current branch works as far as the demo goes, I have a major update coming for the HtmlEditor.Blazor project as I merge all the latest things with latest updates. It is quite a task reviewing things so hoping I do not miss anything in next PR but should be OK if something goes wrong, I probably have the solution. I think it is getting close, I need to add things necessary to make it all gel together. I may add things we can remove later.

[thabaum]

Well after first attempt merging all the latest code into the HtmlEditor.Blazor things still work... but the icon/buttons are not styling for active/inactive on changes and the color pickers and font style selection drop downs still do not work.

I believe I have moved all code and refactored things as needed. I don't get where the sass files come from in that repo, and why not in the radzen project. I found one for bootstrap and so I copied it as a theme. Maybe it is causing me issues now.

This is after pretty much making my own version of the latest version aftermath.

I dont feel this is worthy of pushing yet so I am going to hold back for a day see how things go.

Also there is an option to "Paste Without Formatting" but it did not work as it pasted with formatting I believe... I will try some other tests.

The current state of this repo is best so far for demonstration.

I will make a go at this tomorrow again see what I can find out. Rome wasn't built in a day, neither will this new HTML module for Oqtane :)

A lot of css going on here I may have one or two classes to fix hard coded in or something is way off as it really should just work you would think lol.

I made some strides took a long time to copy all that and compare making sure all the cracks get filled to make it build.

A lot of warnings still maybe those will cure some things if I start working on those now.

At least it is in the right location to review and works with the latest build from Oqtane Framework dev branch.

I suppose we can start creating issues to resolve as found.

[thabaum]

I also added the bootstrap theme, I am not sure how all these themes are designed. I have a small push to fix source editor I can offer tonight.

[thabaum]

I was able to finally get all that CSS stuff to load with the latest version so it looks more presentable and actually works with showing buttons active/inactive.

The color pickers and format dropdowns still dont allow changing selection. I still see some more issues to resolve on my end as I dive deeper into the latest code base for Radzen.

A couple things worth mentioning that seem to be resolved after migrating to all the latest Radzen code:

• The switching between Design and Source mode content changed is kept when switching between them now.
• The toolbar inactive/active formatting works now showing what is active.

Things still cooking:
Settings.razor

File Manager

Inactive Toolbar Items

Paste Without Formatting Works Partially as on the radzen site it loses the center formatting (used to do nothing so getting better)

I feel these should get done up by me or someone in the near future. There are all kinds of issues I am sure to come once things come into focus, if accepted by community.

Full View:

Hope for more updates sometime soon.

This is what we are shooting for:

https://blazor.radzen.com/html-editor

[ADefWebserver]

That is great work. I think we should stop here :)