So I want to open a file in markdown preview, so when the certain command is triggered I want to open a file in vscode (but in markdown preview mode)
What have I tried so far:
This will open the file in raw text mode
const docs = await workspace.openTextDocument("/path/to/file.md");
await window.showTextDocument(docs);
This will trigger markdown command and the just opened file from above will be rendered in markdown preview
await commands.executeCommand("markdown.showPreview");
Is there a better way to achieve this, since it take fraction of seconds to open the file and then trigger markdown preview
The markdown markdown.showPreview command takes a uri as its first argument. For example:
const uri = vscode.URI.file("/path/to/file.md");
await commands.executeCommand("markdown.showPreview", uri);
To control the column the editor is opened in, use the markdown.showPreviewToSide command instead. Here are the arguments it takes
Related
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).
I'm trying to build an extension that uses jq to help parse and jump through large json files. I have the basics setup, the issue I'm running into is since I'm using jq in a child process execute (cp.exec(...)) I'm only able to parse the data that's saved on the file. While I want to be able to parse even that json data in the editor that isn't saved. I know this is possible since vscode does something similar with ripgrep for its search. For example in the vscode source code (src\vs\workbench\services\search\node) you can see ripgrep is launched as a child process and searches the files for matches. It seems to use the fsPath of the file but it gets current editor results but I dont using the activeTextEdtiro.document.uri.fsPath.
I know you can get the entire current contents of the editor with something like
vscode.workspace.openTextDocument(uri).then((document) => {
let text = document.getText();
});
or your can get the uri / fsPath to the file with
vscode.window.activeTextEditor.document.uri.fsPath;
But the problem is the uri is outdated (ie doesnt have the unsaved changes) and I cant pipe or echo all the text into the jq command in a cp.exec using the getText() method. So how do you fetch the uri to the current state of the file.
I was wondering if anyone knew of a way to save the resulting PDF document to the server, instead of prompting the user to download it locally?
Using this:
http://www.cloudformatter.com/CSS2Pdf
Many thanks
Edit:
I am using the following JS to initiate the PDF.
$(function(){
$('#generatePDF').click(function(e) {
e.preventDefault();
var pdfdata = xepOnline.Formatter.Format('printableInvoice',
{
pageWidth:'216mm',
pageHeight:'279mm',
render: 'base64'
}
);
console.log(pdfdata);
});
});
Leaving the answer in place as the comments below are relevant. The original answer was how to get the source information (using the "base64" option), not the final PDF.
So to get the final PDF that is in memory, if you examine the code in Github:
https://github.com/Xportability/css-to-pdf/blob/master/js/xepOnline.jqPlugin.js
starting at the "else" at line 602 ... this "else" is executed if you force anything other than a download. If you chose "newwin" or "embed" as the method and the browser sniffing JS did not force it back to download (it does on Safari, IE and also mobile browsers), then this "else" is executed.
On a successful AJAX post, the function "xepOnline.Formatter.__postBackSuccess" is executed. This function starts at line 863. At line 865, the base64 encoded bytes of the actual PDF are loaded. If you debug your site and debug at that line of code, you can get the value of the var "base64" which will be the base64 encoded bytes.
So, if you only had Firefox and Chrome to consider, then you could do some mod to the code to post the result back to the server and not display it. If you have all those browsers to consider, you will need to add some option (like say option:'memory' which skips all browser sniffing, runs the AJAX version but with its own success function.
I can look at adding this to the library but you are free to pull it and make some mods yourself.
I have created a windows store application and I want the user to open Documents, Excel files and picture from the app. I want the files to open in their default application. i.e. Docs in word and pictures in windows picture viewer.
I have used the following code:
FileOpenPicker openPicker = new FileOpenPicker();
openPicker.FileTypeFilter.Add(".Doc");
openPicker.FileTypeFilter.Add(".Docx");
openPicker.FileTypeFilter.Add(".png");
openPicker.FileTypeFilter.Add(".jpg");
StorageFile file = await openPicker.PickSingleFileAsync();
if (file!=null)
{
await Windows.System.Launcher.LaunchFileAsync(file);
}
When I run this and browse to a word document the file opens up fine using word, great.
But if I browse to an image file, it doesn't do anything. I don't get any errors.
Any ideas what I need to do?
Thanks
There is no error and, simply, nothing happens? That's strange.
Here's my go-to syntax, but it's basically yours:
Let's consider what should happen. When you "launch" a docx you are basically asking the default viewer to open for that file, in that case Word. With an image you are asking the image viewer to launch. Should it work? Yes.
Launching a docx when Word is not installed should not result in the behavior your are seeing. No. You should get prompted to find a viewer in the Store. Same with an image. Even without a viewer you should get something.
Not to be a dork here, but have you rebooted? It really sounds more like something strange has happened. You might also try appending "file:///" to the front of the URL to perhaps invoke the file viewer more explicitly. None of that should be necessary however.
Best of luck
One other thing you can do is to force app picker if default program could not be launched like following:
if (file != null)
{
var options = new Windows.System.LauncherOptions();
options.DisplayApplicationPicker = true;
bool success = await Windows.System.Launcher.LaunchFileAsync(file, options);
}
I have an MHT (Microsoft web archive) file that I have added to my project folder. I need this file to display in a WebView on a help page. I have set the file's build action to "Content," like this question reccomended. I then use this code in the page's Loaded event handler.
Try
Dim strHelpNavigate = Path.Combine(Windows.ApplicationModel.Package.Current.InstalledLocation.ToString(), "\MyAppsHelp.mht")
webHelp.Navigate(New Uri(strHelpNavigate))
Catch ex As Exception
webHelp.NavigateToString("<html><head><style>body {font-family: segoe ui; color: white; background-color: black;}</style></head><body><h2>Sorry, the help page is currently unavailable.</h2></body></html>")
End Try
This code produces an exception: {"Invalid URI: The format of the URI could not be determined."}
I have also tried passing "\MyAppsHelp.mht" to the Navigate method like this question reccomended, but this produces the same exception, and I see from the Local window that the string passed to the Navigate method is the same either way.
Does anyone have any advice on how to display this file in the WebView?
WebView does not natively support HTML archive files, but you can do the work convert these files to html + images if you're so inclined.
Open the .mht file in notepad, and you'll see that there are separate sections for each part of the HTML file - you can parse these sections to get the HTML out, then the base64 encoded images, then save them in your local app folder and use WebView.NavigateToLocalStreamUri to load them. See http://blogs.msdn.com/b/wsdevsol/archive/2014/06/20/a-primer-on-webview-navigatetolocalstreamuri.aspx for details on how to use this method.
OF course, if it's a static file that you will be using all of the time, it would be far easier to just convert it before packaging the app.