diff --git a/apps/platform/src/features/flow-editor/components/schema-field-renderer.tsx b/apps/platform/src/features/flow-editor/components/schema-field-renderer.tsx
index a5eac32..1dde804 100644
--- a/apps/platform/src/features/flow-editor/components/schema-field-renderer.tsx
+++ b/apps/platform/src/features/flow-editor/components/schema-field-renderer.tsx
@@ -49,15 +49,25 @@ const isMultilineFormat = (format?: string) =>
format === 'multiline' || format === 'textarea' || format === 'multi-line'
const inputTypeFor = (field: SchemaField) => {
- if (field.writeOnly) return 'password'
- if (field.format === 'email') return 'email'
- if (field.format === 'uri' || field.format === 'url') return 'url'
+ if (field.writeOnly) {
+ return 'password'
+ }
+ if (field.format === 'email') {
+ return 'email'
+ }
+ if (field.format === 'uri' || field.format === 'url') {
+ return 'url'
+ }
return 'text'
}
const stringifyComplex = (val: any) => {
- if (val === undefined || val === null) return ''
- if (typeof val === 'string') return val
+ if (val === undefined || val === null) {
+ return ''
+ }
+ if (typeof val === 'string') {
+ return val
+ }
try {
return JSON.stringify(val, null, 2)
} catch {
@@ -68,15 +78,23 @@ const stringifyComplex = (val: any) => {
const PRIMITIVE_ITEM_TYPES = new Set(['string', 'number', 'integer', 'boolean'])
const isPrimitiveItemSchema = (items: any) => {
- if (!items || typeof items !== 'object') return true
+ if (!items || typeof items !== 'object') {
+ return true
+ }
const type = items.type
- if (type === undefined) return true
+ if (type === undefined) {
+ return true
+ }
return PRIMITIVE_ITEM_TYPES.has(type)
}
const defaultForItemType = (type?: string) => {
- if (type === 'boolean') return false
- if (type === 'number' || type === 'integer') return 0
+ if (type === 'boolean') {
+ return false
+ }
+ if (type === 'number' || type === 'integer') {
+ return 0
+ }
return ''
}
@@ -222,7 +240,9 @@ export function SchemaFieldRenderer({
}: SchemaFieldRendererProps) {
const { t } = useTranslation()
- if (field.hidden) return null
+ if (field.hidden) {
+ return null
+ }
const labelText = t(field.title || field.key, field.title || field.key)
const isReadOnly = !!field.readOnly
diff --git a/apps/platform/src/features/flow-editor/hooks/use-flow-drag.ts b/apps/platform/src/features/flow-editor/hooks/use-flow-drag.ts
index 481868e..34117f3 100644
--- a/apps/platform/src/features/flow-editor/hooks/use-flow-drag.ts
+++ b/apps/platform/src/features/flow-editor/hooks/use-flow-drag.ts
@@ -2,6 +2,8 @@ import { useState, useRef } from 'react'
import { useReactFlow } from '@xyflow/react'
import type {
FlowNode,
+ IconSource,
+ NodeHandle,
NodeOutputType,
SchemaField,
SetFlowNodes,
@@ -17,6 +19,10 @@ interface DragItem {
name: string
description: string
category: string
+ icon?: IconSource
+ inputs?: NodeHandle[]
+ outputs?: NodeHandle[]
+ subCategory?: string
tags?: string[]
isComingSoon?: boolean
outputTypes?: NodeOutputType[]
@@ -55,11 +61,15 @@ export function useFlowDrag({
const pane = document.querySelector(
'.react-flow__pane.draggable',
) as HTMLElement
- if (pane) pane.style.cursor = 'grab'
+ if (pane) {
+ pane.style.cursor = 'grab'
+ }
document.removeEventListener('mousemove', onMouseMove)
document.removeEventListener('mouseup', onMouseUp)
- if (!dragData.current) return
+ if (!dragData.current) {
+ return
+ }
const position = screenToFlowPosition({
x: e.clientX + 100,
y: e.clientY,
@@ -72,6 +82,9 @@ export function useFlowDrag({
tags: dragData.current.tags,
title: dragData.current.name,
category: dragData.current.category,
+ icon: dragData.current.icon,
+ inputs: dragData.current.inputs,
+ outputs: dragData.current.outputs,
},
instruction: undefined,
parameters: {},
@@ -95,12 +108,16 @@ export function useFlowDrag({
const pane = document.querySelector(
'.react-flow__pane.draggable',
) as HTMLElement
- if (pane) pane.style.cursor = 'grab'
+ if (pane) {
+ pane.style.cursor = 'grab'
+ }
document.removeEventListener('mousemove', onMouseMove)
document.removeEventListener('mouseup', onMouseUpAnnotation)
- if (!dragData.current) return
+ if (!dragData.current) {
+ return
+ }
const position = screenToFlowPosition({
x: e.clientX + 100,
@@ -139,7 +156,9 @@ export function useFlowDrag({
const pane = document.querySelector(
'.react-flow__pane.draggable',
) as HTMLElement
- if (pane) pane.style.cursor = 'grabbing'
+ if (pane) {
+ pane.style.cursor = 'grabbing'
+ }
document.addEventListener('mousemove', onMouseMove)
document.addEventListener('mouseup', onMouseUp)
}
@@ -161,7 +180,9 @@ export function useFlowDrag({
const pane = document.querySelector(
'.react-flow__pane.draggable',
) as HTMLElement
- if (pane) pane.style.cursor = 'grabbing'
+ if (pane) {
+ pane.style.cursor = 'grabbing'
+ }
document.addEventListener('mousemove', onMouseMove)
document.addEventListener('mouseup', onMouseUpAnnotation)
diff --git a/apps/platform/src/features/flow-editor/hooks/use-flow-nodes.ts b/apps/platform/src/features/flow-editor/hooks/use-flow-nodes.ts
index 69654f9..9584fa1 100644
--- a/apps/platform/src/features/flow-editor/hooks/use-flow-nodes.ts
+++ b/apps/platform/src/features/flow-editor/hooks/use-flow-nodes.ts
@@ -2,11 +2,11 @@ import { useCallback, useEffect, useMemo, useRef } from 'react'
import useSWR from 'swr'
import nodeEngineService from '@/features/flow-editor/services/node-engine'
import { useTranslation } from 'react-i18next'
-import { useThemeStore } from '@/stores/theme-store'
import type {
ContextMenuItem,
FlowEdge,
FlowNode,
+ IconSource,
NodeEngineNode,
NodeOutputType,
RendererNode,
@@ -15,18 +15,13 @@ import type {
SchemaField,
} from '@/features/flow-editor/types'
-export const resolveIconKey = (icon: any, mode: 'light' | 'dark'): string => {
- if (!icon) return ''
- if (typeof icon === 'string') return icon
- if (mode === 'dark' && icon.dark) return icon.dark
- return icon.light ?? icon.dark ?? ''
-}
-
const normalizeKey = (value?: string) =>
(value ?? '').toLowerCase().replace(/\s+/g, '')
const inputSchemaToFields = (schema: any): SchemaField[] => {
- if (!schema?.properties) return []
+ if (!schema?.properties) {
+ return []
+ }
const required = new Set
(schema.required ?? [])
return Object.entries(schema.properties).map(
([key, value]: [string, any]) => ({
@@ -53,7 +48,9 @@ const collectOutputPaths = (
prefix: string,
acc: NodeOutputType[],
) => {
- if (!node || typeof node !== 'object') return
+ if (!node || typeof node !== 'object') {
+ return
+ }
if (node.type === 'object' && node.properties) {
for (const [key, value] of Object.entries(node.properties)) {
@@ -85,7 +82,9 @@ const collectOutputPaths = (
}
const outputSchemaToTypes = (schema: any): NodeOutputType[] => {
- if (!schema || typeof schema !== 'object') return []
+ if (!schema || typeof schema !== 'object') {
+ return []
+ }
const acc: NodeOutputType[] = []
collectOutputPaths(schema, '', acc)
return acc
@@ -95,13 +94,19 @@ const buildNodeList = (nodes: ResolvedNode[]): RendererNodeMap => {
const r: RendererNodeMap = {}
for (const item of nodes) {
const subCategory = item.subCategory ?? ''
- if (!r[item.category]) r[item.category] = {}
- if (!r[item.category][subCategory]) r[item.category][subCategory] = []
+ if (!r[item.category]) {
+ r[item.category] = {}
+ }
+ if (!r[item.category][subCategory]) {
+ r[item.category][subCategory] = []
+ }
const labels: string[] = []
if (item.schema && item.schema.length > 0) {
for (const field of item.schema) {
if (Array.isArray(field.enum)) {
- for (const opt of field.enum) labels.push(String(opt))
+ for (const opt of field.enum) {
+ labels.push(String(opt))
+ }
}
}
}
@@ -110,6 +115,9 @@ const buildNodeList = (nodes: ResolvedNode[]): RendererNodeMap => {
label: item.name,
description: item.description,
type: item.category,
+ icon: item.icon,
+ inputs: item.inputs,
+ outputs: item.outputs,
subCategory: item.subCategory,
actions: labels,
tags: item.tags,
@@ -120,11 +128,45 @@ const buildNodeList = (nodes: ResolvedNode[]): RendererNodeMap => {
return r
}
+const buildProviderList = (nodes: ResolvedNode[]) => {
+ const groups = new Map<
+ string,
+ { key: string; label: string; icon: IconSource; nodes: RendererNode[] }
+ >()
+
+ for (const item of nodes) {
+ const label = item.provider || item.subCategory || ''
+ const key = item.subCategory || normalizeKey(label)
+ if (!groups.has(key)) {
+ groups.set(key, {
+ key,
+ label,
+ icon: { brand: item.icon?.brand },
+ nodes: [],
+ })
+ }
+ groups.get(key)!.nodes.push({
+ id: item.id,
+ label: item.name,
+ description: item.description,
+ type: item.category,
+ icon: item.icon,
+ inputs: item.inputs,
+ outputs: item.outputs,
+ subCategory: item.subCategory,
+ actions: [],
+ tags: item.tags,
+ isComingSoon: item.isComingSoon ?? false,
+ })
+ }
+
+ return [...groups.values()].sort((a, b) => a.label.localeCompare(b.label))
+}
+
const NODES_KEY = 'node-engine-nodes'
const TRIGGER_VARIABLES_KEY = 'node-engine-trigger-variables'
export function useNodeEngineNodes() {
- const mode = useThemeStore((s) => s.getMode())
const { data, isLoading } = useSWR(NODES_KEY, async () => {
const response = await nodeEngineService.getNodes()
return (response.data as NodeEngineNode[]) || []
@@ -136,9 +178,12 @@ export function useNodeEngineNodes() {
id: item.id ?? '',
name: item.name ?? '',
description: item.description ?? '',
- icon: resolveIconKey(item.icon, mode),
+ icon: item.icon,
+ inputs: item.inputs,
+ outputs: item.outputs,
category: normalizeKey(item.categories?.[0]),
subCategory: normalizeKey(item.subCategories?.[0]),
+ provider: item.subCategories?.[0] ?? '',
tags: item.tags ?? [],
supportedCredentials: item.supportedCredentials,
schema: inputSchemaToFields(item.inputSchema),
@@ -147,11 +192,12 @@ export function useNodeEngineNodes() {
isComingSoon: item.isComingSoon,
hasNaturalLanguage: item.hasNaturalLanguage,
})),
- [data, mode],
+ [data],
)
const nodeList = useMemo(() => buildNodeList(apiNodes), [apiNodes])
+ const providerList = useMemo(() => buildProviderList(apiNodes), [apiNodes])
- return { apiNodes, nodeList, isLoading }
+ return { apiNodes, nodeList, providerList, isLoading }
}
export function useTriggerVariables() {
@@ -159,7 +205,9 @@ export function useTriggerVariables() {
TRIGGER_VARIABLES_KEY,
async () => {
const response = await nodeEngineService.getTriggerVariables()
- if (response.isSuccess && response.data) return response.data
+ if (response.isSuccess && response.data) {
+ return response.data
+ }
return []
},
)
@@ -195,7 +243,9 @@ export function useFlowNodes(apiNodes: ResolvedNode[] = []) {
from?: SourceRef,
apiNodesArg?: ResolvedNode[],
): ContextMenuItem[] | undefined => {
- if (node.id === '0') return undefined
+ if (node.id === '0') {
+ return undefined
+ }
let contextMenu: ContextMenuItem[] = []
const ref = node.id
@@ -204,7 +254,9 @@ export function useFlowNodes(apiNodes: ResolvedNode[] = []) {
const apiNode = apiOriginRef.current.find(
(n) => n.id === sourceNode.nodeId,
)
- if (apiNode === undefined) return contextMenu
+ if (apiNode === undefined) {
+ return contextMenu
+ }
const outputs = apiNode.outputTypes ?? []
for (let j = 0; j < outputs.length; j++) {
@@ -237,15 +289,21 @@ export function useFlowNodes(apiNodes: ResolvedNode[] = []) {
const edges = source.edges.filter((e) => e.target === ref)
for (let i = 0; i < edges.length; i++) {
const edge = edges[i]
- if (edge.source === '0') continue
+ if (edge.source === '0') {
+ continue
+ }
const sourceNode = source.nodes.find((n) => n.id === edge.source)
- if (!sourceNode) continue
+ if (!sourceNode) {
+ continue
+ }
const currentApiNodes = apiNodesArg || apiOriginRef.current
const apiNode = currentApiNodes?.find(
(n) => n.id === sourceNode.nodeId,
)
- if (apiNode === undefined) continue
+ if (apiNode === undefined) {
+ continue
+ }
const sourceContextMenu = sourceNode.data?.contextMenu
if (sourceContextMenu && sourceContextMenu.length > 0) {
contextMenu = contextMenu.concat(sourceContextMenu)
diff --git a/apps/platform/src/features/flow-editor/hooks/use-navigation-guard.ts b/apps/platform/src/features/flow-editor/hooks/use-navigation-guard.ts
index ffb1fef..0f28d70 100644
--- a/apps/platform/src/features/flow-editor/hooks/use-navigation-guard.ts
+++ b/apps/platform/src/features/flow-editor/hooks/use-navigation-guard.ts
@@ -35,8 +35,12 @@ export function useNavigationGuard({
// Link click and popstate interception
useEffect(() => {
- if (previewMode) return
- if (!hasUnsavedChanges) return
+ if (previewMode) {
+ return
+ }
+ if (!hasUnsavedChanges) {
+ return
+ }
const handleClick = (e: MouseEvent) => {
const link = (e.target as HTMLElement).closest('a[href]')
@@ -74,7 +78,9 @@ export function useNavigationGuard({
// beforeunload
useEffect(() => {
- if (previewMode) return
+ if (previewMode) {
+ return
+ }
const handleBeforeUnload = (e: BeforeUnloadEvent) => {
if (hasUnsavedChanges) {
e.preventDefault()
diff --git a/apps/platform/src/features/flow-editor/icons/brand-icons.tsx b/apps/platform/src/features/flow-editor/icons/brand-icons.tsx
deleted file mode 100644
index 9fe2bea..0000000
--- a/apps/platform/src/features/flow-editor/icons/brand-icons.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-// Brand AI & Media Icons
-
-const AnthropicIcon = (props) => (
-
-)
-
-const ChatGptIcon = (props) => (
-
-)
-
-const DeepseekIcon = (props) => (
-
-)
-
-const GeminiIcon = (props) => (
-
-)
-
-const SunoIcon = (props) => (
-
-)
-
-const ElevenlabsIcon = (props) => (
-
-)
-
-const PiApiIcon = (props) => (
-
-)
-
-const CreatoMateIcon = (props) => (
-
-)
-
-const SoundCloudIcon = (props) => (
-
-)
-
-export {
- AnthropicIcon,
- ChatGptIcon,
- DeepseekIcon,
- GeminiIcon,
- SunoIcon,
- ElevenlabsIcon,
- PiApiIcon,
- CreatoMateIcon,
- SoundCloudIcon,
-}
diff --git a/apps/platform/src/features/flow-editor/icons/index.ts b/apps/platform/src/features/flow-editor/icons/index.ts
index db63d0f..e1f37cc 100644
--- a/apps/platform/src/features/flow-editor/icons/index.ts
+++ b/apps/platform/src/features/flow-editor/icons/index.ts
@@ -1,71 +1,2 @@
-import { Send } from 'lucide-react'
-
-import {
- AnthropicIcon,
- ChatGptIcon,
- DeepseekIcon,
- GeminiIcon,
- SunoIcon,
- ElevenlabsIcon,
- PiApiIcon,
- CreatoMateIcon,
- SoundCloudIcon,
-} from './brand-icons'
-
-import {
- XIcon,
- InstagramIcon,
- TiktokIcon,
- FacebookIcon,
- LinkedinIcon,
- YouTubeIcon,
- DiscordIcon,
- SlackIcon,
- WhatsAppIcon,
- TelegramIcon,
-} from './social-icons'
-
-import {
- GmailIcon,
- OutlookIcon,
- GoogleDriveIcon,
- GoogleSheetsIcon,
- GoogleDocsIcon,
- NotionIcon,
- DeepLIcon,
- CoinGeckoIcon,
-} from './productivity-icons'
-
export { directionIcons } from './direction-icons'
-
-export const secretIcons = {
- anthropic: AnthropicIcon,
- chatgpt: ChatGptIcon,
- deepseek: DeepseekIcon,
- gemini: GeminiIcon,
- gmail: GmailIcon,
- outlook: OutlookIcon,
- telegram: TelegramIcon,
- x: XIcon,
- instagram: InstagramIcon,
- tiktok: TiktokIcon,
- facebook: FacebookIcon,
- linkedin: LinkedinIcon,
- youtube: YouTubeIcon,
- google_drive: GoogleDriveIcon,
- google_sheets: GoogleSheetsIcon,
- google_docs: GoogleDocsIcon,
- sunomusic: SunoIcon,
- elevenlabs: ElevenlabsIcon,
- smtp: Send,
- piapi: PiApiIcon,
- creatomate: CreatoMateIcon,
- whatsapp: WhatsAppIcon,
- deepl: DeepLIcon,
- coingecko: CoinGeckoIcon,
- discord: DiscordIcon,
- slack: SlackIcon,
- notion: NotionIcon,
- soundcloud: SoundCloudIcon,
- veo: GeminiIcon,
-}
+export { useIconResolver, type ProviderIconComponent } from './provider-icons'
diff --git a/apps/platform/src/features/flow-editor/icons/productivity-icons.tsx b/apps/platform/src/features/flow-editor/icons/productivity-icons.tsx
deleted file mode 100644
index 61a9074..0000000
--- a/apps/platform/src/features/flow-editor/icons/productivity-icons.tsx
+++ /dev/null
@@ -1,313 +0,0 @@
-// Productivity & Service Icons
-
-const GmailIcon = (props) => (
-
-)
-
-const OutlookIcon = (props) => (
-
-)
-
-const GoogleDriveIcon = (props) => (
-
-)
-
-const GoogleSheetsIcon = (props) => (
-
-)
-
-const GoogleDocsIcon = (props) => (
-
-)
-
-const NotionIcon = (props) => (
-
-)
-
-const DeepLIcon = (props) => (
-
-)
-
-const CoinGeckoIcon = (props) => (
-
-)
-
-export {
- GmailIcon,
- OutlookIcon,
- GoogleDriveIcon,
- GoogleSheetsIcon,
- GoogleDocsIcon,
- NotionIcon,
- DeepLIcon,
- CoinGeckoIcon,
-}
diff --git a/apps/platform/src/features/flow-editor/icons/provider-icons.tsx b/apps/platform/src/features/flow-editor/icons/provider-icons.tsx
new file mode 100644
index 0000000..05f86f8
--- /dev/null
+++ b/apps/platform/src/features/flow-editor/icons/provider-icons.tsx
@@ -0,0 +1,119 @@
+import { useCallback } from 'react'
+import type { ReactNode } from 'react'
+
+import type { IconSource } from '@/features/flow-editor/types'
+import { cn } from '@/lib/utils'
+import { useThemeStore } from '@/stores/theme-store'
+
+const brandSource = (brand: string, mode: 'light' | 'dark') =>
+ `/assets/icons/brands/${brand}/${mode}.svg`
+const glyphSource = (glyph: string) => `/assets/icons/glyphs/${glyph}.svg`
+
+type IconProps = {
+ className?: string
+}
+
+export type ProviderIconComponent = (props: IconProps) => ReactNode
+
+const builtIcons = new Map()
+
+const artwork = (source: string, className?: string) => (
+ 
+)
+
+const badge = (glyph: string) => (
+
+
+
+)
+
+const buildIcon = (
+ icon: { brand?: string; glyph?: string },
+ mode: 'light' | 'dark',
+): ProviderIconComponent | undefined => {
+ if (icon.brand && icon.glyph) {
+ return ({ className }: IconProps) => (
+
+ {artwork(brandSource(icon.brand!, mode), 'size-[70%]')}
+ {badge(icon.glyph!)}
+
+ )
+ }
+
+ if (icon.brand) {
+ return ({ className }: IconProps) =>
+ artwork(
+ brandSource(icon.brand!, mode),
+ cn('inline-block shrink-0', className),
+ )
+ }
+
+ if (icon.glyph) {
+ return ({ className }: IconProps) => (
+
+ )
+ }
+
+ return undefined
+}
+
+export const useIconResolver = () => {
+ const mode = useThemeStore((state) => state.getMode())
+
+ return useCallback(
+ (icon: IconSource) => {
+ if (!icon) {
+ return undefined
+ }
+
+ const key = `${mode}:${icon.brand ?? ''}:${icon.glyph ?? ''}`
+ const existing = builtIcons.get(key)
+ if (existing) {
+ return existing
+ }
+
+ const built = buildIcon(icon, mode)
+ if (built) {
+ builtIcons.set(key, built)
+ }
+
+ return built
+ },
+ [mode],
+ )
+}
diff --git a/apps/platform/src/features/flow-editor/icons/social-icons.tsx b/apps/platform/src/features/flow-editor/icons/social-icons.tsx
deleted file mode 100644
index 4d8a400..0000000
--- a/apps/platform/src/features/flow-editor/icons/social-icons.tsx
+++ /dev/null
@@ -1,322 +0,0 @@
-// Social Media Icons
-
-const XIcon = (props) => (
-
-)
-
-const InstagramIcon = (props) => (
-
-)
-
-const TiktokIcon = (props) => (
-
-)
-
-const FacebookIcon = (props) => (
-
-)
-
-const LinkedinIcon = (props) => (
-
-)
-
-const YouTubeIcon = (props) => (
-
-)
-
-const DiscordIcon = (props) => (
-
-)
-
-const SlackIcon = (props) => (
-
-)
-
-const WhatsAppIcon = (props) => (
-
-)
-
-const TelegramIcon = (props) => (
-
-)
-
-export {
- XIcon,
- InstagramIcon,
- TiktokIcon,
- FacebookIcon,
- LinkedinIcon,
- YouTubeIcon,
- DiscordIcon,
- SlackIcon,
- WhatsAppIcon,
- TelegramIcon,
-}
diff --git a/apps/platform/src/features/flow-editor/nodes/annotation.tsx b/apps/platform/src/features/flow-editor/nodes/annotation.tsx
index d5393a3..ddc4899 100644
--- a/apps/platform/src/features/flow-editor/nodes/annotation.tsx
+++ b/apps/platform/src/features/flow-editor/nodes/annotation.tsx
@@ -1,15 +1,18 @@
-import { useState, useRef, useEffect } from 'react'
+import { useState, useRef, useEffect, useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import {
AnnotationNode,
AnnotationNodeContent,
} from '@/features/flow-editor/nodes/annotation-node'
+import { useFlowSetNodes } from '@/features/flow-editor/contexts/flow-nodes-context'
-const Annotation = () => {
+const Annotation = ({ id, data }) => {
const { t } = useTranslation()
- const [content, setContent] = useState(t('ui.text.annotationPlaceholder'))
+ const setNodes = useFlowSetNodes()
const [isEditing, setIsEditing] = useState(false)
- const inputRef = useRef(null)
+ const inputRef = useRef(null)
+
+ const note = data?.note ?? ''
useEffect(() => {
if (isEditing && inputRef.current) {
@@ -17,20 +20,19 @@ const Annotation = () => {
}
}, [isEditing])
- const handleContentClick = () => {
- setIsEditing(true)
- }
-
- const handleInputChange = (e: React.ChangeEvent) => {
- setContent(e.target.value)
- }
-
- const handleInputBlur = () => {
- setIsEditing(false)
- }
+ const updateNote = useCallback(
+ (value: string) => {
+ setNodes((nodes) =>
+ nodes.map((n) =>
+ n.id === id ? { ...n, data: { ...n.data, note: value } } : n,
+ ),
+ )
+ },
+ [id, setNodes],
+ )
- const handleInputKeyDown = (e: React.KeyboardEvent) => {
- if (e.key === 'Enter') {
+ const handleInputKeyDown = (e: React.KeyboardEvent) => {
+ if (e.key === 'Escape') {
setIsEditing(false)
}
}
@@ -38,29 +40,22 @@ const Annotation = () => {
return (
setIsEditing(true)}
+ className="w-full cursor-text"
>
{isEditing ? (