How make a screen with fields in VSCode Plugin - user-interface

How do I create a custom screen, with text fields and dropdowns for a plugin in VSCode, something like the settings screens I saw in some plugins, or like this Jira screen which is a form for adding a new issue?

That example is using the VS Code webview API. Webviews let you render arbitrary html in the editor, so you can create as complex a form as you wish. This example extension shows how to use the webview api.
For simple input cases however please try using VS Code's native input APIs, such as QuickInput

Related

How to use url image inserting dialog instead of upload in CKEditor 5 Classic

I want to use CKEditor 5, insert image with URL dialog, instead of its default file upload dialog. how to do this in CKEditor 5 Classic?
There is, as far as I know, no such feature officially provided.
There is, however, a tutorial provided in the documentation on how to write such a feature: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/creating-simple-plugin.html
There is also a separate project on github for the same purpose, which appears to be a bit more stylish: https://github.com/khanhna/ckeditor5-image-via-url
Both approaches require to configure a modified build, and both appear to lack an important component: a button in the image's toolbar to edit that URL later on.
So, a more simple approach that does achieve practically the same is to just drag the images into the editor from some browser window.

How to perform Preview in CKEditor

I am using CKEditor to get HTML from the user. The user will use HTML tags and it will be saved in the database. I need a functionality for the user to see how the page will be displayed when open as .html before saving in the database.
Is it possible to do that using CKEditor and if yes.....then how?
Thanks-in-Advance
It's certainly possible, but depends a lot on your specific requirements.
Get the contents of the editor using editor.getData(), then open a pop up window displaying that content - this should be relatively simple with JavaScript so I won't give any examples - you'll have to try it yourself first :). If a pop up is not something you want to use, maybe use an inline dialog, such as the ones that jQuery uses.
I would create the workflow so that the preview box has a save button inside it, forcing the user to preview before saving. If that's not acceptable, then create a separate button on your page to do the preview.

Options page for Firefox addon using the Add-on Builder (JetPack)

I am developing a Firefox extension and want to open a custom html page where the user can adjust the settings. I am able to do it in different ways, but would like to use the standard Options button that is shown in the add-on manager of Firefox.
I have seen some documentation about it, but I am having problems on finding proper documentation for this function using the online Add-on Builder:
Preferences system,
Inline options,
Simple prefs.
Does anybody know how to just add that standard Options button that is shown in the add-on manager and handle its click event to show a custom options page? (just like it's possible in Google Chrome)
Builder projects have an 'Properties' dialog that has a field you can paste the extra JSON in that you need to create preferences:
https://www.evernote.com/shard/s1/sh/cdb97850-935d-4cf1-95f1-a25c130d1498/4b0b2553f3aa85e4d6489c1d50492c97
( fixed the link, sorry )
Here's an example in builder that implements all the different types, and contains documentation as well:
https://builder.addons.mozilla.org/package/60337/latest/
You'll notice that one of the type of prefs you can define is a 'control' pref, essentially a button that emits a custom event you can listen of and react to from main.js. You could then open a new tab or addon-page with additional preferences?
https://addons.mozilla.org/en-US/developers/docs/sdk/latest/packages/addon-kit/simple-prefs.html#prefs

how to enable Safari Extensions when using a web view

I am using a Web view in my application, instead of open a Safari browser instance, so I noticed that Safari extensions doesn't work. Is there a possibility to enable this feature when using a custom web view in a Cocoa Application?
The reason by which I need to use Safari extensions is to inject javascript to whatever web page is loaded at one moment, so if is there another approach to do it without using extensions, welcome any suggestions or samples.
There's no way to use Safari extensions in a web view.
If your script isn't too big, how about formatting it as a "javascript:" bookmarklet and setting the web view's location to it?
[Edit: Stuff below added in response to questioner's request for "a bit more about that technique".]
Say you want to change the background color of the page to yellow and all the text to red. The javascript to do that would be something like:
document.body.style.backgroundColor = "yellow";
document.body.style.color = "red !important";
To turn the script into a bookmarklet, you just:
Wrap it in an anonymous function,
remove all line breaks,
(optionally) remove any unnecessary spaces,
url-encode it,
and prefix the whole thing with "javascript:".
So, the example would become:
javascript:(function(){document.body.style.backgroundColor%3D%22yellow%22%3B%0Adocument.body.style.color%3D%22red%20!important%22%3B%0A}());
Then you can set the webview's window.location to that string to "run" the bookmarklet.
Here is a page with an automatic script to bookmarklet converter that seems to work.

How to override WebKit's PDFViewSavePDFToDownloadFolder?

I have an application that includes a WebView, which automatically displays PDFs in WebKits WebPDFView. When the user hovers above the lower portion of the document, an overlay appears that enables zooming, opening in Finder and saving the PDF in the download folder.
I would like to implement the latter, but I have no idea how to go about it, except that I need to implement PDFViewSavePDFToDownloadFolder. However, where do I implement it? I'd appreciate any pointers.
If you want to monkey patch Apple's built-in PDF viewer, you can't unless you want to use a code injection hack that is guaranteed to break. If you want to implement your own PDF viewer, then you build a WebKit plugin.

Resources