Is there a way to inject custom properties into a document/editor?
For example, I need to edit text from an api endpoint. It's easy to make the api call and display the data in an editor, then edit the text. I cannot seem to find a good way to put the meta-data about the text so a post can be made to update the source. Need to hold information like api-end-point and document id without injecting it into the main editor text.
I have been looking into everything from a CustomDocument/provider to a custome file system provider, but those options seem to be rather complicated for what I need.
Example:
api-endpoint: GET /docs
const resp = [{
name: /docs/note1.txt,
id: 12345,
content: 'some text document content'
}, {
name: /notes/othernote.txt
id: 54312,
content: 'special text in another note'
}];
// open a document/editor and display the content of one of the docs from the api reponse
await workspace.openTextDocument({ content: resp[0].content, language: 'text' })
.then( async (doc) => {
await window.showTextDocument( doc, { preview: false });
this.documents.push(doc);
});
Now we have an editor displaying the content but no way to link that content back to the api endpoint (with doc id). It seems I need to be looking the file system provider so I can inject additional details in to the file stats.
https://code.visualstudio.com/api/references/vscode-api#FileSystemProvider
Suggestions?
Related
I want to display the data of an article using gatsby-source-facebook.
But I don't know how to write a query.
I can't find the best query at http://localhost:8000/___graphql
I make a simple website with gatsby.js.
I want to get facebook article data (posting date and text) and display it on the site.
I installed gatsby-source-facebook for that.
And changed gatsby-config.js.
→ https://www.gatsbyjs.org/packages/gatsby-source-facebook/
//`gatsby-config.js`
plugins: [
{
resolve: `gatsby-source-facebook`,
options: {
places: [`${facebookPageID}`], // Can be either a numeric ID or the URL ID
params: {
fields: 'hours, posts { message, created_time }', // See Facebooks API to see what you can query for
},
key: process.env.FACEBOOK_GRAPH_TOKEN, // You will need to create a Facebook application and go through review in order to get an API token.
},
},
],
I don't know how to write a query, so I can't get the data. (Can not be displayed.)
For example, http://localhost:8000/___graphql
query {
site {
siteMetadata {
title
description
}
}
}
If you enter and execute}, the title and description of the site set in gatsby-config.js enter code here will be displayed. This is normal. So how do you write a query to display facebook article data?
I searched a lot to solve this problem, but I didn't find a solution.
I only found a similar question (How to add facebook comment plugin in Gatsby?) but it could not be resolved. This question was the same as what I wrote here (https://www.gatsbyjs.org/packages/gatsby-source-facebook/).
tl;dr:
Try this:
query {
allFacebookArticles {
edges {
node {
title,
description
}
}
}
}
Explanation
That plugin stores its data into types matching the format Facebook${type} where $type is the type of thing you're pulling (in your case, articles, so it'd be FacebookArticle).
From GraphiQL, though, you should be able to see that on the sidebar on the left.
Here's an example from my current project (with some other options open):
I need to make auto furigana view for my Japanese website content. For that I just tried many possible solutions.
In Yahoo's API there is a way of doing it.
<?php
$appid = 'My api Key';
$sentence1="日本";
$sentence = mb_convert_encoding($sentence1, 'utf-8', 'auto');
echo $request = "http://jlp.yahooapis.jp/FuriganaService/V1/furigana?appid=".$appid."&sentence=".urlencode($sentence);
But In this Yahoo API, we need to include all content into a variable and split into separate. It makes more time because my content is dynamics.
I need a auto furigana solution like IPA Furigana Google Extension.
Thanks in advance.
https://www.furiousgana.com/api/
Adding this here for anyone who might be interested in furigana generation.
You can generate furigana by sending a post request to this 'https://api.furiousgana.com' and setting the body of the data to an object or array.
The English tag is optional.
const query = [
{
japanese:'気を付けて',
english:'Take care!'
},
{
japanese:'お元気ですか？',
english:'Are you ok?'
}
]
axios({
method: 'post',
url: 'https://api.furiousgana.com',
data: query
})
.then(({data})=>{
console.log(data) // here is you data
});
The final step would be to parse the generated furigana so that it wraps the content in & tags
This github will help full for furigana.
Just pass the variable to the kuroshiro.convert('variable') and then you will get the data with furigana also with ruby tag.
https://github.com/hexenq/kuroshiro.js
I want to have something like a 'result page' for an add-on, an own page of the add-on that will be open and display annotations and other result things. Ideally I would use an .html file located in the data directory of the add-on.
Does the window module provide the ability to open extension's own files?
Usually you will want to open a new tab, not a window. There is no problem opening pages from your data directory, you simply have to use the URL returned by self.data.url():
var tabs = require("sdk/tabs");
var self = require("sdk/self");
tabs.open({
url: self.data.url("result-page.html"),
inBackground: false, // This can also be: inNewWindow: true
});
This page won't have any special privileges however. In particular, it won't have any access to your add-on's data and it won't be able to exchange messages with your add-on. For that you need to inject a content script into the newly open tab:
tabs.open({
url: self.data.url("result-page.html"),
inBackground: false,
onReady: function(tab)
{
tab.attach({
contentScriptFile: self.data.url("result-page.js"),
onMessage: function(message)
{
// Message from content script, send a response?
}
});
}
});
See tab.attach() and Communicating with content scripts.
I've implemented a REST/CRUD backend by following this article as an example: http://coenraets.org/blog/2012/10/creating-a-rest-api-using-node-js-express-and-mongodb/ . I have MongoDB running locally, I'm not using MongoLabs.
I've followed the Google tutorial that uses ngResource and a Factory pattern and I have query (GET all items), get an item (GET), create an item (POST), and delete an item (DELETE) working. I'm having difficulty implementing PUT the way the backend API wants it -- a PUT to a URL that includes the id (.../foo/) and also includes the updated data.
I have this bit of code to define my services:
angular.module('realmenServices', ['ngResource']).
factory('RealMen', function($resource){
return $resource('http://localhost\\:3000/realmen/:entryId', {}, {
query: {method:'GET', params:{entryId:''}, isArray:true},
post: {method:'POST'},
update: {method:'PUT'},
remove: {method:'DELETE'}
});
I call the method from this controller code:
$scope.change = function() {
RealMen.update({entryId: $scope.entryId}, function() {
$location.path('/');
});
}
but when I call the update function, the URL does not include the ID value: it's only "/realmen", not "/realmen/ID".
I've tried various solutions involving adding a "RealMen.prototype.update", but still cannot get the entryId to show up on the URL. (It also looks like I'll have to build the JSON holding just the DB field values myself -- the POST operation does it for me automatically when creating a new entry, but there doesn't seem to be a data structure that only contains the field values when I'm viewing/editing a single entry).
Is there an example client app that uses all four verbs in the expected RESTful way?
I've also seen references to Restangular and another solution that overrides $save so that it can issue either a POST or PUT (http://kirkbushell.me/angular-js-using-ng-resource-in-a-more-restful-manner/). This technology seems to be changing so rapidly that there doesn't seem to be a good reference solution that folks can use as an example.
I'm the creator of Restangular.
You can take a look at this CRUD example to see how you can PUT/POST/GET elements without all that URL configuration and $resource configuration that you need to do. Besides it, you can then use nested resources without any configuration :).
Check out this plunkr example:
http://plnkr.co/edit/d6yDka?p=preview
You could also see the README and check the documentation here https://github.com/mgonto/restangular
If you need some feature that's not there, just create an issue. I usually add features asked within a week, as I also use this library for all my AngularJS projects :)
Hope it helps!
Because your update uses PUT method, {entryId: $scope.entryId} is considered as data, to tell angular generate from the PUT data, you need to add params: {entryId: '#entryId'} when you define your update, which means
return $resource('http://localhost\\:3000/realmen/:entryId', {}, {
query: {method:'GET', params:{entryId:''}, isArray:true},
post: {method:'POST'},
update: {method:'PUT', params: {entryId: '#entryId'}},
remove: {method:'DELETE'}
});
Fix: Was missing a closing curly brace on the update line.
You can implement this way
$resource('http://localhost\\:3000/realmen/:entryId', {entryId: '#entryId'}, {
UPDATE: {method: 'PUT', url: 'http://localhost\\:3000/realmen/:entryId' },
ACTION: {method: 'PUT', url: 'http://localhost\\:3000/realmen/:entryId/action' }
})
RealMen.query() //GET /realmen/
RealMen.save({entryId: 1},{post data}) // POST /realmen/1
RealMen.delete({entryId: 1}) //DELETE /realmen/1
//any optional method
RealMen.UPDATE({entryId:1}, {post data}) // PUT /realmen/1
//query string
RealMen.query({name:'john'}) //GET /realmen?name=john
Documentation:
https://docs.angularjs.org/api/ngResource/service/$resource
Hope it helps
It would be great if we could manage the titles of each image that we upload when uploading multiple images. This way I could select each image that I want to upload, title them, then hit the upload button. Right now one must either upload one by one or have all the selected images have the same title.
Kinda like Facebook or Panoramio where it's easy to manage the titles of the images before uploading.
This isn't natively supported in Fine Uploader at the moment, but I've opened up a feature request and tentatively scheduled it for the 3.7 milestone. In the meantime, you can certainly provide your own UI elements to allow users to provide alternate names for each upload-able item and pass these new names as a parameter. Server-side, you would have to parse this parameter and associate it with the uploaded item. Fine Uploader will have to adopt a parameter name that contains the user-supplied alternate filename anyway (and the server will have to be aware of this convention and parse this parameter), since we won't be able to change the value file input field sent along with the multipart encoded request.
use this:
var uploader = $('.uploader'),
titleBox = $('input[type=text]');
uploader.fineUploader({
request: {
endpoint: 'path/to/url'
},
formatFileName: function (name) {
var title = titleBox.val() + ' - ' + name + '';
titleBox.val('');
return title;
},
});
uploader.on('submit', function (event, id, name) {
uploader.fineUploader('setParams', {title: titleBox.val()}, id);
});