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

… Editor Extension for VSCode (macOS) (#2883)
apache · Jan 31, 2025 · 721f4e9 · 721f4e9
1 parent 4670c08
commit 721f4e9
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 11 deletions.
diff --git a/packages/boxed-expression-component/src/expressionVariable/ExpressionVariableMenu.tsx b/packages/boxed-expression-component/src/expressionVariable/ExpressionVariableMenu.tsx
@@ -28,6 +28,7 @@ import { Button } from "@patternfly/react-core/dist/js/components/Button";
 import { NavigationKeysUtils } from "../keysUtils/keyUtils";
 import { PopoverPosition } from "@patternfly/react-core/dist/js/components/Popover";
 import "./ExpressionVariableMenu.css";
+import { getOperatingSystem, OperatingSystem } from "@kie-tools-core/operating-system";
 
 export type OnExpressionVariableUpdated = (args: { name: string; typeRef: string | undefined }) => void;
 
@@ -135,7 +136,11 @@ export function ExpressionVariableMenu({
 
   const onKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
-      e.stopPropagation();
+      // In macOS, we can not stopPropagation here because, otherwise, shortcuts are not handled
+      // See https://github.com/apache/incubator-kie-issues/issues/1164
+      if (!(getOperatingSystem() === OperatingSystem.MACOS && e.metaKey)) {
+        e.stopPropagation();
+      }
 
       if (NavigationKeysUtils.isEnter(e.key)) {
         saveExpression();

diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.tsx b/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";
@@ -112,6 +113,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(() => {
@@ -326,6 +329,12 @@ export function BeeTableInternal<R extends object>({
 
   const onKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
+      // This prevents keyboard events, specially shortcuts, from being handled here because if a cell is being edited,
+      // we want that the shortcuts to be handled by the cell.
+      if (selectionStart?.isEditing || selectionEnd?.isEditing) {
+        return;
+      }
+
       if (!enableKeyboardNavigation) {
         return;
       }
@@ -505,20 +514,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,
     ]
   );
 

diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTableEditableCellContent.tsx b/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,9 @@ 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) {
+      // NOTE: In macOS, we can not stopPropagation here because, otherwise, shortcuts are not handled
+      // See https://github.com/apache/incubator-kie-issues/issues/1164
+      if (isEditing && !(getOperatingSystem() === OperatingSystem.MACOS && e.metaKey)) {
         e.stopPropagation();
       }
 

diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTableThResizable.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTableThResizable.tsx
@@ -206,7 +206,15 @@ export function BeeTableThResizable<R extends object>({
       shouldShowColumnsInlineControls={shouldShowColumnsInlineControls}
       column={column}
     >
-      <div className="header-cell" data-ouia-component-type="expression-column-header" ref={headerCellRef}>
+      <div
+        className="header-cell"
+        data-ouia-component-type="expression-column-header"
+        ref={headerCellRef}
+        // We stop propagation here because if the user performs a double click on any component inside
+        // the ExpressionVariableMenu (for example, to select a word) we don't want that action to bubble
+        // to the parent component (BeeTableTh).
+        onDoubleClick={(e) => e.stopPropagation()}
+      >
         {!isReadOnly && column.dataType && isEditableHeader ? (
           <ExpressionVariableMenu
             position={PopoverPosition.bottom}

diff --git a/packages/dmn-editor/src/diagram/nodes/EditableNodeLabel.tsx b/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,11 @@ export function EditableNodeLabel({
   // Finish editing on `Enter` pressed.
   const onKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
-      e.stopPropagation();
+      // In macOS, we can not stopPropagation here because, otherwise, shortcuts are not handled
+      // See https://github.com/apache/incubator-kie-issues/issues/1164
+      if (!(getOperatingSystem() === OperatingSystem.MACOS && e.metaKey)) {
+        e.stopPropagation();
+      }
 
       if (e.key === "Enter") {
         if (!isValid) {

diff --git a/packages/dmn-editor/src/feel/InlineFeelNameInput.tsx b/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,11 @@ export function InlineFeelNameInput({
       }}
       onKeyDown={(e) => {
         onKeyDown?.(e);
-        e.stopPropagation();
+        // In macOS, we can not stopPropagation here because, otherwise, shortcuts are not handled
+        // See https://github.com/apache/incubator-kie-issues/issues/1164
+        if (!(getOperatingSystem() === OperatingSystem.MACOS && e.metaKey)) {
+          e.stopPropagation();
+        }
 
         if (e.key === "Enter") {
           e.preventDefault();

diff --git a/packages/dmn-editor/src/propertiesPanel/BeePropertiesPanel.tsx b/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,14 @@ 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) => {
+            // In macOS, we can not stopPropagation here because, otherwise, shortcuts are not handled
+            // See https://github.com/apache/incubator-kie-issues/issues/1164
+            if (!(getOperatingSystem() === OperatingSystem.MACOS && e.metaKey)) {
+              // Prevent ReactFlow KeyboardShortcuts from triggering when editing stuff on Properties Panel
+              e.stopPropagation();
+            }
+          }}
         >
           <DrawerHead>
             {shouldDisplayDecisionOrBkmProps && <SingleNodeProperties nodeId={node.id} />}

diff --git a/packages/dmn-editor/src/propertiesPanel/BoxedExpressionPropertiesPanel.tsx b/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,14 @@ 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) => {
+            // In macOS, we can not stopPropagation here because, otherwise, shortcuts are not handled
+            // See https://github.com/apache/incubator-kie-issues/issues/1164
+            if (!(getOperatingSystem() === OperatingSystem.MACOS && e.metaKey)) {
+              // Prevent ReactFlow KeyboardShortcuts from triggering when editing stuff on Properties Panel
+              e.stopPropagation();
+            }
+          }}
         >
           <DrawerHead>
             {shouldDisplayDecisionOrBkmProps && <SingleNodeProperties nodeId={node.id} />}

diff --git a/packages/dmn-editor/src/propertiesPanel/DiagramPropertiesPanel.tsx b/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,14 @@ 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) => {
+        // In macOS, we can not stopPropagation here because, otherwise, shortcuts are not handled
+        // See https://github.com/apache/incubator-kie-issues/issues/1164
+        if (!(getOperatingSystem() === OperatingSystem.MACOS && e.metaKey)) {
+          // Prevent ReactFlow KeyboardShortcuts from triggering when editing stuff on Properties Panel
+          e.stopPropagation();
+        }
+      }}
     >
       <DrawerHead>
         {selectedNodesById.size <= 0 && <GlobalDiagramProperties />}