Coder Social home page Coder Social logo

mynihongo / mudblazor.markdown Goto Github PK

View Code? Open in Web Editor NEW
114.0 114.0 13.0 1.33 MB

Markdown component based on the MudBlazor environment

Home Page: https://mudblazor.com/

License: MIT License

C# 95.16% CSS 1.85% JavaScript 2.99%
blazor blazor-client blazor-components blazor-server blazor-webassembly markdown material mudblazor netcore wasm

mudblazor.markdown's People

Contributors

cabiste-dev avatar dependabot[bot] avatar erri120 avatar kelltom avatar lukazoid avatar mattparkerdev avatar mihailskuzmins avatar my-nihongo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

mudblazor.markdown's Issues

Bug: Unknown language in MudCodeHighlight

Thanks for this great library ๐Ÿ˜€.

I am encountering an exception when using a Markdown code block with an unknown language, in this case razor:

Unhandled exception rendering component: Unknown language: "razor"
      p@http://localhost:5000/_content/MudBlazor.Markdown/MudBlazor.Markdown.min.js:1:15271
      m@http://localhost:5000/_content/MudBlazor.Markdown/MudBlazor.Markdown.min.js:1:12107
      @http://localhost:5000/_content/MudBlazor.Markdown/MudBlazor.Markdown.min.js:1:864294
      @http://localhost:5000/_framework/blazor.web.js:1:3244
      Promise@[native code]
      beginInvokeJSFromDotNet@http://localhost:5000/_framework/blazor.web.js:1:3212
      @http://localhost:5000/_framework/blazor.web.js:1:62919
      _invokeClientMethod@http://localhost:5000/_framework/blazor.web.js:1:63726
      _processIncomingData@http://localhost:5000/_framework/blazor.web.js:1:60408
      @http://localhost:5000/_framework/blazor.web.js:1:82184
Microsoft.JSInterop.JSException: Unknown language: "razor"
      p@http://localhost:5000/_content/MudBlazor.Markdown/MudBlazor.Markdown.min.js:1:15271
      m@http://localhost:5000/_content/MudBlazor.Markdown/MudBlazor.Markdown.min.js:1:12107
      @http://localhost:5000/_content/MudBlazor.Markdown/MudBlazor.Markdown.min.js:1:864294
      @http://localhost:5000/_framework/blazor.web.js:1:3244
      Promise@[native code]
      beginInvokeJSFromDotNet@http://localhost:5000/_framework/blazor.web.js:1:3212
      @http://localhost:5000/_framework/blazor.web.js:1:62919
      _invokeClientMethod@http://localhost:5000/_framework/blazor.web.js:1:63726
      _processIncomingData@http://localhost:5000/_framework/blazor.web.js:1:60408
      @http://localhost:5000/_framework/blazor.web.js:1:82184
         at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
         at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
         at MudBlazor.MudCodeHighlight.OnAfterRenderAsync(Boolean firstRender)
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

I have checked whether the markdig library is responsible for the error. However, it seems like markdig is not the source of the problem, as demonstrated by the following working code:

var result = Markdown.ToHtml("""
```foo
this is a test
```
""");
Console.WriteLine(result);

Therefore, I believe the issue arises from the MudCodeHighlight component in MudBlazor.Markdown. Unfortunately, I couldn't pinpoint the exact location in the code where the error was being produced, likely due to my limited familiarity with the codebase.

When an unknown language is encountered, I expect the code to be rendered without syntax highlighting.

Can we resolve this issue easily ๐Ÿคทโ€โ™‚๏ธ?

Add BaseUrl option for relative links

GitHub readmes often contain relative links which GitHub converts to absolute Urls. eg:

![some image](assets/some_image.webp)

In the current version this will produce something like this:

<img src="assets/some_image.webp" alt="some image"/>

I suggset adding some sort of BaseUrl option for the component which will be combined with the relative Url before creating the image component. I would define relative Urls as links that do not start with #, https://, http:// or www but there might be other cases.

Feature Request: Extensible rendering

Me, again.

It would also be useful to be able to extend this behavior:

case ParagraphBlock paragraph:
{
RenderParagraphBlock(paragraph, builder);
break;
}
case HeadingBlock heading:
{
var typo = (Typo)heading.Level;
typo = OverrideHeaderTypo?.Invoke(typo) ?? typo;
_enableLinkNavigation = true;
var id = heading.BuildIdString();
RenderParagraphBlock(heading, builder, typo, id);
break;
}
case QuoteBlock quote:
{
builder.OpenElement(_elementIndex++, "blockquote");
RenderMarkdown(quote, builder);
builder.CloseElement();
break;
}
case Table table:
{
RenderTable(table, builder);
break;
}
case ListBlock list:
{
RenderList(list, builder);
break;
}
case ThematicBreakBlock:
{
builder.OpenComponent<MudDivider>(_elementIndex++);
builder.CloseComponent();
break;
}
case FencedCodeBlock code:
{
var text = code.CreateCodeBlockText();
builder.OpenComponent<MudCodeHighlight>(_elementIndex++);
builder.AddAttribute(_elementIndex++, nameof(MudCodeHighlight.Text), text);
builder.AddAttribute(_elementIndex++, nameof(MudCodeHighlight.Language), code.Info ?? string.Empty);
builder.AddAttribute(_elementIndex++, nameof(MudCodeHighlight.Theme), CodeBlockTheme);
builder.CloseComponent();
break;
}
case HtmlBlock html:
{
if (html.TryGetDetails(out var detailsData))
RenderDetailsHtml(builder, detailsData);
else
RenderHtml(builder, html.Lines);
break;
}

So that one can provide rendering logic for custom blocks we introduce with custom pipelines. As always, I'd be happy to do the necessary refactoring along with any other changes required in a PR, if you prefer.

new lines in tables

header1 header2
cell1
new line
cell2
|header1|header2|
|-|-|
|cell1<br>new line|cell2|

Now <br> or <br/> are ignored

Content after Code block is not rendered

Hello,

I found an issue with content not rendered after a code block.
The first element that happens to be after a code block will not be displayed with MudBlazor.Markdown. When inspecting the rendered HTML with Devtools the element is really not rendered to the website.

I use Blazor WASM 6.0.1, MudBlazor 6.0.5 and MudBlazor.Markdown 0.0.6.
I also first tried to repro this issue with Markdig 0.26.0 standalone to make sure it isn't a Markdig issue, but Markdig alone renders the samples correctly, so it seems to come from MudBlazor.Markdown itself.

Repro:

Given the following Markdown content:

# Heading 1
Some text.

```csharp
public int GetTheAnswer()
{
   return 42;
}
```

## Another headline <-- this element is NOT rendered with MudBlazor.Markdown
## Another headline <-- this element is shown again

It really doesn't matter what follows the code block. The whole next element will be ignored. In the following example the whole list with all three items is not rendered to the page and ignored:

```text
some
code
```

* List item 1
* List item 2
* List item 3

## Another headline <-- this element is shown again

Render <details>

a <details> tag is not rendered correctly.
Example where the "Release 1.0.1" is not rendered:

Release 1.0.1 **New** - Error fixes.

Static resources missing in version 0.0.7

I've tryed using the latest version (0.0.7) and it seems that the static resources (CSS and JS) are missing from the NuGet package. From what I've seen, they are present in the project, but missing from package.

Edit

Hi,
edit, sorry I miss understand.

Table not showing when indented

Table is not showing using if there is any indentation in the content, se example below:

## Prereq
The following requirements must be met outside this Terraform code in advance.

1. Created a new resource group..
2. Created a new AAD group using naming convention..
3. Created a new AAD group using naming convention..
4. Created a separate storage account..
5. Created a new app registration..
     
  |Permission | Type | Granted Through|
  |--|--|--|
  |User.Read | Delegated | Admin consent|
  | User.ReadBasic.All |Delegated| Admin consent|
  |User.Read.All|Delegated| Admin consent|
  |Directory.Read.Alll|Delegated| Admin consent|
  |Directory.AccessAsUser.All|Delegated| Admin consent|
  |User.Invite.All|Application| Admin consent|
  |Directory.Read.All|Application| Admin consent|
  |User.Read.All|Application| Admin consent|
  - Granted permissions User.Invite.All and GroupMember.ReadWrite.All. Admin consent has been granted
 
6. Create a new app registration..
7. Created the key vault..
8. Created secrets..

After binding value changes, the code block fails to update the corresponding value even if call StateHasChanged

First, I would like to express my gratitude for providing such a great component.
Regarding the relative issue #166, it seems that the issuer had already provided an example code. However, the author used a different test code instead of the code-block to attempt to replicate the problem.
I have encountered the same problem when doing code-block re-rendering while other parts are OK.

Detach code block background color from OverlayDark

Just wanted to drop a quick issue here in case anyone is maintaining.

I notice that it's not really ideal to have the code block's bg color tied to OverlayDark. The below examples are using the default MudBlazor theme colors.

In light mode, you'd end up with something like this, which has poor contrast:
chrome_ZRJcHPlQVl

Although it looks quite good in dark mode:
chrome_1M1ShfceI6

We can lighten the OverlayDark in the MudBlazor Theme config, but this changes the appearance of all of our dialog backgrounds to appear washed out, as opposed to making a shadowy appearance.

Is there some better way to isolate the color of the code bg in light mode?

tested issue #114, still problems

Hi,
I tested the latest version of MudBlazor.Markdown 0.0.12 regarding issue #114 and the <details> tag.
There are still problems if you have a crlf between the lines in the content that you use :

<details>
  <summary markdown="span">Release 1.0.1</summary>

**New**
-  Error fixes.

</details>

This works OK:

<details>
  <summary markdown="span">Release 1.0.1</summary>
**New**
-  Error fixes.
</details>

In Visual Studio I use the extension Markdown Editor v2 to validate the markdown, example 1 render OK, example 2 does not.

I did have a look in the code, but couldnโ€™t figure out what to do.

Code Markdown

Its possible to get support for code markdown? like

config: test
config2: test2

etc

Rendering Math Expressions

I would like to include Math expressions like so:

When $a \ne 0$ , there are two solutions to $(ax^2 + bx + c = 0)$ and they are

$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$

this is supported in github markdown.

Can I make it work in MudMarkdown?

Style overrides

I noticed right away that tables were rendered with elevation and I can't really remove it. You may need to include additional delegates to override parameters on any mud components that you're using (e.g. tables) the same way you override typography styles. I'm not quite sure how it would look but maybe something where you take a delegate for the user to to implement, and you have your control pass in the instance of each table?

<MudMarkdown Value="@MyContent" OverrideTable="TransformTable" />

@code {
   MudTable TransformTable(MudTable tableInstance) {
    tableInstance.Elevation = 0; 
    return tableInstance;
   }
}

Nuget package includes package.json and package-lock.json files

As the title suggests the nuget package contains these files as seen in the nusepc file:

    <contentFiles>
      <files include="any/net5.0/package-lock.json" buildAction="Content" />
      <files include="any/net5.0/package.json" buildAction="Content" />
    </contentFiles>

I think you have to explicitly set these files to not be packed into the nuget package similar to how you did it with the favico:

<ItemGroup>
<None Include="..\..\favico.png">
<Pack>True</Pack>
<PackagePath></PackagePath>
</None>
</ItemGroup>

v1.0.1 - MudMarkdown fails to render newline characters

Prior to this update, MudMarkdown was able to handle the following component without issue:

<MudMarkdown Value="`MudMarkdown` is a third party component that renders markdown text." />

<MudText Typo="Typo.caption">C#</MudText>
<MudMarkdown Value="@codeSnippet" />


@code {
    string codeSnippet = "```csharp\n// comment\nvar x = 5;\nvoid Increment() {\n  x++;\n  Console.WriteLine(x);\n}\nIncrement();\n```";
}

But we're met with the following error:
chrome_nPkYDJVbI9

Plaintext:

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Could not resolve type with token 01000041 from typeref (expected class 'Enumerator' in assembly '')
System.TypeLoadException: Could not resolve type with token 01000041 from typeref (expected class 'Enumerator' in assembly '')
   at MudBlazor.MudMarkdown.RenderFencedCodeBlock(RenderTreeBuilder& builder, FencedCodeBlock& code)
   at MudBlazor.MudMarkdown.RenderMarkdown(ContainerBlock container, RenderTreeBuilder builder)
   at MudBlazor.MudMarkdown.BuildRenderTree(RenderTreeBuilder builder)
   at Microsoft.AspNetCore.Components.ComponentBase.<.ctor>b__6_0(RenderTreeBuilder builder)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)

Is this intended, and if so, are there other ways to render newline characters in the Value property?

v1.0.2 - Errors with MudBlazor 7.1 on CodeBlock

Hey y'all!

I'm trying to use this package with MudBlazor 7.1, which I'm not sure if is entirely supported by this package at this point, but I'm running into errors when I use a Code Block component and lists. Standard Bold, Italics, Bold Italics work, but Code Block throws 2 exceptions on render and lists don't render bullets. If y'all have a build that works for 7.x, I'd really appreciate that build being released even as pre-release so I can keep moving with this project.

Here's the behavior I'm seeing
CleanShot 2024-07-11 at 10 25 32

And the basic Code:

    <MudItem xs="12" Class="pb-0">
        <MudTextField T="string"
                      @bind-Value="_content"
                      AutoGrow="true"
                      Disabled="_isLoading"
                      Lines="2"
                      Variant="Variant.Outlined"
                      Placeholder="Content"
                      Immediate="true"
                      HelperText="@ContentHelperText"
                      MaxLength="_contentCharLimit"/>
    </MudItem>
    <MudItem xs="12" Class="pt-2">
        <MudText Typo="Typo.subtitle2">Preview</MudText>
        <MudMarkdown Value="@_content"/>
    </MudItem>

Here are the exceptions thrown by Code Block:

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Could not find 'setHighlightStylesheet' ('setHighlightStylesheet' was undefined).
      Error: Could not find 'setHighlightStylesheet' ('setHighlightStylesheet' was undefined).
          at https://localhost:7119/_framework/blazor.webassembly.js:1:368
          at Array.forEach (<anonymous>)
          at l.findFunction (https://localhost:7119/_framework/blazor.webassembly.js:1:336)
          at w (https://localhost:7119/_framework/blazor.webassembly.js:1:5079)
          at https://localhost:7119/_framework/blazor.webassembly.js:1:2872
          at new Promise (<anonymous>)
          at b.beginInvokeJSFromDotNet (https://localhost:7119/_framework/blazor.webassembly.js:1:2835)
          at Object.vn [as invokeJSJson] (https://localhost:7119/_framework/blazor.webassembly.js:1:58849)
          at https://localhost:7119/_framework/dotnet.runtime.8.0.5.gd6neq3kwe.js:3:178364
          at Tl (https://localhost:7119/_framework/dotnet.runtime.8.0.5.gd6neq3kwe.js:3:179198)
Microsoft.JSInterop.JSException: Could not find 'setHighlightStylesheet' ('setHighlightStylesheet' was undefined).
Error: Could not find 'setHighlightStylesheet' ('setHighlightStylesheet' was undefined).
    at https://localhost:7119/_framework/blazor.webassembly.js:1:368
    at Array.forEach (<anonymous>)
    at l.findFunction (https://localhost:7119/_framework/blazor.webassembly.js:1:336)
    at w (https://localhost:7119/_framework/blazor.webassembly.js:1:5079)
    at https://localhost:7119/_framework/blazor.webassembly.js:1:2872
    at new Promise (<anonymous>)
    at b.beginInvokeJSFromDotNet (https://localhost:7119/_framework/blazor.webassembly.js:1:2835)
    at Object.vn [as invokeJSJson] (https://localhost:7119/_framework/blazor.webassembly.js:1:58849)
    at https://localhost:7119/_framework/dotnet.runtime.8.0.5.gd6neq3kwe.js:3:178364
    at Tl (https://localhost:7119/_framework/dotnet.runtime.8.0.5.gd6neq3kwe.js:3:179198)
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[Microsoft.JSInterop.Infrastructure.IJSVoidResult, Microsoft.JSInterop, Version=8.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext()
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
   at MudBlazor.MudCodeHighlight.SetThemeAsync()
   at MudBlazor.MudCodeHighlight.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Could not find 'highlightCodeElement' ('highlightCodeElement' was undefined).
      Error: Could not find 'highlightCodeElement' ('highlightCodeElement' was undefined).
          at https://localhost:7119/_framework/blazor.webassembly.js:1:368
          at Array.forEach (<anonymous>)
          at l.findFunction (https://localhost:7119/_framework/blazor.webassembly.js:1:336)
          at w (https://localhost:7119/_framework/blazor.webassembly.js:1:5079)
          at https://localhost:7119/_framework/blazor.webassembly.js:1:2872
          at new Promise (<anonymous>)
          at b.beginInvokeJSFromDotNet (https://localhost:7119/_framework/blazor.webassembly.js:1:2835)
          at Object.vn [as invokeJSJson] (https://localhost:7119/_framework/blazor.webassembly.js:1:58849)
          at https://localhost:7119/_framework/dotnet.runtime.8.0.5.gd6neq3kwe.js:3:178364
          at Tl (https://localhost:7119/_framework/dotnet.runtime.8.0.5.gd6neq3kwe.js:3:179198)
Microsoft.JSInterop.JSException: Could not find 'highlightCodeElement' ('highlightCodeElement' was undefined).
Error: Could not find 'highlightCodeElement' ('highlightCodeElement' was undefined).
    at https://localhost:7119/_framework/blazor.webassembly.js:1:368
    at Array.forEach (<anonymous>)
    at l.findFunction (https://localhost:7119/_framework/blazor.webassembly.js:1:336)
    at w (https://localhost:7119/_framework/blazor.webassembly.js:1:5079)
    at https://localhost:7119/_framework/blazor.webassembly.js:1:2872
    at new Promise (<anonymous>)
    at b.beginInvokeJSFromDotNet (https://localhost:7119/_framework/blazor.webassembly.js:1:2835)
    at Object.vn [as invokeJSJson] (https://localhost:7119/_framework/blazor.webassembly.js:1:58849)
    at https://localhost:7119/_framework/dotnet.runtime.8.0.5.gd6neq3kwe.js:3:178364
    at Tl (https://localhost:7119/_framework/dotnet.runtime.8.0.5.gd6neq3kwe.js:3:179198)
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[Microsoft.JSInterop.Infrastructure.IJSVoidResult, Microsoft.JSInterop, Version=8.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext()
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
   at MudBlazor.MudCodeHighlight.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

Change the logo

Jonny said that saving the original logo caused some troubles. Let's adjust it. Maybe change the colour?

Add Src

Add a Src parameter.

Example

<MudMarkdown Src="wiki/getting_started.md" />

Code markdown doesn't respect language tag

Markdown for code blocks with a language specified such as ```csharp doesn't highlight the code for the specified language, instead it is using the highlight.js language detection logic.

I believe this is due to the use of highlightElement:

hljs.highlightElement(element, { language: lang });

Which from the highlight.js docs doesn't take any options, instead the language should be specified in the class attribute of the DOM node (see https://highlightjs.readthedocs.io/en/latest/api.html#highlightelement)

Broken Link in README in Palette Section

There is a broken link in the README in regards to how to use the pallette. I am having trouble with code blocks but im positive im doing something wrong but im just trying to learn

my project: https://github.com/alvaromon/BitbyBitBlog.git Sprint1 branch

Im running into an issue that my site Theme is overwriting the text color for fenced code blocks

example using CodeBlockTheme.DarkVioletBase16 where text is supposed to be light pink.
image
image

Code block copy to clipboard breaks on Android

I am using Mudblazor.Markdown in a .NET MAUI application intended to be used on Android, among other platforms. When running the app in an Android emulator (Pixel 5 - API 28), clicking the Copy button on a Markdown fenced code block generates the following error message in the console:

null
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[Microsoft.JSInterop.Infrastructure.IJSVoidResult, Microsoft.JSInterop, Version=7.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext()
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
   at MudBlazor.MudCodeHighlight.CopyTextToClipboardAsync(MouseEventArgs args)
   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
   at MudBlazor.MudBaseButton.OnClickHandler(MouseEventArgs ev)
   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

From what I can tell, it appears the issue lies with the invocation of 'navigator.clipboard.writeText'. I attempted to invoke this function directly in my own code, and the same error occurred. When I run the app on Windows, everything works fine.

Table shows if not indented but numbering is restarted

Table is showing using but numbering is restarted after. See code below:

## Prereq
The following requirements must be met outside this Terraform code in advance.

1. Created a new resource group..
2. Created a new AAD group using naming convention..
3. Created a new AAD group using naming convention..
4. Created a separate storage account..
5. Created a new app registration..
     
|Permission | Type | Granted Through|
|--|--|--|
|User.Read | Delegated | Admin consent|
| User.ReadBasic.All |Delegated| Admin consent|
|User.Read.All|Delegated| Admin consent|
|Directory.Read.Alll|Delegated| Admin consent|
|Directory.AccessAsUser.All|Delegated| Admin consent|
|User.Invite.All|Application| Admin consent|
|Directory.Read.All|Application| Admin consent|
|User.Read.All|Application| Admin consent|
- Granted permissions User.Invite.All and GroupMember.ReadWrite.All. Admin consent has been granted
 
6. Create a new app registration..
7. Created the key vault..
8. Created secrets..

Issue when code block is empty

First of all, I would like to thank you for the existence of this library. It made it effortless for me to integrate Markdown into my Blazor project. Thank you very much for your work ๐Ÿ˜€.

My issue:
I have been working on a ChatGPT-like UI in Blazor (MudBlazor). I experimented with the OpenAI API, which streams the responses to the client. In doing so, I noticed a problem. Whenever the AI streams the Markdown text for a code block, Blazor crashed with a strange exception: System.NotImplementedException: Unexpected frame type during RemoveOldFrame ๐Ÿคทโ€โ™‚๏ธ.

I quickly realized that it was due to empty code blocks. When the AI streams the Markdown text and there is code in the AI response, there is a temporary situation where an empty code block is created:

```

Then, a few milliseconds later, the Markdown code gets changed, e.g., into:

```
public

After some troubleshooting, I came to the conclusion that the issue lies in this library (okay, so actually the issue is in .NET, but here the situation can be easily avoided). Apparently, Blazor (at least in some places) has a problem with attributes being empty. I don't know what the underlying difficulty with this is exactly. It appears to be similar to dotnet/aspnetcore#17821.

The issue is straightforward to catch. See line 176 in MudMarkdown.razor.cs onwards:

var text = code.CreateCodeBlockText();

builder.OpenComponent<MudCodeHighlight>(ElementIndex++);
builder.AddAttribute(ElementIndex++, nameof(MudCodeHighlight.Text), text);
builder.AddAttribute(ElementIndex++, nameof(MudCodeHighlight.Language), code.Info ?? string.Empty);
builder.AddAttribute(ElementIndex++, nameof(MudCodeHighlight.Theme), CodeBlockTheme);
builder.CloseComponent();

The crash of Blazor occurs when text is empty. I have already created a PR #246.

Nested text is not rendered correctly in list items

Ordered items (probably unordered as well) are not rendered correctly for nested text.

To prevent the warning message regarding the deprecation of the mysql_native_password plugin from being logged, you have a couple of options:

Option 1: Update User Authentication Method:

  1. Connect to your MySQL server using a MySQL client, such as the mysql command-line tool:

    mysql -u username -p
  2. Once connected, run the following command to alter the user's authentication method:

    ALTER USER 'username'@'hostname' IDENTIFIED WITH caching_sha2_password;

    Replace 'username' with the actual username and 'hostname' with the appropriate hostname or IP address. If you want to update for all users, replace 'username'@'hostname' with '*'@'%'.

  3. Repeat this process for each user on your MySQL server.

Compared to what is rendered on GitHub:
image

Probably this issue might be solved in #232, but maybe not, so keep this issue in case there is no progress on the afore cited PR.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.