☰

Canva Phrase Shortcut Enhancer

Insert predefined phrases into Canva text fields by pressing keys (1, 2, 3, etc.).

  1. // ==UserScript==
  2. // @name         Canva Phrase Shortcut Enhancer
  3. // @namespace    https://greasyfork.org/
  4. // @version      1.0
  5. // @description  Insert predefined phrases into Canva text fields by pressing keys (1, 2, 3, etc.).
  6. // @author       Taeyang
  7. // @match        https://www.canva.com/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=canva.com
  9. // @grant        none
  10. //// @license MIT
  11. // ==/UserScript==
  12.  
  13. (function () {
  14.     'use strict';
  15.  
  16.     // Define phrases for each command
  17.     const phrases = {
  18.         '1': 'Hello People.',
  19.         '2': 'sigma.',
  20.         '3': 'how are you ',
  21.         '4': 'New kids of 5E',
  22.     };
  23.  
  24.     // Insert phrase into a focused text input or create a notification
  25.     function insertPhrase(phrase) {
  26.         const activeElement = document.activeElement;
  27.  
  28.         // Check if the active element is a text input or text area
  29.         if (activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA')) {
  30.             const cursorPosition = activeElement.selectionStart;
  31.             const currentValue = activeElement.value;
  32.  
  33.             // Insert the phrase at the cursor's position
  34.             activeElement.value =
  35.                 currentValue.slice(0, cursorPosition) +
  36.                 phrase +
  37.                 currentValue.slice(cursorPosition);
  38.  
  39.             // Restore focus and set the cursor after the inserted text
  40.             activeElement.focus();
  41.             activeElement.setSelectionRange(cursorPosition + phrase.length, cursorPosition + phrase.length);
  42.         } else {
  43.             // Display as a floating notification if no text field is focused
  44.             showNotification(phrase);
  45.         }
  46.     }
  47.  
  48.     // Display a floating notification
  49.     function showNotification(text) {
  50.         const notification = document.createElement('div');
  51.         notification.innerText = text;
  52.         notification.style.cssText = `
  53.             position: fixed;
  54.             bottom: 20px;
  55.             right: 20px;
  56.             background: #00c4cc;
  57.             color: white;
  58.             padding: 10px 20px;
  59.             border-radius: 5px;
  60.             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  61.             z-index: 9999;
  62.             font-family: Arial, sans-serif;
  63.             font-size: 14px;
  64.             animation: fadeOut 3s forwards;
  65.         `;
  66.         document.body.appendChild(notification);
  67.  
  68.         // Remove the notification after 3 seconds
  69.         setTimeout(() => notification.remove(), 3000);
  70.     }
  71.  
  72.     // Listen for keydown events
  73.     document.addEventListener('keydown', (event) => {
  74.         const key = event.key;
  75.  
  76.         // Check if the pressed key matches one of the defined phrases
  77.         if (phrases[key]) {
  78.             insertPhrase(phrases[key]);
  79.         }
  80.     });
  81.  
  82.     // Add fadeOut animation for notifications
  83.     const style = document.createElement('style');
  84.     style.textContent = `
  85.         @keyframes fadeOut {
  86.             0% { opacity: 1; }
  87.             100% { opacity: 0; transform: translateY(10px); }
  88.         }
  89.     `;
  90.     document.head.appendChild(style);
  91. })();