From f4d7147246e2b39ad7961752f60122f9f6f41dc1 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 2 May 2024 14:47:46 +0200 Subject: [PATCH 01/36] move link picker modal --- .../src/packages/core/modal/common/manifests.ts | 2 +- .../multi-url-picker}/link-picker/link-picker-modal.element.ts | 0 .../multi-url-picker}/link-picker/link-picker-modal.stories.ts | 2 +- 3 files changed, 2 insertions(+), 2 deletions(-) rename src/Umbraco.Web.UI.Client/src/packages/{core/modal/common => property-editors/multi-url-picker}/link-picker/link-picker-modal.element.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/{core/modal/common => property-editors/multi-url-picker}/link-picker/link-picker-modal.stories.ts (90%) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/manifests.ts index 12274ed8e4..5c2e545ce5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/manifests.ts @@ -17,7 +17,7 @@ const modals: Array = [ type: 'modal', alias: 'Umb.Modal.LinkPicker', name: 'Link Picker Modal', - element: () => import('./link-picker/link-picker-modal.element.js'), + element: () => import('../../../property-editors/multi-url-picker/link-picker/link-picker-modal.element.js'), }, { type: 'modal', diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/link-picker/link-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker/link-picker-modal.element.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/modal/common/link-picker/link-picker-modal.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker/link-picker-modal.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/link-picker/link-picker-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker/link-picker-modal.stories.ts similarity index 90% rename from src/Umbraco.Web.UI.Client/src/packages/core/modal/common/link-picker/link-picker-modal.stories.ts rename to src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker/link-picker-modal.stories.ts index f8b54687ed..0a79852e45 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/link-picker/link-picker-modal.stories.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker/link-picker-modal.stories.ts @@ -1,4 +1,4 @@ -import '../../../components/body-layout/body-layout.element.js'; +import '../../../core/components/body-layout/body-layout.element.js'; import './link-picker-modal.element.js'; import type { Meta, Story } from '@storybook/web-components'; From 1d9381d80898cd85f84ef5f07a3fd189e1c97b93 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 2 May 2024 14:50:57 +0200 Subject: [PATCH 02/36] split files --- .../src/packages/core/modal/token/index.ts | 1 - .../link-picker}/link-picker-modal.token.ts | 17 ++--------------- .../multi-url-picker/link-picker/types.ts | 13 +++++++++++++ 3 files changed, 15 insertions(+), 16 deletions(-) rename src/Umbraco.Web.UI.Client/src/packages/{core/modal/token => property-editors/multi-url-picker/link-picker}/link-picker-modal.token.ts (58%) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker/types.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/index.ts index b6c574f8f0..d04b844492 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/index.ts @@ -7,7 +7,6 @@ export * from './entity-user-permission-settings-modal.token.js'; export * from './examine-fields-settings-modal.token.js'; export * from './icon-picker-modal.token.js'; export * from './item-picker-modal.token.js'; -export * from './link-picker-modal.token.js'; export * from './modal-token.js'; export * from './property-editor-ui-picker-modal.token.js'; export * from './workspace-modal.token.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/link-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker/link-picker-modal.token.ts similarity index 58% rename from src/Umbraco.Web.UI.Client/src/packages/core/modal/token/link-picker-modal.token.ts rename to src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker/link-picker-modal.token.ts index 7bab99f381..91b24eee0c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/link-picker-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker/link-picker-modal.token.ts @@ -1,4 +1,5 @@ -import { UmbModalToken } from './modal-token.js'; +import { UmbModalToken } from '../../../core/modal/token/modal-token.js'; +import type { UmbLinkPickerLink } from './types.js'; export interface UmbLinkPickerModalData { config: UmbLinkPickerConfig; @@ -7,20 +8,6 @@ export interface UmbLinkPickerModalData { export type UmbLinkPickerModalValue = { link: UmbLinkPickerLink }; -export interface UmbLinkPickerLink { - icon?: string | null; - name?: string | null; - published?: boolean | null; - queryString?: string | null; - target?: string | null; - trashed?: boolean | null; - type?: UmbLinkPickerLinkType | null; - unique?: string | null; - url?: string | null; -} - -export type UmbLinkPickerLinkType = 'document' | 'external' | 'media'; - // TODO: investigate: this looks more like a property editor configuration. Is this used in the correct way? export interface UmbLinkPickerConfig { hideAnchor?: boolean; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker/types.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker/types.ts new file mode 100644 index 0000000000..3f1775721a --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker/types.ts @@ -0,0 +1,13 @@ +export type UmbLinkPickerLinkType = 'document' | 'external' | 'media'; + +export interface UmbLinkPickerLink { + icon?: string | null; + name?: string | null; + published?: boolean | null; + queryString?: string | null; + target?: string | null; + trashed?: boolean | null; + type?: UmbLinkPickerLinkType | null; + unique?: string | null; + url?: string | null; +} From 2367318c0cacb93717d35b90739098b827407d01 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 2 May 2024 14:55:47 +0200 Subject: [PATCH 03/36] rename folder --- .../link-picker-modal.element.ts | 13 ++++++------- .../link-picker-modal.stories.ts | 0 .../link-picker-modal.token.ts | 0 .../{link-picker => link-picker-modal}/types.ts | 0 4 files changed, 6 insertions(+), 7 deletions(-) rename src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/{link-picker => link-picker-modal}/link-picker-modal.element.ts (98%) rename src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/{link-picker => link-picker-modal}/link-picker-modal.stories.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/{link-picker => link-picker-modal}/link-picker-modal.token.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/{link-picker => link-picker-modal}/types.ts (100%) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker/link-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker-modal/link-picker-modal.element.ts similarity index 98% rename from src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker/link-picker-modal.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker-modal/link-picker-modal.element.ts index 6c5f9b2eea..46440b9eea 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker/link-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker-modal/link-picker-modal.element.ts @@ -1,13 +1,12 @@ +import type { UmbLinkPickerLink, UmbLinkPickerLinkType } from './types.js'; +import type { + UmbLinkPickerConfig, + UmbLinkPickerModalData, + UmbLinkPickerModalValue, +} from './link-picker-modal.token.js'; import type { UmbTreeElement, UmbTreeSelectionConfiguration } from '@umbraco-cms/backoffice/tree'; import { css, html, nothing, customElement, query, state, styleMap } from '@umbraco-cms/backoffice/external/lit'; import type { UUIBooleanInputEvent, UUIInputElement } from '@umbraco-cms/backoffice/external/uui'; -import type { - UmbLinkPickerConfig, - UmbLinkPickerLink, - UmbLinkPickerLinkType, - UmbLinkPickerModalData, - UmbLinkPickerModalValue, -} from '@umbraco-cms/backoffice/modal'; import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; import { UMB_DOCUMENT_TREE_ALIAS } from '@umbraco-cms/backoffice/document'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker/link-picker-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker-modal/link-picker-modal.stories.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker/link-picker-modal.stories.ts rename to src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker-modal/link-picker-modal.stories.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker/link-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker-modal/link-picker-modal.token.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker/link-picker-modal.token.ts rename to src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker-modal/link-picker-modal.token.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker/types.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker-modal/types.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker/types.ts rename to src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker-modal/types.ts From 6fbbe94ff1a9ba5b7c685b1e05637f1d202fbaca Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 2 May 2024 14:59:51 +0200 Subject: [PATCH 04/36] move component --- src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts | 2 +- .../src/packages/core/modal/common/manifests.ts | 2 +- .../multi-url-picker}/input-multi-url/index.ts | 0 .../input-multi-url/input-multi-url.element.ts | 0 .../input-multi-url/input-multi-url.stories.ts | 0 5 files changed, 2 insertions(+), 2 deletions(-) rename src/Umbraco.Web.UI.Client/src/packages/{core/components => property-editors/multi-url-picker}/input-multi-url/index.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/{core/components => property-editors/multi-url-picker}/input-multi-url/input-multi-url.element.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/{core/components => property-editors/multi-url-picker}/input-multi-url/input-multi-url.stories.ts (100%) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts index 21185774e0..e9e0e872cb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts @@ -19,7 +19,7 @@ export * from './input-dropdown/index.js'; export * from './input-entity/index.js'; export * from './input-eye-dropper/index.js'; export * from './input-manifest/index.js'; -export * from './input-multi-url/index.js'; +export * from '../../property-editors/multi-url-picker/input-multi-url/index.js'; export * from './input-number-range/index.js'; export * from './input-radio-button-list/index.js'; export * from './input-slider/index.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/manifests.ts index 5c2e545ce5..4f857432b8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/manifests.ts @@ -17,7 +17,7 @@ const modals: Array = [ type: 'modal', alias: 'Umb.Modal.LinkPicker', name: 'Link Picker Modal', - element: () => import('../../../property-editors/multi-url-picker/link-picker/link-picker-modal.element.js'), + element: () => import('../../../property-editors/multi-url-picker/link-picker-modal/link-picker-modal.element.js'), }, { type: 'modal', diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-multi-url/index.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/input-multi-url/index.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/components/input-multi-url/index.ts rename to src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/input-multi-url/index.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-multi-url/input-multi-url.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/input-multi-url/input-multi-url.element.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/components/input-multi-url/input-multi-url.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/input-multi-url/input-multi-url.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-multi-url/input-multi-url.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/input-multi-url/input-multi-url.stories.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/components/input-multi-url/input-multi-url.stories.ts rename to src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/input-multi-url/input-multi-url.stories.ts From b82040351d8416a567892c36d8f7ec68b66e4930 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 2 May 2024 15:00:24 +0200 Subject: [PATCH 05/36] remove export --- src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts index e9e0e872cb..4a8fc02a3e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts @@ -19,7 +19,6 @@ export * from './input-dropdown/index.js'; export * from './input-entity/index.js'; export * from './input-eye-dropper/index.js'; export * from './input-manifest/index.js'; -export * from '../../property-editors/multi-url-picker/input-multi-url/index.js'; export * from './input-number-range/index.js'; export * from './input-radio-button-list/index.js'; export * from './input-slider/index.js'; From 4e27ce7a4b1ce7e25139dfa234013dabdc5135d1 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 2 May 2024 15:02:43 +0200 Subject: [PATCH 06/36] Update input-multi-url.element.ts --- .../input-multi-url/input-multi-url.element.ts | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/input-multi-url/input-multi-url.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/input-multi-url/input-multi-url.element.ts index 1a9e9f3082..6ec8ee16d7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/input-multi-url/input-multi-url.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/input-multi-url/input-multi-url.element.ts @@ -1,15 +1,13 @@ +import type { UmbLinkPickerLink } from '../link-picker-modal/types.js'; +import { UMB_LINK_PICKER_MODAL } from '../link-picker-modal/link-picker-modal.token.js'; import { css, customElement, html, property, repeat, state } from '@umbraco-cms/backoffice/external/lit'; import { simpleHashCode } from '@umbraco-cms/backoffice/observable-api'; import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import { - umbConfirmModal, - UmbModalRouteRegistrationController, - UMB_LINK_PICKER_MODAL, -} from '@umbraco-cms/backoffice/modal'; +import { umbConfirmModal, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal'; import { UmbSorterController } from '@umbraco-cms/backoffice/sorter'; import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui'; -import type { UmbModalRouteBuilder, UmbLinkPickerLink } from '@umbraco-cms/backoffice/modal'; +import type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/modal'; import type { UmbVariantId } from '@umbraco-cms/backoffice/variant'; import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui'; From 1f6e62712ee30019b0184ad19244c27bef0d6118 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 2 May 2024 15:03:44 +0200 Subject: [PATCH 07/36] fix imports --- .../property-editor-ui-multi-url-picker.element.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/property-editor-ui-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/property-editor-ui-multi-url-picker.element.ts index 9b21b2be37..46973e3cf7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/property-editor-ui-multi-url-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/property-editor-ui-multi-url-picker.element.ts @@ -1,9 +1,9 @@ +import type { UmbLinkPickerLink } from './link-picker-modal/types.js'; +import type { UmbInputMultiUrlElement } from './input-multi-url/input-multi-url.element.js'; import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor'; import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property'; -import type { UmbInputMultiUrlElement } from '@umbraco-cms/backoffice/components'; -import type { UmbLinkPickerLink } from '@umbraco-cms/backoffice/modal'; import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui'; From 4bc23c6820d897e55edf9ccc78cf7b98da298fdd Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 2 May 2024 15:22:29 +0200 Subject: [PATCH 08/36] import local component --- .../property-editor-ui-multi-url-picker.element.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/property-editor-ui-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/property-editor-ui-multi-url-picker.element.ts index 46973e3cf7..0d1047b8e1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/property-editor-ui-multi-url-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/property-editor-ui-multi-url-picker.element.ts @@ -8,6 +8,9 @@ import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/ import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui'; +// import of local component +import './input-multi-url/input-multi-url.element.js'; + /** * @element umb-property-editor-ui-multi-url-picker */ From bb94e7ff11a90d85e6ff5cf5625677ed8eeba789 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 2 May 2024 15:42:19 +0200 Subject: [PATCH 09/36] move manifest --- .../src/packages/core/modal/common/manifests.ts | 6 ------ .../multi-url-picker/link-picker-modal/manifests.ts | 8 ++++++++ .../property-editors/multi-url-picker/manifests.ts | 3 ++- 3 files changed, 10 insertions(+), 7 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker-modal/manifests.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/manifests.ts index 4f857432b8..e5308f533d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/manifests.ts @@ -13,12 +13,6 @@ const modals: Array = [ name: 'Icon Picker Modal', element: () => import('./icon-picker/icon-picker-modal.element.js'), }, - { - type: 'modal', - alias: 'Umb.Modal.LinkPicker', - name: 'Link Picker Modal', - element: () => import('../../../property-editors/multi-url-picker/link-picker-modal/link-picker-modal.element.js'), - }, { type: 'modal', alias: 'Umb.Modal.CodeEditor', diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker-modal/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker-modal/manifests.ts new file mode 100644 index 0000000000..f809efc9e7 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker-modal/manifests.ts @@ -0,0 +1,8 @@ +export const manifests = [ + { + type: 'modal', + alias: 'Umb.Modal.MultiUrlLinkPicker', + name: 'Property Editor Multi Url Link Picker Modal', + element: () => import('./link-picker-modal.element.js'), + }, +]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/manifests.ts index f82f93e2f3..c3a0d50c61 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/manifests.ts @@ -1,4 +1,5 @@ import { manifest as schemaManifest } from './Umbraco.MultiUrlPicker.js'; +import { manifests as modalManifests } from './link-picker-modal/manifests.js'; import type { ManifestPropertyEditorUi, ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; const manifest: ManifestPropertyEditorUi = { @@ -30,4 +31,4 @@ const manifest: ManifestPropertyEditorUi = { }, }; -export const manifests: Array = [manifest, schemaManifest]; +export const manifests: Array = [manifest, schemaManifest, ...modalManifests]; From 9e93840a1dc5beb13d6ece242d979a7946fd4e84 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 2 May 2024 15:58:04 +0200 Subject: [PATCH 10/36] rename --- .../multi-url-picker/input-multi-url/index.ts | 1 - .../input-multi-url/input-multi-url.stories.ts | 15 --------------- .../link-picker-modal/constants.ts | 1 + .../link-picker-modal/link-picker-modal.token.ts | 3 ++- .../link-picker-modal/manifests.ts | 4 +++- .../multi-url-picker/multi-url-picker/index.ts | 1 + .../multi-url-picker.element.ts} | 7 ++++--- .../multi-url-picker/multi-url-picker.stories.ts | 15 +++++++++++++++ ...property-editor-ui-multi-url-picker.element.ts | 10 +++++----- 9 files changed, 31 insertions(+), 26 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/input-multi-url/index.ts delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/input-multi-url/input-multi-url.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker-modal/constants.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/multi-url-picker/index.ts rename src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/{input-multi-url/input-multi-url.element.ts => multi-url-picker/multi-url-picker.element.ts} (97%) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/multi-url-picker/multi-url-picker.stories.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/input-multi-url/index.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/input-multi-url/index.ts deleted file mode 100644 index d197dc0c3d..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/input-multi-url/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './input-multi-url.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/input-multi-url/input-multi-url.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/input-multi-url/input-multi-url.stories.ts deleted file mode 100644 index 1017d7d56d..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/input-multi-url/input-multi-url.stories.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/web-components'; -import './input-multi-url.element.js'; -import type { UmbInputMultiUrlElement } from './input-multi-url.element.js'; - -const meta: Meta = { - title: 'Components/Inputs/Multi URL', - component: 'umb-input-multi-url', -}; - -export default meta; -type Story = StoryObj; - -export const Overview: Story = { - args: {}, -}; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker-modal/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker-modal/constants.ts new file mode 100644 index 0000000000..e5d5c115cd --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker-modal/constants.ts @@ -0,0 +1 @@ +export const UMB_MULTI_URL_PICKER_MODAL_ALIAS = 'Umb.Modal.MultiUrlLinkPicker'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker-modal/link-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker-modal/link-picker-modal.token.ts index 91b24eee0c..ee945757ff 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker-modal/link-picker-modal.token.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker-modal/link-picker-modal.token.ts @@ -1,4 +1,5 @@ import { UmbModalToken } from '../../../core/modal/token/modal-token.js'; +import { UMB_MULTI_URL_PICKER_MODAL_ALIAS } from './constants.js'; import type { UmbLinkPickerLink } from './types.js'; export interface UmbLinkPickerModalData { @@ -15,7 +16,7 @@ export interface UmbLinkPickerConfig { } export const UMB_LINK_PICKER_MODAL = new UmbModalToken( - 'Umb.Modal.LinkPicker', + UMB_MULTI_URL_PICKER_MODAL_ALIAS, { modal: { type: 'sidebar', diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker-modal/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker-modal/manifests.ts index f809efc9e7..b36c62f997 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker-modal/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/link-picker-modal/manifests.ts @@ -1,7 +1,9 @@ +import { UMB_MULTI_URL_PICKER_MODAL_ALIAS } from './constants.js'; + export const manifests = [ { type: 'modal', - alias: 'Umb.Modal.MultiUrlLinkPicker', + alias: UMB_MULTI_URL_PICKER_MODAL_ALIAS, name: 'Property Editor Multi Url Link Picker Modal', element: () => import('./link-picker-modal.element.js'), }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/multi-url-picker/index.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/multi-url-picker/index.ts new file mode 100644 index 0000000000..2d2ffcb054 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/multi-url-picker/index.ts @@ -0,0 +1 @@ +export * from './multi-url-picker.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/input-multi-url/input-multi-url.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/multi-url-picker/multi-url-picker.element.ts similarity index 97% rename from src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/input-multi-url/input-multi-url.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/multi-url-picker/multi-url-picker.element.ts index 6ec8ee16d7..5600821f11 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/input-multi-url/input-multi-url.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/multi-url-picker/multi-url-picker.element.ts @@ -17,8 +17,9 @@ import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui'; * @fires blur - when the input loses focus * @fires focus - when the input gains focus */ -@customElement('umb-input-multi-url') -export class UmbInputMultiUrlElement extends UUIFormControlMixin(UmbLitElement, '') { +const elementName = 'umb-multi-url-picker'; +@customElement(elementName) +export class UmbMultiUrlPickerElement extends UUIFormControlMixin(UmbLitElement, '') { #sorter = new UmbSorterController(this, { getUniqueOfElement: (element) => { return element.id; @@ -298,6 +299,6 @@ export class UmbInputMultiUrlElement extends UUIFormControlMixin(UmbLitElement, declare global { interface HTMLElementTagNameMap { - 'umb-input-multi-url': UmbInputMultiUrlElement; + [elementName]: UmbMultiUrlPickerElement; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/multi-url-picker/multi-url-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/multi-url-picker/multi-url-picker.stories.ts new file mode 100644 index 0000000000..2772b6ccd2 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/multi-url-picker/multi-url-picker.stories.ts @@ -0,0 +1,15 @@ +import type { Meta, StoryObj } from '@storybook/web-components'; +import './multi-url-picker.element.js'; +import type { UmbMultiUrlPickerElement } from './multi-url-picker.element.js'; + +const meta: Meta = { + title: 'Components/Inputs/Multi URL', + component: 'umb-input-multi-url', +}; + +export default meta; +type Story = StoryObj; + +export const Overview: Story = { + args: {}, +}; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/property-editor-ui-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/property-editor-ui-multi-url-picker.element.ts index 0d1047b8e1..03447f22f6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/property-editor-ui-multi-url-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/property-editor-ui-multi-url-picker.element.ts @@ -1,5 +1,5 @@ import type { UmbLinkPickerLink } from './link-picker-modal/types.js'; -import type { UmbInputMultiUrlElement } from './input-multi-url/input-multi-url.element.js'; +import type { UmbMultiUrlPickerElement } from './multi-url-picker/multi-url-picker.element.js'; import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor'; @@ -9,7 +9,7 @@ import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extensi import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui'; // import of local component -import './input-multi-url/input-multi-url.element.js'; +import './multi-url-picker/multi-url-picker.element.js'; /** * @element umb-property-editor-ui-multi-url-picker @@ -59,14 +59,14 @@ export class UmbPropertyEditorUIMultiUrlPickerElement extends UmbLitElement impl }); } - #onChange(event: CustomEvent & { target: UmbInputMultiUrlElement }) { + #onChange(event: CustomEvent & { target: UmbMultiUrlPickerElement }) { this.value = event.target.urls; this.dispatchEvent(new UmbPropertyValueChangeEvent()); } render() { return html` - - + `; } } From 983ffe7290844c4a06e9f6113930adb15f017e1f Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 2 May 2024 20:52:23 +0200 Subject: [PATCH 11/36] move multi url picker tiny mce plugin to property editor package --- .../multi-url-picker/manifests.ts | 3 ++- .../multi-url-picker/tiny-mce/manifests.ts | 22 +++++++++++++++++++ .../tiny-mce-multi-url-picker.plugin.ts} | 22 ++++++++++++------- .../packages/tiny-mce/plugins/manifests.ts | 20 ----------------- 4 files changed, 38 insertions(+), 29 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/tiny-mce/manifests.ts rename src/Umbraco.Web.UI.Client/src/packages/{tiny-mce/plugins/tiny-mce-linkpicker.plugin.ts => property-editors/multi-url-picker/tiny-mce/tiny-mce-multi-url-picker.plugin.ts} (90%) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/manifests.ts index c3a0d50c61..37552be69a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/manifests.ts @@ -1,5 +1,6 @@ import { manifest as schemaManifest } from './Umbraco.MultiUrlPicker.js'; import { manifests as modalManifests } from './link-picker-modal/manifests.js'; +import { manifests as tinyMcePluginManifests } from './tiny-mce/manifests.js'; import type { ManifestPropertyEditorUi, ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; const manifest: ManifestPropertyEditorUi = { @@ -31,4 +32,4 @@ const manifest: ManifestPropertyEditorUi = { }, }; -export const manifests: Array = [manifest, schemaManifest, ...modalManifests]; +export const manifests: Array = [manifest, schemaManifest, ...modalManifests, ...tinyMcePluginManifests]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/tiny-mce/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/tiny-mce/manifests.ts new file mode 100644 index 0000000000..8d7455f5e5 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/tiny-mce/manifests.ts @@ -0,0 +1,22 @@ +export const manifests = [ + { + type: 'tinyMcePlugin', + alias: 'Umb.TinyMcePlugin.MultiUrlPicker', + name: 'Multi Url Picker TinyMCE Plugin', + js: () => import('./tiny-mce-multi-url-picker.plugin.js'), + meta: { + toolbar: [ + { + alias: 'link', + label: 'Insert/Edit link', + icon: 'link', + }, + { + alias: 'unlink', + label: 'Remove link', + icon: 'unlink', + }, + ], + }, + }, +]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/plugins/tiny-mce-linkpicker.plugin.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/tiny-mce/tiny-mce-multi-url-picker.plugin.ts similarity index 90% rename from src/Umbraco.Web.UI.Client/src/packages/tiny-mce/plugins/tiny-mce-linkpicker.plugin.ts rename to src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/tiny-mce/tiny-mce-multi-url-picker.plugin.ts index 0536f0347e..df7e0b4e1e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/plugins/tiny-mce-linkpicker.plugin.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/tiny-mce/tiny-mce-multi-url-picker.plugin.ts @@ -1,6 +1,11 @@ -import { type TinyMcePluginArguments, UmbTinyMcePluginBase } from '../components/input-tiny-mce/tiny-mce-plugin.js'; -import type { UmbLinkPickerModalValue, UmbLinkPickerLink } from '@umbraco-cms/backoffice/modal'; -import { UMB_LINK_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; +import { + type TinyMcePluginArguments, + UmbTinyMcePluginBase, +} from '../../../tiny-mce/components/input-tiny-mce/tiny-mce-plugin.js'; +import type { UmbLinkPickerModalValue } from '../link-picker-modal/link-picker-modal.token.js'; +import { UMB_LINK_PICKER_MODAL } from '../link-picker-modal/link-picker-modal.token.js'; +import type { UmbLinkPickerLink } from '../link-picker-modal/types.js'; +import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; type AnchorElementAttributes = { href?: string | null; @@ -11,7 +16,7 @@ type AnchorElementAttributes = { text?: string; }; -export default class UmbTinyMceLinkPickerPlugin extends UmbTinyMcePluginBase { +export default class UmbTinyMceMultiUrlPickerPlugin extends UmbTinyMcePluginBase { #linkPickerData?: UmbLinkPickerModalValue; #anchorElement?: HTMLAnchorElement; @@ -72,7 +77,7 @@ export default class UmbTinyMceLinkPickerPlugin extends UmbTinyMcePluginBase { if (this.#anchorElement.href.includes('localLink:')) { const href = this.#anchorElement.getAttribute('href')!; - currentTarget.unique = href.substring(href.indexOf(":") + 1, href.indexOf("}")); + currentTarget.unique = href.substring(href.indexOf(':') + 1, href.indexOf('}')); } else if (this.#anchorElement.host.length) { currentTarget.url = this.#anchorElement.protocol ? this.#anchorElement.protocol + '//' : undefined; currentTarget.url += this.#anchorElement.host + this.#anchorElement.pathname; @@ -122,9 +127,10 @@ export default class UmbTinyMceLinkPickerPlugin extends UmbTinyMcePluginBase { a.title = name; } - if (this.#linkPickerData?.link.queryString?.startsWith('#') || - this.#linkPickerData?.link.queryString?.startsWith('?')) - { + if ( + this.#linkPickerData?.link.queryString?.startsWith('#') || + this.#linkPickerData?.link.queryString?.startsWith('?') + ) { a['data-anchor'] = this.#linkPickerData?.link.queryString; a.href += this.#linkPickerData?.link.queryString; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/plugins/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/plugins/manifests.ts index 56a1167d33..e70a612d5e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/plugins/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/plugins/manifests.ts @@ -16,26 +16,6 @@ export const manifests: Array = [ ], }, }, - { - type: 'tinyMcePlugin', - alias: 'Umb.TinyMcePlugin.LinkPicker', - name: 'Link Picker TinyMCE Plugin', - js: () => import('./tiny-mce-linkpicker.plugin.js'), - meta: { - toolbar: [ - { - alias: 'link', - label: 'Insert/Edit link', - icon: 'link', - }, - { - alias: 'unlink', - label: 'Remove link', - icon: 'unlink', - }, - ], - }, - }, { type: 'tinyMcePlugin', alias: 'Umb.TinyMcePlugin.MediaPicker', From a2346fef8caa88245a86a567e10bd1fe21afe27c Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 3 May 2024 10:43:20 +0200 Subject: [PATCH 12/36] add extension point for markdown actions --- .../src/packages/core/extension-registry/models/index.ts | 3 +++ .../models/monaco-markdown-editor-action.model.ts | 8 ++++++++ 2 files changed, 11 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/monaco-markdown-editor-action.model.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/index.ts index bdd6749492..f7b427da73 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/index.ts @@ -67,6 +67,7 @@ import type { ManifestSearchResultItem } from './search-result-item.model.js'; import type { ManifestAppEntryPoint } from './app-entry-point.model.js'; import type { ManifestBackofficeEntryPoint } from './backoffice-entry-point.model.js'; import type { ManifestEntryPoint } from './entry-point.model.js'; +import type { ManifestMonacoMarkdownEditorAction } from './monaco-markdown-editor-action.model.js'; import type { ManifestBase, ManifestBundle, ManifestCondition } from '@umbraco-cms/backoffice/extension-api'; export type * from './app-entry-point.model.js'; @@ -94,6 +95,7 @@ export type * from './menu-item.model.js'; export type * from './menu.model.js'; export type * from './mfa-login-provider.model.js'; export type * from './modal.model.js'; +export type * from './monaco-markdown-editor-action.model.js'; export type * from './package-view.model.js'; export type * from './property-action.model.js'; export type * from './property-editor.model.js'; @@ -179,6 +181,7 @@ export type ManifestTypes = | ManifestMenuItemTreeKind | ManifestMfaLoginProvider | ManifestModal + | ManifestMonacoMarkdownEditorAction | ManifestPackageView | ManifestPropertyActions | ManifestPropertyEditorSchema diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/monaco-markdown-editor-action.model.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/monaco-markdown-editor-action.model.ts new file mode 100644 index 0000000000..d836458a27 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/monaco-markdown-editor-action.model.ts @@ -0,0 +1,8 @@ +import type { ManifestApi } from '@umbraco-cms/backoffice/extension-api'; + +export interface ManifestMonacoMarkdownEditorAction extends ManifestApi { + type: 'monacoMarkdownEditorAction'; + meta?: MetaMonacoMarkdownEditorAction; +} + +export interface MetaMonacoMarkdownEditorAction {} From ce016bf93389a20e331ec1cc64cbf918b7bebc9f Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 10 May 2024 13:51:58 +0200 Subject: [PATCH 13/36] add recycle bin conditions for media + document root access --- .../models/menu-item.model.ts | 7 +++-- .../allow-document-recycle-bin.condition.ts | 25 ++++++++++++++++++ .../documents/recycle-bin/manifests.ts | 6 +++++ .../recycle-bin/menu-item/manifests.ts | 5 ++++ .../allow-media-recycle-bin.condition.ts | 25 ++++++++++++++++++ .../media/media/recycle-bin/manifests.ts | 6 +++++ .../media/recycle-bin/menu-item/manifests.ts | 5 ++++ .../user/current-user/current-user.context.ts | 2 ++ .../current-user.server.data-source.ts | 26 ++++++++++--------- .../src/packages/user/current-user/types.ts | 24 +++++++++-------- 10 files changed, 106 insertions(+), 25 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/recycle-bin/allow-document-recycle-bin.condition.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media/recycle-bin/allow-media-recycle-bin.condition.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/menu-item.model.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/menu-item.model.ts index 3efd308a9a..05eeb81b78 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/menu-item.model.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/menu-item.model.ts @@ -1,7 +1,10 @@ import type { UmbMenuItemElement } from '../interfaces/menu-item-element.interface.js'; -import type { ManifestElement } from '@umbraco-cms/backoffice/extension-api'; +import type { ConditionTypes } from '../conditions/types.js'; +import type { ManifestWithDynamicConditions, ManifestElement } from '@umbraco-cms/backoffice/extension-api'; -export interface ManifestMenuItem extends ManifestElement { +export interface ManifestMenuItem + extends ManifestElement, + ManifestWithDynamicConditions { type: 'menuItem'; meta: MetaMenuItem; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/recycle-bin/allow-document-recycle-bin.condition.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/recycle-bin/allow-document-recycle-bin.condition.ts new file mode 100644 index 0000000000..bdd03fd190 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/recycle-bin/allow-document-recycle-bin.condition.ts @@ -0,0 +1,25 @@ +import { UmbConditionBase } from '@umbraco-cms/backoffice/extension-registry'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; +import type { + UmbConditionConfigBase, + UmbConditionControllerArguments, + UmbExtensionCondition, +} from '@umbraco-cms/backoffice/extension-api'; +import { UMB_CURRENT_USER_CONTEXT } from '@umbraco-cms/backoffice/current-user'; + +export class UmbAllowDocumentRecycleBinCurrentUserCondition + extends UmbConditionBase + implements UmbExtensionCondition +{ + constructor(host: UmbControllerHost, args: UmbConditionControllerArguments) { + super(host, args); + + this.consumeContext(UMB_CURRENT_USER_CONTEXT, (context) => { + this.observe(context.hasDocumentRootAccess, (hasAccess) => { + this.permitted = hasAccess === true; + }); + }); + } +} + +export { UmbAllowDocumentRecycleBinCurrentUserCondition as api }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/recycle-bin/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/recycle-bin/manifests.ts index a97b720238..af9255f13c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/recycle-bin/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/recycle-bin/manifests.ts @@ -5,6 +5,12 @@ import { manifests as treeManifests } from './tree/manifests.js'; import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; export const manifests: Array = [ + { + type: 'condition', + name: 'Allow Document Recycle Bin Current User Condition', + alias: 'Umb.Condition.CurrentUser.AllowDocumentRecycleBin', + api: () => import('./allow-document-recycle-bin.condition.js'), + }, ...entityActionManifests, ...menuItemManifests, ...repositoryManifests, diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/recycle-bin/menu-item/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/recycle-bin/menu-item/manifests.ts index 27ade54b9d..fb27a67276 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/recycle-bin/menu-item/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/recycle-bin/menu-item/manifests.ts @@ -14,6 +14,11 @@ const menuItem: ManifestMenuItemTreeKind = { icon: 'icon-trash', menus: [UMB_CONTENT_MENU_ALIAS], }, + conditions: [ + { + alias: 'Umb.Condition.CurrentUser.AllowDocumentRecycleBin', + }, + ], }; export const manifests: Array = [menuItem]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/recycle-bin/allow-media-recycle-bin.condition.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/recycle-bin/allow-media-recycle-bin.condition.ts new file mode 100644 index 0000000000..ca5f74bda2 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/recycle-bin/allow-media-recycle-bin.condition.ts @@ -0,0 +1,25 @@ +import { UmbConditionBase } from '@umbraco-cms/backoffice/extension-registry'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; +import type { + UmbConditionConfigBase, + UmbConditionControllerArguments, + UmbExtensionCondition, +} from '@umbraco-cms/backoffice/extension-api'; +import { UMB_CURRENT_USER_CONTEXT } from '@umbraco-cms/backoffice/current-user'; + +export class UmbAllowMediaRecycleBinCurrentUserCondition + extends UmbConditionBase + implements UmbExtensionCondition +{ + constructor(host: UmbControllerHost, args: UmbConditionControllerArguments) { + super(host, args); + + this.consumeContext(UMB_CURRENT_USER_CONTEXT, (context) => { + this.observe(context.hasMediaRootAccess, (hasAccess) => { + this.permitted = hasAccess === true; + }); + }); + } +} + +export { UmbAllowMediaRecycleBinCurrentUserCondition as api }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/recycle-bin/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/recycle-bin/manifests.ts index a97b720238..8cf3e41fb1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/recycle-bin/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/recycle-bin/manifests.ts @@ -5,6 +5,12 @@ import { manifests as treeManifests } from './tree/manifests.js'; import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; export const manifests: Array = [ + { + type: 'condition', + name: 'Allow Media Recycle Bin Current User Condition', + alias: 'Umb.Condition.CurrentUser.AllowMediaRecycleBin', + api: () => import('./allow-media-recycle-bin.condition.js'), + }, ...entityActionManifests, ...menuItemManifests, ...repositoryManifests, diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/recycle-bin/menu-item/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/recycle-bin/menu-item/manifests.ts index dda0653c7f..8155c5c801 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/recycle-bin/menu-item/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/recycle-bin/menu-item/manifests.ts @@ -14,6 +14,11 @@ const menuItem: ManifestMenuItemTreeKind = { icon: 'icon-trash', menus: [UMB_MEDIA_MENU_ALIAS], }, + conditions: [ + { + alias: 'Umb.Condition.CurrentUser.AllowMediaRecycleBin', + }, + ], }; export const manifests: Array = [menuItem]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/current-user.context.ts b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/current-user.context.ts index 2faa82b6ff..69e0d1cd18 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/current-user.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/current-user.context.ts @@ -14,6 +14,8 @@ export class UmbCurrentUserContext extends UmbContextBase readonly unique = this.#currentUser.asObservablePart((user) => user?.unique); readonly languageIsoCode = this.#currentUser.asObservablePart((user) => user?.languageIsoCode); + readonly hasDocumentRootAccess = this.#currentUser.asObservablePart((user) => user?.hasDocumentRootAccess); + readonly hasMediaRootAccess = this.#currentUser.asObservablePart((user) => user?.hasMediaRootAccess); #authContext?: typeof UMB_AUTH_CONTEXT.TYPE; #currentUserRepository = new UmbCurrentUserRepository(this); diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/repository/current-user.server.data-source.ts b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/repository/current-user.server.data-source.ts index 46bfc12a3c..60ec6d51c4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/repository/current-user.server.data-source.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/repository/current-user.server.data-source.ts @@ -30,20 +30,22 @@ export class UmbCurrentUserServerDataSource { if (data) { const user: UmbCurrentUserModel = { - unique: data.id, - email: data.email, - userName: data.userName, - name: data.name, - languageIsoCode: data.languageIsoCode || 'en-us', // TODO: make global variable - documentStartNodeUniques: data.documentStartNodeIds, - mediaStartNodeUniques: data.mediaStartNodeIds, - avatarUrls: data.avatarUrls, - languages: data.languages, - hasAccessToAllLanguages: data.hasAccessToAllLanguages, - fallbackPermissions: data.fallbackPermissions, - permissions: data.permissions, allowedSections: data.allowedSections, + avatarUrls: data.avatarUrls, + documentStartNodeUniques: data.documentStartNodeIds, + email: data.email, + fallbackPermissions: data.fallbackPermissions, + hasAccessToAllLanguages: data.hasAccessToAllLanguages, + hasDocumentRootAccess: data.hasDocumentRootAccess, + hasMediaRootAccess: data.hasMediaRootAccess, isAdmin: data.isAdmin, + languageIsoCode: data.languageIsoCode || 'en-us', // TODO: make global variable + languages: data.languages, + mediaStartNodeUniques: data.mediaStartNodeIds, + name: data.name, + permissions: data.permissions, + unique: data.id, + userName: data.userName, }; return { data: user }; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/types.ts b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/types.ts index ba8898ade5..e480087911 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/types.ts @@ -7,20 +7,22 @@ import type { } from '@umbraco-cms/backoffice/external/backend-api'; export interface UmbCurrentUserModel { - unique: string; - email: string; - userName: string; - name: string; - languageIsoCode: string; - documentStartNodeUniques: Array; - mediaStartNodeUniques: Array; - avatarUrls: Array; - languages: Array; - hasAccessToAllLanguages: boolean; allowedSections: Array; + avatarUrls: Array; + documentStartNodeUniques: Array; + email: string; fallbackPermissions: Array; - permissions: Array; + hasAccessToAllLanguages: boolean; + hasDocumentRootAccess: boolean; + hasMediaRootAccess: boolean; isAdmin: boolean; + languageIsoCode: string; + languages: Array; + mediaStartNodeUniques: Array; + name: string; + permissions: Array; + unique: string; + userName: string; } export type UmbCurrentUserMfaProviderModel = UserTwoFactorProviderModel; From 72a83370f346a6679dae0f4e33f5b15750f123ef Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 10 May 2024 15:14:36 +0200 Subject: [PATCH 14/36] move extension components --- src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts | 2 -- src/Umbraco.Web.UI.Client/src/packages/core/entry-point.ts | 1 + .../components/extension-slot/extension-slot.element.ts | 2 +- .../components/extension-slot/extension-slot.test.ts | 0 .../{ => extension-registry}/components/extension-slot/index.ts | 0 .../extension-with-api-slot/extension-with-api-slot.element.ts | 2 +- .../extension-with-api-slot/extension-with-api-slot.test.ts | 0 .../components/extension-with-api-slot/index.ts | 0 .../src/packages/core/extension-registry/components/index.ts | 2 ++ .../src/packages/core/property/property/property.element.ts | 2 +- 10 files changed, 6 insertions(+), 5 deletions(-) rename src/Umbraco.Web.UI.Client/src/packages/core/{ => extension-registry}/components/extension-slot/extension-slot.element.ts (98%) rename src/Umbraco.Web.UI.Client/src/packages/core/{ => extension-registry}/components/extension-slot/extension-slot.test.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/{ => extension-registry}/components/extension-slot/index.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/{ => extension-registry}/components/extension-with-api-slot/extension-with-api-slot.element.ts (98%) rename src/Umbraco.Web.UI.Client/src/packages/core/{ => extension-registry}/components/extension-with-api-slot/extension-with-api-slot.test.ts (100%) rename src/Umbraco.Web.UI.Client/src/packages/core/{ => extension-registry}/components/extension-with-api-slot/index.ts (100%) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/index.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts index 789608dba4..7d6646a4f4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts @@ -6,8 +6,6 @@ export * from './body-layout/body-layout.element.js'; export * from './code-block/index.js'; export * from './dropdown/index.js'; export * from './entity-actions-bundle/index.js'; -export * from './extension-slot/index.js'; -export * from './extension-with-api-slot/index.js'; export * from './footer-layout/index.js'; export * from './header-app/index.js'; export * from './history/index.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entry-point.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entry-point.ts index 1f88e46d6a..912cee601d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/entry-point.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/entry-point.ts @@ -8,6 +8,7 @@ import { UmbExtensionsApiInitializer, type UmbEntryPointOnInit } from '@umbraco- // TODO temp relative import until modules ship a component sub module import './menu/components/index.js'; +import './extension-registry/components/index.js'; export const onInit: UmbEntryPointOnInit = (host, extensionRegistry) => { new UmbExtensionsApiInitializer(host, extensionRegistry, 'globalContext', [host]); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/extension-slot/extension-slot.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-slot/extension-slot.element.ts similarity index 98% rename from src/Umbraco.Web.UI.Client/src/packages/core/components/extension-slot/extension-slot.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-slot/extension-slot.element.ts index a09e8f9bf0..303a5d397a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/extension-slot/extension-slot.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-slot/extension-slot.element.ts @@ -1,4 +1,4 @@ -import { umbExtensionsRegistry } from '../../extension-registry/index.js'; +import { umbExtensionsRegistry } from '../../registry.js'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { TemplateResult } from '@umbraco-cms/backoffice/external/lit'; import { css, repeat, customElement, property, state, html } from '@umbraco-cms/backoffice/external/lit'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/extension-slot/extension-slot.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-slot/extension-slot.test.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/components/extension-slot/extension-slot.test.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-slot/extension-slot.test.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/extension-slot/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-slot/index.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/components/extension-slot/index.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-slot/index.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/extension-with-api-slot/extension-with-api-slot.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-with-api-slot/extension-with-api-slot.element.ts similarity index 98% rename from src/Umbraco.Web.UI.Client/src/packages/core/components/extension-with-api-slot/extension-with-api-slot.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-with-api-slot/extension-with-api-slot.element.ts index e056b60241..45199b6099 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/extension-with-api-slot/extension-with-api-slot.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-with-api-slot/extension-with-api-slot.element.ts @@ -1,4 +1,4 @@ -import { umbExtensionsRegistry } from '../../extension-registry/index.js'; +import { umbExtensionsRegistry } from '../../registry.js'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { TemplateResult } from '@umbraco-cms/backoffice/external/lit'; import { css, repeat, customElement, property, state, html } from '@umbraco-cms/backoffice/external/lit'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/extension-with-api-slot/extension-with-api-slot.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-with-api-slot/extension-with-api-slot.test.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/components/extension-with-api-slot/extension-with-api-slot.test.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-with-api-slot/extension-with-api-slot.test.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/extension-with-api-slot/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-with-api-slot/index.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/packages/core/components/extension-with-api-slot/index.ts rename to src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-with-api-slot/index.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/index.ts new file mode 100644 index 0000000000..4f454594ee --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/index.ts @@ -0,0 +1,2 @@ +export * from './extension-slot/index.js'; +export * from './extension-with-api-slot/index.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.element.ts index e6397911a7..3c780449af 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.element.ts @@ -1,5 +1,5 @@ -import { umbExtensionsRegistry, type ManifestPropertyEditorUi } from '../../extension-registry/index.js'; import { UmbPropertyContext } from './property.context.js'; +import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { css, html, customElement, property, state, ifDefined, nothing } from '@umbraco-cms/backoffice/external/lit'; import { createExtensionElement } from '@umbraco-cms/backoffice/extension-api'; From 0560644df63fc8fa9da9b890581bd36893aa827c Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 10 May 2024 18:27:28 +0200 Subject: [PATCH 15/36] wip monaco markdown editor extensions --- .../input-markdown.element.ts | 119 ++++++++---------- .../multi-url-picker/manifests.ts | 11 +- .../monaco-markdown-editor/constants.ts | 0 .../monaco-markdown-editor/manifests.ts | 8 ++ ...rl-picker-monaco-markdown-editor-action.ts | 83 ++++++++++++ 5 files changed, 153 insertions(+), 68 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/monaco-markdown-editor/constants.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/monaco-markdown-editor/manifests.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/monaco-markdown-editor/url-picker-monaco-markdown-editor-action.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/components/input-markdown-editor/input-markdown.element.ts b/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/components/input-markdown-editor/input-markdown.element.ts index 3f8cb8a543..58bf0c7b5d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/components/input-markdown-editor/input-markdown.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/components/input-markdown-editor/input-markdown.element.ts @@ -1,4 +1,13 @@ -import { css, html, customElement, query, property, unsafeHTML, when } from '@umbraco-cms/backoffice/external/lit'; +import { + css, + html, + customElement, + query, + property, + unsafeHTML, + when, + state, +} from '@umbraco-cms/backoffice/external/lit'; import { DOMPurify } from '@umbraco-cms/backoffice/external/dompurify'; import { marked } from '@umbraco-cms/backoffice/external/marked'; import { monaco } from '@umbraco-cms/backoffice/external/monaco-editor'; @@ -7,12 +16,14 @@ import { UmbBooleanState } from '@umbraco-cms/backoffice/observable-api'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app'; -import { UMB_LINK_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; +import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; import { UMB_MEDIA_TREE_PICKER_MODAL } from '@umbraco-cms/backoffice/media'; import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui'; import type { UmbCodeEditorController, UmbCodeEditorElement } from '@umbraco-cms/backoffice/code-editor'; import type { UmbModalManagerContext } from '@umbraco-cms/backoffice/modal'; import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui'; +import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; +import { createExtensionApi } from '@umbraco-cms/backoffice/extension-api'; /** * @element umb-input-markdown @@ -39,6 +50,9 @@ export class UmbInputMarkdownElement extends UUIFormControlMixin(UmbLitElement, @query('umb-code-editor') _codeEditor?: UmbCodeEditorElement; + @state() + _customActions: Array = []; + private _modalContext?: UmbModalManagerContext; private serverUrl?: string; @@ -46,9 +60,11 @@ export class UmbInputMarkdownElement extends UUIFormControlMixin(UmbLitElement, constructor() { super(); this.#loadCodeEditor(); + this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (instance) => { this._modalContext = instance; }); + this.consumeContext(UMB_APP_CONTEXT, (instance) => { this.serverUrl = instance.getServerUrl(); }); @@ -67,6 +83,22 @@ export class UmbInputMarkdownElement extends UUIFormControlMixin(UmbLitElement, }); // Prefer to update options before showing the editor, to avoid seeing the changes in the UI. this.#isCodeEditorReady.setValue(true); + + this.observe(umbExtensionsRegistry.byType('monacoMarkdownEditorAction'), (manifests) => { + manifests.forEach(async (manifest) => { + const api = await createExtensionApi(this, manifest, [this]); + const action: monaco.editor.IActionDescriptor = { + id: api.getUnique(), + label: api.getLabel(), + keybindings: api.getKeybindings(), + run: async () => await api.execute({ editor: this.#editor }), + }; + this.#editor?.monacoEditor?.addAction(action); + this._customActions.push(action); + this.requestUpdate('_customActions'); + }); + }); + this.#loadActions(); } catch (error) { console.error(error); @@ -157,12 +189,6 @@ export class UmbInputMarkdownElement extends UUIFormControlMixin(UmbLitElement, id: 'line', run: () => this._insertLine(), }); - this.#editor?.monacoEditor?.addAction({ - label: 'Add Link', - id: 'link', - keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyK], - run: () => this._insertLink(), - }); this.#editor?.monacoEditor?.addAction({ label: 'Add Image', id: 'image', @@ -172,61 +198,18 @@ export class UmbInputMarkdownElement extends UUIFormControlMixin(UmbLitElement, }); } + #onActionClick(event: any, action: monaco.editor.IActionDescriptor) { + event.stopPropagation(); + const blah = this.#editor?.monacoEditor?.getAction(action.id); + debugger; + this.#editor?.monacoEditor?.getAction(action.id)?.run(); + } + private _focusEditor(): void { // If we press one of the action buttons manually (which is outside the editor), we need to focus the editor again. this.#editor?.monacoEditor?.focus(); } - private _insertLink() { - const selection = this.#editor?.getSelections()[0]; - if (!selection || !this._modalContext) return; - - const selectedValue = this.#editor?.getValueInRange(selection); - - this._focusEditor(); // Focus before opening modal - const modalContext = this._modalContext.open(this, UMB_LINK_PICKER_MODAL, { - modal: { size: this.overlaySize }, - data: { - index: null, - config: {}, - }, - value: { - link: { name: selectedValue }, - }, - }); - - modalContext - ?.onSubmit() - .then((value) => { - if (!value) return; - - const name = this.localize.term('general_name'); - const url = this.localize.term('general_url'); - - this.#editor?.monacoEditor?.executeEdits('', [ - { range: selection, text: `[${value.link.name || name}](${value.link.url || url})` }, - ]); - - if (!value.link.name) { - this.#editor?.select({ - startColumn: selection.startColumn + 1, - endColumn: selection.startColumn + 1 + name.length, - endLineNumber: selection.startLineNumber, - startLineNumber: selection.startLineNumber, - }); - } else if (!value.link.url) { - this.#editor?.select({ - startColumn: selection.startColumn + 3 + value.link.name.length, - endColumn: selection.startColumn + 3 + value.link.name.length + url.length, - endLineNumber: selection.startLineNumber, - startLineNumber: selection.startLineNumber, - }); - } - }) - .catch(() => undefined) - .finally(() => this._focusEditor()); - } - private _insertMedia() { const selection = this.#editor?.getSelections()[0]; if (!selection) return; @@ -488,14 +471,6 @@ export class UmbInputMarkdownElement extends UUIFormControlMixin(UmbLitElement, @click=${() => this.#editor?.monacoEditor?.getAction('line')?.run()}> - this.#editor?.monacoEditor?.getAction('link')?.run()}> - - this.#editor?.monacoEditor?.getAction('image')?.run()}> + + ${this._customActions.map( + (action) => html` + this.#onActionClick(event, action)}> + + + `, + )}
= [manifest, schemaManifest, ...modalManifests, ...tinyMcePluginManifests]; +export const manifests: Array = [ + ...modalManifests, + ...monacoMarkdownEditorManifests, + ...tinyMceManifests, + manifest, + schemaManifest, +]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/monaco-markdown-editor/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/monaco-markdown-editor/constants.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/monaco-markdown-editor/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/monaco-markdown-editor/manifests.ts new file mode 100644 index 0000000000..78748548a1 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/monaco-markdown-editor/manifests.ts @@ -0,0 +1,8 @@ +export const manifests = [ + { + type: 'monacoMarkdownEditorAction', + alias: 'Umb.MonacoMarkdownEditorAction.MultiUrlPicker', + name: 'Multi Url Picker Monaco Markdown Editor Action', + js: () => import('./url-picker-monaco-markdown-editor-action.js'), + }, +]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/monaco-markdown-editor/url-picker-monaco-markdown-editor-action.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/monaco-markdown-editor/url-picker-monaco-markdown-editor-action.ts new file mode 100644 index 0000000000..061dd98255 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/multi-url-picker/monaco-markdown-editor/url-picker-monaco-markdown-editor-action.ts @@ -0,0 +1,83 @@ +import { UMB_LINK_PICKER_MODAL } from '../link-picker-modal/link-picker-modal.token.js'; +import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; +import { monaco } from '@umbraco-cms/backoffice/external/monaco-editor'; +import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui'; +import { UmbLocalizationController } from '@umbraco-cms/backoffice/localization-api'; +import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; + +export class UmbUrlPickerMonacoMarkdownEditorAction extends UmbControllerBase { + #localize = new UmbLocalizationController(this); + + constructor(host: UmbControllerHost) { + super(host); + } + + getUnique() { + return 'Umb.MonacoMarkdownEditorAction.UrlPicker'; + } + + getLabel() { + return this.#localize.term('general_insertLink'); + } + + getKeybindings() { + return [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyK]; + } + + async execute({ editor, overlaySize }: { editor: any; overlaySize: UUIModalSidebarSize }) { + if (!editor) throw new Error('Editor not found'); + const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT); + if (!modalManager) throw new Error('Modal manager not found'); + + const selection = editor?.getSelections()[0]; + if (!selection) return; + + const selectedValue = editor?.getValueInRange(selection); + editor.monacoEditor?.focus(); + + const modalContext = modalManager.open(this, UMB_LINK_PICKER_MODAL, { + modal: { size: overlaySize }, + data: { + index: null, + config: {}, + }, + value: { + link: { name: selectedValue }, + }, + }); + + modalContext + ?.onSubmit() + .then((value) => { + if (!value) return; + + const name = this.#localize.term('general_name'); + const url = this.#localize.term('general_url'); + + editor.monacoEditor?.executeEdits('', [ + { range: selection, text: `[${value.link.name || name}](${value.link.url || url})` }, + ]); + + if (!value.link.name) { + editor.select({ + startColumn: selection.startColumn + 1, + endColumn: selection.startColumn + 1 + name.length, + endLineNumber: selection.startLineNumber, + startLineNumber: selection.startLineNumber, + }); + } else if (!value.link.url) { + editor.select({ + startColumn: selection.startColumn + 3 + value.link.name.length, + endColumn: selection.startColumn + 3 + value.link.name.length + url.length, + endLineNumber: selection.startLineNumber, + startLineNumber: selection.startLineNumber, + }); + } + }) + .catch(() => undefined) + .finally(() => editor.monacoEditor?.focus()); + } +} + +export { UmbUrlPickerMonacoMarkdownEditorAction as api }; From f8fab3a3a75d8d3b92a97a839226f002fa7992ad Mon Sep 17 00:00:00 2001 From: JesmoDev <26099018+JesmoDev@users.noreply.github.com> Date: Tue, 14 May 2024 17:14:45 +0200 Subject: [PATCH 16/36] language back button and cleanup --- .../language/language-workspace-editor.element.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/language/workspace/language/language-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/language/workspace/language/language-workspace-editor.element.ts index fa5bc5f053..4d2c558e03 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/language/workspace/language/language-workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/language/workspace/language/language-workspace-editor.element.ts @@ -45,11 +45,10 @@ export class UmbLanguageWorkspaceEditorElement extends UmbLitElement { } render() { - return html` + return html`