Remove the unused native Plate image node

packages/blocks/index.ts

@@ -183,9 +183,6 @@ export default function install(config: ConfigType) {
     column: {
       category: 'layout',
     },
-    img: {
-      category: 'media',
-    },
     video: {
       category: 'media',
     },

packages/blocks/news/+remove-native-image-node.internal

@@ -0,0 +1 @@
+Removed the unused native Plate image (`img`) entry from `config.blocks.plateBlocksConfig`. @sneridagh

packages/plate/components/editor/plugins/align-base-kit.tsx

@@ -10,7 +10,7 @@ export const BaseAlignKit = [
         styleKey: 'textAlign',
         validNodeValues: ['start', 'left', 'center', 'right', 'end', 'justify'],
       },
-      targetPlugins: [...KEYS.heading, KEYS.p, KEYS.img, KEYS.mediaEmbed],
+      targetPlugins: [...KEYS.heading, KEYS.p, KEYS.mediaEmbed],
     },
   }),
 ];

packages/plate/components/editor/plugins/align-kit.tsx

@@ -10,7 +10,7 @@ export const AlignKit = [
         styleKey: 'textAlign',
         validNodeValues: ['start', 'left', 'center', 'right', 'end', 'justify'],
       },
-      targetPlugins: [...KEYS.heading, KEYS.p, KEYS.img, KEYS.mediaEmbed],
+      targetPlugins: [...KEYS.heading, KEYS.p, KEYS.mediaEmbed],
     },
   }),
 ];

packages/plate/components/editor/plugins/indent-kit.tsx

@@ -10,7 +10,6 @@ export const IndentKit = [
         KEYS.blockquote,
         KEYS.codeBlock,
         KEYS.toggle,
-        KEYS.img,
       ],
     },
     options: {

packages/plate/components/editor/plugins/list-kit.tsx

@@ -27,7 +27,6 @@ export const ListKit = [
         KEYS.blockquote,
         KEYS.codeBlock,
         KEYS.toggle,
-        KEYS.img,
       ],
     },
     render: {

packages/plate/components/editor/plugins/media-base-kit.tsx

@@ -2,7 +2,6 @@ import { BaseCaptionPlugin } from '@platejs/caption';
 import {
   BaseAudioPlugin,
   BaseFilePlugin,
-  // BaseImagePlugin,
   BaseMediaEmbedPlugin,
   BasePlaceholderPlugin,
   BaseVideoPlugin,
@@ -11,18 +10,16 @@ import { KEYS } from 'platejs';
 
 import { AudioElementStatic } from '../../ui/media-audio-node-static';
 import { FileElementStatic } from '../../ui/media-file-node-static';
-// import { ImageElementStatic } from '../../ui/media-image-node-static';
 import { VideoElementStatic } from '../../ui/media-video-node-static';
 
 export const BaseMediaKit = [
-  // BaseImagePlugin.withComponent(ImageElementStatic),
   BaseVideoPlugin.withComponent(VideoElementStatic),
   BaseAudioPlugin.withComponent(AudioElementStatic),
   BaseFilePlugin.withComponent(FileElementStatic),
   BaseCaptionPlugin.configure({
     options: {
       query: {
-        allow: [KEYS.img, KEYS.video, KEYS.audio, KEYS.file, KEYS.mediaEmbed],
+        allow: [KEYS.video, KEYS.audio, KEYS.file, KEYS.mediaEmbed],
       },
     },
   }),

packages/plate/components/editor/plugins/media-kit.tsx

@@ -2,7 +2,6 @@ import { CaptionPlugin } from '@platejs/caption/react';
 import {
   AudioPlugin,
   FilePlugin,
-  // ImagePlugin,
   MediaEmbedPlugin,
   PlaceholderPlugin,
   VideoPlugin,
@@ -12,19 +11,11 @@ import { KEYS } from 'platejs';
 import { AudioElement } from '../../ui/media-audio-node';
 import { MediaEmbedElement } from '../../ui/media-embed-node';
 import { FileElement } from '../../ui/media-file-node';
-// import { ImageElement } from '../../ui/media-image-node';
 import { PlaceholderElement } from '../../ui/media-placeholder-node';
-// import { MediaPreviewDialog } from '../../ui/media-preview-dialog';
 import { MediaUploadToast } from '../../ui/media-upload-toast';
 import { VideoElement } from '../../ui/media-video-node';
 
 export const MediaKit = [
-  // ImagePlugin.configure({
-  //   // Image nodes are inserted empty and completed through the custom
-  //   // source dialog in `media-image-node.tsx`.
-  //   options: { disableUploadInsert: true },
-  //   render: { afterEditable: MediaPreviewDialog, node: ImageElement },
-  // }),
   MediaEmbedPlugin.withComponent(MediaEmbedElement),
   VideoPlugin.withComponent(VideoElement),
   AudioPlugin.withComponent(AudioElement),
@@ -36,7 +27,7 @@ export const MediaKit = [
   CaptionPlugin.configure({
     options: {
       query: {
-        allow: [KEYS.img, KEYS.video, KEYS.audio, KEYS.file, KEYS.mediaEmbed],
+        allow: [KEYS.video, KEYS.audio, KEYS.file, KEYS.mediaEmbed],
       },
     },
   }),

packages/plate/components/editor/transforms.ts

@@ -47,13 +47,6 @@ const insertBlockMap: Record<
   [KEYS.callout]: (editor) => insertCallout(editor, { select: true }),
   [KEYS.codeBlock]: (editor) => insertCodeBlock(editor, { select: true }),
   [KEYS.file]: (editor) => insertFilePlaceholder(editor, { select: true }),
-  // We don't want to support direct image insertions via alert menu
-  // We should do the same in the other media types for consistency
-  // [KEYS.img]: (editor) =>
-  //   insertMedia(editor, {
-  //     select: true,
-  //     type: KEYS.img,
-  //   }),
   [KEYS.mediaEmbed]: (editor) =>
     insertMedia(editor, {
       select: true,

packages/plate/components/ui/block-suggestion.tsx

@@ -54,7 +54,6 @@ const TYPE_TEXT_MAP: Record<string, (node?: TElement) => string> = {
   [KEYS.h5]: () => `Heading 5`,
   [KEYS.h6]: () => `Heading 6`,
   [KEYS.hr]: () => 'Horizontal Rule',
-  [KEYS.img]: () => 'Image',
   [KEYS.mediaEmbed]: () => 'Media',
   [KEYS.p]: (node) => {
     if (node?.[KEYS.listType] === KEYS.listTodo) return 'Todo List';

packages/plate/components/ui/fixed-toolbar-buttons.tsx

@@ -128,7 +128,6 @@ export function FixedToolbarButtons() {
           </ToolbarGroup>
 
           <ToolbarGroup>
-            <MediaToolbarButton nodeType={KEYS.img} />
             <MediaToolbarButton nodeType={KEYS.video} />
             <MediaToolbarButton nodeType={KEYS.audio} />
             <MediaToolbarButton nodeType={KEYS.file} />

packages/plate/components/ui/insert-toolbar-button.tsx

@@ -9,7 +9,6 @@ import {
   FilmIcon,
   Heading2Icon,
   Heading3Icon,
-  ImageIcon,
   Link2Icon,
   ListIcon,
   ListOrderedIcon,
@@ -126,11 +125,6 @@ const groups: Group[] = [
   {
     group: 'Media',
     items: [
-      {
-        icon: <ImageIcon />,
-        label: 'Image',
-        value: KEYS.img,
-      },
       {
         icon: <FilmIcon />,
         label: 'Embed',