@wordpress/media-editor 0.2.0

package/README.md

@@ -0,0 +1,121 @@
+# Media Editor
+
+Media editor components for WordPress.
+
+## Installation
+
+```bash
+npm install @wordpress/media-editor --save
+```
+
+_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for such language features and APIs, you should include [the polyfill shipped in `@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill) in your code._
+
+## Usage
+
+```jsx
+import {
+	MediaEditorProvider,
+	MediaPreview,
+	MediaForm,
+	type Field,
+} from '@wordpress/media-editor';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+function MyMediaEditor( { mediaId } ) {
+	const media = useSelect(
+		( select ) =>
+			select( coreStore ).getEditedEntityRecord(
+				'postType',
+				'attachment',
+				mediaId
+			),
+		[ mediaId ]
+	);
+
+	const { editEntityRecord } = useDispatch( coreStore );
+
+	const handleChange = ( updates ) => {
+		editEntityRecord( 'postType', 'attachment', mediaId, updates );
+	};
+
+	// Define fields using the Field type from @wordpress/dataviews
+	const fields: Field[] = [
+		{ id: 'title', label: 'Title', type: 'text' },
+		{ id: 'alt_text', label: 'Alt Text', type: 'text' },
+		{ id: 'caption', label: 'Caption', type: 'textarea' },
+		{ id: 'description', label: 'Description', type: 'textarea' },
+	];
+
+	return (
+		<MediaEditorProvider
+			value={ media }
+			onChange={ handleChange }
+			settings={ { fields } }
+		>
+			<div style={ { display: 'flex', gap: '24px' } }>
+				<div style={ { flex: 1 } }>
+					<MediaPreview />
+				</div>
+				<div style={ { width: '360px' } }>
+					<MediaForm />
+				</div>
+			</div>
+		</MediaEditorProvider>
+	);
+}
+```
+
+## API
+
+### `<MediaEditorProvider>`
+
+Context provider that supplies media data and actions to child components.
+
+**Props:**
+
+-   `value`: (optional) Media object from the WordPress REST API
+-   `onChange`: (optional) Callback when media is updated `(updates: Partial<Media>) => void`. If not provided, the MediaEditor can be used in a read-only mode, which is useful for preview-only scenarios where editing is not needed.
+-   `settings`: (optional) Configuration object
+    -   `settings.fields`: Array of field definitions (uses `Field` type from `@wordpress/dataviews`)
+-   `children`: Child components
+
+### `<MediaPreview>`
+
+Displays a preview of the media file. Automatically detects and renders images, videos, audio, or generic files based on MIME type.
+
+**Props:**
+
+Accepts any props that will be spread onto the preview container element (useful for click handlers, accessibility attributes, etc.)
+
+### `<MediaForm>`
+
+Form for editing media metadata using `DataForm` from `@wordpress/dataviews`.
+
+**Props:**
+
+-   `form`: Optional form configuration (uses `Form` type from `@wordpress/dataviews`)
+-   `header`: Optional header content to display above the form
+
+## TypeScript
+
+This package is written in TypeScript and exports all relevant types:
+
+```typescript
+import type {
+	Media,
+	MediaEditorProviderProps,
+	MediaPreviewProps,
+	MediaFormProps,
+	Field,
+	Form,
+} from '@wordpress/media-editor';
+```
+
+## Contributing to this package
+
+This is an individual package that's part of the Gutenberg project. The project is organized as a monorepo. It's made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to [npm](https://www.npmjs.com/) and used by [WordPress](https://make.wordpress.org/core/) as well as other software projects.
+
+To find out more about contributing to this package or Gutenberg as a whole, please read the project's main [contributor guide](https://github.com/WordPress/gutenberg/tree/HEAD/CONTRIBUTING.md).
+
+<br /><br /><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

package/build/components/media-editor-provider/index.cjs

@@ -0,0 +1,59 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/media-editor/src/components/media-editor-provider/index.tsx
+var media_editor_provider_exports = {};
+__export(media_editor_provider_exports, {
+  MediaEditorProvider: () => MediaEditorProvider,
+  useMediaEditorContext: () => useMediaEditorContext
+});
+module.exports = __toCommonJS(media_editor_provider_exports);
+var import_element = require("@wordpress/element");
+var import_jsx_runtime = require("react/jsx-runtime");
+var MediaEditorContext = (0, import_element.createContext)(
+  void 0
+);
+function MediaEditorProvider({
+  value,
+  onChange,
+  settings = {},
+  children
+}) {
+  const contextValue = {
+    media: value,
+    onChange,
+    fields: settings.fields || []
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MediaEditorContext.Provider, { value: contextValue, children });
+}
+function useMediaEditorContext() {
+  const context = (0, import_element.useContext)(MediaEditorContext);
+  if (!context) {
+    throw new Error(
+      "useMediaEditorContext must be used within MediaEditorProvider"
+    );
+  }
+  return context;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MediaEditorProvider,
+  useMediaEditorContext
+});
+//# sourceMappingURL=index.cjs.map

package/build/components/media-editor-provider/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/media-editor-provider/index.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\nimport type { Field } from '@wordpress/dataviews';\nimport type { ReactNode } from 'react';\n\n/**\n * Media object from WordPress REST API.\n */\nexport interface Media {\n\tid?: number;\n\tsource_url?: string;\n\tmime_type?: string;\n\talt_text?: string;\n\ttitle?: string | { rendered?: string; raw?: string };\n\tcaption?: string | { rendered?: string; raw?: string };\n\tdescription?: string | { rendered?: string; raw?: string };\n\t[ key: string ]: any;\n}\n\n/**\n * Context value for MediaEditor.\n */\nexport interface MediaEditorContextValue {\n\tmedia?: Media;\n\tonChange?: ( updates: Partial< Media > ) => void;\n\tfields: Field< Media >[];\n}\n\n/**\n * Props for MediaEditorProvider.\n */\nexport interface MediaEditorProviderProps {\n\t/** The media object to edit. */\n\tvalue?: Media;\n\t/**\n\t * Callback when media is updated.\n\t *\n\t * Optional - if not provided, the MediaEditor can be used in a read-only mode,\n\t * useful for preview-only scenarios.\n\t */\n\tonChange?: ( updates: Partial< Media > ) => void;\n\t/** Configuration settings for the media editor. */\n\tsettings?: {\n\t\tfields?: Field< Media >[];\n\t};\n\t/** Child components. */\n\tchildren: ReactNode;\n}\n\nconst MediaEditorContext = createContext< MediaEditorContextValue | undefined >(\n\tundefined\n);\n\nexport function MediaEditorProvider( {\n\tvalue,\n\tonChange,\n\tsettings = {},\n\tchildren,\n}: MediaEditorProviderProps ) {\n\tconst contextValue: MediaEditorContextValue = {\n\t\tmedia: value,\n\t\tonChange,\n\t\tfields: settings.fields || [],\n\t};\n\n\treturn (\n\t\t<MediaEditorContext.Provider value={ contextValue }>\n\t\t\t{ children }\n\t\t</MediaEditorContext.Provider>\n\t);\n}\n\n/**\n * Hook to access the MediaEditor context.\n *\n * Must be used within a MediaEditorProvider component.\n *\n * @return MediaEditorContextValue value with media, onChange, and fields, etc.\n */\nexport function useMediaEditorContext(): MediaEditorContextValue {\n\tconst context = useContext( MediaEditorContext );\n\tif ( ! context ) {\n\t\tthrow new Error(\n\t\t\t'useMediaEditorContext must be used within MediaEditorProvider'\n\t\t);\n\t}\n\treturn context;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA0C;AAiExC;AAjBF,IAAM,yBAAqB;AAAA,EAC1B;AACD;AAEO,SAAS,oBAAqB;AAAA,EACpC;AAAA,EACA;AAAA,EACA,WAAW,CAAC;AAAA,EACZ;AACD,GAA8B;AAC7B,QAAM,eAAwC;AAAA,IAC7C,OAAO;AAAA,IACP;AAAA,IACA,QAAQ,SAAS,UAAU,CAAC;AAAA,EAC7B;AAEA,SACC,4CAAC,mBAAmB,UAAnB,EAA4B,OAAQ,cAClC,UACH;AAEF;AASO,SAAS,wBAAiD;AAChE,QAAM,cAAU,2BAAY,kBAAmB;AAC/C,MAAK,CAAE,SAAU;AAChB,UAAM,IAAI;AAAA,MACT;AAAA,IACD;AAAA,EACD;AACA,SAAO;AACR;",
+  "names": []
+}

package/build/components/media-form/index.cjs

@@ -0,0 +1,71 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/media-editor/src/components/media-form/index.tsx
+var media_form_exports = {};
+__export(media_form_exports, {
+  default: () => MediaForm
+});
+module.exports = __toCommonJS(media_form_exports);
+var import_dataviews = require("@wordpress/dataviews");
+var import_components = require("@wordpress/components");
+var import_media_editor_provider = require("../media-editor-provider/index.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function MediaForm({
+  form: formOverrides,
+  header
+}) {
+  const { media, fields, onChange } = (0, import_media_editor_provider.useMediaEditorContext)();
+  if (!media || !onChange) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "media-editor-form media-editor-form--loading", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {}) });
+  }
+  const defaultForm = {
+    layout: {
+      type: "panel"
+    },
+    fields: fields.map((field) => {
+      if (["title", "alt_text", "caption", "description"].includes(
+        field.id
+      )) {
+        return {
+          id: field.id,
+          layout: {
+            type: "regular",
+            labelPosition: "top"
+          }
+        };
+      }
+      return field.id;
+    })
+  };
+  const form = formOverrides || defaultForm;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "media-editor-form", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 4, children: [
+    header,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_dataviews.DataForm,
+      {
+        data: media,
+        fields,
+        form,
+        onChange
+      }
+    )
+  ] }) });
+}
+//# sourceMappingURL=index.cjs.map

package/build/components/media-form/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/media-form/index.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { DataForm } from '@wordpress/dataviews';\nimport type { Form, Field } from '@wordpress/dataviews';\nimport { Spinner, __experimentalVStack as VStack } from '@wordpress/components';\nimport type { ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { useMediaEditorContext } from '../media-editor-provider';\nimport type { Media } from '../media-editor-provider';\n\n/**\n * Props for MediaForm component.\n */\nexport interface MediaFormProps {\n\tform?: Form;\n\theader?: ReactNode;\n}\n\n/**\n * MediaForm component for editing media metadata.\n *\n * Renders a DataForm with fields for editing media properties like\n * title, alt text, caption, description, etc.\n *\n * @param props        - Component props.\n * @param props.form   - Optional form configuration.\n * @param props.header - Optional header content to display above the form.\n * @return The MediaForm component.\n */\nexport default function MediaForm( {\n\tform: formOverrides,\n\theader,\n}: MediaFormProps ) {\n\tconst { media, fields, onChange } = useMediaEditorContext();\n\n\tif ( ! media || ! onChange ) {\n\t\treturn (\n\t\t\t<div className=\"media-editor-form media-editor-form--loading\">\n\t\t\t\t<Spinner />\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Default form structure with panel layout\n\tconst defaultForm: Form = {\n\t\tlayout: {\n\t\t\ttype: 'panel',\n\t\t},\n\t\tfields: fields.map( ( field: Field< Media > ) => {\n\t\t\t// Use regular layout for main editable fields\n\t\t\tif (\n\t\t\t\t[ 'title', 'alt_text', 'caption', 'description' ].includes(\n\t\t\t\t\tfield.id\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\treturn {\n\t\t\t\t\tid: field.id,\n\t\t\t\t\tlayout: {\n\t\t\t\t\t\ttype: 'regular',\n\t\t\t\t\t\tlabelPosition: 'top',\n\t\t\t\t\t},\n\t\t\t\t};\n\t\t\t}\n\t\t\treturn field.id;\n\t\t} ),\n\t};\n\n\tconst form = formOverrides || defaultForm;\n\n\treturn (\n\t\t<div className=\"media-editor-form\">\n\t\t\t<VStack spacing={ 4 }>\n\t\t\t\t{ header }\n\t\t\t\t<DataForm\n\t\t\t\t\tdata={ media }\n\t\t\t\t\tfields={ fields }\n\t\t\t\t\tform={ form }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,uBAAyB;AAEzB,wBAAwD;AAMxD,mCAAsC;AA+BlC;AATW,SAAR,UAA4B;AAAA,EAClC,MAAM;AAAA,EACN;AACD,GAAoB;AACnB,QAAM,EAAE,OAAO,QAAQ,SAAS,QAAI,oDAAsB;AAE1D,MAAK,CAAE,SAAS,CAAE,UAAW;AAC5B,WACC,4CAAC,SAAI,WAAU,gDACd,sDAAC,6BAAQ,GACV;AAAA,EAEF;AAGA,QAAM,cAAoB;AAAA,IACzB,QAAQ;AAAA,MACP,MAAM;AAAA,IACP;AAAA,IACA,QAAQ,OAAO,IAAK,CAAE,UAA2B;AAEhD,UACC,CAAE,SAAS,YAAY,WAAW,aAAc,EAAE;AAAA,QACjD,MAAM;AAAA,MACP,GACC;AACD,eAAO;AAAA,UACN,IAAI,MAAM;AAAA,UACV,QAAQ;AAAA,YACP,MAAM;AAAA,YACN,eAAe;AAAA,UAChB;AAAA,QACD;AAAA,MACD;AACA,aAAO,MAAM;AAAA,IACd,CAAE;AAAA,EACH;AAEA,QAAM,OAAO,iBAAiB;AAE9B,SACC,4CAAC,SAAI,WAAU,qBACd,uDAAC,kBAAAA,sBAAA,EAAO,SAAU,GACf;AAAA;AAAA,IACF;AAAA,MAAC;AAAA;AAAA,QACA,MAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,KACD,GACD;AAEF;",
+  "names": ["VStack"]
+}

package/build/components/media-preview/index.cjs

@@ -0,0 +1,119 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/media-editor/src/components/media-preview/index.tsx
+var media_preview_exports = {};
+__export(media_preview_exports, {
+  default: () => MediaPreview
+});
+module.exports = __toCommonJS(media_preview_exports);
+var import_components = require("@wordpress/components");
+var import_element = require("@wordpress/element");
+var import_i18n = require("@wordpress/i18n");
+var import_media_editor_provider = require("../media-editor-provider/index.cjs");
+var import_utils = require("../../utils/index.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function MediaPreviewContent({
+  mediaType,
+  mediaUrl,
+  altText,
+  displayTitle,
+  mimeType,
+  onLoad,
+  onError,
+  loadingState
+}) {
+  switch (mediaType.type) {
+    case "image":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "img",
+        {
+          className: loadingState === "loaded" ? "loaded" : "",
+          src: mediaUrl,
+          alt: altText || "",
+          onLoad,
+          onError
+        }
+      );
+    case "video":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("video", { src: mediaUrl, controls: true, onError, children: displayTitle });
+    case "audio":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("audio", { src: mediaUrl, controls: true, onError, children: displayTitle });
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "media-editor-preview__file-info", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "media-editor-preview__file-name", children: displayTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "media-editor-preview__mime-type", children: mimeType }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "a",
+          {
+            href: mediaUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "media-editor-preview__download-link",
+            children: (0, import_i18n.__)("View file")
+          }
+        )
+      ] });
+  }
+}
+function MediaPreview(props) {
+  const [loadingState, setLoadingState] = (0, import_element.useState)("loading");
+  const { media } = (0, import_media_editor_provider.useMediaEditorContext)();
+  const {
+    source_url: mediaUrl,
+    mime_type: mimeType,
+    alt_text: altText,
+    title
+  } = media || {};
+  const mediaType = (0, import_utils.getMediaTypeFromMimeType)(mimeType);
+  if (!mediaUrl) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "media-editor-preview media-editor-preview--empty", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: (0, import_i18n.__)("No media file available.") }) });
+  }
+  if (loadingState === "error") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "media-editor-preview media-editor-preview--error", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: (0, import_i18n.__)("Failed to load media file.") }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "media-editor-preview__url", children: mediaUrl })
+    ] });
+  }
+  const displayTitle = typeof title === "string" ? title : title?.rendered || title?.raw;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ...props,
+      className: `media-editor-preview media-editor-preview--${mediaType.type}`,
+      children: [
+        mediaType.type === "image" && loadingState === "loading" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "media-editor-preview__spinner", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          MediaPreviewContent,
+          {
+            mediaType,
+            mediaUrl,
+            altText,
+            displayTitle,
+            mimeType,
+            onLoad: () => setLoadingState("loaded"),
+            onError: () => setLoadingState("error"),
+            loadingState
+          }
+        )
+      ]
+    }
+  );
+}
+//# sourceMappingURL=index.cjs.map

package/build/components/media-preview/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/media-preview/index.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Spinner } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useMediaEditorContext } from '../media-editor-provider';\nimport { getMediaTypeFromMimeType } from '../../utils';\n\n/**\n * Props for MediaPreview component.\n */\nexport interface MediaPreviewProps {\n\t[ key: string ]: any; // TODO: Define specific props as needed, this will likely be for click handlers, accessibility attributes, etc.\n}\n\n/**\n * Props for MediaPreviewContent component.\n */\ninterface MediaPreviewContentProps {\n\tmediaType: { type: string };\n\tmediaUrl: string;\n\taltText?: string;\n\tdisplayTitle?: string;\n\tmimeType?: string;\n\tonLoad: () => void;\n\tonError: () => void;\n\tloadingState: 'loading' | 'loaded' | 'error';\n}\n\nfunction MediaPreviewContent( {\n\tmediaType,\n\tmediaUrl,\n\taltText,\n\tdisplayTitle,\n\tmimeType,\n\tonLoad,\n\tonError,\n\tloadingState,\n}: MediaPreviewContentProps ) {\n\tswitch ( mediaType.type ) {\n\t\tcase 'image':\n\t\t\treturn (\n\t\t\t\t<img\n\t\t\t\t\tclassName={ loadingState === 'loaded' ? 'loaded' : '' }\n\t\t\t\t\tsrc={ mediaUrl }\n\t\t\t\t\talt={ altText || '' }\n\t\t\t\t\tonLoad={ onLoad }\n\t\t\t\t\tonError={ onError }\n\t\t\t\t/>\n\t\t\t);\n\t\tcase 'video':\n\t\t\treturn (\n\t\t\t\t<video src={ mediaUrl } controls onError={ onError }>\n\t\t\t\t\t{ displayTitle }\n\t\t\t\t</video>\n\t\t\t);\n\t\tcase 'audio':\n\t\t\treturn (\n\t\t\t\t<audio src={ mediaUrl } controls onError={ onError }>\n\t\t\t\t\t{ displayTitle }\n\t\t\t\t</audio>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<div className=\"media-editor-preview__file-info\">\n\t\t\t\t\t<p className=\"media-editor-preview__file-name\">\n\t\t\t\t\t\t{ displayTitle }\n\t\t\t\t\t</p>\n\t\t\t\t\t<p className=\"media-editor-preview__mime-type\">\n\t\t\t\t\t\t{ mimeType }\n\t\t\t\t\t</p>\n\t\t\t\t\t<a\n\t\t\t\t\t\thref={ mediaUrl }\n\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\tclassName=\"media-editor-preview__download-link\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'View file' ) }\n\t\t\t\t\t</a>\n\t\t\t\t</div>\n\t\t\t);\n\t}\n}\n\n/**\n * MediaPreview component displays the media file in the editor canvas.\n * Supports images, videos, audio files, and generic file displays.\n *\n * @param props - Component props including click handlers and accessibility attributes.\n * @return The MediaPreview component.\n */\nexport default function MediaPreview( props: MediaPreviewProps ) {\n\tconst [ loadingState, setLoadingState ] = useState<\n\t\t'loading' | 'loaded' | 'error'\n\t>( 'loading' );\n\tconst { media } = useMediaEditorContext();\n\n\tconst {\n\t\tsource_url: mediaUrl,\n\t\tmime_type: mimeType,\n\t\talt_text: altText,\n\t\ttitle,\n\t} = media || {};\n\n\tconst mediaType = getMediaTypeFromMimeType( mimeType );\n\n\tif ( ! mediaUrl ) {\n\t\treturn (\n\t\t\t<div className=\"media-editor-preview media-editor-preview--empty\">\n\t\t\t\t<p>{ __( 'No media file available.' ) }</p>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tif ( loadingState === 'error' ) {\n\t\treturn (\n\t\t\t<div className=\"media-editor-preview media-editor-preview--error\">\n\t\t\t\t<p>{ __( 'Failed to load media file.' ) }</p>\n\t\t\t\t<p className=\"media-editor-preview__url\">{ mediaUrl }</p>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst displayTitle =\n\t\ttypeof title === 'string' ? title : title?.rendered || title?.raw;\n\n\treturn (\n\t\t<div\n\t\t\t{ ...props }\n\t\t\tclassName={ `media-editor-preview media-editor-preview--${ mediaType.type }` }\n\t\t>\n\t\t\t{ mediaType.type === 'image' && loadingState === 'loading' && (\n\t\t\t\t<div className=\"media-editor-preview__spinner\">\n\t\t\t\t\t<Spinner />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<MediaPreviewContent\n\t\t\t\tmediaType={ mediaType }\n\t\t\t\tmediaUrl={ mediaUrl }\n\t\t\t\taltText={ altText }\n\t\t\t\tdisplayTitle={ displayTitle }\n\t\t\t\tmimeType={ mimeType }\n\t\t\t\tonLoad={ () => setLoadingState( 'loaded' ) }\n\t\t\t\tonError={ () => setLoadingState( 'error' ) }\n\t\t\t\tloadingState={ loadingState }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAAwB;AACxB,qBAAyB;AACzB,kBAAmB;AAKnB,mCAAsC;AACtC,mBAAyC;AAoCrC;AAbJ,SAAS,oBAAqB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA8B;AAC7B,UAAS,UAAU,MAAO;AAAA,IACzB,KAAK;AACJ,aACC;AAAA,QAAC;AAAA;AAAA,UACA,WAAY,iBAAiB,WAAW,WAAW;AAAA,UACnD,KAAM;AAAA,UACN,KAAM,WAAW;AAAA,UACjB;AAAA,UACA;AAAA;AAAA,MACD;AAAA,IAEF,KAAK;AACJ,aACC,4CAAC,WAAM,KAAM,UAAW,UAAQ,MAAC,SAC9B,wBACH;AAAA,IAEF,KAAK;AACJ,aACC,4CAAC,WAAM,KAAM,UAAW,UAAQ,MAAC,SAC9B,wBACH;AAAA,IAEF;AACC,aACC,6CAAC,SAAI,WAAU,mCACd;AAAA,oDAAC,OAAE,WAAU,mCACV,wBACH;AAAA,QACA,4CAAC,OAAE,WAAU,mCACV,oBACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,MAAO;AAAA,YACP,QAAO;AAAA,YACP,KAAI;AAAA,YACJ,WAAU;AAAA,YAER,8BAAI,WAAY;AAAA;AAAA,QACnB;AAAA,SACD;AAAA,EAEH;AACD;AASe,SAAR,aAA+B,OAA2B;AAChE,QAAM,CAAE,cAAc,eAAgB,QAAI,yBAEvC,SAAU;AACb,QAAM,EAAE,MAAM,QAAI,oDAAsB;AAExC,QAAM;AAAA,IACL,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,EACD,IAAI,SAAS,CAAC;AAEd,QAAM,gBAAY,uCAA0B,QAAS;AAErD,MAAK,CAAE,UAAW;AACjB,WACC,4CAAC,SAAI,WAAU,oDACd,sDAAC,OAAI,8BAAI,0BAA2B,GAAG,GACxC;AAAA,EAEF;AAEA,MAAK,iBAAiB,SAAU;AAC/B,WACC,6CAAC,SAAI,WAAU,oDACd;AAAA,kDAAC,OAAI,8BAAI,4BAA6B,GAAG;AAAA,MACzC,4CAAC,OAAE,WAAU,6BAA8B,oBAAU;AAAA,OACtD;AAAA,EAEF;AAEA,QAAM,eACL,OAAO,UAAU,WAAW,QAAQ,OAAO,YAAY,OAAO;AAE/D,SACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACL,WAAY,8CAA+C,UAAU,IAAK;AAAA,MAExE;AAAA,kBAAU,SAAS,WAAW,iBAAiB,aAChD,4CAAC,SAAI,WAAU,iCACd,sDAAC,6BAAQ,GACV;AAAA,QAED;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,QAAS,MAAM,gBAAiB,QAAS;AAAA,YACzC,SAAU,MAAM,gBAAiB,OAAQ;AAAA,YACzC;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EACD;AAEF;",
+  "names": []
+}

package/build/index.cjs

@@ -0,0 +1,47 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/media-editor/src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  MediaEditorProvider: () => import_media_editor_provider.MediaEditorProvider,
+  MediaForm: () => import_media_form.default,
+  MediaPreview: () => import_media_preview.default
+});
+module.exports = __toCommonJS(index_exports);
+var import_media_editor_provider = require("./components/media-editor-provider/index.cjs");
+var import_media_preview = __toESM(require("./components/media-preview/index.cjs"));
+var import_media_form = __toESM(require("./components/media-form/index.cjs"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MediaEditorProvider,
+  MediaForm,
+  MediaPreview
+});
+//# sourceMappingURL=index.cjs.map

package/build/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["// Components\nexport { MediaEditorProvider } from './components/media-editor-provider';\nexport { default as MediaPreview } from './components/media-preview';\nexport { default as MediaForm } from './components/media-form';\n\n// Types\nexport type {\n\tMedia,\n\tMediaEditorProviderProps,\n} from './components/media-editor-provider';\nexport type { MediaPreviewProps } from './components/media-preview';\nexport type { MediaFormProps } from './components/media-form';\n\n// Re-export commonly used dataviews types for convenience\nexport type { Field, Form } from '@wordpress/dataviews';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mCAAoC;AACpC,2BAAwC;AACxC,wBAAqC;",
+  "names": []
+}

package/build/utils/get-media-type.cjs

@@ -0,0 +1,45 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/media-editor/src/utils/get-media-type.ts
+var get_media_type_exports = {};
+__export(get_media_type_exports, {
+  getMediaTypeFromMimeType: () => getMediaTypeFromMimeType
+});
+module.exports = __toCommonJS(get_media_type_exports);
+function getMediaTypeFromMimeType(mimeType) {
+  if (!mimeType) {
+    return { type: "application" };
+  }
+  if (mimeType.startsWith("image/")) {
+    return { type: "image" };
+  }
+  if (mimeType.startsWith("video/")) {
+    return { type: "video" };
+  }
+  if (mimeType.startsWith("audio/")) {
+    return { type: "audio" };
+  }
+  return { type: "application" };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getMediaTypeFromMimeType
+});
+//# sourceMappingURL=get-media-type.cjs.map

package/build/utils/get-media-type.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils/get-media-type.ts"],
+  "sourcesContent": ["/**\n * Media type result.\n */\nexport interface MediaType {\n\ttype: 'image' | 'video' | 'audio' | 'application';\n}\n\n/**\n * Determines the media type from a MIME type string.\n *\n * @param mimeType - The MIME type to check.\n * @return Object with type property ('image', 'video', 'audio', or 'application').\n */\nexport function getMediaTypeFromMimeType( mimeType?: string ): MediaType {\n\tif ( ! mimeType ) {\n\t\treturn { type: 'application' };\n\t}\n\n\tif ( mimeType.startsWith( 'image/' ) ) {\n\t\treturn { type: 'image' };\n\t}\n\tif ( mimeType.startsWith( 'video/' ) ) {\n\t\treturn { type: 'video' };\n\t}\n\tif ( mimeType.startsWith( 'audio/' ) ) {\n\t\treturn { type: 'audio' };\n\t}\n\treturn { type: 'application' };\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAaO,SAAS,yBAA0B,UAA+B;AACxE,MAAK,CAAE,UAAW;AACjB,WAAO,EAAE,MAAM,cAAc;AAAA,EAC9B;AAEA,MAAK,SAAS,WAAY,QAAS,GAAI;AACtC,WAAO,EAAE,MAAM,QAAQ;AAAA,EACxB;AACA,MAAK,SAAS,WAAY,QAAS,GAAI;AACtC,WAAO,EAAE,MAAM,QAAQ;AAAA,EACxB;AACA,MAAK,SAAS,WAAY,QAAS,GAAI;AACtC,WAAO,EAAE,MAAM,QAAQ;AAAA,EACxB;AACA,SAAO,EAAE,MAAM,cAAc;AAC9B;",
+  "names": []
+}

package/build/utils/index.cjs

@@ -0,0 +1,31 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/media-editor/src/utils/index.ts
+var utils_exports = {};
+__export(utils_exports, {
+  getMediaTypeFromMimeType: () => import_get_media_type.getMediaTypeFromMimeType
+});
+module.exports = __toCommonJS(utils_exports);
+var import_get_media_type = require("./get-media-type.cjs");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getMediaTypeFromMimeType
+});
+//# sourceMappingURL=index.cjs.map

package/build/utils/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils/index.ts"],
+  "sourcesContent": ["export { getMediaTypeFromMimeType } from './get-media-type';\nexport type { MediaType } from './get-media-type';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAAyC;",
+  "names": []
+}

package/build-module/components/media-editor-provider/index.mjs

@@ -0,0 +1,33 @@
+// packages/media-editor/src/components/media-editor-provider/index.tsx
+import { createContext, useContext } from "@wordpress/element";
+import { jsx } from "react/jsx-runtime";
+var MediaEditorContext = createContext(
+  void 0
+);
+function MediaEditorProvider({
+  value,
+  onChange,
+  settings = {},
+  children
+}) {
+  const contextValue = {
+    media: value,
+    onChange,
+    fields: settings.fields || []
+  };
+  return /* @__PURE__ */ jsx(MediaEditorContext.Provider, { value: contextValue, children });
+}
+function useMediaEditorContext() {
+  const context = useContext(MediaEditorContext);
+  if (!context) {
+    throw new Error(
+      "useMediaEditorContext must be used within MediaEditorProvider"
+    );
+  }
+  return context;
+}
+export {
+  MediaEditorProvider,
+  useMediaEditorContext
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/components/media-editor-provider/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/media-editor-provider/index.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\nimport type { Field } from '@wordpress/dataviews';\nimport type { ReactNode } from 'react';\n\n/**\n * Media object from WordPress REST API.\n */\nexport interface Media {\n\tid?: number;\n\tsource_url?: string;\n\tmime_type?: string;\n\talt_text?: string;\n\ttitle?: string | { rendered?: string; raw?: string };\n\tcaption?: string | { rendered?: string; raw?: string };\n\tdescription?: string | { rendered?: string; raw?: string };\n\t[ key: string ]: any;\n}\n\n/**\n * Context value for MediaEditor.\n */\nexport interface MediaEditorContextValue {\n\tmedia?: Media;\n\tonChange?: ( updates: Partial< Media > ) => void;\n\tfields: Field< Media >[];\n}\n\n/**\n * Props for MediaEditorProvider.\n */\nexport interface MediaEditorProviderProps {\n\t/** The media object to edit. */\n\tvalue?: Media;\n\t/**\n\t * Callback when media is updated.\n\t *\n\t * Optional - if not provided, the MediaEditor can be used in a read-only mode,\n\t * useful for preview-only scenarios.\n\t */\n\tonChange?: ( updates: Partial< Media > ) => void;\n\t/** Configuration settings for the media editor. */\n\tsettings?: {\n\t\tfields?: Field< Media >[];\n\t};\n\t/** Child components. */\n\tchildren: ReactNode;\n}\n\nconst MediaEditorContext = createContext< MediaEditorContextValue | undefined >(\n\tundefined\n);\n\nexport function MediaEditorProvider( {\n\tvalue,\n\tonChange,\n\tsettings = {},\n\tchildren,\n}: MediaEditorProviderProps ) {\n\tconst contextValue: MediaEditorContextValue = {\n\t\tmedia: value,\n\t\tonChange,\n\t\tfields: settings.fields || [],\n\t};\n\n\treturn (\n\t\t<MediaEditorContext.Provider value={ contextValue }>\n\t\t\t{ children }\n\t\t</MediaEditorContext.Provider>\n\t);\n}\n\n/**\n * Hook to access the MediaEditor context.\n *\n * Must be used within a MediaEditorProvider component.\n *\n * @return MediaEditorContextValue value with media, onChange, and fields, etc.\n */\nexport function useMediaEditorContext(): MediaEditorContextValue {\n\tconst context = useContext( MediaEditorContext );\n\tif ( ! context ) {\n\t\tthrow new Error(\n\t\t\t'useMediaEditorContext must be used within MediaEditorProvider'\n\t\t);\n\t}\n\treturn context;\n}\n"],
+  "mappings": ";AAGA,SAAS,eAAe,kBAAkB;AAiExC;AAjBF,IAAM,qBAAqB;AAAA,EAC1B;AACD;AAEO,SAAS,oBAAqB;AAAA,EACpC;AAAA,EACA;AAAA,EACA,WAAW,CAAC;AAAA,EACZ;AACD,GAA8B;AAC7B,QAAM,eAAwC;AAAA,IAC7C,OAAO;AAAA,IACP;AAAA,IACA,QAAQ,SAAS,UAAU,CAAC;AAAA,EAC7B;AAEA,SACC,oBAAC,mBAAmB,UAAnB,EAA4B,OAAQ,cAClC,UACH;AAEF;AASO,SAAS,wBAAiD;AAChE,QAAM,UAAU,WAAY,kBAAmB;AAC/C,MAAK,CAAE,SAAU;AAChB,UAAM,IAAI;AAAA,MACT;AAAA,IACD;AAAA,EACD;AACA,SAAO;AACR;",
+  "names": []
+}