Skip to content

Commit cb3b3cb

Browse files
AnnaSasDevAnnaSasDev
authored
Change : Replacement of old static editor with new fully functional Editor (#132)
* Feat: Enhance Markdown editor with new modifier and insert action events, default toolbar components, and extended CSS utility classes. * Feat: Refactor modifiers with `Name` constants and extend toolbar with highlight and list insert actions. * Refactor: Remove `IconName` property from text modifiers and update toolbar with new CSS utility class. * Refactor: Replace `InfiniMarkdownEditorNew` with `InfiniMarkdownEditor`, remove old components, and update related examples and tests. * Fix: Add missing spacing in insertable text constants and correct "Link" tooltip to "Table" in Markdown editor toolbar * Update InfiniMdEditorToolbarDefault.razor * Update ExampleMarkdownEditor.razor
1 parent 7e54ea4 commit cb3b3cb

36 files changed

Lines changed: 583 additions & 699 deletions

‎dev/DevTools.MdTestHelper/Components/Pages/MdTestDataEditor/MdTestDataEditorData.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
<div class="h-full w-full flex flex-col gap-1">
5252
<InfiniHeading4 Class="min-h-6">Markdown Input</InfiniHeading4>
5353

54-
<InfiniMarkdownEditorNew @bind-EditorContext="Context"/>
54+
<InfiniMarkdownEditor @bind-EditorContext="Context"/>
5555

5656
<InfiniSpacer/>
5757
<div class="w-full flex justify-center items-center h-16">

‎examples/Example.InfiniBlazor.Shared/Components/Layout/NavBarLeft.razor‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,8 @@
3434
</div>
3535

3636
<InfiniNavLink
37-
Href="/markdown-dual"
38-
Text="Markdown Example"
39-
Icon="@LucideNames.Ghost"
40-
/>
41-
42-
<InfiniNavLink
43-
Href="/markdown-editor/new"
44-
Text="Markdown Editor 2"
37+
Href="/markdown-editor"
38+
Text="Markdown Editor"
4539
Icon="@LucideNames.Signature"
4640
/>
4741

‎examples/Example.InfiniBlazor.Shared/Components/Pages/ExampleMarkdownEditor.razor‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,33 +3,35 @@
33
@* ------------------------------------------------------------------------------------------------------------------ *@
44
@using InfiniLore.InfiniBlazor
55
@using InfiniLore.InfiniBlazor.Markdown
6-
@using InfiniLore.InfiniBlazor.Markdown.Editors
76
@* ------------------------------------------------------------------------------------------------------------------ *@
87
@* Descriptors
98
@* ------------------------------------------------------------------------------------------------------------------ *@
10-
@page "/markdown-dual"
9+
@page "/markdown-editor"
1110
@rendermode InfiniRenderModeProvider.InfiniRenderMode
1211
@* ------------------------------------------------------------------------------------------------------------------ *@
1312
@* Html
1413
@* ------------------------------------------------------------------------------------------------------------------ *@
1514
<InfiniPage Title="Markdown Editor" Class="p-4 w-full">
16-
<InfiniSection Class="grow flex flex-col gap-2 overflow-auto infini-scrollbar h-128 w-full">
17-
<InfiniHeading1>Markdown Editor Example</InfiniHeading1>
18-
<InfiniMarkdownEditor Source="@TextSource0"/>
15+
<InfiniSection Class="grow flex flex-col gap-2 overflow-auto infini-scrollbar min-h-128 w-full">
16+
<InfiniHeading1>Markdown Editor</InfiniHeading1>
17+
<InfiniMarkdownEditor @bind-EditorContext="Context">
18+
<ToolbarBottom>
19+
<InfiniMdEditorToolNodeCounter/>
20+
<InfiniMdEditorToolWordCounter/>
21+
</ToolbarBottom>
22+
</InfiniMarkdownEditor>
23+
<hr class="my-4 border-t border-(--border)"/>
24+
<InfiniCodeBlock @bind-Content="Context.Content" Language="markdown" />
1925
</InfiniSection>
20-
21-
@* <InfiniSection Class="flex flex-col gap-2 overflow-auto infini-scrollbar h-128"> *@
22-
@* <InfiniHeading1>Markdown Editor Example</InfiniHeading1> *@
23-
@* <InfiniMarkdownEditor @bind-Content="@TextContent1" ShowSidePreview="@false"/> *@
24-
@* </InfiniSection> *@
2526
</InfiniPage>
2627
@* ------------------------------------------------------------------------------------------------------------------ *@
2728
@* Code
2829
@* ------------------------------------------------------------------------------------------------------------------ *@
2930
@code {
30-
private ITextSource TextSource0 { get; set; } = new TextSource();
31-
// private ITextSource TextSource1 { get; set; } = new TextSource {
32-
// Text = "Some Initial text..."
33-
// };
31+
public MdEditorContext Context = new() {
32+
IsInteractive = true,
33+
Content = "- [ ] something"
34+
};
35+
// public string? Content { get; set; } = "- [ ] something";
3436
}
3537

‎examples/Example.InfiniBlazor.Shared/Components/Pages/ExampleMarkdownEditorNew.razor‎

Lines changed: 0 additions & 37 deletions
This file was deleted.

‎src/InfiniLore.InfiniBlazor.Contracts/TextEditor/ITextModifier.cs‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ namespace InfiniLore.InfiniBlazor;
66
// Code
77
// ---------------------------------------------------------------------------------------------------------------------
88
public interface ITextModifier {
9-
string IconName { get; }
109
string ModifierName { get; }
1110
bool IsSingleLineStructure { get; }
1211

‎src/InfiniLore.InfiniBlazor.Core.Markdown.Components/InfiniLore.InfiniBlazor.Core.Markdown.Components.csproj.DotSettings‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
<wpf:ResourceDictionary xml:space="preserve" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:ss="urn:shemas-jetbrains-com:settings-storage-xaml" xmlns:wpf="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
2+
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=infinimarkdowneditor/@EntryIndexedValue">True</s:Boolean>
23
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=infinimarkdowneditornew/@EntryIndexedValue">True</s:Boolean>
3-
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=infinimarkdowneditornew_005Cvariants/@EntryIndexedValue">True</s:Boolean></wpf:ResourceDictionary>
4+
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=infinimarkdowneditornew_005Ceditortoolbars/@EntryIndexedValue">True</s:Boolean>
5+
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=infinimarkdowneditornew_005Cvariants/@EntryIndexedValue">True</s:Boolean>
6+
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=infinimarkdowneditor_005Ceditortoolbars/@EntryIndexedValue">True</s:Boolean>
7+
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=infinimarkdowneditor_005Cvariants/@EntryIndexedValue">True</s:Boolean></wpf:ResourceDictionary>

src/InfiniLore.InfiniBlazor.Core.Markdown.Components/InfiniMarkdownEditor/InfiniMarkdownEditorDebugOperations.cs renamed to src/InfiniLore.InfiniBlazor.Core.Markdown.Components/InfiniMarkdownEditor/EditorToolbars/DebugInsertable.cs

Lines changed: 61 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,58 @@ namespace InfiniLore.InfiniBlazor.Markdown;
55
// ---------------------------------------------------------------------------------------------------------------------
66
// Code
77
// ---------------------------------------------------------------------------------------------------------------------
8-
public static class InfiniMarkdownEditorDebugInserts {
8+
public static class DefaultInsertableTexts {
9+
public const string TableInsertable = """
10+
11+
| Column 1 | Column 2 | Column 3 |
12+
| -------- | -------- | -------- |
13+
| | | |
14+
""";
15+
16+
public const string BlockQuoteInsertable = """
17+
18+
>
19+
>
20+
>
21+
""";
22+
23+
public const string CalloutInsertable = """
24+
25+
>[!note]
26+
>
27+
>
28+
""";
29+
30+
public const string ListInsertable = """
31+
32+
-
33+
-
34+
-
35+
""";
36+
37+
public const string ListOrderedInsertable = """
38+
39+
1.
40+
2.
41+
3.
42+
""";
43+
44+
public const string ListTaskInsertable = """
45+
46+
- [ ]
47+
- [ ]
48+
- [ ]
49+
""";
50+
51+
public const string CodeBlockInsertable = """
52+
53+
```
54+
55+
```
56+
""";
57+
958
public const string LoremText = """
59+
1060
Lorem ipsum dolor
1161
sit amet, consectetur
1262
adipiscing elit. Sed
@@ -32,14 +82,9 @@ sunt in culpa qui officia
3282
deserunt mollit anim id
3383
est laborum.
3484
""";
35-
36-
public const string TableText = """
37-
| test | something |
38-
| ----- | --------- |
39-
| alpha | beta |
40-
""";
41-
85+
4286
public const string MarkdownText = """
87+
4388
# Heading 1
4489
## Heading 2
4590
### Heading 3
@@ -113,29 +158,29 @@ A paragraph with a ^^superscript^^ word in it.
113158
A paragraph with a #tag word in it.
114159
115160
---
116-
117161
""" + MarkdownCallout;
118162

119163
public const string MarkdownCallout = """
120-
> [!note] Title
164+
165+
>[!note] Title
121166
> Body
122167
123-
> [!warning] Title
168+
>[!warning] Title
124169
> Body
125170
126-
> [!tip] Title
171+
>[!tip] Title
127172
> Body
128173
129-
> [!danger] Title
174+
>[!danger] Title
130175
> Body
131176
132-
> [!info] Title
177+
>[!info] Title
133178
> Body
134179
135-
> [!success] Title
180+
>[!success] Title
136181
> Body
137182
138-
> [!unknown|icon=signature] Title
183+
>[!unknown|icon=signature] Title
139184
> Body
140185
""";
141186
}

‎src/InfiniLore.InfiniBlazor.Core.Markdown.Components/InfiniMarkdownEditor/EditorToolbars/InfiniMdEditorToolbarDefault.razor‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
@* ------------------------------------------------------------------------------------------------------------------ *@
2+
@* Imports
3+
@* ------------------------------------------------------------------------------------------------------------------ *@
4+
@using InfiniLore.InfiniBlazor.Markdown.Editors.TextModifiers
5+
@using InfiniLore.Lucide
6+
@using Microsoft.Extensions.Logging
7+
8+
@namespace InfiniLore.InfiniBlazor.Markdown
9+
@* ------------------------------------------------------------------------------------------------------------------ *@
10+
@* Descriptors
11+
@* ------------------------------------------------------------------------------------------------------------------ *@
12+
@inject ILogger<InfiniMdEditorToolbarDefault> Logger
13+
@inherits InfiniComponentBase
14+
@* ------------------------------------------------------------------------------------------------------------------ *@
15+
@* Html
16+
@* ------------------------------------------------------------------------------------------------------------------ *@
17+
<InfiniMdEditorToolButtonModifier IconName="@LucideNames.Bold" ModifierName="@BoldModifier.Name" Tooltip="Bold" />
18+
<InfiniMdEditorToolButtonModifier IconName="@LucideNames.Italic" ModifierName="@ItalicModifier.Name" Tooltip="Italic" />
19+
<InfiniMdEditorToolButtonModifier IconName="@LucideNames.Underline" ModifierName="@UnderlineModifier.Name" Tooltip="Underline" />
20+
<InfiniMdEditorToolButtonModifier IconName="@LucideNames.Strikethrough" ModifierName="@StrikeModifier.Name" Tooltip="Strikethrough" />
21+
<InfiniMdEditorToolButtonModifier IconName="@LucideNames.Subscript" ModifierName="@SubscriptModifier.Name" Tooltip="Subscript" />
22+
<InfiniMdEditorToolButtonModifier IconName="@LucideNames.Superscript" ModifierName="@SuperscriptModifier.Name" Tooltip="Superscript" />
23+
<InfiniMdEditorToolButtonModifier IconName="@LucideNames.Highlighter" ModifierName="@HighlightModifier.Name" Tooltip="Highlight" />
24+
<InfiniMdEditorToolButtonModifier IconName="@LucideNames.Code" ModifierName="@CodeInlineModifier.Name" Tooltip="Inline code" />
25+
26+
<InfiniSpacerHorizontal Spacing="Size.M"/>
27+
28+
<InfiniMdEditorToolButtonInsert IconName="@LucideNames.Link" Insertable="[ ]( )" Tooltip="Link"/>
29+
<InfiniMdEditorToolButtonInsert IconName="@LucideNames.Table" Insertable="@DefaultInsertableTexts.TableInsertable" Tooltip="Table"/>
30+
<InfiniMdEditorToolButtonInsert IconName="@LucideNames.TextQuote" Insertable="@DefaultInsertableTexts.BlockQuoteInsertable" Tooltip="Blockquote"/>
31+
<InfiniMdEditorToolButtonInsert IconName="@LucideNames.Quote" Insertable="@DefaultInsertableTexts.CalloutInsertable" Tooltip="Callout"/>
32+
<InfiniMdEditorToolButtonInsert IconName="@LucideNames.List" Insertable="@DefaultInsertableTexts.ListInsertable" Tooltip="Unordered List"/>
33+
<InfiniMdEditorToolButtonInsert IconName="@LucideNames.ListOrdered" Insertable="@DefaultInsertableTexts.ListOrderedInsertable" Tooltip="Ordered List"/>
34+
<InfiniMdEditorToolButtonInsert IconName="@LucideNames.ListTodo" Insertable="@DefaultInsertableTexts.ListTaskInsertable" Tooltip="Task List"/>
35+
<InfiniMdEditorToolButtonInsert IconName="@LucideNames.Binary" Insertable="@DefaultInsertableTexts.CodeBlockInsertable" Tooltip="Code block"/>
36+
37+
@if (VisualDebugger.IsEnabled()) {
38+
<InfiniSpacerHorizontal Spacing="Size.M"/>
39+
<InfiniMdEditorToolButtonInsert IconName="@LucideNames.BookA" Insertable="@DefaultInsertableTexts.LoremText" Tooltip="Lorem Ipsum Text"/>
40+
<InfiniMdEditorToolButtonInsert IconName="@LucideNames.Album" Insertable="@DefaultInsertableTexts.MarkdownText" Tooltip="Lorem Ipsum Text"/>
41+
<InfiniMdEditorToolButtonInsert IconName="@LucideNames.Captions" Insertable="@DefaultInsertableTexts.MarkdownCallout" Tooltip="Lorem Ipsum Text"/>
42+
<InfiniSpacer/>
43+
<InfiniButtonTransparent Color="Color.Red" IconName="@LucideNames.Plus" OnClick="@OnToggleLockedClickAsync"/>
44+
<InfiniButtonTransparent Color="Color.Red" IconName="@LucideNames.Minus" OnClick="@OnToggleInteractiveModeClickAsync"/>
45+
<InfiniButtonTransparent Color="Color.Red" IconName="@LucideNames.Eye" OnClick="@OnToggleShowPreviewClickAsync"/>
46+
<InfiniButtonTransparent Color="Color.Red" IconName="@LucideNames.EyeClosed" OnClick="@OnToggleShowInputClickAsync"/>
47+
}
48+
@* ------------------------------------------------------------------------------------------------------------------ *@
49+
@* Code
50+
@* ------------------------------------------------------------------------------------------------------------------ *@
51+
@code {
52+
[CascadingParameter] protected MdEditorContext EditorContext { get; set; } = null!;
53+
54+
private async Task OnToggleInteractiveModeClickAsync(MouseEventArgs obj) {
55+
EditorContext.IsInteractive = !EditorContext.IsInteractive;
56+
57+
Logger.Warning("state IsInteractive : {i}", EditorContext.IsInteractive);
58+
await InvokeAsync(StateHasChanged);
59+
}
60+
61+
private async Task OnToggleLockedClickAsync(MouseEventArgs obj) {
62+
EditorContext.IsLocked = !EditorContext.IsLocked;
63+
64+
Logger.Warning("state IsLocked : {i}", EditorContext.IsLocked);
65+
await InvokeAsync(StateHasChanged);
66+
}
67+
68+
private async Task OnToggleShowPreviewClickAsync(MouseEventArgs obj) {
69+
EditorContext.ShowPreview = !EditorContext.ShowPreview;
70+
71+
Logger.Warning("state ShowPreview : {i}", EditorContext.ShowPreview);
72+
await InvokeAsync(StateHasChanged);
73+
}
74+
75+
private async Task OnToggleShowInputClickAsync(MouseEventArgs obj) {
76+
EditorContext.ShowInput = !EditorContext.ShowInput;
77+
78+
Logger.Warning("state ShowInput : {i}", EditorContext.ShowInput);
79+
await InvokeAsync(StateHasChanged);
80+
}
81+
}

src/InfiniLore.InfiniBlazor.Core.Markdown.Components/InfiniMarkdownEditorNew/EditorTools/InfiniMdEditorToolBase.razor renamed to src/InfiniLore.InfiniBlazor.Core.Markdown.Components/InfiniMarkdownEditor/EditorTools/InfiniMdEditorToolBase.razor

File renamed without changes.

src/InfiniLore.InfiniBlazor.Core.Markdown.Components/InfiniMarkdownEditor/InfiniEditorInsertButton.razor renamed to src/InfiniLore.InfiniBlazor.Core.Markdown.Components/InfiniMarkdownEditor/EditorTools/InfiniMdEditorToolButton.razor

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,32 @@
55
@* ------------------------------------------------------------------------------------------------------------------ *@
66
@* Descriptors
77
@* ------------------------------------------------------------------------------------------------------------------ *@
8-
@inherits ComponentBase
8+
9+
@* ------------------------------------------------------------------------------------------------------------------ *@
10+
@* Descriptors
11+
@* ------------------------------------------------------------------------------------------------------------------ *@
12+
@inherits InfiniComponentBase
913
@* ------------------------------------------------------------------------------------------------------------------ *@
1014
@* Html
1115
@* ------------------------------------------------------------------------------------------------------------------ *@
12-
<InfiniButton
13-
OnClick="@(async () => await Editor.OnInsertClickAsync(Content))"
14-
IconName="@IconName"
15-
>
16-
@ChildContent
17-
</InfiniButton>
16+
<InfiniButtonTransparentToolTipped
17+
OnClick="@OnClick"
18+
IconName="@IconName">
19+
<Tooltip>
20+
@Tooltip
21+
</Tooltip>
22+
<Content>
23+
24+
</Content>
25+
</InfiniButtonTransparentToolTipped>
26+
1827
@* ------------------------------------------------------------------------------------------------------------------ *@
1928
@* Code
2029
@* ------------------------------------------------------------------------------------------------------------------ *@
21-
2230
@code {
23-
[CascadingParameter] public InfiniMarkdownEditor Editor { get; set; } = null!;
24-
[Parameter] [EditorRequired] public string Content { get; set; } = null!;
31+
[CascadingParameter] protected MdEditorContext EditorContext { get; set; } = null!;
2532
[Parameter] public string? IconName { get; set; }
26-
[Parameter] public RenderFragment? ChildContent { get; set; }
33+
[Parameter] public string? Tooltip { get; set; }
34+
[Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; }
35+
2736
}

0 commit comments

Comments
 (0)