Yutao  Huang

How do you think about new a popup input frame and use it like the sync prompt

AbserAri

That would be great if it's possible to implement something like that. Last time I tried, I couldn't figure out a way to do that. I vaguely recall sync vs. async being one challenge and Observable not allowing some certain behaviors being another. But it's been a while so things might be different now. Please feel free to give it a try and let me know how it goes! :)

Unfortunately, I terminated my process on try. It's supposed that don't change blockly's origin code. So I choose your plan now. Add HTML attribute "display" to control like a window.prompt. BTW, your way has a recurse bug, it would be an endless loop when you click create variable button twice with the same value.

Good catch! It seems the Blockly's original code indeed keeps trying recursively to prompt for a different variable name:

Blockly.Variables.createVariable = function(a) {
    for (; ; ) {
        var b = Blockly.Variables.promptName(Blockly.Msg.NEW_VARIABLE_TITLE, "");
        if (b)
            if (-1 != a.variableIndexOf(b))
                window.alert(Blockly.Msg.VARIABLE_ALREADY_EXISTS.replace("%1", b.toLowerCase()));
            else {
                a.createVariable(b);
                break
            }
        else {
            b = null;
            break
        }
    }
    return b
}

Not sure how we can work around it... Wondering if we can rewrite this function.

if (defaultName === input.value && input.value !== undefined) {
        console.log("defend recurse");
        return "";
      }

https://observablehq.com/@yhyddr/blockly-widgets
 // This function needs to be named so it can be called recursively.
    var promptAndCheckWithAlert = function(defaultName) {
      if (defaultName === input.value && input.value !== undefined) {
        console.log("defend recurse");
        return "";
      }

rewrite to prohibit the recursive call of the function.