diff --git a/src/common/components/inline-edit/hooks/use-submit-cancel-hook.ts b/src/common/components/inline-edit/hooks/use-submit-cancel-hook.ts index ac7d98ec..c3d4fc2f 100644 --- a/src/common/components/inline-edit/hooks/use-submit-cancel-hook.ts +++ b/src/common/components/inline-edit/hooks/use-submit-cancel-hook.ts @@ -1,4 +1,5 @@ import { EditType } from '@/core/model'; +import { useCanvasContext } from '@/core/providers'; import { useEffect, useRef, useState } from 'react'; interface Configuration { @@ -18,6 +19,7 @@ export const useSubmitCancelHook = ( const divRef = useRef(null); const [isEditing, setIsEditing] = useState(false); + const { setIsInlineEditing } = useCanvasContext(); const getActiveInputRef = (): | HTMLInputElement @@ -45,6 +47,7 @@ export const useSubmitCancelHook = ( !getActiveInputRef()?.contains(event.target as Node) ) { setIsEditing(false); + setIsInlineEditing(false); if (editType === 'input' || editType === 'textarea') { const inputRef = getActiveInputRef() as any; onTextSubmit(inputRef?.value || ''); @@ -55,11 +58,13 @@ export const useSubmitCancelHook = ( const handleKeyDown = (event: KeyboardEvent) => { if (isEditing && event.key === 'Escape') { setIsEditing(false); + setIsInlineEditing(false); setEditText(text); } if (editType === 'input' && isEditable && event.key === 'Enter') { setIsEditing(false); + setIsInlineEditing(false); if (editType === 'input' || editType === 'textarea') { const inputRef = getActiveInputRef() as any; onTextSubmit(inputRef?.value || ''); diff --git a/src/common/components/inline-edit/inline-edit.tsx b/src/common/components/inline-edit/inline-edit.tsx index 945483ec..23ec25d1 100644 --- a/src/common/components/inline-edit/inline-edit.tsx +++ b/src/common/components/inline-edit/inline-edit.tsx @@ -3,6 +3,7 @@ import { Group } from 'react-konva'; import { Coord, EditType, Size } from '@/core/model'; import { HtmlEditWidget } from './components'; import { useSubmitCancelHook, usePositionHook } from './hooks'; +import { useCanvasContext } from '@/core/providers'; interface Props { coords: Coord; @@ -30,6 +31,7 @@ export const EditableComponent: React.FC = props => { } = props; const [editText, setEditText] = useState(text); const isInputInitiallyFocused = useRef(false); + const { setIsInlineEditing } = useCanvasContext(); const { inputRef, textAreaRef, divRef, isEditing, setIsEditing } = useSubmitCancelHook( @@ -45,6 +47,7 @@ export const EditableComponent: React.FC = props => { const handleDoubleClick = () => { if (isEditable) { setIsEditing(true); + setIsInlineEditing(true); } }; @@ -90,6 +93,7 @@ export const EditableComponent: React.FC = props => { const handleImageSrcSubmit = (src: string) => { onImageSrcSubmit(src); setIsEditing(false); + setIsInlineEditing(false); }; return ( diff --git a/src/core/providers/canvas/canvas.model.ts b/src/core/providers/canvas/canvas.model.ts index 5310607c..844ab71d 100644 --- a/src/core/providers/canvas/canvas.model.ts +++ b/src/core/providers/canvas/canvas.model.ts @@ -67,6 +67,8 @@ export interface CanvasContextModel { copyShapeToClipboard: () => void; pasteShapeFromClipboard: () => void; loadDocument: (document: DocumentModel) => void; + isInlineEditing: boolean; + setIsInlineEditing: React.Dispatch>; } export interface DocumentModel { diff --git a/src/core/providers/canvas/canvas.provider.tsx b/src/core/providers/canvas/canvas.provider.tsx index 688512c5..5e553335 100644 --- a/src/core/providers/canvas/canvas.provider.tsx +++ b/src/core/providers/canvas/canvas.provider.tsx @@ -20,6 +20,7 @@ export const CanvasProvider: React.FC = props => { const [scale, setScale] = React.useState(1); const stageRef = React.useRef(null); + const [isInlineEditing, setIsInlineEditing] = React.useState(false); const { addSnapshot, @@ -181,6 +182,8 @@ export const CanvasProvider: React.FC = props => { stageRef, deleteSelectedShapes, loadDocument, + isInlineEditing, + setIsInlineEditing, }} > {children} diff --git a/src/pods/canvas/canvas.pod.tsx b/src/pods/canvas/canvas.pod.tsx index 11fb0008..96b2379d 100644 --- a/src/pods/canvas/canvas.pod.tsx +++ b/src/pods/canvas/canvas.pod.tsx @@ -101,8 +101,6 @@ export const CanvasPod = () => { updateShapePosition(id, { x, y }); }; - // TODO: Temporary disabled, conflicts with inline edition - // and likely keboard shortcuts useKeyboardDisplacement(); { diff --git a/src/pods/canvas/use-keyboard-displacement.tsx b/src/pods/canvas/use-keyboard-displacement.tsx index 70bdcbd9..6767f9dd 100644 --- a/src/pods/canvas/use-keyboard-displacement.tsx +++ b/src/pods/canvas/use-keyboard-displacement.tsx @@ -3,7 +3,8 @@ import { useCanvasContext } from '@/core/providers'; import { Coord } from '@/core/model'; export const useKeyboardDisplacement = () => { - const { selectionInfo, updateShapePosition } = useCanvasContext(); + const { selectionInfo, updateShapePosition, isInlineEditing } = + useCanvasContext(); // TODO: move this to business/utils const updateShapeCollectionPosition = ( @@ -25,24 +26,9 @@ export const useKeyboardDisplacement = () => { }); }; - const isKeyboardKey = (key: string) => { - return ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key); - }; - useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { - // Keydown keys can conflict when we are performing inlne edtiion - // input and textarea will use the cursosr and stage keyboard should not - // the bubble order is Stage >> Input, so we cannot stop propagation - // BUT - // We have added a data attribute to the input and textarea to check - // if the inline edition is on - // here we check if the event target has the data attribute - // then we return and let the input and textare control it - const isInlineEditing = - (event.target as any)?.attributes['data-is-inline-edition-on'] !== - undefined; - if (isInlineEditing || !isKeyboardKey(event.key)) { + if (isInlineEditing) { return; } diff --git a/src/pods/toolbar/shortcut/shortcut.const.ts b/src/pods/toolbar/shortcut/shortcut.const.ts index 0483bcca..0d901ad7 100644 --- a/src/pods/toolbar/shortcut/shortcut.const.ts +++ b/src/pods/toolbar/shortcut/shortcut.const.ts @@ -8,8 +8,8 @@ export const SHORTCUTS: Shortcut = { delete: { description: 'Delete', id: 'delete-button-shortcut', - targetKey: ['Ctrl+backspace', 'Meta+backspace'], - targetKeyLabel: 'Ctrl + Backspace', + targetKey: ['backspace', 'delete'], + targetKeyLabel: 'Backspace', }, copy: { description: 'Copy', diff --git a/src/pods/toolbar/shortcut/shortcut.hook.tsx b/src/pods/toolbar/shortcut/shortcut.hook.tsx index 9069b142..aa0698fa 100644 --- a/src/pods/toolbar/shortcut/shortcut.hook.tsx +++ b/src/pods/toolbar/shortcut/shortcut.hook.tsx @@ -1,4 +1,5 @@ import { isMacOS } from '@/common/helpers/platform.helpers'; +import { useCanvasContext } from '@/core/providers'; import { useEffect } from 'react'; export interface ShortcutHookProps { @@ -7,7 +8,11 @@ export interface ShortcutHookProps { } export const useShortcut = ({ targetKey, callback }: ShortcutHookProps) => { + const { isInlineEditing } = useCanvasContext(); const handleKeyPress = (event: KeyboardEvent) => { + if (isInlineEditing) { + return; + } // TODO: later on this needs discussio about shortcut keys // Right now enable CTRL+C, CTRL+V for windows, linux and mac //const isAltKeyPressed = event.getModifierState('Alt');