Merge pull request #21722 from bdach/markdown-footnote-support

Add Markdown footnote support to wiki overlay
This commit is contained in:
Dean Herbert 2022-12-20 14:21:03 +09:00 committed by GitHub
commit 66364afe04
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 329 additions and 7 deletions

View File

@ -16,13 +16,16 @@ using osu.Framework.Graphics.Sprites;
using osu.Framework.Testing;
using osu.Framework.Utils;
using osu.Game.Graphics.Containers.Markdown;
using osu.Game.Graphics.Containers.Markdown.Footnotes;
using osu.Game.Overlays;
using osu.Game.Overlays.Wiki.Markdown;
using osuTK.Input;
namespace osu.Game.Tests.Visual.Online
{
public partial class TestSceneWikiMarkdownContainer : OsuTestScene
public partial class TestSceneWikiMarkdownContainer : OsuManualInputManagerTestScene
{
private OverlayScrollContainer scrollContainer;
private TestMarkdownContainer markdownContainer;
[Cached]
@ -38,15 +41,25 @@ namespace osu.Game.Tests.Visual.Online
Colour = overlayColour.Background5,
RelativeSizeAxes = Axes.Both,
},
new BasicScrollContainer
scrollContainer = new OverlayScrollContainer
{
RelativeSizeAxes = Axes.Both,
Padding = new MarginPadding(20),
Child = markdownContainer = new TestMarkdownContainer
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
}
}
};
scrollContainer.Child = new DependencyProvidingContainer
{
CachedDependencies = new (Type, object)[]
{
(typeof(OverlayScrollContainer), scrollContainer)
},
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Child = markdownContainer = new TestMarkdownContainer
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
}
};
});
@ -199,6 +212,52 @@ Line after image";
});
}
[Test]
public void TestFootnotes()
{
AddStep("set content", () => markdownContainer.Text = @"This text has a footnote[^test].
Here's some more text[^test2] with another footnote!
# Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur laoreet posuere. Ut accumsan tortor in ipsum tincidunt ultrices. Suspendisse a malesuada tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce a sagittis nibh. In et velit sit amet mauris aliquet consectetur quis vehicula lorem. Etiam sit amet tellus ac velit ornare maximus. Donec quis metus eget libero ullamcorper imperdiet id vitae arcu. Vivamus iaculis rhoncus purus malesuada mollis. Vestibulum dictum at nisi sed tincidunt. Suspendisse finibus, ipsum ut dapibus commodo, leo eros porttitor sapien, non scelerisque nisi ligula sed ex. Pellentesque magna orci, hendrerit eu iaculis sit amet, ullamcorper in urna. Vivamus dictum mauris orci, nec facilisis dolor fringilla eu. Sed at porttitor nisi, at venenatis urna. Ut at orci vitae libero semper ullamcorper eu ut risus. Mauris hendrerit varius enim, ut varius nisi feugiat mattis.
## In at eros urna. Sed ipsum lorem, tempor sit amet purus in, vehicula pellentesque leo. Fusce volutpat pellentesque velit sit amet porttitor. Nulla eget erat ex. Praesent eu lacinia est, quis vehicula lacus. Donec consequat ultrices neque, at finibus quam efficitur vel. Vestibulum molestie nisl sit amet metus semper, at vestibulum massa rhoncus. Quisque imperdiet suscipit augue, et dignissim odio eleifend ut.
Aliquam sed vestibulum mauris, ut lobortis elit. Sed quis lacinia erat. Nam ultricies, risus non pellentesque sollicitudin, mauris dolor tincidunt neque, ac porta ipsum dui quis libero. Integer eget velit neque. Vestibulum venenatis mauris vitae rutrum vestibulum. Maecenas suscipit eu purus eu tempus. Nam dui nisl, bibendum condimentum mollis et, gravida vel dui. Sed et eros rutrum, facilisis sapien eu, mattis ligula. Fusce finibus pulvinar dolor quis consequat.
Donec ipsum felis, feugiat vel fermentum at, commodo eu sapien. Suspendisse nec enim vitae felis laoreet laoreet. Phasellus purus quam, fermentum a pharetra vel, tempor et urna. Integer vitae quam diam. Aliquam tincidunt tortor a iaculis convallis. Suspendisse potenti. Cras quis risus quam. Nullam tincidunt in lorem posuere sagittis.
Phasellus eu nunc nec ligula semper fringilla. Aliquam magna neque, placerat sed urna tristique, laoreet pharetra nulla. Vivamus maximus turpis purus, eu viverra dolor sodales porttitor. Praesent bibendum sapien purus, sed ultricies dolor iaculis sed. Fusce congue hendrerit malesuada. Nulla nulla est, auctor ac fringilla sed, ornare a lorem. Donec quis velit imperdiet, imperdiet sem non, pellentesque sapien. Maecenas in orci id ipsum placerat facilisis non sed nisi. Duis dictum lorem sodales odio dictum eleifend. Vestibulum bibendum euismod quam, eget pharetra orci facilisis sed. Vivamus at diam non ipsum consequat tristique. Pellentesque gravida dignissim pellentesque. Donec ullamcorper lacinia orci, id consequat purus faucibus quis. Phasellus metus nunc, iaculis a interdum vel, congue sed erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eros libero, hendrerit luctus nulla vitae, luctus maximus nunc.
[^test]: This is a **footnote**.
[^test2]: This is another footnote [with a link](https://google.com/)!");
AddStep("shrink scroll height", () => scrollContainer.Height = 0.5f);
AddStep("press second footnote link", () =>
{
InputManager.MoveMouseTo(markdownContainer.ChildrenOfType<OsuMarkdownFootnoteLink>().ElementAt(1));
InputManager.Click(MouseButton.Left);
});
AddUntilStep("second footnote scrolled into view", () =>
{
var footnote = markdownContainer.ChildrenOfType<OsuMarkdownFootnote>().ElementAt(1);
return scrollContainer.ScreenSpaceDrawQuad.Contains(footnote.ScreenSpaceDrawQuad.TopLeft)
&& scrollContainer.ScreenSpaceDrawQuad.Contains(footnote.ScreenSpaceDrawQuad.BottomRight);
});
AddStep("press first footnote backlink", () =>
{
InputManager.MoveMouseTo(markdownContainer.ChildrenOfType<OsuMarkdownFootnoteBacklink>().First());
InputManager.Click(MouseButton.Left);
});
AddUntilStep("first footnote link scrolled into view", () =>
{
var footnote = markdownContainer.ChildrenOfType<OsuMarkdownFootnoteLink>().First();
return scrollContainer.ScreenSpaceDrawQuad.Contains(footnote.ScreenSpaceDrawQuad.TopLeft)
&& scrollContainer.ScreenSpaceDrawQuad.Contains(footnote.ScreenSpaceDrawQuad.BottomRight);
});
}
private partial class TestMarkdownContainer : WikiMarkdownContainer
{
public LinkInline Link;

View File

@ -0,0 +1,30 @@
// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
// See the LICENCE file in the repository root for full licence text.
using Markdig.Extensions.Footnotes;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers.Markdown;
using osu.Framework.Graphics.Containers.Markdown.Footnotes;
using osu.Framework.Graphics.Sprites;
using osu.Framework.Localisation;
namespace osu.Game.Graphics.Containers.Markdown.Footnotes
{
public partial class OsuMarkdownFootnote : MarkdownFootnote
{
public OsuMarkdownFootnote(Footnote footnote)
: base(footnote)
{
}
public override SpriteText CreateOrderMarker(int order) => CreateSpriteText().With(marker =>
{
marker.Text = LocalisableString.Format("{0}.", order);
});
public override MarkdownTextFlowContainer CreateTextFlow() => base.CreateTextFlow().With(textFlow =>
{
textFlow.Margin = new MarginPadding { Left = 30 };
});
}
}

View File

@ -0,0 +1,62 @@
// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
// See the LICENCE file in the repository root for full licence text.
using System.Collections.Generic;
using System.Linq;
using Markdig.Extensions.Footnotes;
using osu.Framework.Allocation;
using osu.Framework.Extensions.IEnumerableExtensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers.Markdown;
using osu.Framework.Graphics.Sprites;
using osu.Framework.Testing;
using osu.Game.Overlays;
using osuTK;
namespace osu.Game.Graphics.Containers.Markdown.Footnotes
{
public partial class OsuMarkdownFootnoteBacklink : OsuHoverContainer
{
private readonly FootnoteLink backlink;
private SpriteIcon spriteIcon = null!;
[Resolved]
private IMarkdownTextComponent parentTextComponent { get; set; } = null!;
protected override IEnumerable<Drawable> EffectTargets => spriteIcon.Yield();
public OsuMarkdownFootnoteBacklink(FootnoteLink backlink)
{
this.backlink = backlink;
}
[BackgroundDependencyLoader(true)]
private void load(OverlayColourProvider colourProvider, OsuMarkdownContainer markdownContainer, OverlayScrollContainer? scrollContainer)
{
float fontSize = parentTextComponent.CreateSpriteText().Font.Size;
Size = new Vector2(fontSize);
IdleColour = colourProvider.Light2;
HoverColour = colourProvider.Light1;
Add(spriteIcon = new SpriteIcon
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Margin = new MarginPadding { Left = 5 },
Size = new Vector2(fontSize / 2),
Icon = FontAwesome.Solid.ArrowUp,
});
if (scrollContainer != null)
{
Action = () =>
{
var footnoteLink = markdownContainer.ChildrenOfType<OsuMarkdownFootnoteLink>().Single(footnoteLink => footnoteLink.FootnoteLink.Index == backlink.Index);
scrollContainer.ScrollIntoView(footnoteLink);
};
}
}
}
}

View File

@ -0,0 +1,80 @@
// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
// See the LICENCE file in the repository root for full licence text.
using System.Collections.Generic;
using System.Linq;
using Markdig.Extensions.Footnotes;
using osu.Framework.Allocation;
using osu.Framework.Extensions.IEnumerableExtensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers.Markdown;
using osu.Framework.Graphics.Cursor;
using osu.Framework.Graphics.Sprites;
using osu.Framework.Localisation;
using osu.Framework.Testing;
using osu.Game.Overlays;
namespace osu.Game.Graphics.Containers.Markdown.Footnotes
{
public partial class OsuMarkdownFootnoteLink : OsuHoverContainer, IHasCustomTooltip
{
public readonly FootnoteLink FootnoteLink;
private SpriteText spriteText = null!;
[Resolved]
private IMarkdownTextComponent parentTextComponent { get; set; } = null!;
[Resolved]
private OverlayColourProvider colourProvider { get; set; } = null!;
[Resolved]
private OsuMarkdownContainer markdownContainer { get; set; } = null!;
protected override IEnumerable<Drawable> EffectTargets => spriteText.Yield();
public OsuMarkdownFootnoteLink(FootnoteLink footnoteLink)
{
FootnoteLink = footnoteLink;
AutoSizeAxes = Axes.Both;
}
[BackgroundDependencyLoader(true)]
private void load(OsuMarkdownContainer markdownContainer, OverlayScrollContainer? scrollContainer)
{
IdleColour = colourProvider.Light2;
HoverColour = colourProvider.Light1;
spriteText = parentTextComponent.CreateSpriteText();
Add(spriteText.With(t =>
{
float baseSize = t.Font.Size;
t.Font = t.Font.With(size: baseSize * 0.58f);
t.Margin = new MarginPadding { Bottom = 0.33f * baseSize };
t.Text = LocalisableString.Format("[{0}]", FootnoteLink.Index);
}));
if (scrollContainer != null)
{
Action = () =>
{
var footnote = markdownContainer.ChildrenOfType<OsuMarkdownFootnote>().Single(footnote => footnote.Footnote.Label == FootnoteLink.Footnote.Label);
scrollContainer.ScrollIntoView(footnote);
};
}
}
public object TooltipContent
{
get
{
var span = FootnoteLink.Footnote.LastChild.Span;
return markdownContainer.Text.Substring(span.Start, span.Length);
}
}
public ITooltip GetCustomTooltip() => new OsuMarkdownFootnoteTooltip(colourProvider);
}
}

View File

@ -0,0 +1,76 @@
// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
// See the LICENCE file in the repository root for full licence text.
using Markdig.Extensions.Footnotes;
using osu.Framework.Allocation;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Containers.Markdown;
using osu.Framework.Graphics.Cursor;
using osu.Framework.Graphics.Shapes;
using osu.Game.Overlays;
using osuTK;
namespace osu.Game.Graphics.Containers.Markdown.Footnotes
{
public partial class OsuMarkdownFootnoteTooltip : CompositeDrawable, ITooltip
{
private readonly FootnoteMarkdownContainer markdownContainer;
[Cached]
private OverlayColourProvider colourProvider;
public OsuMarkdownFootnoteTooltip(OverlayColourProvider colourProvider)
{
this.colourProvider = colourProvider;
Masking = true;
Width = 200;
AutoSizeAxes = Axes.Y;
CornerRadius = 4;
InternalChildren = new Drawable[]
{
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = colourProvider.Background6
},
markdownContainer = new FootnoteMarkdownContainer
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
DocumentMargin = new MarginPadding(),
DocumentPadding = new MarginPadding { Horizontal = 10, Vertical = 5 }
}
};
}
public void Move(Vector2 pos) => Position = pos;
public void SetContent(object content) => markdownContainer.SetContent((string)content);
private partial class FootnoteMarkdownContainer : OsuMarkdownContainer
{
private string? lastFootnote;
public void SetContent(string footnote)
{
if (footnote == lastFootnote)
return;
lastFootnote = Text = footnote;
}
public override MarkdownTextFlowContainer CreateTextFlow() => new FootnoteMarkdownTextFlowContainer();
}
private partial class FootnoteMarkdownTextFlowContainer : OsuMarkdownTextFlowContainer
{
protected override void AddFootnoteBacklink(FootnoteLink footnoteBacklink)
{
// we don't want footnote backlinks to show up in tooltips.
}
}
}
}

View File

@ -11,14 +11,19 @@ using Markdig.Extensions.Footnotes;
using Markdig.Extensions.Tables;
using Markdig.Extensions.Yaml;
using Markdig.Syntax;
using osu.Framework.Allocation;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Containers.Markdown;
using osu.Framework.Graphics.Containers.Markdown.Footnotes;
using osu.Framework.Graphics.Sprites;
using osu.Game.Graphics.Containers.Markdown.Footnotes;
using osu.Game.Graphics.Sprites;
using osuTK;
namespace osu.Game.Graphics.Containers.Markdown
{
[Cached]
public partial class OsuMarkdownContainer : MarkdownContainer
{
/// <summary>
@ -99,6 +104,10 @@ namespace osu.Game.Graphics.Containers.Markdown
return new OsuMarkdownUnorderedListItem(level);
}
protected override MarkdownFootnoteGroup CreateFootnoteGroup(FootnoteGroup footnoteGroup) => base.CreateFootnoteGroup(footnoteGroup).With(g => g.Spacing = new Vector2(5));
protected override MarkdownFootnote CreateFootnote(Footnote footnote) => new OsuMarkdownFootnote(footnote);
// reference: https://github.com/ppy/osu-web/blob/05488a96b25b5a09f2d97c54c06dd2bae59d1dc8/app/Libraries/Markdown/OsuMarkdown.php#L301
protected override MarkdownPipeline CreateBuilder()
{

View File

@ -6,6 +6,7 @@
using System;
using System.Linq;
using Markdig.Extensions.CustomContainers;
using Markdig.Extensions.Footnotes;
using Markdig.Syntax.Inlines;
using osu.Framework.Allocation;
using osu.Framework.Graphics;
@ -13,6 +14,7 @@ using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Containers.Markdown;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.Sprites;
using osu.Game.Graphics.Containers.Markdown.Footnotes;
using osu.Game.Overlays;
using osu.Game.Users;
using osu.Game.Users.Drawables;
@ -36,6 +38,10 @@ namespace osu.Game.Graphics.Containers.Markdown
Text = codeInline.Content
});
protected override void AddFootnoteLink(FootnoteLink footnoteLink) => AddDrawable(new OsuMarkdownFootnoteLink(footnoteLink));
protected override void AddFootnoteBacklink(FootnoteLink footnoteBacklink) => AddDrawable(new OsuMarkdownFootnoteBacklink(footnoteBacklink));
protected override SpriteText CreateEmphasisedSpriteText(bool bold, bool italic)
=> CreateSpriteText().With(t => t.Font = t.Font.With(weight: bold ? FontWeight.Bold : FontWeight.Regular, italics: italic));