is there some event like onEditorOpen? - vscode-extensions

what i want to do
i want to write a plugin which could open file(which code could not) use user configed cmd.
user config like
{
'mp3':'c:/mp3player/mp3.exe {file_path}'
}
when i use code to open a mp3 the plugin will run this cmd
what the problem
i could not fould a event triger me on each file open
what i have know/try
vscode has some event like
workspaceContains:${toplevelfilename}
onLanguage:${language}
but all of this are hardcode in package.json and could not triger on all file type
help me
it there some advise? maybe this is not a vscode plugin should do?
thanks

The normal approach for that is to listen to the didOpen workspace event:
workspace.onDidOpenTextDocument((doc: TextDocument) => {
if (doc.languageId == "mp3" && doc.uri.scheme === "file") {
// do something
}
});
But note: vscode will not allow to open big or binary files. It will hence not activate your extension for that.

You can create such an application by using VS Code's Custom Editor API.
It seems that there is already an extension to play audio files.
https://marketplace.visualstudio.com/items?itemName=sukumo28.wav-preview

Related

Can vscode's markdown preview scripts trigger actions directly in an extension?

I'm writing a vscode extension where I'm hoping to squeeze more dynamic functionality out of markdown preview. Effectively the problem I'm trying to solve is:
In markdown preview, there's a checkbox
When user clicks the checkbox in markdown preview, send a message/event to the vscode extension runtime
Vscode extension can listen for this message/event and store the action in local storage
Checkbox state is saved - and subsequent renders of the markdown preview can use this action
Ideally, I'd like to do this while keeping the default markdown preview security (https://code.visualstudio.com/Docs/languages/markdown#_strict). After all, I don't need the extension to or markdown preview script to talk to a remote server - I just want them to be able to talk to one another.
Problem as code
To write the problem as sudo code, I want my markdown preview script to contain something like:
const button = ... // get button element
button.addEventListener('click', () => {
... /*
* Send a message to the vscode extension. Something like:
* `vscode.postMessage('vscode.my-extension.preview-action' + value)`
* (which I can't get to work, I'll discuss why)
*/
});
where then my extension can listen for messages like 'vscode.my-extension.preview-action'.
What I've Tried Already
I have tried acquireVsCodeApi() but because the markdown extension already does that, I can't do it again in the subsequent loaded script. I've also tried registering a uri handler but as far as I can try out the preview script still needs to fetch to that uri, which is still blocked by the default markdown security settings.
Perhaps markdown preview scripts are not the place to do this kind of thing, but I just wanted to leverage as much as possible that's already there with the vscode markdown extension. I want to supplement markdown but not replace it, the functionality I want to add is just icing on markdown documentation.
I've read https://code.visualstudio.com/api/extension-guides/markdown-extension#adding-advanced-functionality-with-scripts and it doesn't tell me much about markdown extension scripts capabilities and limitations.
Thanks to #LexLi I looked at some of the source code in the markdown extension and was able to come up with an ugly hack to make this work in preview scripts. Markdown allows normal clicks. And vscode extensions can handle normal clicks. I've paraphrased the code so there could be small syntax errors.
In the extension I did this:
vscode.window.registerUriHandler({
handleUri(uri: vscode.Uri): vscode.ProviderResult<void> {
console.log(`EXTENSION GOT URL: ${uri.toString()}`);
},
});
Then I made sure my extension/preview script put this in the document
<!-- in the preview script I place a button like this -->
<!-- it even works with hidden :) so I can do more app customization -->
<a
hidden
id="my-extension-messager"
href="vscode://publisher-id.my-extension"
>
cant see me but I'm there
</a>
Then my preview script I can even set href before faking a click:
const aMessager = document.querySelector("#my-extension-messager");
console.log('client is setting attribute and clicking...')
aMessager.setAttribute('href', 'vscode://publisher-id.my-extension?action=do-something');
aMessager.click();
console.log('client clicked');
Logs I saw (trimmed/tweaked from my particular extension to match the contrived example):
client is setting attribute and clicking...
client clicked
[Extension Host] EXTENSION GOT URL: vscode://publisher-id.my-extension?action%3Ddo-something
It's a hack but I can do a lot with this. Within the URL I can encode data back to the extension and kind of pass whatever I want (as long as data is relatively small).

Playwright upload file on non-input element

So I'm currently trying to automate uploading a profile photo on an Electron App using Playwright and I'm running into issues with 'filechooser' event.
await windowA.click('data-testid');
const [fileChooser] = await Promise.all([
windowA.waitForEvent('filechooser'),
// windowA.locator('text=Edit').click(),
windowA.waitForTimeout(3000),
windowA.locator(selector).click(),
]);
The element used to upload a photo isn't an input type so I'm using
await fileChooser.setFiles(
[filepath],
{ timeout: 1000 }
);
The issue is trying to get playwright to select an image from the input dialog box that pops up and it just won't select any files. I've also been trying to get playwright to select an image in my fixtures folder, which is in a relative path to the test, but haven't had success in either case.
The error that Playwright is displaying is
page.waitForEvent: Timeout while waiting for event "filechooser"
waiting for event "filechooser"
Any know what the issue is?
My slippers told me that if you are using the window.showOpenFilePicker() to get a file from the user, you won't get the filechooser event at all. This is because internally, the showOpenFilePicker is not triggering an event as it is still a WIP.
More infos can be found there but I don't think there is a workaround for now
https://githubmemory.com/repo/microsoft/playwright/issues/8850
Pupetter has actually the same issue: https://github.com/puppeteer/puppeteer/issues/5210`
One fix would be to not use the showOpenFilePicker() at all, but instead rely on the <input> element to gather the file. This is a bit more cumbersome for the dev but is more supported and should trigger the 'filechooser' event.
Another fix could be to add a function you can override when running in test move for it to not even need to open the file chooser. Something like
getFileFromPicker() => {
if(!isRunningInTest) {
// do the showOpenFilePicker logic as usual in the app and the user will need to choose a file from it
} else {
// provide synchronously a buffer to use as file content, and so do not even show the picker to the testing user.
}

determining the language of a file from its filepath

In my VSCode extension I have a string filePath and need to know its associated language.
As the user can change the language associations in the configuration (files.associations) only checking for the known extensions does not work.
Is there a functionality in the VSCode API to do that? Or do I need to extract the information from the configuration using vscode.workspace.getConfiguration("files").get("associations")?
Try using workspace.openTextDocument and document.languageId:
import { workspace } from 'vscode';
workspace.openTextDocument(pathToMyFile).then(doc => {
console.log(doc.languageId)
})
This only opens the document from the disk, it will not show it in the editor.

How to add a custom library to a scratch file

In PhpStorm/WebStorm how can I add a custom library so that the file compiles? In my case it would be Lodash?
I tried to add lodash to global libs but it did not help...
Using require and relative paths.
Here is a crazy example of using lodash in a scratch file:
const _ = require('./../../../DEV/node_modules/lodash');
var anything = [1, 2];
_.map(anything, function (item) {
console.log('Working >-P');
return item;
});
In fact, you can just add a package.json file to your scratches.
You could create one manually, but the following may be more practical:
Right click on any of your scratch files, then select "Open in terminal".
You'll notice that it will open the terminal directly in the folder of the scratches.
That's a folder such as C:\Users\ba\AppData\Roaming\JetBrains\WebStorm2020.2\scratches.
Since you are in the correct directory now, you can just run npm init from that terminal to create your package.json file. (You will be prompted with a bunch of questions, but you can just press enter for all questions if you are fine with the default values)
This file will just show up in your scratches along with your other files.
To answer your specific question, if you want to add lodash to those packages, you can open the terminal in the way mentioned above. This terminal will be in the correct folder. And then you can just run your npm install lodash from there.
var path = require('path');
_require = require;
require = function (p) {
var absPath = path.join(process.cwd(), p);
var relPath = path.relative(__dirname, absPath);
return _require(relPath);
}
var Query = require('./server/libs/query_builder.js');
A bit late to answer, but if you replace the require function as I show above you can use it normally.
Well I would suggest in this case to use plugin named Quokka.js available for Webstorm and other JetBrains tools.
It's recognise automatically the libraries from node_modules and have a lot of other features (work much better that pure scratch files).
When you will install it the default scratch Javascript and Typescript files will work with Quokka.
You will find the details on the official tool page: https://quokkajs.com/
Please select JET BRAINS tool on main page. Hope it helps.

How do I write a Photoshop Extension (8BX) plugin?

The Adobe Photoshop CS3/4 SDK has a lot of examples for Filter, Import, Export, etc plugins but I haven't found anything that illustrates how to write a 8BX plugin.
The reason is, I need to write one is to add a new drop-down menu to the Photoshop root toolbar (where it displays File, Edit, Image ... Window. Help drop-down menus). I have seen a product like OneSoftware install an 8BX plugin into Adobe Photoshop CS3\Plug-Ins\Extensions directory that causes PS to add adrop down menu for OneSoft. That suggests this is a solvable problem :-)
I tried by changing an existing plugin in the SDK samples but no go. Specifically I modified the resource file:
resource 'PiPL' (ResourceID, plugInName " PiPL", purgeable)
{
{
Kind { **Extension** },
Name { plugInName "..." },
...
Despite using the Extension Kind, PS never loads the plugin. It doesn't generate any compile-time or load error either.
Does anyone have any ideas on how to go about doing this?