Merge branch 'main' into temp/16511

Author: nielslyngsoe

.github/RELEASE_INSTRUCTION.md

@@ -0,0 +1,31 @@
+# Bellissima release instructions
+
+
+## Build
+
+> _See internal documentation on the build/release workflow._
+
+
+## GitHub Release Notes
+
+To generate release notes on GitHub.
+
+- Go to the [**Releases** area](https://github.com/umbraco/Umbraco.CMS.Backoffice/releases)
+- Press the [**"Draft a new release"** button](https://github.com/umbraco/Umbraco.CMS.Backoffice/releases/new)
+- In the combobox for "Choose a tag", expand then select or enter the next version number, e.g. `v14.2.0`
+  - If the tag does not already exist, an option labelled "Create new tag: v14.2.0 on publish" will appear, select that option
+- In the combobox for "Target: main", expand then select the release branch for the next version, e.g. `release/14.2`
+- In the combobox for "Previous tag: auto":
+  - If the next release is an RC, then you can leave as `auto`
+  - Otherwise, select the previous stable version, e.g. `v14.1.1`
+- Press the **"Generate release notes"** button, this will populate the main textarea
+- Check the details, view in the "Preview" tab
+- What type of release is this?
+  - If it's an RC, then check "Set as a pre-release"
+  - If it's stable, then check "Set as the latest release"
+- Once you're happy with the contents and ready to save...
+  - If you need more time to review, press the **"Save draft"** button and you can come back to it later
+  - If you are ready to make the release notes public, then press **"Publish release"** button! :tada:
+
+> If you're curious about how the content is generated, take a look at the `release.yml` configuration: 
+> https://github.com/umbraco/Umbraco.CMS.Backoffice/blob/main/.github/release.yml

.github/release.yml

@@ -9,7 +9,7 @@ changelog:
   categories:
     - title: 🙌 Notable Changes
       labels:
-        - notable
+        - category/notable
     - title: 💥 Breaking Changes
       labels:
         - category/breaking

.github/workflows/azure-static-web-apps-ambitious-stone-0033b3603.yml

@@ -5,11 +5,13 @@ on:
     branches:
       - main
       - release/*
+      - v*/dev
   pull_request:
     types: [opened, synchronize, reopened, closed]
     branches:
       - main
       - release/*
+      - v*/dev
   workflow_dispatch:
     inputs:
       issue_number:

.github/workflows/build_test.yml

@@ -8,10 +8,12 @@ on:
     branches:
       - main
       - release/*
+      - v*/dev
   pull_request:
     branches:
       - main
       - release/*
+      - v*/dev
 
   # Allows GitHub to use this workflow to validate the merge queue
   merge_group:

.github/workflows/codeql.yml

@@ -16,10 +16,12 @@ on:
     branches:
       - main
       - release/*
+      - v*/dev
   pull_request:
     branches:
       - main
       - release/*
+      - v*/dev
   schedule:
     - cron: '33 2 * * 1'
 

.madgerc

@@ -0,0 +1,9 @@
+{
+	"tsConfig": "tsconfig.json",
+	"detectiveOptions": {
+		"ts": {
+			"skipTypeImports": true,
+			"skipAsyncImports": true
+		}
+	}
+}

.sonarlint/connectedMode.json

@@ -0,0 +1,4 @@
+{
+    "sonarCloudOrganization": "umbraco",
+    "projectKey": "umbraco_Umbraco.CMS.Backoffice"
+}

.vscode/settings.json

@@ -6,7 +6,9 @@
 		"combobox",
 		"ctrls",
 		"devs",
+		"Dropcursor",
 		"Elementable",
+		"Gapcursor",
 		"iframes",
 		"invariantable",
 		"lucide",
@@ -19,13 +21,20 @@
 		"svgs",
 		"templating",
 		"tinymce",
+		"tiptap",
 		"umbraco",
 		"Uncategorized",
 		"uninitialize",
+		"unprovide",
+		"unpublishing",
 		"variantable"
 	],
 	"exportall.config.folderListener": [],
 	"exportall.config.relExclusion": [],
 	"conventionalCommits.scopes": ["partial views"],
-	"typescript.tsdk": "node_modules/typescript/lib"
+	"typescript.tsdk": "node_modules/typescript/lib",
+	"sonarlint.connectedMode.project": {
+		"connectionId": "umbraco",
+		"projectKey": "umbraco_Umbraco.CMS.Backoffice"
+	}
 }

devops/icons/index.js

@@ -124,16 +124,14 @@ const collectDiskIcons = async (icons) => {
 	iconPaths.forEach((path) => {
 		const rawData = readFileSync(path);
 		const svg = rawData.toString();
-		const pattern = /\/([^/]+)\.svg$/;
+		const parsed = pathModule.parse(path);
 
-		const match = path.match(pattern);
-
-		if (!match) {
-			console.log('No match found.');
+		if (!parsed) {
+			console.log('No match found for: ', path);
 			return;
 		}
 
-		const SVGFileName = match[1];
+		const SVGFileName = parsed.name;
 		const iconFileName = SVGFileName.replace('.svg', '');
 		const iconName = iconFileName;
 

devops/json-schema-generator/index.js

@@ -0,0 +1,22 @@
+import { writeFileSync } from 'fs';
+import { createImportMap } from '../importmap/index.js';
+
+const tsPath = './src/json-schema/all-packages.ts';
+
+const importmap = createImportMap({
+	rootDir: './src',
+	replaceModuleExtensions: true,
+});
+
+const paths = Object.keys(importmap.imports);
+
+const content = `
+${
+	paths.map(path => `import '${path}';`).join('\n')
+}
+`;
+
+//const config = await resolveConfig('./.prettierrc.json');
+//const formattedContent = await format(content, { ...config, parser: 'json' });
+
+writeFileSync(tsPath, content);

devops/openapi-ts/openapi-ts.config.js

@@ -2,7 +2,7 @@ import { defineConfig } from '@hey-api/openapi-ts';
 
 export default defineConfig({
 	client: 'fetch',
-	input: 'https://raw.githubusercontent.com/umbraco/Umbraco-CMS/v14/dev/src/Umbraco.Cms.Api.Management/OpenApi.json',
+	input: 'https://raw.githubusercontent.com/umbraco/Umbraco-CMS/v15/dev/src/Umbraco.Cms.Api.Management/OpenApi.json',
 	output: {
 		path: 'src/external/backend-api/src',
 		format: 'prettier',

devops/tsconfig/index.js

@@ -18,6 +18,9 @@ DON'T EDIT THIS FILE DIRECTLY. It is generated by /devops/tsconfig/index.js
 const tsConfigBase = {
 	compilerOptions: {
 		module: 'esnext',
+		moduleResolution: 'bundler',
+		moduleDetection: 'force',
+		verbatimModuleSyntax: true,
 		target: 'es2022',
 		lib: ['es2022', 'dom', 'dom.iterable'],
 		outDir: './types',
@@ -29,8 +32,6 @@ const tsConfigBase = {
 		incremental: true,
 		skipLibCheck: true,
 		noImplicitOverride: true,
-		/* Bundler mode */
-		moduleResolution: 'bundler',
 		allowImportingTsExtensions: true,
 		resolveJsonModule: true,
 		isolatedModules: true,

eslint.config.js

@@ -6,13 +6,15 @@ import wcPlugin from 'eslint-plugin-wc';
 import litPlugin from 'eslint-plugin-lit';
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
 import tseslint from 'typescript-eslint';
+import jsdoc from 'eslint-plugin-jsdoc';
 
 export default [
 	// Recommended config applied to all files
 	js.configs.recommended,
 	...tseslint.configs.recommended,
 	wcPlugin.configs['flat/recommended'],
 	litPlugin.configs['flat/recommended'],
+	jsdoc.configs['flat/recommended'], // We use the non typescript version to allow types to be defined in the jsdoc comments. This will allow js docs as an alternative to typescript types.
 	localRules.configs.all,
 	eslintPluginPrettierRecommended,
 
@@ -46,7 +48,7 @@ export default [
 		},
 		rules: {
 			semi: ['warn', 'always'],
-			"prettier/prettier": ["warn", { "endOfLine": "auto" }],
+			'prettier/prettier': ['warn', { endOfLine: 'auto' }],
 			'no-unused-vars': 'off', //Let '@typescript-eslint/no-unused-vars' catch the errors to allow unused function parameters (ex: in interfaces)
 			'no-var': 'error',
 			...importPlugin.configs.recommended.rules,

examples/block-custom-view/README.md

@@ -0,0 +1,7 @@
+# Property Dataset Dashboard Example
+
+This example is a work in progress example of how to write a property editor.
+
+This example covers a few points:
+
+- Using an existing Property Editor Schema

examples/block-custom-view/block-custom-view.ts

@@ -0,0 +1,56 @@
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { html, customElement, LitElement, property, css } from '@umbraco-cms/backoffice/external/lit';
+import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
+import type { UmbBlockDataType } from '@umbraco-cms/backoffice/block';
+import type { UmbBlockEditorCustomViewElement } from '@umbraco-cms/backoffice/block-custom-view';
+
+// eslint-disable-next-line local-rules/enforce-umb-prefix-on-element-name
+@customElement('example-block-custom-view')
+// eslint-disable-next-line local-rules/umb-class-prefix
+export class ExampleBlockCustomView extends UmbElementMixin(LitElement) implements UmbBlockEditorCustomViewElement {
+	//
+	@property({ attribute: false })
+	content?: UmbBlockDataType;
+
+	@property({ attribute: false })
+	settings?: UmbBlockDataType;
+
+	override render() {
+		return html`
+			<div class="uui-text ${this.settings?.blockAlignment ? 'align-' + this.settings?.blockAlignment : undefined}">
+				<h5 class="uui-text">My Custom View</h5>
+				<p>Headline: ${this.content?.headline}</p>
+				<p>Alignment: ${this.settings?.blockAlignment}</p>
+			</div>
+		`;
+	}
+
+	static override styles = [
+		UmbTextStyles,
+		css`
+			:host {
+				display: block;
+				height: 100%;
+				box-sizing: border-box;
+				background-color: #dddddd;
+				border-radius: 9px;
+				padding: 12px;
+			}
+
+			.align-center {
+				text-align: center;
+			}
+			.align-right {
+				text-align: right;
+			}
+		`,
+	];
+}
+
+export default ExampleBlockCustomView;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'example-block-custom-view': ExampleBlockCustomView;
+	}
+}

examples/block-custom-view/index.ts

@@ -0,0 +1,10 @@
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'blockEditorCustomView',
+		alias: 'Umb.blockEditorCustomView.TestView',
+		name: 'Block Editor Custom View Test',
+		element: () => import('./block-custom-view.js'),
+		forContentTypeAlias: 'headlineUmbracoDemoBlock',
+		forBlockEditor: 'block-list',
+	},
+];

examples/dashboard-with-property-dataset/README.md

@@ -3,3 +3,8 @@
 This example demonstrates the essence of the Property Dataset.
 
 This dashboard implements such, to display a few selected Property Editors and bind the data back to the Dashboard.
+
+
+## SVG code of Icons
+
+Make sure to use currentColor for fill or stroke color, as that will make the icon adapt to the font color of where its begin used.

examples/dashboard-with-property-dataset/dataset-dashboard.ts

@@ -1,7 +1,7 @@
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { css, html, customElement, LitElement } from '@umbraco-cms/backoffice/external/lit';
 import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
-import { UmbPropertyValueData, type UmbPropertyDatasetElement } from '@umbraco-cms/backoffice/property';
+import { type UmbPropertyValueData, type UmbPropertyDatasetElement } from '@umbraco-cms/backoffice/property';
 
 @customElement('example-dataset-dashboard')
 export class ExampleDatasetDashboard extends UmbElementMixin(LitElement) {

examples/dashboard-with-property-dataset/index.ts

@@ -1,4 +1,4 @@
-import type { ManifestDashboard } from '@umbraco-cms/backoffice/extension-registry';
+import type { ManifestDashboard } from '@umbraco-cms/backoffice/dashboard';
 
 export const manifests: Array<ManifestDashboard> = [
 	{

examples/entity-content-type-condition/index.ts

@@ -0,0 +1,20 @@
+const workspace: UmbExtensionManifest = {
+	type: 'workspaceView',
+	alias: 'Example.WorkspaceView.EntityContentTypeCondition',
+	name: 'Example Workspace View With Entity Content Type Condition',
+	element: () => import('./workspace-view.element.js'),
+	meta: {
+		icon: 'icon-bus',
+		label: 'Conditional',
+		pathname: 'conditional',
+	},
+	conditions: [
+		{
+			alias: 'Umb.Condition.WorkspaceContentTypeAlias',
+			//match : 'blogPost'
+			oneOf: ['blogPost', 'mediaType1'],
+		},
+	],
+};
+
+export const manifests = [workspace];

examples/entity-content-type-condition/workspace-view.element.ts

@@ -0,0 +1,19 @@
+import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+
+@customElement('umb-example-entity-content-type-condition')
+export class UmbWorkspaceExampleViewElement extends UmbLitElement {
+	override render() {
+		return html`<p>
+			This is a conditional element that is only shown in workspaces based on it's entities content type.
+		</p>`;
+	}
+}
+
+export default UmbWorkspaceExampleViewElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-example-entity-content-type-condition': UmbWorkspaceExampleViewElement;
+	}
+}

examples/icons/README.md

@@ -0,0 +1,7 @@
+# Icons Example
+
+This example demonstrates how to registerer your own icons.
+
+Currently they have to be made as JavaScript files that exports an SVG string.
+
+Declared as part of a Icon Dictionary in a JavaScript file.

examples/icons/files/icon-heart.ts

@@ -0,0 +1,14 @@
+export default `<!-- @license lucide-static v0.424.0 - ISC -->
+<svg
+  class="lucide lucide-heart"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.75"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
+</svg>
+`;