feat: add workflow editor shortcuts (#3382)

[perzeuss]

Description

This PR brings shortcuts to the workflow editor as described in #3382. The following shortcuts are introduced:

Keyboard Shortcut	Function	Hint
Delete	Deletes the selected edge	Hint: This was previously the backspace key, but I found that delete is more intuitive. We should note this in the release.
Delete	Deletes the selected node
Ctrl + C	Copies the selected node
Ctrl + X	Cuts the selected node
Ctrl + V	Pastes a copied or cut node
Ctrl + Alt + D	Clones the selected node

Type of Change

• New feature (non-breaking change which adds functionality)
• This change requires a documentation update, included: Dify Document

How Has This Been Tested?

I tested it manually in the development mode with the following steps:

• Create Workflow or Chatflow
• Add a Classifier node, define two classes and change the model
• Assign two End/Answer nodes to the Classifier node
• If you added Answer node, define a random word as answer so that we can publish the flow without issues
• Select the Classifier node and press Ctrl + C
• Press Ctrl + V
  • The Node should be copied to the workflow, the name should have the number 2 at the end
  • The copied node should be selected
  • The copied node should show the plus icon for the ingoing and outgoing edges
  • The copied node should have the same classes and the same llm configured
  • The copied node should not connected to another node (no edges have beend added)
  • Press Ctrl + V again
  • Another node should be copied at the same place as the previously copied node
  • It should have a 3 at the end
  • Select the 3rd Classifier node and press Delete
  • The 3rd Classifier node should be deleted
  • Select the 2nd Classifier node and press Delete
  • The 2nd Classifier node should be deleted
  • Save the workflow, it should work without issues
• Select the Classifier node and press Ctrl + X
  • The classifier node should have been deleted, as well as the edges
  • Add a new Classifier node and connect all edges again
  • Save the workflow, it should work without issues
• Reload the page while the workflow editor is open
• Select the Clasifier node and press Delete
• Reload the workflow
• The node should still be deleted
• Add a new Classifier node and connect the edges
• Select the Classifier node and press Ctrl + Shift + D
• The Classifier node should have been duplicated
• Reload the page the workflow editor is open
• The duplicated Classifier node should still be there
• Select the duplicated node and press Delete
• Publish the workflow, it should work without issues
• Select the Classifier node
• Press Ctrl + C and Ctrl + V
• The Classifier node should have been duplicated
• Reload the page the workflow editor is open
• The duplicated Classifier node shuld still be there
• Click on the Dropdown-Button (top right) to publish the flow
• Click on the white button to restore the flow
• A preview should be opened where the duplicated Classifier node is not visible
• Restore to this version
• The duplicated Classifier node should no longer exist

Suggested Checklist:

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• I ran dev/reformat(backend) and cd web && npx lint-staged(frontend) to appease the lint gods
• optional I have made corresponding changes to the documentation
• optional I have added tests that prove my fix is effective or that my feature works
• optional New and existing unit tests pass locally with my changes

[zxhlyh]

Can you make the shortcut keys compatible between windows and mac?

[perzeuss]

Can you make the shortcut keys compatible between windows and mac?

@zxhlyh Done. Could you please test it?

[zxhlyh]

@perzeuss Thank you, everything is ok.

[perzeuss]

@zxhlyh I did some testing and found an issue with the feature. If you are in the panel, and use the shortcuts in an input, the workflow will handle the shortcuts on the nodes.