From 23464671b1494733352c3bc64bd885db439f5d4e Mon Sep 17 00:00:00 2001
From: Onno Broekmans <o.broekmans@lumicks.com>
Date: Fri, 17 Apr 2020 23:15:39 +0200
Subject: [PATCH] Fix broken "Raw cell MIME type" dialog (#3255)

The modal dialog for entering a custom MIME type for a "Raw NBConvert"-
type cell was broken. This change to the JavaScript code makes the modal
dialog appear correctly again, as well as correctly disabling the
handling of key presses by the cell editor while the dialog is open.

This fixes #3255.
---
 .../notebook/js/celltoolbarpresets/rawcell.js | 41 +++++++++++++------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/notebook/static/notebook/js/celltoolbarpresets/rawcell.js b/notebook/static/notebook/js/celltoolbarpresets/rawcell.js
index 7cfc43b695..647f00856a 100644
--- a/notebook/static/notebook/js/celltoolbarpresets/rawcell.js
+++ b/notebook/static/notebook/js/celltoolbarpresets/rawcell.js
@@ -26,22 +26,35 @@ define([
       function(cell, value) {
         if (value === "-") {
           delete cell.metadata.raw_mimetype;
-        } else if (value === 'dialog'){
-            var dialog = $('<div/>').append(
-                $("<p/>")
-                    .text(i18n.msg._("Set the MIME type of the raw cell:"))
-            ).append(
-                $("<br/>")
-            ).append(
-                $('<input/>').attr('type','text').attr('size','25')
-                .val(cell.metadata.raw_mimetype || "-")
-            );
+        } else if (value === 'dialog') {
+            var message =
+                i18n.msg._("Set the MIME type of the raw cell:");
+
+            var mimeinput = $('<input/>')
+                .attr('type', 'text')
+                .attr('size', '25')
+                .attr('name', 'mimetype')
+                .val(cell.metadata.raw_mimetype || "-");
+
+            var dialogform = $('<div/>').attr('title', i18n.msg._("Edit MIME type"))
+                .append(
+                    $('<form/>').append(
+                        $('<fieldset/>').append(
+                            $('<label/>')
+                            .attr('for', 'mimetype')
+                            .text(message)
+                            )
+                        .append($('<br/>'))
+                        .append(mimeinput)
+                        )
+                );
+
             dialog.modal({
                 title: i18n.msg._("Raw Cell MIME Type"),
-                body: dialog,
+                body: dialogform,
                 buttons : {
-                    "Cancel": {},
-                    "OK": {
+                    Cancel: {},
+                    OK: {
                         class: "btn-primary",
                         click: function () {
                             console.log(cell);
@@ -50,6 +63,8 @@ define([
                         }
                     }
                 },
+                notebook: cell.notebook,
+                keyboard_manager: cell.keyboard_manager,
                 open : function (event, ui) {
                     var that = $(this);
                     // Upon ENTER, click the OK button.