Setting up image placeholder (#53)

usewaypoint · Feb 29, 2024 · d59e1a5 · d59e1a5
1 parent da15e8e
commit d59e1a5
Showing 1 changed file with 8 additions and 21 deletions.
diff --git a/packages/editor-sample/src/documents/editor/core.tsx b/packages/editor-sample/src/documents/editor/core.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { z } from 'zod';
 
-import { ImageOutlined } from '@mui/icons-material';
 import { Avatar, AvatarProps, AvatarPropsSchema } from '@usewaypoint/block-avatar';
 import { Button, ButtonProps, ButtonPropsSchema } from '@usewaypoint/block-button';
 import { Divider, DividerProps, DividerPropsSchema } from '@usewaypoint/block-divider';
@@ -74,28 +73,16 @@ const EDITOR_DICTIONARY = {
  Image: {
  schema: ImagePropsSchema,
  Component: (data: ImageProps) => {
- const url = data.props?.url ?? '';
- if (url.trim().length === 0) {
- return (
- <EditorBlockWrapper>
- <div
- style={{
- width: '100%',
- height: 320,
- backgroundColor: 'rgba(0,0,0, 0.05)',
- display: 'flex',
- justifyContent: 'center',
- alignItems: 'center',
- }}
- >
- <ImageOutlined sx={{ fontSize: 'small', color: 'inherit' }} />
- </div>
- </EditorBlockWrapper>
- );
- }
+ const props = {
+ ...data,
+ props: {
+ ...data.props,
+ url: data.props?.url ?? 'https://placehold.co/600x400@2x/F8F8F8/CCC?text=Your%20image',
+ },
+ };
  return (
  <EditorBlockWrapper>
- <Image {...data} />
+ <Image {...props} />
  </EditorBlockWrapper>
  );
  },