Fix #170

Author: jahn96

src/CodeSnippetDisplay.tsx

@@ -48,7 +48,7 @@ import React from 'react';
 import { CodeSnippetService, ICodeSnippet } from './CodeSnippetService';
 import { FilterTools } from './FilterTools';
 import { showPreview } from './PreviewSnippet';
-import { showMoreOptions } from './MoreOptions';
+import { showMoreOptions } from './CodeSnippetMenu';
 // import {
 //   ICodeSnippet,
 //   CodeSnippetContentsService
@@ -627,7 +627,7 @@ export class CodeSnippetDisplay extends React.Component<
 
   //Set the position of the option to be under to the three dots on snippet.
   private _setOptionsPosition(
-    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+    event: React.MouseEvent<HTMLElement, MouseEvent>
   ): void {
     const target = event.target as HTMLElement;
     let top: number;
@@ -1151,9 +1151,7 @@ export class CodeSnippetDisplay extends React.Component<
       {
         title: 'Insert, copy, edit, and delete',
         icon: moreOptionsIcon,
-        onClick: (
-          event: React.MouseEvent<HTMLButtonElement, MouseEvent>
-        ): void => {
+        onClick: (event: React.MouseEvent<HTMLElement, MouseEvent>): void => {
           showMoreOptions({ body: new OptionsHandler(this, codeSnippet) });
           this._setOptionsPosition(event);
         },
@@ -1164,12 +1162,20 @@ export class CodeSnippetDisplay extends React.Component<
         key={codeSnippet.name}
         className={CODE_SNIPPET_ITEM}
         id={id.toString()}
+        title={'Right click for more options'}
         onMouseOver={(): void => {
           this.dragHoverStyle(id);
         }}
         onMouseOut={(): void => {
           this.dragHoverStyleRemove(id);
         }}
+        onContextMenu={(
+          event: React.MouseEvent<HTMLElement, MouseEvent>
+        ): void => {
+          event.preventDefault();
+          showMoreOptions({ body: new OptionsHandler(this, codeSnippet) });
+          this._setOptionsPosition(event);
+        }}
       >
         <div
           className={CODE_SNIPPET_DRAG_HOVER}

style/base.css

@@ -76,6 +76,7 @@
   margin: 0;
   padding: 0;
   height: fit-content;
+  cursor: context-menu;
 }
 
 .jp-codeSnippet-item:hover {