Merge pull request #389 from Lemoncode/feature/#385-context-isInlneEd…

…iting-flag

#385 promoted isInlineEditing to provider

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<HTMLDivElement>(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 || '');

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 => {
   } = 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> = props => {
   const handleDoubleClick = () => {
     if (isEditable) {
       setIsEditing(true);
+      setIsInlineEditing(true);
     }
   };
 
@@ -90,6 +93,7 @@ export const EditableComponent: React.FC<Props> = props => {
   const handleImageSrcSubmit = (src: string) => {
     onImageSrcSubmit(src);
     setIsEditing(false);
+    setIsInlineEditing(false);
   };
 
   return (

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<React.SetStateAction<boolean>>;
 }
 
 export interface DocumentModel {

src/core/providers/canvas/canvas.provider.tsx

@@ -20,6 +20,7 @@ export const CanvasProvider: React.FC<Props> = props => {
 
   const [scale, setScale] = React.useState(1);
   const stageRef = React.useRef<Konva.Stage>(null);
+  const [isInlineEditing, setIsInlineEditing] = React.useState(false);
 
   const {
     addSnapshot,
@@ -181,6 +182,8 @@ export const CanvasProvider: React.FC<Props> = props => {
         stageRef,
         deleteSelectedShapes,
         loadDocument,
+        isInlineEditing,
+        setIsInlineEditing,
       }}
     >
       {children}

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();
 
   {

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;
       }
 

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',

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');