diff --git a/apps/web/src/components/editor/editor-canvas.tsx b/apps/web/src/components/editor/editor-canvas.tsx index 3ffaa8a1..1b893bc9 100644 --- a/apps/web/src/components/editor/editor-canvas.tsx +++ b/apps/web/src/components/editor/editor-canvas.tsx @@ -30,6 +30,7 @@ import { useFillTool } from "./tools/fill-tool"; import { useGradientTool } from "./tools/gradient-tool"; import { MoveToolTransformer, useMoveTool } from "./tools/move-tool"; import { useShapeTool } from "./tools/shape-tool"; +import { useTextTool } from "./tools/text-tool"; // Module-level stage ref for export dialog access (Issue #6) export const editorStageRefHolder: { current: Konva.Stage | null } = { @@ -390,6 +391,7 @@ function useActiveToolHandlers(stageRef: React.RefObject) { const brushTool = useBrushTool(); const eraserTool = useEraserTool(); const shapeTool = useShapeTool(); + const textTool = useTextTool(); const fillTool = useFillTool(stageRef); const gradientTool = useGradientTool(); const moveTool = useMoveTool(); @@ -412,12 +414,13 @@ function useActiveToolHandlers(stageRef: React.RefObject) { "shape-arrow": shapeTool, "shape-polygon": shapeTool, "shape-star": shapeTool, + text: textTool, fill: fillTool, gradient: gradientTool, }; return toolMap[activeTool] ?? null; - }, [activeTool, brushTool, eraserTool, shapeTool, fillTool, gradientTool]); + }, [activeTool, brushTool, eraserTool, shapeTool, textTool, fillTool, gradientTool]); return { handlers, moveTool }; } diff --git a/apps/web/src/components/editor/tools/text-tool.tsx b/apps/web/src/components/editor/tools/text-tool.tsx new file mode 100644 index 00000000..72e1f2c8 --- /dev/null +++ b/apps/web/src/components/editor/tools/text-tool.tsx @@ -0,0 +1,183 @@ +// apps/web/src/components/editor/tools/text-tool.tsx + +import type Konva from "konva"; +import { useCallback, useEffect, useRef } from "react"; +import { generateId } from "@/lib/utils"; +import { useEditorStore } from "@/stores/editor-store"; +import type { CanvasObject, TextAttrs } from "@/types/editor"; + +/** + * Text tool hook. Clicking the canvas with the text tool active creates a + * temporary