diff --git a/.gitignore b/.gitignore index 2971a0b..9d2d395 100644 --- a/.gitignore +++ b/.gitignore @@ -40,3 +40,4 @@ yarn-error.log* # typescript *.tsbuildinfo +.idea \ No newline at end of file diff --git a/src/components/canvas.tsx b/src/components/canvas.tsx index 605c4c5..769446b 100644 --- a/src/components/canvas.tsx +++ b/src/components/canvas.tsx @@ -145,6 +145,8 @@ const Canvas = () => { if (item.type === StageItemType.Text) { return ( selectItem(item.id)} isSelected={item.id === selectedItemId} onChange={(newAttrs) => { diff --git a/src/components/editable-resizable-text.tsx b/src/components/editable-resizable-text.tsx deleted file mode 100644 index 215726c..0000000 --- a/src/components/editable-resizable-text.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import React from "react"; - -import { EditableTextInput } from "./EditableText"; -import TransformableText from "@/components/transformable-text"; -import { ResizableText } from "@/components/text"; - -const RETURN_KEY = 13; -const ESCAPE_KEY = 27; - -export function EditableText({ - x, - y, - isEditing, - isTransforming, - onToggleEdit, - onToggleTransform, - onChange, - onResize, - text, - width, - height, -}: any) { - function handleEscapeKeys(e: any) { - if ((e.keyCode === RETURN_KEY && !e.shiftKey) || e.keyCode === ESCAPE_KEY) { - onToggleEdit(e); - } - } - - function handleTextChange(e: any) { - onChange(e.currentTarget.value); - } - - if (isEditing) { - return ( - - ); - } - return ( - - ); -} diff --git a/src/components/editable-text-input.tsx b/src/components/editable-text-input.tsx new file mode 100644 index 0000000..6a5b1f0 --- /dev/null +++ b/src/components/editable-text-input.tsx @@ -0,0 +1,72 @@ +import React, { type CSSProperties } from "react"; +import { Html } from "react-konva-utils"; + +type Props = { + x: number; + fontSize: number; + fontFamily: string; + align: CSSProperties["textAlign"]; + y: number; + width: number; + height: number; + value?: string; + onChange: (e: React.ChangeEvent) => void; + onKeyDown: (e: React.KeyboardEvent) => void; +}; + +export function EditableTextInput({ + x, + y, + width, + height, + value = "", + onChange, + onKeyDown, + fontSize, + fontFamily, + align, +}: Props) { + const textAreaRef = React.useRef(null); + + React.useEffect(() => { + if (textAreaRef.current) { + textAreaRef.current.style.height = `${height + 5}px`; + textAreaRef.current.style.height = "auto"; + // after browsers resized it we can set actual value + textAreaRef.current.style.height = + textAreaRef.current.scrollHeight + 3 + "px"; + textAreaRef.current.focus(); + } + }, []); + const style: CSSProperties = { + textAlign: align, + width: `${width}px`, + height: `${height + 5}px`, + border: "none", + padding: 0, + margin: "-2px 0 0", + background: "none", + outline: "none", + resize: "none", + color: "black", + lineHeight: 1, + overflow: "hidden", + fontSize, + fontFamily, + }; + + return ( + +