feat(richtext-lexical): respect imageURL for blocks and inline blocks (#10532)

Block and inline block icons in the slash menu / toolbars can now be
customized:

![CleanShot 2025-01-12 at 19 41
09@2x](https://github.com/user-attachments/assets/80f8bbac-0ad8-43fc-8a6c-eae055a8ebbc)

Author: AlessioGr

packages/richtext-lexical/src/features/blocks/client/getBlockImageComponent.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import { BlockIcon } from '../../../lexical/ui/icons/Block/index.js'
+
+export function getBlockImageComponent(imageURL?: string, imageAltText?: string) {
+  if (!imageURL) {
+    return BlockIcon
+  }
+
+  return () => (
+    <img
+      alt={imageAltText ?? 'Block Image'}
+      className="lexical-block-custom-image"
+      src={imageURL}
+      style={{ maxHeight: 20, maxWidth: 20 }}
+    />
+  )
+}

packages/richtext-lexical/src/features/blocks/client/index.tsx

@@ -14,11 +14,11 @@ import type { ToolbarGroup, ToolbarGroupItem } from '../../toolbars/types.js'
 import { BlockIcon } from '../../../lexical/ui/icons/Block/index.js'
 import { InlineBlocksIcon } from '../../../lexical/ui/icons/InlineBlocks/index.js'
 import { createClientFeature } from '../../../utilities/createClientFeature.js'
+import { getBlockImageComponent } from './getBlockImageComponent.js'
 import { BlockNode } from './nodes/BlocksNode.js'
 import { InlineBlockNode } from './nodes/InlineBlocksNode.js'
 import { INSERT_BLOCK_COMMAND, INSERT_INLINE_BLOCK_COMMAND } from './plugin/commands.js'
 import { BlocksPlugin } from './plugin/index.js'
-
 export const BlocksFeatureClient = createClientFeature(
   ({ featureClientSchemaMap, props, schemaPath }) => {
     const schemaMapRenderedBlockPathPrefix = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks`
@@ -64,7 +64,7 @@ export const BlocksFeatureClient = createClientFeature(
             ? {
                 items: clientBlocks.map((block) => {
                   return {
-                    Icon: BlockIcon,
+                    Icon: getBlockImageComponent(block.imageURL, block.imageAltText),
                     key: 'block-' + block.slug,
                     keywords: ['block', 'blocks', block.slug],
                     label: ({ i18n }) => {
@@ -130,7 +130,7 @@ export const BlocksFeatureClient = createClientFeature(
                 ChildComponent: BlockIcon,
                 items: clientBlocks.map((block, index) => {
                   return {
-                    ChildComponent: BlockIcon,
+                    ChildComponent: getBlockImageComponent(block.imageURL, block.imageAltText),
                     isActive: undefined, // At this point, we would be inside a sub-richtext-editor. And at this point this will be run against the focused sub-editor, not the parent editor which has the actual block. Thus, no point in running this
                     key: 'block-' + block.slug,
                     label: ({ i18n }) => {
@@ -159,7 +159,9 @@ export const BlocksFeatureClient = createClientFeature(
                 ChildComponent: InlineBlocksIcon,
                 items: clientInlineBlocks.map((inlineBlock, index) => {
                   return {
-                    ChildComponent: InlineBlocksIcon,
+                    ChildComponent: inlineBlock.imageURL
+                      ? getBlockImageComponent(inlineBlock.imageURL, inlineBlock.imageAltText)
+                      : InlineBlocksIcon,
                     isActive: undefined,
                     key: 'inlineBlock-' + inlineBlock.slug,
                     label: ({ i18n }) => {