Merge pull request #110 from rickstaa/add_copy_type_query_param

feat: add copy type query parameter

README.md

@@ -22,7 +22,7 @@ A simple Emoji picker that displays all the emojis that GitHub supports. It is a
 
 ## How to use
 
-Use the search field to search for a given emoji. You can click the emoji to get the shortcode on your clipboard or `shift` + click for the Unicode.
+Use the search field to search for a given emoji. You can click the emoji to get the shortcode on your clipboard or `shift` + click for the Unicode. You can invert the copy behaviour by setting the `copy_type` URL parameter to `unicode` or `shortcode`.
 
 ## Contributing
 

src/App.tsx

@@ -13,6 +13,7 @@ import { Footer } from "./components/Footer";
 import { Header } from "./components/Header";
 import { Snackbar } from "./components/Snackbar";
 import { ThemeContext } from "./store";
+import { unifiedToUnicodeEmoji } from "./utils/utils";
 
 /**
  * Get the mart locale.
@@ -56,6 +57,7 @@ const App = () => {
   const [messageInfo, setMessageInfo] = useState<SnackbarMessage | undefined>(
     undefined
   );
+  const [copyUnicode, setCopyUnicode] = useState(false); // Whether to copy the unicode instead of the shortcode.
 
   /* Store theme mode in local storage. */
   useEffect(() => {
@@ -67,6 +69,31 @@ const App = () => {
     window.localStorage.setItem("locale", locale);
   }, [locale]);
 
+  /* Get copy type from URL query params. */
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    let copyType = urlParams.get("copy_type");
+
+    // Change copy based on query param.
+    if (copyType) {
+      switch (copyType.toLowerCase()) {
+        case "unicode":
+          window.localStorage.setItem("copyType", "unicode");
+          setCopyUnicode(true);
+          return;
+        case "shortcode":
+        default:
+          window.localStorage.setItem("copyType", "shortcode");
+          setCopyUnicode(false);
+          return;
+      }
+    }
+
+    // Change copy based on local storage.
+    copyType = window.localStorage.getItem("copyType");
+    setCopyUnicode(copyType === "unicode");
+  }, []);
+
   /* Implements snackbar functionality. */
   useEffect(() => {
     if (snackPack.length && !messageInfo) {
@@ -111,20 +138,34 @@ const App = () => {
    */
   const handleEmojiSelect = (selectedEmoji: Emoji, event: PointerEvent) => {
     // Copy emoji shortcode or unicode to clipboard.
+    // NOTE: Depends on whether the shift key is pressed and the copyUnicode state.
+    let copyText;
     if (event.shiftKey) {
-      navigator.clipboard.writeText(
-        `${String.fromCodePoint(
-          ...selectedEmoji.unified.split("-").map((str: string) => "0x" + str)
-        )}`
-      );
+      copyText = copyUnicode
+        ? selectedEmoji.shortcodes
+        : unifiedToUnicodeEmoji(selectedEmoji.unified);
     } else {
-      navigator.clipboard.writeText(selectedEmoji.shortcodes);
+      copyText = copyUnicode
+        ? unifiedToUnicodeEmoji(selectedEmoji.unified)
+        : selectedEmoji.shortcodes;
+    }
+    navigator.clipboard.writeText(copyText);
+
+    // Display snackbar.
+    let snackbarMessage: string;
+    if (copyUnicode) {
+      snackbarMessage = `Emoji ${
+        event.shiftKey ? "shortcode" : "unicode"
+      } copied to clipboard. Hold shift for ${
+        event.shiftKey ? "unicode" : "shortcode"
+      }.`;
+    } else {
+      snackbarMessage = `Emoji ${
+        event.shiftKey ? "unicode" : "shortcode"
+      } copied to clipboard. Hold shift for ${
+        event.shiftKey ? "shortcode" : "unicode"
+      }.`;
     }
-
-    // Display snackbar
-    const snackbarMessage = `Emoji ${
-      event.shiftKey ? "unicode" : "shortcode"
-    } copied to clipboard. ${!event.shiftKey ? "Hold shift for unicode." : ""}`;
     setSnackPack((prev) => [
       ...prev,
       {

src/utils/utils.ts

@@ -0,0 +1,16 @@
+/**
+ * @file Utility functions.
+ */
+
+/**
+ * Convert unified to unicode emoji.
+ * @param unified - the unified string.
+ * @returns the unicode emoji.
+ */
+const unifiedToUnicodeEmoji = (unified: string) => {
+  return String.fromCodePoint(
+    ...unified.split("-").map((str: string) => parseInt(str, 16))
+  );
+};
+
+export { unifiedToUnicodeEmoji };