Merge branch 'v15/dev' into v15/bugfix/17372

Author: nielslyngsoe

src/Umbraco.Cms.Api.Management/Controllers/Document/UpdateDocumentControllerBase.cs

@@ -17,21 +17,18 @@ protected UpdateDocumentControllerBase(IAuthorizationService authorizationServic
 
     protected async Task<IActionResult> HandleRequest(Guid id, UpdateDocumentRequestModel requestModel, Func<Task<IActionResult>> authorizedHandler)
     {
-        // TODO This have temporarily been uncommented, to support the client sends values from all cultures, even when the user do not have access to the languages.
-        // The values are ignored in the ContentEditingService
+        // We intentionally don't pass in cultures here.
+        // This is to support the client sending values for all cultures even if the user doesn't have access to the language.
+        // Values for unauthorized languages are later ignored in the ContentEditingService.
+        AuthorizationResult authorizationResult = await _authorizationService.AuthorizeResourceAsync(
+            User,
+            ContentPermissionResource.WithKeys(ActionUpdate.ActionLetter, id),
+            AuthorizationPolicies.ContentPermissionByResource);
 
-        // IEnumerable<string> cultures = requestModel.Variants
-        //     .Where(v => v.Culture is not null)
-        //     .Select(v => v.Culture!);
-        // AuthorizationResult authorizationResult = await _authorizationService.AuthorizeResourceAsync(
-        //     User,
-        //     ContentPermissionResource.WithKeys(ActionUpdate.ActionLetter, id, cultures),
-        //     AuthorizationPolicies.ContentPermissionByResource);
-        //
-        // if (!authorizationResult.Succeeded)
-        // {
-        //     return Forbidden();
-        // }
+        if (authorizationResult.Succeeded is false)
+        {
+            return Forbidden();
+        }
 
         return await authorizedHandler();
     }

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

@@ -536,10 +536,14 @@ export default {
 		linkToMedia: 'Link til medie',
 		selectContentStartNode: 'Vælg startnode for indhold',
 		selectMedia: 'Vælg medie',
+		chooseMedia: 'Vælg medie',
+		chooseMediaStartNode: 'Vælg startnode for medie',
 		selectMediaType: 'Vælg medietype',
 		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

@@ -568,10 +568,13 @@ export default {
 		linkToMedia: 'Link to media',
 		selectContentStartNode: 'Select content start node',
 		selectMedia: 'Select media',
+		chooseMediaStartNode: 'Choose Media Start nodes',
 		selectMediaType: 'Select media type',
 		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

@@ -559,10 +559,14 @@ export default {
 		selectContentStartNode: 'Select content start node',
 		selectEvent: 'Select event',
 		selectMedia: 'Select media',
+		chooseMedia: 'Choose media',
+		chooseMediaStartNode: 'Choose Media Start nodes',
 		selectMediaType: 'Select media type',
 		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/external/tiptap/extensions/tiptap-div.extension.ts

@@ -0,0 +1,32 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+
+export interface DivOptions {
+	/**
+	 * HTML attributes to add to the element.
+	 * @default {}
+	 * @example { class: 'foo' }
+	 */
+	HTMLAttributes: Record<string, any>;
+}
+
+export const Div = Node.create<DivOptions>({
+	name: 'div',
+
+	priority: 50,
+
+	group: 'block',
+
+	content: 'inline*',
+
+	addOptions() {
+		return { HTMLAttributes: {} };
+	},
+
+	parseHTML() {
+		return [{ tag: 'div' }];
+	},
+
+	renderHTML({ HTMLAttributes }) {
+		return ['div', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+	},
+});

src/Umbraco.Web.UI.Client/src/external/tiptap/extensions/tiptap-html-global-attributes.extension.ts

@@ -0,0 +1,52 @@
+import { Extension } from '@tiptap/core';
+
+/**
+ * Converts camelCase to kebab-case.
+ * @param {string} str - The string to convert.
+ * @returns {string} The converted string.
+ */
+function camelCaseToKebabCase(str: string): string {
+	return str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());
+}
+
+export interface HtmlGlobalAttributesOptions {
+	/**
+	 * The types where the text align attribute can be applied.
+	 * @default []
+	 * @example ['heading', 'paragraph']
+	 */
+	types: Array<string>;
+}
+
+export const HtmlGlobalAttributes = Extension.create<HtmlGlobalAttributesOptions>({
+	name: 'htmlGlobalAttributes',
+
+	addOptions() {
+		return { types: [] };
+	},
+
+	addGlobalAttributes() {
+		return [
+			{
+				types: this.options.types,
+				attributes: {
+					class: {},
+					dataset: {
+						parseHTML: (element) => element.dataset,
+						renderHTML: (attributes) => {
+							const keys = attributes.dataset ? Object.keys(attributes.dataset) : [];
+							if (!keys.length) return {};
+							const dataAtrrs: Record<string, string> = {};
+							keys.forEach((key) => {
+								dataAtrrs['data-' + camelCaseToKebabCase(key)] = attributes.dataset[key];
+							});
+							return dataAtrrs;
+						},
+					},
+					id: {},
+					style: {},
+				},
+			},
+		];
+	},
+});

src/Umbraco.Web.UI.Client/src/external/tiptap/extensions/tiptap-span.extension.ts

@@ -0,0 +1,32 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+
+export interface SpanOptions {
+	/**
+	 * HTML attributes to add to the element.
+	 * @default {}
+	 * @example { class: 'foo' }
+	 */
+	HTMLAttributes: Record<string, any>;
+}
+
+export const Span = Node.create<SpanOptions>({
+	name: 'span',
+
+	group: 'inline',
+
+	inline: true,
+
+	content: 'inline*',
+
+	addOptions() {
+		return { HTMLAttributes: {} };
+	},
+
+	parseHTML() {
+		return [{ tag: 'span' }];
+	},
+
+	renderHTML({ HTMLAttributes }) {
+		return ['span', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+	},
+});

src/Umbraco.Web.UI.Client/src/external/tiptap/extensions/tiptap-umb-embedded-media.extension.ts

@@ -8,6 +8,7 @@ export const umbEmbeddedMedia = Node.create({
 	inline() {
 		return this.options.inline;
 	},
+
 	atom: true,
 	marks: '',
 	draggable: true,
@@ -19,12 +20,18 @@ export const umbEmbeddedMedia = Node.create({
 			'data-embed-height': { default: 240 },
 			'data-embed-url': { default: null },
 			'data-embed-width': { default: 360 },
-			markup: { default: null },
+			markup: { default: null, parseHTML: (element) => element.innerHTML },
 		};
 	},
 
 	parseHTML() {
-		return [{ tag: 'div', class: 'umb-embed-holder', getAttrs: (node) => ({ markup: node.innerHTML }) }];
+		return [
+			{
+				tag: 'div',
+				priority: 100,
+				getAttrs: (dom) => dom.classList.contains('umb-embed-holder') && null,
+			},
+		];
 	},
 
 	renderHTML({ HTMLAttributes }) {

src/Umbraco.Web.UI.Client/src/external/tiptap/index.ts

@@ -28,8 +28,11 @@ export { TextAlign } from '@tiptap/extension-text-align';
 export { Underline } from '@tiptap/extension-underline';
 
 // CUSTOM EXTENSIONS
-export * from './extensions/tiptap-umb-embedded-media.extension.js';
+export * from './extensions/tiptap-div.extension.js';
 export * from './extensions/tiptap-figcaption.extension.js';
 export * from './extensions/tiptap-figure.extension.js';
+export * from './extensions/tiptap-span.extension.js';
+export * from './extensions/tiptap-html-global-attributes.extension.js';
+export * from './extensions/tiptap-umb-embedded-media.extension.js';
 export * from './extensions/tiptap-umb-image.extension.js';
 export * from './extensions/tiptap-umb-link.extension.js';

src/Umbraco.Web.UI.Client/src/packages/code-editor/code-editor-modal/code-editor-modal.element.ts

@@ -1,11 +1,9 @@
 import type { UmbCodeEditorElement } from '../components/code-editor.element.js';
 import type { UmbCodeEditorModalData, UmbCodeEditorModalValue } from './code-editor-modal.token.js';
-import { css, html, ifDefined, customElement, query } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, ifDefined, query } from '@umbraco-cms/backoffice/external/lit';
 import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
 
-const elementName = 'umb-code-editor-modal';
-
-@customElement(elementName)
+@customElement('umb-code-editor-modal')
 export class UmbCodeEditorModalElement extends UmbModalBaseElement<UmbCodeEditorModalData, UmbCodeEditorModalValue> {
 	@query('umb-code-editor')
 	_codeEditor?: UmbCodeEditorElement;
@@ -18,29 +16,39 @@ export class UmbCodeEditorModalElement extends UmbModalBaseElement<UmbCodeEditor
 	#handleCancel() {
 		this.modalContext?.reject();
 	}
+
+	#onLoaded() {
+		if (this.data?.formatOnLoad) {
+			setTimeout(() => {
+				this._codeEditor?.editor?.monacoEditor?.getAction('editor.action.formatDocument')?.run();
+			}, 100);
+		}
+	}
+
 	override render() {
 		return html`
 			<umb-body-layout .headline=${this.data?.headline ?? 'Code Editor'}>
 				<div id="editor-box">${this.#renderCodeEditor()}</div>
-				<div slot="actions">
-					<uui-button
-						id="cancel"
-						label=${this.localize.term('general_cancel')}
-						@click=${this.#handleCancel}></uui-button>
-					<uui-button
-						id="confirm"
-						color="${this.data?.color || 'positive'}"
-						look="primary"
-						label="${this.data?.confirmLabel || this.localize.term('general_submit')}"
-						@click=${this.#handleConfirm}></uui-button>
-				</div>
+				<uui-button
+					slot="actions"
+					label=${this.localize.term('general_cancel')}
+					@click=${this.#handleCancel}></uui-button>
+				<uui-button
+					slot="actions"
+					color=${this.data?.color || 'positive'}
+					look="primary"
+					label=${this.data?.confirmLabel || this.localize.term('general_submit')}
+					@click=${this.#handleConfirm}></uui-button>
 			</umb-body-layout>
 		`;
 	}
 
 	#renderCodeEditor() {
 		return html`
-			<umb-code-editor language=${ifDefined(this.data?.language)} .code=${this.data?.content ?? ''}></umb-code-editor>
+			<umb-code-editor
+				language=${ifDefined(this.data?.language)}
+				.code=${this.data?.content ?? ''}
+				@loaded=${this.#onLoaded}></umb-code-editor>
 		`;
 	}
 
@@ -63,6 +71,6 @@ export default UmbCodeEditorModalElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		[elementName]: UmbCodeEditorModalElement;
+		'umb-code-editor-modal': UmbCodeEditorModalElement;
 	}
 }