feat(UI): context menu for input and textarea tags

src/renderer/App.vue

@@ -24,7 +24,7 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex';
-import { ipcRenderer } from 'electron';
+import { ipcRenderer, remote } from 'electron';
 
 export default {
    name: 'App',
@@ -54,6 +54,45 @@ export default {
    },
    mounted () {
       ipcRenderer.send('check-for-updates');
+
+      const Menu = remote.Menu;
+
+      const InputMenu = Menu.buildFromTemplate([
+         {
+            label: this.$t('word.cut'),
+            role: 'cut'
+         },
+         {
+            label: this.$t('word.copy'),
+            role: 'copy'
+         },
+         {
+            label: this.$t('word.paste'),
+            role: 'paste'
+         },
+         {
+            type: 'separator'
+         },
+         {
+            label: this.$t('message.selectAll'),
+            role: 'selectall'
+         }
+      ]);
+
+      document.body.addEventListener('contextmenu', (e) => {
+         e.preventDefault();
+         e.stopPropagation();
+
+         let node = e.target;
+
+         while (node) {
+            if (node.nodeName.match(/^(input|textarea)$/i) || node.isContentEditable) {
+               InputMenu.popup(remote.getCurrentWindow());
+               break;
+            }
+            node = node.parentNode;
+         }
+      });
    },
    methods: {
       ...mapActions({

src/renderer/components/WorkspaceQueryTable.vue

@@ -324,6 +324,8 @@ export default {
             this.selectedRows = [row];
       },
       contextMenu (event, cell) {
+         if (event.target.localName === 'input') return;
+
          this.selectedCell = cell;
          if (!this.selectedRows.includes(cell.id))
             this.selectedRows = [cell.id];

src/renderer/components/WorkspaceQueryTableRow.vue

@@ -68,9 +68,7 @@
                   />
                </div>
                <div class="editor-field-info p-vcentered">
-                  <div><b>{{ $t('word.size') }}</b>: {{ editingContent ? editingContent.length : 0 }}</div>
+                  <div class="d-flex p-vcentered">
-                  <div class="d-flex">
-                     <div class="d-flex p-vcentered mr-4">
                      <label for="editorMode" class="form-label mr-2">
                         <b>{{ $t('word.content') }}</b>:
                      </label>
@@ -99,13 +97,19 @@
                         </option>
                      </select>
                   </div>
+                  <div class="d-flex">
                      <div class="p-vcentered">
+                        <div class="mr-4">
+                           <b>{{ $t('word.size') }}</b>: {{ editingContent ? editingContent.length : 0 }}
+                        </div>
+                        <div>
                            <b>{{ $t('word.type') }}</b>: {{ editingType.toUpperCase() }}
                         </div>
                      </div>
                   </div>
                </div>
             </div>
+         </div>
       </ConfirmModal>
       <ConfirmModal
          v-if="isBlobEditor"

src/renderer/i18n/en-US.js

@@ -94,7 +94,10 @@ module.exports = {
       upload: 'Upload',
       browse: 'Browse',
       faker: 'Faker',
-      content: 'Content'
+      content: 'Content',
+      cut: 'Cut',
+      copy: 'Copy',
+      paste: 'Paste'
    },
    message: {
       appWelcome: 'Welcome to Antares SQL Client!',
@@ -186,7 +189,8 @@ module.exports = {
       manualValue: 'Manual value',
       tableFiller: 'Table Filler',
       fakeDataLanguage: 'Fake data language',
-      searchForElements: 'Search for elements'
+      searchForElements: 'Search for elements',
+      selectAll: 'Select all'
    },
    faker: {
       address: 'Address',