updated the link picker modal and the property editors using it. (#18059)

* updated the link picker modal and the property editors using it.

* updated the last language

* some minor updates to the code so that it uses the correct actions

* Minor change in the language key that is being used.

* use camel case

* use "add" and "update" without "link"

---------

Co-authored-by: Mads Rasmussen <[email protected]>

Author: jonat123

src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts

@@ -542,6 +542,8 @@ export default {
 		selectIcon: 'Vælg ikon',
 		selectItem: 'Vælg item',
 		selectLink: 'Vælg link',
+		addLink: 'Tilføj Link',
+		updateLink: 'Opdater Link',
 		selectMacro: 'Vælg makro',
 		selectContent: 'Vælg indhold',
 		selectContentType: 'Vælg indholdstype',

src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts

@@ -573,6 +573,8 @@ export default {
 		selectIcon: 'Select icon',
 		selectItem: 'Select item',
 		selectLink: 'Configure link',
+		addLink: 'Add Link',
+		updateLink: 'Update Link',
 		selectMacro: 'Select macro',
 		selectContent: 'Select content',
 		selectContentType: 'Select content type',

src/Umbraco.Web.UI.Client/src/assets/lang/en.ts

@@ -565,6 +565,8 @@ export default {
 		selectIcon: 'Select icon',
 		selectItem: 'Select item',
 		selectLink: 'Configure link',
+		addLink: 'Add Link',
+		updateLink: 'Update Link',
 		selectMacro: 'Select macro',
 		selectContent: 'Select content',
 		selectContentType: 'Select content type',

src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/components/input-multi-url/input-multi-url.element.ts

@@ -200,6 +200,7 @@ export class UmbInputMultiUrlElement extends UUIFormControlMixin(UmbLitElement,
 					},
 					data: {
 						index: index,
+						isNew: index === null,
 						config: {
 							hideAnchor: this.hideAnchor,
 						},

src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/link-picker-modal/link-picker-modal.element.ts

@@ -200,7 +200,10 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 
 	override render() {
 		return html`
-			<umb-body-layout headline=${this.localize.term('defaultdialogs_selectLink')}>
+			<umb-body-layout
+				headline=${this.localize.term(
+					this.modalContext?.data.isNew ? 'defaultdialogs_addLink' : 'defaultdialogs_updateLink',
+				)}>
 				<uui-box>
 					${this.#renderLinkType()} ${this.#renderLinkAnchorInput()} ${this.#renderLinkTitleInput()}
 					${this.#renderLinkTargetInput()}
@@ -210,7 +213,7 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 					<uui-button
 						color="positive"
 						look="primary"
-						label=${this.localize.term('general_submit')}
+						label=${this.localize.term(this.modalContext?.data.isNew ? 'general_add' : 'general_update')}
 						?disabled=${!this.value.link.type}
 						@click=${this.#onSubmit}></uui-button>
 				</div>

src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/link-picker-modal/link-picker-modal.token.ts

@@ -5,6 +5,7 @@ import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 export interface UmbLinkPickerModalData {
 	config: UmbLinkPickerConfig;
 	index: number | null;
+	isNew: boolean;
 }
 
 export type UmbLinkPickerModalValue = { link: UmbLinkPickerLink };

src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/monaco-markdown-editor-action/url-picker-monaco-markdown-editor-action.ts

@@ -40,6 +40,7 @@ export class UmbUrlPickerMonacoMarkdownEditorAction extends UmbControllerBase {
 			modal: { size: overlaySize },
 			data: {
 				index: null,
+				isNew: selectedValue === '',
 				config: {},
 			},
 			value: {

src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/tiny-mce-plugin/tiny-mce-multi-url-picker.plugin.ts

@@ -81,6 +81,7 @@ export default class UmbTinyMceMultiUrlPickerPlugin extends UmbTinyMcePluginBase
 			data: {
 				config: {},
 				index: null,
+				isNew: currentTarget?.url === undefined,
 			},
 			value: {
 				link: currentTarget ?? {},

src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/link.tiptap-toolbar-api.ts

@@ -10,7 +10,7 @@ export default class UmbTiptapToolbarLinkExtensionApi extends UmbTiptapToolbarEl
 	override async execute(editor?: Editor) {
 		const attrs = editor?.getAttributes(UmbLink.name) ?? {};
 		const link = this.#getLinkData(attrs);
-		const data = { config: {}, index: null };
+		const data = { config: {}, index: null, isNew: link?.url === undefined };
 		const value = { link };
 
 		const overlaySize = this.configuration?.getValueByAlias<UUIModalSidebarSize>('overlaySize') ?? 'small';