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/eslint.config.js b/src/Umbraco.Web.UI.Client/eslint.config.js
index 6206318d6e..498884d147 100644
--- a/src/Umbraco.Web.UI.Client/eslint.config.js
+++ b/src/Umbraco.Web.UI.Client/eslint.config.js
@@ -55,6 +55,8 @@ export default [
'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',
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',
@@ -2109,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',
@@ -2237,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',
@@ -2268,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?',
@@ -2532,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 ff6d54933f..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',
@@ -2177,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',
@@ -2403,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?',
@@ -2483,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',
@@ -2533,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 882a508481..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: {
@@ -2234,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',
@@ -2466,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?',
@@ -2548,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',
@@ -2602,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 | 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/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/mocks/data/data-type/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/data-type/data-type.data.ts
index 0eaa8a1855..2f45cdca03 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/data-type/data-type.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/data-type/data-type.data.ts
@@ -493,6 +493,23 @@ export const data: Array = [
},
],
},
+ {
+ 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.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/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/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/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`
-
+
-
+
+
-
+
-
+
-
+
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/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/context/block-entry.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts
index 697144899f..9dd27d8944 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts
@@ -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/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`
;
+}
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/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/icon-registry/icons/icon-activity.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-activity.ts
index 1a21c810d9..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 `
+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 5bc24372e1..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 `
+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 `
+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-delete.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-delete.ts
index 063886e0de..554f3d6dc7 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-delete.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-delete.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 `
+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 `