frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Hitting enter in Comment node name field clicks markdown button

Browse Source 
When Enter is pressed in a form, the browser will find the first
submittable element and trigger it. By default <button> elements
have type set to 'submit' which causes them to be targetted by
this behaviour.

Adding `type="button"` prevents this behaviour. This change
targets some main offenders - in particular the markdown toolbar.

There are of lots of other `<button>` elements without this attribute
set, so they need tidying up. Not currently aware of any others that
exist in a <Form> so may be immune from this behaviour.
This commit is contained in:
Nick O'Leary 2019-02-13 16:36:36 +00:00
parent 2937b25d6d
commit 057127f4de
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/node_modules/@node-red/editor-client/src/js/ui/editor.js vendored
View File

@ -840,7 +840,7 @@ RED.editor = (function() {
var id = "node-label-form-"+type+"-"+index; var id = "node-label-form-"+type+"-"+index;
$('<label>',{for:id}).text((index+1)+".").appendTo(result); $('<label>',{for:id}).text((index+1)+".").appendTo(result);
var input = $('<input>',{type:"text",id:id, placeholder: placeHolder}).val(value).appendTo(result); var input = $('<input>',{type:"text",id:id, placeholder: placeHolder}).val(value).appendTo(result);
var clear = $('<button class="editor-button editor-button-small"><i class="fa fa-times"></i></button>').appendTo(result); var clear = $('<button type="button" class="editor-button editor-button-small"><i class="fa fa-times"></i></button>').appendTo(result);
clear.click(function(evt) { clear.click(function(evt) {
evt.preventDefault(); evt.preventDefault();
input.val(""); input.val("");
@ -897,7 +897,7 @@ RED.editor = (function() {
var iconList = $('<div class="red-ui-icon-list">').appendTo(picker); var iconList = $('<div class="red-ui-icon-list">').appendTo(picker);
var metaRow = $('<div class="red-ui-icon-meta"></div>').appendTo(picker); var metaRow = $('<div class="red-ui-icon-meta"></div>').appendTo(picker);
var summary = $('<span>').appendTo(metaRow); var summary = $('<span>').appendTo(metaRow);
var resetButton = $('<button class="editor-button editor-button-small">'+RED._("editor.useDefault")+'</button>').appendTo(metaRow).click(function(e) { var resetButton = $('<button type="button" class="editor-button editor-button-small">'+RED._("editor.useDefault")+'</button>').appendTo(metaRow).click(function(e) {
e.preventDefault(); e.preventDefault();
hide(); hide();
done(null); done(null);
@ -946,7 +946,7 @@ RED.editor = (function() {
$('<div class="form-row">'+ $('<div class="form-row">'+
'<label for="node-input-show-label-btn" data-i18n="editor.label"></label>'+ '<label for="node-input-show-label-btn" data-i18n="editor.label"></label>'+
'<button id="node-input-show-label-btn" class="editor-button" style="min-width: 80px; text-align: left;" type="button"><i id="node-input-show-label-btn-i" class="fa fa-toggle-on"></i> <span id="node-input-show-label-label"></span></button> '+ '<button type="button" id="node-input-show-label-btn" class="editor-button" style="min-width: 80px; text-align: left;" type="button"><i id="node-input-show-label-btn-i" class="fa fa-toggle-on"></i> <span id="node-input-show-label-label"></span></button> '+
'<input type="checkbox" id="node-input-show-label" style="display: none;"/>'+ '<input type="checkbox" id="node-input-show-label" style="display: none;"/>'+
'</div>').appendTo(dialogForm); '</div>').appendTo(dialogForm);
@ -980,7 +980,7 @@ RED.editor = (function() {
var iconRow = $('<div class="form-row"></div>').appendTo(dialogForm); var iconRow = $('<div class="form-row"></div>').appendTo(dialogForm);
$('<label data-i18n="editor.settingIcon">').appendTo(iconRow); $('<label data-i18n="editor.settingIcon">').appendTo(iconRow);
var iconButton = $('<button class="editor-button" id="node-settings-icon-button">').appendTo(iconRow); var iconButton = $('<button type="button" class="editor-button" id="node-settings-icon-button">').appendTo(iconRow);
var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(iconButton); var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(iconButton);
var colour = RED.utils.getNodeColor(node.type, node._def); var colour = RED.utils.getNodeColor(node.type, node._def);
@ -2398,7 +2398,7 @@ RED.editor = (function() {
$(el).addClass("node-text-editor-container-toolbar"); $(el).addClass("node-text-editor-container-toolbar");
editor.toolbar = customEditTypes['_markdown'].buildToolbar(toolbarRow,editor); editor.toolbar = customEditTypes['_markdown'].buildToolbar(toolbarRow,editor);
if (options.expandable !== false) { if (options.expandable !== false) {
var expandButton = $('<button class="editor-button" style="float: right;"><i class="fa fa-expand"></i></button>').appendTo(editor.toolbar); var expandButton = $('<button type="button" class="editor-button" style="float: right;"><i class="fa fa-expand"></i></button>').appendTo(editor.toolbar);
expandButton.click(function(e) { expandButton.click(function(e) {
e.preventDefault(); e.preventDefault();
@ -2417,7 +2417,7 @@ RED.editor = (function() {
}) })
}); });
} }
var helpButton = $('<button class="node-text-editor-help editor-button editor-button-small"><i class="fa fa-question"></i></button>').appendTo($(el).parent()); var helpButton = $('<button type="button" class="node-text-editor-help editor-button editor-button-small"><i class="fa fa-question"></i></button>').appendTo($(el).parent());
RED.popover.create({ RED.popover.create({
target: helpButton, target: helpButton,
trigger: 'click', trigger: 'click',

24
packages/node_modules/@node-red/editor-client/src/js/ui/editors/markdown.js vendored
View File

@ -17,21 +17,21 @@
var toolbarTemplate = '<div style="margin-bottom: 5px">'+ var toolbarTemplate = '<div style="margin-bottom: 5px">'+
'<span class="button-group">'+ '<span class="button-group">'+
'<button class="editor-button" data-style="h1" style="font-size:1.1em; font-weight: bold">h1</button>'+ '<button type="button" class="editor-button" data-style="h1" style="font-size:1.1em; font-weight: bold">h1</button>'+
'<button class="editor-button" data-style="h2" style="font-size:1.0em; font-weight: bold">h2</button>'+ '<button type="button" class="editor-button" data-style="h2" style="font-size:1.0em; font-weight: bold">h2</button>'+
'<button class="editor-button" data-style="h3" style="font-size:0.9em; font-weight: bold">h3</button>'+ '<button type="button" class="editor-button" data-style="h3" style="font-size:0.9em; font-weight: bold">h3</button>'+
'</span>'+ '</span>'+
'<span class="button-group">'+ '<span class="button-group">'+
'<button class="editor-button" data-style="b"><i class="fa fa-bold"></i></button>'+ '<button type="button" class="editor-button" data-style="b"><i class="fa fa-bold"></i></button>'+
'<button class="editor-button" data-style="i"><i class="fa fa-italic"></i></button>'+ '<button type="button" class="editor-button" data-style="i"><i class="fa fa-italic"></i></button>'+
'<button class="editor-button" data-style="code"><i class="fa fa-code"></i></button>'+ '<button type="button" class="editor-button" data-style="code"><i class="fa fa-code"></i></button>'+
'</span>'+ '</span>'+
'<span class="button-group">'+ '<span class="button-group">'+
'<button class="editor-button" data-style="ol"><i class="fa fa-list-ol"></i></button>'+ '<button type="button" class="editor-button" data-style="ol"><i class="fa fa-list-ol"></i></button>'+
'<button class="editor-button" data-style="ul"><i class="fa fa-list-ul"></i></button>'+ '<button type="button" class="editor-button" data-style="ul"><i class="fa fa-list-ul"></i></button>'+
'<button class="editor-button" data-style="bq"><i class="fa fa-quote-left"></i></button>'+ '<button type="button" class="editor-button" data-style="bq"><i class="fa fa-quote-left"></i></button>'+
'<button class="editor-button" data-style="hr"><i class="fa fa-minus"></i></button>'+ '<button type="button" class="editor-button" data-style="hr"><i class="fa fa-minus"></i></button>'+
'<button class="editor-button" data-style="link"><i class="fa fa-link"></i></button>'+ '<button type="button" class="editor-button" data-style="link"><i class="fa fa-link"></i></button>'+
'</span>' '</span>'
'</div>'; '</div>';
@ -123,7 +123,7 @@
panels.ratio(1); panels.ratio(1);
$('<span class="button-group" style="float:right">'+ $('<span class="button-group" style="float:right">'+
'<button id="node-btn-markdown-preview" class="editor-button toggle single"><i class="fa fa-eye"></i></button>'+ '<button type="button" id="node-btn-markdown-preview" class="editor-button toggle single"><i class="fa fa-eye"></i></button>'+
'</span>').appendTo(expressionEditor.toolbar); '</span>').appendTo(expressionEditor.toolbar);
$("#node-btn-markdown-preview").click(function(e) { $("#node-btn-markdown-preview").click(function(e) {