This is an automated email from the ASF dual-hosted git repository.
tiagobento pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-kie-tools.git
The following commit(s) were added to refs/heads/main by this push:
new 721f4e95009 kie-issues#1164: Cut/Copy/Paste Functionality Issues in
DRD View: DMN Editor Extension for VSCode (macOS) (#2883)
721f4e95009 is described below
commit 721f4e9500925cb1263effae094b4aae9f0f34a2
Author: Daniel José dos Santos <[email protected]>
AuthorDate: Fri Jan 31 18:06:02 2025 -0300
kie-issues#1164: Cut/Copy/Paste Functionality Issues in DRD View: DMN
Editor Extension for VSCode (macOS) (#2883)
---
.../src/expressionVariable/ExpressionVariableMenu.tsx | 7 ++++++-
.../src/table/BeeTable/BeeTable.tsx | 17 ++++++++++++++---
.../src/table/BeeTable/BeeTableEditableCellContent.tsx | 5 ++++-
.../src/table/BeeTable/BeeTableThResizable.tsx | 10 +++++++++-
.../dmn-editor/src/diagram/nodes/EditableNodeLabel.tsx | 7 ++++++-
packages/dmn-editor/src/feel/InlineFeelNameInput.tsx | 7 ++++++-
.../src/propertiesPanel/BeePropertiesPanel.tsx | 10 +++++++++-
.../propertiesPanel/BoxedExpressionPropertiesPanel.tsx | 10 +++++++++-
.../src/propertiesPanel/DiagramPropertiesPanel.tsx | 10 +++++++++-
9 files changed, 72 insertions(+), 11 deletions(-)
diff --git
a/packages/boxed-expression-component/src/expressionVariable/ExpressionVariableMenu.tsx
b/packages/boxed-expression-component/src/expressionVariable/ExpressionVariableMenu.tsx
index 03e50bfe219..cd34344daa0 100644
---
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
index 6fcadbf14f3..2ad93c85a16 100644
--- 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
index 372f2578249..092d7091ca7 100644
---
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
index b74592eddb2..0082accc363 100644
---
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
index ab4b8365f52..550fa0196e9 100644
--- 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
index 07d1fc88f43..3c5663abf9b 100644
--- 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
index 7f28ab97209..c6e1ed78a5d 100644
--- 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
index b0584882d8f..c490c0aed1b 100644
--- 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
index 66ebf6aa595..06c1a5f079c 100644
--- 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 />}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
