render links everywhere; fix #141

mProjectsCode · mProjectsCode · commit e8c3d0982302 · 2023-11-18T13:15:39.000+01:00
diff --git a/exampleVault/Input Fields/List.md b/exampleVault/Input Fields/List.md
@@ -4,6 +4,7 @@ list:
   - banana
   - berries
   - https://github.com/
+  - "[[test]]"
 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]]"
@@ -16,16 +17,20 @@ list4:
   - Example Note with Embeds
   - Example Note with Embeds
 list5:
-  - this is an element
+  - "[[Other/Example Notes/Example Note with Embeds.md|Example Note with Embeds]]"
+  - "[[Other/Example Notes/Example Note with Callouts.md|Example Note with Callouts]]"
 ---
 
+### List
 
 ```meta-bind
 INPUT[list(showcase):list]
 ```
 
 `VIEW[{list}][link]`
 
+### List Suggester
+
 ```meta-bind
 INPUT[listSuggester(optionQuery(#example-note), showcase):list2]
 ```
@@ -38,12 +43,16 @@ INPUT[listSuggester(optionQuery(#example-note), useLinks(false), showcase):list3
 
 `VIEW[{list3}][link]`
 
+### Inline List
+
+Some text: `INPUT[inlineList:list5]` some more text
+
+### Inline List Suggester
+
 ```meta-bind
 INPUT[inlineListSuggester(optionQuery(#example-note), option(something, other), useLinks(false), showcase):list4]
 ```
 
-
 Some text: `INPUT[inlineListSuggester(optionQuery(#example-note), option(something, other), useLinks(false)):list4]` some more text
 
-
-Some text: `INPUT[inlineList:list5]` some more text
+`INPUT[inlineListSuggester(optionQuery(#example-note), option(something, other)):list5]` 
diff --git a/src/inputFields/fields/DatePicker/DatePickerComponent.svelte b/src/inputFields/fields/DatePicker/DatePickerComponent.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { moment } from 'obsidian';
-	import Icon from '../../../utils/Icon.svelte';
+	import Icon from '../../../utils/components/Icon.svelte';
 
 	export let value: moment.Moment | null;
 	export let dateFormat: string;
diff --git a/src/inputFields/fields/InlineList/InlineListComponent.svelte b/src/inputFields/fields/InlineList/InlineListComponent.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-	import Icon from '../../../utils/Icon.svelte';
+	import Icon from '../../../utils/components/Icon.svelte';
 	import { isMdLink, parseMdLink } from '../../../parsers/MarkdownLinkParser';
-	import LinkComponent from '../../../utils/LinkComponent.svelte';
+	import LinkComponent from '../../../utils/components/LinkComponent.svelte';
 	import { MBLiteral } from '../../../utils/Literal';
+	import LiteralRenderComponent from '../../../utils/components/LiteralRenderComponent.svelte';
 
 	export let value: MBLiteral[];
 	export let showInput: () => void;
@@ -43,13 +44,7 @@
 <div class="mb-inline-list">
 	{#each value as entry, i}
 		<div class="mb-inline-list-item">
-			{#if isMdLink(`${entry}`)}
-				<span>
-					<LinkComponent mdLink={parseMdLink(`${entry}`)}></LinkComponent>
-				</span>
-			{:else}
-				<span>{entry}</span>
-			{/if}
+			<LiteralRenderComponent value={entry}></LiteralRenderComponent>
 			<button class="mb-inline-list-item-button" on:click={() => remove(i)}>
 				<Icon iconName="x" />
 			</button>
diff --git a/src/inputFields/fields/InlineListSuggester/InlineListSuggesterComponent.svelte b/src/inputFields/fields/InlineListSuggester/InlineListSuggesterComponent.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { Button } from 'obsidian-svelte';
-	import Icon from '../../../utils/Icon.svelte';
+	import Icon from '../../../utils/components/Icon.svelte';
 	import { isMdLink, parseMdLink } from '../../../parsers/MarkdownLinkParser';
-	import LinkComponent from '../../../utils/LinkComponent.svelte';
+	import LinkComponent from '../../../utils/components/LinkComponent.svelte';
 	import { MBLiteral } from '../../../utils/Literal';
+	import LiteralRenderComponent from '../../../utils/components/LiteralRenderComponent.svelte';
 
 	export let value: MBLiteral[];
 	export let showSuggester: () => void;
@@ -44,13 +45,7 @@
 <div class="mb-inline-list">
 	{#each value as entry, i}
 		<div class="mb-inline-list-item">
-			{#if isMdLink(`${entry}`)}
-				<span>
-					<LinkComponent mdLink={parseMdLink(`${entry}`)}></LinkComponent>
-				</span>
-			{:else}
-				<span>{entry}</span>
-			{/if}
+			<LiteralRenderComponent value={entry}></LiteralRenderComponent>
 			<button class="mb-inline-list-item-button" on:click={() => remove(i)}>
 				<Icon iconName="x" />
 			</button>
diff --git a/src/inputFields/fields/List/ListComponent.svelte b/src/inputFields/fields/List/ListComponent.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { Button } from 'obsidian-svelte';
-	import Icon from '../../../utils/Icon.svelte';
+	import Icon from '../../../utils/components/Icon.svelte';
 	import { MBLiteral } from '../../../utils/Literal';
+	import LiteralRenderComponent from '../../../utils/components/LiteralRenderComponent.svelte';
 
 	export let value: MBLiteral[];
 	export let limit: number | undefined;
@@ -41,7 +42,7 @@
 <div class="mb-list-items">
 	{#each value as entry, i}
 		<div class="mb-list-item">
-			<span>{entry}</span>
+			<LiteralRenderComponent value={entry}></LiteralRenderComponent>
 			<Button on:click={() => remove(i)}>
 				<Icon iconName="x" />
 			</Button>
diff --git a/src/inputFields/fields/ListSuggester/ListSuggesterComponent.svelte b/src/inputFields/fields/ListSuggester/ListSuggesterComponent.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { Button } from 'obsidian-svelte';
-	import Icon from '../../../utils/Icon.svelte';
+	import Icon from '../../../utils/components/Icon.svelte';
 	import { isMdLink, parseMdLink } from '../../../parsers/MarkdownLinkParser';
-	import LinkComponent from '../../../utils/LinkComponent.svelte';
+	import LinkComponent from '../../../utils/components/LinkComponent.svelte';
 	import { MBLiteral } from '../../../utils/Literal';
+	import LiteralRenderComponent from '../../../utils/components/LiteralRenderComponent.svelte';
 
 	export let value: MBLiteral[];
 	export let showSuggester: () => void;
@@ -44,13 +45,7 @@
 <div class="mb-list-items">
 	{#each value as entry, i}
 		<div class="mb-list-item">
-			{#if isMdLink(`${entry}`)}
-				<span>
-					<LinkComponent mdLink={parseMdLink(`${entry}`)}></LinkComponent>
-				</span>
-			{:else}
-				<span>{entry}</span>
-			{/if}
+			<LiteralRenderComponent value={entry}></LiteralRenderComponent>
 			<Button on:click={() => remove(i)}>
 				<Icon iconName="x" />
 			</Button>
diff --git a/src/inputFields/fields/MultiSelect/MultiSelectComponent.svelte b/src/inputFields/fields/MultiSelect/MultiSelectComponent.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { OptionInputFieldArgument } from '../../../fieldArguments/inputFieldArguments/arguments/OptionInputFieldArgument';
 	import { MBLiteral } from '../../../utils/Literal';
+	import LiteralRenderComponent from '../../../utils/components/LiteralRenderComponent.svelte';
 
 	export let value: MBLiteral[];
 	export let options: OptionInputFieldArgument[];
@@ -37,6 +38,6 @@
 		on:click={() => selectOption(option.value)}
 		on:keypress={event => selectOptionOnKey(event, option.value)}
 	>
-		{option.name}
+		<LiteralRenderComponent value={option.name}></LiteralRenderComponent>
 	</div>
 {/each}
diff --git a/src/inputFields/fields/Select/SelectComponent.svelte b/src/inputFields/fields/Select/SelectComponent.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { OptionInputFieldArgument } from '../../../fieldArguments/inputFieldArguments/arguments/OptionInputFieldArgument';
 	import { MBLiteral } from '../../../utils/Literal';
+	import LiteralRenderComponent from '../../../utils/components/LiteralRenderComponent.svelte';
 
 	export let value: MBLiteral;
 	export let options: OptionInputFieldArgument[];
@@ -31,6 +32,6 @@
 		on:click={() => selectOption(option.value)}
 		on:keypress={event => selectOptionOnKey(event, option.value)}
 	>
-		{option.name}
+		<LiteralRenderComponent value={option.name}></LiteralRenderComponent>
 	</div>
 {/each}
diff --git a/src/inputFields/fields/Suggester/SuggesterComponent.svelte b/src/inputFields/fields/Suggester/SuggesterComponent.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import Icon from '../../../utils/Icon.svelte';
-	import LinkComponent from '../../../utils/LinkComponent.svelte';
+	import Icon from '../../../utils/components/Icon.svelte';
+	import LinkComponent from '../../../utils/components/LinkComponent.svelte';
 	import { isMdLink, MarkdownLink, parseMdLink } from '../../../parsers/MarkdownLinkParser';
 	import { onMount } from 'svelte';
 	import { MBLiteral } from '../../../utils/Literal';
diff --git a/src/metaBindTable/MetaBindTableComponent.svelte b/src/metaBindTable/MetaBindTableComponent.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { MetaBindTable, MetaBindTableRow } from './MetaBindTable';
 	import MetaBindTableCellComponent from './MetaBindTableCellComponent.svelte';
-	import Icon from '../utils/Icon.svelte';
+	import Icon from '../utils/components/Icon.svelte';
 	import { Button } from 'obsidian-svelte';
 
 	export let table: MetaBindTable;
diff --git a/src/parsers/MarkdownLinkParser.ts b/src/parsers/MarkdownLinkParser.ts
@@ -28,14 +28,7 @@ const mdLinkParser: Parser<MarkdownLink> = P.or(
 	// 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;
-			}
+			const internal = !isUrl(c);
 
 			return {
 				isEmbed: a !== undefined,
@@ -75,3 +68,22 @@ export function parseMdLinkList(link: string): MarkdownLink[] {
 export function isMdLink(str: string): boolean {
 	return mdLinkParser.thenEof().tryParse(str).success;
 }
+
+export function isUrl(str: string): boolean {
+	try {
+		new URL(str);
+		return true;
+	} catch (_) {
+		return false;
+	}
+}
+
+export function urlToMdLink(url: URL): MarkdownLink {
+	return {
+		isEmbed: false,
+		target: url.href,
+		block: undefined,
+		alias: url.hostname,
+		internal: false,
+	};
+}
diff --git a/src/utils/LinkListComponent.svelte b/src/utils/LinkListComponent.svelte
diff --git a/src/utils/Literal.ts b/src/utils/Literal.ts
@@ -1,6 +1,7 @@
 import { type Parser } from '@lemons_dev/parsinom/lib/Parser';
 import { P } from '@lemons_dev/parsinom/lib/ParsiNOM';
 import { P_UTILS } from '@lemons_dev/parsinom/lib/ParserUtils';
+import { isMdLink, isUrl, type MarkdownLink, parseMdLink, urlToMdLink } from '../parsers/MarkdownLinkParser';
 
 export type MBLiteral = string | number | boolean | null;
 export type MBExtendedLiteral = MBLiteral | MBLiteral[];
@@ -147,14 +148,14 @@ export function parseUnknownToLiteral(literal: unknown): MBLiteral | undefined {
 export function stringifyUnknown(literal: unknown, nullAsEmpty: boolean): string {
 	if (Array.isArray(literal)) {
 		return literal
-			.map(x => recStringifyUnknown(x, nullAsEmpty))
+			.map(x => internalStringifyUnknown(x, nullAsEmpty))
 			.filter(x => x !== '')
 			.join(', ');
 	}
-	return recStringifyUnknown(literal, nullAsEmpty);
+	return internalStringifyUnknown(literal, nullAsEmpty);
 }
 
-function recStringifyUnknown(literal: unknown, nullAsEmpty: boolean): string {
+function internalStringifyUnknown(literal: unknown, nullAsEmpty: boolean): string {
 	if (literal === null || literal === undefined) {
 		return nullAsEmpty ? '' : 'null';
 	}
@@ -169,3 +170,27 @@ function recStringifyUnknown(literal: unknown, nullAsEmpty: boolean): string {
 	// eslint-disable-next-line @typescript-eslint/no-base-to-string
 	return literal.toString();
 }
+
+export function stringifyAndLinkUnknown(
+	literal: unknown,
+	nullAsEmpty: boolean,
+): string | MarkdownLink | (string | MarkdownLink)[] {
+	if (Array.isArray(literal)) {
+		return literal.map(x => internalStringifyAndLinkUnknown(x, nullAsEmpty)).filter(x => x !== '');
+	}
+	return internalStringifyAndLinkUnknown(literal, nullAsEmpty);
+}
+
+function internalStringifyAndLinkUnknown(literal: unknown, nullAsEmpty: boolean): string | MarkdownLink {
+	if (typeof literal === 'string') {
+		if (isMdLink(literal)) {
+			return parseMdLink(literal);
+		} else if (isUrl(literal)) {
+			return urlToMdLink(new URL(literal));
+		}
+
+		return literal;
+	}
+
+	return internalStringifyUnknown(literal, nullAsEmpty);
+}
diff --git a/src/utils/components/Icon.svelte b/src/utils/components/Icon.svelte
diff --git a/src/utils/components/LinkComponent.svelte b/src/utils/components/LinkComponent.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { MarkdownLink } from '../parsers/MarkdownLinkParser';
+	import { MarkdownLink } from '../../parsers/MarkdownLinkParser';
 
 	export let mdLink: MarkdownLink;
 
diff --git a/src/utils/components/LinkListComponent.svelte b/src/utils/components/LinkListComponent.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { MarkdownLink } from '../../parsers/MarkdownLinkParser';
+	import LinkComponent from './LinkComponent.svelte';
+	import ListWrapper from './ListWrapper.svelte';
+
+	export let mdLinkList: MarkdownLink[];
+</script>
+
+{#if mdLinkList.length === 0}
+	<span></span>
+{:else if mdLinkList.length === 1}
+	<LinkComponent mdLink={mdLinkList[0]}></LinkComponent>
+{:else}
+	<ListWrapper elements={mdLinkList} let:element>
+		<LinkComponent mdLink={element}></LinkComponent>
+	</ListWrapper>
+{/if}
diff --git a/src/utils/components/ListWrapper.svelte b/src/utils/components/ListWrapper.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	export let elements: unknown[] = [];
+</script>
+
+{#each elements.slice(0, elements.length - 1) as element}
+	<slot element={element} /><span>,</span>
+	<span></span>
+	<!-- some strange line breaks to get the comma seperated spacing to work -->
+{/each}
+<slot element={elements[elements.length - 1]} />
diff --git a/src/utils/components/LiteralRenderComponent.svelte b/src/utils/components/LiteralRenderComponent.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { stringifyAndLinkUnknown } from '../Literal';
+	import LinkComponent from './LinkComponent.svelte';
+	import ListWrapper from './ListWrapper.svelte';
+
+	export let value = undefined;
+
+	$: parsedValue = stringifyAndLinkUnknown(value);
+	$: console.log(parsedValue);
+</script>
+
+{#if typeof parsedValue === 'string'}
+	<span>{parsedValue}</span>
+{:else if Array.isArray(parsedValue)}
+	<span>
+		<ListWrapper elements={parsedValue} let:element>
+			{#if typeof element === 'string'}
+				<span>{element}</span>
+			{:else}
+				<LinkComponent mdLink={element}></LinkComponent>
+			{/if}
+		</ListWrapper>
+	</span>
+{:else}
+	<span><LinkComponent mdLink={parsedValue}></LinkComponent></span>
+{/if}
diff --git a/src/viewFields/fields/LinkVF.ts b/src/viewFields/fields/LinkVF.ts
@@ -6,7 +6,7 @@ import { getUUID } from '../../utils/Utils';
 import { ErrorLevel, MetaBindExpressionError, MetaBindValidationError } from '../../utils/errors/MetaBindErrors';
 import { type BindTargetDeclaration } from '../../parsers/inputFieldParser/InputFieldDeclaration';
 import { isMdLink, parseMdLinkList } from '../../parsers/MarkdownLinkParser';
-import LinkListComponent from '../../utils/LinkListComponent.svelte';
+import LinkListComponent from '../../utils/components/LinkListComponent.svelte';
 
 export class LinkVF extends AbstractViewField {
 	component?: LinkListComponent;
