From 003f23ee788bd6b3da4a436ed4bc857c6aaabf7b Mon Sep 17 00:00:00 2001 From: ErSan Date: Tue, 27 Jan 2026 19:12:20 +0800 Subject: [PATCH] feat: add Image widget + legacy Image converter --- packages/editor/src/editor/Canvas.tsx | 24 +++++++++-- packages/editor/src/editor/EditorApp.tsx | 1 + packages/editor/src/editor/Inspector.tsx | 51 ++++++++++++++++++++++-- packages/editor/src/editor/store.ts | 21 +++++++++- packages/editor/vite.config.ts | 15 +++++++ packages/sdk/tsconfig.tsbuildinfo | 2 +- 6 files changed, 106 insertions(+), 8 deletions(-) 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 +