diff --git a/src/Umbraco.Web.UI.Client/.github/README.md b/src/Umbraco.Web.UI.Client/.github/README.md
index c8ee810d64..d9f0f72c16 100644
--- a/src/Umbraco.Web.UI.Client/.github/README.md
+++ b/src/Umbraco.Web.UI.Client/.github/README.md
@@ -2,7 +2,9 @@
This is the working repository of the upcoming new Backoffice to Umbraco CMS.
+[](https://github.com/umbraco/Umbraco.CMS.Backoffice/actions/workflows/build_test.yml)
[](https://github.com/umbraco/Umbraco.CMS.Backoffice/actions/workflows/azure-static-web-apps-ambitious-stone-0033b3603.yml)
+[](https://sonarcloud.io/summary/new_code?id=umbraco_Umbraco.CMS.Backoffice)
## Installation instructions
diff --git a/src/Umbraco.Web.UI.Client/.github/localization_overview.md b/src/Umbraco.Web.UI.Client/.github/localization_overview.md
index 3277e268fa..f69d559fcd 100644
--- a/src/Umbraco.Web.UI.Client/.github/localization_overview.md
+++ b/src/Umbraco.Web.UI.Client/.github/localization_overview.md
@@ -75,7 +75,7 @@ Before you start:
- [ ] Section: Info
- [ ] Relation Types
- [ ] Log Viewer
-- [ ] Document Blueprints
+- [x] Document Blueprints
- [ ] Languages
- [ ] Extensions
- [ ] Templates
diff --git a/src/Umbraco.Web.UI.Client/.github/workflows/build_test.yml b/src/Umbraco.Web.UI.Client/.github/workflows/build_test.yml
index 7c5ee7ee44..b90c5f86d1 100644
--- a/src/Umbraco.Web.UI.Client/.github/workflows/build_test.yml
+++ b/src/Umbraco.Web.UI.Client/.github/workflows/build_test.yml
@@ -36,6 +36,7 @@ jobs:
- run: npm ci --no-audit --no-fund --prefer-offline
- run: npm run lint:errors
- run: npm run build:for:cms
+ - run: npm run check:paths
- run: npm run generate:jsonschema:dist
test:
diff --git a/src/Umbraco.Web.UI.Client/.vscode/settings.json b/src/Umbraco.Web.UI.Client/.vscode/settings.json
index d611a3d7d6..1f9ce773f9 100644
--- a/src/Umbraco.Web.UI.Client/.vscode/settings.json
+++ b/src/Umbraco.Web.UI.Client/.vscode/settings.json
@@ -27,5 +27,9 @@
"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"
+ }
}
diff --git a/src/Umbraco.Web.UI.Client/devops/build/check-path-length.js b/src/Umbraco.Web.UI.Client/devops/build/check-path-length.js
index e195c7e7c0..182964f3be 100644
--- a/src/Umbraco.Web.UI.Client/devops/build/check-path-length.js
+++ b/src/Umbraco.Web.UI.Client/devops/build/check-path-length.js
@@ -18,6 +18,28 @@ console.log('\n-----------------------------------');
console.log('Results:');
console.log('-----------------------------------\n');
+const hasError = checkPathLength(PROJECT_DIR);
+
+if (hasError) {
+ console.log('\n-----------------------------------');
+ console.log(ERROR_COLOR, 'Path length check failed');
+ console.log('-----------------------------------\n');
+ if (IS_CI && processExitCode) {
+ process.exit(processExitCode);
+ }
+} else {
+ console.log('\n-----------------------------------');
+ console.log(SUCCESS_COLOR, 'Path length check passed');
+ console.log('-----------------------------------\n');
+}
+
+// Functions
+
+/**
+ * Recursively check the path length of all files in a directory.
+ * @param {string} dir - The directory to check for path lengths
+ * @returns {boolean}
+ */
function checkPathLength(dir) {
const files = readdirSync(dir);
let hasError = false;
@@ -28,11 +50,11 @@ function checkPathLength(dir) {
hasError = true;
if (IS_AZURE_PIPELINES) {
- console.error(`##vso[task.logissue type=warning;sourcepath=${filePath};]Path exceeds maximum length of ${MAX_PATH_LENGTH} characters: ${filePath} with ${filePath.length} characters`);
+ console.error(`##vso[task.logissue type=error;sourcepath=${mapFileToSourcePath(filePath)};]Path exceeds maximum length of ${MAX_PATH_LENGTH} characters: ${filePath} with ${filePath.length} characters`);
} else if (IS_GITHUB_ACTIONS) {
- console.error(`::warning file=${filePath},title=Path exceeds ${MAX_PATH_LENGTH} characters::Paths should not be longer than ${MAX_PATH_LENGTH} characters to support WIN32 systems. The file ${filePath} exceeds that with ${filePath.length - MAX_PATH_LENGTH} characters.`);
+ console.error(`::error file=${mapFileToSourcePath(filePath)},title=Path exceeds ${MAX_PATH_LENGTH} characters::Paths should not be longer than ${MAX_PATH_LENGTH} characters to support WIN32 systems. The file ${filePath} exceeds that with ${filePath.length - MAX_PATH_LENGTH} characters.`);
} else {
- console.error(`Path exceeds maximum length of ${MAX_PATH_LENGTH} characters: ${FILE_PATH_COLOR}`, filePath, filePath.length - MAX_PATH_LENGTH);
+ console.error(FILE_PATH_COLOR, mapFileToSourcePath(filePath), '(exceeds by', filePath.length - MAX_PATH_LENGTH, 'chars)');
}
}
@@ -47,17 +69,12 @@ function checkPathLength(dir) {
return hasError;
}
-const hasError = checkPathLength(PROJECT_DIR, MAX_PATH_LENGTH);
-
-if (hasError) {
- console.error('\n-----------------------------------');
- console.error(ERROR_COLOR, 'Path length check failed');
- console.error('-----------------------------------\n');
- if (IS_CI && processExitCode) {
- process.exit(processExitCode);
- }
-} else {
- console.log('\n-----------------------------------');
- console.log(SUCCESS_COLOR, 'Path length check passed');
- console.log('-----------------------------------\n');
+/**
+ * Maps a file path to a source path for CI logs.
+ * @remark This might not always work as expected, especially on bundled files, but it's a best effort to map the file path to a source path.
+ * @param {string} file - The file path to map to a source path
+ * @returns {string}
+ */
+function mapFileToSourcePath(file) {
+ return file.replace(PROJECT_DIR, 'src').replace('.js', '.ts');
}
diff --git a/src/Umbraco.Web.UI.Client/devops/eslint/rules/no-direct-api-import.cjs b/src/Umbraco.Web.UI.Client/devops/eslint/rules/no-direct-api-import.cjs
index b051ad64fa..9f3a3912dc 100644
--- a/src/Umbraco.Web.UI.Client/devops/eslint/rules/no-direct-api-import.cjs
+++ b/src/Umbraco.Web.UI.Client/devops/eslint/rules/no-direct-api-import.cjs
@@ -1,3 +1,4 @@
+/** @type {import('eslint').Rule.RuleModule} */
module.exports = {
meta: {
docs: {
diff --git a/src/Umbraco.Web.UI.Client/eslint.config.js b/src/Umbraco.Web.UI.Client/eslint.config.js
index eaa0ded53d..498884d147 100644
--- a/src/Umbraco.Web.UI.Client/eslint.config.js
+++ b/src/Umbraco.Web.UI.Client/eslint.config.js
@@ -1,11 +1,9 @@
-import js from "@eslint/js";
-import globals from "globals";
-import importPlugin from "eslint-plugin-import";
-import localRules from "eslint-plugin-local-rules";
-import wcPlugin from "eslint-plugin-wc";
-import litPlugin from "eslint-plugin-lit";
-import litA11yPlugin from "eslint-plugin-lit-a11y";
-import storybookPlugin from "eslint-plugin-storybook";
+import js from '@eslint/js';
+import globals from 'globals';
+import importPlugin from 'eslint-plugin-import';
+import localRules from 'eslint-plugin-local-rules';
+import wcPlugin from 'eslint-plugin-wc';
+import litPlugin from 'eslint-plugin-lit';
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
import tseslint from 'typescript-eslint';
@@ -13,16 +11,21 @@ export default [
// Recommended config applied to all files
js.configs.recommended,
...tseslint.configs.recommended,
+ wcPlugin.configs['flat/recommended'],
+ litPlugin.configs['flat/recommended'],
+ localRules.configs.all,
eslintPluginPrettierRecommended,
// Global ignores
{
ignores: [
- "**/rollup.config.js",
- "**/vite.config.ts",
- "src/external",
- "src/packages/core/icon-registry/icons",
- "src/packages/core/icon-registry/icons.ts"
+ '**/eslint.config.js',
+ '**/rollup.config.js',
+ '**/vite.config.ts',
+ 'src/external',
+ 'src/packages/core/icon-registry/icons',
+ 'src/packages/core/icon-registry/icons.ts',
+ 'src/**/*.test.ts',
],
},
@@ -35,52 +38,45 @@ export default [
},
globals: {
...globals.browser,
- }
+ },
},
plugins: {
import: importPlugin,
- "local-rules": localRules,
- "wc": wcPlugin,
- "lit": litPlugin,
- "lit-a11y": litA11yPlugin,
- "storybook": storybookPlugin
+ 'local-rules': localRules,
},
rules: {
- semi: ["warn", "always"],
- "no-unused-vars": "warn",
- "no-var": "error",
- "import/no-unresolved": "off",
- "import/order": ["warn", { "groups": ["builtin", "parent", "sibling", "index", "external"] }],
- "import/no-self-import": "error",
- "import/no-cycle": ["error", { "maxDepth": 6, "allowUnsafeDynamicCyclicDependency": true }],
- "local-rules/bad-type-import": "error",
- "local-rules/enforce-element-suffix-on-element-class-name": "error",
- "local-rules/enforce-umb-prefix-on-element-name": "error",
- "local-rules/ensure-relative-import-use-js-extension": "error",
- "local-rules/no-direct-api-import": "warn",
- "local-rules/prefer-import-aliases": "error",
- "local-rules/prefer-static-styles-last": "warn",
- "local-rules/umb-class-prefix": "error",
- "local-rules/no-relative-import-to-import-map-module": "error",
- "local-rules/enforce-umbraco-external-imports": [
- "error",
+ semi: ['warn', 'always'],
+ "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,
+ 'import/namespace': 'off',
+ 'import/no-unresolved': 'off',
+ 'import/order': ['warn', { groups: ['builtin', 'parent', 'sibling', 'index', 'external'] }],
+ 'import/no-self-import': 'error',
+ 'import/no-cycle': ['error', { maxDepth: 6, allowUnsafeDynamicCyclicDependency: true }],
+ 'import/no-named-as-default': 'off', // Does not work with eslint 9
+ 'import/no-named-as-default-member': 'off', // Does not work with eslint 9
+ 'local-rules/prefer-static-styles-last': 'warn',
+ 'local-rules/enforce-umbraco-external-imports': [
+ 'error',
{
- "exceptions": ["@umbraco-cms", "@open-wc/testing", "@storybook", "msw", ".", "vite"]
- }
+ exceptions: ['@umbraco-cms', '@open-wc/testing', '@storybook', 'msw', '.', 'vite'],
+ },
],
- "local-rules/exported-string-constant-naming": [
- "error",
+ 'local-rules/exported-string-constant-naming': [
+ 'error',
{
- "excludedFileNames": ["umbraco-package", "input-tiny-mce.defaults"] // TODO: what to do about the tiny mce defaults?
- }
+ excludedFileNames: ['umbraco-package', 'input-tiny-mce.defaults'], // TODO: what to do about the tiny mce defaults?
+ },
],
- "@typescript-eslint/no-non-null-assertion": "off",
- "@typescript-eslint/no-explicit-any": "warn",
- "@typescript-eslint/no-unused-vars": "warn",
- "@typescript-eslint/consistent-type-exports": "error",
- "@typescript-eslint/consistent-type-imports": "error",
- "@typescript-eslint/no-import-type-side-effects": "warn"
- }
+ '@typescript-eslint/no-non-null-assertion': 'off',
+ '@typescript-eslint/no-explicit-any': 'warn',
+ '@typescript-eslint/no-unused-vars': 'error',
+ '@typescript-eslint/consistent-type-exports': 'error',
+ '@typescript-eslint/consistent-type-imports': 'error',
+ '@typescript-eslint/no-import-type-side-effects': 'warn',
+ },
},
// Pattern-specific overrides
@@ -90,7 +86,7 @@ export default [
languageOptions: {
globals: {
...globals.node,
- }
- }
+ },
+ },
},
];
diff --git a/src/Umbraco.Web.UI.Client/index.html b/src/Umbraco.Web.UI.Client/index.html
index 94d6a2ed4d..b92c54f0d6 100644
--- a/src/Umbraco.Web.UI.Client/index.html
+++ b/src/Umbraco.Web.UI.Client/index.html
@@ -7,7 +7,6 @@
Umbraco
- %0% ',
+ createBlueprintFrom: "Opret en ny indholdsskabelon fra '%0%'",
+ createBlueprintItemUnder: "Opret en ny indholdsskabelon under '%0%'",
+ createBlueprintFolderUnder: "Opret en ny mappe under '%0%'",
blankBlueprint: 'Blank',
selectBlueprint: 'Vælg en indholdsskabelon',
createdBlueprintHeading: 'Indholdsskabelon oprettet',
@@ -1861,6 +1863,8 @@ export default {
lastLogin: 'Seneste login',
lastPasswordChangeDate: 'Kodeord sidst ændret',
loginname: 'Brugernavn',
+ loginnameRequired: 'Påkrævet - indtast et brugernavn for denne bruger',
+ loginnameDescription: 'Brugernavnet bruges til at logge ind og til at identificere brugeren',
mediastartnode: 'Startnode i mediearkivet',
mediastartnodehelp: 'Begræns mediebiblioteket til en bestemt startnode',
mediastartnodes: 'Medie startnoder',
@@ -1963,7 +1967,12 @@ export default {
'2faCodeInput': 'Indtast din verifikationskode',
'2faCodeInputHelp': 'Indtast din verifikationskode fra din autentificeringsapp',
'2faInvalidCode': 'Den indtastede kode er ugyldig',
- emailRequired: 'Required - enter an email address for this user',
+ emailRequired: 'Påkrævet - indtast en emailadresse for denne bruger',
+ emailDescription: (usernameIsEmail: boolean) => {
+ return usernameIsEmail
+ ? 'Emailadressen bruges som brugernavn og til notifikationer og adgangskode gendannelse'
+ : 'Emailadressen bruges til notifikationer og adgangskode gendannelse';
+ },
duplicateLogin: 'A user with this login already exists',
nameRequired: 'Required - enter a name for this user',
passwordRequiresDigit: "The password must have at least one digit ('0'-'9')",
@@ -2102,7 +2111,7 @@ export default {
protectDescription: 'Opsæt offentlig adgang på %0%',
rightsDescription: 'Opsæt rettigheder på %0%',
sortDescription: 'Juster soterings rækkefølgen for %0%',
- createblueprintDescription: 'Opret indholds skabelon baseret på %0%',
+ createblueprintDescription: 'Opret indholdsskabelon baseret på %0%',
openContextMenu: 'Åben kontext menu for',
currentLanguage: 'Aktivt sprog',
switchLanguage: 'Skift sprog til',
@@ -2230,7 +2239,7 @@ export default {
addCustomStylesheet: 'Tilføj stylesheet',
headlineEditorAppearance: 'Redigerings udseende',
headlineDataModels: 'Data modeller',
- headlineCatalogueAppearance: 'katalog udseende',
+ headlineCatalogueAppearance: 'Katalog udseende',
labelBackgroundColor: 'Baggrunds farve',
labelIconColor: 'Ikon farve',
labelContentElementType: 'Indholds model',
@@ -2261,8 +2270,8 @@ export default {
headlineAdvanced: 'Avanceret',
forceHideContentEditor: 'Skjul indholdseditoren',
forceHideContentEditorHelp: 'Skjul indholds redigerings knappen samt indholdseditoren i Blok Redigerings vinduet',
- girdInlineEditing: 'Direkte redigering',
- girdInlineEditingHelp:
+ gridInlineEditing: 'Direkte redigering',
+ gridInlineEditingHelp:
'Tilføjer direkte redigering a det første felt. Yderligere felter optræder kun i redigerings vinduet.',
blockHasChanges: 'Du har lavet ændringer til dette indhold. Er du sikker på at du vil kassere dem?',
confirmCancelBlockCreationHeadline: 'Annuller oprettelse?',
@@ -2525,4 +2534,18 @@ export default {
routeNotFoundTitle: 'Ikke fundet',
routeNotFoundDescription: 'Den side du leder efter kunne ikke findes. Kontroller adressen og prøv igen.',
},
+ codeEditor: {
+ label: 'Code editor',
+ languageConfigLabel: 'Sprog',
+ languageConfigDescription: 'Vælg sprog til syntax highlighting og IntelliSense.',
+ heightConfigLabel: 'Højde',
+ heightConfigDescription: 'Indstil højden på editorvinduet i pixels.',
+ lineNumbersConfigLabel: 'Linjenumre',
+ lineNumbersConfigDescription: 'Vis linjenumre i editorvinduet.',
+ minimapConfigLabel: 'Minimap',
+ minimapConfigDescription: 'Vis en minimap i editorvinduet.',
+ wordWrapConfigLabel: 'Ordbrydning',
+ wordWrapConfigDescription:
+ 'Slå ordbrydning til eller fra, så tekst automatisk brydes ved vinduets kant i stedet for at skabe en horisontal scrollbar.',
+ },
} as UmbLocalizationDictionary;
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts
index 020b2f5683..c74158ac83 100644
--- a/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts
+++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts
@@ -335,7 +335,9 @@ export default {
variantUnpublishNotAllowed: 'Unpublish is not allowed',
},
blueprints: {
- createBlueprintFrom: 'Create a new Document Blueprint from %0% ',
+ createBlueprintFrom: "Create a new Document Blueprint from '%0%'",
+ createBlueprintItemUnder: "Create a new item under '%0%'",
+ createBlueprintFolderUnder: "Create a new folder under '%0%'",
blankBlueprint: 'Blank',
selectBlueprint: 'Select a Document Blueprint',
createdBlueprintHeading: 'Document Blueprint created',
@@ -384,7 +386,7 @@ export default {
create: {
chooseNode: 'Where do you want to create the new %0%',
createUnder: 'Create an item under',
- createContentBlueprint: 'Select the Document Type you want to make a content blueprint for',
+ createContentBlueprint: 'Select the Document Type you want to make a Document Blueprint for',
enterFolderName: 'Enter a folder name',
updateData: 'Choose a type and a title',
noDocumentTypes:
@@ -1372,7 +1374,7 @@ export default {
editMultiContentPublishedText: '%0% documents published and visible on the website',
editVariantPublishedText: '%0% published and visible on the website',
editMultiVariantPublishedText: '%0% documents published for languages %1% and visible on the website',
- editBlueprintSavedHeader: 'Content Blueprint saved',
+ editBlueprintSavedHeader: 'Document Blueprint saved',
editBlueprintSavedText: 'Changes have been successfully saved',
editContentSavedHeader: 'Content saved',
editContentSavedText: 'Remember to publish to make changes visible',
@@ -1785,7 +1787,7 @@ export default {
},
treeHeaders: {
content: 'Content',
- contentBlueprints: 'Content Blueprints',
+ contentBlueprints: 'Document Blueprints',
media: 'Media',
cacheBrowser: 'Cache Browser',
contentRecycleBin: 'Recycle Bin',
@@ -1841,6 +1843,11 @@ export default {
changePhoto: 'Change photo',
configureMfa: 'Configure MFA',
emailRequired: 'Required - enter an email address for this user',
+ emailDescription: (usernameIsEmail: boolean) => {
+ return usernameIsEmail
+ ? 'The email address is used for notifications, password recovery, and as the username for logging in'
+ : 'The email address is used for notifications and password recovery';
+ },
newPassword: 'New password',
newPasswordFormatLengthTip: 'Minimum %0% character(s) to go!',
newPasswordFormatNonAlphaTip: 'There should be at least %0% special character(s) in there.',
@@ -1872,6 +1879,8 @@ export default {
lastLogin: 'Last login',
lastPasswordChangeDate: 'Password last changed',
loginname: 'Username',
+ loginnameRequired: 'Required - enter a username for this user',
+ loginnameDescription: 'The username is used for logging in',
mediastartnode: 'Media start node',
mediastartnodehelp: 'Limit the media library to a specific start node',
mediastartnodes: 'Media start nodes',
@@ -2170,7 +2179,7 @@ export default {
protectDescription: 'Setup access restrictions on %0%',
rightsDescription: 'Setup Permissions on %0%',
sortDescription: 'Change sort order for %0%',
- createblueprintDescription: 'Create Content Blueprint based on %0%',
+ createblueprintDescription: 'Create Document Blueprint based on %0%',
openContextMenu: 'Open context menu for',
currentLanguage: 'Current language',
switchLanguage: 'Switch language to',
@@ -2396,8 +2405,8 @@ export default {
headlineAdvanced: 'Advanced',
forceHideContentEditor: 'Hide content editor',
forceHideContentEditorHelp: 'Hide the content edit button and the content editor from the Block Editor overlay',
- girdInlineEditing: 'Inline editing',
- girdInlineEditingHelp:
+ gridInlineEditing: 'Inline editing',
+ gridInlineEditingHelp:
'Enables inline editing for the first Property. Additional properties can be edited in the overlay.',
blockHasChanges: 'You have made changes to this content. Are you sure you want to discard them?',
confirmCancelBlockCreationHeadline: 'Discard creation?',
@@ -2476,15 +2485,15 @@ export default {
addColumnSpanOption: 'Add spanning %0% columns option',
},
contentTemplatesDashboard: {
- whatHeadline: 'What are Content Blueprints?',
+ whatHeadline: 'What are Document Blueprints?',
whatDescription:
- 'Content Blueprints are pre-defined content that can be selected when creating a new content node.',
- createHeadline: 'How do I create a Content Blueprint?',
+ 'Document Blueprints are pre-defined content that can be selected when creating a new content node.',
+ createHeadline: 'How do I create a Document Blueprint?',
createDescription:
- 'There are two ways to create a Content Blueprint:
Right-click a content node and select "Create Content Blueprint" to create a new Content Blueprint. Right-click the Content Blueprints tree in the Settings section and select the Document Type you want to create a Content Blueprint for. Once given a name, editors can start using the Content Blueprint as a foundation for their new page.
',
- manageHeadline: 'How do I manage Content Blueprints?',
+ 'There are two ways to create a Document Blueprint:
Right-click a content node and select "Create Document Blueprint" to create a new Document Blueprint. Right-click the Document Blueprints tree in the Settings section and select the Document Type you want to create a Document Blueprint for. Once given a name, editors can start using the Document Blueprint as a foundation for their new page.
',
+ manageHeadline: 'How do I manage Document Blueprints?',
manageDescription:
- 'You can edit and delete Content Blueprints from the "Content Blueprints" tree in the Settings section. Expand the Document Type which the Content Blueprint is based on and click it to edit or delete it.',
+ 'You can edit and delete Document Blueprints from the "Document Blueprints" tree in the Settings section. Expand the Document Type which the Document Blueprint is based on and click it to edit or delete it.',
},
preview: {
endLabel: 'End',
@@ -2526,4 +2535,17 @@ export default {
routeNotFoundTitle: 'Not found',
routeNotFoundDescription: 'The requested route could not be found. Please check the URL and try again.',
},
+ codeEditor: {
+ label: 'Code editor',
+ languageConfigLabel: 'Language',
+ languageConfigDescription: 'Select the language for syntax highlighting and IntelliSense.',
+ heightConfigLabel: 'Height',
+ heightConfigDescription: 'Set the height of the code editor in pixels.',
+ lineNumbersConfigLabel: 'Line numbers',
+ lineNumbersConfigDescription: 'Show line numbers in the code editor.',
+ minimapConfigLabel: 'Minimap',
+ minimapConfigDescription: 'Show a minimap in the code editor.',
+ wordWrapConfigLabel: 'Word wrap',
+ wordWrapConfigDescription: 'Enable word wrapping in the code editor.',
+ },
} as UmbLocalizationDictionary;
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts
index 52d3d86a1a..0aca405fba 100644
--- a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts
+++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts
@@ -95,7 +95,7 @@ export default {
sort: 'Allow access to change the sort order for nodes',
translate: 'Allow access to translate a node',
update: 'Allow access to save a node',
- createblueprint: 'Allow access to create a Content Template',
+ createblueprint: 'Allow access to create a Document Blueprint',
notify: 'Allow access to setup notifications for content nodes',
},
apps: {
@@ -343,14 +343,16 @@ export default {
selectAllVariants: 'Select all variants',
},
blueprints: {
- createBlueprintFrom: 'Create a new Content Template from %0% ',
+ createBlueprintFrom: "Create a new Document Blueprint from '%0%'",
+ createBlueprintItemUnder: "Create a new item under '%0%'",
+ createBlueprintFolderUnder: "Create a new folder under '%0%'",
blankBlueprint: 'Blank',
- selectBlueprint: 'Select a Content Template',
- createdBlueprintHeading: 'Content Template created',
- createdBlueprintMessage: "A Content Template was created from '%0%'",
- duplicateBlueprintMessage: 'Another Content Template with the same name already exists',
+ selectBlueprint: 'Select a Document Blueprint',
+ createdBlueprintHeading: 'Document Blueprint created',
+ createdBlueprintMessage: "A Document Blueprint was created from '%0%'",
+ duplicateBlueprintMessage: 'Another Document Blueprint with the same name already exists',
blueprintDescription:
- 'A Content Template is predefined content that an editor can select to use as the\n basis for creating new content\n ',
+ 'A Document Blueprint is predefined content that an editor can select to use as the\n basis for creating new content\n ',
},
media: {
clickToUpload: 'Click to upload',
@@ -393,7 +395,7 @@ export default {
create: {
chooseNode: 'Where do you want to create the new %0%',
createUnder: 'Create an item under',
- createContentBlueprint: 'Select the Document Type you want to make a content template for',
+ createContentBlueprint: 'Select the Document Type you want to make a Document Blueprint for',
enterFolderName: 'Enter a folder name',
updateData: 'Choose a type and a title',
noDocumentTypes:
@@ -1389,7 +1391,7 @@ export default {
editContentPublishedFailedByParent: 'Content could not be published, because a parent page is not published',
editContentPublishedHeader: 'Content published',
editContentPublishedText: 'and visible on the website',
- editBlueprintSavedHeader: 'Content Template saved',
+ editBlueprintSavedHeader: 'Document Blueprint saved',
editBlueprintSavedText: 'Changes have been successfully saved',
editContentSavedHeader: 'Content saved',
editContentSavedText: 'Remember to publish to make changes visible',
@@ -1836,7 +1838,7 @@ export default {
},
treeHeaders: {
content: 'Content',
- contentBlueprints: 'Content Templates',
+ contentBlueprints: 'Document Blueprints',
media: 'Media',
cacheBrowser: 'Cache Browser',
contentRecycleBin: 'Recycle Bin',
@@ -1875,6 +1877,8 @@ export default {
settingsGroup: 'Settings',
templatingGroup: 'Templating',
thirdPartyGroup: 'Third Party',
+ structureGroup: 'Structure',
+ advancedGroup: 'Advanced',
webhooks: 'Webhooks',
},
update: {
@@ -1894,6 +1898,11 @@ export default {
changePhoto: 'Change photo',
configureMfa: 'Configure MFA',
emailRequired: 'Required - enter an email address for this user',
+ emailDescription: (usernameIsEmail: boolean) => {
+ return usernameIsEmail
+ ? 'The email address is used for notifications, password recovery, and as the username for logging in'
+ : 'The email address is used for notifications and password recovery';
+ },
newPassword: 'New password',
newPasswordFormatLengthTip: 'Minimum %0% character(s) to go!',
newPasswordFormatNonAlphaTip: 'There should be at least %0% special character(s) in there.',
@@ -1925,6 +1934,8 @@ export default {
lastLogin: 'Last login',
lastPasswordChangeDate: 'Password last changed',
loginname: 'Username',
+ loginnameRequired: 'Required - enter a username for this user',
+ loginnameDescription: 'The username is used for logging in',
mediastartnode: 'Media start node',
mediastartnodehelp: 'Limit the media library to a specific start node',
mediastartnodes: 'Media start nodes',
@@ -2227,7 +2238,7 @@ export default {
protectDescription: 'Setup access restrictions on %0%',
rightsDescription: 'Setup Permissions on %0%',
sortDescription: 'Change sort order for %0%',
- createblueprintDescription: 'Create Content Template based on %0%',
+ createblueprintDescription: 'Create Document Blueprint based on %0%',
openContextMenu: 'Open context menu for',
currentLanguage: 'Current language',
switchLanguage: 'Switch language to',
@@ -2459,8 +2470,8 @@ export default {
headlineAdvanced: 'Advanced',
forceHideContentEditor: 'Hide content editor',
forceHideContentEditorHelp: 'Hide the content edit button and the content editor from the Block Editor overlay.',
- girdInlineEditing: 'Inline editing',
- girdInlineEditingHelp:
+ gridInlineEditing: 'Inline editing',
+ gridInlineEditingHelp:
'Enables inline editing for the first Property. Additional properties can be edited in the overlay.',
blockHasChanges: 'You have made changes to this content. Are you sure you want to discard them?',
confirmCancelBlockCreationHeadline: 'Discard creation?',
@@ -2541,15 +2552,15 @@ export default {
labelInlineMode: 'Display inline with text',
},
contentTemplatesDashboard: {
- whatHeadline: 'What are Content Templates?',
+ whatHeadline: 'What are Document Blueprints?',
whatDescription:
- 'Content Templates are pre-defined content that can be selected when creating a new\n content node.\n ',
- createHeadline: 'How do I create a Content Template?',
+ 'Document Blueprints are pre-defined content that can be selected when creating a new\n content node.\n ',
+ createHeadline: 'How do I create a Document Blueprint?',
createDescription:
- '\n There are two ways to create a Content Template:
\n \n Right-click a content node and select "Create Content Template" to create a new Content Template. \n Right-click the Content Templates tree in the Settings section and select the Document Type you want to create a Content Template for. \n \n Once given a name, editors can start using the Content Template as a foundation for their new page.
\n ',
- manageHeadline: 'How do I manage Content Templates?',
+ '\n There are two ways to create a Document Blueprint:
\n \n Right-click a content node and select "Create Document Blueprint" to create a new Document Blueprint. \n Right-click the Document Blueprints tree in the Settings section and select the Document Type you want to create a Document Blueprint for. \n \n Once given a name, editors can start using the Document Blueprint as a foundation for their new page.
\n ',
+ manageHeadline: 'How do I manage Document Blueprints?',
manageDescription:
- 'You can edit and delete Content Templates from the "Content Templates" tree in the\n Settings section. Expand the Document Type which the Content Template is based on and click it to edit or delete\n it.\n ',
+ 'You can edit and delete Document Blueprints from the "Document Blueprints" tree in the\n Settings section. Expand the Document Type which the Document Blueprint is based on and click it to edit or delete\n it.\n ',
},
preview: {
endLabel: 'End',
@@ -2595,4 +2606,17 @@ export default {
routeNotFoundTitle: 'Not found',
routeNotFoundDescription: 'The requested route could not be found. Please check the URL and try again.',
},
+ codeEditor: {
+ label: 'Code editor',
+ languageConfigLabel: 'Language',
+ languageConfigDescription: 'Select the language for syntax highlighting and IntelliSense.',
+ heightConfigLabel: 'Height',
+ heightConfigDescription: 'Set the height of the code editor in pixels.',
+ lineNumbersConfigLabel: 'Line numbers',
+ lineNumbersConfigDescription: 'Show line numbers in the code editor.',
+ minimapConfigLabel: 'Minimap',
+ minimapConfigDescription: 'Show a minimap in the code editor.',
+ wordWrapConfigLabel: 'Word wrap',
+ wordWrapConfigDescription: 'Enable word wrapping in the code editor.',
+ },
} as UmbLocalizationDictionary;
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/es-es.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/es-es.ts
index 5903b96f02..b51465d40b 100644
--- a/src/Umbraco.Web.UI.Client/src/assets/lang/es-es.ts
+++ b/src/Umbraco.Web.UI.Client/src/assets/lang/es-es.ts
@@ -751,9 +751,13 @@ export default {
notifications: 'Notificaciones',
},
packager: {
+ actions: 'Acciones',
+ created: 'Creada',
+ createPackage: 'Crear paquete',
chooseLocalPackageText:
'Elige un paquete de tu máquina, seleccionando el botón Examinar {
+ return __request(OpenAPI, {
+ method: 'GET',
+ url: '/umbraco/management/api/v1/media-type/configuration',
+ errors: {
+ 401: 'The resource is protected and requires an authentication token',
+ 403: 'The authenticated user do not have access to this resource'
+ }
+ });
+ }
+
/**
* @param data The data for the request.
* @param data.requestBody
@@ -4929,6 +4944,21 @@ export class MemberTypeService {
});
}
+ /**
+ * @returns unknown OK
+ * @throws ApiError
+ */
+ public static getMemberTypeConfiguration(): CancelablePromise {
+ return __request(OpenAPI, {
+ method: 'GET',
+ url: '/umbraco/management/api/v1/member-type/configuration',
+ errors: {
+ 401: 'The resource is protected and requires an authentication token',
+ 403: 'The authenticated user do not have access to this resource'
+ }
+ });
+ }
+
/**
* @param data The data for the request.
* @param data.skip
diff --git a/src/Umbraco.Web.UI.Client/src/external/backend-api/src/types.gen.ts b/src/Umbraco.Web.UI.Client/src/external/backend-api/src/types.gen.ts
index 12f84d2636..2d29b8b87e 100644
--- a/src/Umbraco.Web.UI.Client/src/external/backend-api/src/types.gen.ts
+++ b/src/Umbraco.Web.UI.Client/src/external/backend-api/src/types.gen.ts
@@ -438,6 +438,9 @@ export type CultureReponseModel = {
export type CurrenUserConfigurationResponseModel = {
keepUserLoggedIn: boolean;
+ /**
+ * @deprecated
+ */
usernameIsEmail: boolean;
passwordConfiguration: PasswordConfigurationResponseModel;
};
@@ -633,6 +636,9 @@ export type DocumentConfigurationResponseModel = {
disableUnpublishWhenReferenced: boolean;
allowEditInvariantFromNonDefault: boolean;
allowNonExistingSegmentsCreation: boolean;
+ /**
+ * @deprecated
+ */
reservedFieldNames: Array<(string)>;
};
@@ -730,6 +736,7 @@ export type DocumentTypeConfigurationResponseModel = {
dataTypesCanBeChanged: DataTypeChangeModeModel;
disableTemplates: boolean;
useSegments: boolean;
+ reservedFieldNames: Array<(string)>;
};
export type DocumentTypeItemResponseModel = {
@@ -1153,6 +1160,9 @@ export type MediaCollectionResponseModel = {
export type MediaConfigurationResponseModel = {
disableDeleteWhenReferenced: boolean;
disableUnpublishWhenReferenced: boolean;
+ /**
+ * @deprecated
+ */
reservedFieldNames: Array<(string)>;
};
@@ -1219,6 +1229,10 @@ export type MediaTypeCompositionResponseModel = {
icon: string;
};
+export type MediaTypeConfigurationResponseModel = {
+ reservedFieldNames: Array<(string)>;
+};
+
export type MediaTypeItemResponseModel = {
id: string;
name: string;
@@ -1319,6 +1333,9 @@ export type MediaVariantResponseModel = {
};
export type MemberConfigurationResponseModel = {
+ /**
+ * @deprecated
+ */
reservedFieldNames: Array<(string)>;
};
@@ -1372,6 +1389,10 @@ export type MemberTypeCompositionResponseModel = {
icon: string;
};
+export type MemberTypeConfigurationResponseModel = {
+ reservedFieldNames: Array<(string)>;
+};
+
export type MemberTypeItemResponseModel = {
id: string;
name: string;
@@ -2597,6 +2618,7 @@ export type UpgradeSettingsResponseModel = {
export type UserConfigurationResponseModel = {
canInviteUsers: boolean;
+ usernameIsEmail: boolean;
passwordConfiguration: PasswordConfigurationResponseModel;
};
@@ -3850,6 +3872,8 @@ export type PostMediaTypeAvailableCompositionsData = {
export type PostMediaTypeAvailableCompositionsResponse = Array<(AvailableMediaTypeCompositionResponseModel)>;
+export type GetMediaTypeConfigurationResponse = MediaTypeConfigurationResponseModel;
+
export type PostMediaTypeFolderData = {
requestBody?: CreateFolderRequestModel;
};
@@ -4190,6 +4214,8 @@ export type PostMemberTypeAvailableCompositionsData = {
export type PostMemberTypeAvailableCompositionsResponse = Array<(AvailableMemberTypeCompositionResponseModel)>;
+export type GetMemberTypeConfigurationResponse = MemberTypeConfigurationResponseModel;
+
export type GetTreeMemberTypeRootData = {
skip?: number;
take?: number;
@@ -8784,6 +8810,24 @@ export type $OpenApiTs = {
};
};
};
+ '/umbraco/management/api/v1/media-type/configuration': {
+ get: {
+ res: {
+ /**
+ * OK
+ */
+ 200: MediaTypeConfigurationResponseModel;
+ /**
+ * The resource is protected and requires an authentication token
+ */
+ 401: unknown;
+ /**
+ * The authenticated user do not have access to this resource
+ */
+ 403: unknown;
+ };
+ };
+ };
'/umbraco/management/api/v1/media-type/folder': {
post: {
req: PostMediaTypeFolderData;
@@ -9913,6 +9957,24 @@ export type $OpenApiTs = {
};
};
};
+ '/umbraco/management/api/v1/member-type/configuration': {
+ get: {
+ res: {
+ /**
+ * OK
+ */
+ 200: MemberTypeConfigurationResponseModel;
+ /**
+ * The resource is protected and requires an authentication token
+ */
+ 401: unknown;
+ /**
+ * The authenticated user do not have access to this resource
+ */
+ 403: unknown;
+ };
+ };
+ };
'/umbraco/management/api/v1/tree/member-type/root': {
get: {
req: GetTreeMemberTypeRootData;
diff --git a/src/Umbraco.Web.UI.Client/src/external/monaco-editor/index.ts b/src/Umbraco.Web.UI.Client/src/external/monaco-editor/index.ts
index ca2e3b1a7c..ecb84ae91a 100644
--- a/src/Umbraco.Web.UI.Client/src/external/monaco-editor/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/external/monaco-editor/index.ts
@@ -13,20 +13,6 @@ import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker.js?worker
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker.js?worker';
/* eslint-enable */
-import { css, unsafeCSS } from '@umbraco-cms/backoffice/external/lit';
-
-export const monacoEditorStyles = css`
- ${unsafeCSS(styles)}
-`;
-
-export const monacoJumpingCursorHack = css`
- /* a hacky workaround this issue: https://github.com/microsoft/monaco-editor/issues/3217
- should probably be removed when the issue is fixed */
- .view-lines {
- font-feature-settings: revert !important;
- }
-`;
-
const initializeWorkers = () => {
self.MonacoEnvironment = {
getWorker(workerId: string, label: string): Promise | Worker {
@@ -50,3 +36,4 @@ const initializeWorkers = () => {
initializeWorkers();
export * as monaco from 'monaco-editor';
+export { styles };
diff --git a/src/Umbraco.Web.UI.Client/src/external/router-slot/router-slot.ts b/src/Umbraco.Web.UI.Client/src/external/router-slot/router-slot.ts
index 1a2bec962f..14e6f7a1b5 100644
--- a/src/Umbraco.Web.UI.Client/src/external/router-slot/router-slot.ts
+++ b/src/Umbraco.Web.UI.Client/src/external/router-slot/router-slot.ts
@@ -48,7 +48,7 @@ export class RouterSlot extends HTMLElement implements IRouter
/**
* Method to cancel navigation if changed.
*/
- private _cancelNavigation ?:() => void;
+ private _cancelNavigation?: () => void;
/**
* Listeners on the router.
@@ -208,7 +208,7 @@ export class RouterSlot extends HTMLElement implements IRouter
if (this.isConnected) {
const newMatch = this.getRouteMatch();
// Check if this match matches the current match (aka. If the path has changed), if so we should navigate. [NL]
- if(newMatch) {
+ if (newMatch) {
navigate = shouldNavigate(this.match, newMatch);
}
}
@@ -318,7 +318,6 @@ export class RouterSlot extends HTMLElement implements IRouter
* Returns true if a navigation was made to a new page.
*/
protected async renderPath(path: string | PathFragment): Promise {
-
// Notice: Since this is never called from any other place than one higher in this file(when writing this...), we could just retrieve the path and find a match by using this.getRouteMatch() [NL]
// Find the corresponding route.
const match = matchRoutes(this._routes, path);
@@ -336,7 +335,6 @@ export class RouterSlot extends HTMLElement implements IRouter
// Only change route if its a new route.
const navigate = shouldNavigate(this.match, match);
if (navigate) {
-
// If another navigation is still begin resolved in this very moment, then we need to cancel that so it does not end up overriding this new navigation.[NL]
this._cancelNavigation?.();
// Listen for another push state event. If another push state event happens
@@ -412,7 +410,7 @@ export class RouterSlot extends HTMLElement implements IRouter
// We have some routes that share the same component instance, those should not be removed and re-appended [NL]
const isTheSameComponent = this.firstChild === page;
- if(!isTheSameComponent) {
+ if (!isTheSameComponent) {
// Remove the old page by clearing the slot
this.clearChildren();
}
@@ -421,7 +419,7 @@ export class RouterSlot extends HTMLElement implements IRouter
// We do this to ensure that we can find the match in the connectedCallback of the page.
this._routeMatch = match;
- if(!isTheSameComponent) {
+ if (!isTheSameComponent) {
if (page) {
// Append the new page
this.appendChild(page);
diff --git a/src/Umbraco.Web.UI.Client/src/external/router-slot/util/url.ts b/src/Umbraco.Web.UI.Client/src/external/router-slot/util/url.ts
index f9a95d0897..8ca75dc55d 100644
--- a/src/Umbraco.Web.UI.Client/src/external/router-slot/util/url.ts
+++ b/src/Umbraco.Web.UI.Client/src/external/router-slot/util/url.ts
@@ -70,7 +70,7 @@ export function queryString(): string {
* @returns Params
*/
export function query(): Query {
- return toQuery(queryString().substr(1));
+ return toQuery(queryString().substring(1));
}
/**
diff --git a/src/Umbraco.Web.UI.Client/src/libs/controller-api/controller.test.ts b/src/Umbraco.Web.UI.Client/src/libs/controller-api/controller.test.ts
index 325660cbd8..41a575024f 100644
--- a/src/Umbraco.Web.UI.Client/src/libs/controller-api/controller.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/libs/controller-api/controller.test.ts
@@ -51,7 +51,7 @@ describe('UmbController', () => {
let hostElement: UmbControllerHostElement;
beforeEach(() => {
- hostElement = document.createElement('test-my-controller-host') as UmbControllerHostElement;
+ hostElement = new UmbTestControllerHostElement();
});
describe('Controller Host Public API', () => {
diff --git a/src/Umbraco.Web.UI.Client/src/libs/element-api/element.test.ts b/src/Umbraco.Web.UI.Client/src/libs/element-api/element.test.ts
index cd2b33321c..e5de96511d 100644
--- a/src/Umbraco.Web.UI.Client/src/libs/element-api/element.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/libs/element-api/element.test.ts
@@ -152,6 +152,7 @@ describe('UmbElementMixin', () => {
expect(hostElement.hasUmbController(ctrl)).to.be.true;
const ctrl2 = hostElement.observe(myObservable, (value) => {
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
const a = value + 'bla';
});
@@ -172,6 +173,7 @@ describe('UmbElementMixin', () => {
const ctrl2 = hostElement.observe(
undefined,
() => {
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
const a = 1;
},
'observer',
diff --git a/src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/base-extension-initializer.controller.test.ts b/src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/base-extension-initializer.controller.test.ts
index a88410d347..29624ff01c 100644
--- a/src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/base-extension-initializer.controller.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/base-extension-initializer.controller.test.ts
@@ -16,6 +16,8 @@ import { UmbSwitchCondition } from '@umbraco-cms/backoffice/extension-registry';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
@customElement('umb-test-controller-host')
+// Element is used in tests
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
class UmbTestControllerHostElement extends UmbControllerHostElementMixin(HTMLElement) {}
class UmbTestExtensionController extends UmbBaseExtensionInitializer {
@@ -57,12 +59,12 @@ class UmbTestConditionAlwaysInvalid extends UmbControllerBase implements UmbExte
describe('UmbBaseExtensionController', () => {
describe('Manifest without conditions', () => {
- let hostElement: UmbControllerHostElement;
+ //let hostElement: UmbControllerHostElement;
let extensionRegistry: UmbExtensionRegistry;
let manifest: ManifestWithDynamicConditions;
beforeEach(async () => {
- hostElement = await fixture(html`;
let manifest: ManifestWithDynamicConditions;
beforeEach(async () => {
- hostElement = await fixture(html` = ControllerType & {
manifest: Required>;
@@ -35,7 +33,7 @@ export abstract class UmbBaseExtensionsInitializer<
#onChange?: (permittedManifests: Array) => void;
protected _extensions: Array = [];
#permittedExts: Array = [];
- #exposedPermittedExts: Array = [];
+ #exposedPermittedExts?: Array;
#changeDebounce?: number;
asPromise(): Promise {
@@ -92,6 +90,12 @@ export abstract class UmbBaseExtensionsInitializer<
return;
}
+ // If we get no manifests and we have not exposed any extensions yet, then we should notify to let the listener know that we have our first response. [NL]
+ if (manifests.length === 0 && this.#exposedPermittedExts === undefined) {
+ this.#exposedPermittedExts = [];
+ this.#onChange?.(this.#exposedPermittedExts);
+ }
+
// Clean up extensions that are no longer.
this._extensions = this._extensions.filter((extension) => {
if (!manifests.find((manifest) => manifest.alias === extension.alias)) {
@@ -116,6 +120,7 @@ export abstract class UmbBaseExtensionsInitializer<
protected _extensionChanged = (isPermitted: boolean, controller: ControllerType) => {
let hasChanged = false;
+
// This might be called after this is destroyed, so we need to check if the _permittedExts is still available:
const existingIndex = this.#permittedExts?.indexOf(controller as unknown as MyPermittedControllerType);
if (isPermitted) {
@@ -151,7 +156,7 @@ export abstract class UmbBaseExtensionsInitializer<
// if so, look up the extension it overwrites, and remove it from the list. and check that for if it overwrites another extension and so on.
if (extCtrl.overwrites.length > 0) {
extCtrl.overwrites.forEach((overwrite) => {
- this.#removeOverwrittenExtensions(this.#exposedPermittedExts, overwrite);
+ this.#removeOverwrittenExtensions(this.#exposedPermittedExts!, overwrite);
});
}
});
@@ -195,16 +200,16 @@ export abstract class UmbBaseExtensionsInitializer<
// The this.#extensionRegistry is an indication of wether this is already destroyed.
if (!this.#extensionRegistry) return;
- const oldPermittedExtsLength = this.#exposedPermittedExts.length;
+ const oldPermittedExtsLength = this.#exposedPermittedExts?.length ?? 0;
(this._extensions as any) = undefined;
(this.#permittedExts as any) = undefined;
- this.#exposedPermittedExts.length = 0;
+ this.#exposedPermittedExts = undefined;
if (this.#changeDebounce) {
cancelAnimationFrame(this.#changeDebounce);
this.#changeDebounce = undefined;
}
if (oldPermittedExtsLength > 0) {
- this.#onChange?.(this.#exposedPermittedExts);
+ this.#onChange?.([]);
}
this.#promiseResolvers.length = 0;
this.#filter = undefined;
diff --git a/src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/extension-api-initializer.test.ts b/src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/extension-api-initializer.test.ts
index 5aa9d2a806..78c6409286 100644
--- a/src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/extension-api-initializer.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/extension-api-initializer.test.ts
@@ -9,6 +9,8 @@ import { customElement, html } from '@umbraco-cms/backoffice/external/lit';
import { type ManifestSection, UmbSwitchCondition } from '@umbraco-cms/backoffice/extension-registry';
@customElement('umb-test-controller-host')
+// Element is used in tests
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
class UmbTestControllerHostElement extends UmbControllerHostElementMixin(HTMLElement) {}
class UmbTestApiController extends UmbControllerBase {
diff --git a/src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/extension-element-and-api-initializer.test.ts b/src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/extension-element-and-api-initializer.test.ts
index c2c3429b02..82c6fd52d5 100644
--- a/src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/extension-element-and-api-initializer.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/extension-element-and-api-initializer.test.ts
@@ -1,10 +1,10 @@
import { UmbExtensionRegistry } from '../registry/extension.registry.js';
import type { ManifestElementAndApi, ManifestWithDynamicConditions, UmbApi } from '../index.js';
import { UmbExtensionElementAndApiInitializer } from './extension-element-and-api-initializer.controller.js';
-import { expect, fixture } from '@open-wc/testing';
+import { expect } from '@open-wc/testing';
import type { UmbControllerHost, UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
import { UmbControllerHostElementMixin } from '@umbraco-cms/backoffice/controller-api';
-import { customElement, html } from '@umbraco-cms/backoffice/external/lit';
+import { customElement } from '@umbraco-cms/backoffice/external/lit';
import { UmbSwitchCondition } from '@umbraco-cms/backoffice/extension-registry';
import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
@@ -12,6 +12,8 @@ import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
class UmbTestControllerHostElement extends UmbControllerHostElementMixin(HTMLElement) {}
@customElement('umb-test-extension-element')
+// Ignoring eslint rule. Element name is used for testing.
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
class UmbTestExtensionElement extends UmbControllerHostElementMixin(HTMLElement) {}
class UmbTestApiController extends UmbControllerBase implements UmbApi {
@@ -35,7 +37,7 @@ describe('UmbExtensionElementAndApiController', () => {
let manifest: TestManifest;
beforeEach(async () => {
- hostElement = await fixture(html` = [
},
],
},
+ {
+ name: 'Code Editor',
+ id: 'dt-codeEditor',
+ parent: null,
+ editorAlias: 'Umbraco.Plain.String',
+ editorUiAlias: 'Umb.PropertyEditorUi.CodeEditor',
+ hasChildren: false,
+ isFolder: false,
+ canIgnoreStartNodes: false,
+ isDeletable: true,
+ values: [
+ {
+ alias: 'language',
+ value: 'html',
+ },
+ ],
+ },
{
name: 'Markdown Editor',
id: 'dt-markdownEditor',
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/document-type/document-type.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/document-type/document-type.data.ts
index ac9dabac6b..e8ef422e04 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/document-type/document-type.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/document-type/document-type.data.ts
@@ -713,6 +713,30 @@ export const data: Array = [
labelOnTop: false,
},
},
+ {
+ id: '34',
+ container: {
+ id: 'all-properties-group-key',
+ },
+ alias: 'codeEditor',
+ name: 'Code Editor',
+ description: 'umb-code-editor configured with the `html` language.',
+ dataType: {
+ id: 'dt-codeEditor',
+ },
+ variesByCulture: false,
+ variesBySegment: false,
+ sortOrder: 0,
+ validation: {
+ mandatory: true,
+ mandatoryMessage: null,
+ regEx: null,
+ regExMessage: null,
+ },
+ appearance: {
+ labelOnTop: false,
+ },
+ },
],
containers: [
{
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/document/document-collection.manager.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/document/document-collection.manager.ts
index 945127fc48..a3979f2ce6 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/document/document-collection.manager.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/document/document-collection.manager.ts
@@ -17,11 +17,6 @@ export class UmbMockDocumentCollectionManager {
getCollectionDocumentById({
id,
- dataTypeId,
- orderBy,
- orderCulture,
- orderDirection,
- filter,
skip = 0,
take = 100,
}: {
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/document/document.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/document/document.data.ts
index 1c0a6b60a2..2e3dce12d4 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/document/document.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/document/document.data.ts
@@ -82,6 +82,36 @@ export const data: Array = [
`,
},
},
+ {
+ alias: 'codeEditor',
+ culture: null,
+ segment: null,
+ value: `Lorem ipsum dolor sit amet consectetuer adipiscing elit
+
+ Lorem ipsum dolor sit amet consectetuer.
+ Aenean commodo ligula eget dolor.
+ Aenean massa cum sociis natoque penatibus.
+
+
+ Lorem ipsum dolor sit amet, consectetuer adipiscing
+ elit. Aenean commodo ligula eget dolor.
+
+
+
+ Lorem ipsum dolor sit amet, consectetuer
+ adipiscing elit. Aenean commodo ligula eget dolor.
+ Aenean massa strong . Cum sociis
+ natoque penatibus et magnis dis parturient montes,
+ nascetur ridiculus mus. Donec quam felis, ultricies
+ nec, pellentesque eu, pretium quis, sem. Nulla consequat
+ massa quis enim. Donec pede justo, fringilla vel,
+ aliquet nec, vulputate eget, arcu. In em
+ enim justo, rhoncus ut, imperdiet a, venenatis vitae,
+ justo. Nullam link
+ dictum felis eu pede mollis pretium.
+
+`,
+ },
{
alias: 'email',
culture: null,
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/document/document.db.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/document/document.db.ts
index 0f6e13d5c6..d9a36ba11b 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/document/document.db.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/document/document.db.ts
@@ -33,11 +33,11 @@ export class UmbDocumentMockDB extends UmbEntityMockDbBase
}
// permissions
- getUserPermissionsForDocument(id: string): Array {
+ getUserPermissionsForDocument(): Array {
return [];
}
- getDomainsForDocument(id: string): DomainsResponseModel {
+ getDomainsForDocument(): DomainsResponseModel {
return { defaultIsoCode: 'en-us', domains: [] };
}
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/media/media-collection.manager.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/media/media-collection.manager.ts
index bbcd972681..0ad8b41114 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/media/media-collection.manager.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/media/media-collection.manager.ts
@@ -14,10 +14,6 @@ export class UmbMockMediaCollectionManager {
getCollectionMedia({
id,
- dataTypeId,
- orderBy,
- orderDirection,
- filter,
skip = 0,
take = 100,
}: {
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/template/template-query.manager.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/template/template-query.manager.ts
index 960d4d0ba1..a8f870ec15 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/template/template-query.manager.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/template/template-query.manager.ts
@@ -1,4 +1,4 @@
-import { templateQueryResult, templateQuerySettings, type UmbMockTemplateModel } from './template.data.js';
+import { templateQueryResult, templateQuerySettings } from './template.data.js';
export class UmbMockTemplateQueryManager {
constructor() {}
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/user/user.db.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/user/user.db.ts
index 63c5290bff..3f1ac5c5df 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/user/user.db.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/user/user.db.ts
@@ -1,5 +1,5 @@
import { umbUserGroupMockDb } from '../user-group/user-group.db.js';
-import { arrayFilter, stringFilter, queryFilter, objectArrayFilter } from '../utils.js';
+import { stringFilter, queryFilter, objectArrayFilter } from '../utils.js';
import { UmbEntityMockDbBase } from '../utils/entity/entity-base.js';
import { UmbMockEntityItemManager } from '../utils/entity/entity-item.manager.js';
import { UmbMockEntityDetailManager } from '../utils/entity/entity-detail.manager.js';
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/utils/content/content-collection.manager.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/utils/content/content-collection.manager.ts
index f63f639fbf..41ee046de3 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/utils/content/content-collection.manager.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/utils/content/content-collection.manager.ts
@@ -1,8 +1,7 @@
-import { queryFilter } from '../../utils.js';
import type { UmbMockDBBase } from '../mock-db-base.js';
import { pagedResult } from '../paged-result.js';
-const contentQueryFilter = (filterOptions: any, item: any) => {
+const contentQueryFilter = () => {
return true;
console.log('implement filter logic for content items');
//queryFilter(filterOptions.filter, item.name);
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/webhooks.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/webhooks.data.ts
deleted file mode 100644
index 9685f3612e..0000000000
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/webhooks.data.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { UmbMockDBBase } from './utils/mock-db-base.js';
-//import {
-// WebhooksResponseModel,
-//} from '@umbraco-cms/backoffice/backend-api';
-
-class UmbWebhooksData extends UmbMockDBBase {
- constructor(data: any[]) {
- super(data);
- }
-}
-
-export const umbWebhooksData = {
- //webhooks: new UmbWebhooksData(webhooks),
-};
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/dictionary/import-export.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/dictionary/import-export.handlers.ts
index eebd1adac4..04b0dd81bf 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/handlers/dictionary/import-export.handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/handlers/dictionary/import-export.handlers.ts
@@ -1,9 +1,10 @@
const { rest } = window.MockServiceWorker;
-import type { UmbMockDictionaryModel } from '../../data/dictionary/dictionary.data.js';
+//import type { UmbMockDictionaryModel } from '../../data/dictionary/dictionary.data.js';
import { umbDictionaryMockDb } from '../../data/dictionary/dictionary.db.js';
import { UMB_SLUG } from './slug.js';
import { umbracoPath } from '@umbraco-cms/backoffice/utils';
+/*
const importResponse: UmbMockDictionaryModel = {
parent: null,
name: 'Uploaded dictionary',
@@ -21,6 +22,7 @@ const importResponse: UmbMockDictionaryModel = {
},
],
};
+*/
export const importExportHandlers = [
rest.post(umbracoPath(`${UMB_SLUG}/import`), async (req, res, ctx) => {
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/document/domain.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/document/domain.handlers.ts
index 5b74c25e61..3d44b343f2 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/handlers/document/domain.handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/handlers/document/domain.handlers.ts
@@ -8,7 +8,7 @@ export const domainHandlers = [
rest.get(umbracoPath(`${UMB_SLUG}/:id/domains`), (req, res, ctx) => {
const id = req.params.id as string;
if (!id) return;
- const response = umbDocumentMockDb.getDomainsForDocument(id);
+ const response = umbDocumentMockDb.getDomainsForDocument();
return res(ctx.status(200), ctx.json(response));
}),
];
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/document/permission.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/document/permission.handlers.ts
index c5f828261b..097afd9fe7 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/handlers/document/permission.handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/handlers/document/permission.handlers.ts
@@ -8,7 +8,7 @@ export const permissionHandlers = [
rest.get(umbracoPath(`${UMB_SLUG}/:id/permissions`), (req, res, ctx) => {
const id = req.params.id as string;
if (!id) return;
- const response = umbDocumentMockDb.getUserPermissionsForDocument(id);
+ const response = umbDocumentMockDb.getUserPermissionsForDocument();
return res(ctx.status(200), ctx.json(response));
}),
];
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/examine-management.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/examine-management.handlers.ts
index 68d74955ab..51fca662e2 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/handlers/examine-management.handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/handlers/examine-management.handlers.ts
@@ -57,7 +57,6 @@ export const handlers = [
rest.get(umbracoPath('/searcher/:searcherName/query'), (_req, res, ctx) => {
const query = _req.url.searchParams.get('term');
- const take = _req.url.searchParams.get('take');
const searcherName = _req.params.searcherName as string;
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/webhook.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/webhook.handlers.ts
deleted file mode 100644
index a4081e6c4a..0000000000
--- a/src/Umbraco.Web.UI.Client/src/mocks/handlers/webhook.handlers.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-const { rest } = window.MockServiceWorker;
-//import { umbracoPath } from '@umbraco-cms/backoffice/utils';
-
-export const handlers = [];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/workspace/block-grid-area-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/workspace/block-grid-area-type-workspace.context.ts
index d9ee93951c..875b2333d2 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/workspace/block-grid-area-type-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/workspace/block-grid-area-type-workspace.context.ts
@@ -106,6 +106,9 @@ export class UmbBlockGridAreaTypeWorkspaceContext
getName() {
return this.#data.getValue()?.alias;
}
+
+ // TODO: [v15] ignoring unused name parameter to avoid breaking changes
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
setName(name: string | undefined) {
throw new Error('You cannot set a name of a area-type.');
}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts
index 81cb697ccc..08948600e1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts
@@ -3,7 +3,7 @@ import { UmbBlockGridInlinePropertyDatasetContext } from './block-grid-inline-pr
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { css, customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
import type { UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
-import type { UmbBlockViewUrlsPropType } from '@umbraco-cms/backoffice/block';
+import type { UmbBlockEditorCustomViewConfiguration } from '@umbraco-cms/backoffice/extension-registry';
import '../block-grid-areas-container/index.js';
import '../ref-grid-block/index.js';
@@ -17,7 +17,7 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
label?: string;
@property({ attribute: false })
- urls?: UmbBlockViewUrlsPropType;
+ config?: UmbBlockEditorCustomViewConfiguration;
@state()
_inlineProperty: UmbPropertyTypeModel | undefined;
@@ -39,7 +39,7 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
}
override render() {
- return html`
+ return html`
+ return html`
`;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts
index 0e86d455e8..4778221731 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts
@@ -2,13 +2,17 @@ import { UmbBlockGridEntryContext } from '../../context/block-grid-entry.context
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { html, css, customElement, property, state, nothing } from '@umbraco-cms/backoffice/external/lit';
import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
-import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
-import type { UmbBlockViewPropsType } from '@umbraco-cms/backoffice/block';
-import type { UmbBlockGridLayoutModel } from '@umbraco-cms/backoffice/block-grid';
+import type {
+ ManifestBlockEditorCustomView,
+ UmbBlockEditorCustomViewProperties,
+ UmbPropertyEditorUiElement,
+} from '@umbraco-cms/backoffice/extension-registry';
+import { stringOrStringArrayContains } from '@umbraco-cms/backoffice/utils';
+import { UMB_BLOCK_GRID, type UmbBlockGridLayoutModel } from '@umbraco-cms/backoffice/block-grid';
+
import '../block-grid-block-inline/index.js';
import '../block-grid-block/index.js';
import '../block-scale-handler/index.js';
-
/**
* @element umb-block-grid-entry
*/
@@ -40,6 +44,9 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
#context = new UmbBlockGridEntryContext(this);
#renderTimeout: number | undefined;
+ @state()
+ _contentTypeAlias?: string;
+
@state()
_columnSpan?: number;
@@ -82,11 +89,13 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
@state()
_inlineCreateAboveWidth?: string;
- // TODO: use this type on the Element Interface for the Manifest.
@state()
- _blockViewProps: UmbBlockViewPropsType = { contentUdi: undefined!, urls: {} }; // Set to undefined cause it will be set before we render.
+ _blockViewProps: UmbBlockEditorCustomViewProperties = {
+ contentUdi: undefined!,
+ config: { showContentEdit: false, showSettingsEdit: false },
+ }; // Set to undefined cause it will be set before we render.
- #updateBlockViewProps(incoming: Partial>) {
+ #updateBlockViewProps(incoming: Partial>) {
this._blockViewProps = { ...this._blockViewProps, ...incoming };
this.requestUpdate('_blockViewProps');
}
@@ -95,57 +104,119 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
super();
// Misc:
- this.observe(this.#context.showContentEdit, (show) => {
- this._showContentEdit = show;
- });
- this.observe(this.#context.settingsElementTypeKey, (key) => {
- this._hasSettings = !!key;
- });
- this.observe(this.#context.canScale, (canScale) => {
- this._canScale = canScale;
- });
- this.observe(this.#context.label, (label) => {
- this.#updateBlockViewProps({ label });
- this._label = label;
- });
- this.observe(this.#context.contentElementTypeIcon, (icon) => {
- this.#updateBlockViewProps({ icon });
- this._icon = icon;
- });
- this.observe(this.#context.inlineEditingMode, (mode) => {
- this._inlineEditingMode = mode;
- });
+ this.observe(
+ this.#context.showContentEdit,
+ (showContentEdit) => {
+ this._showContentEdit = showContentEdit;
+ this.#updateBlockViewProps({ config: { ...this._blockViewProps.config, showContentEdit } });
+ },
+ null,
+ );
+ this.observe(
+ this.#context.settingsElementTypeKey,
+ (key) => {
+ this._hasSettings = !!key;
+ this.#updateBlockViewProps({ config: { ...this._blockViewProps.config, showSettingsEdit: !!key } });
+ },
+ null,
+ );
+ this.observe(
+ this.#context.canScale,
+ (canScale) => {
+ this._canScale = canScale;
+ },
+ null,
+ );
+ this.observe(
+ this.#context.blockType,
+ (blockType) => {
+ this.#updateBlockViewProps({ blockType });
+ },
+ null,
+ );
+ // TODO: Implement index.
+ this.observe(
+ this.#context.label,
+ (label) => {
+ this.#updateBlockViewProps({ label });
+ this._label = label;
+ },
+ null,
+ );
+ this.observe(
+ this.#context.contentElementTypeIcon,
+ (icon) => {
+ this.#updateBlockViewProps({ icon });
+ this._icon = icon;
+ },
+ null,
+ );
+ this.observe(
+ this.#context.inlineEditingMode,
+ (mode) => {
+ this._inlineEditingMode = mode;
+ },
+ null,
+ );
// Data:
- this.observe(this.#context.layout, (layout) => {
- this.#updateBlockViewProps({ layout });
- });
- this.observe(this.#context.content, (content) => {
- this.#updateBlockViewProps({ content });
- });
- this.observe(this.#context.settings, (settings) => {
- this.#updateBlockViewProps({ settings });
- });
+ this.observe(
+ this.#context.layout,
+ (layout) => {
+ this.#updateBlockViewProps({ layout });
+ },
+ null,
+ );
+ this.observe(
+ this.#context.content,
+ (content) => {
+ this.#updateBlockViewProps({ content });
+ },
+ null,
+ );
+ this.observe(
+ this.#context.settings,
+ (settings) => {
+ this.#updateBlockViewProps({ settings });
+ },
+ null,
+ );
// Paths:
- this.observe(this.#context.createBeforePath, (createPath) => {
- //const oldValue = this._createBeforePath;
- this._createBeforePath = createPath;
- //this.requestUpdate('_createPath', oldValue);
- });
- this.observe(this.#context.createAfterPath, (createPath) => {
- //const oldValue = this._createAfterPath;
- this._createAfterPath = createPath;
- //this.requestUpdate('_createPath', oldValue);
- });
- this.observe(this.#context.workspaceEditContentPath, (path) => {
- this._workspaceEditContentPath = path;
- this.#updateBlockViewProps({ urls: { ...this._blockViewProps.urls, editContent: path } });
- });
- this.observe(this.#context.workspaceEditSettingsPath, (path) => {
- this._workspaceEditSettingsPath = path;
- this.#updateBlockViewProps({ urls: { ...this._blockViewProps.urls, editSettings: path } });
- });
+ this.observe(
+ this.#context.createBeforePath,
+ (createPath) => {
+ //const oldValue = this._createBeforePath;
+ this._createBeforePath = createPath;
+ //this.requestUpdate('_createPath', oldValue);
+ },
+ null,
+ );
+ this.observe(
+ this.#context.createAfterPath,
+ (createPath) => {
+ //const oldValue = this._createAfterPath;
+ this._createAfterPath = createPath;
+ //this.requestUpdate('_createPath', oldValue);
+ },
+ null,
+ );
+ this.observe(
+ this.#context.workspaceEditContentPath,
+ (path) => {
+ this._workspaceEditContentPath = path;
+ this.#updateBlockViewProps({ config: { ...this._blockViewProps.config, editContentPath: path } });
+ },
+ null,
+ );
+ this.observe(
+ this.#context.workspaceEditSettingsPath,
+ (path) => {
+ this._workspaceEditSettingsPath = path;
+ this.#updateBlockViewProps({ config: { ...this._blockViewProps.config, editSettingsPath: path } });
+ },
+ null,
+ );
}
override connectedCallback(): void {
@@ -169,16 +240,25 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
},
'rowSpan',
);
- this.observe(this.#context.contentElementTypeKey, (contentElementTypeKey) => {
- if (contentElementTypeKey) {
- this.setAttribute('data-content-element-type-key', contentElementTypeKey);
- }
- });
- this.observe(this.#context.contentElementTypeAlias, (contentElementTypeAlias) => {
- if (contentElementTypeAlias) {
- this.setAttribute('data-content-element-type-alias', contentElementTypeAlias);
- }
- });
+ this.observe(
+ this.#context.contentElementTypeKey,
+ (contentElementTypeKey) => {
+ if (contentElementTypeKey) {
+ this.setAttribute('data-content-element-type-key', contentElementTypeKey);
+ }
+ },
+ 'contentElementTypeKey',
+ );
+ this.observe(
+ this.#context.contentElementTypeAlias,
+ (contentElementTypeAlias) => {
+ if (contentElementTypeAlias) {
+ this._contentTypeAlias = contentElementTypeAlias;
+ this.setAttribute('data-content-element-type-alias', contentElementTypeAlias);
+ }
+ },
+ 'contentElementTypeAlias',
+ );
this.#callUpdateInlineCreateButtons();
}
@@ -225,18 +305,29 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
}
};
+ #extensionSlotFilterMethod = (manifest: ManifestBlockEditorCustomView) => {
+ if (
+ manifest.forContentTypeAlias &&
+ !stringOrStringArrayContains(manifest.forContentTypeAlias, this._contentTypeAlias!)
+ ) {
+ return false;
+ }
+ if (manifest.forBlockEditor && !stringOrStringArrayContains(manifest.forBlockEditor, UMB_BLOCK_GRID)) {
+ return false;
+ }
+ return true;
+ };
+
#renderInlineEditBlock() {
- return html`${this._inlineEditingMode ? this.#renderInlineEditBlock() : this.#renderRefBlock()}
@@ -347,10 +439,6 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
border-color: var(--uui-color-interactive);
}
- uui-action-bar {
- background-color: var(--uui-color-surface);
- }
-
.umb-block-grid__block {
height: 100%;
}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entry.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entry.context.ts
index f072e4f164..7cc322ba99 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entry.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entry.context.ts
@@ -30,8 +30,8 @@ export class UmbBlockGridEntryContext
implements UmbBlockGridScalableContext
{
//
- readonly columnSpan = this._layout.asObservablePart((x) => (x ? x.columnSpan ?? null : undefined));
- readonly rowSpan = this._layout.asObservablePart((x) => (x ? x.rowSpan ?? null : undefined));
+ readonly columnSpan = this._layout.asObservablePart((x) => (x ? (x.columnSpan ?? null) : undefined));
+ readonly rowSpan = this._layout.asObservablePart((x) => (x ? (x.rowSpan ?? null) : undefined));
readonly layoutAreas = this._layout.asObservablePart((x) => x?.areas);
readonly columnSpanOptions = this._blockType.asObservablePart((x) => x?.columnSpanOptions ?? []);
readonly areaTypeGridColumns = this._blockType.asObservablePart((x) => x?.areaGridColumns);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-manager.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-manager.context.ts
index 71bcbe39d8..a27b8bf65c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-manager.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-manager.context.ts
@@ -63,6 +63,8 @@ export class UmbBlockGridManagerContext<
create(
contentElementTypeKey: string,
partialLayoutEntry?: Omit,
+ // TODO: [v15] Ignore unused parameter to avoid breaking changes
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
modalData?: UmbBlockGridWorkspaceData,
) {
return super.createBlockData(contentElementTypeKey, partialLayoutEntry);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/property-editor-ui-block-grid-layout-stylesheet.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/property-editor-ui-block-grid-layout-stylesheet.element.ts
index 4bde355fa7..7d16db32d8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/property-editor-ui-block-grid-layout-stylesheet.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/property-editor-ui-block-grid-layout-stylesheet.element.ts
@@ -52,7 +52,7 @@ export class UmbPropertyEditorUIBlockGridLayoutStylesheetElement
const validationLimit = config?.getValueByAlias('validationLimit');
this._limitMin = validationLimit?.min ?? 0;
- this._limitMax = this.#singleItemMode ? 1 : validationLimit?.max ?? Infinity;
+ this._limitMax = this.#singleItemMode ? 1 : (validationLimit?.max ?? Infinity);
}
@state()
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/types.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/types.ts
index 7925df893a..392c67f0f2 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/types.ts
@@ -2,6 +2,7 @@ import type { UmbBlockLayoutBaseModel, UmbBlockValueType } from '@umbraco-cms/ba
import type { UmbBlockTypeWithGroupKey } from '@umbraco-cms/backoffice/block-type';
export const UMB_BLOCK_GRID_TYPE = 'block-grid-type';
+export const UMB_BLOCK_GRID = 'block-grid';
// Configuration models:
export interface UmbBlockGridTypeModel extends UmbBlockTypeWithGroupKey {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts
index 3efa9c4cc8..d34cf5d569 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts
@@ -7,31 +7,33 @@ import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-
export class UmbBlockGridTypeWorkspaceViewAdvancedElement extends UmbLitElement implements UmbWorkspaceViewElement {
override render() {
return html`
-
+
-
+
= { contentUdi: undefined!, urls: {} }; // Set to undefined cause it will be set before we render.
+ _blockViewProps: UmbBlockEditorCustomViewProperties = {
+ contentUdi: undefined!,
+ config: { showContentEdit: false, showSettingsEdit: false },
+ }; // Set to undefined cause it will be set before we render.
+
+ #updateBlockViewProps(incoming: Partial>) {
+ this._blockViewProps = { ...this._blockViewProps, ...incoming };
+ this.requestUpdate('_blockViewProps');
+ }
constructor() {
super();
- this.observe(this.#context.showContentEdit, (showContentEdit) => {
- this._showContentEdit = showContentEdit;
- });
- this.observe(this.#context.settingsElementTypeKey, (settingsElementTypeKey) => {
- this._hasSettings = !!settingsElementTypeKey;
- });
- this.observe(this.#context.label, (label) => {
- this._label = label;
- this._blockViewProps.label = label;
- this.requestUpdate('_blockViewProps');
- });
- this.observe(this.#context.contentElementTypeIcon, (icon) => {
- this._icon = icon;
- this._blockViewProps.icon = icon;
- this.requestUpdate('_blockViewProps');
- });
- this.observe(this.#context.inlineEditingMode, (inlineEditingMode) => {
- this._inlineEditingMode = inlineEditingMode;
- });
+ this.observe(
+ this.#context.showContentEdit,
+ (showContentEdit) => {
+ this._showContentEdit = showContentEdit;
+ this.#updateBlockViewProps({ config: { ...this._blockViewProps.config, showContentEdit } });
+ },
+ null,
+ );
+ this.observe(
+ this.#context.settingsElementTypeKey,
+ (key) => {
+ this._hasSettings = !!key;
+ this.#updateBlockViewProps({ config: { ...this._blockViewProps.config, showSettingsEdit: !!key } });
+ },
+ null,
+ );
+ this.observe(
+ this.#context.blockType,
+ (blockType) => {
+ this.#updateBlockViewProps({ blockType });
+ },
+ null,
+ );
+ // TODO: Implement index.
+ this.observe(
+ this.#context.label,
+ (label) => {
+ this.#updateBlockViewProps({ label });
+ this._label = label;
+ },
+ null,
+ );
+ this.observe(
+ this.#context.contentElementTypeIcon,
+ (icon) => {
+ this.#updateBlockViewProps({ icon });
+ this._icon = icon;
+ },
+ null,
+ );
+ this.observe(
+ this.#context.inlineEditingMode,
+ (inlineEditingMode) => {
+ this._inlineEditingMode = inlineEditingMode;
+ },
+ null,
+ );
// Data props:
- this.observe(this.#context.layout, (layout) => {
- this._blockViewProps.layout = layout;
- });
- this.observe(this.#context.content, (content) => {
- this._blockViewProps.content = content;
- });
- this.observe(this.#context.settings, (settings) => {
- this._blockViewProps.settings = settings;
- });
- this.observe(this.#context.workspaceEditContentPath, (path) => {
- this._workspaceEditContentPath = path;
- this._blockViewProps.urls.editContent = path;
- this.requestUpdate('_blockViewProps');
- });
- this.observe(this.#context.workspaceEditSettingsPath, (path) => {
- this._workspaceEditSettingsPath = path;
- this._blockViewProps.urls.editSettings = path;
- this.requestUpdate('_blockViewProps');
- });
+ this.observe(
+ this.#context.layout,
+ (layout) => {
+ this.#updateBlockViewProps({ layout });
+ },
+ null,
+ );
+ this.observe(
+ this.#context.content,
+ (content) => {
+ this.#updateBlockViewProps({ content });
+ },
+ null,
+ );
+ this.observe(
+ this.#context.settings,
+ (settings) => {
+ this.#updateBlockViewProps({ settings });
+ },
+ null,
+ );
+ this.observe(
+ this.#context.workspaceEditContentPath,
+ (path) => {
+ this._workspaceEditContentPath = path;
+ this.#updateBlockViewProps({ config: { ...this._blockViewProps.config, editContentPath: path } });
+ },
+ null,
+ );
+ this.observe(
+ this.#context.workspaceEditSettingsPath,
+ (path) => {
+ this._workspaceEditSettingsPath = path;
+ this.#updateBlockViewProps({ config: { ...this._blockViewProps.config, editSettingsPath: path } });
+ },
+ null,
+ );
}
+ override connectedCallback(): void {
+ super.connectedCallback();
+ // element styling:
+ this.observe(
+ this.#context.contentElementTypeKey,
+ (contentElementTypeKey) => {
+ if (contentElementTypeKey) {
+ this.setAttribute('data-content-element-type-key', contentElementTypeKey);
+ }
+ },
+ 'contentElementTypeKey',
+ );
+ this.observe(
+ this.#context.contentElementTypeAlias,
+ (contentElementTypeAlias) => {
+ if (contentElementTypeAlias) {
+ this._contentTypeAlias = contentElementTypeAlias;
+ this.setAttribute('data-content-element-type-alias', contentElementTypeAlias);
+ }
+ },
+ 'contentElementTypeAlias',
+ );
+ }
+
+ #extensionSlotFilterMethod = (manifest: ManifestBlockEditorCustomView) => {
+ if (
+ manifest.forContentTypeAlias &&
+ !stringOrStringArrayContains(manifest.forContentTypeAlias, this._contentTypeAlias!)
+ ) {
+ return false;
+ }
+ if (manifest.forBlockEditor && !stringOrStringArrayContains(manifest.forBlockEditor, UMB_BLOCK_LIST)) {
+ return false;
+ }
+ return true;
+ };
+
#renderRefBlock() {
return html`
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/context/block-list-manager.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/context/block-list-manager.context.ts
index 5f78892ef2..b5610dab2c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/context/block-list-manager.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/context/block-list-manager.context.ts
@@ -21,6 +21,8 @@ export class UmbBlockListManagerContext<
create(
contentElementTypeKey: string,
partialLayoutEntry?: Omit,
+ // TODO: [v15] ignoring unused modalData parameter to avoid breaking changes
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
modalData?: UmbBlockListWorkspaceData,
) {
return super.createBlockData(contentElementTypeKey, partialLayoutEntry);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts
index b3828ddd78..584de1645c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts
@@ -1,22 +1,21 @@
-import { UmbBlockListManagerContext } from '../../context/block-list-manager.context.js';
-import type { UmbBlockListEntryElement } from '../../components/block-list-entry/index.js';
-import type { UmbBlockListLayoutModel, UmbBlockListValueModel } from '../../types.js';
import { UmbBlockListEntriesContext } from '../../context/block-list-entries.context.js';
+import type { UmbBlockListLayoutModel, UmbBlockListValueModel } from '../../types.js';
+import type { UmbBlockListEntryElement } from '../../components/block-list-entry/index.js';
+import { UmbBlockListManagerContext } from '../../context/block-list-manager.context.js';
import { UMB_BLOCK_LIST_PROPERTY_EDITOR_ALIAS } from './manifests.js';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { html, customElement, property, state, repeat, css } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
+import type { UmbPropertyEditorUiElement, UmbBlockTypeBaseModel } from '@umbraco-cms/backoffice/extension-registry';
import {
UmbPropertyValueChangeEvent,
type UmbPropertyEditorConfigCollection,
} from '@umbraco-cms/backoffice/property-editor';
-import type { UmbBlockLayoutBaseModel } from '@umbraco-cms/backoffice/block';
-import type { UmbBlockTypeBaseModel } from '@umbraco-cms/backoffice/block-type';
import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
import type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/router';
import type { UmbSorterConfig } from '@umbraco-cms/backoffice/sorter';
import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
+import type { UmbBlockLayoutBaseModel } from '@umbraco-cms/backoffice/block';
import '../../components/block-list-entry/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-type-configuration/property-editor-ui-block-list-type-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-type-configuration/property-editor-ui-block-list-type-configuration.element.ts
index ef1f279157..639175c2fb 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-type-configuration/property-editor-ui-block-list-type-configuration.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-type-configuration/property-editor-ui-block-list-type-configuration.element.ts
@@ -1,7 +1,7 @@
-import type { UmbBlockTypeBaseModel, UmbInputBlockTypeElement } from '../../../block-type/index.js';
import '../../../block-type/components/input-block-type/index.js';
+import type { UmbInputBlockTypeElement } from '../../../block-type/index.js';
import { UMB_BLOCK_LIST_TYPE } from '../../types.js';
-import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
+import type { UmbBlockTypeBaseModel, UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
import {
UmbPropertyValueChangeEvent,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/types.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/types.ts
index dc5894a548..4b58ab2ec2 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/types.ts
@@ -1,7 +1,8 @@
-import type { UmbBlockTypeBaseModel } from '../block-type/index.js';
+import type { UmbBlockTypeBaseModel } from '@umbraco-cms/backoffice/extension-registry';
import type { UmbBlockLayoutBaseModel, UmbBlockValueType } from '@umbraco-cms/backoffice/block';
export const UMB_BLOCK_LIST_TYPE = 'block-list-type';
+export const UMB_BLOCK_LIST = 'block-list';
export interface UmbBlockListTypeModel extends UmbBlockTypeBaseModel {}
export interface UmbBlockListLayoutModel extends UmbBlockLayoutBaseModel {}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/workspace/views/block-list-type-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/workspace/views/block-list-type-workspace-view.element.ts
index 66ba634c0d..3db4946a0a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/workspace/views/block-list-type-workspace-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/workspace/views/block-list-type-workspace-view.element.ts
@@ -7,20 +7,20 @@ import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-
export class UmbBlockListTypeWorkspaceViewSettingsElement extends UmbLitElement implements UmbWorkspaceViewElement {
override render() {
return html`
-
+
-
+
-
+
-
+
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.ts
index 4d29189aee..7e276d7028 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.ts
@@ -1,10 +1,14 @@
-import { UmbBlockRteEntryContext } from '../../context/block-rte-entry.context.js';
import type { UmbBlockRteLayoutModel } from '../../types.js';
+import { UmbBlockRteEntryContext } from '../../context/block-rte-entry.context.js';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { html, css, property, state, customElement } from '@umbraco-cms/backoffice/external/lit';
-import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
+import type {
+ UmbBlockEditorCustomViewProperties,
+ UmbPropertyEditorUiElement,
+} from '@umbraco-cms/backoffice/extension-registry';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+
import '../ref-rte-block/index.js';
-import type { UmbBlockViewPropsType } from '@umbraco-cms/backoffice/block';
/**
* @element umb-rte-block
@@ -43,9 +47,16 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
@state()
_workspaceEditSettingsPath?: string;
- // TODO: use this type on the Element Interface for the Manifest.
@state()
- _blockViewProps: UmbBlockViewPropsType = { contentUdi: undefined!, urls: {} }; // Set to undefined cause it will be set before we render.
+ _blockViewProps: UmbBlockEditorCustomViewProperties = {
+ contentUdi: undefined!,
+ config: { showContentEdit: false, showSettingsEdit: false },
+ }; // Set to undefined cause it will be set before we render.
+
+ #updateBlockViewProps(incoming: Partial>) {
+ this._blockViewProps = { ...this._blockViewProps, ...incoming };
+ this.requestUpdate('_blockViewProps');
+ }
constructor() {
super();
@@ -55,49 +66,78 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
this.observe(this.#context.showContentEdit, (showContentEdit) => {
this._showContentEdit = showContentEdit;
+ this.#updateBlockViewProps({ config: { ...this._blockViewProps.config, showContentEdit } });
});
- this.observe(this.#context.settingsElementTypeKey, (settingsElementTypeKey) => {
- this._hasSettings = !!settingsElementTypeKey;
- });
- this.observe(this.#context.label, (label) => {
- this._label = label;
- this._blockViewProps.label = label;
- this.requestUpdate('_blockViewProps');
- });
- this.observe(this.#context.contentElementTypeIcon, (icon) => {
- this._icon = icon;
- this._blockViewProps.icon = icon;
- this.requestUpdate('_blockViewProps');
+ this.observe(this.#context.settingsElementTypeKey, (key) => {
+ this._hasSettings = !!key;
+ this.#updateBlockViewProps({ config: { ...this._blockViewProps.config, showSettingsEdit: !!key } });
});
+ this.observe(
+ this.#context.blockType,
+ (blockType) => {
+ this.#updateBlockViewProps({ blockType });
+ },
+ null,
+ );
+ // TODO: Implement index.
+ this.observe(
+ this.#context.label,
+ (label) => {
+ this.#updateBlockViewProps({ label });
+ this._label = label;
+ },
+ null,
+ );
+ this.observe(
+ this.#context.contentElementTypeIcon,
+ (icon) => {
+ this.#updateBlockViewProps({ icon });
+ this._icon = icon;
+ },
+ null,
+ );
// Data props:
- this.observe(this.#context.layout, (layout) => {
- this._blockViewProps.layout = layout;
- });
- this.observe(this.#context.content, (content) => {
- this._blockViewProps.content = content;
- });
- this.observe(this.#context.settings, (settings) => {
- this._blockViewProps.settings = settings;
- });
- this.observe(this.#context.workspaceEditContentPath, (path) => {
- this._workspaceEditContentPath = path;
- this._blockViewProps.urls.editContent = path;
- this.requestUpdate('_blockViewProps');
- });
- this.observe(this.#context.workspaceEditSettingsPath, (path) => {
- this._workspaceEditSettingsPath = path;
- this._blockViewProps.urls.editSettings = path;
- this.requestUpdate('_blockViewProps');
- });
+ this.observe(
+ this.#context.layout,
+ (layout) => {
+ this.#updateBlockViewProps({ layout });
+ },
+ null,
+ );
+ this.observe(
+ this.#context.content,
+ (content) => {
+ this.#updateBlockViewProps({ content });
+ },
+ null,
+ );
+ this.observe(
+ this.#context.settings,
+ (settings) => {
+ this.#updateBlockViewProps({ settings });
+ },
+ null,
+ );
+ this.observe(
+ this.#context.workspaceEditContentPath,
+ (path) => {
+ this._workspaceEditContentPath = path;
+ this.#updateBlockViewProps({ config: { ...this._blockViewProps.config, editContentPath: path } });
+ },
+ null,
+ );
+ this.observe(
+ this.#context.workspaceEditSettingsPath,
+ (path) => {
+ this._workspaceEditSettingsPath = path;
+ this.#updateBlockViewProps({ config: { ...this._blockViewProps.config, editSettingsPath: path } });
+ },
+ null,
+ );
}
override connectedCallback() {
super.connectedCallback();
-
- this.classList.add('uui-font');
-
- this.classList.add('uui-text');
-
this.setAttribute('contenteditable', 'false');
}
@@ -107,27 +147,29 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
#renderBlock() {
return html`
- ${this.#renderRefBlock()}
-
- ${this._showContentEdit && this._workspaceEditContentPath
- ? html`
- `
- : ''}
- ${this._hasSettings && this._workspaceEditSettingsPath
- ? html`
- `
- : ''}
- this.#context.requestDelete()}>
-
-
+
+ ${this.#renderRefBlock()}
+
+ ${this._showContentEdit && this._workspaceEditContentPath
+ ? html`
+ `
+ : ''}
+ ${this._hasSettings && this._workspaceEditSettingsPath
+ ? html`
+ `
+ : ''}
+ this.#context.requestDelete()}>
+
+
+
`;
}
@@ -136,6 +178,7 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
}
static override styles = [
+ UmbTextStyles,
css`
:host {
position: relative;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-entry.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-entry.context.ts
index ce54601d05..82cb9a40a2 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-entry.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-entry.context.ts
@@ -12,8 +12,8 @@ export class UmbBlockRteEntryContext extends UmbBlockEntryContext<
UmbBlockRteTypeModel,
UmbBlockRteLayoutModel
> {
- readonly displayInline = this._layout.asObservablePart((x) => (x ? x.displayInline ?? false : undefined));
- readonly displayInlineConfig = this._blockType.asObservablePart((x) => (x ? x.displayInline ?? false : undefined));
+ readonly displayInline = this._layout.asObservablePart((x) => (x ? (x.displayInline ?? false) : undefined));
+ readonly displayInlineConfig = this._blockType.asObservablePart((x) => (x ? (x.displayInline ?? false) : undefined));
readonly forceHideContentEditorInOverlay = this._blockType.asObservablePart(
(x) => !!x?.forceHideContentEditorInOverlay,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-manager.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-manager.context.ts
index db584d17be..54417230b0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-manager.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-manager.context.ts
@@ -34,6 +34,8 @@ export class UmbBlockRteManagerContext<
create(
contentElementTypeKey: string,
partialLayoutEntry?: Omit,
+ // TODO: [v15] ignoring unused modalData parameter to avoid breaking changes
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
modalData?: UmbBlockRteWorkspaceData,
) {
const data = super.createBlockData(contentElementTypeKey, partialLayoutEntry);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/tiny-mce-plugin/tiny-mce-block-picker.plugin.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/tiny-mce-plugin/tiny-mce-block-picker.plugin.ts
index fd7e3dc831..66fbd90b8c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/tiny-mce-plugin/tiny-mce-block-picker.plugin.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/tiny-mce-plugin/tiny-mce-block-picker.plugin.ts
@@ -1,8 +1,8 @@
-import { UMB_BLOCK_RTE_ENTRIES_CONTEXT } from '../context/block-rte-entries.context-token.js';
import { UMB_BLOCK_RTE_MANAGER_CONTEXT } from '../context/block-rte-manager.context-token.js';
+import { UMB_BLOCK_RTE_ENTRIES_CONTEXT } from '../context/block-rte-entries.context-token.js';
import { type TinyMcePluginArguments, UmbTinyMcePluginBase } from '@umbraco-cms/backoffice/tiny-mce';
import { UmbLocalizationController } from '@umbraco-cms/backoffice/localization-api';
-import type { UmbBlockTypeBaseModel } from '@umbraco-cms/backoffice/block-type';
+import type { UmbBlockTypeBaseModel } from '@umbraco-cms/backoffice/extension-registry';
export default class UmbTinyMceMultiUrlPickerPlugin extends UmbTinyMcePluginBase {
#localize = new UmbLocalizationController(this._host);
@@ -43,7 +43,7 @@ export default class UmbTinyMceMultiUrlPickerPlugin extends UmbTinyMcePluginBase
}
async showDialog() {
- const blockEl = this.editor.selection.getNode();
+ //const blockEl = this.editor.selection.getNode();
/*if (blockEl.nodeName === 'UMB-RTE-BLOCK' || blockEl.nodeName === 'UMB-RTE-BLOCK-INLINE') {
const blockUdi = blockEl.getAttribute('data-content-udi') ?? undefined;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/types.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/types.ts
index 45404b976e..b5cedd32da 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/types.ts
@@ -1,4 +1,4 @@
-import type { UmbBlockTypeBaseModel } from '../block-type/index.js';
+import type { UmbBlockTypeBaseModel } from '@umbraco-cms/backoffice/extension-registry';
import type { UmbBlockLayoutBaseModel, UmbBlockValueType } from '@umbraco-cms/backoffice/block';
export const UMB_BLOCK_RTE_TYPE = 'block-rte-type';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/workspace/views/block-rte-type-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/workspace/views/block-rte-type-workspace-view.element.ts
index ec6823ce01..4d04293051 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/workspace/views/block-rte-type-workspace-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/workspace/views/block-rte-type-workspace-view.element.ts
@@ -57,11 +57,13 @@ export class UmbBlockRteTypeWorkspaceViewSettingsElement extends UmbLitElement i
${this._iconFile
? html`
`;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts
index d782049ca1..cade6212d8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts
@@ -1,4 +1,4 @@
-import type { UmbBlockTypeBaseModel, UmbBlockTypeWithGroupKey } from '../../types.js';
+import type { UmbBlockTypeWithGroupKey } from '../../types.js';
import type { UmbBlockTypeCardElement } from '../block-type-card/index.js';
import { umbConfirmModal } from '@umbraco-cms/backoffice/modal';
import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
@@ -12,6 +12,7 @@ import {
UMB_DOCUMENT_TYPE_PICKER_MODAL,
} from '@umbraco-cms/backoffice/document-type';
import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
+import type { UmbBlockTypeBaseModel } from '@umbraco-cms/backoffice/extension-registry';
import '../block-type-card/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/types.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/types.ts
index 06bb9dce3c..dccd64dad7 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/types.ts
@@ -1,17 +1,4 @@
-import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui';
-
-export interface UmbBlockTypeBaseModel {
- contentElementTypeKey: string;
- settingsElementTypeKey?: string;
- label?: string;
- //view?: string; // TODO: remove/replace with custom element manifest type for block list.
- //stylesheet?: string; // TODO: remove/replace with custom element manifest type for block list.
- thumbnail?: string;
- iconColor?: string;
- backgroundColor?: string;
- editorSize?: UUIModalSidebarSize;
- forceHideContentEditorInOverlay: boolean;
-}
+import type { UmbBlockTypeBaseModel } from '@umbraco-cms/backoffice/extension-registry';
export interface UmbBlockTypeGroup {
name?: string;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context.ts
index cbfba97bfc..7585986cb5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context.ts
@@ -1,4 +1,4 @@
-import type { UmbBlockTypeBaseModel, UmbBlockTypeWithGroupKey } from '../types.js';
+import type { UmbBlockTypeWithGroupKey } from '../types.js';
import { UmbBlockTypeWorkspaceEditorElement } from './block-type-workspace-editor.element.js';
import type { UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property';
import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
@@ -11,9 +11,9 @@ import {
UmbInvariantWorkspacePropertyDatasetContext,
UmbWorkspaceIsNewRedirectController,
} from '@umbraco-cms/backoffice/workspace';
-import { UmbArrayState, UmbObjectState, appendToFrozenArray } from '@umbraco-cms/backoffice/observable-api';
+import { UmbObjectState, appendToFrozenArray } from '@umbraco-cms/backoffice/observable-api';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
-import type { ManifestWorkspace, PropertyEditorSettingsProperty } from '@umbraco-cms/backoffice/extension-registry';
+import type { ManifestWorkspace, UmbBlockTypeBaseModel } from '@umbraco-cms/backoffice/extension-registry';
export class UmbBlockTypeWorkspaceContext
extends UmbSubmittableWorkspaceContextBase
@@ -30,9 +30,6 @@ export class UmbBlockTypeWorkspaceContext 'block');
readonly unique = this.#data.asObservablePart((data) => data?.contentElementTypeKey);
- #properties = new UmbArrayState([], (x) => x.alias);
- readonly properties = this.#properties.asObservable();
-
constructor(host: UmbControllerHost, args: { manifest: ManifestWorkspace }) {
super(host, args.manifest.alias);
const manifest = args.manifest;
@@ -73,7 +70,7 @@ export class UmbBlockTypeWorkspaceContext,
@@ -85,7 +85,7 @@ export abstract class UmbBlockEntryContext<
public readonly blockType = this._blockType.asObservable();
public readonly contentElementTypeKey = this._blockType.asObservablePart((x) => x?.contentElementTypeKey);
public readonly settingsElementTypeKey = this._blockType.asObservablePart((x) =>
- x ? x.settingsElementTypeKey ?? undefined : null,
+ x ? (x.settingsElementTypeKey ?? undefined) : null,
);
_layout = new UmbObjectState(undefined);
@@ -126,7 +126,7 @@ export abstract class UmbBlockEntryContext<
#settings = new UmbObjectState(undefined);
public readonly settings = this.#settings.asObservable();
private readonly settingsDataContentTypeKey = this.#settings.asObservablePart((x) =>
- x ? x.contentTypeKey ?? undefined : null,
+ x ? (x.contentTypeKey ?? undefined) : null,
);
abstract readonly showContentEdit: Observable;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-manager.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-manager.context.ts
index fa4b2d7fb2..ffc8c85022 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-manager.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-manager.context.ts
@@ -1,11 +1,11 @@
-import type { UmbBlockLayoutBaseModel, UmbBlockDataType } from '../types.js';
import type { UmbBlockWorkspaceData } from '../workspace/index.js';
+import type { UmbBlockLayoutBaseModel, UmbBlockDataType } from '../types.js';
import { UMB_BLOCK_MANAGER_CONTEXT } from './block-manager.context-token.js';
import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
import { UmbArrayState, UmbClassState, UmbStringState } from '@umbraco-cms/backoffice/observable-api';
import { UmbDocumentTypeDetailRepository } from '@umbraco-cms/backoffice/document-type';
-import type { UmbBlockTypeBaseModel } from '@umbraco-cms/backoffice/block-type';
+import type { UmbBlockTypeBaseModel } from '@umbraco-cms/backoffice/extension-registry';
import type { UmbContentTypeModel } from '@umbraco-cms/backoffice/content-type';
import { UmbId } from '@umbraco-cms/backoffice/id';
import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
@@ -166,7 +166,8 @@ export abstract class UmbBlockManagerContext<
getContentOf(contentUdi: string) {
return this.#contents.value.find((x) => x.udi === contentUdi);
}
-
+ // TODO: [v15]: ignoring unused var here here to prevent a breaking change
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
setOneLayout(layoutData: BlockLayoutType, modalData?: UmbBlockWorkspaceData) {
this._layouts.appendOne(layoutData);
}
@@ -264,6 +265,8 @@ export abstract class UmbBlockManagerContext<
layoutEntry: BlockLayoutType,
content: UmbBlockDataType,
settings: UmbBlockDataType | undefined,
+ // TODO: [v15]: ignoring unused var here here to prevent a breaking change
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
modalData: ModalDataType,
) {
// Create content entry:
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.token.ts
index 0558d7d8ff..db261ccc3d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.token.ts
@@ -1,6 +1,7 @@
-import type { UmbBlockWorkspaceData } from '@umbraco-cms/backoffice/block';
-import type { UmbBlockTypeBaseModel, UmbBlockTypeGroup } from '@umbraco-cms/backoffice/block-type';
+import type { UmbBlockTypeBaseModel } from '@umbraco-cms/backoffice/extension-registry';
import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
+import type { UmbBlockWorkspaceData } from '@umbraco-cms/backoffice/block';
+import type { UmbBlockTypeGroup } from '@umbraco-cms/backoffice/block-type';
export interface UmbBlockCatalogueModalData {
blocks: Array;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/types.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/types.ts
index 433d8e28f7..7c11cec0ac 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/types.ts
@@ -1,31 +1,8 @@
-export interface UmbBlockLayoutBaseModel {
- contentUdi: string;
- settingsUdi?: string | null;
-}
-
-export interface UmbBlockDataType {
- udi: string;
- contentTypeKey: string;
- [key: string]: unknown;
-}
+import type { UmbBlockDataType, UmbBlockLayoutBaseModel } from '@umbraco-cms/backoffice/extension-registry';
+export type { UmbBlockDataType, UmbBlockLayoutBaseModel } from '@umbraco-cms/backoffice/extension-registry';
export interface UmbBlockValueType {
layout: { [key: string]: Array | undefined };
contentData: Array;
settingsData: Array;
}
-
-export interface UmbBlockViewUrlsPropType {
- editContent?: string;
- editSettings?: string;
-}
-
-export interface UmbBlockViewPropsType {
- label?: string;
- icon?: string;
- contentUdi: string;
- layout?: BlockLayoutType;
- content?: UmbBlockDataType;
- settings?: UmbBlockDataType;
- urls: UmbBlockViewUrlsPropType;
-}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-manager.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-manager.ts
index 6178d50d81..54bcd7aeff 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-manager.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-manager.ts
@@ -31,6 +31,10 @@ export class UmbBlockElementManager extends UmbControllerBase {
this.observe(this.contentTypeId, (id) => this.structure.loadType(id));
}
+ reset() {
+ this.#data.setValue(undefined);
+ }
+
setData(data: UmbBlockDataType | undefined) {
this.#data.setValue(data);
this.#getDataResolver();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts
index bb4a88e1d6..0464b2fe88 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts
@@ -112,13 +112,24 @@ export class UmbBlockWorkspaceContext {
@@ -183,56 +258,6 @@ export class UmbBlockWorkspaceContext import('./custom-view.element.js'),
+ forContentTypeAlias: 'elementTypeHeadline',
+ forBlockEditor: 'block-grid',
+};
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/manifests.ts
index 80e1e2bf86..7427ab0b53 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/manifests.ts
@@ -4,8 +4,11 @@ import { manifests as blockListManifests } from './block-list/manifests.js';
import { manifests as blockRteManifests } from './block-rte/manifests.js';
import { manifests as blockTypeManifests } from './block-type/manifests.js';
import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
+// TODO: Remove test custom view, or transfer to test or similar?
+//import { manifest } from './custom-view/manifest.js';
export const manifests: Array = [
+ //manifest,
...blockManifests,
...blockTypeManifests,
...blockListManifests,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/code-editor/code-editor.controller.ts b/src/Umbraco.Web.UI.Client/src/packages/code-editor/code-editor.controller.ts
similarity index 97%
rename from src/Umbraco.Web.UI.Client/src/packages/templating/code-editor/code-editor.controller.ts
rename to src/Umbraco.Web.UI.Client/src/packages/code-editor/code-editor.controller.ts
index b1a417ebc5..a4c041da7a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/code-editor/code-editor.controller.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/code-editor/code-editor.controller.ts
@@ -8,10 +8,11 @@ import type {
UmbCodeEditorHost,
UmbCodeEditorRange,
UmbCodeEditorSelection,
-} from './code-editor.model.js';
+} from './models/code-editor.model.js';
import { themes } from './themes/index.js';
import { monaco } from '@umbraco-cms/backoffice/external/monaco-editor';
import { UmbChangeEvent, UmbInputEvent } from '@umbraco-cms/backoffice/event';
+import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
//TODO - consider firing change event on blur
@@ -27,9 +28,11 @@ import { UmbChangeEvent, UmbInputEvent } from '@umbraco-cms/backoffice/event';
* @export
* @class UmbCodeEditor
*/
-export class UmbCodeEditorController {
+export class UmbCodeEditorController extends UmbControllerBase {
#host: UmbCodeEditorHost;
+
#editor?: monaco.editor.IStandaloneCodeEditor;
+
/**
* The monaco editor object. This is the actual monaco editor object. It is exposed for advanced usage, but mind the fact that editor might be swapped in the future for a different library, so use on your own responsibility. For more information see [monaco editor API](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IStandaloneCodeEditor.html).
*
@@ -41,6 +44,7 @@ export class UmbCodeEditorController {
}
#options: CodeEditorConstructorOptions = {};
+
/**
* The options used to create the editor.
*
@@ -63,6 +67,7 @@ export class UmbCodeEditorController {
};
#position: UmbCodeEditorCursorPosition | null = null;
+
/**
* Provides the current position of the cursor.
*
@@ -72,7 +77,9 @@ export class UmbCodeEditorController {
get position() {
return this.#position;
}
+
#secondaryPositions: UmbCodeEditorCursorPosition[] = [];
+
/**
* Provides positions of all the secondary cursors.
*
@@ -102,6 +109,7 @@ export class UmbCodeEditorController {
this.#editor.setValue(newValue ?? '');
}
}
+
/**
* Provides the current model of the editor. For advanced usage. Bare in mind that in case of the monaco library being swapped in the future, this might not be available. For more information see [monaco editor model API](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.ITextModel.html).
*
@@ -112,6 +120,7 @@ export class UmbCodeEditorController {
if (!this.#editor) return null;
return this.#editor.getModel();
}
+
/**
* Creates an instance of UmbCodeEditor. You should instantiate this class through the `UmbCodeEditorHost` interface and that should happen when inside DOM nodes of the host container are available, otherwise the editor will not be able to initialize, for example in lit `firstUpdated` lifecycle hook. It will make host emit change and input events when the value of the editor changes.
* @param {UmbCodeEditorHost} host
@@ -119,6 +128,7 @@ export class UmbCodeEditorController {
* @memberof UmbCodeEditor
*/
constructor(host: UmbCodeEditorHost, options?: CodeEditorConstructorOptions) {
+ super(host);
this.#options = { ...options };
this.#host = host;
this.#registerThemes();
@@ -144,6 +154,7 @@ export class UmbCodeEditorController {
this.#editor?.onDidChangeModel(() => {
this.#host.dispatchEvent(new UmbChangeEvent());
});
+
this.#editor?.onDidChangeCursorPosition((e) => {
this.#position = e.position;
this.#secondaryPositions = e.secondaryPositions;
@@ -184,14 +195,8 @@ export class UmbCodeEditorController {
const mergedOptions = { ...this.#defaultMonacoOptions, ...this.#mapOptions(options) };
- this.#editor = monaco.editor.create(this.#host.container, {
- ...mergedOptions,
- value: this.#host.code ?? '',
- language: this.#host.language,
- theme: this.#host.theme,
- readOnly: this.#host.readonly,
- ariaLabel: this.#host.label,
- });
+ this.#editor = monaco.editor.create(this.#host.container, mergedOptions);
+
this.#initiateEvents();
}
/**
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/code-editor/code-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/code-editor/components/code-editor.element.ts
similarity index 54%
rename from src/Umbraco.Web.UI.Client/src/packages/templating/code-editor/code-editor.element.ts
rename to src/Umbraco.Web.UI.Client/src/packages/code-editor/components/code-editor.element.ts
index c7858ecfda..128b78982a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/code-editor/code-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/code-editor/components/code-editor.element.ts
@@ -1,12 +1,29 @@
-import { UmbCodeEditorController } from './code-editor.controller.js';
-import type { CodeEditorLanguage, CodeEditorSearchOptions, UmbCodeEditorHost } from './code-editor.model.js';
-import { CodeEditorTheme } from './code-editor.model.js';
+import type { UmbCodeEditorController } from '../code-editor.controller.js';
+import {
+ type CodeEditorConstructorOptions,
+ CodeEditorTheme,
+ UmbCodeEditorLoadedEvent,
+ type CodeEditorLanguage,
+ type CodeEditorSearchOptions,
+ type UmbCodeEditorHost,
+} from '../models/index.js';
import { UMB_THEME_CONTEXT } from '@umbraco-cms/backoffice/themes';
-import { monacoEditorStyles, monacoJumpingCursorHack } from '@umbraco-cms/backoffice/external/monaco-editor';
import type { PropertyValues, Ref } from '@umbraco-cms/backoffice/external/lit';
-import { css, html, createRef, ref, customElement, property } from '@umbraco-cms/backoffice/external/lit';
+import {
+ createRef,
+ css,
+ customElement,
+ html,
+ property,
+ ref,
+ state,
+ unsafeCSS,
+ when,
+} from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+const elementName = 'umb-code-editor';
+
/**
* A custom element that renders a code editor. Code editor is based on the Monaco Editor library.
* The element will listen to the theme context and update the theme accordingly.
@@ -20,8 +37,9 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
* @implements {UmbCodeEditorHost}
* @fires input - Fired when the value of the editor changes.
* @fires change - Fired when the entire model of editor is replaced.
+ * @fires loaded - Fired when the editor is loaded and ready to use.
*/
-@customElement('umb-code-editor')
+@customElement(elementName)
export class UmbCodeEditorElement extends UmbLitElement implements UmbCodeEditorHost {
private containerRef: Ref = createRef();
@@ -35,6 +53,7 @@ export class UmbCodeEditorElement extends UmbLitElement implements UmbCodeEditor
get editor() {
return this.#editor;
}
+
/**
* Theme of the editor. Default is light. Element will listen to the theme context and update the theme accordingly.
*
@@ -43,6 +62,7 @@ export class UmbCodeEditorElement extends UmbLitElement implements UmbCodeEditor
*/
@property()
theme: CodeEditorTheme = CodeEditorTheme.Light;
+
/**
* Language of the editor. Default is javascript.
*
@@ -51,16 +71,18 @@ export class UmbCodeEditorElement extends UmbLitElement implements UmbCodeEditor
*/
@property()
language: CodeEditorLanguage = 'javascript';
+
/**
* Label of the editor. Default is 'Code Editor'.
*
* @memberof UmbCodeEditorElement
*/
@property()
- label = 'Code Editor';
+ label?: string;
//TODO - this should be called a value
#code = '';
+
/**
* Value of the editor. Default is empty string.
*
@@ -80,16 +102,56 @@ export class UmbCodeEditorElement extends UmbLitElement implements UmbCodeEditor
}
this.requestUpdate('code', oldValue);
}
+
/**
- * Whether the editor is readonly. Default is false.
+ * Whether the editor is readonly.
*
* @memberof UmbCodeEditorElement
*/
@property({ type: Boolean, attribute: 'readonly' })
readonly = false;
+ /**
+ * Whether to show line numbers.
+ *
+ * @memberof UmbCodeEditorElement
+ */
+ @property({ type: Boolean, attribute: 'disable-line-numbers' })
+ disableLineNumbers = false;
+
+ /**
+ * Whether to show minimap.
+ *
+ * @memberof UmbCodeEditorElement
+ */
+ @property({ type: Boolean, attribute: 'disable-minimap' })
+ disableMinimap = false;
+
+ /**
+ * Whether to enable word wrap. Default is false.
+ *
+ * @memberof UmbCodeEditorElement
+ */
+ @property({ type: Boolean, attribute: 'word-wrap' })
+ wordWrap = false;
+
+ /**
+ * Whether to enable folding. Default is true.
+ *
+ * @memberof UmbCodeEditorElement
+ */
+ @property({ type: Boolean, attribute: 'disable-folding' })
+ disableFolding = false;
+
+ @state()
+ private _loading = true;
+
+ @state()
+ private _styles?: string;
+
constructor() {
super();
+
this.consumeContext(UMB_THEME_CONTEXT, (instance) => {
this.observe(
instance.theme,
@@ -101,19 +163,49 @@ export class UmbCodeEditorElement extends UmbLitElement implements UmbCodeEditor
});
}
- override firstUpdated() {
- this.#editor = new UmbCodeEditorController(this);
+ override async firstUpdated() {
+ const { styles } = await import('@umbraco-cms/backoffice/external/monaco-editor');
+ this._styles = styles;
+
+ const { UmbCodeEditorController } = await import('../code-editor.controller.js');
+
+ // Options
+ this.#editor = new UmbCodeEditorController(this, this.#constructorOptions());
+
+ this._loading = false;
+ this.dispatchEvent(new UmbCodeEditorLoadedEvent());
}
protected override updated(_changedProperties: PropertyValues): void {
- if (_changedProperties.has('theme') || _changedProperties.has('language')) {
- this.#editor?.updateOptions({
- theme: this.theme,
- language: this.language,
- });
+ if (
+ _changedProperties.has('theme') ||
+ _changedProperties.has('language') ||
+ _changedProperties.has('disableLineNumbers') ||
+ _changedProperties.has('disableMinimap') ||
+ _changedProperties.has('wordWrap') ||
+ _changedProperties.has('readonly') ||
+ _changedProperties.has('code') ||
+ _changedProperties.has('label') ||
+ _changedProperties.has('disableFolding')
+ ) {
+ this.#editor?.updateOptions(this.#constructorOptions());
}
}
+ #constructorOptions(): CodeEditorConstructorOptions {
+ return {
+ language: this.language,
+ theme: this.theme,
+ ariaLabel: this.label ?? this.localize.term('codeEditor_label'),
+ lineNumbers: !this.disableLineNumbers,
+ minimap: !this.disableMinimap,
+ wordWrap: this.wordWrap ? 'on' : 'off',
+ readOnly: this.readonly,
+ folding: !this.disableFolding,
+ value: this.code,
+ };
+ }
+
#translateTheme(theme: string) {
switch (theme) {
case 'umb-light-theme':
@@ -149,16 +241,34 @@ export class UmbCodeEditorElement extends UmbLitElement implements UmbCodeEditor
}
override render() {
- return html`
`;
+ return html`
+ ${this.#renderStyles()}
+ ${when(this._loading, () => html`
`)}
+
+ `;
+ }
+
+ #renderStyles() {
+ if (!this._styles) return;
+ return html`
+
+ `;
}
static override styles = [
- monacoEditorStyles,
- monacoJumpingCursorHack,
css`
:host {
display: block;
}
+
+ #loader-container {
+ display: grid;
+ place-items: center;
+ min-height: calc(100dvh - 260px);
+ }
+
#editor-container {
width: var(--editor-width);
height: var(--editor-height, 100%);
@@ -167,6 +277,12 @@ export class UmbCodeEditorElement extends UmbLitElement implements UmbCodeEditor
--vscode-scrollbarSlider-background: var(--uui-color-disabled-contrast);
--vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
--vscode-scrollbarSlider-activeBackground: rgba(0, 0, 0, 0.6);
+
+ /* a hacky workaround this issue: https://github.com/microsoft/monaco-editor/issues/3217
+ should probably be removed when the issue is fixed */
+ .view-lines {
+ font-feature-settings: revert !important;
+ }
}
`,
];
@@ -174,6 +290,6 @@ export class UmbCodeEditorElement extends UmbLitElement implements UmbCodeEditor
declare global {
interface HTMLElementTagNameMap {
- 'umb-code-editor': UmbCodeEditorElement;
+ [elementName]: UmbCodeEditorElement;
}
}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/code-editor/components/code-editor.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/code-editor/components/code-editor.stories.ts
new file mode 100644
index 0000000000..f9f096bf96
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/code-editor/components/code-editor.stories.ts
@@ -0,0 +1,247 @@
+import type { CodeEditorLanguage } from '../models/code-editor.model.js';
+import { CodeEditorTheme } from '../models/code-editor.model.js';
+import type { UmbCodeEditorElement } from './code-editor.element.js';
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from '@umbraco-cms/backoffice/external/lit';
+
+import './code-editor.element.js';
+
+const meta: Meta = {
+ title: 'Components/Code Editor',
+ component: 'umb-code-editor',
+ decorators: [(story) => html`${story()}
`],
+ parameters: { layout: 'fullscreen' },
+ argTypes: {
+ theme: {
+ control: 'select',
+ options: [
+ CodeEditorTheme.Dark,
+ CodeEditorTheme.Light,
+ CodeEditorTheme.HighContrastLight,
+ CodeEditorTheme.HighContrastLight,
+ ],
+ },
+ },
+};
+
+const codeSnippets: Record = {
+ csharp: `using System;
+
+namespace HelloWorld;
+
+public class Program
+{
+ public static void Main()
+ {
+ Console.WriteLine("Hello World");
+ }
+}`,
+ javascript: `// Returns "banana"
+('b' + 'a' + + 'a' + 'a').toLowerCase();`,
+ css: `:host {
+ display: flex;
+ background-color: var(--uui-color-background);
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+}
+
+#header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ height: 70px;
+ background-color: var(--uui-color-surface);
+ border-bottom: 1px solid var(--uui-color-border);
+ box-sizing: border-box;
+}
+
+#headline {
+ display: block;
+ margin: 0 var(--uui-size-layout-1);
+}
+
+#tabs {
+ margin-left: auto;
+}`,
+ html: `
+
+
+Page Title
+
+
+
+This is a Heading
+This is a paragraph.
+
+
+`,
+ razor: `@using Umbraco.Extensions
+@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
+@{
+ if (Model?.Areas.Any() != true) { return; }
+}
+
+
+ @foreach (var area in Model.Areas)
+ {
+ @await Html.GetBlockGridItemAreaHtmlAsync(area)
+ }
+
`,
+ markdown: `
+You will like those projects!
+
+---
+
+# h1 Heading 8-)
+## h2 Heading
+### h3 Heading
+#### h4 Heading
+##### h5 Heading
+###### h6 Heading
+
+
+## Horizontal Rules
+
+___
+
+---
+
+***
+
+
+## Typographic replacements
+
+Enable typographer option to see result.
+
+(c) (C) (r) (R) (tm) (TM) (p) (P) +-
+
+test.. test... test..... test?..... test!....
+
+!!!!!! ???? ,, -- ---
+
+"Smartypants, double quotes" and 'single quotes'`,
+ typescript: `import { UmbTemplateRepository } from '../repository/template.repository.js';
+import { UmbWorkspaceContextBase } from '../../../shared/components/workspace/workspace-context/workspace-context.js';
+import { UmbObjectState } from '@umbraco-cms/observable-api';
+import { TemplateModel } from '@umbraco-cms/backend-api';
+import { UmbControllerHostElement } from '@umbraco-cms/controller';
+
+export class UmbTemplateWorkspaceContext extends UmbWorkspaceContext {
+ #data = new UmbObjectState(undefined);
+ data = this.#data.asObservable();
+ name = this.#data.asObservablePart((data) => data?.name);
+ content = this.#data.asObservablePart((data) => data?.content);
+
+ constructor(host: UmbControllerHostElement) {
+ super(host, 'Umb.Workspace.Template', new UmbTemplateRepository(host));
+ }
+
+ getData() {
+ return this.#data.getValue();
+ }
+
+ setName(value: string) {
+ this.#data.setValue({ ...this.#data.value, name: value });
+ }
+
+ setContent(value: string) {
+ this.#data.setValue({ ...this.#data.value, content: value });
+ }
+
+ async load(entityId: string) {
+ const { data } = await this.repository.requestByKey(entityId);
+ if (data) {
+ this.setIsNew(false);
+ this.#data.setValue(data);
+ }
+ }
+
+ async createScaffold(parentId: string | null) {
+ const { data } = await this.repository.createScaffold(parentId);
+ if (!data) return;
+ this.setIsNew(true);
+ this.#data.setValue(data);
+ }
+}`,
+ json: `{
+ "compilerOptions": {
+ "module": "esnext",
+ "target": "esnext",
+ "lib": ["es2020", "dom", "dom.iterable"],
+ "declaration": true,
+ "emitDeclarationOnly": true,
+ "noEmitOnError": true,
+ "outDir": "./types",
+ "strict": true,
+ "noImplicitReturns": true,
+ "noFallthroughCasesInSwitch": true,
+ "moduleResolution": "node",
+ "isolatedModules": true,
+ "allowSyntheticDefaultImports": true,
+ "experimentalDecorators": true,
+ "forceConsistentCasingInFileNames": true,
+ "useDefineForClassFields": false,
+ "skipLibCheck": true,
+ "resolveJsonModule": true,
+ "baseUrl": ".",
+ "paths": {
+ "@umbraco-cms/css": ["libs/css/custom-properties.css"],
+ "@umbraco-cms/modal": ["src/core/modal"],
+ "@umbraco-cms/models": ["libs/models"],
+ "@umbraco-cms/backend-api": ["libs/backend-api"],
+ "@umbraco-cms/context-api": ["libs/context-api"],
+ "@umbraco-cms/controller": ["libs/controller"],
+ "@umbraco-cms/element": ["libs/element"],
+ "@umbraco-cms/extension-api": ["libs/extension-api"],
+ "@umbraco-cms/extension-registry": ["libs/extension-registry"],
+ "@umbraco-cms/notification": ["libs/notification"],
+ "@umbraco-cms/observable-api": ["libs/observable-api"],
+ "@umbraco-cms/events": ["libs/events"],
+ "@umbraco-cms/entity-action": ["libs/entity-action"],
+ "@umbraco-cms/workspace": ["libs/workspace"],
+ "@umbraco-cms/utils": ["libs/utils"],
+ "@umbraco-cms/router": ["libs/router"],
+ "@umbraco-cms/sorter": ["libs/sorter"],
+ "@umbraco-cms/test-utils": ["libs/test-utils"],
+ "@umbraco-cms/repository": ["libs/repository"],
+ "@umbraco-cms/resources": ["libs/resources"],
+ "@umbraco-cms/store": ["libs/store"],
+ "@umbraco-cms/components/*": ["src/backoffice/components/*"],
+ "@umbraco-cms/sections/*": ["src/backoffice/sections/*"]
+ }
+ },
+ "include": ["src/**/*.ts", "apps/**/*.ts", "libs/**/*.ts", "e2e/**/*.ts"],
+ "references": [
+ {
+ "path": "./tsconfig.node.json"
+ }
+ ]
+}`,
+};
+
+export default meta;
+type Story = StoryObj;
+
+const [Csharp, Javascript, Css, Html, Razor, Markdown, Typescript, Json]: Story[] = Object.keys(codeSnippets).map(
+ (language) => {
+ return {
+ args: {
+ language: language as CodeEditorLanguage,
+ code: codeSnippets[language as CodeEditorLanguage],
+ },
+ };
+ },
+);
+
+const Themes: Story = {
+ args: {
+ language: 'javascript',
+ code: codeSnippets.javascript,
+ theme: CodeEditorTheme.Dark,
+ },
+};
+
+export { Csharp, Javascript, Css, Html, Razor, Markdown, Typescript, Json, Themes };
diff --git a/src/Umbraco.Web.UI.Client/src/packages/code-editor/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/code-editor/components/index.ts
new file mode 100644
index 0000000000..3cfc04bfa2
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/code-editor/components/index.ts
@@ -0,0 +1 @@
+export * from './code-editor.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/code-editor/index.ts b/src/Umbraco.Web.UI.Client/src/packages/code-editor/index.ts
new file mode 100644
index 0000000000..60335eb6e1
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/code-editor/index.ts
@@ -0,0 +1,11 @@
+export * from './components/index.js';
+export * from './models/index.js';
+export type { UmbCodeEditorController } from './code-editor.controller.js';
+
+/**
+ * @deprecated Use `import from '@umbraco-cms/backoffice/code-editor';` directly.
+ * This function will be removed in Umbraco 15.
+ */
+export function loadCodeEditor() {
+ return import('@umbraco-cms/backoffice/code-editor');
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/code-editor/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/code-editor/manifests.ts
new file mode 100644
index 0000000000..929a1810ad
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/code-editor/manifests.ts
@@ -0,0 +1,4 @@
+import { manifest as propertyEditorManifest } from './property-editor/manifests.js';
+import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array = [propertyEditorManifest];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/code-editor/models/code-editor-loaded.event.ts b/src/Umbraco.Web.UI.Client/src/packages/code-editor/models/code-editor-loaded.event.ts
new file mode 100644
index 0000000000..9be89b5727
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/code-editor/models/code-editor-loaded.event.ts
@@ -0,0 +1,7 @@
+export class UmbCodeEditorLoadedEvent extends Event {
+ public static readonly TYPE = 'loaded';
+
+ public constructor() {
+ super(UmbCodeEditorLoadedEvent.TYPE, { bubbles: true, cancelable: false });
+ }
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/code-editor/code-editor.model.ts b/src/Umbraco.Web.UI.Client/src/packages/code-editor/models/code-editor.model.ts
similarity index 95%
rename from src/Umbraco.Web.UI.Client/src/packages/templating/code-editor/code-editor.model.ts
rename to src/Umbraco.Web.UI.Client/src/packages/code-editor/models/code-editor.model.ts
index b1f28f2fae..30109cb436 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/code-editor/code-editor.model.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/code-editor/models/code-editor.model.ts
@@ -1,4 +1,14 @@
-export type CodeEditorLanguage = 'razor' | 'typescript' | 'javascript' | 'css' | 'markdown' | 'json' | 'html';
+import type { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+
+export type CodeEditorLanguage =
+ | 'csharp'
+ | 'razor'
+ | 'typescript'
+ | 'javascript'
+ | 'css'
+ | 'markdown'
+ | 'json'
+ | 'html';
export enum CodeEditorTheme {
Light = 'umb-light',
@@ -7,13 +17,13 @@ export enum CodeEditorTheme {
HighContrastDark = 'umb-hc-dark',
}
-export interface UmbCodeEditorHost extends HTMLElement {
+export interface UmbCodeEditorHost extends UmbLitElement {
container: HTMLElement;
language: CodeEditorLanguage;
theme: CodeEditorTheme;
code: string;
readonly: boolean;
- label: string;
+ label?: string;
}
export interface UmbCodeEditorCursorPosition {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/code-editor/models/index.ts b/src/Umbraco.Web.UI.Client/src/packages/code-editor/models/index.ts
new file mode 100644
index 0000000000..21c8883042
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/code-editor/models/index.ts
@@ -0,0 +1,2 @@
+export * from './code-editor-loaded.event.js';
+export * from './code-editor.model.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/code-editor/package.json b/src/Umbraco.Web.UI.Client/src/packages/code-editor/package.json
new file mode 100644
index 0000000000..9e80323c74
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/code-editor/package.json
@@ -0,0 +1,8 @@
+{
+ "name": "@umbraco-backoffice/code-editor",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "build": "vite build"
+ }
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/code-editor/property-editor/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/code-editor/property-editor/manifests.ts
new file mode 100644
index 0000000000..5e6142daa1
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/code-editor/property-editor/manifests.ts
@@ -0,0 +1,71 @@
+import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifest: ManifestPropertyEditorUi = {
+ type: 'propertyEditorUi',
+ alias: 'Umb.PropertyEditorUi.CodeEditor',
+ name: 'Code Editor Property Editor UI',
+ element: () => import('./property-editor-ui-code-editor.element.js'),
+ meta: {
+ label: 'Code Editor',
+ propertyEditorSchemaAlias: 'Umbraco.Plain.String',
+ icon: 'icon-code',
+ group: 'common',
+ settings: {
+ properties: [
+ {
+ alias: 'language',
+ label: '#codeEditor_languageConfigLabel',
+ description: '{#codeEditor_languageConfigDescription}',
+ propertyEditorUiAlias: 'Umb.PropertyEditorUi.Dropdown',
+ config: [
+ {
+ alias: 'items',
+ value: [
+ { name: 'C#', value: 'csharp' },
+ { name: 'CSS', value: 'css' },
+ { name: 'HTML', value: 'html' },
+ { name: 'JavaScript', value: 'javascript' },
+ { name: 'JSON', value: 'json' },
+ { name: 'Markdown', value: 'markdown' },
+ { name: 'Razor (CSHTML)', value: 'razor' },
+ { name: 'TypeScript', value: 'typescript' },
+ ],
+ },
+ ],
+ },
+ {
+ alias: 'height',
+ label: '#codeEditor_heightConfigLabel',
+ description: '{#codeEditor_heightConfigDescription}',
+ propertyEditorUiAlias: 'Umb.PropertyEditorUi.Integer',
+ config: [{ alias: 'min', value: 0 }],
+ },
+ {
+ alias: 'lineNumbers',
+ label: '#codeEditor_lineNumbersConfigLabel',
+ description: '{#codeEditor_lineNumbersConfigDescription}',
+ propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
+ },
+ {
+ alias: 'minimap',
+ label: '#codeEditor_minimapConfigLabel',
+ description: '{#codeEditor_minimapConfigDescription}',
+ propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
+ },
+ {
+ alias: 'wordWrap',
+ label: '#codeEditor_wordWrapConfigLabel',
+ description: '{#codeEditor_wordWrapConfigDescription}',
+ propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
+ },
+ ],
+ defaultData: [
+ { alias: 'language', value: 'javascript' },
+ { alias: 'height', value: 400 },
+ { alias: 'lineNumbers', value: true },
+ { alias: 'minimap', value: true },
+ { alias: 'wordWrap', value: false },
+ ],
+ },
+ },
+};
diff --git a/src/Umbraco.Web.UI.Client/src/packages/code-editor/property-editor/property-editor-ui-code-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/code-editor/property-editor/property-editor-ui-code-editor.element.ts
new file mode 100644
index 0000000000..971ed1111a
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/code-editor/property-editor/property-editor-ui-code-editor.element.ts
@@ -0,0 +1,83 @@
+import type { CodeEditorLanguage } from '../models/index.js';
+import type { UmbCodeEditorElement } from '../components/code-editor.element.js';
+import { css, customElement, html, property, state, styleMap } from '@umbraco-cms/backoffice/external/lit';
+import { UmbInputEvent } from '@umbraco-cms/backoffice/event';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
+import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
+
+import '../components/code-editor.element.js';
+
+const elementName = 'umb-property-editor-ui-code-editor';
+
+@customElement(elementName)
+export class UmbPropertyEditorUICodeEditorElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+ #defaultLanguage: CodeEditorLanguage = 'javascript';
+
+ @state()
+ private _language?: CodeEditorLanguage = this.#defaultLanguage;
+
+ @state()
+ private _height = 400;
+
+ @state()
+ private _lineNumbers = true;
+
+ @state()
+ private _minimap = true;
+
+ @state()
+ private _wordWrap = false;
+
+ @property()
+ value = '';
+
+ @property({ attribute: false })
+ public set config(config: UmbPropertyEditorConfigCollection | undefined) {
+ if (!config) return;
+
+ this._language = config?.getValueByAlias('language') ?? this.#defaultLanguage;
+ this._height = Number(config?.getValueByAlias('height')) || 400;
+ this._lineNumbers = config?.getValueByAlias('lineNumbers') ?? false;
+ this._minimap = config?.getValueByAlias('minimap') ?? false;
+ this._wordWrap = config?.getValueByAlias('wordWrap') ?? false;
+ }
+
+ #onChange(event: UmbInputEvent & { target: UmbCodeEditorElement }) {
+ if (!(event instanceof UmbInputEvent)) return;
+ this.value = event.target.code;
+ this.dispatchEvent(new UmbPropertyValueChangeEvent());
+ }
+
+ override render() {
+ return html`
+
+
+ `;
+ }
+
+ static override styles = [
+ css`
+ umb-code-editor {
+ border-radius: var(--uui-border-radius);
+ border: 1px solid var(--uui-color-divider-emphasis);
+ }
+ `,
+ ];
+}
+
+export { UmbPropertyEditorUICodeEditorElement as element };
+
+declare global {
+ interface HTMLElementTagNameMap {
+ [elementName]: UmbPropertyEditorUICodeEditorElement;
+ }
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/code-editor/property-editor/property-editor-ui-code-editor.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/code-editor/property-editor/property-editor-ui-code-editor.stories.ts
new file mode 100644
index 0000000000..6abed142e6
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/code-editor/property-editor/property-editor-ui-code-editor.stories.ts
@@ -0,0 +1,17 @@
+import type { UmbPropertyEditorUICodeEditorElement } from './property-editor-ui-code-editor.element.js';
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from '@umbraco-cms/backoffice/external/lit';
+
+import './property-editor-ui-code-editor.element.js';
+
+const meta: Meta = {
+ title: 'Property Editor UIs/Code Editor',
+ component: 'umb-property-editor-ui-code-editor',
+ id: 'umb-property-editor-ui-code-editor',
+ decorators: [(story) => html`${story()}
`],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Overview: Story = {};
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/code-editor/themes/code-editor.dark.theme.ts b/src/Umbraco.Web.UI.Client/src/packages/code-editor/themes/code-editor.dark.theme.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/templating/code-editor/themes/code-editor.dark.theme.ts
rename to src/Umbraco.Web.UI.Client/src/packages/code-editor/themes/code-editor.dark.theme.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/code-editor/themes/code-editor.hc-dark.theme.ts b/src/Umbraco.Web.UI.Client/src/packages/code-editor/themes/code-editor.hc-dark.theme.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/templating/code-editor/themes/code-editor.hc-dark.theme.ts
rename to src/Umbraco.Web.UI.Client/src/packages/code-editor/themes/code-editor.hc-dark.theme.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/code-editor/themes/code-editor.hc-light.theme.ts b/src/Umbraco.Web.UI.Client/src/packages/code-editor/themes/code-editor.hc-light.theme.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/templating/code-editor/themes/code-editor.hc-light.theme.ts
rename to src/Umbraco.Web.UI.Client/src/packages/code-editor/themes/code-editor.hc-light.theme.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/code-editor/themes/code-editor.light.theme.ts b/src/Umbraco.Web.UI.Client/src/packages/code-editor/themes/code-editor.light.theme.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/templating/code-editor/themes/code-editor.light.theme.ts
rename to src/Umbraco.Web.UI.Client/src/packages/code-editor/themes/code-editor.light.theme.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/code-editor/themes/index.ts b/src/Umbraco.Web.UI.Client/src/packages/code-editor/themes/index.ts
similarity index 92%
rename from src/Umbraco.Web.UI.Client/src/packages/templating/code-editor/themes/index.ts
rename to src/Umbraco.Web.UI.Client/src/packages/code-editor/themes/index.ts
index bcaa4ebea6..bf9894f126 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/code-editor/themes/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/code-editor/themes/index.ts
@@ -1,4 +1,4 @@
-import type { CodeEditorTheme } from '../code-editor.model.js';
+import type { CodeEditorTheme } from '../models/code-editor.model.js';
import { UmbCodeEditorThemeHighContrastLight } from './code-editor.hc-light.theme.js';
import { UmbCodeEditorThemeHighContrastDark } from './code-editor.hc-dark.theme.js';
import { UmbCodeEditorThemeLight } from './code-editor.light.theme.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/code-editor/umbraco-package.ts b/src/Umbraco.Web.UI.Client/src/packages/code-editor/umbraco-package.ts
new file mode 100644
index 0000000000..6dffa1cf54
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/code-editor/umbraco-package.ts
@@ -0,0 +1,8 @@
+export const extensions = [
+ {
+ name: 'Umbraco Code Editor Bundle',
+ alias: 'Umb.Bundle.UmbracoCodeEditor',
+ type: 'bundle',
+ js: () => import('./manifests.js'),
+ },
+];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/code-editor/vite.config.ts b/src/Umbraco.Web.UI.Client/src/packages/code-editor/vite.config.ts
new file mode 100644
index 0000000000..dbb19c1a26
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/code-editor/vite.config.ts
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+import { rmSync } from 'fs';
+import { getDefaultConfig } from '../../vite-config-base';
+
+const dist = '../../../dist-cms/packages/code-editor';
+
+// delete the unbundled dist folder
+rmSync(dist, { recursive: true, force: true });
+
+export default defineConfig({
+ ...getDefaultConfig({ dist }),
+});
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/action/collection-action-button.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/action/collection-action-button.element.ts
index 4831180c80..6e33b5d692 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/action/collection-action-button.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/action/collection-action-button.element.ts
@@ -65,17 +65,16 @@ export class UmbCollectionActionButtonElement extends UmbLitElement {
}
override render() {
+ const label = this.manifest?.meta.label ? this.localize.string(this.manifest.meta.label) : this.manifest?.name;
return html`
= {
title: 'Components/Table',
component: 'umb-table',
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/components/property-type-based-property/property-type-based-property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/components/property-type-based-property/property-type-based-property.element.ts
index 7093fe2200..d0dafc2fdc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/components/property-type-based-property/property-type-based-property.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/components/property-type-based-property/property-type-based-property.element.ts
@@ -1,19 +1,17 @@
import type { UmbPropertyEditorConfig } from '../../../property-editor/index.js';
import type { UmbPropertyTypeModel } from '../../types.js';
+import { css, customElement, html, ifDefined, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbContentPropertyContext } from '@umbraco-cms/backoffice/content';
-import type { UmbDataTypeDetailModel } from '@umbraco-cms/backoffice/data-type';
import { UmbDataTypeDetailRepository } from '@umbraco-cms/backoffice/data-type';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { css, html, ifDefined, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import type { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import type { UmbDataTypeDetailModel } from '@umbraco-cms/backoffice/data-type';
+import type { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
+
@customElement('umb-property-type-based-property')
export class UmbPropertyTypeBasedPropertyElement extends UmbLitElement {
@property({ type: Object, attribute: false })
- public get property(): UmbPropertyTypeModel | undefined {
- return this._property;
- }
public set property(value: UmbPropertyTypeModel | undefined) {
const oldProperty = this._property;
this._property = value;
@@ -21,6 +19,9 @@ export class UmbPropertyTypeBasedPropertyElement extends UmbLitElement {
this._observeDataType(this._property?.dataType.unique);
}
}
+ public get property(): UmbPropertyTypeModel | undefined {
+ return this._property;
+ }
private _property?: UmbPropertyTypeModel;
@property({ type: String, attribute: 'data-path' })
@@ -73,16 +74,19 @@ export class UmbPropertyTypeBasedPropertyElement extends UmbLitElement {
}
override render() {
- return this._propertyEditorUiAlias && this._property?.alias
- ? html`
+
+ `;
}
static override styles = [
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/index.ts
index 857ded731a..4cdc48a7a1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/index.ts
@@ -1,3 +1 @@
export * from './composition-picker/composition-picker-modal.token.js';
-export * from './property-type-settings/property-type-settings-modal.token.js';
-export * from './property-type-settings/property-type-settings-modal.context-token.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/manifests.ts
index 7b6a72b557..516bbb553f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/manifests.ts
@@ -7,12 +7,6 @@ const modals: Array = [
name: 'ContentType Composition Picker Modal',
element: () => import('./composition-picker/composition-picker-modal.element.js'),
},
- {
- type: 'modal',
- alias: 'Umb.Modal.PropertyTypeSettings',
- name: 'Property Type Settings Modal',
- element: () => import('./property-type-settings/property-type-settings-modal.element.js'),
- },
];
export const manifests = modals;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/property-type-settings/property-type-settings-modal.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/property-type-settings/property-type-settings-modal.context.ts
deleted file mode 100644
index 708329c498..0000000000
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/property-type-settings/property-type-settings-modal.context.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { UMB_PROPERTY_TYPE_WORKSPACE_CONTEXT } from './property-type-settings-modal.context-token.js';
-import type {
- UmbPropertyTypeSettingsModalData,
- UmbPropertyTypeSettingsModalValue,
-} from './property-type-settings-modal.token.js';
-import type { UmbWorkspaceContext } from '@umbraco-cms/backoffice/workspace';
-import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
-import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
-import { UMB_MODAL_CONTEXT, type UmbModalContext } from '@umbraco-cms/backoffice/modal';
-
-export const UMB_PROPERTY_TYPE_WORKSPACE_ALIAS = 'Umb.Workspace.PropertyType';
-
-/**
- * This is a very simplified workspace context, just to serve one for the imitated property type workspace. (As its not a real workspace, but this does as well provide the ability for extension-conditions to match with this workspace, as entity type and alias is available.) [NL]
- */
-export class UmbPropertyTypeWorkspaceContext
- extends UmbContextBase
- implements UmbWorkspaceContext
-{
- #modal?: UmbModalContext;
-
- constructor(host: UmbControllerHost) {
- super(host, UMB_PROPERTY_TYPE_WORKSPACE_CONTEXT);
-
- this.consumeContext(UMB_MODAL_CONTEXT, (context) => {
- this.#modal = context as UmbModalContext;
- });
- }
-
- get workspaceAlias() {
- return UMB_PROPERTY_TYPE_WORKSPACE_ALIAS;
- }
-
- getUnique() {
- return this.#modal?.getValue()?.alias ?? '';
- }
-
- getEntityType() {
- return 'property-type';
- }
-
- getLabel() {
- return this.#modal?.getValue()?.name ?? '';
- }
-}
-
-export default UmbPropertyTypeWorkspaceContext;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/property-type-settings/property-type-settings-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/property-type-settings/property-type-settings-modal.token.ts
deleted file mode 100644
index 63fe6fe95c..0000000000
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/modals/property-type-settings/property-type-settings-modal.token.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { UmbModalToken } from '../../../modal/token/modal-token.js';
-import type { UmbPropertyTypeModel, UmbPropertyTypeScaffoldModel } from '@umbraco-cms/backoffice/content-type';
-
-export type UmbPropertyTypeSettingsModalData = {
- contentTypeId: string;
-};
-export type UmbPropertyTypeSettingsModalValue = UmbPropertyTypeModel | UmbPropertyTypeScaffoldModel;
-
-export const UMB_PROPERTY_TYPE_SETTINGS_MODAL = new UmbModalToken<
- UmbPropertyTypeSettingsModalData,
- UmbPropertyTypeSettingsModalValue
->('Umb.Modal.PropertyTypeSettings', {
- modal: {
- type: 'sidebar',
- size: 'small',
- },
- value: {
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore
- validation: {},
- },
-});
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-property-structure-helper.class.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-property-structure-helper.class.ts
index 7253d4f84f..55be7cf04d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-property-structure-helper.class.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-property-structure-helper.class.ts
@@ -181,23 +181,6 @@ export class UmbContentTypePropertyStructureHelper
x.find((y) => y.unique === this.#ownerContentTypeUnique),
);
+
private readonly _contentTypeContainers = this.#contentTypes.asObservablePart((x) =>
x.flatMap((x) => x.containers ?? []),
);
@@ -449,61 +449,6 @@ export class UmbContentTypeStructureManager<
this.#contentTypes.updateOne(contentTypeUnique, { containers, properties });
}
- createPropertyScaffold(containerId: string | null = null) {
- const property: UmbPropertyTypeScaffoldModel = {
- id: UmbId.new(),
- container: containerId ? { id: containerId } : null,
- alias: '',
- name: '',
- description: '',
- variesByCulture: false,
- variesBySegment: false,
- validation: {
- mandatory: false,
- mandatoryMessage: null,
- regEx: null,
- regExMessage: null,
- },
- appearance: {
- labelOnTop: false,
- },
- sortOrder: 0,
- };
-
- return property;
- }
-
- async createProperty(contentTypeUnique: string | null, containerId: string | null = null, sortOrder?: number) {
- await this.#init;
- contentTypeUnique = contentTypeUnique ?? this.#ownerContentTypeUnique!;
-
- // If we have a container, we need to ensure it exists, and then update the container with the new parent id. [NL]
- if (containerId) {
- const container = await this.ensureContainerOf(containerId, contentTypeUnique);
- if (!container) {
- throw new Error('Container for inserting property could not be found or created');
- }
- // Correct containerId to the local one: [NL]
- containerId = container.id;
- }
-
- const property = this.createPropertyScaffold(containerId);
- property.sortOrder = sortOrder ?? 0;
-
- const properties: Array = [
- ...(this.#contentTypes.getValue().find((x) => x.unique === contentTypeUnique)?.properties ?? []),
- ];
-
- properties.push(property);
-
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore
- // TODO: fix TS partial complaint
- this.#contentTypes.updateOne(contentTypeUnique, { properties });
-
- return property;
- }
-
async insertProperty(contentTypeUnique: string | null, property: UmbPropertyTypeModel) {
await this.#init;
contentTypeUnique = contentTypeUnique ?? this.#ownerContentTypeUnique!;
@@ -518,6 +463,10 @@ export class UmbContentTypeStructureManager<
property = { ...property, container: { id: container.id } };
}
+ if (property.sortOrder === undefined) {
+ property.sortOrder = 0;
+ }
+
const frozenProperties =
this.#contentTypes.getValue().find((x) => x.unique === contentTypeUnique)?.properties ?? [];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-properties.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-properties.element.ts
index 6a6b6f6697..118809a523 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-properties.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-properties.element.ts
@@ -13,15 +13,16 @@ import {
} from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import {
- UmbContentTypePropertyStructureHelper,
- UMB_PROPERTY_TYPE_SETTINGS_MODAL,
-} from '@umbraco-cms/backoffice/content-type';
+import { UmbContentTypePropertyStructureHelper } from '@umbraco-cms/backoffice/content-type';
import type { UmbContentTypeModel, UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
import { type UmbSorterConfig, UmbSorterController } from '@umbraco-cms/backoffice/sorter';
-import { type UmbModalRouteBuilder, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
+import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
import './content-type-design-editor-property.element.js';
+import {
+ UMB_CREATE_PROPERTY_TYPE_WORKSPACE_PATH_PATTERN,
+ UMB_PROPERTY_TYPE_WORKSPACE_MODAL,
+} from '@umbraco-cms/backoffice/property-type';
const SORTER_CONFIG: UmbSorterConfig = {
getUniqueOfElement: (element) => {
@@ -97,15 +98,16 @@ export class UmbContentTypeDesignEditorPropertiesElement extends UmbLitElement {
return this._containerId;
}
public set containerId(value: string | null | undefined) {
- const oldValue = this._containerId;
- if (value === oldValue) return;
+ if (value === this._containerId) return;
this._containerId = value;
+ this.createPropertyTypeWorkspaceRoutes();
this.#propertyStructureHelper.setContainerId(value);
- this.#addPropertyModal.setUniquePathValue('container-id', value === null ? 'root' : value);
- this.requestUpdate('containerId', oldValue);
+ this.#addPropertyModal?.setUniquePathValue('container-id', value === null ? 'root' : value);
+ this.#editPropertyModal?.setUniquePathValue('container-id', value === null ? 'root' : value);
}
- #addPropertyModal: UmbModalRouteRegistrationController;
+ #addPropertyModal?: UmbModalRouteRegistrationController;
+ #editPropertyModal?: UmbModalRouteRegistrationController;
#propertyStructureHelper = new UmbContentTypePropertyStructureHelper(this);
@@ -116,10 +118,13 @@ export class UmbContentTypeDesignEditorPropertiesElement extends UmbLitElement {
private _propertyStructure: Array = [];
@state()
- private _ownerContentType?: UmbContentTypeModel;
+ private _ownerContentTypeUnique?: string;
@state()
- private _modalRouteBuilderNewProperty?: UmbModalRouteBuilder;
+ private _newPropertyPath?: string;
+
+ @state()
+ private _editPropertyTypePath?: string;
@state()
private _sortModeActive?: boolean;
@@ -147,51 +152,81 @@ export class UmbContentTypeDesignEditorPropertiesElement extends UmbLitElement {
this.consumeContext(UMB_CONTENT_TYPE_WORKSPACE_CONTEXT, async (workspaceContext) => {
this.#propertyStructureHelper.setStructureManager(workspaceContext.structure);
- this.observe(
- workspaceContext.structure.ownerContentType,
- (contentType) => {
- this._ownerContentType = contentType;
- },
- 'observeOwnerContentType',
- );
+ this._ownerContentTypeUnique = workspaceContext.structure.getOwnerContentTypeUnique();
+ this.createPropertyTypeWorkspaceRoutes();
});
this.observe(this.#propertyStructureHelper.propertyStructure, (propertyStructure) => {
this._propertyStructure = propertyStructure;
this.#sorter.setModel(this._propertyStructure);
});
+ }
+
+ createPropertyTypeWorkspaceRoutes() {
+ if (!this._ownerContentTypeUnique || this._containerId === undefined) return;
// Note: Route for adding a new property
- this.#addPropertyModal = new UmbModalRouteRegistrationController(this, UMB_PROPERTY_TYPE_SETTINGS_MODAL)
+ this.#addPropertyModal?.destroy();
+ this.#addPropertyModal = new UmbModalRouteRegistrationController(
+ this,
+ UMB_PROPERTY_TYPE_WORKSPACE_MODAL,
+ 'addPropertyModal',
+ )
.addUniquePaths(['container-id'])
.addAdditionalPath('add-property/:sortOrder')
.onSetup(async (params) => {
// TODO: Make a onInit promise, that can be awaited here.
- if (!this._ownerContentType || this._containerId === undefined) return false;
- const propertyData = await this.#propertyStructureHelper.createPropertyScaffold(this._containerId);
- if (propertyData === undefined) return false;
+ if (!this._ownerContentTypeUnique || this._containerId === undefined) return false;
+
+ const preset: Partial = {};
if (params.sortOrder !== undefined) {
- let sortOrderInt = parseInt(params.sortOrder, 10);
+ let sortOrderInt = parseInt(params.sortOrder);
if (sortOrderInt === -1) {
// Find the highest sortOrder and add 1 to it:
- sortOrderInt = Math.max(...this._propertyStructure.map((x) => x.sortOrder), -1);
+ sortOrderInt = Math.max(...this._propertyStructure.map((x) => x.sortOrder), -1) + 1;
}
- propertyData.sortOrder = sortOrderInt + 1;
+ preset.sortOrder = sortOrderInt;
}
- return { data: { contentTypeId: this._ownerContentType.unique }, value: propertyData };
- })
- .onSubmit(async (value) => {
- if (!this._ownerContentType) return false;
- // TODO: The model requires a data-type to be set, we cheat currently. But this should be re-though when we implement validation(As we most likely will have to com up with partial models for the runtime model.) [NL]
- this.#propertyStructureHelper.insertProperty(value as UmbPropertyTypeModel);
- return true;
+ return { data: { contentTypeUnique: this._ownerContentTypeUnique, preset: undefined } };
})
.observeRouteBuilder((routeBuilder) => {
- this._modalRouteBuilderNewProperty = routeBuilder;
+ this._newPropertyPath =
+ routeBuilder({ sortOrder: '-1' }) +
+ UMB_CREATE_PROPERTY_TYPE_WORKSPACE_PATH_PATTERN.generateLocal({
+ containerUnique: this._containerId!,
+ });
});
+ if (this._containerId !== undefined) {
+ this.#addPropertyModal?.setUniquePathValue(
+ 'container-id',
+ this._containerId === null ? 'root' : this._containerId,
+ );
+ }
+
+ this.#editPropertyModal?.destroy();
+ this.#editPropertyModal = new UmbModalRouteRegistrationController(
+ this,
+ UMB_PROPERTY_TYPE_WORKSPACE_MODAL,
+ 'editPropertyModal',
+ )
+ .addUniquePaths(['container-id'])
+ .addAdditionalPath('edit-property')
+ .onSetup(async () => {
+ if (!this._ownerContentTypeUnique || this._containerId === undefined) return false;
+ return { data: { contentTypeUnique: this._ownerContentTypeUnique, preset: undefined } };
+ })
+ .observeRouteBuilder((routeBuilder) => {
+ this._editPropertyTypePath = routeBuilder(null);
+ });
+ if (this._containerId !== undefined) {
+ this.#editPropertyModal?.setUniquePathValue(
+ 'container-id',
+ this._containerId === null ? 'root' : this._containerId,
+ );
+ }
}
override render() {
- return this._ownerContentType
+ return this._ownerContentTypeUnique
? html`
${repeat(
@@ -202,6 +237,7 @@ export class UmbContentTypeDesignEditorPropertiesElement extends UmbLitElement {
@@ -216,7 +252,7 @@ export class UmbContentTypeDesignEditorPropertiesElement extends UmbLitElement {
() => html`
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/index.ts
index 662c027fcb..4c72bcced7 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/index.ts
@@ -1,2 +1,3 @@
export type * from './content-workspace-context.interface.js';
export * from './content-workspace.context-token.js';
+export * from './views/edit/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/manifests.ts
index d30be86fd2..81565ef37a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/manifests.ts
@@ -1,3 +1,3 @@
-import { contentEditorManifest } from './views/edit/manifest.js';
+import { manifests as contentEditorManifests } from './views/edit/manifests.js';
-export const manifests = [contentEditorManifest];
+export const manifests = [...contentEditorManifests];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/conditions/has-properties/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/conditions/has-properties/constants.ts
new file mode 100644
index 0000000000..a37e6add77
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/conditions/has-properties/constants.ts
@@ -0,0 +1 @@
+export const UMB_CONTENT_HAS_PROPERTIES_WORKSPACE_CONDITION = 'Umb.Condition.Workspace.ContentHasProperties';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/conditions/has-properties/content-has-properties.condition.manifest.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/conditions/has-properties/content-has-properties.condition.manifest.ts
new file mode 100644
index 0000000000..654bbb853b
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/conditions/has-properties/content-has-properties.condition.manifest.ts
@@ -0,0 +1,8 @@
+import type { ManifestCondition } from '@umbraco-cms/backoffice/extension-api';
+
+export const manifest: ManifestCondition = {
+ type: 'condition',
+ name: 'Content has properties Workspace Condition',
+ alias: 'Umb.Condition.Workspace.ContentHasProperties',
+ api: () => import('./content-has-properties.condition.js'),
+};
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/conditions/has-properties/content-has-properties.condition.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/conditions/has-properties/content-has-properties.condition.ts
new file mode 100644
index 0000000000..34d6ebe6aa
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/conditions/has-properties/content-has-properties.condition.ts
@@ -0,0 +1,30 @@
+import { UMB_CONTENT_WORKSPACE_CONTEXT } from '../../../../content-workspace.context-token.js';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import type {
+ UmbConditionConfigBase,
+ UmbConditionControllerArguments,
+ UmbExtensionCondition,
+} from '@umbraco-cms/backoffice/extension-api';
+import { UmbConditionBase } from '@umbraco-cms/backoffice/extension-registry';
+
+export class UmbContentHasPropertiesWorkspaceCondition
+ extends UmbConditionBase
+ implements UmbExtensionCondition
+{
+ constructor(host: UmbControllerHost, args: UmbConditionControllerArguments) {
+ super(host, args);
+
+ this.consumeContext(UMB_CONTENT_WORKSPACE_CONTEXT, (context) => {
+ this.observe(
+ context.structure.contentTypes,
+ (contentTypes) => {
+ const hasProperties = contentTypes.some((contentType) => contentType.properties.length > 0);
+ this.permitted = hasProperties;
+ },
+ 'contentTypesObserver',
+ );
+ });
+ }
+}
+
+export { UmbContentHasPropertiesWorkspaceCondition as api };
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/conditions/has-properties/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/conditions/has-properties/index.ts
new file mode 100644
index 0000000000..4f07201dcf
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/conditions/has-properties/index.ts
@@ -0,0 +1 @@
+export * from './constants.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/conditions/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/conditions/manifests.ts
new file mode 100644
index 0000000000..d4221afab0
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/conditions/manifests.ts
@@ -0,0 +1,3 @@
+import { manifest as hasPropertiesManifest } from './has-properties/content-has-properties.condition.manifest.js';
+
+export const manifests = [hasPropertiesManifest];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/index.ts
new file mode 100644
index 0000000000..1637f3a5e7
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/index.ts
@@ -0,0 +1 @@
+export * from './conditions/has-properties/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/manifest.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/manifests.ts
similarity index 67%
rename from src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/manifest.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/manifests.ts
index 3cb898bd97..caa2ec28d8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/manifest.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/manifests.ts
@@ -1,6 +1,7 @@
+import { manifests as conditionsManifests } from './conditions/manifests.js';
import type { UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry';
-export const contentEditorManifest: UmbBackofficeManifestKind = {
+const contentEditorManifest: UmbBackofficeManifestKind = {
type: 'kind',
alias: 'Umb.Kind.WorkspaceView.ContentEditor',
matchKind: 'contentEditor',
@@ -17,3 +18,5 @@ export const contentEditorManifest: UmbBackofficeManifestKind = {
},
},
};
+
+export const manifests = [contentEditorManifest, ...conditionsManifests];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/duplicate-to/duplicate-to-repository.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/duplicate-to/duplicate-to-repository.interface.ts
new file mode 100644
index 0000000000..2e1eb33be9
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/duplicate-to/duplicate-to-repository.interface.ts
@@ -0,0 +1,7 @@
+import type { UmbRepositoryErrorResponse } from '../../../repository/types.js';
+import type { UmbBulkDuplicateToRequestArgs } from './types.js';
+import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
+
+export interface UmbBulkDuplicateToRepository extends UmbApi {
+ requestBulkDuplicateTo(args: UmbBulkDuplicateToRequestArgs): Promise;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/duplicate-to/duplicate-to.action.kind.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/duplicate-to/duplicate-to.action.kind.ts
new file mode 100644
index 0000000000..0a2d16168d
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/duplicate-to/duplicate-to.action.kind.ts
@@ -0,0 +1,23 @@
+import { UMB_ENTITY_BULK_ACTION_DEFAULT_KIND_MANIFEST } from '../../default/default.action.kind.js';
+import type { UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifest: UmbBackofficeManifestKind = {
+ type: 'kind',
+ alias: 'Umb.Kind.EntityBulkAction.DuplicateTo',
+ matchKind: 'duplicateTo',
+ matchType: 'entityBulkAction',
+ manifest: {
+ ...UMB_ENTITY_BULK_ACTION_DEFAULT_KIND_MANIFEST.manifest,
+ type: 'entityBulkAction',
+ kind: 'duplicateTo',
+ api: () => import('./duplicate-to.action.js'),
+ weight: 700,
+ forEntityTypes: [],
+ meta: {
+ icon: 'icon-enter',
+ label: '#actions_copyTo',
+ bulkDuplicateRepositoryAlias: '',
+ treeAlias: '',
+ },
+ },
+};
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/duplicate-to/duplicate-to.action.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/duplicate-to/duplicate-to.action.ts
new file mode 100644
index 0000000000..d865a17688
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/duplicate-to/duplicate-to.action.ts
@@ -0,0 +1,66 @@
+import type { UmbBulkDuplicateToRepository } from './duplicate-to-repository.interface.js';
+import { createExtensionApiByAlias } from '@umbraco-cms/backoffice/extension-registry';
+import { UmbEntityBulkActionBase } from '@umbraco-cms/backoffice/entity-bulk-action';
+import {
+ UmbRequestReloadChildrenOfEntityEvent,
+ UmbRequestReloadStructureForEntityEvent,
+} from '@umbraco-cms/backoffice/entity-action';
+import { UMB_ACTION_EVENT_CONTEXT } from '@umbraco-cms/backoffice/action';
+import { UMB_ENTITY_CONTEXT } from '@umbraco-cms/backoffice/entity';
+import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
+import { UMB_TREE_PICKER_MODAL } from '@umbraco-cms/backoffice/tree';
+import type { MetaEntityBulkActionDuplicateToKind } from '@umbraco-cms/backoffice/extension-registry';
+
+export class UmbMediaDuplicateEntityBulkAction extends UmbEntityBulkActionBase {
+ async execute() {
+ if (this.selection?.length === 0) return;
+
+ const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
+
+ const modalContext = modalManager.open(this, UMB_TREE_PICKER_MODAL, {
+ data: {
+ foldersOnly: this.args.meta.foldersOnly,
+ hideTreeRoot: this.args.meta.hideTreeRoot,
+ treeAlias: this.args.meta.treeAlias,
+ },
+ });
+
+ const value = await modalContext.onSubmit().catch(() => undefined);
+ if (!value?.selection?.length) return;
+
+ const destinationUnique = value.selection[0];
+ if (destinationUnique === undefined) throw new Error('Destination Unique is not available');
+
+ const bulkDuplicateRepository = await createExtensionApiByAlias(
+ this,
+ this.args.meta.bulkDuplicateRepositoryAlias,
+ );
+ if (!bulkDuplicateRepository) throw new Error('Bulk Duplicate Repository is not available');
+
+ await bulkDuplicateRepository.requestBulkDuplicateTo({
+ uniques: this.selection,
+ destination: { unique: destinationUnique },
+ });
+
+ const entityContext = await this.getContext(UMB_ENTITY_CONTEXT);
+ if (!entityContext) throw new Error('Entity Context is not available');
+
+ const entityType = entityContext.getEntityType();
+ const unique = entityContext.getUnique();
+
+ if (entityType && unique !== undefined) {
+ const eventContext = await this.getContext(UMB_ACTION_EVENT_CONTEXT);
+ if (!eventContext) throw new Error('Event Context is not available');
+
+ const args = { entityType, unique };
+
+ const reloadChildren = new UmbRequestReloadChildrenOfEntityEvent(args);
+ eventContext.dispatchEvent(reloadChildren);
+
+ const reloadStructure = new UmbRequestReloadStructureForEntityEvent(args);
+ eventContext.dispatchEvent(reloadStructure);
+ }
+ }
+}
+
+export { UmbMediaDuplicateEntityBulkAction as api };
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/duplicate-to/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/duplicate-to/index.ts
new file mode 100644
index 0000000000..bba0b41bb5
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/duplicate-to/index.ts
@@ -0,0 +1,2 @@
+export type { UmbBulkDuplicateToRepository } from './duplicate-to-repository.interface.js';
+export type { UmbBulkDuplicateToRequestArgs } from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/duplicate-to/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/duplicate-to/manifests.ts
new file mode 100644
index 0000000000..8f6bf64f0e
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/duplicate-to/manifests.ts
@@ -0,0 +1,4 @@
+import { manifest as duplicateToKindManifest } from './duplicate-to.action.kind.js';
+import type { ManifestTypes, UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array = [duplicateToKindManifest];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/duplicate-to/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/duplicate-to/types.ts
new file mode 100644
index 0000000000..c4434e3f64
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/duplicate-to/types.ts
@@ -0,0 +1,6 @@
+export interface UmbBulkDuplicateToRequestArgs {
+ uniques: Array;
+ destination: {
+ unique: string | null;
+ };
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/index.ts
new file mode 100644
index 0000000000..c70f79f940
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/index.ts
@@ -0,0 +1,3 @@
+export * from './duplicate-to/index.js';
+export * from './move-to/index.js';
+export * from './trash/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/move-to/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/move-to/index.ts
new file mode 100644
index 0000000000..d7dbc13a3b
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/move-to/index.ts
@@ -0,0 +1,2 @@
+export type { UmbBulkMoveToRepository } from './move-to-repository.interface.js';
+export type { UmbBulkMoveToRequestArgs } from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/move-to/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/move-to/manifests.ts
new file mode 100644
index 0000000000..701878051e
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/move-to/manifests.ts
@@ -0,0 +1,4 @@
+import { manifest as moveToKindManifest } from './move-to.action.kind.js';
+import type { ManifestTypes, UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array = [moveToKindManifest];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/move-to/move-to-repository.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/move-to/move-to-repository.interface.ts
new file mode 100644
index 0000000000..3345adb499
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/move-to/move-to-repository.interface.ts
@@ -0,0 +1,7 @@
+import type { UmbRepositoryErrorResponse } from '../../../repository/types.js';
+import type { UmbBulkMoveToRequestArgs } from './types.js';
+import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
+
+export interface UmbBulkMoveToRepository extends UmbApi {
+ requestBulkMoveTo(args: UmbBulkMoveToRequestArgs): Promise;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/move-to/move-to.action.kind.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/move-to/move-to.action.kind.ts
new file mode 100644
index 0000000000..a26a2d7302
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/move-to/move-to.action.kind.ts
@@ -0,0 +1,23 @@
+import { UMB_ENTITY_BULK_ACTION_DEFAULT_KIND_MANIFEST } from '../../default/default.action.kind.js';
+import type { UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifest: UmbBackofficeManifestKind = {
+ type: 'kind',
+ alias: 'Umb.Kind.EntityBulkAction.MoveTo',
+ matchKind: 'moveTo',
+ matchType: 'entityBulkAction',
+ manifest: {
+ ...UMB_ENTITY_BULK_ACTION_DEFAULT_KIND_MANIFEST.manifest,
+ type: 'entityBulkAction',
+ kind: 'moveTo',
+ api: () => import('./move-to.action.js'),
+ weight: 700,
+ forEntityTypes: [],
+ meta: {
+ icon: 'icon-enter',
+ label: '#actions_move',
+ bulkMoveRepositoryAlias: '',
+ treeAlias: '',
+ },
+ },
+};
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/move-to/move-to.action.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/move-to/move-to.action.ts
new file mode 100644
index 0000000000..f248afe4e8
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/move-to/move-to.action.ts
@@ -0,0 +1,63 @@
+import type { UmbBulkMoveToRepository } from './move-to-repository.interface.js';
+import { createExtensionApiByAlias } from '@umbraco-cms/backoffice/extension-registry';
+import { UmbEntityBulkActionBase } from '@umbraco-cms/backoffice/entity-bulk-action';
+import {
+ UmbRequestReloadChildrenOfEntityEvent,
+ UmbRequestReloadStructureForEntityEvent,
+} from '@umbraco-cms/backoffice/entity-action';
+import { UMB_ACTION_EVENT_CONTEXT } from '@umbraco-cms/backoffice/action';
+import { UMB_ENTITY_CONTEXT } from '@umbraco-cms/backoffice/entity';
+import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
+import { UMB_TREE_PICKER_MODAL } from '@umbraco-cms/backoffice/tree';
+import type { MetaEntityBulkActionMoveToKind } from '@umbraco-cms/backoffice/extension-registry';
+
+export class UmbMediaMoveEntityBulkAction extends UmbEntityBulkActionBase {
+ async execute() {
+ if (this.selection?.length === 0) return;
+
+ const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
+
+ const modalContext = modalManager.open(this, UMB_TREE_PICKER_MODAL, {
+ data: {
+ foldersOnly: this.args.meta.foldersOnly,
+ hideTreeRoot: this.args.meta.hideTreeRoot,
+ treeAlias: this.args.meta.treeAlias,
+ },
+ });
+
+ const value = await modalContext.onSubmit().catch(() => undefined);
+ if (!value?.selection?.length) return;
+
+ const destinationUnique = value.selection[0];
+ if (destinationUnique === undefined) throw new Error('Destination Unique is not available');
+
+ const bulkMoveRepository = await createExtensionApiByAlias(
+ this,
+ this.args.meta.bulkMoveRepositoryAlias,
+ );
+ if (!bulkMoveRepository) throw new Error('Bulk Move Repository is not available');
+
+ await bulkMoveRepository.requestBulkMoveTo({ uniques: this.selection, destination: { unique: destinationUnique } });
+
+ const entityContext = await this.getContext(UMB_ENTITY_CONTEXT);
+ if (!entityContext) throw new Error('Entity Context is not available');
+
+ const entityType = entityContext.getEntityType();
+ const unique = entityContext.getUnique();
+
+ if (entityType && unique !== undefined) {
+ const eventContext = await this.getContext(UMB_ACTION_EVENT_CONTEXT);
+ if (!eventContext) throw new Error('Event Context is not available');
+
+ const args = { entityType, unique };
+
+ const reloadChildren = new UmbRequestReloadChildrenOfEntityEvent(args);
+ eventContext.dispatchEvent(reloadChildren);
+
+ const reloadStructure = new UmbRequestReloadStructureForEntityEvent(args);
+ eventContext.dispatchEvent(reloadStructure);
+ }
+ }
+}
+
+export { UmbMediaMoveEntityBulkAction as api };
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/move-to/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/move-to/types.ts
new file mode 100644
index 0000000000..75a99ea4ee
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/move-to/types.ts
@@ -0,0 +1,6 @@
+export interface UmbBulkMoveToRequestArgs {
+ uniques: Array;
+ destination: {
+ unique: string | null;
+ };
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/trash/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/trash/index.ts
new file mode 100644
index 0000000000..8bed2d2b64
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/trash/index.ts
@@ -0,0 +1,2 @@
+export type { UmbBulkTrashRepository } from './trash-repository.interface.js';
+export type { UmbBulkTrashRequestArgs } from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/trash/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/trash/manifests.ts
new file mode 100644
index 0000000000..f48d4f6879
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/trash/manifests.ts
@@ -0,0 +1,4 @@
+import { manifest as trashKindManifest } from './trash.action.kind.js';
+import type { ManifestTypes, UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array = [trashKindManifest];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/trash/trash-repository.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/trash/trash-repository.interface.ts
new file mode 100644
index 0000000000..195b2f7724
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/trash/trash-repository.interface.ts
@@ -0,0 +1,7 @@
+import type { UmbRepositoryErrorResponse } from '../../../repository/types.js';
+import type { UmbBulkTrashRequestArgs } from './types.js';
+import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
+
+export interface UmbBulkTrashRepository extends UmbApi {
+ requestBulkTrash(args: UmbBulkTrashRequestArgs): Promise;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/trash/trash.action.kind.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/trash/trash.action.kind.ts
new file mode 100644
index 0000000000..5cec1325a1
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/trash/trash.action.kind.ts
@@ -0,0 +1,22 @@
+import { UMB_ENTITY_BULK_ACTION_DEFAULT_KIND_MANIFEST } from '../../default/default.action.kind.js';
+import type { UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifest: UmbBackofficeManifestKind = {
+ type: 'kind',
+ alias: 'Umb.Kind.EntityBulkAction.Trash',
+ matchKind: 'trash',
+ matchType: 'entityBulkAction',
+ manifest: {
+ ...UMB_ENTITY_BULK_ACTION_DEFAULT_KIND_MANIFEST.manifest,
+ type: 'entityBulkAction',
+ kind: 'trash',
+ api: () => import('./trash.action.js'),
+ weight: 700,
+ forEntityTypes: [],
+ meta: {
+ icon: 'icon-trash',
+ label: '#actions_trash',
+ bulkTrashRepositoryAlias: '',
+ },
+ },
+};
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/trash/trash.action.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/trash/trash.action.ts
new file mode 100644
index 0000000000..70cbc7ffd5
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/trash/trash.action.ts
@@ -0,0 +1,53 @@
+import type { UmbBulkTrashRepository } from './trash-repository.interface.js';
+import { createExtensionApiByAlias } from '@umbraco-cms/backoffice/extension-registry';
+import { UmbEntityBulkActionBase } from '@umbraco-cms/backoffice/entity-bulk-action';
+import {
+ UmbRequestReloadChildrenOfEntityEvent,
+ UmbRequestReloadStructureForEntityEvent,
+} from '@umbraco-cms/backoffice/entity-action';
+import { UMB_ACTION_EVENT_CONTEXT } from '@umbraco-cms/backoffice/action';
+import { UMB_ENTITY_CONTEXT } from '@umbraco-cms/backoffice/entity';
+import { umbConfirmModal } from '@umbraco-cms/backoffice/modal';
+import type { MetaEntityBulkActionTrashKind } from '@umbraco-cms/backoffice/extension-registry';
+
+export class UmbMediaTrashEntityBulkAction extends UmbEntityBulkActionBase {
+ async execute() {
+ if (this.selection?.length === 0) return;
+
+ await umbConfirmModal(this._host, {
+ headline: `Trash`,
+ content: `Are you sure you want to move ${this.selection.length} ${this.selection.length === 1 ? 'item' : 'items'} to the recycle bin?`,
+ color: 'danger',
+ confirmLabel: 'Trash',
+ });
+
+ const bulkTrashRepository = await createExtensionApiByAlias(
+ this,
+ this.args.meta.bulkTrashRepositoryAlias,
+ );
+ if (!bulkTrashRepository) throw new Error('Bulk Trash Repository is not available');
+
+ await bulkTrashRepository.requestBulkTrash({ uniques: this.selection });
+
+ const entityContext = await this.getContext(UMB_ENTITY_CONTEXT);
+ if (!entityContext) throw new Error('Entity Context is not available');
+
+ const entityType = entityContext.getEntityType();
+ const unique = entityContext.getUnique();
+
+ if (entityType && unique !== undefined) {
+ const eventContext = await this.getContext(UMB_ACTION_EVENT_CONTEXT);
+ if (!eventContext) throw new Error('Event Context is not available');
+
+ const args = { entityType, unique };
+
+ const reloadChildren = new UmbRequestReloadChildrenOfEntityEvent(args);
+ eventContext.dispatchEvent(reloadChildren);
+
+ const reloadStructure = new UmbRequestReloadStructureForEntityEvent(args);
+ eventContext.dispatchEvent(reloadStructure);
+ }
+ }
+}
+
+export { UmbMediaTrashEntityBulkAction as api };
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/trash/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/trash/types.ts
new file mode 100644
index 0000000000..d128c53b7a
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/common/trash/types.ts
@@ -0,0 +1,3 @@
+export interface UmbBulkTrashRequestArgs {
+ uniques: Array;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/default/default.action.kind.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/default/default.action.kind.ts
new file mode 100644
index 0000000000..2b13205e93
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/default/default.action.kind.ts
@@ -0,0 +1,20 @@
+import type { UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry';
+
+export const UMB_ENTITY_BULK_ACTION_DEFAULT_KIND_MANIFEST: UmbBackofficeManifestKind = {
+ type: 'kind',
+ alias: 'Umb.Kind.EntityBulkAction.Default',
+ matchKind: 'default',
+ matchType: 'entityBulkAction',
+ manifest: {
+ type: 'entityBulkAction',
+ kind: 'default',
+ weight: 1000,
+ element: () => import('../entity-bulk-action.element.js'),
+ meta: {
+ icon: '',
+ label: 'Default Entity Bulk Action',
+ },
+ },
+};
+
+export const manifest = UMB_ENTITY_BULK_ACTION_DEFAULT_KIND_MANIFEST;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/default/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/default/manifests.ts
new file mode 100644
index 0000000000..3cb64a6f47
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/default/manifests.ts
@@ -0,0 +1,4 @@
+import { manifest as defaultKindManifest } from './default.action.kind.js';
+import type { ManifestTypes, UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array = [defaultKindManifest];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/entity-bulk-action-element.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/entity-bulk-action-element.interface.ts
new file mode 100644
index 0000000000..6cc4b315a9
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/entity-bulk-action-element.interface.ts
@@ -0,0 +1,3 @@
+import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
+
+export interface UmbEntityBulkActionElement extends UmbControllerHostElement {}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/entity-bulk-action.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/entity-bulk-action.element.ts
index 20baaa6da0..0478595f71 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/entity-bulk-action.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/entity-bulk-action.element.ts
@@ -1,16 +1,25 @@
-import type { UmbEntityBulkActionBase } from './entity-bulk-action-base.js';
+import type { UmbEntityBulkAction } from './entity-bulk-action.interface.js';
+import type { UmbEntityBulkActionElement } from './entity-bulk-action-element.interface.js';
+import { html, customElement, property, when } from '@umbraco-cms/backoffice/external/lit';
import { UmbActionExecutedEvent } from '@umbraco-cms/backoffice/event';
-import { html, ifDefined, customElement, property } from '@umbraco-cms/backoffice/external/lit';
-import type { ManifestEntityBulkAction, MetaEntityBulkAction } from '@umbraco-cms/backoffice/extension-registry';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import type {
+ ManifestEntityBulkAction,
+ MetaEntityBulkActionDefaultKind,
+} from '@umbraco-cms/backoffice/extension-registry';
-@customElement('umb-entity-bulk-action')
-export class UmbEntityBulkActionElement<
- MetaType extends MetaEntityBulkAction = MetaEntityBulkAction,
- ApiType extends UmbEntityBulkActionBase = UmbEntityBulkActionBase,
-> extends UmbLitElement {
+const elementName = 'umb-entity-bulk-action';
+
+@customElement(elementName)
+export class UmbEntityBulkActionDefaultElement<
+ MetaType extends MetaEntityBulkActionDefaultKind = MetaEntityBulkActionDefaultKind,
+ ApiType extends UmbEntityBulkAction = UmbEntityBulkAction,
+ >
+ extends UmbLitElement
+ implements UmbEntityBulkActionElement
+{
@property({ attribute: false })
- manifest?: ManifestEntityBulkAction;
+ manifest?: ManifestEntityBulkAction;
api?: ApiType;
@@ -22,16 +31,19 @@ export class UmbEntityBulkActionElement<
}
override render() {
- return html`
+ ${when(this.manifest?.meta.icon, () => html`${this.localize.string(this.manifest?.meta.label ?? '')}
+
+ `;
}
}
+export default UmbEntityBulkActionDefaultElement;
+
declare global {
interface HTMLElementTagNameMap {
- 'umb-entity-bulk-action': UmbEntityBulkActionElement;
+ [elementName]: UmbEntityBulkActionDefaultElement;
}
}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/index.ts
index 24e16cf0cb..bf14ffa917 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/index.ts
@@ -1,4 +1,8 @@
export * from './types.js';
+export * from './common/index.js';
export * from './entity-bulk-action-base.js';
export * from './entity-bulk-action.element.js';
export * from './entity-bulk-action.interface.js';
+export type * from './entity-bulk-action-element.interface.js';
+
+export { UMB_ENTITY_BULK_ACTION_DEFAULT_KIND_MANIFEST } from './default/default.action.kind.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/manifests.ts
new file mode 100644
index 0000000000..306185ef77
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/manifests.ts
@@ -0,0 +1,12 @@
+import { manifests as defaultEntityBulkActionManifests } from './default/manifests.js';
+import { manifests as duplicateEntityBulkActionManifests } from './common/duplicate-to/manifests.js';
+import { manifests as moveToEntityBulkActionManifests } from './common/move-to/manifests.js';
+import { manifests as trashEntityBulkActionManifests } from './common/trash/manifests.js';
+import type { ManifestTypes, UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array = [
+ ...defaultEntityBulkActionManifests,
+ ...duplicateEntityBulkActionManifests,
+ ...moveToEntityBulkActionManifests,
+ ...trashEntityBulkActionManifests,
+];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-slot/extension-slot.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-slot/extension-slot.element.ts
index b5e64b5d8b..ab38f6b6b9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-slot/extension-slot.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-slot/extension-slot.element.ts
@@ -1,11 +1,11 @@
import { umbExtensionsRegistry } from '../../registry.js';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { TemplateResult } from '@umbraco-cms/backoffice/external/lit';
import { css, repeat, customElement, property, state, html } from '@umbraco-cms/backoffice/external/lit';
import {
type UmbExtensionElementInitializer,
UmbExtensionsElementInitializer,
} from '@umbraco-cms/backoffice/extension-api';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
/**
* @element umb-extension-slot
@@ -24,7 +24,7 @@ export class UmbExtensionSlotElement extends UmbLitElement {
#extensionsController?: UmbExtensionsElementInitializer;
@state()
- private _permitted: Array = [];
+ private _permitted?: Array;
/**
* The type or types of extensions to render.
@@ -129,13 +129,15 @@ export class UmbExtensionSlotElement extends UmbLitElement {
}
override render() {
- return this._permitted.length > 0
- ? repeat(
- this._permitted,
- (ext) => ext.alias,
- (ext, i) => (this.renderMethod ? this.renderMethod(ext, i) : ext.component),
- )
- : html` = [];
+ private _permitted?: Array;
/**
* The type or types of extensions to render.
@@ -178,13 +178,15 @@ export class UmbExtensionWithApiSlotElement extends UmbLitElement {
}
override render() {
- return this._permitted.length > 0
- ? repeat(
- this._permitted,
- (ext) => ext.alias,
- (ext, i) => (this.renderMethod ? this.renderMethod(ext, i) : ext.component),
- )
- : html`;
+ blockType?: BlockType;
+ contentUdi?: string;
+ label?: string;
+ icon?: string;
+ index?: number;
+ layout?: LayoutType;
+ content?: UmbBlockDataType;
+ settings?: UmbBlockDataType;
+}
+
+export interface UmbBlockEditorCustomViewElement<
+ LayoutType extends UmbBlockLayoutBaseModel = UmbBlockLayoutBaseModel,
+ BlockType extends UmbBlockTypeBaseModel = UmbBlockTypeBaseModel,
+> extends UmbBlockEditorCustomViewProperties,
+ HTMLElement {}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/interfaces/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/interfaces/index.ts
index 1721b7dfec..7585b5001b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/interfaces/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/interfaces/index.ts
@@ -1,3 +1,4 @@
+export * from './block-editor-custom-view-element.interface.js';
export * from './dashboard-element.interface.js';
export * from './external-login-provider-element.interface.js';
export * from './menu-item-element.interface.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/block-editor-custom-view.model.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/block-editor-custom-view.model.ts
index 002d6f0ecf..55a8208789 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/block-editor-custom-view.model.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/block-editor-custom-view.model.ts
@@ -1,6 +1,20 @@
-import type { UmbPropertyEditorUiElement } from '../interfaces/index.js';
+import type { UmbBlockEditorCustomViewElement } from '../interfaces/index.js';
import type { ManifestElement } from '@umbraco-cms/backoffice/extension-api';
-export interface ManifestBlockEditorCustomView extends ManifestElement {
+export interface ManifestBlockEditorCustomView extends ManifestElement {
type: 'blockEditorCustomView';
+ /**
+ * @property {string | Array } - Declare if this Custom View only must appear at specific Content Types by Alias.
+ * @description Optional condition if you like this custom view to only appear at for one or more specific Content Types.
+ * @example 'my-element-type-alias'
+ * @example ['my-element-type-alias-A', 'my-element-type-alias-B']
+ */
+ forContentTypeAlias?: string | Array;
+ /**
+ * @property {string | Array } - Declare if this Custom View only must appear at specific Block Editors.
+ * @description Optional condition if you like this custom view to only appear at a specific type of Block Editor.
+ * @example 'block-list'
+ * @example ['block-list', 'block-grid']
+ */
+ forBlockEditor?: string | Array;
}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/entity-action.model.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/entity-action.model.ts
index a24470e952..ebb89ea663 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/entity-action.model.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/entity-action.model.ts
@@ -1,6 +1,6 @@
import type { ConditionTypes } from '../conditions/types.js';
-import type { UmbEntityAction, UmbEntityActionElement } from '@umbraco-cms/backoffice/entity-action';
import type { ManifestElementAndApi, ManifestWithDynamicConditions } from '@umbraco-cms/backoffice/extension-api';
+import type { UmbEntityAction, UmbEntityActionElement } from '@umbraco-cms/backoffice/entity-action';
import type { UmbModalToken, UmbPickerModalData, UmbPickerModalValue } from '@umbraco-cms/backoffice/modal';
/**
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/entity-bulk-action.model.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/entity-bulk-action.model.ts
index 984aa12384..967a868949 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/entity-bulk-action.model.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/entity-bulk-action.model.ts
@@ -1,6 +1,6 @@
import type { ConditionTypes } from '../conditions/types.js';
-import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
-import type { UmbEntityBulkActionBase } from '@umbraco-cms/backoffice/entity-bulk-action';
+import type { UmbEntityBulkActionElement } from '../../entity-bulk-action/entity-bulk-action-element.interface.js';
+import type { UmbEntityBulkAction } from '@umbraco-cms/backoffice/entity-bulk-action';
import type { ManifestElementAndApi, ManifestWithDynamicConditions } from '@umbraco-cms/backoffice/extension-api';
/**
@@ -8,14 +8,31 @@ import type { ManifestElementAndApi, ManifestWithDynamicConditions } from '@umbr
* For example for content you may wish to move one or more documents in bulk
*/
export interface ManifestEntityBulkAction
- extends ManifestElementAndApi>,
+ extends ManifestElementAndApi>,
ManifestWithDynamicConditions {
type: 'entityBulkAction';
forEntityTypes: Array;
meta: MetaType;
}
-export interface MetaEntityBulkAction {
+export interface MetaEntityBulkAction {}
+
+export interface ManifestEntityBulkActionDefaultKind extends ManifestEntityBulkAction {
+ type: 'entityBulkAction';
+ kind: 'default';
+}
+
+export interface MetaEntityBulkActionDefaultKind extends MetaEntityBulkAction {
+ /**
+ * An icon to represent the action to be performed
+ *
+ * @examples [
+ * "icon-box",
+ * "icon-grid"
+ * ]
+ */
+ icon: string;
+
/**
* The friendly name of the action to perform
*
@@ -26,3 +43,40 @@ export interface MetaEntityBulkAction {
*/
label?: string;
}
+
+// DUPLICATE TO
+export interface ManifestEntityBulkActionDuplicateToKind
+ extends ManifestEntityBulkAction {
+ type: 'entityBulkAction';
+ kind: 'duplicateTo';
+}
+
+export interface MetaEntityBulkActionDuplicateToKind extends ManifestEntityBulkAction {
+ bulkDuplicateRepositoryAlias: string;
+ hideTreeRoot?: boolean;
+ foldersOnly?: boolean;
+ treeAlias: string;
+}
+
+// MOVE TO
+export interface ManifestEntityBulkActionMoveToKind extends ManifestEntityBulkAction {
+ type: 'entityBulkAction';
+ kind: 'moveTo';
+}
+
+export interface MetaEntityBulkActionMoveToKind extends MetaEntityBulkActionDefaultKind {
+ bulkMoveRepositoryAlias: string;
+ hideTreeRoot?: boolean;
+ foldersOnly?: boolean;
+ treeAlias: string;
+}
+
+// TRASH
+export interface ManifestEntityBulkActionTrashKind extends ManifestEntityBulkAction {
+ type: 'entityBulkAction';
+ kind: 'trash';
+}
+
+export interface MetaEntityBulkActionTrashKind extends MetaEntityBulkActionDefaultKind {
+ bulkTrashRepositoryAlias: string;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/ufm-component.model.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/ufm-component.model.ts
index 9c3a2afa14..9cf61264f4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/ufm-component.model.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/ufm-component.model.ts
@@ -1,8 +1,8 @@
import type { ManifestApi, UmbApi } from '@umbraco-cms/backoffice/extension-api';
-import type { Tokens } from '@umbraco-cms/backoffice/external/marked';
+import type { UfmToken } from '@umbraco-cms/backoffice/ufm';
export interface UmbUfmComponentApi extends UmbApi {
- render(token: Tokens.Generic): string | undefined;
+ render(token: UfmToken): string | undefined;
}
export interface MetaUfmComponent {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-dictionary.json b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-dictionary.json
index e6e06752d4..5058e26d8d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-dictionary.json
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-dictionary.json
@@ -1098,7 +1098,7 @@
},
{
"name": "icon-home",
- "file": "home.svg"
+ "file": "house.svg"
},
{
"name": "icon-hourglass",
@@ -1810,8 +1810,7 @@
},
{
"name": "icon-readonly",
- "file": "ban.svg",
- "legacy": true
+ "file": "pencil-off.svg"
},
{
"name": "icon-receipt-alt",
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons.ts
index 8f0b5beb5f..e9edf842e7 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons.ts
@@ -1504,7 +1504,7 @@ name: "icon-re-post",
path: () => import("./icons/icon-re-post.js"),
},{
name: "icon-readonly",
-legacy: true,
+
path: () => import("./icons/icon-readonly.js"),
},{
name: "icon-receipt-alt",
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-activity.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-activity.ts
index 758f7e1a7f..bbd5e59293 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-activity.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-activity.ts
@@ -1,4 +1,4 @@
-export default `
+export default `
+export default `
+export default `
stroke-linecap="round"
stroke-linejoin="round"
>
-
`;
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-alarm-clock.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-alarm-clock.ts
index 67f9e0916e..8ecad31275 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-alarm-clock.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-alarm-clock.ts
@@ -1,4 +1,4 @@
-export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
stroke-linecap="round"
stroke-linejoin="round"
>
-
`;
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-badge-add.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-badge-add.ts
index 0664687f57..e8f7854d36 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-badge-add.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-badge-add.ts
@@ -1,4 +1,4 @@
-export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
`;
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-block.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-block.ts
index 1c4cac1797..a57be3705f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-block.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-block.ts
@@ -1,4 +1,4 @@
-export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
stroke-linecap="round"
stroke-linejoin="round"
>
-
`;
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-bookmark.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-bookmark.ts
index 2e04cfd7bd..5a958b0e78 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-bookmark.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-bookmark.ts
@@ -1,4 +1,4 @@
-export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
stroke-linecap="round"
stroke-linejoin="round"
>
-
`;
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-brush.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-brush.ts
index a601ee5fe8..709ebb03c6 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-brush.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-brush.ts
@@ -1,4 +1,4 @@
-export default `
+export default `
+export default `
+export default `
+export default `
stroke-linecap="round"
stroke-linejoin="round"
>
-
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
stroke-linecap="round"
stroke-linejoin="round"
>
-
`;
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-connection.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-connection.ts
index ca750a1948..b2733fa2f3 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-connection.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-connection.ts
@@ -1,4 +1,4 @@
-export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `
+export default `