@udecode/plate-media - npm Package Compare versions

Comparing version 38.0.0 to 38.0.1

dist/index.d.ts

@@ -1,5 +0,5 @@
-import * as _udecode_plate_common from '@udecode/plate-common';
+import * as _udecode_plate_core from '@udecode/plate-core';
+import { T as TMediaElement, M as MediaPluginOptions, E as EmbedUrlData, a as MediaPlaceholder } from './types-B23KLIqT.js';
+export { b as EmbedUrlParser, P as PlaceholderRule, c as TPlaceholderElement, p as parseMediaUrl } from './types-B23KLIqT.js';
 import { TEditor, InsertNodesOptions, SlateEditor, PluginConfig, ExtendEditor, SetNodesOptions } from '@udecode/plate-common';
-import { T as TMediaElement, M as MediaPluginOptions, E as EmbedUrlData, a as MediaPlaceholder } from './types-DRDCqP12.js';
-export { b as EmbedUrlParser, P as PlaceholderRule, c as TPlaceholderElement, p as parseMediaUrl } from './types-DRDCqP12.js';
 
@@ -18,11 +18,11 @@ interface InsertMediaOptions<E extends TEditor = TEditor> extends InsertNodesOptions<E> {
 }
-declare const AudioPlugin: _udecode_plate_common.SlatePlugin<_udecode_plate_common.PluginConfig<"audio", {}, {}, {}>>;
+declare const BaseAudioPlugin: _udecode_plate_core.SlatePlugin<_udecode_plate_core.PluginConfig<"audio", {}, {}, {}>>;
 
 interface TFileElement extends TMediaElement {
 }
-declare const FilePlugin: _udecode_plate_common.SlatePlugin<_udecode_plate_common.PluginConfig<"file", {}, {}, {}>>;
+declare const BaseFilePlugin: _udecode_plate_core.SlatePlugin<_udecode_plate_core.PluginConfig<"file", {}, {}, {}>>;
 
 interface TVideoElement extends TMediaElement {
 }
-declare const VideoPlugin: _udecode_plate_common.SlatePlugin<_udecode_plate_common.PluginConfig<"video", {}, {}, {}>>;
+declare const BaseVideoPlugin: _udecode_plate_core.SlatePlugin<_udecode_plate_core.PluginConfig<"video", {}, {}, {}>>;
 
@@ -32,6 +32,2 @@ interface TImageElement extends TMediaElement {
 type ImageConfig = PluginConfig<'img', {
-    /** Disable url embed on insert data. */
-    disableEmbedInsert?: boolean;
-    /** Disable file upload on insert data. */
-    disableUploadInsert?: boolean;
     /**
@@ -43,9 +39,9 @@ * An optional method that will upload the image to a server. The method
     uploadImage?: (dataUrl: ArrayBuffer | string) => ArrayBuffer | Promise<ArrayBuffer | string> | string;
+    /** Disable url embed on insert data. */
+    disableEmbedInsert?: boolean;
+    /** Disable file upload on insert data. */
+    disableUploadInsert?: boolean;
 } & MediaPluginOptions>;
 /** Enables support for images. */
-declare const ImagePlugin: _udecode_plate_common.SlatePlugin<PluginConfig<"img", {
-    /** Disable url embed on insert data. */
-    disableEmbedInsert?: boolean | undefined;
-    /** Disable file upload on insert data. */
-    disableUploadInsert?: boolean | undefined;
+declare const BaseImagePlugin: _udecode_plate_core.SlatePlugin<PluginConfig<"img", {
     /**
@@ -56,3 +52,7 @@ * An optional method that will upload the image to a server. The method
      */
-    uploadImage?: ((dataUrl: ArrayBuffer | string) => ArrayBuffer | Promise<ArrayBuffer | string> | string) | undefined;
+    uploadImage?: (dataUrl: ArrayBuffer | string) => ArrayBuffer | Promise<ArrayBuffer | string> | string;
+    /** Disable url embed on insert data. */
+    disableEmbedInsert?: boolean;
+    /** Disable file upload on insert data. */
+    disableUploadInsert?: boolean;
 } & MediaPluginOptions, {}, {}>>;
@@ -86,3 +86,3 @@
  */
-declare const MediaEmbedPlugin: _udecode_plate_common.SlatePlugin<PluginConfig<"media_embed", MediaPluginOptions, {}, {}>>;
+declare const BaseMediaEmbedPlugin: _udecode_plate_core.SlatePlugin<PluginConfig<"media_embed", MediaPluginOptions, {}, {}>>;
 
@@ -99,3 +99,3 @@ declare const parseIframeUrl: (url: string) => string;
 type PlaceholderConfig = PluginConfig<'placeholder', MediaPlaceholder>;
-declare const PlaceholderPlugin: _udecode_plate_common.SlatePlugin<PlaceholderConfig>;
+declare const BasePlaceholderPlugin: _udecode_plate_core.SlatePlugin<PlaceholderConfig>;
 
@@ -109,6 +109,6 @@ declare const insertPlaceholder: <E extends SlateEditor>(editor: E, mediaType: string, options?: InsertNodesOptions<E>) => void;
 type props = {
+    type: string;
+    url: string;
     isUpload?: boolean;
     name?: string;
-    type: string;
-    url: string;
     width?: number;
@@ -118,2 +118,2 @@ };
 
-export { AudioPlugin, EmbedUrlData, FilePlugin, type ImageConfig, ImagePlugin, type InsertMediaOptions, type MediaEmbedConfig, MediaEmbedPlugin, MediaPlaceholder, MediaPluginOptions, type PlaceholderConfig, PlaceholderPlugin, type TAudioElement, type TFileElement, type TImageElement, TMediaElement, type TMediaEmbedElement, type TVideoElement, VIDEO_PROVIDERS, VideoPlugin, insertAudioPlaceholder, insertFilePlaceholder, insertImage, insertImagePlaceholder, insertMedia, insertMediaEmbed, insertPlaceholder, insertVideoPlaceholder, isImageUrl, parseIframeUrl, parseTwitterUrl, parseVideoUrl, setMediaNode, withImage, withImageEmbed, withImageUpload };
+export { BaseAudioPlugin, BaseFilePlugin, BaseImagePlugin, BaseMediaEmbedPlugin, BasePlaceholderPlugin, BaseVideoPlugin, EmbedUrlData, type ImageConfig, type InsertMediaOptions, type MediaEmbedConfig, MediaPlaceholder, MediaPluginOptions, type PlaceholderConfig, type TAudioElement, type TFileElement, type TImageElement, TMediaElement, type TMediaEmbedElement, type TVideoElement, VIDEO_PROVIDERS, insertAudioPlaceholder, insertFilePlaceholder, insertImage, insertImagePlaceholder, insertMedia, insertMediaEmbed, insertPlaceholder, insertVideoPlaceholder, isImageUrl, parseIframeUrl, parseTwitterUrl, parseVideoUrl, setMediaNode, withImage, withImageEmbed, withImageUpload };

dist/index.js

@@ -59,9 +59,9 @@ "use strict";
 __export(src_exports, {
-  AudioPlugin: () => AudioPlugin,
-  FilePlugin: () => FilePlugin,
-  ImagePlugin: () => ImagePlugin,
-  MediaEmbedPlugin: () => MediaEmbedPlugin,
-  PlaceholderPlugin: () => PlaceholderPlugin,
+  BaseAudioPlugin: () => BaseAudioPlugin,
+  BaseFilePlugin: () => BaseFilePlugin,
+  BaseImagePlugin: () => BaseImagePlugin,
+  BaseMediaEmbedPlugin: () => BaseMediaEmbedPlugin,
+  BasePlaceholderPlugin: () => BasePlaceholderPlugin,
+  BaseVideoPlugin: () => BaseVideoPlugin,
   VIDEO_PROVIDERS: () => VIDEO_PROVIDERS,
-  VideoPlugin: () => VideoPlugin,
   insertAudioPlaceholder: () => insertAudioPlaceholder,
@@ -87,5 +87,5 @@ insertFilePlaceholder: () => insertFilePlaceholder,
 
-// src/lib/AudioPlugin.ts
+// src/lib/BaseAudioPlugin.ts
 var import_plate_common = require("@udecode/plate-common");
-var AudioPlugin = (0, import_plate_common.createSlatePlugin)({
+var BaseAudioPlugin = (0, import_plate_common.createSlatePlugin)({
   key: "audio",
@@ -95,5 +95,5 @@ node: { isElement: true, isVoid: true }
 
-// src/lib/FilePlugin.ts
+// src/lib/BaseFilePlugin.ts
 var import_plate_common2 = require("@udecode/plate-common");
-var FilePlugin = (0, import_plate_common2.createSlatePlugin)({
+var BaseFilePlugin = (0, import_plate_common2.createSlatePlugin)({
   key: "file",
@@ -103,5 +103,5 @@ node: { isElement: true, isVoid: true }
 
-// src/lib/VideoPlugin.ts
+// src/lib/BaseVideoPlugin.ts
 var import_plate_common3 = require("@udecode/plate-common");
-var VideoPlugin = (0, import_plate_common3.createSlatePlugin)({
+var BaseVideoPlugin = (0, import_plate_common3.createSlatePlugin)({
   key: "video",
@@ -111,3 +111,3 @@ node: { isElement: true, isVoid: true }
 
-// src/lib/image/ImagePlugin.ts
+// src/lib/image/BaseImagePlugin.ts
 var import_plate_common7 = require("@udecode/plate-common");
@@ -121,3 +121,3 @@
     children: [text],
-    type: editor.getType(ImagePlugin),
+    type: editor.getType(BaseImagePlugin),
     url
@@ -133,10 +133,24 @@ };
 var imageExtensions = /* @__PURE__ */ new Set([
+  "3dv",
+  "PI1",
+  "PI2",
+  "PI3",
+  "ai",
+  "amf",
+  "art",
+  "art",
   "ase",
-  "art",
+  "awg",
+  "blp",
   "bmp",
-  "blp",
+  "bw",
+  "bw",
   "cd5",
+  "cdr",
+  "cgm",
   "cit",
+  "cmx",
   "cpt",
   "cr2",
+  "cur",
   "cut",
@@ -146,17 +160,33 @@ "dds",
   "djvu",
+  "dxf",
+  "e2d",
+  "ecw",
   "egt",
+  "egt",
+  "emf",
+  "eps",
   "exif",
+  "fs",
+  "gbr",
   "gif",
   "gpl",
   "grf",
+  "hdp",
   "icns",
   "ico",
   "iff",
+  "iff",
+  "int",
+  "int",
+  "inta",
+  "jfif",
   "jng",
+  "jp2",
   "jpeg",
   "jpg",
-  "jfif",
-  "jp2",
   "jps",
+  "jxr",
   "lbm",
+  "lbm",
+  "liff",
   "max",
@@ -167,3 +197,6 @@ "miff",
   "nitf",
+  "nrrd",
+  "odg",
   "ota",
+  "pam",
   "pbm",
@@ -174,10 +207,11 @@ "pc1",
   "pcf",
+  "pct",
   "pcx",
+  "pcx",
+  "pdd",
   "pdn",
+  "pgf",
   "pgm",
-  "PI1",
-  "PI2",
-  "PI3",
   "pict",
-  "pct",
+  "png",
   "pnm",
@@ -188,3 +222,2 @@ "pns",
   "psd",
-  "pdd",
   "psp",
@@ -195,69 +228,35 @@ "px",
   "qfx",
+  "ras",
   "raw",
+  "rgb",
+  "rgb",
+  "rgba",
   "rle",
   "sct",
   "sgi",
-  "rgb",
-  "int",
-  "bw",
+  "sgi",
+  "sid",
+  "stl",
+  "sun",
+  "svg",
+  "sxd",
   "tga",
+  "tga",
+  "tif",
   "tiff",
-  "tif",
-  "vtf",
-  "xbm",
-  "xcf",
-  "xpm",
-  "3dv",
-  "amf",
-  "ai",
-  "awg",
-  "cgm",
-  "cdr",
-  "cmx",
-  "dxf",
-  "e2d",
-  "egt",
-  "eps",
-  "fs",
-  "gbr",
-  "odg",
-  "svg",
-  "stl",
-  "vrml",
-  "x3d",
-  "sxd",
   "v2d",
   "vnd",
+  "vrml",
+  "vtf",
+  "wdp",
+  "webp",
   "wmf",
-  "emf",
-  "art",
+  "x3d",
   "xar",
-  "png",
-  "webp",
-  "jxr",
-  "hdp",
-  "wdp",
-  "cur",
-  "ecw",
-  "iff",
-  "lbm",
-  "liff",
-  "nrrd",
-  "pam",
-  "pcx",
-  "pgf",
-  "sgi",
-  "rgb",
-  "rgba",
-  "bw",
-  "int",
-  "inta",
-  "sid",
-  "ras",
-  "sun",
-  "tga"
+  "xbm",
+  "xcf",
+  "xpm"
 ]);
 var isImageUrl = (url) => {
-  if (!(0, import_plate_common5.isUrl)(url))
-    return false;
+  if (!(0, import_plate_common5.isUrl)(url)) return false;
   const ext = new URL(url).pathname.split(".").pop();
@@ -339,6 +338,6 @@ return imageExtensions.has(ext);
 
-// src/lib/image/ImagePlugin.ts
-var ImagePlugin = (0, import_plate_common7.createTSlatePlugin)({
+// src/lib/image/BaseImagePlugin.ts
+var BaseImagePlugin = (0, import_plate_common7.createTSlatePlugin)({
+  key: "img",
   extendEditor: withImage,
-  key: "img",
   node: { isElement: true, isVoid: true }
@@ -367,3 +366,3 @@ }).extend(({ plugin }) => ({
     getUrl,
-    type = editor.getType(ImagePlugin)
+    type = editor.getType(BaseImagePlugin)
   } = _b, options = __objRest(_b, [
@@ -374,7 +373,6 @@ "getUrl",
   const url = getUrl ? await getUrl() : window.prompt(
-    `Enter the URL of the ${type === ImagePlugin.key ? ImagePlugin.key : MediaEmbedPlugin.key}`
+    `Enter the URL of the ${type === BaseImagePlugin.key ? BaseImagePlugin.key : BaseMediaEmbedPlugin.key}`
   );
-  if (!url)
-    return;
-  if (type === editor.getType(ImagePlugin)) {
+  if (!url) return;
+  if (type === editor.getType(BaseImagePlugin)) {
     insertImage(editor, url, options);
@@ -387,3 +385,3 @@ } else {
 // src/lib/media/parseMediaUrl.ts
-var allowedProtocols = /* @__PURE__ */ new Set(["https:", "http:"]);
+var allowedProtocols = /* @__PURE__ */ new Set(["http:", "https:"]);
 var parseMediaUrl = (url, {
@@ -414,3 +412,3 @@ urlParsers
 
-// src/lib/media-embed/MediaEmbedPlugin.ts
+// src/lib/media-embed/BaseMediaEmbedPlugin.ts
 var import_plate_common8 = require("@udecode/plate-common");
@@ -424,3 +422,3 @@
     const regexGroupQuotes = /"([^"]*)"/;
-    const src = (_a = url.match(regexMatchSrc)) == null ? void 0 : _a[0];
+    const src = (_a = regexMatchSrc.exec(url)) == null ? void 0 : _a[0];
     const returnString = (_b = src == null ? void 0 : src.match(regexGroupQuotes)) == null ? void 0 : _b[1];
@@ -434,4 +432,4 @@ if (returnString) {
 
-// src/lib/media-embed/MediaEmbedPlugin.ts
-var MediaEmbedPlugin = (0, import_plate_common8.createTSlatePlugin)({
+// src/lib/media-embed/BaseMediaEmbedPlugin.ts
+var BaseMediaEmbedPlugin = (0, import_plate_common8.createTSlatePlugin)({
   key: "media_embed",
@@ -468,7 +466,7 @@ node: { isElement: true, isVoid: true },
   // eslint-disable-next-line regexp/no-unused-capturing-group
-  new RegExp("^https?:\\/\\/(?:twitter|x)\\.com\\/(?:#!\\/)?(\\w+)\\/status(es)?\\/(?<id>\\d+)")
+  /^https?:\/\/(?:twitter|x)\.com\/(?:#!\/)?(\w+)\/status(es)?\/(\d+)/
 );
 var parseTwitterUrl = (url) => {
   var _a, _b;
-  if (url.match(twitterRegex)) {
+  if (twitterRegex.exec(url)) {
     return {
@@ -498,4 +496,3 @@ id: (_b = (_a = twitterRegex.exec(url)) == null ? void 0 : _a.groups) == null ? void 0 : _b.id,
 var parseVideoUrl = (url) => {
-  if (!(0, import_plate_common9.isUrl)(url))
-    return;
+  if (!(0, import_plate_common9.isUrl)(url)) return;
   const videoData = import_js_video_url_parser.default.parse(url);
@@ -522,7 +519,5 @@ if ((videoData == null ? void 0 : videoData.provider) && videoData.id) {
 var insertMediaEmbed = (editor, { url = "" }, options = {}) => {
-  if (!editor.selection)
-    return;
+  if (!editor.selection) return;
   const selectionParentEntry = (0, import_plate_common10.getParentNode)(editor, editor.selection);
-  if (!selectionParentEntry)
-    return;
+  if (!selectionParentEntry) return;
   const [, path] = selectionParentEntry;
@@ -533,3 +528,3 @@ (0, import_plate_common10.insertNodes)(
       children: [{ text: "" }],
-      type: editor.getType(MediaEmbedPlugin),
+      type: editor.getType(BaseMediaEmbedPlugin),
       url
@@ -544,5 +539,5 @@ },
 
-// src/lib/placeholder/PlaceholderPlugin.ts
+// src/lib/placeholder/BasePlaceholderPlugin.ts
 var import_plate_common11 = require("@udecode/plate-common");
-var PlaceholderPlugin = (0, import_plate_common11.createTSlatePlugin)({
+var BasePlaceholderPlugin = (0, import_plate_common11.createTSlatePlugin)({
   key: "placeholder",
@@ -562,3 +557,3 @@ node: { isElement: true, isVoid: true }
         mediaType,
-        type: editor.getType(PlaceholderPlugin)
+        type: editor.getType(BasePlaceholderPlugin)
       },
@@ -569,6 +564,6 @@ options
 };
-var insertImagePlaceholder = (editor, options) => insertPlaceholder(editor, ImagePlugin.key, options);
-var insertVideoPlaceholder = (editor, options) => insertPlaceholder(editor, VideoPlugin.key, options);
-var insertAudioPlaceholder = (editor, options) => insertPlaceholder(editor, AudioPlugin.key, options);
-var insertFilePlaceholder = (editor, options) => insertPlaceholder(editor, FilePlugin.key, options);
+var insertImagePlaceholder = (editor, options) => insertPlaceholder(editor, BaseImagePlugin.key, options);
+var insertVideoPlaceholder = (editor, options) => insertPlaceholder(editor, BaseVideoPlugin.key, options);
+var insertAudioPlaceholder = (editor, options) => insertPlaceholder(editor, BaseAudioPlugin.key, options);
+var insertFilePlaceholder = (editor, options) => insertPlaceholder(editor, BaseFilePlugin.key, options);
 
@@ -580,9 +575,9 @@ // src/lib/placeholder/transforms/setMediaNode.ts
 0 && (module.exports = {
-  AudioPlugin,
-  FilePlugin,
-  ImagePlugin,
-  MediaEmbedPlugin,
-  PlaceholderPlugin,
+  BaseAudioPlugin,
+  BaseFilePlugin,
+  BaseImagePlugin,
+  BaseMediaEmbedPlugin,
+  BasePlaceholderPlugin,
+  BaseVideoPlugin,
   VIDEO_PROVIDERS,
-  VideoPlugin,
   insertAudioPlaceholder,
@@ -589,0 +584,0 @@ insertFilePlaceholder,

dist/react/index.d.ts

 import * as _udecode_plate_core_react from '@udecode/plate-core/react';
 import * as _udecode_plate_core from '@udecode/plate-core';
-import { M as MediaPluginOptions, T as TMediaElement, b as EmbedUrlParser, E as EmbedUrlData, a as MediaPlaceholder, c as TPlaceholderElement } from '../types-DRDCqP12.js';
+import { M as MediaPluginOptions, T as TMediaElement, b as EmbedUrlParser, E as EmbedUrlData, a as MediaPlaceholder, c as TPlaceholderElement } from '../types-B23KLIqT.js';
 import * as zustand_x from 'zustand-x';
-import * as _udecode_plate_common from '@udecode/plate-common';
 import { SlateEditor, WithRequiredKey } from '@udecode/plate-common';
@@ -13,5 +12,5 @@ import * as React$1 from 'react';
 declare const ImagePlugin: _udecode_plate_core_react.PlatePlugin<_udecode_plate_core.PluginConfig<"img", {
-    disableEmbedInsert?: boolean | undefined;
-    disableUploadInsert?: boolean | undefined;
-    uploadImage?: ((dataUrl: string | ArrayBuffer) => string | ArrayBuffer | Promise<string | ArrayBuffer>) | undefined;
+    uploadImage?: (dataUrl: ArrayBuffer | string) => ArrayBuffer | Promise<ArrayBuffer | string> | string;
+    disableEmbedInsert?: boolean;
+    disableUploadInsert?: boolean;
 } & MediaPluginOptions, {}, {}>>;
@@ -212,18 +211,18 @@ declare const MediaEmbedPlugin: _udecode_plate_core_react.PlatePlugin<_udecode_plate_core.PluginConfig<"media_embed", MediaPluginOptions, {}, {}>>;
         draggable: boolean;
+        src: string;
         onDoubleClickCapture: () => void;
-        src: string;
     };
 };
 declare const Image: React$1.ForwardRefExoticComponent<{
-    as?: React$1.ElementType<any, keyof React$1.JSX.IntrinsicElements> | undefined;
-    asChild?: boolean | undefined;
-    className?: string | undefined;
+    as?: React.ElementType;
+    asChild?: boolean;
+    className?: string;
     options?: any;
     setProps?: ((hookProps: {
         draggable: boolean;
+        src: string;
         onDoubleClickCapture: () => void;
-        src: string;
     }) => Omit<React$1.DetailedHTMLProps<React$1.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref">) | undefined;
     state?: undefined;
-    style?: React$1.CSSProperties | undefined;
+    style?: React.CSSProperties;
 } & Omit<React$1.DetailedHTMLProps<React$1.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & React$1.RefAttributes<any>>;
@@ -244,3 +243,2 @@
         draggable: boolean;
-        onClick: (e: React__default.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
         ref: React__default.RefObject<HTMLImageElement>;
@@ -252,12 +250,12 @@ src: string | undefined;
         };
+        onClick: (e: React__default.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     };
 };
 declare const PreviewImage: React__default.ForwardRefExoticComponent<{
-    as?: React__default.ElementType<any, keyof React__default.JSX.IntrinsicElements> | undefined;
-    asChild?: boolean | undefined;
-    className?: string | undefined;
+    as?: React__default.ElementType;
+    asChild?: boolean;
+    className?: string;
     options?: undefined;
     setProps?: ((hookProps: {
         draggable: boolean;
-        onClick: (e: React__default.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
         ref: React__default.RefObject<HTMLImageElement>;
@@ -269,2 +267,3 @@ src: string | undefined;
         };
+        onClick: (e: React__default.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     }) => Omit<React__default.DetailedHTMLProps<React__default.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref">) | undefined;
@@ -281,3 +280,3 @@ state?: {
     } | undefined;
-    style?: React__default.CSSProperties | undefined;
+    style?: React__default.CSSProperties;
 } & Omit<React__default.DetailedHTMLProps<React__default.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & React__default.RefAttributes<any>>;
@@ -295,5 +294,5 @@
     props: {
+        value: string;
         onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
         onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-        value: string;
     };
@@ -323,4 +322,4 @@ ref: React$1.MutableRefObject<HTMLInputElement | undefined>;
     openState: {
+        open: boolean;
         onOpenChange: (_value?: boolean) => void;
-        open: boolean;
     };
@@ -331,8 +330,8 @@ setAlignOpen: React__default.Dispatch<React__default.SetStateAction<boolean>>;
 declare const useMediaState: ({ urlParsers, }?: {
-    urlParsers?: EmbedUrlParser[] | undefined;
+    urlParsers?: EmbedUrlParser[];
 }) => {
+    id: string | undefined;
     align: "center" | "left" | "right" | undefined;
     embed: EmbedUrlData | undefined;
     focused: boolean;
-    id: string | undefined;
     isTweet: boolean;
@@ -349,3 +348,3 @@ isUpload: boolean | undefined;
 declare const useMediaToolbarButton: ({ nodeType, }?: {
-    nodeType?: string | undefined;
+    nodeType?: string;
 }) => {
@@ -360,5 +359,5 @@ props: {
     EditButton: React$1.ForwardRefExoticComponent<{
-        as?: React$1.ElementType<any, keyof React$1.JSX.IntrinsicElements> | undefined;
-        asChild?: boolean | undefined;
-        className?: string | undefined;
+        as?: React.ElementType;
+        asChild?: boolean;
+        className?: string;
         options?: any;
@@ -369,12 +368,10 @@ setProps?: ((hookProps: {
         state?: undefined;
-        style?: React$1.CSSProperties | undefined;
+        style?: React.CSSProperties;
     } & Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React$1.RefAttributes<any>>;
     UrlInput: React$1.ForwardRefExoticComponent<{
-        as?: React$1.ElementType<any, keyof React$1.JSX.IntrinsicElements> | undefined;
-        asChild?: boolean | undefined;
-        className?: string | undefined;
+        as?: React.ElementType;
+        asChild?: boolean;
+        className?: string;
         options?: {
-            plugin: {
-                key: string;
-            };
+            plugin: _udecode_plate_core.WithRequiredKey;
         } | undefined;
@@ -389,3 +386,3 @@ setProps?: ((hookProps: {
         } | undefined;
-        style?: React$1.CSSProperties | undefined;
+        style?: React.CSSProperties;
     } & Omit<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React$1.RefAttributes<any>>;
@@ -400,5 +397,5 @@ };
 declare const FloatingMediaEditButton: React__default.ForwardRefExoticComponent<{
-    as?: React__default.ElementType<any, keyof React__default.JSX.IntrinsicElements> | undefined;
-    asChild?: boolean | undefined;
-    className?: string | undefined;
+    as?: React__default.ElementType;
+    asChild?: boolean;
+    className?: string;
     options?: any;
@@ -409,3 +406,3 @@ setProps?: ((hookProps: {
     state?: undefined;
-    style?: React__default.CSSProperties | undefined;
+    style?: React__default.CSSProperties;
 } & Omit<React__default.DetailedHTMLProps<React__default.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React__default.RefAttributes<any>>;
@@ -468,5 +465,5 @@
 declare const FloatingMediaUrlInput: React__default.ForwardRefExoticComponent<{
-    as?: React__default.ElementType<any, keyof React__default.JSX.IntrinsicElements> | undefined;
-    asChild?: boolean | undefined;
-    className?: string | undefined;
+    as?: React__default.ElementType;
+    asChild?: boolean;
+    className?: string;
     options?: {
@@ -483,3 +480,3 @@ plugin: WithRequiredKey;
     } | undefined;
-    style?: React__default.CSSProperties | undefined;
+    style?: React__default.CSSProperties;
 } & Omit<React__default.DetailedHTMLProps<React__default.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React__default.RefAttributes<any>>;
@@ -492,3 +489,3 @@
 
-declare const PlaceholderPlugin: _udecode_plate_core_react.PlatePlugin<_udecode_plate_common.PluginConfig<"placeholder", MediaPlaceholder, {}, {}>>;
+declare const PlaceholderPlugin: _udecode_plate_core_react.PlatePlugin<_udecode_plate_core.PluginConfig<"placeholder", MediaPlaceholder, {}, {}>>;
 
@@ -525,6 +522,6 @@ type Progresses = Record<string, number>;
 declare const usePlaceholderPopoverState: () => {
+    id: unknown;
     editor: _udecode_plate_core_react.PlateEditor;
     element: TPlaceholderElement;
     focused: boolean;
-    id: unknown;
     mediaType: string;
@@ -531,0 +528,0 @@ readOnly: boolean;

dist/react/index.js

@@ -59,4 +59,4 @@ "use strict";
 __export(react_exports, {
-  AudioPlugin: () => AudioPlugin2,
-  FilePlugin: () => FilePlugin2,
+  AudioPlugin: () => AudioPlugin,
+  FilePlugin: () => FilePlugin,
   FloatingMedia: () => FloatingMedia,
@@ -67,10 +67,10 @@ FloatingMediaEditButton: () => FloatingMediaEditButton,
   Image: () => Image,
-  ImagePlugin: () => ImagePlugin2,
+  ImagePlugin: () => ImagePlugin,
   ImagePreviewStore: () => ImagePreviewStore,
-  MediaEmbedPlugin: () => MediaEmbedPlugin2,
+  MediaEmbedPlugin: () => MediaEmbedPlugin,
   MediaProvider: () => MediaProvider,
-  PlaceholderPlugin: () => PlaceholderPlugin2,
+  PlaceholderPlugin: () => PlaceholderPlugin,
   PlaceholderProvider: () => PlaceholderProvider,
   PreviewImage: () => PreviewImage,
-  VideoPlugin: () => VideoPlugin2,
+  VideoPlugin: () => VideoPlugin,
   floatingMediaActions: () => floatingMediaActions,
@@ -112,5 +112,5 @@ floatingMediaSelectors: () => floatingMediaSelectors,
 
-// src/lib/AudioPlugin.ts
+// src/lib/BaseAudioPlugin.ts
 var import_plate_common = require("@udecode/plate-common");
-var AudioPlugin = (0, import_plate_common.createSlatePlugin)({
+var BaseAudioPlugin = (0, import_plate_common.createSlatePlugin)({
   key: "audio",
@@ -120,5 +120,5 @@ node: { isElement: true, isVoid: true }
 
-// src/lib/FilePlugin.ts
+// src/lib/BaseFilePlugin.ts
 var import_plate_common2 = require("@udecode/plate-common");
-var FilePlugin = (0, import_plate_common2.createSlatePlugin)({
+var BaseFilePlugin = (0, import_plate_common2.createSlatePlugin)({
   key: "file",
@@ -128,5 +128,5 @@ node: { isElement: true, isVoid: true }
 
-// src/lib/VideoPlugin.ts
+// src/lib/BaseVideoPlugin.ts
 var import_plate_common3 = require("@udecode/plate-common");
-var VideoPlugin = (0, import_plate_common3.createSlatePlugin)({
+var BaseVideoPlugin = (0, import_plate_common3.createSlatePlugin)({
   key: "video",
@@ -136,3 +136,3 @@ node: { isElement: true, isVoid: true }
 
-// src/lib/image/ImagePlugin.ts
+// src/lib/image/BaseImagePlugin.ts
 var import_plate_common7 = require("@udecode/plate-common");
@@ -146,3 +146,3 @@
     children: [text],
-    type: editor.getType(ImagePlugin),
+    type: editor.getType(BaseImagePlugin),
     url
@@ -158,10 +158,24 @@ };
 var imageExtensions = /* @__PURE__ */ new Set([
+  "3dv",
+  "PI1",
+  "PI2",
+  "PI3",
+  "ai",
+  "amf",
+  "art",
+  "art",
   "ase",
-  "art",
+  "awg",
+  "blp",
   "bmp",
-  "blp",
+  "bw",
+  "bw",
   "cd5",
+  "cdr",
+  "cgm",
   "cit",
+  "cmx",
   "cpt",
   "cr2",
+  "cur",
   "cut",
@@ -171,17 +185,33 @@ "dds",
   "djvu",
+  "dxf",
+  "e2d",
+  "ecw",
   "egt",
+  "egt",
+  "emf",
+  "eps",
   "exif",
+  "fs",
+  "gbr",
   "gif",
   "gpl",
   "grf",
+  "hdp",
   "icns",
   "ico",
   "iff",
+  "iff",
+  "int",
+  "int",
+  "inta",
+  "jfif",
   "jng",
+  "jp2",
   "jpeg",
   "jpg",
-  "jfif",
-  "jp2",
   "jps",
+  "jxr",
   "lbm",
+  "lbm",
+  "liff",
   "max",
@@ -192,3 +222,6 @@ "miff",
   "nitf",
+  "nrrd",
+  "odg",
   "ota",
+  "pam",
   "pbm",
@@ -199,10 +232,11 @@ "pc1",
   "pcf",
+  "pct",
   "pcx",
+  "pcx",
+  "pdd",
   "pdn",
+  "pgf",
   "pgm",
-  "PI1",
-  "PI2",
-  "PI3",
   "pict",
-  "pct",
+  "png",
   "pnm",
@@ -213,3 +247,2 @@ "pns",
   "psd",
-  "pdd",
   "psp",
@@ -220,69 +253,35 @@ "px",
   "qfx",
+  "ras",
   "raw",
+  "rgb",
+  "rgb",
+  "rgba",
   "rle",
   "sct",
   "sgi",
-  "rgb",
-  "int",
-  "bw",
+  "sgi",
+  "sid",
+  "stl",
+  "sun",
+  "svg",
+  "sxd",
   "tga",
+  "tga",
+  "tif",
   "tiff",
-  "tif",
-  "vtf",
-  "xbm",
-  "xcf",
-  "xpm",
-  "3dv",
-  "amf",
-  "ai",
-  "awg",
-  "cgm",
-  "cdr",
-  "cmx",
-  "dxf",
-  "e2d",
-  "egt",
-  "eps",
-  "fs",
-  "gbr",
-  "odg",
-  "svg",
-  "stl",
-  "vrml",
-  "x3d",
-  "sxd",
   "v2d",
   "vnd",
+  "vrml",
+  "vtf",
+  "wdp",
+  "webp",
   "wmf",
-  "emf",
-  "art",
+  "x3d",
   "xar",
-  "png",
-  "webp",
-  "jxr",
-  "hdp",
-  "wdp",
-  "cur",
-  "ecw",
-  "iff",
-  "lbm",
-  "liff",
-  "nrrd",
-  "pam",
-  "pcx",
-  "pgf",
-  "sgi",
-  "rgb",
-  "rgba",
-  "bw",
-  "int",
-  "inta",
-  "sid",
-  "ras",
-  "sun",
-  "tga"
+  "xbm",
+  "xcf",
+  "xpm"
 ]);
 var isImageUrl = (url) => {
-  if (!(0, import_plate_common5.isUrl)(url))
-    return false;
+  if (!(0, import_plate_common5.isUrl)(url)) return false;
   const ext = new URL(url).pathname.split(".").pop();
@@ -364,6 +363,6 @@ return imageExtensions.has(ext);
 
-// src/lib/image/ImagePlugin.ts
-var ImagePlugin = (0, import_plate_common7.createTSlatePlugin)({
+// src/lib/image/BaseImagePlugin.ts
+var BaseImagePlugin = (0, import_plate_common7.createTSlatePlugin)({
+  key: "img",
   extendEditor: withImage,
-  key: "img",
   node: { isElement: true, isVoid: true }
@@ -392,3 +391,3 @@ }).extend(({ plugin }) => ({
     getUrl,
-    type = editor.getType(ImagePlugin)
+    type = editor.getType(BaseImagePlugin)
   } = _b, options = __objRest(_b, [
@@ -399,7 +398,6 @@ "getUrl",
   const url = getUrl ? await getUrl() : window.prompt(
-    `Enter the URL of the ${type === ImagePlugin.key ? ImagePlugin.key : MediaEmbedPlugin.key}`
+    `Enter the URL of the ${type === BaseImagePlugin.key ? BaseImagePlugin.key : BaseMediaEmbedPlugin.key}`
   );
-  if (!url)
-    return;
-  if (type === editor.getType(ImagePlugin)) {
+  if (!url) return;
+  if (type === editor.getType(BaseImagePlugin)) {
     insertImage(editor, url, options);
@@ -412,3 +410,3 @@ } else {
 // src/lib/media/parseMediaUrl.ts
-var allowedProtocols = /* @__PURE__ */ new Set(["https:", "http:"]);
+var allowedProtocols = /* @__PURE__ */ new Set(["http:", "https:"]);
 var parseMediaUrl = (url, {
@@ -439,3 +437,3 @@ urlParsers
 
-// src/lib/media-embed/MediaEmbedPlugin.ts
+// src/lib/media-embed/BaseMediaEmbedPlugin.ts
 var import_plate_common8 = require("@udecode/plate-common");
@@ -449,3 +447,3 @@
     const regexGroupQuotes = /"([^"]*)"/;
-    const src = (_a = url.match(regexMatchSrc)) == null ? void 0 : _a[0];
+    const src = (_a = regexMatchSrc.exec(url)) == null ? void 0 : _a[0];
     const returnString = (_b = src == null ? void 0 : src.match(regexGroupQuotes)) == null ? void 0 : _b[1];
@@ -459,4 +457,4 @@ if (returnString) {
 
-// src/lib/media-embed/MediaEmbedPlugin.ts
-var MediaEmbedPlugin = (0, import_plate_common8.createTSlatePlugin)({
+// src/lib/media-embed/BaseMediaEmbedPlugin.ts
+var BaseMediaEmbedPlugin = (0, import_plate_common8.createTSlatePlugin)({
   key: "media_embed",
@@ -504,7 +502,5 @@ node: { isElement: true, isVoid: true },
 var insertMediaEmbed = (editor, { url = "" }, options = {}) => {
-  if (!editor.selection)
-    return;
+  if (!editor.selection) return;
   const selectionParentEntry = (0, import_plate_common10.getParentNode)(editor, editor.selection);
-  if (!selectionParentEntry)
-    return;
+  if (!selectionParentEntry) return;
   const [, path] = selectionParentEntry;
@@ -515,3 +511,3 @@ (0, import_plate_common10.insertNodes)(
       children: [{ text: "" }],
-      type: editor.getType(MediaEmbedPlugin),
+      type: editor.getType(BaseMediaEmbedPlugin),
       url
@@ -526,5 +522,5 @@ },
 
-// src/lib/placeholder/PlaceholderPlugin.ts
+// src/lib/placeholder/BasePlaceholderPlugin.ts
 var import_plate_common11 = require("@udecode/plate-common");
-var PlaceholderPlugin = (0, import_plate_common11.createTSlatePlugin)({
+var BasePlaceholderPlugin = (0, import_plate_common11.createTSlatePlugin)({
   key: "placeholder",
@@ -535,7 +531,7 @@ node: { isElement: true, isVoid: true }
 // src/react/plugins.ts
-var ImagePlugin2 = (0, import_react.toPlatePlugin)(ImagePlugin);
-var MediaEmbedPlugin2 = (0, import_react.toPlatePlugin)(MediaEmbedPlugin);
-var AudioPlugin2 = (0, import_react.toPlatePlugin)(AudioPlugin);
-var FilePlugin2 = (0, import_react.toPlatePlugin)(FilePlugin);
-var VideoPlugin2 = (0, import_react.toPlatePlugin)(VideoPlugin);
+var ImagePlugin = (0, import_react.toPlatePlugin)(BaseImagePlugin);
+var MediaEmbedPlugin = (0, import_react.toPlatePlugin)(BaseMediaEmbedPlugin);
+var AudioPlugin = (0, import_react.toPlatePlugin)(BaseAudioPlugin);
+var FilePlugin = (0, import_react.toPlatePlugin)(BaseFilePlugin);
+var VideoPlugin = (0, import_react.toPlatePlugin)(BaseVideoPlugin);
 
@@ -573,3 +569,3 @@ // src/react/image/ImagePreviewStore.ts
     at: [],
-    match: (n) => n.type === ImagePlugin.key
+    match: (n) => n.type === BaseImagePlugin.key
   });
@@ -602,4 +598,3 @@ return Array.from(enties, (item) => ({
   const zoomIn = (0, import_react2.useCallback)(() => {
-    if (scale >= 2)
-      return;
+    if (scale >= 2) return;
     const targets = [0, 0.5, 1, 1.5, 2];
@@ -610,8 +605,6 @@ const nextScale = targets.find((target) => scale < target);
   const zoomOut = (0, import_react2.useCallback)(() => {
-    if (scale <= 0)
-      return;
+    if (scale <= 0) return;
     const targets = [0, 0.5, 1, 1.5, 2];
     const previousScale = [...targets].reverse().find((target) => scale > target);
-    if (previousScale === 1)
-      setTranslate({ x: 0, y: 0 });
+    if (previousScale === 1) setTranslate({ x: 0, y: 0 });
     previousScale && setScale(previousScale);
@@ -666,4 +659,3 @@ }, [scale]);
     const wheel = (e) => {
-      if (scale <= 1)
-        return;
+      if (scale <= 1) return;
       const { deltaX, deltaY } = e;
@@ -693,4 +685,3 @@ const { x, y } = translate;
     };
-    if (!isOpen)
-      return document.removeEventListener("wheel", wheel);
+    if (!isOpen) return document.removeEventListener("wheel", wheel);
     document.addEventListener("wheel", wheel);
@@ -703,4 +694,3 @@ return () => {
   const currentPreviewIndex = (0, import_react3.useMemo)(() => {
-    if (!currentPreview)
-      return null;
+    if (!currentPreview) return null;
     return previewList.findIndex(
@@ -733,4 +723,3 @@ (item) => item.url === currentPreview.url && item.id === currentPreview.id
     };
-    if (!isOpen)
-      return document.removeEventListener("keydown", keydown);
+    if (!isOpen) return document.removeEventListener("keydown", keydown);
     document.addEventListener("keydown", keydown);
@@ -753,4 +742,3 @@ return () => {
       onClick: () => {
-        if (typeof currentPreviewIndex !== "number")
-          return;
+        if (typeof currentPreviewIndex !== "number") return;
         setCurrentPreView(previewList[currentPreviewIndex + 1]);
@@ -763,4 +751,3 @@ }
       onClick: () => {
-        if (typeof currentPreviewIndex !== "number")
-          return;
+        if (typeof currentPreviewIndex !== "number") return;
         setCurrentPreView(previewList[currentPreviewIndex - 1]);
@@ -793,6 +780,6 @@ }
       draggable: true,
+      src: element.url,
       onDoubleClickCapture: () => {
         openImagePreview(editor, element);
-      },
-      src: element.url
+      }
     }
@@ -833,7 +820,5 @@ };
     var _a;
-    if (scale <= 1)
-      return;
+    if (scale <= 1) return;
     const boundingClientRect = (_a = imageRef.current) == null ? void 0 : _a.getBoundingClientRect();
-    if (!boundingClientRect)
-      return;
+    if (!boundingClientRect) return;
     setBoundingClientRect(boundingClientRect);
@@ -844,6 +829,2 @@ }, [translate.x, translate.y, scale]);
       draggable: false,
-      onClick: (e) => {
-        e.stopPropagation();
-        isZoomIn ? zoomIn() : zoomOut();
-      },
       ref: imageRef,
@@ -854,2 +835,6 @@ src: currentPreview == null ? void 0 : currentPreview.url,
         transform: `scale(${scale}) translate(${translate.x + "px"}, ${translate.y + "px"})`
+      },
+      onClick: (e) => {
+        e.stopPropagation();
+        isZoomIn ? zoomIn() : zoomOut();
       }
@@ -892,4 +877,3 @@ }
   (0, import_react8.useEffect)(() => {
-    if (!isEditingScale)
-      return;
+    if (!isEditingScale) return;
     setTimeout(() => {
@@ -903,2 +887,3 @@ var _a, _b;
     props: {
+      value,
       onChange: (e) => {
@@ -922,4 +907,3 @@ setValue(e.target.value);
         }
-      },
-      value
+      }
     },
@@ -977,5 +961,5 @@ ref: inputRef
   const readOnly = (0, import_slate_react.useReadOnly)();
-  const { align, id, isUpload, name, type, url } = element;
+  const { id, align, isUpload, name, type, url } = element;
   const embed = import_react11.default.useMemo(() => {
-    if (!urlParsers || type !== editor.getType(VideoPlugin) && type !== editor.getType(MediaEmbedPlugin))
+    if (!urlParsers || type !== editor.getType(BaseVideoPlugin) && type !== editor.getType(BaseMediaEmbedPlugin))
       return;
@@ -988,6 +972,6 @@ return parseMediaUrl(url, { urlParsers });
   return {
+    id,
     align,
     embed,
     focused,
-    id,
     isTweet,
@@ -1075,4 +1059,3 @@ isUpload,
   const isValid = _isUrl(url);
-  if (!isValid)
-    return;
+  if (!isValid) return;
   if (transformUrl) {
@@ -1153,3 +1136,3 @@ url = transformUrl(url);
 var import_react19 = require("@udecode/plate-common/react");
-var PlaceholderPlugin2 = (0, import_react19.toPlatePlugin)(PlaceholderPlugin, {
+var PlaceholderPlugin = (0, import_react19.toPlatePlugin)(BasePlaceholderPlugin, {
   handlers: {
@@ -1187,3 +1170,5 @@ onKeyDown: ({ editor, event }) => {
   const updatedFiles = usePlaceholderStore().get.updatedFiles();
-  const { mediaType } = (0, import_react21.useElement)(PlaceholderPlugin.key);
+  const { mediaType } = (0, import_react21.useElement)(
+    BasePlaceholderPlugin.key
+  );
   const progressing = updatedFiles.length > 0 && isUploading;
@@ -1218,3 +1203,3 @@ return {
   );
-  const element = (0, import_react22.useElement)(PlaceholderPlugin.key);
+  const element = (0, import_react22.useElement)(BasePlaceholderPlugin.key);
   const { id, mediaType } = element;
@@ -1225,6 +1210,6 @@ const setProgresses = usePlaceholderStore().set.progresses();
   return {
+    id,
     editor,
     element,
     focused,
-    id,
     mediaType,
@@ -1231,0 +1216,0 @@ readOnly,

package.json

 {
   "name": "@udecode/plate-media",
-  "version": "38.0.0",
+  "version": "38.0.1",
   "description": "Plate Media plugin",
@@ -59,3 +59,3 @@ "keywords": [
   "peerDependencies": {
-    "@udecode/plate-common": ">=38.0.0",
+    "@udecode/plate-common": ">=38.0.1",
     "react": ">=16.8.0",
@@ -62,0 +62,0 @@ "react-dom": ">=16.8.0",

No alert changes

Worsened metrics

Total package byte prevSize

309957

decreased by-0.32%

Lines of code

3996

decreased by-1.06%

No dependency changes