kie-issues#1164: Cut/Copy/Paste Functionality Issues in DRD View: DMN…

… Editor Extension for VSCode (macOS)

packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx

@@ -38,6 +38,7 @@ import {
   BeeTableSelectionContextProvider,
   SELECTION_MIN_ACTIVE_DEPTH,
   SelectionPart,
+  useBeeTableSelection,
   useBeeTableSelectionDispatch,
 } from "../../selection/BeeTableSelectionContext";
 import { BeeTableCellWidthsToFitDataContextProvider } from "../../resizing/BeeTableCellWidthToFitDataContext";
@@ -111,6 +112,8 @@ export function BeeTableInternal<R extends object>({
   const tableComposableRef = useRef<HTMLTableElement>(null);
   const { currentlyOpenContextMenu } = useBoxedExpressionEditor();
 
+  const { selectionStart, selectionEnd } = useBeeTableSelection();
+
   const tableRef = React.useRef<HTMLDivElement>(null);
 
   const hasAdditionalRow = useMemo(() => {
@@ -325,6 +328,10 @@ export function BeeTableInternal<R extends object>({
 
   const onKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
+      if (selectionStart?.isEditing || selectionEnd?.isEditing) {
+        return;
+      }
+
       if (!enableKeyboardNavigation) {
         return;
       }
@@ -504,20 +511,22 @@ export function BeeTableInternal<R extends object>({
       }
     },
     [
+      selectionStart?.isEditing,
+      selectionEnd?.isEditing,
       enableKeyboardNavigation,
       currentlyOpenContextMenu,
+      isReadOnly,
       setCurrentDepth,
       mutateSelection,
+      getColumnCount,
       rowCount,
-      reactTableInstance.allColumns.length,
       reactTableInstance.rows.length,
-      getColumnCount,
+      reactTableInstance.allColumns.length,
       erase,
       resetSelectionAt,
       copy,
       cut,
       paste,
-      isReadOnly,
     ]
   );
 

packages/boxed-expression-component/src/table/BeeTable/BeeTableEditableCellContent.tsx

@@ -24,6 +24,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { NavigationKeysUtils } from "../../keysUtils/keyUtils";
 import { useBoxedExpressionEditor } from "../../BoxedExpressionEditorContext";
 import "./BeeTableEditableCellContent.css";
+import { getOperatingSystem, OperatingSystem } from "@kie-tools-core/operating-system";
 
 const CELL_LINE_HEIGHT = 20;
 
@@ -183,7 +184,7 @@ export function BeeTableEditableCellContent({
     (e) => {
       // When inside FEEL Input, all keyboard events should be kept inside it.
       // Exceptions to this strategy are handled on `onFeelKeyDown`.
-      if (isEditing) {
+      if (isEditing && !(getOperatingSystem() === OperatingSystem.MACOS && e.metaKey)) {
         e.stopPropagation();
       }
 

packages/boxed-expression-component/src/table/BeeTable/BeeTableTh.tsx

@@ -29,6 +29,7 @@ import {
 } from "../../selection/BeeTableSelectionContext";
 import { useBoxedExpressionEditor } from "../../BoxedExpressionEditorContext";
 import { InsertRowColumnsDirection } from "../../api";
+import { getOperatingSystem, OperatingSystem } from "@kie-tools-core/operating-system";
 
 export interface BeeTableThProps<R extends object> {
   groupType: string | undefined;
@@ -85,7 +86,9 @@ export function BeeTableTh<R extends object>({
 
   const onAddColumnButtonClick = useCallback(
     (e: React.MouseEvent) => {
-      e.stopPropagation();
+      if (!(getOperatingSystem() === OperatingSystem.MACOS && e.metaKey)) {
+        e.stopPropagation();
+      }
 
       if (!hoverInfo.isHovered) {
         return;

packages/dmn-editor/src/diagram/nodes/EditableNodeLabel.tsx

@@ -36,6 +36,7 @@ import { NodeLabelPosition } from "./NodeSvgs";
 import { State } from "../../store/Store";
 import "./EditableNodeLabel.css";
 import { useSettings } from "../../settings/DmnEditorSettingsContext";
+import { getOperatingSystem, OperatingSystem } from "@kie-tools-core/operating-system";
 
 export type OnEditableNodeLabelChange = (value: string | undefined) => void;
 
@@ -161,7 +162,9 @@ export function EditableNodeLabel({
   // Finish editing on `Enter` pressed.
   const onKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
-      e.stopPropagation();
+      if (!(getOperatingSystem() === OperatingSystem.MACOS && e.metaKey)) {
+        e.stopPropagation();
+      }
 
       if (e.key === "Enter") {
         if (!isValid) {

packages/dmn-editor/src/feel/InlineFeelNameInput.tsx

@@ -23,6 +23,7 @@ import { DMN15_SPEC, UniqueNameIndex } from "@kie-tools/dmn-marshaller/dist/sche
 import { useFocusableElement } from "../focus/useFocusableElement";
 import { State } from "../store/Store";
 import { useDmnEditorStoreApi } from "../store/StoreContext";
+import { getOperatingSystem, OperatingSystem } from "@kie-tools-core/operating-system";
 
 export type OnInlineFeelNameRenamed = (newName: string) => void;
 
@@ -127,7 +128,9 @@ export function InlineFeelNameInput({
       }}
       onKeyDown={(e) => {
         onKeyDown?.(e);
-        e.stopPropagation();
+        if (!(getOperatingSystem() === OperatingSystem.MACOS && e.metaKey)) {
+          e.stopPropagation();
+        }
 
         if (e.key === "Enter") {
           e.preventDefault();

packages/dmn-editor/src/propertiesPanel/BeePropertiesPanel.tsx

@@ -29,6 +29,7 @@ import { useDmnEditorStore, useDmnEditorStoreApi } from "../store/StoreContext";
 import { useMemo } from "react";
 import { SingleNodeProperties } from "./SingleNodeProperties";
 import { useExternalModels } from "../includedModels/DmnEditorDependenciesContext";
+import { getOperatingSystem, OperatingSystem } from "@kie-tools-core/operating-system";
 
 export function BeePropertiesPanel() {
   const dmnEditorStoreApi = useDmnEditorStoreApi();
@@ -55,7 +56,11 @@ export function BeePropertiesPanel() {
           isResizable={true}
           minSize={"300px"}
           defaultSize={"500px"}
-          onKeyDown={(e) => e.stopPropagation()} // Prevent ReactFlow KeyboardShortcuts from triggering when editing stuff on Properties Panel
+          onKeyDown={(e) => {
+            if (!(getOperatingSystem() === OperatingSystem.MACOS && e.metaKey)) {
+              e.stopPropagation();
+            }
+          }}
         >
           <DrawerHead>
             {shouldDisplayDecisionOrBkmProps && <SingleNodeProperties nodeId={node.id} />}

packages/dmn-editor/src/propertiesPanel/BoxedExpressionPropertiesPanel.tsx

@@ -53,6 +53,7 @@ import { useExternalModels } from "../includedModels/DmnEditorDependenciesContex
 import { drgElementToBoxedExpression } from "../boxedExpressions/BoxedExpressionScreen";
 import { IteratorVariableCell } from "./BoxedExpressionPropertiesPanelComponents/IteratorVariableCell";
 import { useSettings } from "../settings/DmnEditorSettingsContext";
+import { getOperatingSystem, OperatingSystem } from "@kie-tools-core/operating-system";
 
 export function BoxedExpressionPropertiesPanel() {
   const dmnEditorStoreApi = useDmnEditorStoreApi();
@@ -109,7 +110,11 @@ export function BoxedExpressionPropertiesPanel() {
           isResizable={true}
           minSize={"300px"}
           defaultSize={"500px"}
-          onKeyDown={(e) => e.stopPropagation()} // Prevent ReactFlow KeyboardShortcuts from triggering when editing stuff on Properties Panel
+          onKeyDown={(e) => {
+            if (!(getOperatingSystem() === OperatingSystem.MACOS && e.metaKey)) {
+              e.stopPropagation();
+            }
+          }}
         >
           <DrawerHead>
             {shouldDisplayDecisionOrBkmProps && <SingleNodeProperties nodeId={node.id} />}

packages/dmn-editor/src/propertiesPanel/DiagramPropertiesPanel.tsx

@@ -26,6 +26,7 @@ import { MultipleNodeProperties } from "./MultipleNodeProperties";
 import { useDmnEditorStore } from "../store/StoreContext";
 import { useExternalModels } from "../includedModels/DmnEditorDependenciesContext";
 import "./DiagramPropertiesPanel.css";
+import { getOperatingSystem, OperatingSystem } from "@kie-tools-core/operating-system";
 
 export function DiagramPropertiesPanel() {
   const { externalModelsByNamespace } = useExternalModels();
@@ -39,7 +40,11 @@ export function DiagramPropertiesPanel() {
       isResizable={true}
       minSize={"300px"}
       defaultSize={"500px"}
-      onKeyDown={(e) => e.stopPropagation()} // Prevent ReactFlow KeyboardShortcuts from triggering when editing stuff on Properties Panel
+      onKeyDown={(e) => {
+        if (!(getOperatingSystem() === OperatingSystem.MACOS && e.metaKey)) {
+          e.stopPropagation();
+        }
+      }}
     >
       <DrawerHead>
         {selectedNodesById.size <= 0 && <GlobalDiagramProperties />}