From da5300e9b85363577204b39644ae82b4e6c4b893 Mon Sep 17 00:00:00 2001 From: pancakes Date: Sun, 30 Jun 2024 00:35:37 +1000 Subject: [PATCH] [frontend/mfm] Add center, quote, hashtag, small and strike nodes --- .../Components/MfmText.razor.css | 21 +++++++++ .../Core/Miscellaneous/RenderMfm.cs | 47 ++++++++++++++++--- 2 files changed, 62 insertions(+), 6 deletions(-) diff --git a/Iceshrimp.Frontend/Components/MfmText.razor.css b/Iceshrimp.Frontend/Components/MfmText.razor.css index 953340f1..79d088a8 100644 --- a/Iceshrimp.Frontend/Components/MfmText.razor.css +++ b/Iceshrimp.Frontend/Components/MfmText.razor.css @@ -39,4 +39,25 @@ transition-duration: 250ms; } } +} + +::deep { + .quote-node { + /*Copying the appearance of -js*/ + margin: 8px 0; + padding-left: 12px; + border-left: solid 4px var(--highlight-color); + } +} + +::deep { + .hashtag-node { + text-decoration-line: none; + } +} + +::deep { + .hashtag-node:hover { + text-decoration-line: underline; + } } \ No newline at end of file diff --git a/Iceshrimp.Frontend/Core/Miscellaneous/RenderMfm.cs b/Iceshrimp.Frontend/Core/Miscellaneous/RenderMfm.cs index 22e00db9..a8618933 100644 --- a/Iceshrimp.Frontend/Core/Miscellaneous/RenderMfm.cs +++ b/Iceshrimp.Frontend/Core/Miscellaneous/RenderMfm.cs @@ -46,18 +46,17 @@ public static class MfmRenderer { var rendered = node switch { - MfmNodeTypes.MfmCenterNode mfmCenterNode => throw new NotImplementedException($"{mfmCenterNode.GetType()}"), + MfmNodeTypes.MfmCenterNode mfmCenterNode => MfmCenterNode(mfmCenterNode, document), MfmNodeTypes.MfmCodeBlockNode mfmCodeBlockNode => MfmCodeBlockNode(mfmCodeBlockNode, document), MfmNodeTypes.MfmMathBlockNode mfmMathBlockNode => throw new NotImplementedException($"{mfmMathBlockNode.GetType()}"), - MfmNodeTypes.MfmQuoteNode mfmQuoteNode => throw new NotImplementedException($"{mfmQuoteNode.GetType()}"), + MfmNodeTypes.MfmQuoteNode mfmQuoteNode => MfmQuoteNode(mfmQuoteNode, document), MfmNodeTypes.MfmSearchNode mfmSearchNode => throw new NotImplementedException($"{mfmSearchNode.GetType()}"), MfmNodeTypes.MfmBlockNode mfmBlockNode => throw new NotImplementedException($"{mfmBlockNode.GetType()}"), MfmNodeTypes.MfmBoldNode mfmBoldNode => MfmBoldNode(mfmBoldNode, document), MfmNodeTypes.MfmEmojiCodeNode mfmEmojiCodeNode => MfmEmojiCodeNode(mfmEmojiCodeNode, document, emoji), MfmNodeTypes.MfmFnNode mfmFnNode => throw new NotImplementedException($"{mfmFnNode.GetType()}"), - MfmNodeTypes.MfmHashtagNode mfmHashtagNode => - throw new NotImplementedException($"{mfmHashtagNode.GetType()}"), + MfmNodeTypes.MfmHashtagNode mfmHashtagNode => MfmHashtagNode(mfmHashtagNode, document), MfmNodeTypes.MfmInlineCodeNode mfmInlineCodeNode => MfmInlineCodeNode(mfmInlineCodeNode, document), MfmNodeTypes.MfmItalicNode mfmItalicNode => MfmItalicNode(mfmItalicNode, document), MfmNodeTypes.MfmLinkNode mfmLinkNode => MfmLinkNode(mfmLinkNode, document), @@ -65,8 +64,8 @@ public static class MfmRenderer throw new NotImplementedException($"{mfmMathInlineNode.GetType()}"), MfmNodeTypes.MfmMentionNode mfmMentionNode => MfmMentionNode(mfmMentionNode, document), MfmNodeTypes.MfmPlainNode mfmPlainNode => throw new NotImplementedException($"{mfmPlainNode.GetType()}"), - MfmNodeTypes.MfmSmallNode mfmSmallNode => throw new NotImplementedException($"{mfmSmallNode.GetType()}"), - MfmNodeTypes.MfmStrikeNode mfmStrikeNode => throw new NotImplementedException($"{mfmStrikeNode.GetType()}"), + MfmNodeTypes.MfmSmallNode mfmSmallNode => MfmSmallNode(mfmSmallNode, document), + MfmNodeTypes.MfmStrikeNode mfmStrikeNode => MfmStrikeNode(mfmStrikeNode, document), MfmNodeTypes.MfmTextNode mfmTextNode => MfmTextNode(mfmTextNode, document), MfmNodeTypes.MfmUrlNode mfmUrlNode => MfmUrlNode(mfmUrlNode, document), MfmNodeTypes.MfmInlineNode mfmInlineNode => throw new NotImplementedException($"{mfmInlineNode.GetType()}"), @@ -91,6 +90,13 @@ public static class MfmRenderer return rendered; } + + private static INode MfmCenterNode(MfmNodeTypes.MfmCenterNode _, IDocument document) + { + var el = document.CreateElement("div"); + el.SetAttribute("style", "text-align: center"); + return el; + } private static INode MfmCodeBlockNode(MfmNodeTypes.MfmCodeBlockNode node, IDocument document) { @@ -100,6 +106,13 @@ public static class MfmRenderer el.AppendChild(childEl); return el; } + + private static INode MfmQuoteNode(MfmNodeTypes.MfmQuoteNode _, IDocument document) + { + var el = document.CreateElement("blockquote"); + el.ClassName = "quote-node"; + return el; + } private static INode MfmInlineCodeNode(MfmNodeTypes.MfmInlineCodeNode node, IDocument document) { @@ -107,6 +120,15 @@ public static class MfmRenderer el.TextContent = node.Code; return el; } + + private static INode MfmHashtagNode(MfmNodeTypes.MfmHashtagNode node, IDocument document) + { + var el = document.CreateElement("a"); + el.SetAttribute("href", $"/tags/{node.Hashtag}"); + el.ClassName = "hashtag-node"; + el.TextContent = "#" + node.Hashtag; + return el; + } private static INode MfmLinkNode(MfmNodeTypes.MfmLinkNode node, IDocument document) { @@ -160,6 +182,19 @@ public static class MfmRenderer var el = document.CreateElement("strong"); return el; } + + private static INode MfmSmallNode(MfmNodeTypes.MfmSmallNode _, IDocument document) + { + var el = document.CreateElement("small"); + el.SetAttribute("style", "opacity: 0.7;"); + return el; + } + + private static INode MfmStrikeNode(MfmNodeTypes.MfmStrikeNode _, IDocument document) + { + var el = document.CreateElement("del"); + return el; + } private static INode MfmTextNode(MfmNodeTypes.MfmTextNode node, IDocument document) {