diff --git a/packages/editor/src/editor/Canvas.tsx b/packages/editor/src/editor/Canvas.tsx index 786edc9..7729fa7 100644 --- a/packages/editor/src/editor/Canvas.tsx +++ b/packages/editor/src/editor/Canvas.tsx @@ -495,9 +495,27 @@ function NodeView(props: { {node.props.text} - ) : ( -
{node.type}
- )} + ) : node.type === 'image' ? ( +
+ +
+ ) : null} {props.selected && } diff --git a/packages/editor/src/editor/EditorApp.tsx b/packages/editor/src/editor/EditorApp.tsx index ca6709a..afaa639 100644 --- a/packages/editor/src/editor/EditorApp.tsx +++ b/packages/editor/src/editor/EditorApp.tsx @@ -79,6 +79,7 @@ export function EditorApp() { n.id === state.selection.ids[0])} onUpdateTextProps={(id, props) => dispatch({ type: 'updateTextProps', id, props })} + onUpdateImageProps={(id, props) => dispatch({ type: 'updateImageProps', id, props })} /> diff --git a/packages/editor/src/editor/Inspector.tsx b/packages/editor/src/editor/Inspector.tsx index 329f06f..f48f138 100644 --- a/packages/editor/src/editor/Inspector.tsx +++ b/packages/editor/src/editor/Inspector.tsx @@ -1,9 +1,12 @@ import { Input, InputNumber, Select, Space, Typography } from 'antd'; -import type { TextWidgetNode, WidgetNode } from '@astralview/sdk'; +import type { WidgetNode, TextWidgetNode } from '@astralview/sdk'; + +type ImageWidgetNode = Extract; export function Inspector(props: { selected?: WidgetNode; onUpdateTextProps: (id: string, patch: Partial) => void; + onUpdateImageProps: (id: string, patch: Partial) => void; }) { const node = props.selected; @@ -11,8 +14,50 @@ export function Inspector(props: { return No selection.; } + if (node.type === 'image') { + return ( +
+ + Image + + + Source + props.onUpdateImageProps(node.id, { src: e.target.value })} + placeholder="https://..." + style={{ marginBottom: 12 }} + /> + + Fit +