Changing the default prompt in blockly

[Minedhurdle]

Hello I am making a blockly application but i am stuck in something, when i try to create a variable the prompt doesn't work since this is electron, so I was trying to override the default prompt I tried one code I found on stack overflow:" var prompt = require('electron-prompt'); var renameVar = function(name) { return name; } Blockly.prompt = function(msg, defaultValue, callback) { prompt ({ title: 'Renaming', label: 'Renaming variable to:', type: 'input' }).then((name)=>{callback(renameVar(name))}) }  "

but when I add this code I still get the same error, as if the function was not overridden (I put this code in the renderer process) 
I also tried to add the code found here: https://google.github.io/blockly-samples/examples/custom-dialogs-demo/index.html
by including the file in my renderer process but again nothing happened even though by console logging something the file gets executed but still the same error. another attempt was after some searching I found a function called setPrompt but it was not recognized I think I wasn't able to include it correctly in my file 
error I am talking about: "Uncaught Error: prompt() is and will not be supported."

finally I tried to make new blocks for variables but I got nowhere there also

any help would be greatly appreciated, I have been stuck at this for 2 days I am still a beginner 

[Maribeth Moffatt]

Hello!

You can no longer modify the value of `Blockly.prompt` directly. You can call 

Blockly.dialog.setPrompt(function(message, defaultValue, callback) {

  // your code here 

});

to set the callback function that will be run whenever a prompt should appear. This code is in the demo you linked above. To help you debug further, can you share your code where you tried to call this function? It is very difficult to debug your code if we can't see what you've attempted.

Best,

Maribeth

[Minedhurdle]

thank you for your reply, I tried your suggestion but it didn't work I think i am doing something wrong here
here is my code:
index.js:
const Blockly = require('blockly');
const { blocks } = require('./blocks/text');
const { generator } = require('./generators/javascript');
const {javascriptGenerator} = require('blockly/javascript');
const { save, load } = require('./serialization');
const { toolbox } = require('./toolbox');

Blockly.common.defineBlocks(blocks);
Object.assign(javascriptGenerator, generator);
const ws = Blockly.inject(blocklyDiv, {toolbox});
//other unrelated functions here related to btns etc

require("./custom-dialog");

custom-dialog.js:
//this is from the demo on blockly demos:
/**
 * @license
 * Copyright 2016 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */

/**
 * An example implementation of how one might replace Blockly's browser
 * dialogs. This is just an example, and applications are not encouraged to use
 * it verbatim.
 *
 * @namespace
 */
CustomDialog = {};

/** Override Blockly.alert() with custom implementation. */
Blockly.alert = function(message, callback) {
  console.log('Alert: ' + message);
  CustomDialog.show('Alert', message, {
    onCancel: callback
  });
};

/** Override Blockly.confirm() with custom implementation. */
Blockly.confirm = function(message, callback) {
  console.log('Confirm: ' + message);
  CustomDialog.show('Confirm', message, {
    showOkay: true,
    onOkay: function() {
      callback(true);
    },
    showCancel: true,
    onCancel: function() {
      callback(false);
    }
  });
};

/** Override Blockly.prompt() with custom implementation. */
Blockly.dialog.setPrompt = function(message, defaultValue, callback) {
  console.log('Prompt: ' + message);
  CustomDialog.show('Prompt', message, {
    showInput: true,
    showOkay: true,
    onOkay: function() {
      callback(CustomDialog.inputField.value);
    },
    showCancel: true,
    onCancel: function() {
      callback(null);
    }
  });
  CustomDialog.inputField.value = defaultValue;
};

/** Hides any currently visible dialog. */
CustomDialog.hide = function() {
  if (CustomDialog.backdropDiv_) {
    CustomDialog.backdropDiv_.style.display = 'none';
    CustomDialog.dialogDiv_.style.display = 'none';
  }
};

/**
 * Shows the dialog.
 * Allowed options:
 *  - showOkay: Whether to show the OK button.
 *  - showCancel: Whether to show the Cancel button.
 *  - showInput: Whether to show the text input field.
 *  - onOkay: Callback to handle the okay button.
 *  - onCancel: Callback to handle the cancel button and backdrop clicks.
 */
CustomDialog.show = function(title, message, options) {
  var backdropDiv = CustomDialog.backdropDiv_;
  var dialogDiv = CustomDialog.dialogDiv_;
  if (!dialogDiv) {
    // Generate HTML
    backdropDiv = document.createElement('div');
    backdropDiv.id = 'customDialogBackdrop';
    backdropDiv.style.cssText =
        'position: absolute;' +
        'top: 0; left: 0; right: 0; bottom: 0;' +
        'background-color: rgba(0, 0, 0, .7);' +
        'z-index: 100;';
    document.body.appendChild(backdropDiv);

    dialogDiv = document.createElement('div');
    dialogDiv.id = 'customDialog';
    dialogDiv.style.cssText =
        'background-color: #fff;' +
        'width: 400px;' +
        'margin: 20px auto 0;' +
        'padding: 10px;';
    backdropDiv.appendChild(dialogDiv);

    dialogDiv.onclick = function(event) {
      event.stopPropagation();
    };

    CustomDialog.backdropDiv_ = backdropDiv;
    CustomDialog.dialogDiv_ = dialogDiv;
  }
  backdropDiv.style.display = 'block';
  dialogDiv.style.display = 'block';

  dialogDiv.innerHTML =
      '<header class="customDialogTitle"></header>' +
      '<p class="customDialogMessage"></p>' +
      (options.showInput ? '<div><input id="customDialogInput"></div>' : '') +
      '<div class="customDialogButtons">' +
      (options.showCancel ? '<button id="customDialogCancel">Cancel</button>': '') +
      (options.showOkay ? '<button id="customDialogOkay">OK</button>': '') +
      '</div>';
  dialogDiv.getElementsByClassName('customDialogTitle')[0]
      .appendChild(document.createTextNode(title));
  dialogDiv.getElementsByClassName('customDialogMessage')[0]
      .appendChild(document.createTextNode(message));

  var onOkay = function(event) {
    CustomDialog.hide();
    options.onOkay && options.onOkay();
    event && event.stopPropagation();
  };
  var onCancel = function(event) {
    CustomDialog.hide();
    options.onCancel && options.onCancel();
    event && event.stopPropagation();
  };

  var dialogInput = document.getElementById('customDialogInput');
  CustomDialog.inputField = dialogInput;
  if (dialogInput) {
    dialogInput.focus();

    dialogInput.onkeyup = function(event) {
      if (event.keyCode == 13) {
        // Process as OK when user hits enter.
        onOkay();
        return false;
      } else if (event.keyCode == 27)  {
        // Process as cancel when user hits esc.
        onCancel();
        return false;
      }
    };
  } else {
    var okay = document.getElementById('customDialogOkay');
    okay && okay.focus();
  }

  if (options.showOkay) {
    document.getElementById('customDialogOkay')
        .addEventListener('click', onOkay);
  }
  if (options.showCancel) {
    document.getElementById('customDialogCancel')
        .addEventListener('click', onCancel);
  }

  backdropDiv.onclick = onCancel;
};

console.log("this code got executed");

finally here is how I create the renderer in the main process:
const createWindow = () => {
    const win = new BrowserWindow({
      width: 1000,
      height: 600,
    //   webPreferences: {
    //     preload: path.join(__dirname, 'preload.js')
    //   }
        webPreferences:{
            nodeIntegration: true,
            contextIsolation: false,
            sandbox: false,
            enableRemoteModule: true
        }
    })
 
    win.loadFile('src/index.html')

[Blockly]

never mind I used equal in the code I sent above not between brackets, sorry for that mistake 
thank you so much for your help I really appreciate it 

[Maribeth Moffatt]

No problem, glad you got it figured out! One more note, you'll want to change your code for `alert` and `confirm` as well. Instead of `Blockly.alert = ...` you need to call the `Blockly.dialog.setAlert()` function and same for confirm.

Maribeth