Passing in valid html ul and li elements does not display correctly

[oliverbcadillac]

I'm reading in valid html created from another source and have noticed that any html elements inside a

• {{IN HERE}}

do not render and are missing from the document when inspected. I have tried changing the ValueHtmlBehavior as I'm thinking it might be linked with the quill list issue but had no luck.

[fgilde]

can you create a demo solution where I can see and follow the problem?

[horrorhound]

I can't get a bullet list to re-display with @bind-Value to a variable with a ul list.

html: <p>test</p><ul><li>llist</li></ul>

Only "test" displays.

<MudExRichTextEdit ReadOnly="false" Height="222" Class="mt-4" Required="true" @bind-Value="Description" Placeholder="Description">

private string Description = "<p>test</p><ul><li>llist</li></ul>"

[horrorhound]

Found the solution for the lists to render correctly.

Add the EditorContent and tell blazor/control it's value contains HTML markup. If the text value contains HTML markup (which is almost 100% of the time because we are using a richtextbox); then we need to tell the page to render with "MarkupString" so html elements render correctly.

Add this inside your MudExRichTextEdit

@((MarkupString)Value)

[jschmidtX]

I currently have the same issue.

Value is a string in this context and i added the cast inside of the MudExRichTextEdit like this:

<MudExRichTextEdit Value="@Value"
                   Height="300"
                   EnableResize="true"
                   ReadOnly="true"
                   HideToolbarWhenReadOnly="true">
    @((MarkupString)Value)
</MudExRichTextEdit>

Still, lists do not get re-displayed. I tried using @bind-Value and ReadOnly="false" too, but nothing changed.

[hrosteck]

Dont know if you need it anymore but when you write it like this, it should work:

<MudExRichTextEdit Value="@Value"
                   Height="300"
                   EnableResize="true"
                   ReadOnly="true"
                   HideToolbarWhenReadOnly="true">
       <EditorContent>
           @((MarkupString)(Value))
       </EditorContent>
</MudExRichTextEdit>

[justindesrosiers]

I'm trying this and while it displays the text, the bound value doesn't seem to be updating when changed.

<MudExRichTextEdit Height="400"
                   Value="_value
                   Tools="@_tools"
                   ReadOnly="false"
                   Placeholder="Description">
    <EditorContent>
        @((MarkupString)_value)
    </EditorContent>
</MudExRichTextEdit>

[hrosteck]

Hi Justin,
I think the reason the bound value isn’t updating is that you’re using EditorContent. With EditorContent you’re essentially providing the content via a render fragment, so you need to wire changes back explicitly via ValueChanged—otherwise it behaves like one-way binding.

A simple pattern that works well is:

<MudExRichTextEdit Value="@_text"
                   ValueChanged="OnTextChanged"
                   Tools="_tools"
                   Modules="_modules"
                   Height="235"
                   Immediate="true"
                   Placeholder="">
    <EditorContent>
        @((MarkupString)(_text ?? string.Empty))
    </EditorContent>
</MudExRichTextEdit>

@code {
    private string? _text;

    private Task OnTextChanged(string? value)
    {
        _text = value;
        return Task.CompletedTask;
    }
}

[justindesrosiers]

Thanks Hendrik, that seemed to work. A little more context on my situation I was getting an additional error, I think because I was binding a property on an object in my component that held the editor.

I had to create a private property to hold the initial value and do a bit of redirection, but it all seems to work well now.

This is all in the context of a component for editing my WorkItem model.

<MudExRichTextEdit Height="400"
                   Tools="@_tools"
                   ReadOnly="false"
                   ValueChanged="OnDescriptionChanged"
                   Immediate="true"
                   Value="@WorkItem.Description"
                   Placeholder="Description">
    <EditorContent>
        @((MarkupString)(_description ?? string.Empty))
    </EditorContent>
</MudExRichTextEdit>

@code{
  [Parameter]
  public WorkItem? WorkItem { get; set; }
  private string? _description { get; set; }

  protected override void OnInitialized()
  {
      if(WorkItem != null)
      {
          
          _description = WorkItem.Description ?? string.Empty;
  
      }
      
      base.OnInitialized();
  }
  
  private Task OnDescriptionChanged(string value)
  {
  
      if (WorkItem != null)
      {
  
          WorkItem.Description = value;
  
      }
  
      return Task.CompletedTask;
  
  }
}

[hrosteck]

Hi Justin, glad I could help.

One quick tip: right now you’re mixing two sources of truth:

Value="@WorkItem.Description" (source A)

EditorContent renders _description (source B)

That can work, but it’s fragile and can lead to subtle sync issues.

I’d recommend making _description your single source of truth for the editor, and then writing back to WorkItem.Description inside ValueChanged. Also, OnParametersSet is better for the initial sync than OnInitialized, because parameters can still change after initialization.

Ideally it would look like this:

<MudExRichTextEdit Height="400"
                   Tools="@_tools"
                   ReadOnly="false"
                   Value="@_description"
                   ValueChanged="OnDescriptionChanged"
                   Immediate="true"
                   Placeholder="Description">
    <EditorContent>
        @((MarkupString)(_description ?? string.Empty))
    </EditorContent>
</MudExRichTextEdit>

@code {
    [Parameter] 
    public WorkItem? WorkItem { get; set; }

    private string? _description { get; set; }

    protected override void OnParametersSet()
    {
        _description = WorkItem?.Description ?? string.Empty;
    }

    private Task OnDescriptionChanged(string? value)
    {
        _description = value ?? string.Empty;

        if (WorkItem != null)
            WorkItem.Description = _description;

        return Task.CompletedTask;
    }
}

[justindesrosiers]

Hendrik, I tried out your solution and I get the error that I was getting previously: System.InvalidOperationException: TypeError: can't access property "removeChild", o.parentNode is null . I can't quite pin down why it would give me that error.

[hrosteck]

Oh thats strange. Likely a rerender race: parameters/state updates trigger a rerender mid-edit and the JS editor then tries to remove a node that Blazor already replaced (removeChild/parentNode is null). Maybe disable Immediate and try again. Or only update the workitem in the onparameterset when the value really changed - unfortunately I have no idea, its all just a guess

[justindesrosiers]

No problem, I appreciate your help getting me this far. What I have seems to work, so I'll keep it that way for now and provide any updates if I get something more stable working. I tried your recommendations from your last comment, but the result was the same error.

[sinhchau]

Hi, I somehow fixed this issue by using ValueHtmlBehavior="GetHtmlBehavior.InnerHtml".