Style drop target.

packages/codeeditor/src/widget.ts

@@ -22,6 +22,11 @@ const HAS_SELECTION_CLASS = 'jp-mod-has-primary-selection';
  */
 const HAS_IN_LEADING_WHITESPACE_CLASS = 'jp-mod-in-leading-whitespace';
 
+/**
+ * A class used to indicate a drop target.
+ */
+const DROP_TARGET_CLASS = 'jp-mod-dropTarget';
+
 /**
  * RegExp to test for leading whitespace
  */
@@ -190,18 +195,26 @@ export class CodeEditorWrapper extends Widget {
    * Handle the `'p-dragenter'` event for the widget.
    */
   private _evtDragEnter(event: IDragEvent): void {
+    if (this.editor.getOption('readOnly') === true) {
+      return;
+    }
     const data = Private.findTextData(event.mimeData);
     if (data === undefined) {
       return;
     }
     event.preventDefault();
     event.stopPropagation();
+    this.addClass('jp-mod-dropTarget');
   }
 
   /**
    * Handle the `'p-dragleave'` event for the widget.
    */
   private _evtDragLeave(event: IDragEvent): void {
+    this.removeClass(DROP_TARGET_CLASS);
+    if (this.editor.getOption('readOnly') === true) {
+      return;
+    }
     const data = Private.findTextData(event.mimeData);
     if (data === undefined) {
       return;
@@ -214,6 +227,10 @@ export class CodeEditorWrapper extends Widget {
    * Handle the `'p-dragover'` event for the widget.
    */
   private _evtDragOver(event: IDragEvent): void {
+    this.removeClass(DROP_TARGET_CLASS);
+    if (this.editor.getOption('readOnly') === true) {
+      return;
+    }
     const data = Private.findTextData(event.mimeData);
     if (data === undefined) {
       return;
@@ -221,16 +238,21 @@ export class CodeEditorWrapper extends Widget {
     event.preventDefault();
     event.stopPropagation();
     event.dropAction = 'copy';
+    this.addClass(DROP_TARGET_CLASS);
   }
 
   /**
    * Handle the `'p-drop'` event for the widget.
    */
   private _evtDrop(event: IDragEvent): void {
+    if (this.editor.getOption('readOnly') === true) {
+      return;
+    }
     const data = Private.findTextData(event.mimeData);
     if (data === undefined) {
       return;
     }
+    this.removeClass(DROP_TARGET_CLASS);
     event.preventDefault();
     event.stopPropagation();
     if (event.proposedAction === 'none') {

packages/codeeditor/style/index.css

@@ -75,3 +75,8 @@
   border: 1px solid var(--jp-input-active-border-color);
   box-shadow: var(--jp-input-box-shadow);
 }
+
+.jp-Editor.jp-mod-dropTarget {
+  border: var(--jp-border-width) solid var(--jp-input-active-border-color);
+  box-shadow: var(--jp-input-box-shadow);
+}