fix context menu

src/renderer/component/common/form-components/form-field.jsx

@@ -6,7 +6,7 @@ import MarkdownPreview from 'component/common/markdown-preview';
 import SimpleMDE from 'react-simplemde-editor';
 import 'simplemde/dist/simplemde.min.css';
 import Toggle from 'react-toggle';
-import { openEditorMenu } from 'util/contextMenu';
+import { openEditorMenu, stopContextMenu } from 'util/contextMenu';
 
 type Props = {
   name: string,
@@ -55,15 +55,10 @@ export class FormField extends React.PureComponent<Props> {
           </select>
         );
       } else if (type === 'markdown') {
-        const stopContextMenu = event => {
-          event.preventDefault();
-          event.stopPropagation();
-        };
         const handleEvents = {
-          contextmenu(codeMirror, event) {
-            openEditorMenu(event, codeMirror);
-          },
+          contextmenu: openEditorMenu,
         };
+
         input = (
           <div className="form-field--SimpleMDE" onContextMenu={stopContextMenu}>
             <SimpleMDE

src/renderer/component/viewers/codeViewer.jsx

@@ -2,6 +2,7 @@
 
 import React from 'react';
 import CodeMirror from 'codemirror/lib/codemirror';
+import { openSnippetMenu, stopContextMenu } from 'util/contextMenu';
 
 // Addons
 import 'codemirror/addon/selection/mark-selection';
@@ -26,21 +27,29 @@ class CodeViewer extends React.PureComponent<Props> {
 
   componentDidMount() {
     const { theme, contentType } = this.props;
+    // Init CodeMirror
     this.codeMirror = CodeMirror.fromTextArea(this.textarea.current, {
+      // Auto detect syntax with file contentType
       mode: contentType,
+      // Adaptive theme
       theme: theme === 'dark' ? 'dark' : 'default',
-      readOnly: 'nocursor',
+      // Hide the cursor
+      readOnly: true,
+      // Styled text selection
+      styleSelectedText: true,
+      // Additional config opts
       dragDrop: false,
       lineNumbers: true,
       lineWrapping: true,
-      styleSelectedText: true,
     });
+    // Add events
+    this.codeMirror.on('contextmenu', openSnippetMenu);
   }
 
   render() {
     const { value } = this.props;
     return (
-      <div className="code-viewer">
+      <div className="code-viewer" onContextMenu={stopContextMenu}>
         <textarea ref={this.textarea} disabled value={value} />
       </div>
     );

src/renderer/util/contextMenu.js

@@ -23,9 +23,9 @@ function injectDevelopmentTemplate(event, templates) {
 
 export function openContextMenu(event, templates = [], canEdit = false, selection = '') {
   const { type, value } = event.target;
-  const isSomethingSelected = selection.length > 0 || window.getSelection().toString().length > 0;
   const isInput = event.target.matches('input') && (type === 'text' || type === 'number');
   const isTextField = canEdit || isInput || event.target.matches('textarea');
+  const isSomethingSelected = selection.length > 0 || window.getSelection().toString().length > 0;
 
   templates.push({
     label: 'Copy',
@@ -63,7 +63,7 @@ export function openContextMenu(event, templates = [], canEdit = false, selectio
 }
 
 // This function is used for the markdown description on the publish page
-export function openEditorMenu(event, codeMirror) {
+export function openEditorMenu(codeMirror, event) {
   const value = codeMirror.doc.getValue();
   const selection = codeMirror.doc.getSelection();
   const templates = [
@@ -86,6 +86,25 @@ export function openEditorMenu(event, codeMirror) {
   openContextMenu(event, templates, true, selection);
 }
 
+// This function is used for the CodeViewer component
+export function openSnippetMenu(codeMirror, event) {
+  const value = codeMirror.doc.getValue();
+  const selection = codeMirror.doc.getSelection();
+  const templates = [
+    {
+      label: 'Select All',
+      accelerator: 'CmdOrCtrl+A',
+      role: 'selectall',
+      click: () => {
+        codeMirror.execCommand('selectAll');
+      },
+      // Enabled if there is text to select
+      enabled: value.length > 0,
+    },
+  ];
+  openContextMenu(event, templates, false, selection);
+}
+
 export function openCopyLinkMenu(text, event) {
   const templates = [
     {
@@ -97,3 +116,9 @@ export function openCopyLinkMenu(text, event) {
   ];
   openContextMenu(event, templates);
 }
+
+// Block context menu
+export function stopContextMenu(event) {
+  event.preventDefault();
+  event.stopPropagation();
+}

src/renderer/util/getMediaType.js

@@ -3,8 +3,8 @@ import mime from 'mime';
 const formats = [
   [/\.(mp4|m4v|webm|flv|f4v|ogv)$/i, 'video'],
   [/\.(mp3|m4a|aac|wav|flac|ogg|opus)$/i, 'audio'],
-  [/\.(json|csv|txt|log|md|markdown|docx|pdf|rtf|xml|yml|yaml)$/i, 'document'],
-  [/\.(pdf|odf|doc|docx|epub|org)$/i, 'e-book'],
+  [/\.(json|csv|txt|log|md|markdown|docx|pdf|xml|yml|yaml)$/i, 'document'],
+  [/\.(pdf|odf|doc|docx|epub|org|rtf)$/i, 'e-book'],
   [/\.(stl|obj|fbx|gcode)$/i, '3D-file'],
 ];