diff --git a/src/editors/customEditorProvider.ts b/src/editors/customEditorProvider.ts index 901c4cf2e..d9ca8c579 100644 --- a/src/editors/customEditorProvider.ts +++ b/src/editors/customEditorProvider.ts @@ -15,12 +15,13 @@ export class CustomEditor extends CustomHTML implements vscode.CustomDocument protected getSpecificScript() { return /* javascript */ ` + const theForm = document.querySelector('#laforma'); for (const field of submitfields) { const fieldElement = document.getElementById(field); fieldElement.addEventListener(inputFields.some(f => f.id === field) ? 'input' : 'change', function(event) { event?.preventDefault(); const data = {}; - new FormData(document.querySelector('#laforma')).entries().forEach(([key, value]) => data[key] = value); + new FormData(theForm).entries().forEach(([key, value]) => data[key] = value); // Convert checkboxes value to actual boolean checkboxes.forEach(checkbox => data[checkbox] = (data[checkbox] === 'on')); @@ -28,8 +29,11 @@ export class CustomEditor extends CustomHTML implements vscode.CustomDocument data.valid = validateInputs(); vscode.postMessage({ type: 'dataChange', data }); - }); + }); } + + //Prevent form from being submitted + theForm.addEventListener("submit", (event) => event?.preventDefault()); `; } diff --git a/src/webviews/CustomUI.ts b/src/webviews/CustomUI.ts index c3e0ce922..5e87ecfc6 100644 --- a/src/webviews/CustomUI.ts +++ b/src/webviews/CustomUI.ts @@ -166,7 +166,7 @@ export class CustomHTML extends Section { } protected getHTML(panel: vscode.WebviewPanel, title: string) { - const notInputFields = [`submit`, `buttons`, `tree`, `hr`, `paragraph`, `tabs`, `complexTabs`, 'browser'] as FieldType[]; + const notInputFields = [`submit`, `buttons`, `tree`, `hr`, `paragraph`, `tabs`, `complexTabs`, 'browser', 'heading'] as FieldType[]; const trees = this.fields.filter(field => [`tree`, 'browser'].includes(field.type)); const complexTabFields = this.fields.filter(field => field.type === `complexTabs`).map(tabs => tabs.complexTabItems?.map(tab => tab.fields)); @@ -175,12 +175,12 @@ export class CustomHTML extends Section { return /*html*/` - + ${title} - + - + ${this.options?.fullPage ? this.fields.map(field => field.getHTML()).join(``) : @@ -231,9 +231,9 @@ export class CustomHTML extends Section { ${this.fields.map(field => field.getHTML()).join(``)} ` - } + } - + - + `; } } @@ -387,7 +387,7 @@ export class CustomUI extends CustomHTML { /** * If no callback is provided, a Promise will be returned. * If the page is already opened, it grabs the focus and return no Promise (as it's alreay handled by the first call). - * + * * @param title the title displayed in the webview tab * @param checkData an optional function that can check and updates the data before they are returned. If it returns `false`, the view will stay open. * @returns a Promise> if no callback is provided @@ -464,59 +464,32 @@ export class CustomUI extends CustomHTML { protected getSpecificScript() { return /* javascript */ ` - const doDone = (event, buttonId) => { - console.log('submit now!!', buttonId) + const theForm = document.querySelector('#laforma'); + + const doDone = (event, button) => { + console.log('submit now!!', button || 'enter pressed') event?.preventDefault(); - - const data = { buttons: buttonId }; - new FormData(document.querySelector('#laforma')).entries().forEach(([key, value]) => data[key] = value); + const isValid = (!button || button.requiresValidation) ? validateInputs() : true; + if (isValid) { + const data = { buttons: button?.id }; + new FormData(theForm).entries().forEach(([key, value]) => data[key] = value); - // Convert checkboxes value to actual boolean - checkboxes.forEach(checkbox => data[checkbox] = (data[checkbox] === 'on')); + // Convert checkboxes value to actual boolean + checkboxes.forEach(checkbox => data[checkbox] = (data[checkbox] === 'on')); - vscode.postMessage({ type: 'submit', data }); + vscode.postMessage({ type: 'submit', data }); + } }; + //Pressing enter will submit the form + theForm.addEventListener("submit", doDone); + // Now many buttons can be pressed to submit for (const fieldData of groupButtons) { - const field = fieldData.id; - - console.log('group button', fieldData, document.getElementById(field)); - var button = document.getElementById(field); - - const submitButtonAction = (event) => { - const isValid = fieldData.requiresValidation ? validateInputs() : true; - console.log({requiresValidation: fieldData.requiresValidation, isValid}); - if (isValid) doDone(event, field); - } + const button = document.getElementById(fieldData.id); - button.onclick = submitButtonAction; - button.onKeyDown = submitButtonAction; - } - - for (const field of submitfields) { - const currentElement = document.getElementById(field); - if (currentElement.hasAttribute('rows')) { - currentElement - .addEventListener('keyup', function(event) { - event.preventDefault(); - if (event.keyCode === 13 && event.altKey) { - if (validateInputs()) { - doDone(); - } - } - }); - } else { - currentElement - .addEventListener('keyup', function(event) { - event.preventDefault(); - if (event.keyCode === 13) { - if (validateInputs()) { - doDone(); - } - } - }); - } + button.onclick = () => doDone(event, fieldData); + button.onKeyDown = () => doDone(event, fieldData); } `; } @@ -623,13 +596,13 @@ export class Field { return /* html */` ${this.renderLabel()} - ${this.renderDescription()} - <${tag} class="long-input" id="${this.id}" name="${this.id}" - ${this.inputType ? `type="${this.inputType}"` : ``} - ${this.default ? `value="${this.default}"` : ``} - ${this.readonly ? `readonly` : ``} + ${this.renderDescription()} + <${tag} class="long-input" id="${this.id}" name="${this.id}" + ${this.inputType ? `type="${this.inputType}"` : ``} + ${this.default ? `value="${this.default}"` : ``} + ${this.readonly ? `readonly` : ``} ${multiline ? `rows="${this.rows}" resize="vertical"` : ''} - ${this.minlength ? `minlength="${this.minlength}"` : ``} + ${this.minlength ? `minlength="${this.minlength}"` : ``} ${this.maxlength ? `maxlength="${this.maxlength}"` : ``} ${this.min ? `min="${this.min}"` : ``} ${this.max ? `max="${this.max}"` : ``}