Add file alias and link editing abilities to suggester-family elements

packages/core/src/fields/inputFields/fields/InlineListSuggester/InlineListSuggesterComponent.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { InputFieldSvelteProps } from 'meta-bind-core/src/fields/inputFields/InputFieldSvelteWrapper';
+	import { MDLinkParser } from 'meta-bind-core/src/parsers/MarkdownLinkParser';
 	import Icon from 'meta-bind-core/src/utils/components/Icon.svelte';
 	import LiteralRenderComponent from 'meta-bind-core/src/utils/components/LiteralRenderComponent.svelte';
 	import type { ContextMenuItemDefinition } from 'meta-bind-core/src/utils/IContextMenu';
@@ -8,6 +9,7 @@
 	const props: InputFieldSvelteProps<MBLiteral[]> & {
 		showSuggester: () => void;
 		showTextPrompt: () => void;
+		editLinkText: (index: number, value: MBLiteral) => void;
 		allowOther: boolean;
 	} = $props();
 
@@ -56,6 +58,16 @@
 	function openContextMenuForElement(e: MouseEvent, index: number): void {
 		const menuActions: ContextMenuItemDefinition[] = [];
 
+		const entry = value[index];
+		const isLink = typeof entry === 'string' && MDLinkParser.isLink(entry);
+		if (isLink) {
+			menuActions.push({
+				name: 'Edit link text',
+				icon: 'pencil',
+				onclick: () => props.editLinkText(index, entry),
+			});
+		}
+
 		if (index > 0) {
 			menuActions.push({
 				name: 'Move left',
@@ -97,7 +109,10 @@
 	{#each value as entry, i}
 		<div
 			class="mb-inline-list-item"
-			oncontextmenu={e => openContextMenuForElement(e, i)}
+			oncontextmenu={e => {
+				e.preventDefault();
+				openContextMenuForElement(e, i);
+			}}
 			role="listitem"
 			data-value={stringifyLiteral(entry)}
 		>

packages/core/src/fields/inputFields/fields/InlineListSuggester/InlineListSuggesterIPF.ts

@@ -1,5 +1,6 @@
 import { InputFieldArgumentType } from 'meta-bind-core/src/config/FieldConfigs';
 import { AbstractInputField } from 'meta-bind-core/src/fields/inputFields/AbstractInputField';
+import { openLinkTextEditingModal } from 'meta-bind-core/src/fields/inputFields/fields/Suggester/SuggesterHelper';
 import type { InputFieldSvelteComponent } from 'meta-bind-core/src/fields/inputFields/InputFieldSvelteWrapper';
 import type { MBLiteral } from 'meta-bind-core/src/utils/Literal';
 import { parseUnknownToLiteralArray } from 'meta-bind-core/src/utils/Literal';
@@ -35,6 +36,7 @@ export class InlineListSuggesterIPF extends AbstractInputField<MBLiteral[], MBLi
 		return {
 			showSuggester: () => this.openModal(),
 			showTextPrompt: () => this.openTextModal(),
+			editLinkText: (index: number, value: MBLiteral) => this.openLinkTextEditor(index, value),
 			allowOther: this.mountable.getArgument(InputFieldArgumentType.ALLOW_OTHER)?.value === true,
 		};
 	}
@@ -57,4 +59,35 @@ export class InlineListSuggesterIPF extends AbstractInputField<MBLiteral[], MBLi
 			onCancel: () => {},
 		});
 	}
+
+	openLinkTextEditor(index: number, linkValue: MBLiteral): void {
+		if (typeof linkValue !== 'string') {
+			return;
+		}
+
+		// Validate that the index is within bounds
+		const currentValue = this.getInternalValue();
+		if (!Array.isArray(currentValue) || index < 0 || index >= currentValue.length) {
+			return;
+		}
+
+		const currentLink = linkValue;
+
+		openLinkTextEditingModal(
+			currentLink,
+			params => this.mountable.mb.internal.openTextPromptModal(params),
+			updatedLink => {
+				// Re-check the value, since the list may have changed (e.g. reordered or an
+				// item removed) while the modal was open.
+				const latestValue = this.getInternalValue();
+				if (!Array.isArray(latestValue) || latestValue[index] !== currentLink) {
+					return;
+				}
+
+				const updatedArray = [...latestValue];
+				updatedArray[index] = updatedLink;
+				this.setInternalValue(updatedArray);
+			},
+		);
+	}
 }

packages/core/src/fields/inputFields/fields/ListSuggester/ListSuggesterComponent.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { ButtonStyleType } from 'meta-bind-core/src/config/ButtonConfig';
 	import type { InputFieldSvelteProps } from 'meta-bind-core/src/fields/inputFields/InputFieldSvelteWrapper';
+	import { MDLinkParser } from 'meta-bind-core/src/parsers/MarkdownLinkParser';
 	import Button from 'meta-bind-core/src/utils/components/Button.svelte';
 	import LiteralRenderComponent from 'meta-bind-core/src/utils/components/LiteralRenderComponent.svelte';
 	import type { ContextMenuItemDefinition } from 'meta-bind-core/src/utils/IContextMenu';
@@ -9,6 +10,7 @@
 	const props: InputFieldSvelteProps<MBLiteral[]> & {
 		showSuggester: () => void;
 		showTextPrompt: () => void;
+		editLinkText: (index: number, value: MBLiteral) => void;
 		allowOther: boolean;
 	} = $props();
 
@@ -31,6 +33,16 @@
 	function openContextMenuForElement(e: MouseEvent, index: number): void {
 		const menuActions: ContextMenuItemDefinition[] = [];
 
+		const entry = value[index];
+		const isLink = typeof entry === 'string' && MDLinkParser.isLink(entry);
+		if (isLink) {
+			menuActions.push({
+				name: 'Edit link text',
+				icon: 'pencil',
+				onclick: () => props.editLinkText(index, entry),
+			});
+		}
+
 		if (index > 0) {
 			menuActions.push({
 				name: 'Move up',
@@ -72,7 +84,10 @@
 	{#each value as entry, i}
 		<div
 			class="mb-list-item"
-			oncontextmenu={e => openContextMenuForElement(e, i)}
+			oncontextmenu={e => {
+				e.preventDefault();
+				openContextMenuForElement(e, i);
+			}}
 			role="listitem"
 			data-value={stringifyLiteral(entry)}
 		>

packages/core/src/fields/inputFields/fields/ListSuggester/ListSuggesterIPF.ts

@@ -1,5 +1,6 @@
 import { InputFieldArgumentType } from 'meta-bind-core/src/config/FieldConfigs';
 import { AbstractInputField } from 'meta-bind-core/src/fields/inputFields/AbstractInputField';
+import { openLinkTextEditingModal } from 'meta-bind-core/src/fields/inputFields/fields/Suggester/SuggesterHelper';
 import type { InputFieldSvelteComponent } from 'meta-bind-core/src/fields/inputFields/InputFieldSvelteWrapper';
 import type { MBLiteral } from 'meta-bind-core/src/utils/Literal';
 import { parseUnknownToLiteralArray } from 'meta-bind-core/src/utils/Literal';
@@ -35,6 +36,7 @@ export class ListSuggesterIPF extends AbstractInputField<MBLiteral[], MBLiteral[
 		return {
 			showSuggester: () => this.openModal(),
 			showTextPrompt: () => this.openTextModal(),
+			editLinkText: (index: number, value: MBLiteral) => this.openLinkTextEditor(index, value),
 			allowOther: this.mountable.getArgument(InputFieldArgumentType.ALLOW_OTHER)?.value === true,
 		};
 	}
@@ -57,4 +59,35 @@ export class ListSuggesterIPF extends AbstractInputField<MBLiteral[], MBLiteral[
 			onCancel: () => {},
 		});
 	}
+
+	openLinkTextEditor(index: number, linkValue: MBLiteral): void {
+		if (typeof linkValue !== 'string') {
+			return;
+		}
+
+		// Validate that the index is within bounds
+		const currentValue = this.getInternalValue();
+		if (!Array.isArray(currentValue) || index < 0 || index >= currentValue.length) {
+			return;
+		}
+
+		const currentLink = linkValue;
+
+		openLinkTextEditingModal(
+			currentLink,
+			params => this.mountable.mb.internal.openTextPromptModal(params),
+			updatedLink => {
+				// Re-check the value, since the list may have changed (e.g. reordered or an
+				// item removed) while the modal was open.
+				const latestValue = this.getInternalValue();
+				if (!Array.isArray(latestValue) || latestValue[index] !== currentLink) {
+					return;
+				}
+
+				const updatedArray = [...latestValue];
+				updatedArray[index] = updatedLink;
+				this.setInternalValue(updatedArray);
+			},
+		);
+	}
 }

packages/core/src/fields/inputFields/fields/Suggester/SuggesterComponent.svelte

@@ -10,6 +10,7 @@
 	const props: InputFieldSvelteProps<MBLiteral> & {
 		showSuggester: () => void;
 		showTextPrompt: () => void;
+		editLinkText: () => void;
 		allowOther: boolean;
 	} = $props();
 
@@ -44,6 +45,11 @@
 	<Button variant={ButtonStyleType.PLAIN} onclick={props.showSuggester}>
 		<Icon mb={props.mb} iconName="list" />
 	</Button>
+	{#if mdLink !== undefined}
+		<Button variant={ButtonStyleType.PLAIN} onclick={props.editLinkText} tooltip="Edit link text">
+			<Icon mb={props.mb} iconName="pencil" />
+		</Button>
+	{/if}
 	{#if props.allowOther}
 		<Button variant={ButtonStyleType.PLAIN} onclick={props.showTextPrompt}>
 			<Icon mb={props.mb} iconName="pencil" />

packages/core/src/fields/inputFields/fields/Suggester/SuggesterHelper.ts

@@ -3,11 +3,25 @@ import type { ImageSuggesterIPF } from 'meta-bind-core/src/fields/inputFields/fi
 import type { InlineListSuggesterIPF } from 'meta-bind-core/src/fields/inputFields/fields/InlineListSuggester/InlineListSuggesterIPF';
 import type { ListSuggesterIPF } from 'meta-bind-core/src/fields/inputFields/fields/ListSuggester/ListSuggesterIPF';
 import type { SuggesterIPF } from 'meta-bind-core/src/fields/inputFields/fields/Suggester/SuggesterIPF';
+import { MDLinkParser } from 'meta-bind-core/src/parsers/MarkdownLinkParser';
+import type { MBLiteral } from 'meta-bind-core/src/utils/Literal';
 
 export type SuggesterLikeIFP = SuggesterIPF | ListSuggesterIPF | InlineListSuggesterIPF;
 
 export type ImageSuggesterLikeIPF = ImageSuggesterIPF | ImageListSuggesterIPF;
 
+/**
+ * Callback signature for opening a text prompt modal.
+ */
+export type TextPromptModalCallback = (params: {
+	title: string;
+	subTitle: string;
+	value: string;
+	multiline: boolean;
+	onSubmit: (value: MBLiteral) => void;
+	onCancel: () => void;
+}) => void;
+
 export class SuggesterOption<T> {
 	value: T;
 	displayValue: string;
@@ -23,3 +37,52 @@ export class SuggesterOption<T> {
 		return this.value?.toString() ?? 'null';
 	}
 }
+
+/**
+ * Opens a modal for editing the display text (alias) of a markdown/wiki link.
+ *
+ * @param currentLinkValue - The current link string to edit
+ * @param openTextModal - Callback to open the text prompt modal
+ * @param onLinkUpdated - Callback invoked with the updated link string when the user submits
+ */
+export function openLinkTextEditingModal(
+	currentLinkValue: string,
+	openTextModal: TextPromptModalCallback,
+	onLinkUpdated: (updatedLink: string) => void,
+): void {
+	let linkText = '';
+	try {
+		if (MDLinkParser.isLink(currentLinkValue)) {
+			const link = MDLinkParser.parseLink(currentLinkValue);
+			linkText = link.alias ?? link.target;
+		} else {
+			linkText = currentLinkValue;
+		}
+	} catch (e) {
+		console.warn('meta-bind | failed to parse link for editing', e);
+		linkText = currentLinkValue;
+	}
+
+	openTextModal({
+		title: 'Edit Link Text',
+		subTitle: 'Modify the link display text.',
+		value: linkText,
+		multiline: false,
+		onSubmit: (newLinkText: MBLiteral) => {
+			if (typeof newLinkText !== 'string') {
+				return;
+			}
+
+			try {
+				if (MDLinkParser.isLink(currentLinkValue)) {
+					const link = MDLinkParser.parseLink(currentLinkValue);
+					link.alias = newLinkText;
+					onLinkUpdated(link.toString());
+				}
+			} catch (e) {
+				console.warn('meta-bind | failed to update link text', e);
+			}
+		},
+		onCancel: () => {},
+	});
+}

packages/core/src/fields/inputFields/fields/Suggester/SuggesterIPF.ts

@@ -1,5 +1,6 @@
 import { InputFieldArgumentType } from 'meta-bind-core/src/config/FieldConfigs';
 import { AbstractInputField } from 'meta-bind-core/src/fields/inputFields/AbstractInputField';
+import { openLinkTextEditingModal } from 'meta-bind-core/src/fields/inputFields/fields/Suggester/SuggesterHelper';
 import type { InputFieldSvelteComponent } from 'meta-bind-core/src/fields/inputFields/InputFieldSvelteWrapper';
 import type { MBLiteral } from 'meta-bind-core/src/utils/Literal';
 import { parseUnknownToLiteral } from 'meta-bind-core/src/utils/Literal';
@@ -31,6 +32,7 @@ export class SuggesterIPF extends AbstractInputField<MBLiteral, MBLiteral> {
 		return {
 			showSuggester: () => this.openModal(),
 			showTextPrompt: () => this.openTextModal(),
+			editLinkText: () => this.openLinkTextEditor(),
 			allowOther: this.mountable.getArgument(InputFieldArgumentType.ALLOW_OTHER)?.value === true,
 		};
 	}
@@ -51,4 +53,19 @@ export class SuggesterIPF extends AbstractInputField<MBLiteral, MBLiteral> {
 			onCancel: () => {},
 		});
 	}
+
+	openLinkTextEditor(): void {
+		const currentValue = this.getInternalValue();
+		if (!currentValue || typeof currentValue !== 'string') {
+			return;
+		}
+
+		openLinkTextEditingModal(
+			currentValue,
+			params => this.mountable.mb.internal.openTextPromptModal(params),
+			updatedLink => {
+				this.setInternalValue(updatedLink);
+			},
+		);
+	}
 }