DYN-5745 re enable copy/paste capabilities for library searchBar (#14492)

Enzo707 · web-flow · commit 4b9f37a9918d · 2023-10-19T16:28:32.000-04:00
* feat(library): keydown events binding and copy/paste for clipboard management

* refactor(library): OnPasteFromClipboard function for clipboard management including comments
diff --git a/src/LibraryViewExtensionWebView2/LibraryViewController.cs b/src/LibraryViewExtensionWebView2/LibraryViewController.cs
@@ -1,6 +1,5 @@
 using System;
 using System.Collections.Generic;
-using System.Diagnostics;
 using System.IO;
 using System.Linq;
 using System.Reflection;
@@ -11,7 +10,6 @@
 using System.Windows.Controls;
 using System.Windows.Input;
 using CoreNodeModels.Properties;
-using Dynamo.Controls;
 using Dynamo.Extensions;
 using Dynamo.LibraryViewExtensionWebView2.Handlers;
 using Dynamo.LibraryViewExtensionWebView2.ViewModels;
@@ -32,6 +30,43 @@ namespace Dynamo.LibraryViewExtensionWebView2
 {
     [PermissionSet(SecurityAction.Demand, Name = "FullTrust")]
     [ComVisibleAttribute(true)]
+
+    /// <summary>
+    /// This is for the object we're gonna host exposing the functions
+    /// for clipboard management to React component
+    /// </summary>
+    public class ScriptObject
+    {
+        Action<string> onCopyToClipboard;
+        Func<string> onPasteFromClipboard;
+
+        internal ScriptObject(Action<string> onCopyToClipboard, Func<string> onPasteFromClipboard)
+        {
+            this.onCopyToClipboard = onCopyToClipboard;
+            this.onPasteFromClipboard = onPasteFromClipboard;
+        }
+
+        /// <summary>
+        /// This is the function we expose for adding a string to the clipboard
+        /// In React component will be accesible from chrome.webview.hostObjects.scriptObject.CopyToClipboard(text)
+        /// </summary>
+        /// <param name="text">text to be added to the clipboard</param>
+        public void CopyToClipboard(string text)
+        {
+            onCopyToClipboard(text);
+        }
+
+        /// <summary>
+        /// This is the function we expose for paste a string from the clipboard
+        /// In React component will be accesible from chrome.webview.hostObjects.scriptObject.PasteFromClipboard();
+        /// </summary>
+        public string PasteFromClipboard()
+        {
+            return onPasteFromClipboard();
+        }
+
+    }
+
     public class LibraryViewController : IDisposable
     {
         private Window dynamoWindow;
@@ -193,6 +228,22 @@ internal void RefreshLibraryView(WebView2 browser)
 
         #endregion
 
+        /// <summary>
+        /// This function will copy a string to clipboard 
+        /// </summary>
+        /// <param name="text">text to be added to clipboard</param>
+        internal void OnCopyToClipboard(string text)
+        {
+            Clipboard.SetText(text);
+        }
+
+        /// <summary>
+        /// This function will return the clipboard content
+        /// </summary>
+        internal string OnPasteFromClipboard() {
+            return Clipboard.GetText();
+        }
+
         private string ReplaceUrlWithBase64Image(string html, string minifiedURL, bool magicreplace = true)
         {
             var ext = string.Empty;
@@ -349,6 +400,10 @@ private void Browser_CoreWebView2InitializationCompleted(object sender, CoreWebV
             browser.ZoomFactor = (double)dynamoViewModel.Model.PreferenceSettings.LibraryZoomScale / 100;
             browser.ZoomFactorChanged += Browser_ZoomFactorChanged;
             browser.KeyDown += Browser_KeyDown;
+
+            // Hosts an object that will expose the properties and methods to be called from the javascript side
+            browser.CoreWebView2.AddHostObjectToScript("scriptObject",
+                new ScriptObject(OnCopyToClipboard, OnPasteFromClipboard));
         }
 
         private void Browser_Loaded(object sender, RoutedEventArgs e)
@@ -357,13 +412,44 @@ private void Browser_Loaded(object sender, RoutedEventArgs e)
             LogToDynamoConsole(msg);
         }
 
+        // This enum is for matching the modifier keys between C# and javaScript
+        enum ModifiersJS
+        {
+            none = 0,
+            altKey = 1,
+            ctrlKey = 2,
+            shiftKey = 4
+        }
+
+        // This enum is for define the events to be tracked
+        enum EventsTracked
+        {
+            Delete,
+            C,
+            V
+        }
+
+        /// <summary>
+        /// Collect the main and modifier key from KeyEventArgs in order to pass
+        /// that data to eventDispatcher (located in library.html) which is responsible
+        /// for binding KeyDown events between dynamo and webview instances
+        /// </summary>
+        /// <param name="sender"></param>
+        /// <param name="e"></param>
+        ///
+
         private void Browser_KeyDown(object sender, KeyEventArgs e)
 
         {
-            if (e.Key == Key.Delete)
+            if (!Enum.IsDefined(typeof(EventsTracked), e.Key.ToString())) return;
+
+            var synteticEventData = new Dictionary<string, string>
             {
-                _ = ExecuteScriptFunctionAsync(browser, "eventDispatcher");
-            }
+                [Enum.GetName(typeof(ModifiersJS), e.KeyboardDevice.Modifiers)] = "true",
+                ["key"] = e.Key.ToString()
+            };
+
+            _ = ExecuteScriptFunctionAsync(browser, "eventDispatcher", synteticEventData);
         }
 
 
diff --git a/src/LibraryViewExtensionWebView2/web/library/librarie.min.js b/src/LibraryViewExtensionWebView2/web/library/librarie.min.js
diff --git a/src/LibraryViewExtensionWebView2/web/library/library.html b/src/LibraryViewExtensionWebView2/web/library/library.html
@@ -387,13 +387,13 @@
              window.chrome.webview.postMessage(JSON.stringify({ "func": "ResizedEvent", "data": "" }));
         }
 
-        function eventDispatcher() {
-
+        //This function will be dispatching javaScript keydown events based on Dynamo keydown events
+        function eventDispatcher(eventKeyData) {
             const kbEvent = new KeyboardEvent('keydown', {
                 bubbles: true,
                 cancelable: true,
-                key: 'Delete',
-             });
+                ...eventKeyData
+            });
 
             document.dispatchEvent(kbEvent);
         }
