notfire/Iceshrimp.NET
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[frontend/mfm] Add support for simple custom emojis

Browse source
This commit is contained in:
pancakes 2024-11-05 13:58:55 +10:00
parent 6293c138a4
commit 53c3fc9edc
No known key found for this signature in database
GPG key ID: ED53D426432B861B
3 changed files with 31 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
Iceshrimp.Frontend/Components/MfmText.razor
View file

@ -5,13 +5,14 @@
@code { @code {
[Parameter] [EditorRequired] public required string? Text { get; set; } [Parameter] [EditorRequired] public required string? Text { get; set; }
[Parameter] public List<EmojiResponse> Emoji { get; set; } = []; [Parameter] public List<EmojiResponse> Emoji { get; set; } = [];
[Parameter] public bool Simple { get; set; } = false;
private MarkupString TextBody { get; set; } private MarkupString TextBody { get; set; }
protected override async Task OnInitializedAsync() protected override async Task OnInitializedAsync()
{ {
if (Text != null) if (Text != null)
{ {
TextBody = await MfmRenderer.RenderString(Text, Emoji); TextBody = await MfmRenderer.RenderString(Text, Emoji, Simple);
} }
} }
@ -19,7 +20,7 @@
{ {
if (Text != null) if (Text != null)
{ {
TextBody = await MfmRenderer.RenderString(Text, Emoji); TextBody = await MfmRenderer.RenderString(Text, Emoji, Simple);
} }
} }
} }

17
Iceshrimp.Frontend/Components/MfmText.razor.css
View file

@ -46,6 +46,23 @@
} }
} }
::deep {
.emoji.simple {
> img {
height: 1.25em;
vertical-align: -0.25em;
}
}
}
::deep {
.emoji.simple {
> img:hover {
transform: none;
}
}
}
::deep { ::deep {
.quote-node { .quote-node {
/*Copying the appearance of -js*/ /*Copying the appearance of -js*/

21
Iceshrimp.Frontend/Core/Miscellaneous/RenderMfm.cs
View file

@ -8,18 +8,18 @@ namespace Iceshrimp.Frontend.Core.Miscellaneous;
public static class MfmRenderer public static class MfmRenderer
{ {
public static async Task<MarkupString> RenderString(string text, List<EmojiResponse> emoji) public static async Task<MarkupString> RenderString(string text, List<EmojiResponse> emoji, bool simple = false)
{ {
var res = Mfm.parse(text); var res = simple ? Mfm.parseSimple(text) : Mfm.parse(text);
var context = BrowsingContext.New(); var context = BrowsingContext.New();
var document = await context.OpenNewAsync(); var document = await context.OpenNewAsync();
var renderedMfm = RenderMultipleNodes(res, document, emoji); var renderedMfm = RenderMultipleNodes(res, document, emoji, simple);
var html = renderedMfm.ToHtml(); var html = renderedMfm.ToHtml();
return new MarkupString(html); return new MarkupString(html);
} }
private static INode RenderMultipleNodes( private static INode RenderMultipleNodes(
IEnumerable<MfmNodeTypes.MfmNode> nodes, IDocument document, List<EmojiResponse> emoji IEnumerable<MfmNodeTypes.MfmNode> nodes, IDocument document, List<EmojiResponse> emoji, bool simple
) )
{ {
var el = document.CreateElement("span"); var el = document.CreateElement("span");
@ -29,7 +29,7 @@ public static class MfmRenderer
{ {
try try
{ {
el.AppendNodes(RenderNode(node, document, emoji)); el.AppendNodes(RenderNode(node, document, emoji, simple));
} }
catch (NotImplementedException e) catch (NotImplementedException e)
{ {
@ -42,7 +42,7 @@ public static class MfmRenderer
return el; return el;
} }
private static INode RenderNode(MfmNodeTypes.MfmNode node, IDocument document, List<EmojiResponse> emoji) private static INode RenderNode(MfmNodeTypes.MfmNode node, IDocument document, List<EmojiResponse> emoji, bool simple)
{ {
// Hard wrap makes this impossible to read // Hard wrap makes this impossible to read
// @formatter:off // @formatter:off
@ -55,7 +55,7 @@ public static class MfmRenderer
MfmNodeTypes.MfmSearchNode mfmSearchNode => throw new NotImplementedException($"{mfmSearchNode.GetType()}"), MfmNodeTypes.MfmSearchNode mfmSearchNode => throw new NotImplementedException($"{mfmSearchNode.GetType()}"),
MfmNodeTypes.MfmBlockNode mfmBlockNode => throw new NotImplementedException($"{mfmBlockNode.GetType()}"), MfmNodeTypes.MfmBlockNode mfmBlockNode => throw new NotImplementedException($"{mfmBlockNode.GetType()}"),
MfmNodeTypes.MfmBoldNode mfmBoldNode => MfmBoldNode(mfmBoldNode, document), MfmNodeTypes.MfmBoldNode mfmBoldNode => MfmBoldNode(mfmBoldNode, document),
MfmNodeTypes.MfmEmojiCodeNode mfmEmojiCodeNode => MfmEmojiCodeNode(mfmEmojiCodeNode, document, emoji), MfmNodeTypes.MfmEmojiCodeNode mfmEmojiCodeNode => MfmEmojiCodeNode(mfmEmojiCodeNode, document, emoji, simple),
MfmNodeTypes.MfmFnNode mfmFnNode => throw new NotImplementedException($"{mfmFnNode.GetType()}"), MfmNodeTypes.MfmFnNode mfmFnNode => throw new NotImplementedException($"{mfmFnNode.GetType()}"),
MfmNodeTypes.MfmHashtagNode mfmHashtagNode => MfmHashtagNode(mfmHashtagNode, document), MfmNodeTypes.MfmHashtagNode mfmHashtagNode => MfmHashtagNode(mfmHashtagNode, document),
MfmNodeTypes.MfmInlineCodeNode mfmInlineCodeNode => MfmInlineCodeNode(mfmInlineCodeNode, document), MfmNodeTypes.MfmInlineCodeNode mfmInlineCodeNode => MfmInlineCodeNode(mfmInlineCodeNode, document),
@ -79,7 +79,7 @@ public static class MfmRenderer
{ {
try try
{ {
rendered.AppendNodes(RenderNode(childNode, document, emoji)); rendered.AppendNodes(RenderNode(childNode, document, emoji, simple));
} }
catch (NotImplementedException e) catch (NotImplementedException e)
{ {
@ -157,11 +157,11 @@ public static class MfmRenderer
} }
private static INode MfmEmojiCodeNode( private static INode MfmEmojiCodeNode(
MfmNodeTypes.MfmEmojiCodeNode node, IDocument document, List<EmojiResponse> emojiList MfmNodeTypes.MfmEmojiCodeNode node, IDocument document, List<EmojiResponse> emojiList, bool simple
) )
{ {
var el = document.CreateElement("span"); var el = document.CreateElement("span");
el.ClassName = "emoji"; el.ClassName = simple ? "emoji simple" : "emoji";
var emoji = emojiList.Find(p => p.Name == node.Name); var emoji = emojiList.Find(p => p.Name == node.Name);
if (emoji is null) if (emoji is null)
@ -173,6 +173,7 @@ public static class MfmRenderer
var image = document.CreateElement("img"); var image = document.CreateElement("img");
image.SetAttribute("src", emoji.PublicUrl); image.SetAttribute("src", emoji.PublicUrl);
image.SetAttribute("alt", node.Name); image.SetAttribute("alt", node.Name);
image.SetAttribute("title", $":{emoji.Name}:");
el.AppendChild(image); el.AppendChild(image);
} }