Dev Faq
1
votes

Solution de contournement pour autoriser les fenêtres contextuelles dans l'extension VSCode WebView

Nous avons créé une extension VSCode WebView unique, strictement pour notre propre usage interne. Cette WebView offre la possibilité de capturer des modèles de conception pilotée par domaine qui sont du code généré dans l'API Microservice. L'un des éditeurs de type que nous avons ajoutés prend en charge le schéma JSON, et nous avons utilisé un composant OpenSource React pour implémenter cet éditeur. Nous avons fait très attention à ne pas implémenter de popup avec l'extension WebView, mais cet éditeur de schéma JSON implémente un certain nombre de boîtes de dialogue modales qui ne font pas surface à l'intérieur de notre extension VSCode WebView personnalisée.

Je recherche une solution de contournement à la restriction dans VSCode WebView Extension.

entrez la description de l'image ici

1 commentaires

Il semble beaucoup plus probable que quelqu'un puisse aider si la question avait un MCVE ( stackoverflow.com/help/minimal-reproducible- exemple ).

3 Réponses :

0
votes

Autant que je sache, actuellement vscode webview bloque les popups par défaut, la seule façon d'utiliser modal / popup dans webview est d'utiliser vscode.window.showInformationMessage ("message", {modal: true}) qui résout ou rejette en fonction de l'action de l'utilisateur.

0 commentaires
0
votes

Vous avez raison. Pour résoudre ce problème, nous passons aux fenêtres coulissantes. Cela fonctionne. Il est dommage que cette restriction existe car elle limitera l'utilisation de contrôles tiers qui reposent sur l'interaction de l'utilisateur via le dialogue modal.

1 commentaires

Avez-vous l'intention de faire un commentaire sur la réponse de Manpreet?

0
votes

VS Code bloque intentionnellement les modaux dans les vues Web. Consultez ce problème pour en savoir plus sur les raisons, mais en résumé:

  • Les vues Web ne devraient pas pouvoir éclater et affecter le reste de l'expérience de l'éditeur (en partie parce que les vues Web permettent d'exécuter du code potentiellement non approuvé qui n'a pas été installé avec l'extension)
  • Les modaux natifs ne correspondent pas au reste de l'interface utilisateur de VS Code et sont très limités dans ce qu'ils peuvent faire.

La manière correcte de collecter les entrées utilisateur à partir d'une vue Web est d'envoyer un message de votre vue Web à votre extension qui appelle les API d'interface utilisateur normales de VS Code, telles que showQuickPick ou showInformationMessage . Si la bibliothèque que vous utilisez ne vous permet pas d'injecter une méthode d'invite personnalisée, vous pouvez essayer de remplacer les globaux tels que window.alert () pour les connecter à l'API VS Code correspondante

0 commentaires

Articles qui pourrait vous intéresser :

La description n'est pas une exception définie sur Typescript, Mocha et VSCode
En utilisant VSCode, comment comparer deux commits non consécutifs sur un fichier dans Gitlens
Python os.getcwd () ne fonctionne pas sur les sous-dossiers dans VSCODE
Traitement de "Impossible de charger le plugin 'react' déclaré dans '.eslintrc': Impossible de trouver le module 'eslint-plugin-react'" Erreur ESLint