more link view field stuff

Author: mProjectsCode

exampleVault/Input Fields/List.md

@@ -3,7 +3,7 @@ list:
   - apple
   - banana
   - berries
-  - "[[file]]"
+  - https://github.com/
 list2:
   - "[[Other/Example Notes/Example Note with Image.md|Example Note with Image]]"
   - "[[Other/Example Notes/Example Note with Callouts.md|Example Note with Callouts]]"
@@ -24,6 +24,8 @@ list5:
 INPUT[list(showcase):list]
 ```
 
+`VIEW[{list}][link]`
+
 ```meta-bind
 INPUT[listSuggester(optionQuery(#example-note), showcase):list2]
 ```

src/parsers/MarkdownLinkParser.ts

@@ -4,23 +4,51 @@ import { type Parser } from '@lemons_dev/parsinom/lib/Parser';
 import { runParser } from './ParsingError';
 import { P_UTILS } from '@lemons_dev/parsinom/lib/ParserUtils';
 
-const mdLinkInnerParser = P.sequence(
+const mdWikiLinkInnerParser: Parser<[string, string | undefined, string | undefined]> = P.sequence(
 	filePath, // the file path
 	P.string('#').then(P.manyNotOf('[]#|^:')).optional(), // the optional heading
 	P.string('|').then(P.manyNotOf('[]')).optional(), // the optional alias
 );
 
-const mdLinkParser: Parser<MarkdownLink> = P.sequenceMap(
-	(a, b) => {
-		return {
-			isEmbed: a !== undefined,
-			target: b[0],
-			block: b[1],
-			alias: b[2],
-		};
-	},
-	P.string('!').optional(),
-	mdLinkInnerParser.wrapString('[[', ']]'),
+const mdLinkParser: Parser<MarkdownLink> = P.or(
+	// wiki links
+	P.sequenceMap(
+		(a, b): MarkdownLink => {
+			return {
+				isEmbed: a !== undefined,
+				target: b[0],
+				block: b[1],
+				alias: b[2],
+				internal: true,
+			};
+		},
+		P.string('!').optional(),
+		mdWikiLinkInnerParser.wrapString('[[', ']]'),
+	),
+	// standard markdown links
+	P.sequenceMap(
+		(a, b, c): MarkdownLink => {
+			let internal: boolean;
+			// if it's a URL, it's external
+			try {
+				new URL(c);
+				internal = false;
+			} catch (_) {
+				internal = true;
+			}
+
+			return {
+				isEmbed: a !== undefined,
+				target: c,
+				block: undefined,
+				alias: b,
+				internal: internal,
+			};
+		},
+		P.string('!').optional(),
+		P.manyNotOf('[]').wrapString('[', ']'),
+		P.manyNotOf('()').wrapString('(', ')'),
+	),
 );
 
 const mdLinkListParser: Parser<MarkdownLink[]> = P.separateBy(mdLinkParser, P.string(',').trim(P_UTILS.optionalWhitespace()));
@@ -30,16 +58,17 @@ export interface MarkdownLink {
 	target: string;
 	block?: string;
 	alias?: string;
+	internal: boolean;
 }
 
 export function parseMdLink(link: string): MarkdownLink {
-	return runParser(mdLinkParser, link);
+	return runParser(mdLinkParser.thenEof(), link);
 }
 
 export function parseMdLinkList(link: string): MarkdownLink[] {
-	return runParser(mdLinkListParser, link);
+	return runParser(mdLinkListParser.thenEof(), link);
 }
 
 export function isMdLink(str: string): boolean {
-	return (str.startsWith('![[') || str.startsWith('[[')) && str.endsWith(']]');
+	return mdLinkParser.thenEof().tryParse(str).success;
 }

src/utils/LinkComponent.svelte

@@ -4,14 +4,15 @@
 	export let mdLink: MarkdownLink;
 
 	$: linkHref = mdLink.block ? `${mdLink.target}#${mdLink.block}` : mdLink.target;
+	$: cssClass = mdLink.internal ? 'internal-link' : 'external-link';
 </script>
 
 {#if mdLink.alias}
-	<a data-href={linkHref} href={linkHref} class="internal-link" target="_blank" rel="noopener" aria-label={linkHref}>
+	<a data-href={linkHref} href={linkHref} class={cssClass} target="_blank" rel="noopener" aria-label={linkHref}>
 		{mdLink.alias}
 	</a>
 {:else}
-	<a data-href={linkHref} href={linkHref} class="internal-link" target="_blank" rel="noopener">
+	<a data-href={linkHref} href={linkHref} class={cssClass} target="_blank" rel="noopener">
 		{linkHref}
 	</a>
 {/if}

src/viewFields/fields/LinkVF.ts

@@ -81,10 +81,15 @@ export class LinkVF extends AbstractViewField {
 		const variable = variables[0];
 		const content = variable.inputSignal.get();
 
+		// we want the return value to be a human-readable string, since someone could save this to the frontmatter
 		if (typeof content === 'string') {
 			return this.convertToLink(content);
 		} else if (Array.isArray(content)) {
-			return (content.filter(x => typeof x === 'string') as string[]).map(x => this.convertToLink(x)).join(', ');
+			let strings = content.filter(x => typeof x === 'string') as string[];
+			return strings
+				.map(x => this.convertToLink(x))
+				.filter(x => x !== '')
+				.join(', ');
 		} else {
 			return '';
 		}
@@ -93,8 +98,21 @@ export class LinkVF extends AbstractViewField {
 	convertToLink(str: string): string {
 		if (isMdLink(str)) {
 			return str;
-		} else {
+		} else if (isMdLink(`[[${str}]]`)) {
 			return `[[${str}]]`;
+		} else if (this.getUrl(str)) {
+			const url = this.getUrl(str) as URL;
+			return `[${url.hostname}](${str})`;
+		} else {
+			return '';
+		}
+	}
+
+	getUrl(str: string): URL | undefined {
+		try {
+			return new URL(str);
+		} catch (_) {
+			return undefined;
 		}
 	}
 

tests/parserTests/MarkdownLinkParser.test.ts

@@ -0,0 +1,110 @@
+import { describe, test, expect, beforeEach, spyOn, Mock } from 'bun:test';
+import { parseMdLink, parseMdLinkList } from '../../src/parsers/MarkdownLinkParser';
+
+describe('markdown link parser', () => {
+	describe('parse markdown link', () => {
+		// --- wiki links ---
+
+		test('should parse wiki link', () => {
+			expect(parseMdLink('[[test]]')).toEqual({
+				isEmbed: false,
+				target: 'test',
+				block: undefined,
+				alias: undefined,
+				internal: true,
+			});
+		});
+
+		test('should parse wiki link embed', () => {
+			expect(parseMdLink('![[test]]')).toEqual({
+				isEmbed: true,
+				target: 'test',
+				block: undefined,
+				alias: undefined,
+				internal: true,
+			});
+		});
+
+		test('should parse wiki with block', () => {
+			expect(parseMdLink('[[test#123]]')).toEqual({
+				isEmbed: false,
+				target: 'test',
+				block: '123',
+				alias: undefined,
+				internal: true,
+			});
+		});
+
+		test('should parse wiki with alias', () => {
+			expect(parseMdLink('[[test|something]]')).toEqual({
+				isEmbed: false,
+				target: 'test',
+				block: undefined,
+				alias: 'something',
+				internal: true,
+			});
+		});
+
+		test('should parse wiki with block and alias', () => {
+			expect(parseMdLink('[[test#123|something]]')).toEqual({
+				isEmbed: false,
+				target: 'test',
+				block: '123',
+				alias: 'something',
+				internal: true,
+			});
+		});
+
+		// --- markdown links ---
+
+		test('should parse markdown link', () => {
+			expect(parseMdLink('[something](test)')).toEqual({
+				isEmbed: false,
+				target: 'test',
+				block: undefined,
+				alias: 'something',
+				internal: true,
+			});
+		});
+
+		test('should parse markdown link embed', () => {
+			expect(parseMdLink('![something](test)')).toEqual({
+				isEmbed: true,
+				target: 'test',
+				block: undefined,
+				alias: 'something',
+				internal: true,
+			});
+		});
+
+		test('should parse external markdown link', () => {
+			expect(parseMdLink('[github](https://github.com)')).toEqual({
+				isEmbed: false,
+				target: 'https://github.com',
+				block: undefined,
+				alias: 'github',
+				internal: false,
+			});
+		});
+
+		// --- errors ---
+
+		test('should fail on non markdown link', () => {
+			expect(() => parseMdLink('something else')).toThrow();
+		});
+	});
+
+	describe('parse markdown link list', () => {
+		test('should parse link list', () => {
+			expect(() => parseMdLinkList('[[test]], [github](https://github.com), [[test#123|something]]')).not.toThrow();
+		});
+
+		test('should fail on non markdown link in list', () => {
+			expect(() => parseMdLinkList('[[test]], [github](https://github.com), something else')).toThrow();
+		});
+
+		test('should fail on missing comma', () => {
+			expect(() => parseMdLinkList('[[test]] [github](https://github.com), [[test#123|something]]')).toThrow();
+		});
+	});
+});