diff --git a/webapp/src/lib/components/MarkdownRenderer.test.ts b/webapp/src/lib/components/MarkdownRenderer.test.ts index ea0a6bb..c692e56 100644 --- a/webapp/src/lib/components/MarkdownRenderer.test.ts +++ b/webapp/src/lib/components/MarkdownRenderer.test.ts @@ -5,20 +5,72 @@ import MarkdownRenderer from './MarkdownRenderer.svelte'; const TEST_FILES_DIR = 'test/markdown/'; -describe('Callout rendering', () => { - it('Renders callout correctly ', async () => { - const plaintext = await readMd('callout.md'); +// rendering links +describe('rendering [[internal]] links', async () => { + const plaintext = await readMd('links.md'); + it('Renders [[links]] correctly', async () => { render(MarkdownRenderer, { plaintext: plaintext }); + const linkEl = await screen.findByText(/^Normal internal link$/); + expect(linkEl).toBeInTheDocument(); + }); - // Expect title to be correct. + it('Renders [[links|with alias]] correctly', async () => { + render(MarkdownRenderer, { plaintext: plaintext }); + const linkEl = await screen.findByText(/^Link with alias$/); + expect(linkEl).toBeInTheDocument(); + }); + + it('Renders [[links#heading]] correctly', async () => { + render(MarkdownRenderer, { plaintext: plaintext }); + const linkEl = await screen.findByText(/^Page with headings > heading A$/); + expect(linkEl).toBeInTheDocument(); + }); + + it('Renders [[links#heading|with alias]] correctly', async () => { + render(MarkdownRenderer, { plaintext: plaintext }); + const linkEl = await screen.findByText(/^Link with heading alias$/); + expect(linkEl).toBeInTheDocument(); + }); + + it('Renders [[links#heading|with alias#fakeheading]] correctly', async () => { + render(MarkdownRenderer, { plaintext: plaintext }); + const linkEl = await screen.findByText(/^Link with heading alias#false heading$/); + expect(linkEl).toBeInTheDocument(); + }); + + it('Does not render [[]] empty links', async () => { + render(MarkdownRenderer, { plaintext: plaintext }); + const textEl = await screen.findByText('[[]]', { exact: false }); + expect(textEl).toBeInTheDocument(); + }); +}); + +describe('rendering [md style](links)', async () => { + const plaintext = await readMd('links.md'); + + it('Renders URL-encoded internal links correctly', async () => { + render(MarkdownRenderer, { plaintext: plaintext }); + const linkEl = await screen.findByText(/^Classic internal link (URL encoded)$/); + expect(linkEl).toBeInTheDocument(); + }); +}); + +describe('Rendering callouts', async () => { + const plaintext = await readMd('callout.md'); + + it('Renders callout title correctly ', async () => { + render(MarkdownRenderer, { plaintext: plaintext }); const titleEl = await screen.findByText('Don!t forget to account for non-letters! //fsd \\n'); expect(titleEl).toBeInTheDocument(); expect(titleEl).toHaveClass('callout-title'); + }); - // Expect content to be correct. - expect(await screen.findByText('Sample text.')).toBeInTheDocument(); - expect((await screen.findByText('Sample text.')).parentNode).toHaveClass('callout-content'); + it('Renders callout content correctly ', async () => { + render(MarkdownRenderer, { plaintext: plaintext }); + const contentEl = await screen.findByText('Sample text.'); + expect(contentEl).toBeInTheDocument(); + expect(contentEl.parentElement).toHaveClass('callout-content'); }); }); diff --git a/webapp/src/lib/marked/renderers/InternalLink.svelte b/webapp/src/lib/marked/renderers/InternalLink.svelte index 6d5d096..e4b2698 100644 --- a/webapp/src/lib/marked/renderers/InternalLink.svelte +++ b/webapp/src/lib/marked/renderers/InternalLink.svelte @@ -2,11 +2,24 @@ import FaRegQuestionCircle from 'svelte-icons/fa/FaRegQuestionCircle.svelte'; export let text: string; + export let displayText: string; + + if (!displayText) { + const aliasMatch = text.match(/^(?:.+)\|(.*)$/); + const headerMatch = text.match(/^(.[^|]+)\#(.[^|]*)$/); + if (aliasMatch) { + displayText = aliasMatch[1]; + } else if (headerMatch) { + displayText = `${headerMatch[1]} > ${headerMatch[2]}`; + } else { + displayText = text; + } + } - {text} + {displayText} diff --git a/webapp/src/lib/marked/renderers/Link.svelte b/webapp/src/lib/marked/renderers/Link.svelte index 4b2b5d5..1fd23bc 100644 --- a/webapp/src/lib/marked/renderers/Link.svelte +++ b/webapp/src/lib/marked/renderers/Link.svelte @@ -1,8 +1,6 @@ diff --git a/webapp/src/routes/about.svelte b/webapp/src/routes/about.svelte index 6ce6802..c83fbd7 100644 --- a/webapp/src/routes/about.svelte +++ b/webapp/src/routes/about.svelte @@ -4,7 +4,6 @@

About

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco diff --git a/webapp/test/markdown/links.md b/webapp/test/markdown/links.md new file mode 100644 index 0000000..11e9dd3 --- /dev/null +++ b/webapp/test/markdown/links.md @@ -0,0 +1,20 @@ +# All link types. + +## Internal links with [[brackets]] + +- [[Normal internal link]] +- [[Aliased internal link|Link with alias]] +- [[Page with headings#heading A]] (link to heading) +- [[Page with headings#heading A|Link with heading alias]] (link to heading with alias) +- [[Home (fake)#Home|Link with heading alias#false heading]] (link to heading with alias with heading) +- [[]] empty link + +## Internal links (classic style) + +- [Classic internal link (URL encoded)](internal%20page) +- [Classic internal link (tag format)]() + +## External links + +- [Wikipedia](http://www.wikipedia.org) (link to the internet) +- [Wikipedia](https://www.wikipedia.org) (link to the secure internet)