Skip to content

Commit 9c7900f

Browse files
ArlodotexeArlodotexe
authored
Merge pull request #688 from CommunityToolkit/component/markdowntextblock/samples/split-live-editor-and-feature-showcase
Cleanup samples for MarkdownTextBlock
2 parents b8e039d + 21e5362 commit 9c7900f

5 files changed

Lines changed: 110 additions & 52 deletions

File tree

‎components/MarkdownTextBlock/samples/MarkdownTextBlock.md‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,12 @@ icon: Assets/MarkdownTextBlock.png
2525

2626
MarkdownTextBlock is a evolution of the existing MarkdownTextBlock in the community toolkit. This new implementation uses the popular [Markdig](https://github.com/xoofx/markdig) library for parsing. This solves some long standing bugs and feature gaps in our existing implementation.
2727

28-
## Templated Controls
28+
## Feature Showcase
29+
See all the markdown features and syntax supported by the control:
2930

30-
The Toolkit is built with templated controls. This provides developers a flexible way to restyle components
31-
easily while still inheriting the general functionality a control provides. The examples below show
32-
how a component can use a default style and then get overridden by the end developer.
31+
> [!Sample MarkdownTextBlockExampleSample]
3332
34-
> [!Sample MarkdownTextBlockCustomSample]
33+
## Interactive Live Editor
34+
Try typing markdown and see it rendered in real-time:
35+
36+
> [!Sample MarkdownTextBlockLiveEditorSample]

‎components/MarkdownTextBlock/samples/MarkdownTextBlockExampleSample.xaml‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!-- Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information. -->
2+
<Page x:Class="MarkdownTextBlockExperiment.Samples.MarkdownTextBlockExampleSample"
3+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5+
xmlns:controls="using:CommunityToolkit.Labs.WinUI.MarkdownTextBlock"
6+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
7+
xmlns:local="using:MarkdownTextBlockExperiment.Samples"
8+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
9+
mc:Ignorable="d">
10+
11+
<ScrollViewer>
12+
<controls:MarkdownTextBlock x:Name="MarkdownTextBlock"
13+
Margin="12"
14+
Config="{x:Bind MarkdownConfig, Mode=OneTime}"
15+
DisableHtml="{x:Bind DisableHtml, Mode=OneWay}"
16+
Text="{x:Bind Text, Mode=OneTime}"
17+
UseAutoLinks="{x:Bind UseAutoLinks, Mode=OneWay}"
18+
UseEmphasisExtras="{x:Bind UseEmphasisExtras, Mode=OneWay}"
19+
UseListExtras="{x:Bind UseListExtras, Mode=OneWay}"
20+
UsePipeTables="{x:Bind UsePipeTables, Mode=OneWay}"
21+
UseSoftlineBreakAsHardlineBreak="{x:Bind UseSoftlineBreakAsHardlineBreak, Mode=OneWay}"
22+
UseTaskLists="{x:Bind UseTaskLists, Mode=OneWay}" />
23+
</ScrollViewer>
24+
</Page>

components/MarkdownTextBlock/samples/MarkdownTextBlockCustomSample.xaml.cs renamed to components/MarkdownTextBlock/samples/MarkdownTextBlockExampleSample.xaml.cs

Lines changed: 11 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,24 @@
33
// See the LICENSE file in the project root for more information.
44

55
using CommunityToolkit.Labs.WinUI.MarkdownTextBlock;
6+
using System.Diagnostics;
67

78
namespace MarkdownTextBlockExperiment.Samples;
89

910
/// <summary>
10-
/// An example sample page of a custom control inheriting from Panel.
11+
/// An example sample demonstrating the full capabilities of the MarkdownTextBlock control with comprehensive markdown content.
1112
/// </summary>
12-
[ToolkitSampleBoolOption("UseEmphasisExtras", false, Title = "UseEmphasisExtras")]
13-
[ToolkitSampleBoolOption("UsePipeTables", false, Title = "UsePipeTables")]
14-
[ToolkitSampleBoolOption("UseListExtras", false, Title = "UseListExtras")]
15-
[ToolkitSampleBoolOption("UseTaskLists", false, Title = "UseTaskLists")]
16-
[ToolkitSampleBoolOption("UseAutoLinks", false, Title = "UseAutoLinks")]
13+
[ToolkitSampleBoolOption("UseEmphasisExtras", true, Title = "UseEmphasisExtras")]
14+
[ToolkitSampleBoolOption("UsePipeTables", true, Title = "UsePipeTables")]
15+
[ToolkitSampleBoolOption("UseListExtras", true, Title = "UseListExtras")]
16+
[ToolkitSampleBoolOption("UseTaskLists", true, Title = "UseTaskLists")]
17+
[ToolkitSampleBoolOption("UseAutoLinks", true, Title = "UseAutoLinks")]
1718
[ToolkitSampleBoolOption("DisableHtml", false, Title = "DisableHtml")]
1819
[ToolkitSampleBoolOption("UseSoftlineBreakAsHardlineBreak", false, Title = "UseSoftlineBreakAsHardlineBreak")]
19-
[ToolkitSample(id: nameof(MarkdownTextBlockCustomSample), "Custom control", description: $"A sample for showing how to create and use a {nameof(CommunityToolkit.Labs.WinUI.MarkdownTextBlock)} custom control.")]
20-
public sealed partial class MarkdownTextBlockCustomSample : Page
20+
[ToolkitSample(id: nameof(MarkdownTextBlockExampleSample), "Full Example", description: $"A comprehensive example showcasing all the features and capabilities of the {nameof(CommunityToolkit.Labs.WinUI.MarkdownTextBlock)} control with various markdown syntax.")]
21+
public sealed partial class MarkdownTextBlockExampleSample : Page
2122
{
2223
private MarkdownConfig _config;
23-
private MarkdownConfig _liveConfig;
2424
private string _text;
2525
private const string _markdown = @"
2626
This control was originally written by [Nero Cui](https://github.com/nerocui) for [JitHub](https://github.com/JitHubApp/JitHubV2). The control is powered by the popular [Markdig](https://github.com/xoofx/markdig) markdown parsing library and *almost* supports the full markdown syntax, with a focus on super-efficient parsing and rendering.
@@ -29,10 +29,6 @@ public sealed partial class MarkdownTextBlockCustomSample : Page
2929
3030
&nbsp;
3131
32-
**Try it live!** Type in the *unformatted text box*!
33-
34-
&nbsp;
35-
3632
# COMMENTS
3733
3834
Comments can be added in Markdown, and they won't be rendered to the screen.
@@ -595,27 +591,18 @@ public MarkdownConfig MarkdownConfig
595591
set => _config = value;
596592
}
597593

598-
public MarkdownConfig LiveMarkdownConfig
599-
{
600-
get => _liveConfig;
601-
set => _liveConfig = value;
602-
}
603-
604594
public string Text
605595
{
606596
get => _text;
607597
set => _text = value;
608598
}
609599

610-
public MarkdownTextBlockCustomSample()
600+
public MarkdownTextBlockExampleSample()
611601
{
612602
this.InitializeComponent();
613603
_config = new MarkdownConfig();
614-
_liveConfig = new MarkdownConfig();
615604
_text = _markdown;
616-
MarkdownTextBox.Text = "# Hello World\n\n";
617-
MarkdownTextBlock1.OnLinkClicked += MarkdownTextBlock_OnLinkClicked;
618-
MarkdownTextBlock2.OnLinkClicked += MarkdownTextBlock_OnLinkClicked;
605+
MarkdownTextBlock.OnLinkClicked += MarkdownTextBlock_OnLinkClicked;
619606
}
620607

621608
private void MarkdownTextBlock_OnLinkClicked(object? sender, LinkClickedEventArgs e)

components/MarkdownTextBlock/samples/MarkdownTextBlockCustomSample.xaml renamed to components/MarkdownTextBlock/samples/MarkdownTextBlockLiveEditorSample.xaml

Lines changed: 11 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<!-- Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information. -->
2-
<Page x:Class="MarkdownTextBlockExperiment.Samples.MarkdownTextBlockCustomSample"
1+
<!-- Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information. -->
2+
<Page x:Class="MarkdownTextBlockExperiment.Samples.MarkdownTextBlockLiveEditorSample"
33
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
44
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
55
xmlns:controls="using:CommunityToolkit.Labs.WinUI.MarkdownTextBlock"
@@ -11,23 +11,22 @@
1111
<Grid>
1212
<Grid.RowDefinitions>
1313
<RowDefinition Height="auto" />
14-
<RowDefinition Height="auto" />
15-
<RowDefinition Height="auto" />
16-
<RowDefinition Height="auto" />
14+
<RowDefinition Height="*" />
1715
</Grid.RowDefinitions>
1816
<TextBlock Grid.Row="0"
1917
Margin="0,0,0,12"
2018
FontSize="16"
2119
FontWeight="Bold"
22-
Text="Try it live!" />
20+
Text="Try it live! Type in the text box below and see the markdown rendered in real-time:" />
2321
<Grid Grid.Row="1">
2422
<Grid.ColumnDefinitions>
2523
<ColumnDefinition Width="*" />
2624
<ColumnDefinition Width="*" />
2725
</Grid.ColumnDefinitions>
28-
<controls:MarkdownTextBlock x:Name="MarkdownTextBlock1"
26+
<controls:MarkdownTextBlock x:Name="MarkdownTextBlock"
2927
Grid.Column="0"
30-
Config="{x:Bind LiveMarkdownConfig, Mode=OneTime}"
28+
Margin="0,0,6,0"
29+
Config="{x:Bind MarkdownConfig, Mode=OneTime}"
3130
DisableHtml="{x:Bind DisableHtml, Mode=OneWay}"
3231
Text="{x:Bind MarkdownTextBox.Text, Mode=OneWay}"
3332
UseAutoLinks="{x:Bind UseAutoLinks, Mode=OneWay}"
@@ -38,21 +37,10 @@
3837
UseTaskLists="{x:Bind UseTaskLists, Mode=OneWay}" />
3938
<TextBox x:Name="MarkdownTextBox"
4039
Grid.Column="1"
41-
AcceptsReturn="True" />
40+
Margin="6,0,0,0"
41+
AcceptsReturn="True"
42+
PlaceholderText="Type your markdown here..."
43+
ScrollViewer.VerticalScrollBarVisibility="Auto" />
4244
</Grid>
43-
<TextBlock Grid.Row="2"
44-
Margin="0,0,0,12"
45-
FontSize="16"
46-
FontWeight="Bold"
47-
Text="Built-in Sample" />
48-
<controls:MarkdownTextBlock x:Name="MarkdownTextBlock2"
49-
Grid.Row="3"
50-
Config="{x:Bind MarkdownConfig, Mode=OneTime}"
51-
Text="{x:Bind Text, Mode=OneTime}"
52-
UseAutoLinks="True"
53-
UseEmphasisExtras="True"
54-
UseListExtras="True"
55-
UsePipeTables="True"
56-
UseTaskLists="True" />
5745
</Grid>
5846
</Page>

‎components/MarkdownTextBlock/samples/MarkdownTextBlockLiveEditorSample.xaml.cs‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
using CommunityToolkit.Labs.WinUI.MarkdownTextBlock;
6+
using System.Diagnostics;
7+
8+
namespace MarkdownTextBlockExperiment.Samples;
9+
10+
/// <summary>
11+
/// A live editor sample for the MarkdownTextBlock control where users can type markdown and see it rendered in real-time.
12+
/// </summary>
13+
[ToolkitSampleBoolOption("UseEmphasisExtras", false, Title = "UseEmphasisExtras")]
14+
[ToolkitSampleBoolOption("UsePipeTables", false, Title = "UsePipeTables")]
15+
[ToolkitSampleBoolOption("UseListExtras", false, Title = "UseListExtras")]
16+
[ToolkitSampleBoolOption("UseTaskLists", false, Title = "UseTaskLists")]
17+
[ToolkitSampleBoolOption("UseAutoLinks", false, Title = "UseAutoLinks")]
18+
[ToolkitSampleBoolOption("DisableHtml", false, Title = "DisableHtml")]
19+
[ToolkitSampleBoolOption("UseSoftlineBreakAsHardlineBreak", false, Title = "UseSoftlineBreakAsHardlineBreak")]
20+
[ToolkitSample(id: nameof(MarkdownTextBlockLiveEditorSample), "Live Editor", description: $"An interactive live editor for the {nameof(CommunityToolkit.Labs.WinUI.MarkdownTextBlock)} control. Type markdown and see it rendered in real-time.")]
21+
public sealed partial class MarkdownTextBlockLiveEditorSample : Page
22+
{
23+
private MarkdownConfig _config;
24+
25+
public MarkdownConfig MarkdownConfig
26+
{
27+
get => _config;
28+
set => _config = value;
29+
}
30+
31+
public MarkdownTextBlockLiveEditorSample()
32+
{
33+
this.InitializeComponent();
34+
_config = new MarkdownConfig();
35+
MarkdownTextBox.Text = """
36+
# Hello World
37+
38+
Try typing some **markdown** here!
39+
40+
- Item 1
41+
- Item 2
42+
- [ ] Task item
43+
44+
> This is a blockquote
45+
46+
```csharp
47+
Console.WriteLine("Hello, World!");
48+
```
49+
""";
50+
MarkdownTextBlock.OnLinkClicked += MarkdownTextBlock_OnLinkClicked;
51+
}
52+
53+
private void MarkdownTextBlock_OnLinkClicked(object? sender, LinkClickedEventArgs e)
54+
{
55+
Debug.WriteLine($"Link Clicked: {e.Uri}");
56+
}
57+
}

0 commit comments

Comments
 (0)