Feature: Embedded media package

package.json

@@ -10,6 +10,7 @@
 		"./context-api": "./dist-cms/libs/context-api/index.js",
 		"./controller-api": "./dist-cms/libs/controller-api/index.js",
 		"./element-api": "./dist-cms/libs/element-api/index.js",
+		"./embedded-media": "./dist-cms/packages/embedded-media/index.js",
 		"./extension-api": "./dist-cms/libs/extension-api/index.js",
 		"./formatting-api": "./dist-cms/libs/formatting-api/index.js",
 		"./localization-api": "./dist-cms/libs/localization-api/index.js",

src/apps/backoffice/backoffice.element.ts

@@ -17,6 +17,7 @@ const CORE_PACKAGES = [
 	import('../../packages/data-type/umbraco-package.js'),
 	import('../../packages/dictionary/umbraco-package.js'),
 	import('../../packages/documents/umbraco-package.js'),
+	import('../../packages/embedded-media/umbraco-package.js'),
 	import('../../packages/extension-insights/umbraco-package.js'),
 	import('../../packages/health-check/umbraco-package.js'),
 	import('../../packages/help/umbraco-package.js'),

src/packages/core/modal/common/index.ts

@@ -1,3 +1,2 @@
-export * from './embedded-media/index.js';
 export * from './confirm/index.js';
 export * from './item-picker/index.js';

src/packages/core/modal/common/manifests.ts

@@ -1,13 +1,4 @@
 import { manifests as confirmManifests } from './confirm/manifests.js';
 import { manifests as itemPickerManifests } from './item-picker/manifests.js';
 
-export const manifests: Array<UmbExtensionManifest> = [
-	{
-		type: 'modal',
-		alias: 'Umb.Modal.EmbeddedMedia',
-		name: 'Embedded Media Modal',
-		element: () => import('./embedded-media/embedded-media-modal.element.js'),
-	},
-	...confirmManifests,
-	...itemPickerManifests,
-];
+export const manifests: Array<UmbExtensionManifest> = [...confirmManifests, ...itemPickerManifests];

src/packages/core/modal/token/index.ts

@@ -1,3 +1,2 @@
 export * from './change-password-modal.token.js';
-export * from './embedded-media-modal.token.js';
 export * from './modal-token.js';

src/packages/core/modal/common/embedded-media/index.ts → src/packages/embedded-media/index.ts

@@ -1 +1,2 @@
+export * from './modal/index.js';
 export * from './repository/index.js';

src/packages/embedded-media/manifests.ts

@@ -0,0 +1,4 @@
+import { manifests as modalManifests } from './modal/manifests.js';
+import { manifests as repositoryManifests } from './repository/manifests.js';
+
+export const manifests: Array<UmbExtensionManifest> = [...modalManifests, ...repositoryManifests];

src/packages/core/modal/common/embedded-media/embedded-media-modal.element.ts → src/packages/embedded-media/modal/embedded-media-modal.element.ts

@@ -1,7 +1,7 @@
-import { UmbOEmbedRepository } from './repository/oembed.repository.js';
+import { UmbOEmbedRepository } from '../repository/oembed.repository.js';
+import type { UmbEmbeddedMediaModalData, UmbEmbeddedMediaModalValue } from './embedded-media-modal.token.js';
 import { css, html, unsafeHTML, when, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import type { UmbEmbeddedMediaModalData, UmbEmbeddedMediaModalValue } from '@umbraco-cms/backoffice/modal';
 import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
 import type { UUIButtonState, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
 

src/packages/core/modal/common/embedded-media/embedded-media-modal.stories.ts → src/packages/embedded-media/modal/embedded-media-modal.stories.ts

@@ -1,9 +1,9 @@
 import '../../../components/body-layout/body-layout.element.js';
 import './embedded-media-modal.element.js';
 
+import type { UmbEmbeddedMediaModalData } from './embedded-media-modal.token.js';
 import type { Meta } from '@storybook/web-components';
 import { html } from '@umbraco-cms/backoffice/external/lit';
-import type { UmbEmbeddedMediaModalData } from '@umbraco-cms/backoffice/modal';
 
 export default {
 	title: 'API/Modals/Layouts/Embedded Media',

src/packages/core/modal/token/embedded-media-modal.token.ts → src/packages/embedded-media/modal/embedded-media-modal.token.ts

@@ -1,4 +1,4 @@
-import { UmbModalToken } from './modal-token.js';
+import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
 export interface UmbEmbeddedMediaModalData extends Partial<UmbEmbeddedMediaDimensionsModel> {
 	url?: string;

src/packages/embedded-media/modal/index.ts

@@ -0,0 +1 @@
+export * from './embedded-media-modal.token.js';

src/packages/embedded-media/modal/manifests.ts

@@ -0,0 +1,8 @@
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'modal',
+		alias: 'Umb.Modal.EmbeddedMedia',
+		name: 'Embedded Media Modal',
+		element: () => import('./embedded-media-modal.element.js'),
+	},
+];

src/packages/embedded-media/package.json

@@ -0,0 +1,8 @@
+{
+	"name": "@umbraco-backoffice/embedded-media",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"build": "vite build"
+	}
+}

src/packages/embedded-media/repository/constants.ts

@@ -0,0 +1 @@
+export const UMB_OEMBED_REPOSITORY_ALIAS = 'Umb.Repository.OEmbed';

src/packages/embedded-media/repository/index.ts

@@ -0,0 +1,2 @@
+export * from './oembed.repository.js';
+export * from './constants.js';

src/packages/core/modal/common/embedded-media/repository/manifests.ts → src/packages/embedded-media/repository/manifests.ts

@@ -1,4 +1,4 @@
-export const UMB_OEMBED_REPOSITORY_ALIAS = 'Umb.Repository.OEmbed';
+import { UMB_OEMBED_REPOSITORY_ALIAS } from './constants.js';
 
 export const manifests: Array<UmbExtensionManifest> = [
 	{

src/packages/embedded-media/umbraco-package.ts

@@ -0,0 +1,9 @@
+export const name = 'Umbraco.Core.EmbeddedMedia';
+export const extensions = [
+	{
+		name: 'Embedded Media Bundle',
+		alias: 'Umb.Bundle.EmbeddedMedia',
+		type: 'bundle',
+		js: () => import('./manifests.js'),
+	},
+];

src/packages/embedded-media/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/embedded-media';
+
+// delete the unbundled dist folder
+rmSync(dist, { recursive: true, force: true });
+
+export default defineConfig({
+	...getDefaultConfig({ dist }),
+});

src/packages/tiny-mce/plugins/tiny-mce-embeddedmedia.plugin.ts

@@ -1,7 +1,8 @@
 import { type TinyMcePluginArguments, UmbTinyMcePluginBase } from '../components/input-tiny-mce/tiny-mce-plugin.js';
 import { UmbLocalizationController } from '@umbraco-cms/backoffice/localization-api';
-import type { UmbEmbeddedMediaModalData, UmbEmbeddedMediaModalValue } from '@umbraco-cms/backoffice/modal';
-import { UMB_EMBEDDED_MEDIA_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
+import type { UmbEmbeddedMediaModalData, UmbEmbeddedMediaModalValue } from '@umbraco-cms/backoffice/embedded-media';
+import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
+import { UMB_EMBEDDED_MEDIA_MODAL } from '@umbraco-cms/backoffice/embedded-media';
 
 export default class UmbTinyMceEmbeddedMediaPlugin extends UmbTinyMcePluginBase {
 	constructor(args: TinyMcePluginArguments) {

tsconfig.json

@@ -38,6 +38,7 @@ DON'T EDIT THIS FILE DIRECTLY. It is generated by /devops/tsconfig/index.js
 			"@umbraco-cms/backoffice/context-api": ["./src/libs/context-api/index.ts"],
 			"@umbraco-cms/backoffice/controller-api": ["./src/libs/controller-api/index.ts"],
 			"@umbraco-cms/backoffice/element-api": ["./src/libs/element-api/index.ts"],
+			"@umbraco-cms/backoffice/embedded-media": ["./src/packages/embedded-media/index.ts"],
 			"@umbraco-cms/backoffice/extension-api": ["./src/libs/extension-api/index.ts"],
 			"@umbraco-cms/backoffice/formatting-api": ["./src/libs/formatting-api/index.ts"],
 			"@umbraco-cms/backoffice/localization-api": ["./src/libs/localization-api/index.ts"],