Add option to disable shortcuts

src/Components/Editor/Shortcuts.ts

@@ -1,5 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
 import { IHistoryState } from '../../Interfaces/IHistoryState';
+import { ENABLE_SHORTCUTS } from '../../utils/default';
 
 export function onKeyDown(
   event: KeyboardEvent,
@@ -7,6 +8,10 @@ export function onKeyDown(
   historyCurrentStep: number,
   setHistoryCurrentStep: Dispatch<SetStateAction<number>>
 ): void {
+  if (!ENABLE_SHORTCUTS) {
+    return;
+  }
+
   event.preventDefault();
   if (event.isComposing || event.keyCode === 229) {
     return;

src/Components/SVG/Elements/Container.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Interweave, Node } from 'interweave';
 import { XPositionReference } from '../../../Enums/XPositionReference';
 import { IContainerModel } from '../../../Interfaces/IContainerModel';
-import { DIMENSION_MARGIN, SHOW_CHILDREN_DIMENSIONS, SHOW_PARENT_DIMENSION } from '../../../utils/default';
+import { DIMENSION_MARGIN, SHOW_CHILDREN_DIMENSIONS, SHOW_PARENT_DIMENSION, SHOW_TEXT } from '../../../utils/default';
 import { getDepth } from '../../../utils/itertools';
 import { Dimension } from './Dimension';
 import IProperties from '../../../Interfaces/IProperties';
@@ -93,12 +93,14 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
       }
       { dimensionChildren }
       { svg }
-      <text
-        x={xText}
-        y={yText}
-      >
-        {props.model.properties.id}
-      </text>
+      { SHOW_TEXT
+        ? <text
+          x={xText}
+          y={yText}
+        >
+          {props.model.properties.id}
+        </text>
+        : null }
       { containersElements }
     </g>
   );

src/Components/SVG/Elements/DepthDimensionLayer.tsx

@@ -78,6 +78,7 @@ function AddNewDimension(currentDepth: number, min: number, max: number, lastY:
 
   dimensions.push(
     <Dimension
+      key={id}
       id={id}
       xStart={xStart}
       yStart={y}

src/Components/SVG/Elements/DimensionLayer.tsx

@@ -22,6 +22,7 @@ const getDimensionsNodes = (root: ContainerModel): React.ReactNode[] => {
     const text = width.toString();
     dimensions.push(
       <Dimension
+        key={id}
         id={id}
         xStart={xStart}
         yStart={y}

src/utils/default.ts

@@ -4,6 +4,10 @@ import { IConfiguration } from '../Interfaces/IConfiguration';
 import { IContainerModel } from '../Interfaces/IContainerModel';
 import IProperties from '../Interfaces/IProperties';
 
+/// CONTAINRE DEFAULTS ///
+
+export const SHOW_TEXT = true;
+
 /// DIMENSIONS DEFAULTS ///
 
 export const SHOW_PARENT_DIMENSION = true;
@@ -14,6 +18,7 @@ export const NOTCHES_LENGTH = 4;
 
 /// EDITOR DEFAULTS ///
 
+export const ENABLE_SHORTCUTS = true;
 export const MAX_HISTORY = 200;
 
 export const DEFAULT_CONFIG: IConfiguration = {