Media

.changeset/button-patch.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-ui-button': patch
+---
+
+-  `focus` editor after removing node on click

.changeset/core-minor.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-core': minor
+---
+
+- `ElementProvider` now has `SCOPE_ELEMENT='element'` scope in addition to the plugin key, so `useElement()` can be called without parameter (default = `SCOPE_ELEMENT`). You'll need to use the plugin key scope only to get an ancestor element. 

.changeset/floating-minor.md

@@ -0,0 +1,6 @@
+---
+'@udecode/plate-floating': minor
+---
+
+- `Popover`: Popover displayed over children, rendering `content`
+- `ElementPopover`: Popover displayed over an element if not read-only, element selected

.changeset/media-major.md

@@ -0,0 +1,14 @@
+---
+'@udecode/plate-media': major
+---
+
+- removed:
+  - `useImageElement` for `useElement`
+  - `MediaEmbedUrlInput` for `FloatingMediaUrlInput`
+  - `parseEmbedUrl` for `parseMediaUrl`
+  - `EmbedProviders`
+- renamed:
+  - `ImageImg` to `Image`
+  - `ImageCaptionTextarea` to `CaptionTextarea`
+  - `useImageCaptionString` to `useCaptionString`
+  - `ImageResizable` to `Resizable`

.changeset/media-minor.md

@@ -0,0 +1,83 @@
+---
+'@udecode/plate-media': minor
+---
+
+- `createMediaEmbedPlugin` default options:
+```tsx
+options: {
+  transformUrl: parseIframeUrl,
+  rules: [
+    {
+      parser: parseTwitterUrl,
+      component: MediaEmbedTweet,
+    },
+    {
+      parser: parseVideoUrl,
+      component: MediaEmbedVideo,
+    },
+  ],
+},
+```
+- utils:
+  - `parseIframeUrl`
+  - `parseMediaUrl`
+  - `submitFloatingMedia`
+- components:
+  - `MediaRoot`
+  - `MediaEmbed`
+    - `MediaEmbedTweet`: used when provider is twitter
+    - `MediaEmbedVideo`: used when provider is a video 
+  - `FloatingMedia`
+  - `FloatingMediaEditButton`
+  - `FloatingMediaUrlInput`
+- stores:
+  - `mediaStore`
+  - `captionGlobalStore`
+  - `floatingMediaStore`
+  - `resizableStore`
+- types:
+```tsx
+interface TResizableElement extends TElement {
+  width?: number;
+}
+
+interface TImageElement extends TMediaElement {}
+
+interface TCaptionElement extends TElement {
+  caption?: TDescendant[];
+}
+
+interface TMediaElement extends TCaptionElement, TResizableElement {
+  url: string;
+}
+
+type MediaUrlParser = (url: string) => EmbedUrlData | undefined;
+
+type MediaPluginRule = {
+  parser: MediaUrlParser;
+  component?: RenderFunction<EmbedUrlData>;
+};
+
+interface MediaPlugin {
+  isUrl?: (text: string) => boolean;
+
+  /**
+   * Transforms the url.
+   */
+  transformUrl?: (url: string) => string;
+
+  /**
+   * List of rules. The first rule that matches the url will be used,
+   * i.e. its component will be used to render the media. Used by `MediaEmbed`.
+   */
+  rules?: MediaPluginRule[];
+}
+```
+```tsx
+type EmbedUrlData = {
+  url?: string;
+  provider?: string;
+  id?: string;
+  component?: RenderFunction<EmbedUrlData>;
+};  
+```

.changeset/media-ui-minor.md

@@ -0,0 +1,13 @@
+---
+'@udecode/plate-ui-media': minor
+---
+
+- `ImageElement`:
+  - now uses composition pattern
+  - displays `PlateFloatingMedia` on select
+- `MediaEmbedElement`:
+  - now uses composition pattern
+  - displays `PlateFloatingMedia` on select
+- `PlateFloatingMedia`:
+  - edit link button
+  - delete node button

.changeset/plate-ui.md

@@ -0,0 +1,6 @@
+---
+'@udecode/plate': major
+'@udecode/plate-ui': major
+---
+
+- deprecate `@udecode/plate-ui-popover` for `@udecode/plate-floating`

.changeset/plate.md

@@ -0,0 +1,6 @@
+---
+'@udecode/plate': major
+'@udecode/plate-headless': major
+---
+
+- deprecate `@udecode/plate-image` and `@udecode/plate-media-embed`, those got merged into `@udecode/plate-media`

.changeset/table-minor.md

@@ -0,0 +1,9 @@
+---
+'@udecode/plate-ui-table': major
+---
+
+- `TableElementBase` props:
+  - replace `onRenderContainer` by `floatingOptions`
+- `TablePopover` is now a floating instead of tippy
+- deps:
+  - replaced `plate-ui-popover` by `plate-floating`

.changeset/toolbar-minor.md

@@ -0,0 +1,7 @@
+---
+'@udecode/plate-ui-toolbar': minor
+---
+
+- `FloatingVerticalDivider`
+- new dep:
+  - `@udecode/plate-ui-button`

README.md

@@ -120,25 +120,23 @@ your code to the project.
 
 ### Element Plugins
 
-| Name                                                                 | Version                                                                                                                                                                                         | Description                                               |
-|:---------------------------------------------------------------------|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:----------------------------------------------------------|
+| Name                                                              | Version                                                                                                                                                                                         | Description                                               |
+|:------------------------------------------------------------------|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:----------------------------------------------------------|
 | [`@udecode/plate-basic-elements`](packages/nodes/basic-elements)  | [<img src="https://img.shields.io/npm/v/@udecode/plate-basic-elements.svg" alt="@udecode/plate-basic-elements npm package badge">](https://www.npmjs.com/package/@udecode/plate-basic-elements) | Basic elements plugins.                                   |
 | [`@udecode/plate-alignment`](packages/nodes/alignment)            | [<img src="https://img.shields.io/npm/v/@udecode/plate-alignment.svg" alt="@udecode/plate-alignment npm package badge">](https://www.npmjs.com/package/@udecode/plate-alignment)                | Text alignment plugin.                                    |
 | [`@udecode/plate-ui-alignment`](packages/ui/nodes/alignment)      | [<img src="https://img.shields.io/npm/v/@udecode/plate-ui-alignment.svg" alt="@udecode/plate-ui-alignment npm package badge">](https://www.npmjs.com/package/@udecode/plate-ui-alignment)       | Text alignment UI.                                        |
 | [`@udecode/plate-block-quote`](packages/nodes/block-quote/)       | [<img src="https://img.shields.io/npm/v/@udecode/plate-block-quote.svg" alt="@udecode/plate-block-quote npm package badge">](https://www.npmjs.com/package/@udecode/plate-block-quote)          | Block quote plugin.                                       |
 | [`@udecode/plate-ui-block-quote`](packages/ui/nodes/block-quote/) | [<img src="https://img.shields.io/npm/v/@udecode/plate-ui-block-quote.svg" alt="@udecode/plate-ui-block-quote npm package badge">](https://www.npmjs.com/package/@udecode/plate-ui-block-quote) | Block quote UI.                                           |
 | [`@udecode/plate-code-block`](packages/nodes/code-block)          | [<img src="https://img.shields.io/npm/v/@udecode/plate-code-block.svg" alt="@udecode/plate-code-block npm package badge">](https://www.npmjs.com/package/@udecode/plate-code-block)             | Code block plugin.                                        |
 | [`@udecode/plate-ui-code-block`](packages/ui/nodes/code-block)    | [<img src="https://img.shields.io/npm/v/@udecode/plate-ui-code-block.svg" alt="@udecode/plate-ui-code-block npm package badge">](https://www.npmjs.com/package/@udecode/plate-ui-code-block)    | Code block UI.                                            |
-| [`@udecode/plate-excalidraw`](packages/ui/nodes/excalidraw/)         | [<img src="https://img.shields.io/npm/v/@udecode/plate-excalidraw.svg" alt="@udecode/plate-excalidraw npm package badge">](https://www.npmjs.com/package/@udecode/plate-excalidraw)             | Excalidraw plugin.                                        |
+| [`@udecode/plate-excalidraw`](packages/ui/nodes/excalidraw/)      | [<img src="https://img.shields.io/npm/v/@udecode/plate-excalidraw.svg" alt="@udecode/plate-excalidraw npm package badge">](https://www.npmjs.com/package/@udecode/plate-excalidraw)             | Excalidraw plugin.                                        |
 | [`@udecode/plate-heading`](packages/nodes/heading/)               | [<img src="https://img.shields.io/npm/v/@udecode/plate-heading.svg" alt="@udecode/plate-heading npm package badge">](https://www.npmjs.com/package/@udecode/plate-heading)                      | Headings (1-6) plugin.                                    |
-| [`@udecode/plate-image`](packages/nodes/image/)                   | [<img src="https://img.shields.io/npm/v/@udecode/plate-image.svg" alt="@udecode/plate-image npm package badge">](https://www.npmjs.com/package/@udecode/plate-image)                            | Image plugin. Supports pasting images from clipboard.     |
-| [`@udecode/plate-ui-image`](packages/ui/nodes/image/)             | [<img src="https://img.shields.io/npm/v/@udecode/plate-ui-image.svg" alt="@udecode/plate-ui-image npm package badge">](https://www.npmjs.com/package/@udecode/plate-ui-image)                   | Image UI.                                                 |
 | [`@udecode/plate-link`](packages/nodes/link/)                     | [<img src="https://img.shields.io/npm/v/@udecode/plate-link.svg" alt="@udecode/plate-link npm package badge">](https://www.npmjs.com/package/@udecode/plate-link)                               | Link plugin.                                              |
 | [`@udecode/plate-ui-link`](packages/ui/nodes/link/)               | [<img src="https://img.shields.io/npm/v/@udecode/plate-ui-link.svg" alt="@udecode/plate-ui-link npm package badge">](https://www.npmjs.com/package/@udecode/plate-ui-link)                      | Link UI.                                                  |
 | [`@udecode/plate-list`](packages/nodes/list)                      | [<img src="https://img.shields.io/npm/v/@udecode/plate-list.svg" alt="@udecode/plate-list npm package badge">](https://www.npmjs.com/package/@udecode/plate-list)                               | Bulleted, numbered and to-do list plugins.                |
 | [`@udecode/plate-ui-list`](packages/ui/nodes/list)                | [<img src="https://img.shields.io/npm/v/@udecode/plate-ui-list.svg" alt="@udecode/plate-ui-list npm package badge">](https://www.npmjs.com/package/@udecode/plate-ui-list)                      | List UI.                                                  |
-| [`@udecode/plate-media-embed`](packages/nodes/media-embed)        | [<img src="https://img.shields.io/npm/v/@udecode/plate-media-embed.svg" alt="@udecode/plate-media-embed npm package badge">](https://www.npmjs.com/package/@udecode/plate-media-embed)          | Media embed plugin.                                       |
-| [`@udecode/plate-ui-media-embed`](packages/ui/nodes/media-embed)  | [<img src="https://img.shields.io/npm/v/@udecode/plate-ui-media-embed.svg" alt="@udecode/plate-ui-media-embed npm package badge">](https://www.npmjs.com/package/@udecode/plate-ui-media-embed) | Media embed UI.                                           |
+| [`@udecode/plate-media`](packages/nodes/media)                        | [<img src="https://img.shields.io/npm/v/@udecode/plate-media.svg" alt="@udecode/plate-media npm package badge">](https://www.npmjs.com/package/@udecode/plate-media)                                  | Media embed plugin.                                       |
+| [`@udecode/plate-ui-media`](packages/ui/nodes/media)                | [<img src="https://img.shields.io/npm/v/@udecode/plate-ui-media.svg" alt="@udecode/plate-ui-media npm package badge">](https://www.npmjs.com/package/@udecode/plate-ui-media)                         | Media embed UI.                                           |
 | [`@udecode/plate-mention`](packages/nodes/mention/)               | [<img src="https://img.shields.io/npm/v/@udecode/plate-mention.svg" alt="@udecode/plate-mention npm package badge">](https://www.npmjs.com/package/@udecode/plate-mention)                      | Mention plugin (autocomplete `@mentions`, `#tags`, etc.). |
 | [`@udecode/plate-ui-mention`](packages/ui/nodes/mention/)         | [<img src="https://img.shields.io/npm/v/@udecode/plate-ui-mention.svg" alt="@udecode/plate-ui-mention npm package badge">](https://www.npmjs.com/package/@udecode/plate-ui-mention)             | Mention UI.                                               |
 | [`@udecode/plate-paragraph`](packages/nodes/paragraph/)           | [<img src="https://img.shields.io/npm/v/@udecode/plate-paragraph.svg" alt="@udecode/plate-paragraph npm package badge">](https://www.npmjs.com/package/@udecode/plate-paragraph)                | Paragraph plugin.                                         |

config/aliases-plate.js

@@ -18,7 +18,6 @@ module.exports = {
   '@udecode/plate-heading': 'nodes/heading',
   '@udecode/plate-highlight': 'nodes/highlight',
   '@udecode/plate-horizontal-rule': 'nodes/horizontal-rule',
-  '@udecode/plate-image': 'nodes/image',
   '@udecode/plate-indent': 'nodes/indent',
   '@udecode/plate-indent-list': 'nodes/indent-list',
   '@udecode/plate-juice': 'serializers/juice',
@@ -27,7 +26,7 @@ module.exports = {
   '@udecode/plate-link': 'nodes/link',
   '@udecode/plate-list': 'nodes/list',
   '@udecode/plate-serializer-md': 'serializers/md',
-  '@udecode/plate-media-embed': 'nodes/media-embed',
+  '@udecode/plate-media': 'media',
   '@udecode/plate-mention': 'nodes/mention',
   '@udecode/plate-node-id': 'editor/node-id',
   '@udecode/plate-normalizers': 'editor/normalizers',

config/aliases.js

@@ -14,14 +14,12 @@ module.exports = {
   '@udecode/plate-ui-find-replace': 'ui/find-replace',
   '@udecode/plate-ui-font': 'ui/nodes/font',
   '@udecode/plate-ui-horizontal-rule': 'ui/nodes/horizontal-rule',
-  '@udecode/plate-ui-image': 'ui/nodes/image',
   '@udecode/plate-ui-line-height': 'ui/nodes/line-height',
   '@udecode/plate-ui-link': 'ui/nodes/link',
   '@udecode/plate-ui-list': 'ui/nodes/list',
-  '@udecode/plate-ui-media-embed': 'ui/nodes/media-embed',
+  '@udecode/plate-ui-media': 'ui/nodes/media',
   '@udecode/plate-ui-mention': 'ui/nodes/mention',
   '@udecode/plate-ui-placeholder': 'ui/placeholder',
-  '@udecode/plate-ui-popover': 'ui/popover',
   '@udecode/plate-ui-table': 'ui/nodes/table',
   '@udecode/plate-ui-toolbar': 'ui/toolbar',
 };

docs/docs/plugins/MediaEmbedSandpack.tsx → docs/docs/plugins/MediaSandpack.tsx

@@ -15,7 +15,7 @@ import { selectOnBackspacePluginFile } from '../sandpack/files/select-on-backspa
 import { toolbarFile } from '../sandpack/files/toolbar/code-Toolbar';
 import { typescriptFiles } from '../sandpack/files/typescript/code-typescriptFiles';
 
-export const MediaEmbedSandpack = () => (
+export const MediaSandpack = () => (
   <CommonSandpack
     height={722}
     previewSize={8}